update product details

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

api/chat.ts

@@ -11,15 +11,15 @@ import {
   reactEditorTools,
   getEditorContext,
 } from "@reacteditor/plugin-ai/server";
-import { shopifyFetch } from "@/editor/services/shopify/client";
+import { shopifyFetch } from "@/services/shopify/client";
 import {
   GET_PRODUCTS_QUERY,
   GET_PRODUCT_QUERY,
-} from "@/editor/graphql/products";
+} from "@/graphql/products";
 import {
   GET_COLLECTIONS_QUERY,
   GET_COLLECTION_PRODUCTS_QUERY,
-} from "@/editor/graphql/collections";
+} from "@/graphql/collections";
 
 type Body = {
   messages: UIMessage[];

app.schema.json

@@ -2,20 +2,20 @@
   "/": {
     "root": {
       "props": {
-        "title": "Maison — Considered essentials",
-        "headerFont": "Playfair Display",
+        "title": "Pulse — Made to Move",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
         "bodyFont": "Inter",
-        "primaryColor": "#0a0a0a",
-        "secondaryColor": "#64748B",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
         "accentColor": "#f5f5f5",
         "bgColor": "#ffffff",
-        "fgColor": "#0a0a0a",
+        "fgColor": "#111111",
         "mutedColor": "#f5f5f5",
-        "roundedness": "md",
-        "radius": "md",
-        "shadowLevel": "sm",
-        "shadow": "sm",
-        "maxWidth": "xl"
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
       }
     },
     "content": [
@@ -23,11 +23,12 @@
         "type": "navigation",
         "props": {
           "id": "nav-home",
-          "brand": "Maison",
+          "brand": "PULSE",
           "links": [
-            { "label": "Shop", "href": "/collections" },
-            { "label": "Lookbook", "href": "/lookbook" },
-            { "label": "Journal", "href": "/journal" },
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
             { "label": "About", "href": "/about" }
           ],
           "showSearch": "yes",
@@ -42,23 +43,25 @@
         "props": {
           "id": "hero-home",
           "tagline": "Spring 2026",
-          "heading": "Made for the way you move",
-          "subheading": "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
-          "primaryCta": { "label": "Shop the collection", "href": "/collections" },
-          "secondaryCta": { "label": "Our story", "href": "/about" },
-          "imageUrl": "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
+          "heading": "Made to move.",
+          "subheading": "Performance gear engineered for athletes who train like they mean it. Built light. Built honest. Built for the next mile.",
+          "buttons": [
+            { "label": "Shop the kit", "href": "/search", "variant": "primary" },
+            { "label": "Our story", "href": "/about", "variant": "secondary" }
+          ],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/athletic-assortment.jpeg",
           "align": "left",
           "height": "lg",
-          "tone": "dark"
+          "tone": "light"
         }
       },
       {
         "type": "products-carousel",
         "props": {
           "id": "carousel-home",
-          "tagline": "New",
-          "heading": "Just dropped",
-          "subheading": "Fresh additions to the lineup.",
+          "tagline": "Just dropped",
+          "heading": "New arrivals",
+          "subheading": "Fresh kit for the season ahead.",
           "limit": 12,
           "slidesPerView": "4",
           "ctaLabel": "Shop new",
@@ -66,60 +69,92 @@
         }
       },
       {
-        "type": "featured-product",
+        "type": "hero",
         "props": {
-          "id": "featured-home",
-          "product": null,
-          "tagline": "Featured",
-          "ctaLabel": "Add to bag",
+          "id": "cover-home-performance",
+          "tagline": "Performance Series",
+          "heading": "Engineered to outlast you.",
+          "subheading": "Tested on track, trail, and treadmill. Every piece earns its place.",
+          "buttons": [],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/cover-performance.jpeg",
           "align": "left",
-          "tone": "muted"
-        }
-      },
-      {
-        "type": "collection-grid",
-        "props": {
-          "id": "collections-home",
-          "tagline": "Shop by collection",
-          "heading": "Curated edits",
-          "subheading": "Bundles built around the way you actually live.",
-          "layout": "tiles",
-          "limit": 6
+          "height": "lg",
+          "tone": "light"
         }
       },
       {
         "type": "features",
         "props": {
           "id": "features-home",
-          "tagline": "Why us",
-          "heading": "Built with intention",
-          "subheading": "A small set of values that shape every piece we make.",
+          "tagline": "Why Pulse",
+          "heading": "Three rules. No exceptions.",
+          "subheading": "",
           "columns": "3",
           "items": [
-            { "title": "Natural fibers", "body": "Linen, organic cotton, and merino — sourced from mills with traceable supply chains." },
-            { "title": "Small batches", "body": "Made in considered quantities so nothing goes to waste." },
-            { "title": "Built to last", "body": "Reinforced seams and finishes that age into something better." }
+            {
+              "title": "Engineered",
+              "body": "Every fabric, every seam, every fit decision starts with athletes on a track. Lab work comes after."
+            },
+            {
+              "title": "Field tested",
+              "body": "Twelve weeks. Two race blocks. One full season. Nothing ships without that on the record."
+            },
+            {
+              "title": "Guaranteed",
+              "body": "If it fails before its time, we replace it. If it fails on race day, we apologize and replace it."
+            }
           ]
         }
       },
+      {
+        "type": "hero",
+        "props": {
+          "id": "cover-home-discipline",
+          "tagline": "Discipline",
+          "heading": "The work happens before sunrise.",
+          "subheading": "We make the kit. You do the work. Five-thirty isn't early — it's the only honest hour.",
+          "buttons": [],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/cover-discipline.jpeg",
+          "align": "left",
+          "height": "lg",
+          "tone": "light"
+        }
+      },
+      {
+        "type": "collection-grid",
+        "props": {
+          "id": "collections-home",
+          "tagline": "Shop by sport",
+          "heading": "Built for what you actually do.",
+          "subheading": "",
+          "layout": "tiles",
+          "limit": 6
+        }
+      },
       {
         "type": "testimonials",
         "props": {
           "id": "testimonials-home",
-          "tagline": "Reviews",
-          "heading": "What our customers say",
+          "tagline": "From the field",
+          "heading": "Athletes on Pulse",
           "items": [
             {
-              "quote": "I've been wearing the same linen shirt for two summers now and it's somehow gotten better with every wash.",
-              "author": "Mara K.",
-              "role": "Berlin",
-              "avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80"
+              "quote": "Took the shell to Chamonix and back. Still smells, still works, still cheaper than therapy.",
+              "author": "Mateo S.",
+              "role": "Sub-3 marathoner / Boulder",
+              "avatar": ""
             },
             {
-              "quote": "Considered cuts, neutral palette, real fabric. Exactly what I want when I'm getting dressed in the dark.",
-              "author": "Theo R.",
-              "role": "Brooklyn",
-              "avatar": "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=200&q=80"
+              "quote": "I have one drawer of running gear. The Pulse half is the half I actually wear.",
+              "author": "Priya N.",
+              "role": "Ultra runner / Portland",
+              "avatar": ""
+            },
+            {
+              "quote": "Wore the shorts for an entire 16-week block. They held. That's the whole review.",
+              "author": "Jonas R.",
+              "role": "Track coach / Berlin",
+              "avatar": ""
             }
           ]
         }
@@ -128,12 +163,12 @@
         "type": "newsletter-cta",
         "props": {
           "id": "newsletter-home",
-          "tagline": "Stay in the loop",
-          "heading": "Letters from the studio",
-          "subheading": "New collections, mill stories, and the occasional invitation. Twice a month.",
+          "tagline": "Field notes",
+          "heading": "Weekly notes from the lab.",
+          "subheading": "Test results, training blocks, gear we cut and gear we kept. Every Monday at 5:30am.",
           "buttonLabel": "Subscribe",
           "endpoint": "",
-          "imageUrl": "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1800&q=80",
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/newsletter.png",
           "layout": "split"
         }
       },
@@ -141,23 +176,25 @@
         "type": "footer",
         "props": {
           "id": "footer-home",
-          "brand": "Maison",
-          "tagline": "Considered essentials, made in small batches and built to last beyond the season.",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
           "columns": [
             {
               "title": "Shop",
               "links": [
-                { "label": "All", "href": "/collections" },
+                { "label": "All gear", "href": "/search" },
                 { "label": "New", "href": "/collections/new" },
-                { "label": "Best sellers", "href": "/collections/best" }
+                { "label": "Run", "href": "/collections/run" },
+                { "label": "Train", "href": "/collections/train" },
+                { "label": "Sale", "href": "/collections/sale" }
               ]
             },
             {
               "title": "About",
               "links": [
                 { "label": "Our story", "href": "/about" },
-                { "label": "Materials", "href": "/materials" },
-                { "label": "Journal", "href": "/journal" }
+                { "label": "The lab", "href": "/lab" },
+                { "label": "Athletes", "href": "/athletes" }
               ]
             },
             {
@@ -165,6 +202,7 @@
               "links": [
                 { "label": "Shipping", "href": "/help/shipping" },
                 { "label": "Returns", "href": "/help/returns" },
+                { "label": "Lifetime guarantee", "href": "/help/guarantee" },
                 { "label": "Contact", "href": "/contact" }
               ]
             },
@@ -178,13 +216,13 @@
           ],
           "social": [
             { "label": "Instagram", "href": "#" },
-            { "label": "Pinterest", "href": "#" },
-            { "label": "TikTok", "href": "#" }
+            { "label": "Strava", "href": "#" },
+            { "label": "YouTube", "href": "#" }
           ],
           "showNewsletter": "no",
-          "newsletterHeading": "Stay in touch",
+          "newsletterHeading": "",
           "newsletterEndpoint": "",
-          "copyright": "© 2026 Maison. All rights reserved."
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
         }
       }
     ]
@@ -192,20 +230,20 @@
   "/products/:handle": {
     "root": {
       "props": {
-        "title": "Default product",
-        "headerFont": "Playfair Display",
+        "title": "Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
         "bodyFont": "Inter",
-        "primaryColor": "#0a0a0a",
-        "secondaryColor": "#64748B",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
         "accentColor": "#f5f5f5",
         "bgColor": "#ffffff",
-        "fgColor": "#0a0a0a",
+        "fgColor": "#111111",
         "mutedColor": "#f5f5f5",
-        "roundedness": "md",
-        "radius": "md",
-        "shadowLevel": "sm",
-        "shadow": "sm",
-        "maxWidth": "xl"
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
       }
     },
     "content": [
@@ -213,11 +251,12 @@
         "type": "navigation",
         "props": {
           "id": "nav-product",
-          "brand": "Maison",
+          "brand": "PULSE",
           "links": [
-            { "label": "Shop", "href": "/collections" },
-            { "label": "Lookbook", "href": "/lookbook" },
-            { "label": "Journal", "href": "/journal" },
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
             { "label": "About", "href": "/about" }
           ],
           "showSearch": "yes",
@@ -238,8 +277,8 @@
         "type": "products-carousel",
         "props": {
           "id": "carousel-related",
-          "tagline": "You might also like",
-          "heading": "Related pieces",
+          "tagline": "Pairs well with",
+          "heading": "Complete the kit",
           "limit": 8,
           "slidesPerView": "4",
           "ctaLabel": "Shop all",
@@ -250,13 +289,137 @@
         "type": "footer",
         "props": {
           "id": "footer-product",
-          "brand": "Maison",
-          "tagline": "Considered essentials, made in small batches.",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
           "columns": [
             {
               "title": "Shop",
               "links": [
-                { "label": "All", "href": "/collections" },
+                { "label": "All gear", "href": "/search" },
+                { "label": "New", "href": "/collections/new" }
+              ]
+            },
+            {
+              "title": "Help",
+              "links": [
+                { "label": "Shipping", "href": "/help/shipping" },
+                { "label": "Returns", "href": "/help/returns" },
+                { "label": "Lifetime guarantee", "href": "/help/guarantee" }
+              ]
+            }
+          ],
+          "social": [
+            { "label": "Instagram", "href": "#" },
+            { "label": "Strava", "href": "#" }
+          ],
+          "showNewsletter": "no",
+          "newsletterHeading": "",
+          "newsletterEndpoint": "",
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
+        }
+      }
+    ]
+  },
+  "/collections/:handle": {
+    "root": {
+      "props": {
+        "title": "Collection — Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
+        "bodyFont": "Inter",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
+        "accentColor": "#f5f5f5",
+        "bgColor": "#ffffff",
+        "fgColor": "#111111",
+        "mutedColor": "#f5f5f5",
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
+      }
+    },
+    "content": [
+      {
+        "type": "navigation",
+        "props": {
+          "id": "nav-collection",
+          "brand": "PULSE",
+          "links": [
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
+            { "label": "About", "href": "/about" }
+          ],
+          "showSearch": "yes",
+          "showAccount": "yes",
+          "showCart": "yes",
+          "sticky": "yes",
+          "tone": "default"
+        }
+      },
+      {
+        "type": "collection",
+        "props": {
+          "id": "collection-detail",
+          "collection": null,
+          "showDescription": "yes",
+          "showCoverImage": "yes",
+          "customCoverImage": "",
+          "columns": "4",
+          "limit": 24,
+          "defaultSort": "BEST_SELLING",
+          "showAvailability": "yes",
+          "showPriceRange": "yes",
+          "showProductType": "yes",
+          "productTypeOptions": [
+            { "label": "Tops" },
+            { "label": "Shorts" },
+            { "label": "Tights" },
+            { "label": "Outerwear" },
+            { "label": "Shoes" },
+            { "label": "Accessories" }
+          ],
+          "showVendor": "no",
+          "vendorOptions": [],
+          "showTags": "no",
+          "tagOptions": [],
+          "showColor": "yes",
+          "colorOptions": [
+            { "label": "Black", "color": "#111111" },
+            { "label": "White", "color": "#ffffff" },
+            { "label": "Grey", "color": "#707072" },
+            { "label": "Volt", "color": "#d6ff3f" },
+            { "label": "Sodium", "color": "#fa5400" }
+          ],
+          "showStyle": "no",
+          "styleOptions": [],
+          "showSize": "yes",
+          "sizeOptions": [
+            { "label": "XS" },
+            { "label": "S" },
+            { "label": "M" },
+            { "label": "L" },
+            { "label": "XL" },
+            { "label": "XXL" }
+          ],
+          "showMaterial": "no",
+          "materialOptions": [],
+          "metafieldFilters": []
+        }
+      },
+      {
+        "type": "footer",
+        "props": {
+          "id": "footer-collection",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
+          "columns": [
+            {
+              "title": "Shop",
+              "links": [
+                { "label": "All gear", "href": "/search" },
                 { "label": "New", "href": "/collections/new" }
               ]
             },
@@ -270,12 +433,271 @@
           ],
           "social": [
             { "label": "Instagram", "href": "#" },
-            { "label": "Pinterest", "href": "#" }
+            { "label": "Strava", "href": "#" }
           ],
           "showNewsletter": "no",
-          "newsletterHeading": "Stay in touch",
+          "newsletterHeading": "",
           "newsletterEndpoint": "",
-          "copyright": "© 2026 Maison. All rights reserved."
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
+        }
+      }
+    ]
+  },
+  "/search": {
+    "root": {
+      "props": {
+        "title": "Shop — Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
+        "bodyFont": "Inter",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
+        "accentColor": "#f5f5f5",
+        "bgColor": "#ffffff",
+        "fgColor": "#111111",
+        "mutedColor": "#f5f5f5",
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
+      }
+    },
+    "content": [
+      {
+        "type": "navigation",
+        "props": {
+          "id": "nav-search",
+          "brand": "PULSE",
+          "links": [
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
+            { "label": "About", "href": "/about" }
+          ],
+          "showSearch": "yes",
+          "showAccount": "yes",
+          "showCart": "yes",
+          "sticky": "yes",
+          "tone": "default"
+        }
+      },
+      {
+        "type": "search-products",
+        "props": {
+          "id": "search-products",
+          "heading": "All gear.",
+          "subheading": "Filter by sport, fabric, fit, color. Or sort by what's been beaten the hardest.",
+          "columns": "4",
+          "limit": 24,
+          "showAvailability": "yes",
+          "showPriceRange": "yes",
+          "showProductType": "yes",
+          "showVendor": "no",
+          "showTags": "yes",
+          "metafieldFilters": [],
+          "defaultSort": "BEST_SELLING",
+          "productTypeOptions": [
+            { "label": "Tops" },
+            { "label": "Shorts" },
+            { "label": "Tights" },
+            { "label": "Outerwear" },
+            { "label": "Shoes" },
+            { "label": "Accessories" }
+          ],
+          "vendorOptions": [],
+          "tagOptions": [
+            { "label": "New" },
+            { "label": "Race day" },
+            { "label": "Field tested" },
+            { "label": "Sale" }
+          ]
+        }
+      },
+      {
+        "type": "footer",
+        "props": {
+          "id": "footer-search",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
+          "columns": [
+            {
+              "title": "Shop",
+              "links": [
+                { "label": "All gear", "href": "/search" },
+                { "label": "Run", "href": "/collections/run" },
+                { "label": "Train", "href": "/collections/train" }
+              ]
+            },
+            {
+              "title": "Help",
+              "links": [
+                { "label": "Shipping", "href": "/help/shipping" },
+                { "label": "Returns", "href": "/help/returns" }
+              ]
+            }
+          ],
+          "social": [
+            { "label": "Instagram", "href": "#" },
+            { "label": "Strava", "href": "#" }
+          ],
+          "showNewsletter": "no",
+          "newsletterHeading": "",
+          "newsletterEndpoint": "",
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
+        }
+      }
+    ]
+  },
+  "/about": {
+    "root": {
+      "props": {
+        "title": "About — Pulse",
+        "headerFont": "Archivo Black",
+        "headerFontWeight": "400",
+        "bodyFont": "Inter",
+        "primaryColor": "#111111",
+        "secondaryColor": "#707072",
+        "accentColor": "#f5f5f5",
+        "bgColor": "#ffffff",
+        "fgColor": "#111111",
+        "mutedColor": "#f5f5f5",
+        "radius": "xl",
+        "buttonRadius": "full",
+        "shadow": "none",
+        "maxWidth": "2xl"
+      }
+    },
+    "content": [
+      {
+        "type": "navigation",
+        "props": {
+          "id": "nav-about",
+          "brand": "PULSE",
+          "links": [
+            { "label": "Run", "href": "/collections/run" },
+            { "label": "Train", "href": "/collections/train" },
+            { "label": "Recover", "href": "/collections/recover" },
+            { "label": "Sale", "href": "/collections/sale" },
+            { "label": "About", "href": "/about" }
+          ],
+          "showSearch": "yes",
+          "showAccount": "yes",
+          "showCart": "yes",
+          "sticky": "yes",
+          "tone": "default"
+        }
+      },
+      {
+        "type": "hero",
+        "props": {
+          "id": "hero-about",
+          "tagline": "The lab",
+          "heading": "We don't make activewear. We make tools.",
+          "subheading": "Pulse started in a converted warehouse with three coaches, two athletes, and a whiteboard full of things they wished worked better. Eight years later, the whiteboard is still there. So is the standard.",
+          "buttons": [
+            { "label": "Shop the kit", "href": "/search", "variant": "primary" }
+          ],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/hero-about.png",
+          "align": "left",
+          "height": "lg",
+          "tone": "light"
+        }
+      },
+      {
+        "type": "features",
+        "props": {
+          "id": "features-about",
+          "tagline": "What we believe",
+          "heading": "Three rules. No exceptions.",
+          "subheading": "",
+          "columns": "3",
+          "items": [
+            {
+              "title": "Engineered",
+              "body": "Every fabric, every seam, every fit decision starts with athletes on a track. Lab work comes after, if at all."
+            },
+            {
+              "title": "Field tested",
+              "body": "Twelve weeks of training. Two race blocks. One full season. Nothing leaves the lab without that on the record."
+            },
+            {
+              "title": "Guaranteed",
+              "body": "If it fails before its time, we replace it. If it fails on race day, we apologize and replace it. That's the deal."
+            }
+          ]
+        }
+      },
+      {
+        "type": "hero",
+        "props": {
+          "id": "cover-about-performance",
+          "tagline": "Used up is the goal",
+          "heading": "Designed to be worn out, not preserved.",
+          "subheading": "If you're babying your kit, we did something wrong. Bring it back when it's done — we'll send the next one.",
+          "buttons": [],
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/cover-performance.jpeg",
+          "align": "left",
+          "height": "lg",
+          "tone": "light"
+        }
+      },
+      {
+        "type": "newsletter-cta",
+        "props": {
+          "id": "newsletter-about",
+          "tagline": "Field notes",
+          "heading": "Weekly notes from the lab.",
+          "subheading": "Test results, training blocks, gear we cut and gear we kept. Every Monday at 5:30am.",
+          "buttonLabel": "Subscribe",
+          "endpoint": "",
+          "imageUrl": "https://supabase.frontend-ai.com/storage/v1/object/public/assets/themes/pulse-nike/newsletter.png",
+          "layout": "split"
+        }
+      },
+      {
+        "type": "footer",
+        "props": {
+          "id": "footer-about",
+          "brand": "PULSE",
+          "tagline": "Performance gear for athletes who break their kit before they break themselves.",
+          "columns": [
+            {
+              "title": "Shop",
+              "links": [
+                { "label": "All gear", "href": "/search" },
+                { "label": "New", "href": "/collections/new" },
+                { "label": "Run", "href": "/collections/run" },
+                { "label": "Train", "href": "/collections/train" }
+              ]
+            },
+            {
+              "title": "About",
+              "links": [
+                { "label": "Our story", "href": "/about" },
+                { "label": "The lab", "href": "/lab" },
+                { "label": "Athletes", "href": "/athletes" }
+              ]
+            },
+            {
+              "title": "Help",
+              "links": [
+                { "label": "Shipping", "href": "/help/shipping" },
+                { "label": "Returns", "href": "/help/returns" },
+                { "label": "Lifetime guarantee", "href": "/help/guarantee" },
+                { "label": "Contact", "href": "/contact" }
+              ]
+            }
+          ],
+          "social": [
+            { "label": "Instagram", "href": "#" },
+            { "label": "Strava", "href": "#" },
+            { "label": "YouTube", "href": "#" }
+          ],
+          "showNewsletter": "no",
+          "newsletterHeading": "",
+          "newsletterEndpoint": "",
+          "copyright": "© 2026 Pulse. Built to be replaced when used up."
         }
       }
     ]

app/_components/editor-shell.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useMemo } from "react";
+import { Editor } from "@reacteditor/core";
+import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
+import type { UserConfig } from "@/config/types";
+
+export type EditorShellProps = {
+  config: UserConfig;
+  data: any;
+  routeKey?: string;
+};
+
+export function EditorShell({ config, data, routeKey }: EditorShellProps) {
+  const plugins = useMemo(() => [createTailwindCdnPlugin()], []);
+
+  const handlePublish = async (nextData: any, route?: any) => {
+    const resolved = route ?? (routeKey ? { key: routeKey } : undefined);
+    console.log({
+      type: "PUBLISH",
+      data: { data: nextData, route: JSON.stringify(resolved) },
+    });
+    if (typeof window !== "undefined" && window.parent !== window) {
+      window.parent.postMessage(
+        { type: "PUBLISH", data: { data: nextData, route: resolved } },
+        "*",
+      );
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  };
+
+  return (
+    <div className="h-screen w-screen">
+      <Editor
+        config={config as any}
+        data={data}
+        plugins={plugins}
+        iframe={{ enabled: true }}
+        ui={{ leftSideBarVisible: false }}
+        onPublish={handlePublish}
+      />
+    </div>
+  );
+}

app/collections/[handle]/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { collectionsConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function CollectionPage() {
+  const data = (schema as any)["/collections/:handle"];
+  return <Render config={collectionsConfig as any} data={data} />;
+}

app/editor/collections/[handle]/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { collectionsConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function CollectionEditorPage() {
+  const data = (schema as any)["/collections/:handle"];
+  return (
+    <EditorShell
+      config={collectionsConfig}
+      data={data}
+      routeKey="/collections/:handle"
+    />
+  );
+}

app/editor/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { homeConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function HomeEditorPage() {
+  const data = (schema as any)["/"];
+  return <EditorShell config={homeConfig} data={data} routeKey="/" />;
+}

app/editor/products/[handle]/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { productConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function ProductEditorPage() {
+  const data = (schema as any)["/products/:handle"];
+  return (
+    <EditorShell
+      config={productConfig}
+      data={data}
+      routeKey="/products/:handle"
+    />
+  );
+}

app/editor/search/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { EditorShell } from "@/app/_components/editor-shell";
+import { searchConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function SearchEditorPage() {
+  const data = (schema as any)["/search"];
+  return <EditorShell config={searchConfig} data={data} routeKey="/search" />;
+}

app/globals.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "@fontsource-variable/geist";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -29,10 +28,10 @@
   --color-input: var(--input);
   --color-ring: var(--ring);
 
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) * 0.5);
+  --radius-md: calc(var(--radius) * 0.75);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) * 1.5);
 
   --animate-marquee: marquee var(--duration) infinite linear;
   --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
@@ -60,9 +59,9 @@
   --color-chart-3: var(--chart-3);
   --color-chart-2: var(--chart-2);
   --color-chart-1: var(--chart-1);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6)
+  --radius-2xl: calc(var(--radius) * 2);
+  --radius-3xl: calc(var(--radius) * 3);
+  --radius-4xl: calc(var(--radius) * 4)
 }
 
 :root {
@@ -103,9 +102,16 @@
   --sidebar-ring: oklch(0.708 0 0);
 }
 
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: var(--border);
+}
+
 @layer base {
-  * { border-color: var(--border);
-    @apply border-border outline-ring/50; }
+  * { @apply outline-ring/50; }
   html, body { background-color: var(--background); color: var(--foreground); }
   body {
     font-family: var(--font-body), "Apple Color Emoji", "Segoe UI Emoji";

app/layout.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import "@reacteditor/core/react-editor.css";
+import "@reacteditor/plugin-media/styles.css";
+import "@reacteditor/plugin-ai/styles.css";
+import "./globals.css";
+import { Providers } from "./providers";
+
+export const metadata = {
+  title: "Shopify Storefront",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { homeConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function HomePage() {
+  const data = (schema as any)["/"];
+  return <Render config={homeConfig as any} data={data} />;
+}

app/products/[handle]/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { productConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function ProductPage() {
+  const data = (schema as any)["/products/:handle"];
+  return <Render config={productConfig as any} data={data} />;
+}

app/providers.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect, useState, type ReactNode } from "react";
+import { ShopifyProvider } from "@/contexts/shopify-context";
+
+const SHOPIFY_DOMAIN =
+  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
+const STOREFRONT_TOKEN =
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return null;
+
+  return (
+    <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
+      {children}
+    </ShopifyProvider>
+  );
+}

app/search/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Render } from "@reacteditor/core";
+import { searchConfig } from "@/config/configs";
+import schema from "@/app.schema.json";
+
+export default function SearchPage() {
+  const data = (schema as any)["/search"];
+  return <Render config={searchConfig as any} data={data} />;
+}

components.json

@@ -1,11 +1,11 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
   "style": "base-nova",
-  "rsc": false,
+  "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "src/globals.css",
+    "css": "app/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""

components/Heading.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Typography, type TypographyVariant } from "@/components/Typography";
+
+export type HeadingSize = "sm" | "md" | "lg" | "xl";
+export type HeadingAlign = "left" | "center";
+export type HeadingTone = "default" | "light";
+
+type SizeMap = {
+  title: TypographyVariant;
+  subtitle: TypographyVariant;
+  taglineGap: string;
+  subtitleGap: string;
+};
+
+const sizeMap: Record<HeadingSize, SizeMap> = {
+  sm: {
+    title: "h4",
+    subtitle: "subtitle2",
+    taglineGap: "mb-2",
+    subtitleGap: "mt-2",
+  },
+  md: {
+    title: "h3",
+    subtitle: "subtitle1",
+    taglineGap: "mb-3",
+    subtitleGap: "mt-3",
+  },
+  lg: {
+    title: "h2",
+    subtitle: "subtitle1",
+    taglineGap: "mb-3",
+    subtitleGap: "mt-3",
+  },
+  xl: {
+    title: "h1",
+    subtitle: "subtitle1",
+    taglineGap: "mb-4",
+    subtitleGap: "mt-4",
+  },
+};
+
+const alignClasses: Record<HeadingAlign, string> = {
+  left: "items-start text-left",
+  center: "items-center text-center",
+};
+
+export type HeadingProps = {
+  tagline?: React.ReactNode;
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  size?: HeadingSize;
+  align?: HeadingAlign;
+  tone?: HeadingTone;
+  className?: string;
+  titleClassName?: string;
+  subtitleClassName?: string;
+  taglineClassName?: string;
+  maxWidth?: string;
+};
+
+export function Heading({
+  tagline,
+  title,
+  subtitle,
+  size = "lg",
+  align = "left",
+  tone = "default",
+  className,
+  titleClassName,
+  subtitleClassName,
+  taglineClassName,
+  maxWidth,
+}: HeadingProps) {
+  if (!tagline && !title && !subtitle) return null;
+  const map = sizeMap[size];
+  const isLight = tone === "light";
+
+  return (
+    <div className={cn("flex flex-col", alignClasses[align], maxWidth, className)}>
+      {tagline ? (
+        <Typography
+          variant="caption"
+          className={cn(
+            map.taglineGap,
+            isLight && "text-background/70",
+            taglineClassName,
+          )}
+        >
+          {tagline}
+        </Typography>
+      ) : null}
+      {title ? (
+        <Typography
+          variant={map.title}
+          className={cn(isLight && "text-background", titleClassName)}
+        >
+          {title}
+        </Typography>
+      ) : null}
+      {subtitle ? (
+        <Typography
+          variant={map.subtitle}
+          className={cn(
+            map.subtitleGap,
+            isLight && "text-background/70",
+            subtitleClassName,
+          )}
+        >
+          {subtitle}
+        </Typography>
+      ) : null}
+    </div>
+  );
+}
+
+export default Heading;

components/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef } from "react";
 
 export type ThemeProps = {
   headerFont?: string;
+  headerFontWeight?: string;
   bodyFont?: string;
   primaryColor?: string;
   primaryForegroundColor?: string;
@@ -13,31 +14,28 @@ export type ThemeProps = {
   mutedColor?: string;
   mutedForegroundColor?: string;
   borderColor?: string;
-  roundedness?: "none" | "sm" | "md" | "lg" | "xl" | "full";
-  radius?: "none" | "xs" | "sm" | "md" | "lg";
-  shadowLevel?: "none" | "sm" | "md" | "lg" | "xl";
-  shadow?: "none" | "sm" | "md" | "lg";
-  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  radius?: "none" | "sm" | "md" | "lg" | "xl";
+  shadow?: "none" | "sm" | "md" | "lg" | "xl";
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "full";
 };
 
-const radiusMap: Record<NonNullable<ThemeProps["roundedness"]>, string> = {
+const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
   none: "0px",
   sm: "0.25rem",
   md: "0.5rem",
   lg: "0.75rem",
   xl: "1rem",
-  full: "9999px",
 };
 
-const radiusEnumMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
-  none: "0px",
-  xs: "0.125rem",
-  sm: "0.25rem",
-  md: "0.5rem",
-  lg: "0.75rem",
+const maxWidthMap: Record<NonNullable<ThemeProps["maxWidth"]>, string> = {
+  sm: "64rem",
+  md: "72rem",
+  lg: "80rem",
+  xl: "96rem",
+  full: "100%",
 };
 
-const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
+const shadowMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
   none: "0 0 #0000",
   sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
   md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
@@ -45,26 +43,40 @@ const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
   xl: "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)",
 };
 
-const shadowEnumMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
-  none: "0 0 #0000",
-  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-  md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
-  lg: "0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)",
-};
+function googleFontsHref(
+  headerFont?: string,
+  bodyFont?: string,
+  headerFontWeight?: string,
+): string | null {
+  const valid = (f?: string): f is string => !!f && f !== "system-ui";
+  const families: string[] = [];
+  const seen = new Set<string>();
 
-function googleFontsHref(headerFont?: string, bodyFont?: string): string | null {
-  const fonts = [headerFont, bodyFont].filter(
-    (f): f is string => !!f && f !== "system-ui"
+  const headerWeight = headerFontWeight || "400";
+  const bodyWeights = "400;500;600;700";
+
+  if (valid(headerFont)) {
+    seen.add(headerFont);
+    // Header font uses the configured weight only — avoids HTTP 400 from
+    // Google Fonts when a single-weight family (e.g. Archivo Black) is paired
+    // with a multi-weight default request.
+    families.push(
+      `family=${encodeURIComponent(headerFont)}:wght@${headerWeight}`,
     );
-  if (fonts.length === 0) return null;
-  const families = Array.from(new Set(fonts))
-    .map((f) => `family=${encodeURIComponent(f)}:wght@400;500;600;700`)
-    .join("&");
-  return `https://fonts.googleapis.com/css2?${families}&display=swap`;
+  }
+  if (valid(bodyFont) && !seen.has(bodyFont)) {
+    seen.add(bodyFont);
+    families.push(
+      `family=${encodeURIComponent(bodyFont)}:wght@${bodyWeights}`,
+    );
+  }
+  if (families.length === 0) return null;
+  return `https://fonts.googleapis.com/css2?${families.join("&")}&display=swap`;
 }
 
 export function ThemeProvider({
   headerFont,
+  headerFontWeight,
   bodyFont,
   primaryColor,
   primaryForegroundColor,
@@ -75,10 +87,9 @@ export function ThemeProvider({
   mutedColor,
   mutedForegroundColor,
   borderColor,
-  roundedness,
   radius,
-  shadowLevel,
   shadow,
+  maxWidth,
   children,
 }: ThemeProps & { children?: React.ReactNode }) {
   // Recompute CSS-variable map only when a relevant prop changes.
@@ -93,15 +104,16 @@ export function ThemeProvider({
     if (mutedColor) vars["--muted"] = mutedColor;
     if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
     if (borderColor) vars["--border"] = borderColor;
-    if (radius) vars["--radius"] = radiusEnumMap[radius];
-    else if (roundedness) vars["--radius"] = radiusMap[roundedness];
-    if (shadow) vars["--shadow"] = shadowEnumMap[shadow];
-    else if (shadowLevel) vars["--shadow"] = shadowMap[shadowLevel];
+    if (radius) vars["--radius"] = radiusMap[radius];
+    if (shadow) vars["--shadow"] = shadowMap[shadow];
+    if (maxWidth) vars["--container-max-width"] = maxWidthMap[maxWidth];
     if (headerFont) vars["--font-header"] = `"${headerFont}", system-ui, sans-serif`;
     if (bodyFont) vars["--font-body"] = `"${bodyFont}", system-ui, sans-serif`;
+    if (headerFontWeight) vars["--font-weight-header"] = headerFontWeight;
     return vars;
   }, [
     headerFont,
+    headerFontWeight,
     bodyFont,
     primaryColor,
     primaryForegroundColor,
@@ -112,10 +124,9 @@ export function ThemeProvider({
     mutedColor,
     mutedForegroundColor,
     borderColor,
-    roundedness,
     radius,
-    shadowLevel,
     shadow,
+    maxWidth,
   ]);
 
   // Imperatively push every CSS var onto :root inside the host document
@@ -145,20 +156,28 @@ export function ThemeProvider({
   }, [cssVars]);
 
   const fontsHref = useMemo(
-    () => googleFontsHref(headerFont, bodyFont),
-    [headerFont, bodyFont],
+    () => googleFontsHref(headerFont, bodyFont, headerFontWeight),
+    [headerFont, bodyFont, headerFontWeight],
   );
 
   // Plain CSS rules — applied directly, no Tailwind CDN runtime needed.
-  // Tailwind preflight resets h1..h6 to font-family: inherit, which would
-  // make headings pick up the body font. We override that here using the
-  // `--font-header` CSS var ThemeProvider sets per-page.
+  // Body font is set on `body` once and inherited by descendants (span, a,
+  // p, li, etc. don't need explicit rules — applying one to `span/a` would
+  // break heading children, anchors inside headings, and any element using
+  // `as="span"` to render a heading variant).
+  // Form controls have user-agent defaults, so they need an explicit override.
+  // Tailwind preflight resets h1..h6 to font-family: inherit, so we restore
+  // the heading font + weight here using the per-page CSS vars.
   const css = `
-    body, p, span, a, li, button, input, textarea, select {
+    body {
       font-family: var(--font-body), system-ui, -apple-system, sans-serif;
     }
+    button, input, textarea, select {
+      font-family: inherit;
+    }
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-header), system-ui, -apple-system, sans-serif;
+      font-weight: var(--font-weight-header, 600);
     }
   `;
 
@@ -169,6 +188,12 @@ export function ThemeProvider({
     @theme {
       --font-family-heading: var(--font-header), system-ui, -apple-system, sans-serif;
       --font-family-body: var(--font-body), system-ui, -apple-system, sans-serif;
+      --radius-sm: calc(var(--radius) * 0.5);
+      --radius-md: calc(var(--radius) * 0.75);
+      --radius-lg: var(--radius);
+      --radius-xl: calc(var(--radius) * 1.5);
+      --radius-2xl: calc(var(--radius) * 2);
+      --radius-3xl: calc(var(--radius) * 3);
     }
   `;
 

components/Typography.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "@/editor/lib/utils";
+import { cn } from "@/lib/utils";
 
 export type TypographyVariant =
   | "h1"
@@ -15,17 +15,17 @@ export type TypographyVariant =
   | "caption";
 
 const sizeClasses: Record<TypographyVariant, string> = {
-  h1: "text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tight leading-[1.05]",
-  h2: "text-4xl md:text-5xl font-semibold tracking-tight leading-[1.1]",
-  h3: "text-3xl md:text-4xl font-semibold tracking-tight leading-tight",
-  h4: "text-2xl md:text-3xl font-semibold tracking-tight leading-snug",
-  h5: "text-xl md:text-2xl font-semibold leading-snug",
-  h6: "text-lg md:text-xl font-semibold leading-snug",
+  h1: "text-5xl md:text-6xl lg:text-7xl tracking-tight leading-[1.05]",
+  h2: "text-4xl md:text-5xl tracking-tight leading-[1.1]",
+  h3: "text-3xl md:text-4xl tracking-tight leading-tight",
+  h4: "text-2xl md:text-3xl tracking-tight leading-snug",
+  h5: "text-xl md:text-2xl leading-snug",
+  h6: "text-lg md:text-xl leading-snug",
   subtitle1: "text-lg md:text-xl leading-relaxed text-muted-foreground",
   subtitle2: "text-base md:text-lg leading-relaxed text-muted-foreground",
   body1: "text-lg leading-relaxed",
   body2: "text-base leading-relaxed",
-  caption: "text-sm leading-relaxed text-muted-foreground",
+  caption: "text-xs font-bold uppercase tracking-[0.2em] text-muted-foreground",
 };
 
 // Inline-style fallbacks so headings size correctly even when Tailwind
@@ -33,17 +33,17 @@ const sizeClasses: Record<TypographyVariant, string> = {
 // hasn't compiled utility classes yet. The Tailwind classes above still
 // apply on top once available (responsive breakpoints, leading, etc.).
 const sizeStyles: Record<TypographyVariant, React.CSSProperties> = {
-  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, fontWeight: 600, letterSpacing: "-0.02em" },
-  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  fontWeight: 600, letterSpacing: "-0.02em" },
-  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, fontWeight: 600, letterSpacing: "-0.015em" },
-  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  fontWeight: 600, letterSpacing: "-0.01em" },
-  h5: { fontSize: "1.5rem",   lineHeight: 1.25, fontWeight: 600 },
-  h6: { fontSize: "1.25rem",  lineHeight: 1.3,  fontWeight: 600 },
+  h1: { fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 1.05, letterSpacing: "-0.02em" },
+  h2: { fontSize: "clamp(2rem, 4vw, 3rem)",     lineHeight: 1.1,  letterSpacing: "-0.02em" },
+  h3: { fontSize: "clamp(1.75rem, 3.5vw, 2.25rem)", lineHeight: 1.15, letterSpacing: "-0.015em" },
+  h4: { fontSize: "clamp(1.5rem, 3vw, 1.875rem)",   lineHeight: 1.2,  letterSpacing: "-0.01em" },
+  h5: { fontSize: "1.5rem",   lineHeight: 1.25 },
+  h6: { fontSize: "1.25rem",  lineHeight: 1.3 },
   subtitle1: { fontSize: "1.125rem", lineHeight: 1.6 },
   subtitle2: { fontSize: "1rem",     lineHeight: 1.6 },
   body1: { fontSize: "1.125rem", lineHeight: 1.6 },
   body2: { fontSize: "1rem",     lineHeight: 1.6 },
-  caption: { fontSize: "0.875rem", lineHeight: 1.5 },
+  caption: { fontSize: "0.75rem", lineHeight: 1.5, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase" },
 };
 
 const defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {
@@ -80,11 +80,22 @@ export function Typography<C extends keyof JSX.IntrinsicElements = "p">({
   const isHeading = variant.startsWith("h");
   const fontClass = isHeading ? "font-heading" : "font-body";
 
+  // Apply the heading font + weight inline so the styling holds even when
+  // the rendered element isn't h1–h6 (e.g. <span> via the `as` prop). The
+  // ThemeProvider's element-scoped CSS rule only matches real h-tags, and
+  // the `font-heading` Tailwind utility can't be relied on in CDN mode.
+  const fontStyles: React.CSSProperties = isHeading
+    ? {
+        fontFamily: "var(--font-header), system-ui, sans-serif",
+        fontWeight: "var(--font-weight-header, 600)",
+      }
+    : {};
+
   return React.createElement(
     Tag,
     {
       className: cn(fontClass, sizeClasses[variant], className),
-      style: { ...sizeStyles[variant], ...style },
+      style: { ...fontStyles, ...sizeStyles[variant], ...style },
       ...rest,
     },
     children,

components/commerce/cart-drawer.tsx

@@ -1,20 +1,37 @@
 'use client';
 
 import React from 'react';
-import { useShopifyCart, redirectToCheckout } from '@/editor/hooks/use-shopify-cart';
-import { Button } from '@/editor/components/ui/button';
-import { Spinner } from '@/editor/components/ui/spinner';
+import { useShopifyCart, redirectToCheckout } from '@/hooks/use-shopify-cart';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import { Loader } from '@/components/ui/loader';
+import { X, ImageIcon, Minus, Plus } from 'lucide-react';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from '@/components/ui/empty';
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
-  SheetBody,
-  SheetFooter,
-} from '@/editor/components/ui/sheet';
+} from '@/components/ui/sheet';
 
 const CartDrawer: React.FC = () => {
-  const { isOpen, closeCart, items, itemCount, totalAmount, checkoutUrl, loading, removeItem, updateItemQuantity } = useShopifyCart();
+  const {
+    isOpen,
+    closeCart,
+    items,
+    itemCount,
+    totalAmount,
+    checkoutUrl,
+    loading,
+    removeItem,
+    updateItemQuantity,
+  } = useShopifyCart();
 
   const handleCheckout = () => {
     if (checkoutUrl) {
@@ -22,42 +39,56 @@ const CartDrawer: React.FC = () => {
     }
   };
 
-  const getItemImage = (item: typeof items[0]) => {
+  const getItemImage = (item: (typeof items)[0]) => {
     return item.merchandise.image?.url;
   };
 
-  const getSelectedOptions = (item: typeof items[0]) => {
+  const getSelectedOptions = (item: (typeof items)[0]) => {
     return item.merchandise.selectedOptions ?? [];
   };
 
   return (
-    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()} side="right">
-      <SheetContent className="w-full sm:max-w-md">
+    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()}>
+      <SheetContent
+        side="right"
+        className="w-full max-w-md"
+        showCloseButton={false}
+      >
         {/* Header */}
-        <SheetHeader>
+        <SheetHeader className="h-14 min-h-0 px-4 py-3 flex items-center border-b border-border">
+          <div className="flex items-center justify-between w-full">
             <SheetTitle className="text-base">
               Shopping Cart ({itemCount})
             </SheetTitle>
+            <Button onClick={closeCart} variant="ghost" size="icon-sm">
+              <X size={20} />
+            </Button>
+          </div>
         </SheetHeader>
 
         {/* Cart Items */}
-        <SheetBody>
+        <div className="flex-1 overflow-y-auto px-6 py-4">
           {loading && items.length === 0 ? (
             <div className="flex items-center justify-center py-12">
               <Spinner size="lg" />
             </div>
           ) : items.length === 0 ? (
-            <div className="text-center py-12">
-              <i className="ri-shopping-cart-line text-6xl text-gray-300 mb-4 block"></i>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">Your cart is empty</h3>
-              <p className="text-gray-500 mb-6">Add some products to get started!</p>
+            <Empty className="border-0">
+              <EmptyContent>
+                <EmptyHeader>
+                  <EmptyTitle>Your cart is empty</EmptyTitle>
+                  <EmptyDescription>
+                    Add some products to get started!
+                  </EmptyDescription>
+                </EmptyHeader>
                 <Button
                   onClick={closeCart}
-                className="font-heading"
+                  variant="outline"
                 >
                   Continue Shopping
                 </Button>
-            </div>
+              </EmptyContent>
+            </Empty>
           ) : (
             <div className="space-y-6">
               {items.map((item) => {
@@ -65,9 +96,12 @@ const CartDrawer: React.FC = () => {
                 const selectedOptions = getSelectedOptions(item);
 
                 return (
-                  <div key={item.id} className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0">
+                  <div
+                    key={item.id}
+                    className="flex items-start space-x-4 pb-6 border-b border-border last:border-b-0"
+                  >
                     {/* Product Image */}
-                    <div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
+                    <div className="w-20 h-20 bg-muted rounded-lg overflow-hidden flex-shrink-0">
                       {image ? (
                         <img
                           src={image}
@@ -75,25 +109,27 @@ const CartDrawer: React.FC = () => {
                           className="w-full h-full object-cover"
                         />
                       ) : (
-                        <div className="w-full h-full flex items-center justify-center text-gray-400">
-                          <i className="ri-image-line text-2xl"></i>
+                        <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+                          <ImageIcon size={24} />
                         </div>
                       )}
                     </div>
 
                     {/* Product Details */}
                     <div className="flex-1 min-w-0">
-                      <h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                      <h4 className="font-semibold text-foreground mb-1 line-clamp-2">
                         {item.merchandise.product.title}
                       </h4>
 
                       {/* Variant Info */}
                       {selectedOptions.length > 0 && (
-                        <div className="text-sm text-gray-500 mb-2">
+                        <div className="text-sm text-muted-foreground mb-2">
                           {selectedOptions.map((option, index) => (
                             <span key={option.name}>
                               {option.value}
-                              {index < selectedOptions.length - 1 ? ' / ' : ''}
+                              {index < selectedOptions.length - 1
+                                ? ' / '
+                                : ''}
                             </span>
                           ))}
                         </div>
@@ -101,27 +137,31 @@ const CartDrawer: React.FC = () => {
 
                       {/* Quantity Controls */}
                       <div className="flex items-center mt-3">
-                        <div className="flex items-center border border-gray-300 rounded-lg">
+                        <div className="flex items-center border border-border rounded-lg">
                           <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity - 1)
+                            }
                             variant="ghost"
                             size="icon-sm"
                             disabled={item.quantity <= 1 || loading}
                             className="h-7 w-7"
                           >
-                            <i className="ri-subtract-line text-sm"></i>
+                            <Minus size={14} />
                           </Button>
                           <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
                             {item.quantity}
                           </span>
                           <Button
-                            onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity + 1)
+                            }
                             variant="ghost"
                             size="icon-sm"
                             disabled={loading}
                             className="h-7 w-7"
                           >
-                            <i className="ri-add-line text-sm"></i>
+                            <Plus size={14} />
                           </Button>
                         </div>
                       </div>
@@ -129,7 +169,7 @@ const CartDrawer: React.FC = () => {
 
                     {/* Price */}
                     <div className="flex-shrink-0">
-                      <span className="text-sm font-semibold text-gray-900">
+                      <span className="text-sm font-semibold text-foreground">
                         ${parseFloat(item.merchandise.price.amount).toFixed(2)}
                       </span>
                     </div>
@@ -141,9 +181,9 @@ const CartDrawer: React.FC = () => {
                         variant="ghost"
                         size="icon-sm"
                         disabled={loading}
-                        className="text-gray-400 hover:text-red-500"
+                        className="text-muted-foreground hover:text-foreground"
                       >
-                        <i className="ri-delete-bin-line text-lg"></i>
+                        <X size={18} />
                       </Button>
                     </div>
                   </div>
@@ -151,11 +191,11 @@ const CartDrawer: React.FC = () => {
               })}
             </div>
           )}
-        </SheetBody>
+        </div>
 
         {/* Footer - Checkout Section */}
         {items.length > 0 && (
-          <SheetFooter className="flex-col sm:flex-col sm:justify-start gap-0">
+          <div className="border-t border-border p-6">
             {/* Subtotal */}
             <div className="flex items-center justify-between mb-4">
               <span className="text-base font-semibold">Subtotal</span>
@@ -164,7 +204,7 @@ const CartDrawer: React.FC = () => {
               </span>
             </div>
 
-            <div className="text-sm text-gray-500 mb-4">
+            <div className="text-sm text-muted-foreground mb-4">
               Shipping and taxes calculated at checkout
             </div>
 
@@ -178,7 +218,7 @@ const CartDrawer: React.FC = () => {
               >
                 {loading ? (
                   <span className="flex items-center justify-center space-x-2">
-                    <Spinner size="sm" />
+                    <Loader size={16} />
                     <span>Processing...</span>
                   </span>
                 ) : (
@@ -186,15 +226,11 @@ const CartDrawer: React.FC = () => {
                 )}
               </Button>
 
-              <Button
-                onClick={closeCart}
-                variant="link"
-                className="w-full"
-              >
+              <Button onClick={closeCart} variant="link" className="w-full">
                 Continue Shopping
               </Button>
             </div>
-          </SheetFooter>
+          </div>
         )}
       </SheetContent>
     </Sheet>

components/commerce/collection-card.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router';
-import { Card, CardContent } from '@/editor/components/ui/card';
+import Link from 'next/link';
+import { Card, CardContent } from '@/components/ui/card';
+import { Typography } from '@/components/Typography';
 
 interface CollectionImage {
   url: string;
@@ -21,10 +22,10 @@ interface CollectionCardProps {
 
 const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
   return (
-    <Link to={`/collections/${collection.handle}`} className="block group">
+    <Link href={`/collections/${collection.handle}`} className="block group">
       <Card className="hover:shadow-xl transition-shadow duration-300 overflow-hidden py-0 gap-0">
         {/* Collection Image */}
-        <div className="aspect-video overflow-hidden bg-gray-100">
+        <div className="aspect-video overflow-hidden bg-muted">
           {collection.image ? (
             <img
               src={collection.image.url}
@@ -32,7 +33,7 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
               className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
             />
           ) : (
-            <div className="w-full h-full flex items-center justify-center text-gray-400">
+            <div className="w-full h-full flex items-center justify-center text-muted-foreground">
               <i className="ri-folder-line text-6xl"></i>
             </div>
           )}
@@ -40,18 +41,21 @@ const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
 
         {/* Collection Info */}
         <CardContent className="p-6">
-          <h3 className="text-2xl font-bold text-gray-900 mb-3 group-hover:text-gray-600 transition-colors font-heading">
+          <Typography
+            variant="subtitle1"
+            className="mb-3 font-semibold tracking-tight text-foreground transition-colors group-hover:text-muted-foreground"
+          >
             {collection.title}
-          </h3>
+          </Typography>
 
           {collection.description && (
-            <p className="text-gray-600">
+            <p className="text-muted-foreground">
               {collection.description.substring(0, 100)}
               {collection.description.length > 100 ? '...' : ''}
             </p>
           )}
 
-          <div className="mt-4 text-black font-semibold group-hover:text-gray-600 transition-colors flex items-center">
+          <div className="mt-4 text-foreground font-semibold group-hover:text-muted-foreground transition-colors flex items-center">
             <span>View Collection</span>
             <i className="ri-arrow-right-s-line ml-2"></i>
           </div>

components/commerce/collection-detail.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useCollectionProducts } from '@/editor/hooks/use-shopify-collections';
+import { useCollectionProducts } from '@/hooks/use-shopify-collections';
 import ProductCard from './product-card';
 import { Skeleton } from '@/components/ui/skeleton';
 
@@ -64,18 +64,18 @@ const CollectionDetail: React.FC<{ handle?: string }> = ({ handle: handleProp })
   return (
     <div className="pt-4 pb-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
           {title}
         </h2>
 
         {products.length === 0 ? (
           <div className="text-center py-12">
-            <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
-              <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-              <h3 className="text-lg font-semibold text-gray-600 mb-2">
+            <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
+              <i className="ri-shopping-bag-line text-4xl text-muted-foreground mb-4"></i>
+              <h3 className="text-lg font-semibold text-foreground mb-2">
                 No Products in Collection
               </h3>
-              <p className="text-gray-500">
+              <p className="text-muted-foreground">
                 This collection doesn&apos;t have any products yet.
               </p>
             </div>

components/commerce/collection-grid.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { FolderOpen } from "lucide-react";
-import { CollectionGrid, type CollectionGridProps } from "@/editor/components/commerce/collection-grid";
+import { CollectionGrid, type CollectionGridProps } from "@/components/commerce/collection-grid";
 
 export const collectionGridEditor: ComponentConfig<CollectionGridProps> = {
   label: "Collections",

components/commerce/collection-grid.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router";
-import { shopifyFetch } from "@/editor/services/shopify/client";
-import { GET_COLLECTIONS_QUERY } from "@/editor/graphql/collections";
-import { Typography } from "@/editor/theme/Typography";
+import Link from "next/link";
+import { shopifyFetch } from "@/services/shopify/client";
+import { GET_COLLECTIONS_QUERY } from "@/graphql/collections";
+import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type CollectionGridProps = {
   tagline: string;
@@ -45,20 +47,16 @@ export function CollectionGrid({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
-        <div className="mx-auto mb-12 max-w-2xl text-center">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h2">{heading}</Typography>
-          {subheading ? (
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
+      <Container>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-12"
+          maxWidth="max-w-2xl"
+        />
 
         <div
           className={
@@ -73,7 +71,7 @@ export function CollectionGrid({
           ).map((c: CollectionRow) => (
             <Link
               key={c.id}
-              to={c.handle ? `/collections/${c.handle}` : "#"}
+              href={c.handle ? `/collections/${c.handle}` : "#"}
               className="group block"
             >
               <div
@@ -89,28 +87,33 @@ export function CollectionGrid({
                 {isEditorial ? (
                   <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent p-8">
                     <div>
-                      <Typography variant="h4" className="text-white">
+                      <Typography
+                        variant="subtitle1"
+                        className="font-semibold tracking-tight text-white"
+                      >
                         {c.title}
                       </Typography>
                       <span className="mt-2 inline-flex text-xs uppercase tracking-[0.2em] text-white/80">
-                        Shop now →
+                        Shop now
                       </span>
                     </div>
                   </div>
                 ) : null}
               </div>
               {!isEditorial ? (
-                <div className="mt-4 flex items-center justify-between">
-                  <h3 className="text-sm font-medium tracking-tight">{c.title}</h3>
-                  <span className="text-xs text-muted-foreground transition-opacity group-hover:opacity-100">
-                    →
-                  </span>
+                <div className="mt-4">
+                  <Typography
+                    variant="subtitle2"
+                    className="font-medium tracking-tight text-foreground"
+                  >
+                    {c.title}
+                  </Typography>
                 </div>
               ) : null}
             </Link>
           ))}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/collection.editor.tsx

@@ -0,0 +1,251 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { FolderOpen } from "lucide-react";
+import { imageField } from "@reacteditor/plugin-media/field";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
+import { CollectionView, type CollectionProps } from "@/components/commerce/collection";
+
+export function createCollectionEditor(opts: {
+  collectionField: any;
+}): ComponentConfig<CollectionProps> {
+  return {
+    label: "Collection page",
+    icon: <FolderOpen size={16} />,
+    category: "commerce",
+    defaultProps: {
+      collection: null,
+      showDescription: "yes",
+      showCoverImage: "yes",
+      customCoverImage: "",
+      columns: "4",
+      limit: 24,
+      defaultSort: "BEST_SELLING",
+      showAvailability: "yes",
+      showPriceRange: "yes",
+      showProductType: "no",
+      productTypeOptions: [],
+      showVendor: "no",
+      vendorOptions: [],
+      showTags: "no",
+      tagOptions: [],
+      showColor: "yes",
+      colorOptions: [
+        { label: "Black", color: "#000000" },
+        { label: "White", color: "#FFFFFF" },
+        { label: "Navy", color: "#1e3a5f" },
+      ],
+      showStyle: "no",
+      styleOptions: [],
+      showSize: "yes",
+      sizeOptions: [
+        { label: "XS" },
+        { label: "S" },
+        { label: "M" },
+        { label: "L" },
+        { label: "XL" },
+      ],
+      showMaterial: "no",
+      materialOptions: [],
+      metafieldFilters: [],
+    },
+    fields: {
+      collection: { label: "Collection", ...opts.collectionField },
+      showDescription: {
+        label: "Description",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      showCoverImage: {
+        label: "Cover image",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      customCoverImage: {
+        label: "Custom cover image",
+        ...imageField({ adapter: frontendAiMediaAdapter }),
+      },
+      columns: {
+        label: "Columns",
+        type: "radio",
+        options: [
+          { label: "2", value: "2" },
+          { label: "3", value: "3" },
+          { label: "4", value: "4" },
+        ],
+      },
+      limit: { label: "Products per page", type: "number", min: 4, max: 48 },
+      defaultSort: {
+        label: "Default sort",
+        type: "select",
+        options: [
+          { label: "Best Selling", value: "BEST_SELLING" },
+          { label: "Newest", value: "CREATED" },
+          { label: "Price: Low to High", value: "PRICE" },
+          { label: "Alphabetical", value: "TITLE" },
+        ],
+      },
+      showAvailability: {
+        label: "Availability filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      showPriceRange: {
+        label: "Price range filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      showColor: {
+        label: "Color filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      colorOptions: {
+        label: "Colors",
+        type: "array",
+        defaultItemProps: { label: "", color: "#000000" },
+        getItemSummary: (it: any) => it?.label || "Color",
+        arrayFields: {
+          label: { label: "Color name", type: "text" },
+          color: { label: "Color", type: "color" },
+        },
+      },
+      showStyle: {
+        label: "Style filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      styleOptions: {
+        label: "Styles",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Style",
+        arrayFields: {
+          label: { label: "Style name", type: "text" },
+        },
+      },
+      showSize: {
+        label: "Size filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      sizeOptions: {
+        label: "Sizes",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Size",
+        arrayFields: {
+          label: { label: "Size name", type: "text" },
+        },
+      },
+      showMaterial: {
+        label: "Material filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      materialOptions: {
+        label: "Materials",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Material",
+        arrayFields: {
+          label: { label: "Material name", type: "text" },
+        },
+      },
+      showVendor: {
+        label: "Brand / vendor filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      vendorOptions: {
+        label: "Brands",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Brand",
+        arrayFields: {
+          label: { label: "Brand name", type: "text" },
+        },
+      },
+      showProductType: {
+        label: "Product type filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      productTypeOptions: {
+        label: "Product types",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Type",
+        arrayFields: {
+          label: { label: "Type name", type: "text" },
+        },
+      },
+      showTags: {
+        label: "Tags filter",
+        type: "radio",
+        options: [
+          { label: "Show", value: "yes" },
+          { label: "Hide", value: "no" },
+        ],
+      },
+      tagOptions: {
+        label: "Tags",
+        type: "array",
+        defaultItemProps: { label: "" },
+        getItemSummary: (it: any) => it?.label || "Tag",
+        arrayFields: {
+          label: { label: "Tag name", type: "text" },
+        },
+      },
+      metafieldFilters: {
+        label: "Metafield filters",
+        type: "array",
+        defaultItemProps: { namespace: "", key: "", label: "", values: [{ label: "" }] },
+        getItemSummary: (it: any) => it?.label || it?.key || "Metafield",
+        arrayFields: {
+          namespace: { label: "Namespace", type: "text" },
+          key: { label: "Key", type: "text" },
+          label: { label: "Label", type: "text" },
+          values: {
+            label: "Values",
+            type: "array",
+            defaultItemProps: { label: "" },
+            getItemSummary: (v: any) => v?.label || "Value",
+            arrayFields: {
+              label: { label: "Value", type: "text" },
+            },
+          },
+        },
+      },
+    },
+    render: (props) => <CollectionView {...props} />,
+  };
+}

components/commerce/collection.tsx

@@ -0,0 +1,554 @@
+import { useState, useCallback } from 'react';
+import { useParams } from 'next/navigation';
+import { ChevronDown, SlidersHorizontal } from 'lucide-react';
+import type { ShopifyCollection } from '@reacteditor/field-shopify';
+import {
+  useCollectionProducts,
+  type CollectionSortKey,
+  type ProductFilter,
+} from '@/hooks/use-shopify-collections';
+import { ProductCard } from './product-card';
+import { Typography } from '@/components/Typography';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { Container } from '@/components/layout/Container';
+import { cn } from '@/lib/utils';
+
+type FilterOption = { label: string };
+type ColorOption = { label: string; color: string };
+
+export type CollectionProps = {
+  collection: ShopifyCollection | null;
+  showDescription: 'yes' | 'no';
+  showCoverImage: 'yes' | 'no';
+  customCoverImage: string;
+  columns: '2' | '3' | '4';
+  limit: number;
+  defaultSort: CollectionSortKey;
+  showAvailability: 'yes' | 'no';
+  showPriceRange: 'yes' | 'no';
+  showProductType: 'yes' | 'no';
+  productTypeOptions: FilterOption[];
+  showVendor: 'yes' | 'no';
+  vendorOptions: FilterOption[];
+  showTags: 'yes' | 'no';
+  tagOptions: FilterOption[];
+  showColor: 'yes' | 'no';
+  colorOptions: ColorOption[];
+  showStyle: 'yes' | 'no';
+  styleOptions: FilterOption[];
+  showSize: 'yes' | 'no';
+  sizeOptions: FilterOption[];
+  showMaterial: 'yes' | 'no';
+  materialOptions: FilterOption[];
+  metafieldFilters: { namespace: string; key: string; label: string; values: { label: string }[] }[];
+};
+
+const SORT_OPTIONS: { label: string; value: CollectionSortKey }[] = [
+  { label: 'Best Selling', value: 'BEST_SELLING' },
+  { label: 'Newest',       value: 'CREATED'      },
+  { label: 'Price: Low to High', value: 'PRICE'  },
+  { label: 'Alphabetical', value: 'TITLE'        },
+];
+
+const colClass: Record<CollectionProps['columns'], string> = {
+  '2': 'grid-cols-2',
+  '3': 'grid-cols-2 md:grid-cols-3',
+  '4': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+};
+
+// ─── Filter group (collapsible) ────────────────────────────────────────────────
+
+function FilterGroup({ label, children, defaultOpen = true }: {
+  label: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="border-b border-border py-4">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between text-xs font-semibold uppercase tracking-[0.15em] text-foreground"
+      >
+        {label}
+        <ChevronDown
+          size={14}
+          className={cn('transition-transform', open ? 'rotate-180' : '')}
+        />
+      </button>
+      {open && <div className="mt-3 space-y-2">{children}</div>}
+    </div>
+  );
+}
+
+function Checkbox({ checked, onChange, label }: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+}) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="sr-only"
+      />
+      <span
+        className={cn(
+          'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
+          checked ? 'border-foreground bg-foreground' : 'border-border',
+        )}
+      >
+        {checked && (
+          <svg viewBox="0 0 10 8" className="h-2.5 w-2.5 fill-background" aria-hidden>
+            <path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </span>
+      {label}
+    </label>
+  );
+}
+
+// ─── Sidebar ────────────────────────────────────────────────────────────────────
+
+type ActiveFilters = {
+  availability: boolean;
+  productTypes: string[];
+  vendors: string[];
+  tags: string[];
+  colors: string[];
+  styles: string[];
+  sizes: string[];
+  materials: string[];
+  minPrice: string;
+  maxPrice: string;
+  metafieldValues: Record<string, string[]>;
+};
+
+function Sidebar({
+  props,
+  active,
+  onChange,
+}: {
+  props: CollectionProps;
+  active: ActiveFilters;
+  onChange: (patch: Partial<ActiveFilters>) => void;
+}) {
+  const productTypes = (props.productTypeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const vendors = (props.vendorOptions ?? []).map((o) => o.label).filter(Boolean);
+  const tags = (props.tagOptions ?? []).map((o) => o.label).filter(Boolean);
+  const colors = (props.colorOptions ?? []) as ColorOption[];
+  const styles = (props.styleOptions ?? []).map((o) => o.label).filter(Boolean);
+  const sizes = (props.sizeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const materials = (props.materialOptions ?? []).map((o) => o.label).filter(Boolean);
+  const metafieldFilters = (props.metafieldFilters ?? []).filter((mf) => mf.namespace && mf.key);
+
+  function toggle(key: 'productTypes' | 'vendors' | 'tags' | 'colors' | 'styles' | 'sizes' | 'materials', value: string) {
+    const arr = active[key];
+    onChange({ [key]: arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value] });
+  }
+
+  return (
+    <div className="w-full">
+      {props.showAvailability === 'yes' && (
+        <FilterGroup label="Availability">
+          <Checkbox
+            checked={active.availability}
+            onChange={(v) => onChange({ availability: v })}
+            label="In stock"
+          />
+        </FilterGroup>
+      )}
+
+      {props.showPriceRange === 'yes' && (
+        <FilterGroup label="Price">
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              min={0}
+              placeholder="Min"
+              value={active.minPrice}
+              onChange={(e) => onChange({ minPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+            <span className="text-muted-foreground">–</span>
+            <input
+              type="number"
+              min={0}
+              placeholder="Max"
+              value={active.maxPrice}
+              onChange={(e) => onChange({ maxPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+          </div>
+        </FilterGroup>
+      )}
+
+      {props.showVendor === 'yes' && vendors.length > 0 && (
+        <FilterGroup label="Brand">
+          {vendors.map((v) => (
+            <Checkbox
+              key={v}
+              checked={active.vendors.includes(v)}
+              onChange={() => toggle('vendors', v)}
+              label={v}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showColor === 'yes' && colors.length > 0 && (
+        <FilterGroup label="Color">
+          {colors.filter((c) => c.label).map((c) => (
+            <label
+              key={c.label}
+              className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground"
+            >
+              <input
+                type="checkbox"
+                checked={active.colors.includes(c.label)}
+                onChange={() => toggle('colors', c.label)}
+                className="sr-only"
+              />
+              <span
+                className={cn(
+                  'flex h-5 w-5 shrink-0 rounded-full border-2',
+                  active.colors.includes(c.label) ? 'border-foreground' : 'border-transparent',
+                )}
+                style={{ backgroundColor: c.color || undefined }}
+              />
+              {c.label}
+            </label>
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showStyle === 'yes' && styles.length > 0 && (
+        <FilterGroup label="Style">
+          {styles.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.styles.includes(s)}
+              onChange={() => toggle('styles', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showSize === 'yes' && sizes.length > 0 && (
+        <FilterGroup label="Size">
+          {sizes.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.sizes.includes(s)}
+              onChange={() => toggle('sizes', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showMaterial === 'yes' && materials.length > 0 && (
+        <FilterGroup label="Material">
+          {materials.map((m) => (
+            <Checkbox
+              key={m}
+              checked={active.materials.includes(m)}
+              onChange={() => toggle('materials', m)}
+              label={m}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showProductType === 'yes' && productTypes.length > 0 && (
+        <FilterGroup label="Product type">
+          {productTypes.map((pt) => (
+            <Checkbox
+              key={pt}
+              checked={active.productTypes.includes(pt)}
+              onChange={() => toggle('productTypes', pt)}
+              label={pt}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showTags === 'yes' && tags.length > 0 && (
+        <FilterGroup label="Tags">
+          {tags.map((t) => (
+            <Checkbox
+              key={t}
+              checked={active.tags.includes(t)}
+              onChange={() => toggle('tags', t)}
+              label={t}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {metafieldFilters.map((mf, i) => {
+        const mfKey = `${mf.namespace}.${mf.key}`;
+        const selected = active.metafieldValues[mfKey] ?? [];
+        return (
+          <FilterGroup key={mfKey + i} label={mf.label || mfKey}>
+            {mf.values.map((v) => v.label).filter(Boolean).map((val) => (
+              <Checkbox
+                key={val}
+                checked={selected.includes(val)}
+                onChange={(checked) => {
+                  const next = checked
+                    ? [...selected, val]
+                    : selected.filter((v) => v !== val);
+                  onChange({ metafieldValues: { ...active.metafieldValues, [mfKey]: next } });
+                }}
+                label={val}
+              />
+            ))}
+          </FilterGroup>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Build Shopify ProductFilter array ──────────────────────────────────────────
+
+function buildProductFilters(active: ActiveFilters): ProductFilter[] {
+  const filters: ProductFilter[] = [];
+
+  if (active.availability) filters.push({ available: true });
+
+  if (active.minPrice !== '' || active.maxPrice !== '') {
+    filters.push({
+      price: {
+        min: active.minPrice !== '' ? parseFloat(active.minPrice) : undefined,
+        max: active.maxPrice !== '' ? parseFloat(active.maxPrice) : undefined,
+      },
+    });
+  }
+
+  for (const pt of active.productTypes) filters.push({ productType: pt });
+  for (const v of active.vendors) filters.push({ productVendor: v });
+  for (const t of active.tags) filters.push({ tag: t });
+
+  for (const c of active.colors) filters.push({ variantOption: { name: 'Color', value: c } });
+  for (const s of active.styles) filters.push({ variantOption: { name: 'Style', value: s } });
+  for (const s of active.sizes) filters.push({ variantOption: { name: 'Size', value: s } });
+  for (const m of active.materials) filters.push({ variantOption: { name: 'Material', value: m } });
+
+  for (const [mfKey, vals] of Object.entries(active.metafieldValues)) {
+    const [namespace, key] = mfKey.split('.');
+    for (const value of vals) {
+      filters.push({ productMetafield: { namespace, key, value } });
+    }
+  }
+
+  return filters;
+}
+
+// ─── Main component ──────────────────────────────────────────────────────────
+
+export function CollectionView(props: CollectionProps) {
+  const { collection: selected, showDescription, showCoverImage, customCoverImage, columns, limit, defaultSort } = props;
+  const params = useParams();
+  const paramHandle =
+    typeof params?.handle === 'string' ? params.handle : undefined;
+  const handle = selected?.handle ?? paramHandle ?? '';
+
+  const [sort, setSort] = useState<CollectionSortKey>(defaultSort);
+  const [reverse, setReverse] = useState(false);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [active, setActive] = useState<ActiveFilters>({
+    availability: false,
+    productTypes: [],
+    vendors: [],
+    tags: [],
+    colors: [],
+    styles: [],
+    sizes: [],
+    materials: [],
+    minPrice: '',
+    maxPrice: '',
+    metafieldValues: {},
+  });
+
+  const patchActive = useCallback((patch: Partial<ActiveFilters>) => {
+    setActive((prev) => ({ ...prev, ...patch }));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setActive({
+      availability: false,
+      productTypes: [],
+      vendors: [],
+      tags: [],
+      colors: [],
+      styles: [],
+      sizes: [],
+      materials: [],
+      minPrice: '',
+      maxPrice: '',
+      metafieldValues: {},
+    });
+  }, []);
+
+  const productFilters = buildProductFilters(active);
+
+  const handleSortChange = (value: string) => {
+    if (value === 'PRICE_DESC') {
+      setSort('PRICE');
+      setReverse(true);
+    } else {
+      setSort(value as CollectionSortKey);
+      setReverse(false);
+    }
+  };
+
+  const sortValue = sort === 'PRICE' && reverse ? 'PRICE_DESC' : sort;
+
+  const { collection, loading, hasNextPage, fetchMore } = useCollectionProducts(handle, {
+    first: limit,
+    sortKey: sort,
+    reverse,
+    filters: productFilters.length ? productFilters : undefined,
+  });
+
+  const products = collection?.products ?? [];
+  const description = collection?.description ?? (selected as any)?.description;
+  const collectionImage = customCoverImage || collection?.image?.url;
+
+  if (!selected && !paramHandle) {
+    return (
+      <section className="bg-background pb-24 pt-12 md:pt-20">
+        <Container>
+          <header className="mx-auto mb-14 flex max-w-2xl flex-col items-center gap-3 text-center">
+            <Skeleton className="h-3 w-24" />
+            <Skeleton className="h-10 w-3/4" />
+          </header>
+          <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <Skeleton key={i} className="aspect-[4/5] w-full" />
+            ))}
+          </div>
+        </Container>
+      </section>
+    );
+  }
+
+  return (
+    <section className="bg-background pb-24 pt-12 md:pt-20">
+      <Container>
+        {/* Cover image */}
+        {showCoverImage === 'yes' && collectionImage && (
+          <div className="mb-10 overflow-hidden rounded-lg">
+            <img
+              src={collectionImage}
+              alt={collection?.title ?? ''}
+              className="h-48 w-full object-cover md:h-72 lg:h-80"
+            />
+          </div>
+        )}
+
+        {/* Header */}
+        <header className="mb-10">
+          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+            Collection
+          </p>
+          <Typography variant="h1">
+            {collection?.title ?? (selected as any)?.title ?? paramHandle}
+          </Typography>
+          {showDescription === 'yes' && description ? (
+            <Typography variant="subtitle1" className="mt-4 max-w-2xl">
+              {description}
+            </Typography>
+          ) : null}
+        </header>
+
+        {/* Filter + sort bar */}
+        <div className="mb-6 flex items-center justify-between">
+          <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+            <SheetTrigger asChild>
+              <button
+                type="button"
+                className="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium hover:bg-muted"
+              >
+                <SlidersHorizontal size={14} />
+                Filters
+              </button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-full sm:max-w-md">
+              <SheetHeader>
+                <SheetTitle>Filters</SheetTitle>
+              </SheetHeader>
+              <div className="flex-1 overflow-y-auto px-4">
+                <Sidebar props={props} active={active} onChange={patchActive} />
+              </div>
+              <SheetFooter className="flex-row gap-2 border-t border-border">
+                <Button variant="outline" className="flex-1" onClick={clearAll}>
+                  Clear
+                </Button>
+                <Button className="flex-1" onClick={() => setFiltersOpen(false)}>
+                  Search
+                </Button>
+              </SheetFooter>
+            </SheetContent>
+          </Sheet>
+
+          <div className="flex items-center gap-4">
+            <p className="hidden text-sm text-muted-foreground sm:block">
+              {loading ? 'Loading…' : `${products.length} product${products.length === 1 ? '' : 's'}`}
+            </p>
+            <Select value={sortValue} onValueChange={handleSortChange}>
+              <SelectTrigger className="h-auto px-3 py-2 text-sm">
+                <SelectValue>
+                  {[...SORT_OPTIONS, { label: 'Price: High to Low', value: 'PRICE_DESC' }].find((o) => o.value === sortValue)?.label}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                ))}
+                <SelectItem value="PRICE_DESC">Price: High to Low</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* Grid */}
+        <div className={cn('grid gap-x-6 gap-y-10', colClass[columns])}>
+          {loading
+            ? Array.from({ length: limit }).map((_, i) => (
+                <Skeleton key={i} className="aspect-[4/5] w-full" />
+              ))
+            : products.map((p: any) => <ProductCard key={p.id} product={p} />)}
+        </div>
+
+        {!loading && products.length === 0 && (
+          <div className="mt-16 text-center text-sm text-muted-foreground">
+            No products found in this collection.
+          </div>
+        )}
+
+        {hasNextPage && !loading && (
+          <div className="mt-12 flex justify-center">
+            <button
+              type="button"
+              onClick={fetchMore}
+              className="rounded-md border border-border px-8 py-3 text-sm font-medium hover:bg-muted"
+            >
+              Load more
+            </button>
+          </div>
+        )}
+      </Container>
+    </section>
+  );
+}

components/commerce/collections.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useCollections } from '@/editor/hooks/use-shopify-collections';
+import { useCollections } from '@/hooks/use-shopify-collections';
 import CollectionCard from './collection-card';
 
 const Collections: React.FC = () => {
@@ -11,19 +11,19 @@ const Collections: React.FC = () => {
     return (
       <div className="py-16">
         <div className="container mx-auto px-4">
-          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+          <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
             Our Collections
           </h2>
 
           {/* Loading Skeleton */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             {Array.from({ length: 6 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-video bg-gray-200"></div>
+              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-video bg-muted"></div>
                 <div className="p-6">
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                  <div className="h-8 bg-muted rounded mb-4"></div>
+                  <div className="h-4 bg-muted rounded mb-2"></div>
+                  <div className="h-4 bg-muted rounded w-3/4"></div>
                 </div>
               </div>
             ))}
@@ -62,12 +62,12 @@ const Collections: React.FC = () => {
             Our Collections
           </h2>
 
-          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
-            <i className="ri-folder-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+          <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
+            <i className="ri-folder-line text-4xl text-muted-foreground mb-4"></i>
+            <h3 className="text-lg font-semibold text-foreground mb-2">
               No Collections Found
             </h3>
-            <p className="text-gray-500">
+            <p className="text-muted-foreground">
               Check back later or configure your Shopify store connection.
             </p>
           </div>
@@ -79,7 +79,7 @@ const Collections: React.FC = () => {
   return (
     <div className="py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
           Our Collections
         </h2>
 

components/commerce/featured-product.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Star } from "lucide-react";
-import { FeaturedProductView, type FeaturedProductProps } from "@/editor/components/commerce/featured-product";
+import { FeaturedProductView, type FeaturedProductProps } from "@/components/commerce/featured-product";
 
 export function createFeaturedProductEditor(opts: {
   productField: any;

components/commerce/featured-product.tsx

@@ -1,9 +1,10 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import type { ShopifyProduct } from "@reacteditor/field-shopify";
-import { useProduct } from "@/editor/hooks/use-shopify-products";
-import { useShopifyCart } from "@/editor/hooks/use-shopify-cart";
-import { Typography } from "@/editor/theme/Typography";
+import { useProduct } from "@/hooks/use-shopify-products";
+import { useShopifyCart } from "@/hooks/use-shopify-cart";
+import { Typography } from "@/components/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
 import { cn } from "@/lib/utils";
 
 export type FeaturedProductProps = {
@@ -33,7 +34,7 @@ export function FeaturedProductView({
           tone === "muted" ? "bg-muted/40" : "bg-background",
         )}
       >
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
           <div className={cn(align === "right" && "md:order-2")}>
             <Skeleton className="aspect-[4/5] w-full" />
           </div>
@@ -47,11 +48,11 @@ export function FeaturedProductView({
               <Skeleton className="h-4 w-4/6" />
             </div>
             <div className="mt-2 flex flex-wrap gap-3">
-              <Skeleton className="h-11 w-32 rounded-full" />
-              <Skeleton className="h-11 w-32 rounded-full" />
-            </div>
+              <Skeleton className="h-11 w-32 rounded-md" />
+              <Skeleton className="h-11 w-32 rounded-md" />
             </div>
           </div>
+        </Container>
       </section>
     );
   }
@@ -75,7 +76,7 @@ export function FeaturedProductView({
           : "bg-background py-20 md:py-28"
       }
     >
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
         <div className={align === "right" ? "md:order-2" : ""}>
           {image ? (
             <img
@@ -89,9 +90,7 @@ export function FeaturedProductView({
         </div>
         <div className="flex flex-col items-start gap-5">
           {tagline ? (
-            <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
+            <Typography variant="caption">{tagline}</Typography>
           ) : null}
           <Typography variant="h2">{product.title}</Typography>
           {formatted ? (
@@ -111,19 +110,19 @@ export function FeaturedProductView({
                 await cart.addItem(variant.id, 1);
                 cart.openCart();
               }}
-              className="inline-flex items-center justify-center rounded-full bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background hover:opacity-90"
+              className="inline-flex items-center justify-center rounded-md bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background hover:opacity-90"
             >
               {ctaLabel}
             </button>
             <Link
-              to={`/products/${product.handle}`}
-              className="inline-flex items-center justify-center rounded-full border border-foreground px-6 py-3 text-sm font-medium tracking-wide hover:opacity-80"
+              href={`/products/${product.handle}`}
+              className="inline-flex items-center justify-center rounded-md border border-foreground px-6 py-3 text-sm font-medium tracking-wide hover:opacity-80"
             >
               View details
             </Link>
           </div>
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/product-card.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { Link } from "react-router";
+import Link from "next/link";
+import { Typography } from "@/components/Typography";
 
 type ProductImage = { url: string; altText?: string };
 type ProductPrice = { amount: string; currencyCode: string };
@@ -40,7 +41,7 @@ export function ProductCard({
   };
 
   return (
-    <Link to={`/products/${product.handle}`} className="group block">
+    <Link href={`/products/${product.handle}`} className="group block">
       <div
         className={`relative w-full overflow-hidden rounded-md bg-muted ${aspectClass[aspect]}`}
       >
@@ -53,7 +54,12 @@ export function ProductCard({
         ) : null}
       </div>
       <div className="mt-4 flex items-start justify-between gap-3">
-        <h3 className="text-sm font-medium tracking-tight">{product.title}</h3>
+        <Typography
+          variant="subtitle2"
+          className="font-medium tracking-tight text-foreground"
+        >
+          {product.title}
+        </Typography>
         {price ? (
           <div className="flex flex-col items-end text-sm">
             {onSale && compare ? (

components/commerce/product-detail/index.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router';
-import { useProduct, type Product } from '@/editor/hooks/use-shopify-products';
-import { useShopifyCart } from '@/editor/hooks/use-shopify-cart';
+import Link from 'next/link';
+import { useProduct, type Product } from '@/hooks/use-shopify-products';
+import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
 import ProductDetailInfo from './product-detail-info';
 import ProductRecommendations from './product-recommendations';
-import { Button } from '@/editor/components/ui/button';
-import { Alert, AlertTitle, AlertDescription } from '@/editor/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Breadcrumb,
@@ -17,7 +17,7 @@ import {
   BreadcrumbLink,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@/editor/components/ui/breadcrumb';
+} from '@/components/ui/breadcrumb';
 
 interface ProductVariant {
   id: string;
@@ -158,19 +158,19 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <div className="container mx-auto px-4 py-8">
         <Breadcrumb className="mb-6">
           <BreadcrumbList>
             <BreadcrumbItem>
               <BreadcrumbLink asChild>
-                <Link to="/">Home</Link>
+                <Link href="/">Home</Link>
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>
               <BreadcrumbLink asChild>
-                <Link to="/shop">Shop</Link>
+                <Link href="/shop">Shop</Link>
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />

components/commerce/product-detail/product-detail-gallery.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@/editor/components/ui/button';
+import { Button } from '@/components/ui/button';
 
 interface ProductImage {
   url: string;
@@ -23,7 +23,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
   return (
     <div>
       {/* Main Image */}
-      <div className="aspect-square bg-gray-100 rounded-lg overflow-hidden mb-4">
+      <div className="aspect-square bg-muted rounded-lg overflow-hidden mb-4">
         {images.length > 0 ? (
           <img
             src={images[selectedImage].url}
@@ -31,7 +31,7 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
             className="w-full h-full object-cover"
           />
         ) : (
-          <div className="w-full h-full flex items-center justify-center text-gray-400">
+          <div className="w-full h-full flex items-center justify-center text-muted-foreground">
             <i className="ri-image-line text-6xl"></i>
           </div>
         )}
@@ -46,8 +46,8 @@ const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
               onClick={() => setSelectedImage(index)}
               className={`aspect-square rounded-lg overflow-hidden border-2 transition-colors ${
                 selectedImage === index 
-                  ? 'border-black' 
-                  : 'border-gray-200 hover:border-gray-300'
+                  ? 'border-foreground'
+                  : 'border-border hover:border-muted-foreground'
               }`}
             >
               <img

components/commerce/product-detail/product-detail-info.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Product, ProductVariant } from './index.tsx';
-import { Button } from '@/editor/components/ui/button';
-import { Badge } from '@/editor/components/ui/badge';
-import { Spinner } from '@/editor/components/ui/spinner';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Spinner } from '@/components/ui/spinner';
 
 interface ProductDetailInfoProps {
   product: Product;
@@ -38,18 +38,18 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
 
   return (
     <div>
-      <h1 className="text-4xl font-bold text-gray-900 mb-4 font-heading">
+      <h1 className="text-4xl font-bold text-foreground mb-4 font-heading">
         {product.title}
       </h1>
 
       {/* Price */}
       <div className="flex items-center space-x-4 mb-6">
-        <span className="text-2xl font-bold text-gray-900">
+        <span className="text-2xl font-bold text-foreground">
           {formatPrice(price)}
         </span>
         {hasDiscount && compareAtPrice && (
           <>
-            <span className="text-xl text-gray-500 line-through">
+            <span className="text-xl text-muted-foreground line-through">
               {formatPrice(compareAtPrice)}
             </span>
             <Badge variant="destructive">
@@ -61,7 +61,7 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
 
       {/* Description */}
       {product.description && (
-        <div className="text-gray-600 mb-8 text-lg leading-relaxed">
+        <div className="text-muted-foreground mb-8 text-lg leading-relaxed">
           {product.descriptionHtml ? (
             <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
           ) : (
@@ -73,7 +73,7 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
       {/* Product Options */}
       {product.options.map(option => (
         <div key={option.id} className="mb-6">
-          <label className="block text-sm font-semibold text-gray-700 mb-2">
+          <label className="block text-sm font-semibold text-foreground mb-2">
             {option.name}
           </label>
           <div className="flex flex-wrap gap-2">
@@ -92,10 +92,10 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
 
       {/* Quantity Selector */}
       <div className="mb-8">
-        <label className="block text-sm font-semibold text-gray-700 mb-2">
+        <label className="block text-sm font-semibold text-foreground mb-2">
           Quantity
         </label>
-        <div className="flex items-center border border-gray-300 rounded-lg w-fit">
+        <div className="flex items-center border border-border rounded-lg w-fit">
           <Button
             onClick={() => setQuantity(Math.max(1, quantity - 1))}
             variant="ghost"
@@ -135,8 +135,8 @@ const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
       </Button>
 
       {/* Additional Info */}
-      <div className="mt-8 pt-8 border-t border-gray-200">
-        <div className="space-y-3 text-sm text-gray-600">
+      <div className="mt-8 pt-8 border-t border-border">
+        <div className="space-y-3 text-sm text-muted-foreground">
           <div className="flex items-center space-x-2">
             <i className="ri-truck-line"></i>
             <span>Free shipping on orders over $100</span>

components/commerce/product-detail/product-recommendations.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useProductRecommendations } from '@/editor/hooks/use-shopify-products';
+import { useProductRecommendations } from '@/hooks/use-shopify-products';
 import ProductCard from '../product-card';
 
 interface ProductRecommendationsProps {
@@ -17,29 +17,29 @@ const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({ product
   }
 
   return (
-    <div className="bg-gray-50 py-16">
+    <div className="bg-muted py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-4xl font-bold text-center mb-12 text-gray-900 font-heading">
+        <h2 className="text-4xl font-bold text-center mb-12 text-foreground font-heading">
           You Might Also Like
         </h2>
 
         {loading ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
             {Array.from({ length: 4 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-square bg-gray-200"></div>
+              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-square bg-muted"></div>
                 <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
+                  <div className="h-6 bg-muted rounded mb-2"></div>
+                  <div className="h-4 bg-muted rounded mb-4"></div>
+                  <div className="h-8 bg-muted rounded mb-4"></div>
+                  <div className="h-12 bg-muted rounded"></div>
                 </div>
               </div>
             ))}
           </div>
         ) : error ? (
           <div className="text-center py-8">
-            <p className="text-gray-500">Recommendations could not be loaded</p>
+            <p className="text-muted-foreground">Recommendations could not be loaded</p>
           </div>
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

components/commerce/product-details.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Package } from "lucide-react";
-import { ProductDetailsView, type ProductDetailsProps } from "@/editor/components/commerce/product-details";
+import { ProductDetailsView, type ProductDetailsProps } from "@/components/commerce/product-details";
 
 export function createProductDetailsEditor(opts: {
   productField: any;

components/commerce/product-details.tsx

@@ -1,18 +1,22 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router";
+import { useParams } from "next/navigation";
 import type { ShopifyProduct } from "@reacteditor/field-shopify";
-import { useProduct } from "@/editor/hooks/use-shopify-products";
-import { useShopifyCart } from "@/editor/hooks/use-shopify-cart";
-import { Typography } from "@/editor/theme/Typography";
-import { cn } from "@/editor/lib/utils";
+import { useProduct } from "@/hooks/use-shopify-products";
+import { useShopifyCart } from "@/hooks/use-shopify-cart";
+import { Typography } from "@/components/Typography";
+import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Loader } from "@/components/ui/loader";
+import { Container } from "@/components/layout/Container";
 
 export type ProductDetailsProps = {
   product: ShopifyProduct | null;
 };
 
 export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
-  const { handle: paramHandle } = useParams<{ handle?: string }>();
+  const params = useParams();
+  const paramHandle =
+    typeof params?.handle === "string" ? params.handle : undefined;
   const handle = selected?.handle ?? paramHandle ?? null;
   const { product, loading } = useProduct(handle);
   const cart = useShopifyCart();
@@ -30,7 +34,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
   if (!handle || loading || !product) {
     return (
       <section className="bg-background py-12 md:py-20">
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
           <div className="flex flex-col gap-4">
             <Skeleton className="aspect-[4/5] w-full" />
             <div className="flex gap-3">
@@ -45,14 +49,14 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
             <div className="flex flex-col gap-3">
               <Skeleton className="h-3 w-16" />
               <div className="flex gap-2">
-                <Skeleton className="h-10 w-16 rounded-full" />
-                <Skeleton className="h-10 w-16 rounded-full" />
-                <Skeleton className="h-10 w-16 rounded-full" />
+                <Skeleton className="h-10 w-16 rounded-md" />
+                <Skeleton className="h-10 w-16 rounded-md" />
+                <Skeleton className="h-10 w-16 rounded-md" />
               </div>
             </div>
             <div className="flex items-center gap-4 pt-2">
-              <Skeleton className="h-11 w-32 rounded-full" />
-              <Skeleton className="h-11 flex-1 rounded-full" />
+              <Skeleton className="h-11 w-32 rounded-md" />
+              <Skeleton className="h-11 flex-1 rounded-md" />
             </div>
             <div className="space-y-2 border-t border-border pt-6">
               <Skeleton className="h-3 w-20" />
@@ -61,7 +65,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
               <Skeleton className="h-4 w-4/6" />
             </div>
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
@@ -89,7 +93,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
 
   return (
     <section className="bg-background py-12 md:py-20">
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
         <div className="flex flex-col gap-4">
           <div className="aspect-[4/5] w-full overflow-hidden rounded-md bg-muted">
             {main ? (
@@ -156,7 +160,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
                       key={val}
                       onClick={() => matching && setVariant(matching.node)}
                       className={cn(
-                        "min-w-12 rounded-full border px-4 py-2 text-sm transition-colors",
+                        "min-w-12 rounded-md border px-4 py-2 text-sm transition-colors",
                         selected
                           ? "border-foreground bg-foreground text-background"
                           : "border-border hover:border-foreground",
@@ -171,7 +175,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
           ))}
 
           <div className="flex items-center gap-4 pt-2">
-            <div className="flex items-center gap-3 rounded-full border border-border px-4 py-2">
+            <div className="flex items-center gap-3 rounded-md border border-border px-4 py-2">
               <button
                 onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                 className="text-base hover:opacity-60"
@@ -189,9 +193,16 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
             <button
               onClick={onAdd}
               disabled={!variant || adding}
-              className="flex-1 rounded-full bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-opacity hover:opacity-90 disabled:opacity-50"
+              className="flex-1 rounded-md bg-foreground px-6 py-3 text-sm font-medium tracking-wide text-background transition-opacity hover:opacity-90 disabled:opacity-50"
             >
-              {adding ? "Adding…" : "Add to bag"}
+              {adding ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader size={16} />
+                  Adding…
+                </span>
+              ) : (
+                "Add to bag"
+              )}
             </button>
           </div>
 
@@ -206,7 +217,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
             </div>
           ) : null}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products-carousel.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { GalleryHorizontalEnd } from "lucide-react";
-import { ProductsCarousel, type ProductsCarouselProps } from "@/editor/components/commerce/products-carousel";
+import { ProductsCarousel, type ProductsCarouselProps } from "@/components/commerce/products-carousel";
 
 export function createProductsCarouselEditor(opts: {
   collectionField: any;

components/commerce/products-carousel.tsx

@@ -1,17 +1,18 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import type { ShopifyCollection } from "@reacteditor/field-shopify";
-import { getProducts } from "@/editor/hooks/use-shopify-products";
-import { getCollectionProducts } from "@/editor/hooks/use-shopify-collections";
+import { getProducts } from "@/hooks/use-shopify-products";
+import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/editor/theme/Typography";
+import { Heading } from "@/components/Heading";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "@/editor/components/ui/carousel";
+} from "@/components/ui/carousel";
+import { Container } from "@/components/layout/Container";
 
 export type ProductsCarouselProps = {
   collection: ShopifyCollection | null;
@@ -50,7 +51,7 @@ export function ProductsCarousel({
           const data = await getCollectionProducts(collection.handle, {
             first: limit,
           });
-          if (!cancelled) setProducts(data?.products ?? []);
+          if (!cancelled) setProducts(data?.collection?.products ?? []);
         } else {
           const data = await getProducts({
             first: limit,
@@ -71,24 +72,19 @@ export function ProductsCarousel({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
-          <div className="max-w-xl">
-            {tagline ? (
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-            <Typography variant="h2">{heading}</Typography>
-            {subheading ? (
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
+          <Heading
+            tagline={tagline}
+            title={heading}
+            subtitle={subheading}
+            align="left"
+            size="lg"
+            maxWidth="max-w-xl"
+          />
           {ctaLabel ? (
             <Link
-              to={
+              href={
                 ctaHref ||
                 (collection?.handle ? `/collections/${collection.handle}` : "/collections")
               }
@@ -120,7 +116,7 @@ export function ProductsCarousel({
           <CarouselPrevious className="hidden md:inline-flex" />
           <CarouselNext className="hidden md:inline-flex" />
         </Carousel>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products-grid.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { LayoutGrid } from "lucide-react";
-import { ProductsGrid, type ProductsGridProps } from "@/editor/components/commerce/products-grid";
+import { ProductsGrid, type ProductsGridProps } from "@/components/commerce/products-grid";
 
 export function createProductsGridEditor(opts: {
   collectionField: any;

components/commerce/products-grid.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router";
+import Link from "next/link";
 import type { ShopifyCollection } from "@reacteditor/field-shopify";
-import { getProducts } from "@/editor/hooks/use-shopify-products";
-import { getCollectionProducts } from "@/editor/hooks/use-shopify-collections";
+import { getProducts } from "@/hooks/use-shopify-products";
+import { getCollectionProducts } from "@/hooks/use-shopify-collections";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/editor/theme/Typography";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type ProductsGridProps = {
   collection: ShopifyCollection | null;
@@ -42,7 +43,7 @@ export function ProductsGrid({
           const data = await getCollectionProducts(collection.handle, {
             first: limit,
           });
-          if (!cancelled) setProducts(data?.products ?? []);
+          if (!cancelled) setProducts(data?.collection?.products ?? []);
         } else {
           const data = await getProducts({ first: limit, sortKey: "BEST_SELLING" });
           if (!cancelled) setProducts(data ?? []);
@@ -59,24 +60,19 @@ export function ProductsGrid({
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         <div className="mb-12 flex flex-col items-end justify-between gap-6 md:flex-row md:items-end">
-          <div className="max-w-xl">
-            {tagline ? (
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-            <Typography variant="h2">{heading}</Typography>
-            {subheading ? (
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
+          <Heading
+            tagline={tagline}
+            title={heading}
+            subtitle={subheading}
+            align="left"
+            size="lg"
+            maxWidth="max-w-xl"
+          />
           {ctaLabel ? (
             <Link
-              to={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")}
+              href={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")}
               className="text-sm font-medium tracking-wide hover:opacity-70"
             >
               {ctaLabel} →
@@ -94,7 +90,7 @@ export function ProductsGrid({
               ))
             : products.map((p) => <ProductCard key={p.id} product={p} />)}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products.tsx

@@ -2,9 +2,9 @@
 
 import React, { useState, useEffect } from 'react';
 import ProductCard from './product-card';
-import { getProducts } from '@/editor/hooks/use-shopify-products';
-import { Button } from '@/editor/components/ui/button';
-import { Spinner } from '@/editor/components/ui/spinner';
+import { getProducts } from '@/hooks/use-shopify-products';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
 
 interface ProductImage {
   url: string;
@@ -127,13 +127,13 @@ const Products: React.FC<ProductsProps> = ({
           {/* Loading Skeleton */}
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
             {Array.from({ length: 8 }).map((_, index) => (
-              <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse">
-                <div className="aspect-square bg-gray-200"></div>
+              <div key={index} className="bg-card rounded-lg shadow-md overflow-hidden animate-pulse">
+                <div className="aspect-square bg-muted"></div>
                 <div className="p-6">
-                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
-                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
-                  <div className="h-12 bg-gray-200 rounded"></div>
+                  <div className="h-6 bg-muted rounded mb-2"></div>
+                  <div className="h-4 bg-muted rounded mb-4"></div>
+                  <div className="h-8 bg-muted rounded mb-4"></div>
+                  <div className="h-12 bg-muted rounded"></div>
                 </div>
               </div>
             ))}
@@ -173,12 +173,12 @@ const Products: React.FC<ProductsProps> = ({
             {title}
           </h2>
           
-          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
-            <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
-            <h3 className="text-lg font-semibold text-gray-600 mb-2">
+          <div className="bg-muted border border-border rounded-lg p-8 max-w-md mx-auto">
+            <i className="ri-shopping-bag-line text-4xl text-muted-foreground mb-4"></i>
+            <h3 className="text-lg font-semibold text-foreground mb-2">
               No Products Found
             </h3>
-            <p className="text-gray-500">
+            <p className="text-muted-foreground">
               Check back later or configure your Shopify store connection.
             </p>
           </div>
@@ -190,7 +190,7 @@ const Products: React.FC<ProductsProps> = ({
   return (
     <div className="py-16">
       <div className="container mx-auto px-4">
-        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
           {title}
         </h2>
 

components/commerce/recommended-products.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Sparkles } from "lucide-react";
-import { RecommendedProductsView, type RecommendedProductsProps } from "@/editor/components/commerce/recommended-products";
+import { RecommendedProductsView, type RecommendedProductsProps } from "@/components/commerce/recommended-products";
 
 export function createRecommendedProductsEditor(opts: {
   productField: any;

components/commerce/recommended-products.tsx

@@ -2,10 +2,11 @@ import type { ShopifyProduct } from "@reacteditor/field-shopify";
 import {
   useProduct,
   useProductRecommendations,
-} from "@/editor/hooks/use-shopify-products";
+} from "@/hooks/use-shopify-products";
 import { ProductCard } from "./product-card";
-import { Typography } from "@/editor/theme/Typography";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type RecommendedProductsProps = {
   product: ShopifyProduct | null;
@@ -27,7 +28,7 @@ export function RecommendedProductsView({
   if (!selected) {
     return (
       <section className="bg-background py-20 md:py-28">
-        <div className="container mx-auto max-w-7xl px-6">
+        <Container>
           <div className="mb-12 flex max-w-xl flex-col gap-3">
             {tagline ? <Skeleton className="h-3 w-24" /> : null}
             <Skeleton className="h-8 w-2/3" />
@@ -37,22 +38,22 @@ export function RecommendedProductsView({
               <Skeleton key={i} className="aspect-[4/5] w-full" />
             ))}
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
 
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
-        <div className="mb-12 max-w-xl">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h3">{heading}</Typography>
-        </div>
+      <Container>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          align="left"
+          size="md"
+          className="mb-12"
+          maxWidth="max-w-xl"
+        />
 
         <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-4">
           {items.length === 0
@@ -61,7 +62,7 @@ export function RecommendedProductsView({
               ))
             : items.map((p: any) => <ProductCard key={p.id} product={p} />)}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/search-products.editor.tsx

@@ -0,0 +1,242 @@
+import { ComponentConfig } from '@reacteditor/core';
+import { Search } from 'lucide-react';
+import { SearchProductsView, type SearchProductsProps } from '@/components/commerce/search-products';
+
+export const searchProductsEditor: ComponentConfig<SearchProductsProps> = {
+  label: 'Search & filter',
+  icon: <Search size={16} />,
+  category: 'commerce',
+  defaultProps: {
+    heading: 'Shop',
+    subheading: 'Browse our full collection.',
+    columns: '4',
+    limit: 24,
+    showAvailability: 'yes',
+    showPriceRange: 'yes',
+    showProductType: 'yes',
+    productTypeOptions: [
+      { label: 'T-Shirts' },
+      { label: 'Pants' },
+      { label: 'Outerwear' },
+      { label: 'Accessories' },
+      { label: 'Shoes' },
+    ],
+    showVendor: 'yes',
+    vendorOptions: [
+      { label: 'Maison' },
+      { label: 'Atelier' },
+      { label: 'Studio' },
+    ],
+    showTags: 'yes',
+    tagOptions: [
+      { label: 'New' },
+      { label: 'Sale' },
+      { label: 'Bestseller' },
+      { label: 'Limited Edition' },
+    ],
+    showColor: 'yes',
+    colorOptions: [
+      { label: 'Black', color: '#000000' },
+      { label: 'White', color: '#FFFFFF' },
+      { label: 'Navy', color: '#1e3a5f' },
+      { label: 'Red', color: '#c0392b' },
+    ],
+    showStyle: 'no',
+    styleOptions: [],
+    showSize: 'yes',
+    sizeOptions: [
+      { label: 'XS' },
+      { label: 'S' },
+      { label: 'M' },
+      { label: 'L' },
+      { label: 'XL' },
+    ],
+    showMaterial: 'no',
+    materialOptions: [],
+    metafieldFilters: [],
+    defaultSort: 'BEST_SELLING',
+  },
+  fields: {
+    heading: { label: 'Heading', type: 'text', contentEditable: true },
+    subheading: { label: 'Subheading', type: 'textarea', contentEditable: true },
+    columns: {
+      label: 'Columns',
+      type: 'radio',
+      options: [
+        { label: '2', value: '2' },
+        { label: '3', value: '3' },
+        { label: '4', value: '4' },
+      ],
+    },
+    limit: { label: 'Products per page', type: 'number', min: 4, max: 48 },
+    defaultSort: {
+      label: 'Default sort',
+      type: 'select',
+      options: [
+        { label: 'Best Selling',       value: 'BEST_SELLING' },
+        { label: 'Relevance',          value: 'RELEVANCE'    },
+        { label: 'Newest',             value: 'NEWEST'       },
+        { label: 'Price: Low to High', value: 'PRICE_ASC'    },
+        { label: 'Price: High to Low', value: 'PRICE_DESC'   },
+        { label: 'Alphabetical',       value: 'TITLE_ASC'    },
+      ],
+    },
+    showAvailability: {
+      label: 'Availability filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    showPriceRange: {
+      label: 'Price range filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    showProductType: {
+      label: 'Product type filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    productTypeOptions: {
+      label: 'Product types',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Type',
+      arrayFields: {
+        label: { label: 'Type name', type: 'text' },
+      },
+    },
+    showVendor: {
+      label: 'Brand / vendor filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    vendorOptions: {
+      label: 'Brands',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Brand',
+      arrayFields: {
+        label: { label: 'Brand name', type: 'text' },
+      },
+    },
+    showTags: {
+      label: 'Tags filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    tagOptions: {
+      label: 'Tags',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Tag',
+      arrayFields: {
+        label: { label: 'Tag name', type: 'text' },
+      },
+    },
+    showColor: {
+      label: 'Color filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    colorOptions: {
+      label: 'Colors',
+      type: 'array',
+      defaultItemProps: { label: '', color: '#000000' },
+      getItemSummary: (it: any) => it?.label || 'Color',
+      arrayFields: {
+        label: { label: 'Color name', type: 'text' },
+        color: { label: 'Color', type: 'color' },
+      },
+    },
+    showStyle: {
+      label: 'Style filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    styleOptions: {
+      label: 'Styles',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Style',
+      arrayFields: {
+        label: { label: 'Style name', type: 'text' },
+      },
+    },
+    showSize: {
+      label: 'Size filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    sizeOptions: {
+      label: 'Sizes',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Size',
+      arrayFields: {
+        label: { label: 'Size name', type: 'text' },
+      },
+    },
+    showMaterial: {
+      label: 'Material filter',
+      type: 'radio',
+      options: [
+        { label: 'Show', value: 'yes' },
+        { label: 'Hide', value: 'no'  },
+      ],
+    },
+    materialOptions: {
+      label: 'Materials',
+      type: 'array',
+      defaultItemProps: { label: '' },
+      getItemSummary: (it: any) => it?.label || 'Material',
+      arrayFields: {
+        label: { label: 'Material name', type: 'text' },
+      },
+    },
+    metafieldFilters: {
+      label: 'Metafield filters',
+      type: 'array',
+      defaultItemProps: { namespace: '', key: '', label: '', values: [{ label: '' }] },
+      getItemSummary: (it: any) => it?.label || it?.key || 'Metafield',
+      arrayFields: {
+        namespace: { label: 'Namespace', type: 'text' },
+        key: { label: 'Key', type: 'text' },
+        label: { label: 'Label', type: 'text' },
+        values: {
+          label: 'Values',
+          type: 'array',
+          defaultItemProps: { label: '' },
+          getItemSummary: (v: any) => v?.label || 'Value',
+          arrayFields: {
+            label: { label: 'Value', type: 'text' },
+          },
+        },
+      },
+    },
+  },
+  render: (props) => <SearchProductsView {...props} />,
+};

components/commerce/search-products.tsx

@@ -0,0 +1,533 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { ChevronDown, SlidersHorizontal } from 'lucide-react';
+import { useShopifySearch, type SearchFilters, type SortOption } from '@/hooks/use-shopify-search';
+
+import { ProductCard } from './product-card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetFooter } from '@/components/ui/sheet';
+import { Container } from '@/components/layout/Container';
+import { cn } from '@/lib/utils';
+
+type FilterOption = { label: string };
+type ColorOption = { label: string; color: string };
+
+export type SearchProductsProps = {
+  heading: string;
+  subheading: string;
+  columns: '2' | '3' | '4';
+  limit: number;
+  showAvailability: 'yes' | 'no';
+  showPriceRange: 'yes' | 'no';
+  showProductType: 'yes' | 'no';
+  productTypeOptions: FilterOption[];
+  showVendor: 'yes' | 'no';
+  vendorOptions: FilterOption[];
+  showTags: 'yes' | 'no';
+  tagOptions: FilterOption[];
+  showColor: 'yes' | 'no';
+  colorOptions: ColorOption[];
+  showStyle: 'yes' | 'no';
+  styleOptions: FilterOption[];
+  showSize: 'yes' | 'no';
+  sizeOptions: FilterOption[];
+  showMaterial: 'yes' | 'no';
+  materialOptions: FilterOption[];
+  metafieldFilters: { namespace: string; key: string; label: string; values: { label: string }[] }[];
+  defaultSort: SortOption;
+};
+
+const SORT_OPTIONS: { label: string; value: SortOption }[] = [
+  { label: 'Relevance',          value: 'RELEVANCE'    },
+  { label: 'Best Selling',       value: 'BEST_SELLING' },
+  { label: 'Newest',             value: 'NEWEST'       },
+  { label: 'Price: Low to High', value: 'PRICE_ASC'    },
+  { label: 'Price: High to Low', value: 'PRICE_DESC'   },
+  { label: 'Alphabetical',       value: 'TITLE_ASC'    },
+];
+
+const colClass: Record<SearchProductsProps['columns'], string> = {
+  '2': 'grid-cols-2',
+  '3': 'grid-cols-2 md:grid-cols-3',
+  '4': 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+};
+
+// ─── Filter group (collapsible) ────────────────────────────────────────────────
+
+function FilterGroup({ label, children, defaultOpen = true }: {
+  label: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="border-b border-border py-4">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="flex w-full items-center justify-between text-xs font-semibold uppercase tracking-[0.15em] text-foreground"
+      >
+        {label}
+        <ChevronDown
+          size={14}
+          className={cn('transition-transform', open ? 'rotate-180' : '')}
+        />
+      </button>
+      {open && <div className="mt-3 space-y-2">{children}</div>}
+    </div>
+  );
+}
+
+function Checkbox({ checked, onChange, label }: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+}) {
+  return (
+    <label className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="sr-only"
+      />
+      <span
+        className={cn(
+          'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
+          checked ? 'border-foreground bg-foreground' : 'border-border',
+        )}
+      >
+        {checked && (
+          <svg viewBox="0 0 10 8" className="h-2.5 w-2.5 fill-background" aria-hidden>
+            <path d="M1 4l3 3 5-6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </span>
+      {label}
+    </label>
+  );
+}
+
+// ─── Sidebar ────────────────────────────────────────────────────────────────────
+
+type ActiveFilters = {
+  availability: boolean;
+  productTypes: string[];
+  vendors: string[];
+  tags: string[];
+  colors: string[];
+  styles: string[];
+  sizes: string[];
+  materials: string[];
+  minPrice: string;
+  maxPrice: string;
+  metafieldValues: Record<string, string[]>;
+};
+
+function Sidebar({
+  props,
+  active,
+  onChange,
+}: {
+  props: SearchProductsProps;
+  active: ActiveFilters;
+  onChange: (patch: Partial<ActiveFilters>) => void;
+}) {
+  const productTypes = (props.productTypeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const vendors = (props.vendorOptions ?? []).map((o) => o.label).filter(Boolean);
+  const tags = (props.tagOptions ?? []).map((o) => o.label).filter(Boolean);
+  const colors = (props.colorOptions ?? []) as ColorOption[];
+  const styles = (props.styleOptions ?? []).map((o) => o.label).filter(Boolean);
+  const sizes = (props.sizeOptions ?? []).map((o) => o.label).filter(Boolean);
+  const materials = (props.materialOptions ?? []).map((o) => o.label).filter(Boolean);
+  const metafieldFilters = (props.metafieldFilters ?? []).filter((mf) => mf.namespace && mf.key);
+
+  function toggle(key: 'productTypes' | 'vendors' | 'tags' | 'colors' | 'styles' | 'sizes' | 'materials', value: string) {
+    const arr = active[key];
+    onChange({ [key]: arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value] });
+  }
+
+  return (
+    <div className="w-full">
+      {props.showAvailability === 'yes' && (
+        <FilterGroup label="Availability">
+          <Checkbox
+            checked={active.availability}
+            onChange={(v) => onChange({ availability: v })}
+            label="In stock"
+          />
+        </FilterGroup>
+      )}
+
+      {props.showPriceRange === 'yes' && (
+        <FilterGroup label="Price">
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              min={0}
+              placeholder="Min"
+              value={active.minPrice}
+              onChange={(e) => onChange({ minPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+            <span className="text-muted-foreground">–</span>
+            <input
+              type="number"
+              min={0}
+              placeholder="Max"
+              value={active.maxPrice}
+              onChange={(e) => onChange({ maxPrice: e.target.value })}
+              className="w-full rounded-md border border-border bg-background px-2 py-1.5 text-sm"
+            />
+          </div>
+        </FilterGroup>
+      )}
+
+      {props.showVendor === 'yes' && vendors.length > 0 && (
+        <FilterGroup label="Brand">
+          {vendors.map((v) => (
+            <Checkbox
+              key={v}
+              checked={active.vendors.includes(v)}
+              onChange={() => toggle('vendors', v)}
+              label={v}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showColor === 'yes' && colors.length > 0 && (
+        <FilterGroup label="Color">
+          {colors.filter((c) => c.label).map((c) => (
+            <label
+              key={c.label}
+              className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground/80 hover:text-foreground"
+            >
+              <input
+                type="checkbox"
+                checked={active.colors.includes(c.label)}
+                onChange={() => toggle('colors', c.label)}
+                className="sr-only"
+              />
+              <span
+                className={cn(
+                  'flex h-5 w-5 shrink-0 rounded-full border-2',
+                  active.colors.includes(c.label) ? 'border-foreground' : 'border-transparent',
+                )}
+                style={{ backgroundColor: c.color || undefined }}
+              />
+              {c.label}
+            </label>
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showStyle === 'yes' && styles.length > 0 && (
+        <FilterGroup label="Style">
+          {styles.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.styles.includes(s)}
+              onChange={() => toggle('styles', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showSize === 'yes' && sizes.length > 0 && (
+        <FilterGroup label="Size">
+          {sizes.map((s) => (
+            <Checkbox
+              key={s}
+              checked={active.sizes.includes(s)}
+              onChange={() => toggle('sizes', s)}
+              label={s}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showMaterial === 'yes' && materials.length > 0 && (
+        <FilterGroup label="Material">
+          {materials.map((m) => (
+            <Checkbox
+              key={m}
+              checked={active.materials.includes(m)}
+              onChange={() => toggle('materials', m)}
+              label={m}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showProductType === 'yes' && productTypes.length > 0 && (
+        <FilterGroup label="Product type">
+          {productTypes.map((pt) => (
+            <Checkbox
+              key={pt}
+              checked={active.productTypes.includes(pt)}
+              onChange={() => toggle('productTypes', pt)}
+              label={pt}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {props.showTags === 'yes' && tags.length > 0 && (
+        <FilterGroup label="Tags">
+          {tags.map((t) => (
+            <Checkbox
+              key={t}
+              checked={active.tags.includes(t)}
+              onChange={() => toggle('tags', t)}
+              label={t}
+            />
+          ))}
+        </FilterGroup>
+      )}
+
+      {metafieldFilters.map((mf, i) => {
+        const mfKey = `${mf.namespace}.${mf.key}`;
+        const selected = active.metafieldValues[mfKey] ?? [];
+        return (
+          <FilterGroup key={mfKey + i} label={mf.label || mfKey}>
+            {mf.values.map((v) => v.label).filter(Boolean).map((val) => (
+              <Checkbox
+                key={val}
+                checked={selected.includes(val)}
+                onChange={(checked) => {
+                  const next = checked
+                    ? [...selected, val]
+                    : selected.filter((v) => v !== val);
+                  onChange({ metafieldValues: { ...active.metafieldValues, [mfKey]: next } });
+                }}
+                label={val}
+              />
+            ))}
+          </FilterGroup>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Main component ──────────────────────────────────────────────────────────
+
+export function SearchProductsView(props: SearchProductsProps) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const initialQ = searchParams.get('q') ?? '';
+
+  const [query, setQuery] = useState(initialQ);
+  const [inputValue, setInputValue] = useState(initialQ);
+  const [sort, setSort] = useState<SortOption>(props.defaultSort);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [active, setActive] = useState<ActiveFilters>({
+    availability: false,
+    productTypes: [],
+    vendors: [],
+    tags: [],
+    colors: [],
+    styles: [],
+    sizes: [],
+    materials: [],
+    minPrice: '',
+    maxPrice: '',
+    metafieldValues: {},
+  });
+
+  const patchActive = useCallback((patch: Partial<ActiveFilters>) => {
+    setActive((prev) => ({ ...prev, ...patch }));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setActive({
+      availability: false,
+      productTypes: [],
+      vendors: [],
+      tags: [],
+      colors: [],
+      styles: [],
+      sizes: [],
+      materials: [],
+      minPrice: '',
+      maxPrice: '',
+      metafieldValues: {},
+    });
+  }, []);
+
+  const filters: SearchFilters = {
+    q: query,
+    sort,
+    availability: active.availability || undefined,
+    productTypes: active.productTypes.length ? active.productTypes : undefined,
+    vendors: active.vendors.length ? active.vendors : undefined,
+    tags: active.tags.length ? active.tags : undefined,
+    colors: active.colors.length ? active.colors : undefined,
+    styles: active.styles.length ? active.styles : undefined,
+    sizes: active.sizes.length ? active.sizes : undefined,
+    materials: active.materials.length ? active.materials : undefined,
+    minPrice: active.minPrice !== '' ? parseFloat(active.minPrice) : undefined,
+    maxPrice: active.maxPrice !== '' ? parseFloat(active.maxPrice) : undefined,
+    metafields: (() => {
+      const mfs = Object.entries(active.metafieldValues).flatMap(([mfKey, vals]) => {
+        const [namespace, key] = mfKey.split('.');
+        return vals.map((value) => ({ namespace, key, value }));
+      });
+      return mfs.length ? mfs : undefined;
+    })(),
+  };
+
+  const { products, loading, error, hasNextPage, fetchMore } = useShopifySearch(filters, {
+    first: props.limit,
+  });
+
+  // Sync ?q= param when query changes
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString());
+    if (query) params.set('q', query); else params.delete('q');
+    const qs = params.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
+  }, [query]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    setQuery(inputValue.trim());
+  };
+
+  return (
+    <section className="bg-background py-12 md:py-16">
+      <Container>
+
+        {/* Page header */}
+        <div className="mb-10">
+          {props.heading && (
+            <h1 className="mb-2 font-heading text-4xl font-bold tracking-tight text-foreground md:text-5xl">
+              {props.heading}
+            </h1>
+          )}
+          {props.subheading && (
+            <p className="text-muted-foreground">{props.subheading}</p>
+          )}
+          {/* Search bar (mobile only – desktop version lives in the product area) */}
+          <form onSubmit={handleSearch} className="mt-6 flex gap-2 md:hidden">
+            <input
+              type="search"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder="Search products…"
+              className="flex-1 rounded-md border border-border bg-background px-4 py-2.5 text-sm outline-none focus:border-foreground"
+            />
+            <button
+              type="submit"
+              className="rounded-md bg-foreground px-5 py-2.5 text-sm font-medium text-background hover:opacity-90"
+            >
+              Search
+            </button>
+          </form>
+        </div>
+
+        {/* Search bar (desktop only — mobile lives in header above) */}
+        <form onSubmit={handleSearch} className="mb-4 hidden gap-2 md:flex">
+          <input
+            type="search"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder="Search products…"
+            className="flex-1 rounded-md border border-border bg-background px-4 py-2.5 text-sm outline-none focus:border-foreground"
+          />
+          <button
+            type="submit"
+            className="rounded-md bg-foreground px-5 py-2.5 text-sm font-medium text-background hover:opacity-90"
+          >
+            Search
+          </button>
+        </form>
+
+        {/* Filter + sort bar */}
+        <div className="mb-6 flex items-center justify-between">
+          <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+            <SheetTrigger asChild>
+              <button
+                type="button"
+                className="flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium hover:bg-muted"
+              >
+                <SlidersHorizontal size={14} />
+                Filters
+              </button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-full sm:max-w-md">
+              <SheetHeader>
+                <SheetTitle>Filters</SheetTitle>
+              </SheetHeader>
+              <div className="flex-1 overflow-y-auto px-4">
+                <Sidebar props={props} active={active} onChange={patchActive} />
+              </div>
+              <SheetFooter className="flex-row gap-2 border-t border-border">
+                <Button variant="outline" className="flex-1" onClick={clearAll}>
+                  Clear
+                </Button>
+                <Button className="flex-1" onClick={() => setFiltersOpen(false)}>
+                  Search
+                </Button>
+              </SheetFooter>
+            </SheetContent>
+          </Sheet>
+
+          <div className="flex items-center gap-4">
+            <p className="hidden text-sm text-muted-foreground sm:block">
+              {loading ? 'Loading…' : `${products.length} product${products.length === 1 ? '' : 's'}`}
+            </p>
+            <Select value={sort} onValueChange={(v) => setSort(v as SortOption)}>
+              <SelectTrigger className="h-auto px-3 py-2 text-sm">
+                <SelectValue>{SORT_OPTIONS.find((o) => o.value === sort)?.label}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {SORT_OPTIONS.map((o) => (
+                  <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {error && (
+          <p className="rounded-md border border-border p-4 text-sm text-muted-foreground">
+            {error}
+          </p>
+        )}
+
+        {/* Grid */}
+        <div className={cn('grid gap-x-6 gap-y-10', colClass[props.columns])}>
+          {loading
+            ? Array.from({ length: props.limit }).map((_, i) => (
+                <Skeleton key={i} className="aspect-[4/5] w-full" />
+              ))
+            : products.map((p) => <ProductCard key={p.id} product={p} />)}
+        </div>
+
+        {!loading && products.length === 0 && !error && (
+          <div className="mt-16 text-center text-sm text-muted-foreground">
+            No products found.{query ? ` Try a different search term.` : ''}
+          </div>
+        )}
+
+        {hasNextPage && !loading && (
+          <div className="mt-12 flex justify-center">
+            <button
+              type="button"
+              onClick={fetchMore}
+              className="rounded-md border border-border px-8 py-3 text-sm font-medium hover:bg-muted"
+            >
+              Load more
+            </button>
+          </div>
+        )}
+      </Container>
+    </section>
+  );
+}

components/cta/cta.editor.tsx

@@ -1,8 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { imageField } from "@reacteditor/plugin-media/field";
 import { Megaphone } from "lucide-react";
-import { CTA, type CTAProps } from "@/editor/components/cta/cta";
-import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
+import { CTA, type CTAProps } from "@/components/cta/cta";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
 export const ctaEditor: ComponentConfig<CTAProps> = {
   label: "Call to action",

components/cta/cta.tsx

@@ -1,6 +1,6 @@
-import { Link } from "react-router";
-import { cn } from "@/editor/lib/utils";
-import { Typography } from "@/editor/theme/Typography";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Heading } from "@/components/Heading";
 
 export type CTAProps = {
   tagline: string;
@@ -43,17 +43,15 @@ export function CTA({
           align === "center" ? "items-center text-center" : "items-start",
         )}
       >
-        {tagline ? (
-          <p className="mb-4 text-xs uppercase tracking-[0.2em] text-white/80">
-            {tagline}
-          </p>
-        ) : null}
-        <Typography variant="h2">{heading}</Typography>
-        {subheading ? (
-          <Typography variant="subtitle1" className="mt-5 max-w-xl text-white/80">
-            {subheading}
-          </Typography>
-        ) : null}
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align={align === "center" ? "center" : "left"}
+          size="lg"
+          tone="light"
+          subtitleClassName="max-w-xl"
+        />
         <div
           className={cn(
             "mt-10 flex flex-wrap gap-3",
@@ -62,16 +60,16 @@ export function CTA({
         >
           {primaryCta?.label ? (
             <Link
-              to={primaryCta.href || "#"}
-              className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
+              href={primaryCta.href || "#"}
+              className="inline-flex items-center justify-center rounded-md bg-white px-6 py-3 text-sm font-medium tracking-wide text-black hover:opacity-90"
             >
               {primaryCta.label}
             </Link>
           ) : null}
           {secondaryCta?.label ? (
             <Link
-              to={secondaryCta.href || "#"}
-              className="inline-flex items-center justify-center rounded-full border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
+              href={secondaryCta.href || "#"}
+              className="inline-flex items-center justify-center rounded-md border border-white px-6 py-3 text-sm font-medium tracking-wide text-white hover:bg-white/10"
             >
               {secondaryCta.label}
             </Link>

components/faq/faq.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { HelpCircle } from "lucide-react";
-import { FAQ, type FAQProps } from "@/editor/components/faq/faq";
+import { FAQ, type FAQProps } from "@/components/faq/faq";
 
 export const faqEditor: ComponentConfig<FAQProps> = {
   label: "FAQ",

components/faq/faq.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Plus, Minus } from "lucide-react";
-import { Typography } from "@/editor/theme/Typography";
+import { Heading } from "@/components/Heading";
 
 export type FAQProps = {
   tagline: string;
@@ -14,19 +14,14 @@ export function FAQ({ tagline, heading, subheading, items }: FAQProps) {
   return (
     <section className="bg-background py-20 md:py-28">
       <div className="container mx-auto max-w-3xl px-6">
-        <div className="mb-12 text-center">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h2">{heading}</Typography>
-          {subheading ? (
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mb-12"
+        />
 
         <div className="divide-y divide-border border-y border-border">
           {items.map((item, i) => {

components/features/features.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Sparkles } from "lucide-react";
-import { Features, type FeaturesProps } from "@/editor/components/features/features";
+import { Features, type FeaturesProps } from "@/components/features/features";
 
 export const featuresEditor: ComponentConfig<FeaturesProps> = {
   label: "Features",

components/features/features.tsx

@@ -1,4 +1,6 @@
-import { Typography } from "@/editor/theme/Typography";
+import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type FeaturesProps = {
   tagline: string;
@@ -17,35 +19,31 @@ const colClass: Record<FeaturesProps["columns"], string> = {
 export function Features({ tagline, heading, subheading, columns, items }: FeaturesProps) {
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
-        <div className="mx-auto mb-16 max-w-2xl text-center">
-          {tagline ? (
-            <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-              {tagline}
-            </p>
-          ) : null}
-          <Typography variant="h2">{heading}</Typography>
-          {subheading ? (
-            <Typography variant="subtitle1" className="mt-3">
-              {subheading}
-            </Typography>
-          ) : null}
-        </div>
+      <Container>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-16"
+          maxWidth="max-w-2xl"
+        />
 
         <div className={`grid grid-cols-1 gap-x-10 gap-y-12 ${colClass[columns]}`}>
           {items.map((item, i) => (
-            <div key={i} className="border-t border-border pt-6">
-              <p className="mb-3 text-xs tracking-[0.18em] text-muted-foreground">
+            <div key={i} className="flex flex-col gap-3">
+              <Typography variant="caption">
                 {String(i + 1).padStart(2, "0")}
-              </p>
+              </Typography>
               <Typography variant="h5">{item.title}</Typography>
-              <Typography variant="body2" className="mt-3 text-muted-foreground">
+              <Typography variant="body2" className="text-muted-foreground">
                 {item.body}
               </Typography>
             </div>
           ))}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/footer/footer.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { LayoutGrid } from "lucide-react";
-import { Footer, type FooterProps } from "@/editor/components/footer/footer";
+import { Footer, type FooterProps } from "@/components/footer/footer";
 
 export const footerEditor: ComponentConfig<FooterProps> = {
   label: "Footer",

components/footer/footer.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { Link } from "react-router";
-import { Typography } from "@/editor/theme/Typography";
+import Link from "next/link";
+import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
 
 export type FooterProps = {
   brand: string;
@@ -45,7 +46,7 @@ export function Footer({
 
   return (
     <footer className="border-t border-border bg-background">
-      <div className="container mx-auto max-w-7xl px-6 py-20 md:py-24">
+      <Container className="py-20 md:py-24">
         <div className="grid grid-cols-1 gap-12 md:grid-cols-12">
           <div className="md:col-span-4">
             <Typography variant="h5" as="p">
@@ -96,7 +97,7 @@ export function Footer({
                   {col.links.map((l, j) => (
                     <li key={j}>
                       <Link
-                        to={l.href}
+                        href={l.href}
                         className="text-sm text-foreground/80 hover:text-foreground"
                       >
                         {l.label}
@@ -123,7 +124,7 @@ export function Footer({
             ))}
           </div>
         </div>
-      </div>
+      </Container>
     </footer>
   );
 }

components/hero/hero.editor.tsx

@@ -1,8 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { imageField } from "@reacteditor/plugin-media/field";
 import { LayoutTemplate } from "lucide-react";
-import { Hero, type HeroProps } from "@/editor/components/hero/hero";
-import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
+import { Hero, type HeroProps } from "@/components/hero/hero";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
 export const heroEditor: ComponentConfig<HeroProps> = {
   label: "Hero",
@@ -13,8 +13,10 @@ export const heroEditor: ComponentConfig<HeroProps> = {
     heading: "Made for the way you move",
     subheading:
       "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
-    primaryCta: { label: "Shop the collection", href: "/collections" },
-    secondaryCta: { label: "Our story", href: "/about" },
+    buttons: [
+      { label: "Shop the collection", href: "/collections", variant: "primary" },
+      { label: "Our story", href: "/about", variant: "secondary" },
+    ],
     imageUrl:
       "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2400&q=80",
     align: "left",
@@ -25,21 +27,29 @@ export const heroEditor: ComponentConfig<HeroProps> = {
     tagline: { label: "Tagline", type: "text", contentEditable: true },
     heading: { label: "Heading", type: "textarea", contentEditable: true },
     subheading: { label: "Subheading", type: "textarea", contentEditable: true },
-    primaryCta: {
-      label: "Primary CTA",
-      type: "object",
-      objectFields: {
+    buttons: {
+      label: "Buttons",
+      type: "array",
+      arrayFields: {
         label: { label: "Label", type: "text", contentEditable: true },
         href: { label: "Link", type: "text" },
+        variant: {
+          label: "Variant",
+          type: "select",
+          options: [
+            { label: "Primary (filled)", value: "primary" },
+            { label: "Secondary (outline)", value: "secondary" },
+            { label: "Outline", value: "outline" },
+            { label: "Ghost", value: "ghost" },
+          ],
         },
       },
-    secondaryCta: {
-      label: "Secondary CTA",
-      type: "object",
-      objectFields: {
-        label: { label: "Label", type: "text", contentEditable: true },
-        href: { label: "Link", type: "text" },
+      defaultItemProps: {
+        label: "Button",
+        href: "/",
+        variant: "primary",
       },
+      getItemSummary: (item) => item?.label || "Button",
     },
     imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     align: {

components/hero/hero.tsx

@@ -1,13 +1,20 @@
-import { Link } from "react-router";
-import { cn } from "@/editor/lib/utils";
-import { Typography } from "@/editor/theme/Typography";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Typography } from "@/components/Typography";
+
+export type HeroButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+
+export type HeroButton = {
+  label: string;
+  href: string;
+  variant: HeroButtonVariant;
+};
 
 export type HeroProps = {
   tagline: string;
   heading: string;
   subheading: string;
-  primaryCta: { label: string; href: string };
-  secondaryCta: { label: string; href: string };
+  buttons: HeroButton[];
   imageUrl: string;
   align: "left" | "center";
   height: "md" | "lg" | "full";
@@ -20,18 +27,40 @@ const heightClass: Record<HeroProps["height"], string> = {
   full: "min-h-screen",
 };
 
+function buttonClass(variant: HeroButtonVariant, isDark: boolean): string {
+  switch (variant) {
+    case "primary":
+      return cn(
+        "inline-flex items-center justify-center rounded-md px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
+        isDark ? "bg-white text-black" : "bg-foreground text-background",
+      );
+    case "secondary":
+    case "outline":
+      return cn(
+        "inline-flex items-center justify-center rounded-md border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
+        isDark ? "border-white text-white" : "border-foreground text-foreground",
+      );
+    case "ghost":
+      return cn(
+        "inline-flex items-center justify-center rounded-md px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
+        isDark ? "text-white" : "text-foreground",
+      );
+  }
+}
+
 export function Hero({
   tagline,
   heading,
   subheading,
-  primaryCta,
-  secondaryCta,
+  buttons,
   imageUrl,
   align,
   height,
   tone,
 }: HeroProps) {
   const isDark = tone === "dark";
+  const visibleButtons = (buttons ?? []).filter((b) => b?.label);
+
   return (
     <section
       className={cn(
@@ -63,14 +92,15 @@ export function Hero({
         )}
       >
         {tagline ? (
-          <p
+          <Typography
+            variant="caption"
             className={cn(
-              "mb-5 text-xs uppercase tracking-[0.2em]",
+              "mb-5",
               isDark ? "text-white/80" : "text-foreground/70",
             )}
           >
             {tagline}
-          </p>
+          </Typography>
         ) : null}
         <Typography variant="h1" className="max-w-3xl">
           {heading}
@@ -87,35 +117,24 @@ export function Hero({
           </Typography>
         ) : null}
 
+        {visibleButtons.length > 0 ? (
           <div
             className={cn(
               "mt-10 flex flex-wrap gap-3",
               align === "center" && "justify-center",
             )}
           >
-          {primaryCta?.label ? (
+            {visibleButtons.map((b, i) => (
               <Link
-              to={primaryCta.href || "#"}
-              className={cn(
-                "inline-flex items-center justify-center rounded-full px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-90",
-                isDark ? "bg-white text-black" : "bg-foreground text-background",
-              )}
+                key={`${b.href}-${b.label}-${i}`}
+                href={b.href || "#"}
+                className={buttonClass(b.variant, isDark)}
               >
-              {primaryCta.label}
+                {b.label}
               </Link>
-          ) : null}
-          {secondaryCta?.label ? (
-            <Link
-              to={secondaryCta.href || "#"}
-              className={cn(
-                "inline-flex items-center justify-center rounded-full border px-6 py-3 text-sm font-medium tracking-wide transition-opacity hover:opacity-80",
-                isDark ? "border-white text-white" : "border-foreground text-foreground",
-              )}
-            >
-              {secondaryCta.label}
-            </Link>
-          ) : null}
+            ))}
           </div>
+        ) : null}
       </div>
     </section>
   );

components/landing/banner.editor.tsx

@@ -1,6 +1,6 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Megaphone } from "lucide-react";
-import { Banner, type BannerProps } from "@/editor/components/landing/banner";
+import { Banner, type BannerProps } from "@/components/landing/banner";
 
 export const bannerEditor: ComponentConfig<BannerProps> = {
   label: "Announcement bar",

components/landing/banner.tsx

@@ -1,5 +1,5 @@
-import { Link } from "react-router";
-import { cn } from "@/editor/lib/utils";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
 
 export type BannerProps = {
   text: string;
@@ -20,7 +20,7 @@ export function Banner({ text, ctaLabel, ctaHref, tone }: BannerProps) {
         <span>{text}</span>
         {ctaLabel ? (
           <Link
-            to={ctaHref || "#"}
+            href={ctaHref || "#"}
             className="underline-offset-4 hover:underline"
           >
             {ctaLabel} →

components/landing/image-gallery.editor.tsx

@@ -1,8 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { imageField } from "@reacteditor/plugin-media/field";
 import { Images } from "lucide-react";
-import { ImageGallery, type ImageGalleryProps } from "@/editor/components/landing/image-gallery";
-import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
+import { ImageGallery, type ImageGalleryProps } from "@/components/landing/image-gallery";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
 export const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
   label: "Image gallery",

components/landing/image-gallery.tsx

@@ -1,5 +1,6 @@
-import { cn } from "@/editor/lib/utils";
-import { Typography } from "@/editor/theme/Typography";
+import { cn } from "@/lib/utils";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
 
 export type ImageGalleryProps = {
   tagline: string;
@@ -12,22 +13,16 @@ export type ImageGalleryProps = {
 export function ImageGallery({ tagline, heading, subheading, layout, items }: ImageGalleryProps) {
   return (
     <section className="bg-background py-20 md:py-28">
-      <div className="container mx-auto max-w-7xl px-6">
-        {(tagline || heading || subheading) && (
-          <div className="mx-auto mb-12 max-w-2xl text-center">
-            {tagline ? (
-              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                {tagline}
-              </p>
-            ) : null}
-            {heading ? <Typography variant="h2">{heading}</Typography> : null}
-            {subheading ? (
-              <Typography variant="subtitle1" className="mt-3">
-                {subheading}
-              </Typography>
-            ) : null}
-          </div>
-        )}
+      <Container>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-12"
+          maxWidth="max-w-2xl"
+        />
 
         {layout === "masonry" ? (
           <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
@@ -86,7 +81,7 @@ export function ImageGallery({ tagline, heading, subheading, layout, items }: Im
             ))}
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/landing/newsletter-cta.editor.tsx

@@ -0,0 +1,80 @@
+import { ComponentConfig, Fields } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
+import { Mail } from "lucide-react";
+import { NewsletterCta, type NewsletterCtaProps } from "@/components/landing/newsletter-cta";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
+
+const baseFields: Fields<NewsletterCtaProps> = {
+  tagline: { label: "Tagline", type: "text", contentEditable: true },
+  heading: { label: "Heading", type: "text", contentEditable: true },
+  subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+  buttonLabel: { label: "Button label", type: "text", contentEditable: true },
+  emailProvider: {
+    label: "Email provider",
+    type: "select",
+    options: [
+      { label: "None (custom endpoint)", value: "none" },
+      { label: "Mailchimp", value: "mailchimp" },
+      { label: "Klaviyo", value: "klaviyo" },
+    ],
+  },
+  imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
+  layout: {
+    label: "Layout",
+    type: "radio",
+    options: [
+      { label: "Split (image + form)", value: "split" },
+      { label: "Stacked (centered)", value: "stacked" },
+    ],
+  },
+};
+
+export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
+  label: "Newsletter",
+  icon: <Mail size={16} />,
+  category: "content",
+  defaultProps: {
+    tagline: "Stay in the loop",
+    heading: "Letters from the studio",
+    subheading:
+      "New collections, mill stories, and the occasional invitation to in-person events. Twice a month.",
+    buttonLabel: "Subscribe",
+    emailProvider: "none",
+    endpoint: "",
+    mailchimpApiKey: "",
+    mailchimpServerPrefix: "",
+    mailchimpAudienceId: "",
+    klaviyoCompanyId: "",
+    klaviyoListId: "",
+    imageUrl:
+      "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1800&q=80",
+    layout: "split",
+  },
+  fields: baseFields,
+  resolveFields: (data) => {
+    const provider = data.props.emailProvider;
+    if (provider === "mailchimp") {
+      return {
+        ...baseFields,
+        mailchimpApiKey: { label: "Mailchimp API key", type: "text" },
+        mailchimpServerPrefix: {
+          label: "Server prefix (e.g. us21)",
+          type: "text",
+        },
+        mailchimpAudienceId: { label: "Audience ID", type: "text" },
+      };
+    }
+    if (provider === "klaviyo") {
+      return {
+        ...baseFields,
+        klaviyoCompanyId: { label: "Company ID (public API key)", type: "text" },
+        klaviyoListId: { label: "List ID", type: "text" },
+      };
+    }
+    return {
+      ...baseFields,
+      endpoint: { label: "Submit endpoint", type: "text" },
+    };
+  },
+  render: (props) => <NewsletterCta {...props} />,
+};

components/landing/newsletter-cta.tsx

@@ -0,0 +1,190 @@
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { Container } from "@/components/layout/Container";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Heading } from "@/components/Heading";
+
+export type EmailProvider = "none" | "mailchimp" | "klaviyo";
+
+export type NewsletterCtaProps = {
+  tagline: string;
+  heading: string;
+  subheading: string;
+  buttonLabel: string;
+  emailProvider: EmailProvider;
+  endpoint?: string;
+  mailchimpApiKey?: string;
+  mailchimpServerPrefix?: string;
+  mailchimpAudienceId?: string;
+  klaviyoCompanyId?: string;
+  klaviyoListId?: string;
+  imageUrl: string;
+  layout: "split" | "stacked";
+};
+
+export function NewsletterCta({
+  tagline,
+  heading,
+  subheading,
+  buttonLabel,
+  emailProvider,
+  endpoint,
+  mailchimpApiKey,
+  mailchimpServerPrefix,
+  mailchimpAudienceId,
+  klaviyoCompanyId,
+  klaviyoListId,
+  imageUrl,
+  layout,
+}: NewsletterCtaProps) {
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+    setSubmitting(true);
+    try {
+      if (emailProvider === "mailchimp") {
+        if (mailchimpServerPrefix && mailchimpAudienceId && mailchimpApiKey) {
+          await fetch(
+            `https://${mailchimpServerPrefix}.api.mailchimp.com/3.0/lists/${mailchimpAudienceId}/members`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${mailchimpApiKey}`,
+              },
+              body: JSON.stringify({
+                email_address: email,
+                status: "subscribed",
+              }),
+            },
+          );
+        }
+      } else if (emailProvider === "klaviyo") {
+        if (klaviyoCompanyId && klaviyoListId) {
+          await fetch(
+            `https://a.klaviyo.com/client/subscriptions/?company_id=${klaviyoCompanyId}`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                revision: "2024-10-15",
+              },
+              body: JSON.stringify({
+                data: {
+                  type: "subscription",
+                  attributes: {
+                    profile: {
+                      data: {
+                        type: "profile",
+                        attributes: { email },
+                      },
+                    },
+                  },
+                  relationships: {
+                    list: { data: { type: "list", id: klaviyoListId } },
+                  },
+                },
+              }),
+            },
+          );
+        }
+      } else if (endpoint) {
+        await fetch(endpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email }),
+        });
+      }
+      setSubmitted(true);
+    } catch {
+      setSubmitted(true);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const Form = (
+    <form
+      onSubmit={submit}
+      className="flex w-full max-w-md flex-col gap-3 sm:flex-row sm:items-center"
+    >
+      <Input
+        type="email"
+        required
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your email"
+        className="h-11 flex-1"
+      />
+      <Button type="submit" size="lg" disabled={submitting} className="h-11">
+        {submitting ? "Joining…" : buttonLabel}
+      </Button>
+    </form>
+  );
+
+  const isStacked = layout === "stacked";
+
+  return (
+    <section className="bg-background">
+      <Container className="py-20 md:py-28">
+        <div
+          className={cn(
+            "grid grid-cols-1 gap-10",
+            isStacked
+              ? "mx-auto max-w-3xl items-center text-center"
+              : "items-center md:grid-cols-12 md:gap-16",
+          )}
+        >
+          {imageUrl ? (
+            <div className={cn(!isStacked && "md:col-span-7")}>
+              <div className="relative overflow-hidden rounded-xl bg-muted">
+                <img
+                  src={imageUrl}
+                  alt=""
+                  className={cn(
+                    "w-full object-cover transition-transform duration-700 hover:scale-105",
+                    isStacked ? "aspect-[16/9]" : "aspect-[4/3]",
+                  )}
+                />
+              </div>
+            </div>
+          ) : null}
+          <div
+            className={cn(
+              "flex w-full flex-col",
+              isStacked ? "items-center" : "items-start md:col-span-5",
+            )}
+          >
+            <Heading
+              tagline={tagline}
+              title={heading}
+              subtitle={subheading}
+              align={isStacked ? "center" : "left"}
+              size="lg"
+              subtitleClassName={isStacked ? "mx-auto max-w-xl" : "max-w-md"}
+            />
+            <div
+              className={cn(
+                "mt-8 w-full",
+                isStacked && "flex justify-center",
+              )}
+            >
+              {submitted ? (
+                <p className="text-sm font-medium uppercase tracking-wide">
+                  You're in. See you Monday at 5:30am.
+                </p>
+              ) : (
+                Form
+              )}
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}

components/layout/Container.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type ContainerProps = React.HTMLAttributes<HTMLElement> & {
+  as?: React.ElementType;
+};
+
+export function Container({
+  as: Comp = "div",
+  className,
+  style,
+  ...props
+}: ContainerProps) {
+  return (
+    <Comp
+      className={cn("mx-auto w-full px-6", className)}
+      style={{ maxWidth: "var(--container-max-width, 80rem)", ...style }}
+      {...props}
+    />
+  );
+}

components/logos/logos.editor.tsx

@@ -1,8 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { imageField } from "@reacteditor/plugin-media/field";
 import { Award } from "lucide-react";
-import { Logos, type LogosProps } from "@/editor/components/logos/logos";
-import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
+import { Logos, type LogosProps } from "@/components/logos/logos";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
 export const logosEditor: ComponentConfig<LogosProps> = {
   label: "Press / Logos",

components/logos/logos.tsx

@@ -1,3 +1,6 @@
+import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
+
 export type LogosProps = {
   tagline: string;
   items: Array<{ src: string; alt: string }>;
@@ -7,11 +10,11 @@ export type LogosProps = {
 export function Logos({ tagline, items, layout }: LogosProps) {
   return (
     <section className="border-y border-border bg-muted/40 py-12">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         {tagline ? (
-          <p className="mb-8 text-center text-xs uppercase tracking-[0.2em] text-muted-foreground">
+          <Typography variant="caption" className="mb-8 text-center">
             {tagline}
-          </p>
+          </Typography>
         ) : null}
         {layout === "marquee" ? (
           <div className="overflow-hidden">
@@ -38,7 +41,7 @@ export function Logos({ tagline, items, layout }: LogosProps) {
             ))}
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/navigation/navigation.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { Menu as MenuIcon } from "lucide-react";
-import { Navigation, type NavigationProps } from "@/editor/components/navigation/navigation";
+import { imageField } from "@reacteditor/plugin-media/field";
+import { Navigation, type NavigationProps } from "@/components/navigation/navigation";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
 export const navigationEditor: ComponentConfig<NavigationProps> = {
   label: "Navigation",
@@ -9,21 +11,21 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
   global: true,
   defaultProps: {
     brand: "Maison",
+    logo: "",
     links: [
-      { label: "Shop", href: "/collections" },
-      { label: "Lookbook", href: "/lookbook" },
-      { label: "Journal", href: "/journal" },
+      { label: "Mens", href: "/collections/mens" },
+      { label: "Womens", href: "/collections/womens" },
+      { label: "Shop", href: "/search" },
       { label: "About", href: "/about" },
     ],
     showSearch: "yes",
     showCart: "yes",
     sticky: "yes",
     tone: "default",
-    bannerText: "",
-    bannerTone: "accent",
   },
   fields: {
-    brand: { label: "Brand", type: "text", contentEditable: true },
+    logo: { label: "Logo", ...imageField({ adapter: frontendAiMediaAdapter }) },
+    brand: { label: "Logo Alt", type: "text", contentEditable: true },
     links: {
       label: "Links",
       type: "array",
@@ -34,20 +36,6 @@ export const navigationEditor: ComponentConfig<NavigationProps> = {
         href: { label: "Link", type: "text" },
       },
     },
-    bannerText: {
-      label: "Banner text",
-      type: "text",
-      contentEditable: true,
-    },
-    bannerTone: {
-      label: "Banner tone",
-      type: "select",
-      options: [
-        { label: "Default", value: "default" },
-        { label: "Accent", value: "accent" },
-        { label: "Inverse (dark)", value: "inverse" },
-      ],
-    },
     showSearch: {
       label: "Search icon",
       type: "radio",

components/navigation/navigation.tsx

@@ -0,0 +1,139 @@
+import { Menu as MenuIcon, ShoppingBag, Search } from "lucide-react";
+import { useState } from "react";
+import Link from "next/link";
+import { useShopifyCart } from "@/hooks/use-shopify-cart";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
+import { cn } from "@/lib/utils";
+
+export type NavigationProps = {
+  brand: string;
+  logo?: string;
+  links: Array<{ label: string; href: string }>;
+  showSearch: "yes" | "no";
+  showCart: "yes" | "no";
+  sticky: "yes" | "no";
+  tone: "default" | "muted" | "inverse";
+};
+
+export function Navigation({
+  brand,
+  logo,
+  links,
+  showSearch,
+  showCart,
+  sticky,
+  tone,
+}: NavigationProps) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const cart = useShopifyCart();
+  const itemCount = cart?.itemCount ?? 0;
+
+  const toneClass: Record<NavigationProps["tone"], string> = {
+    default: "bg-background text-foreground border-b border-border",
+    muted: "bg-muted/40 text-foreground border-b border-border",
+    inverse: "bg-foreground text-background",
+  };
+
+  return (
+    <>
+      <div
+        className={cn(
+          "w-full",
+          sticky === "yes" && "sticky top-0 z-40",
+        )}
+      >
+      <header
+        className={cn(
+          "w-full",
+          sticky === "yes" && "backdrop-blur",
+          toneClass[tone],
+        )}
+      >
+        <Container className="flex h-16 items-center justify-between md:h-20">
+          <Link href="/" className="inline-flex items-center">
+            {logo ? (
+              <img
+                src={logo}
+                alt={brand || "Brand Logo"}
+                className="h-8 w-auto object-contain"
+              />
+            ) : (
+              <Typography variant="h3" as="span">
+                {brand || "Brand Logo"}
+              </Typography>
+            )}
+          </Link>
+
+          <nav className="hidden items-center gap-8 md:flex">
+            {links.map((l) => (
+              <Link
+                key={l.href + l.label}
+                href={l.href}
+                className="text-sm tracking-wide opacity-80 transition-opacity hover:opacity-100"
+              >
+                {l.label}
+              </Link>
+            ))}
+          </nav>
+
+          <div className="flex items-center gap-1">
+            {showSearch === "yes" && (
+              <Link
+                href="/search"
+                aria-label="Search"
+                className="hidden h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5 md:inline-flex"
+              >
+                <Search size={18} strokeWidth={1.5} />
+              </Link>
+            )}
+            {showCart === "yes" && (
+              <button
+                onClick={() => cart.openCart()}
+                aria-label="Cart"
+                className="relative inline-flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5"
+              >
+                <ShoppingBag size={18} strokeWidth={1.5} />
+                {itemCount > 0 && (
+                  <span className="absolute -right-0.5 -top-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[10px] font-medium text-background">
+                    {itemCount}
+                  </span>
+                )}
+              </button>
+            )}
+            <button
+              onClick={() => setMobileOpen(true)}
+              aria-label="Menu"
+              className="inline-flex h-10 w-10 items-center justify-center rounded-full transition-colors hover:bg-foreground/5 md:hidden"
+            >
+              <MenuIcon size={20} strokeWidth={1.5} />
+            </button>
+          </div>
+        </Container>
+      </header>
+      </div>
+
+      {/* Mobile menu */}
+      <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+        <SheetContent side="right" className="w-[88vw] max-w-sm">
+          <SheetHeader>
+            <SheetTitle className="text-left">{brand}</SheetTitle>
+          </SheetHeader>
+          <nav className="mt-2 flex flex-col gap-1 px-4">
+            {links.map((l) => (
+              <Link
+                key={l.href + l.label}
+                href={l.href}
+                className="rounded-md px-3 py-3 text-base hover:bg-muted"
+              >
+                {l.label}
+              </Link>
+            ))}
+          </nav>
+        </SheetContent>
+      </Sheet>
+
+    </>
+  );
+}

components/testimonials/testimonials.editor.tsx

@@ -1,8 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
 import { imageField } from "@reacteditor/plugin-media/field";
 import { Quote } from "lucide-react";
-import { Testimonials, type TestimonialsProps } from "@/editor/components/testimonials/testimonials";
-import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
+import { Testimonials, type TestimonialsProps } from "@/components/testimonials/testimonials";
+import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
 export const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
   label: "Testimonials",

components/testimonials/testimonials.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { Heading } from "@/components/Heading";
+
+export type TestimonialsProps = {
+  tagline: string;
+  heading: string;
+  items: Array<{
+    quote: string;
+    author: string;
+    role: string;
+    avatar?: string;
+  }>;
+};
+
+export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
+  const [i, setI] = useState(0);
+  const total = items.length;
+  const item = items[i];
+
+  return (
+    <section className="bg-muted/40 py-20 md:py-28">
+      <div className="container mx-auto max-w-4xl px-6 text-center">
+        <Heading
+          tagline={tagline}
+          title={heading}
+          align="center"
+          size="lg"
+        />
+
+        {item ? (
+          <div className="relative mt-12">
+            {total > 1 ? (
+              <button
+                onClick={() => setI((p) => (p - 1 + total) % total)}
+                className="absolute left-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
+                aria-label="Previous"
+              >
+                <ArrowLeft size={16} />
+              </button>
+            ) : null}
+
+            <figure className="mx-auto flex max-w-2xl flex-col items-center px-12 md:px-16">
+              <blockquote
+                className="text-balance text-foreground"
+                style={{ fontSize: "clamp(1.25rem, 2.4vw, 1.75rem)", lineHeight: 1.4 }}
+              >
+                {item.quote}
+              </blockquote>
+              <figcaption className="mt-8 flex items-center gap-3">
+                {item.avatar ? (
+                  <img
+                    src={item.avatar}
+                    alt={item.author}
+                    className="h-10 w-10 rounded-full object-cover"
+                  />
+                ) : null}
+                <div className="text-left">
+                  <p className="text-sm font-medium">{item.author}</p>
+                  {item.role ? (
+                    <p className="text-xs text-muted-foreground">{item.role}</p>
+                  ) : null}
+                </div>
+              </figcaption>
+            </figure>
+
+            {total > 1 ? (
+              <button
+                onClick={() => setI((p) => (p + 1) % total)}
+                className="absolute right-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
+                aria-label="Next"
+              >
+                <ArrowRight size={16} />
+              </button>
+            ) : null}
+
+            {total > 1 ? (
+              <div className="mt-8 flex items-center justify-center gap-3 md:hidden">
+                <button
+                  onClick={() => setI((p) => (p - 1 + total) % total)}
+                  className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
+                  aria-label="Previous"
+                >
+                  <ArrowLeft size={16} />
+                </button>
+                <button
+                  onClick={() => setI((p) => (p + 1) % total)}
+                  className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
+                  aria-label="Next"
+                >
+                  <ArrowRight size={16} />
+                </button>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}

components/ui/accordion.tsx

@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Accordion({
   ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
 function AccordionItem({
@@ -22,7 +22,7 @@ function AccordionItem({
       className={cn("border-b last:border-b-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AccordionTrigger({
@@ -44,7 +44,7 @@ function AccordionTrigger({
         <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
-  )
+  );
 }
 
 function AccordionContent({
@@ -60,7 +60,7 @@ function AccordionContent({
     >
       <div className={cn("pt-0 pb-4", className)}>{children}</div>
     </AccordionPrimitive.Content>
-  )
+  );
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

components/ui/alert-dialog.tsx

@@ -1,144 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-
-import { buttonVariants } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <AlertDialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          'relative grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 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 sm:rounded-lg',
-          className
-        )}
-        {...props}
-      />
-    </div>
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className
-    )}
-    {...props}
-  />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg font-semibold', className)}
-    {...props}
-  />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      className
-    )}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

components/ui/alert.tsx

@@ -1,34 +1,28 @@
 import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
+type AlertVariant = "default" | "destructive"
+
+const baseClasses =
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+
+const variantClasses: Record<AlertVariant, string> = {
   default: "bg-card text-card-foreground",
   destructive:
     "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
 }
-)
 
 function Alert({
   className,
-  variant,
+  variant = "default",
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+}: React.ComponentProps<"div"> & { variant?: AlertVariant }) {
   return (
     <div
       data-slot="alert"
       role="alert"
-      className={cn(alertVariants({ variant }), className)}
+      className={cn(baseClasses, variantClasses[variant], className)}
       {...props}
     />
   )

components/ui/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-function AspectRatio({
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
-
-export { AspectRatio }

components/ui/avatar.tsx

@@ -1,28 +1,24 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Avatar({
   className,
-  size = "default",
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: "default" | "sm" | "lg"
-}) {
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
-      data-size={size}
       className={cn(
-        "group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarImage({
@@ -35,7 +31,7 @@ function AvatarImage({
       className={cn("aspect-square size-full", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarFallback({
@@ -46,64 +42,12 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "bg-muted flex size-full items-center justify-center rounded-full",
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
-        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
-        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarBadge,
-  AvatarGroup,
-  AvatarGroupCount,
-}
+export { Avatar, AvatarImage, AvatarFallback };

components/ui/badge.tsx

@@ -1,48 +1,48 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
-          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90",
         outline:
-          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 [a&]:hover:underline",
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
       variant: "default",
     },
   }
-)
+);
 
 function Badge({
   className,
-  variant = "default",
+  variant,
   asChild = false,
   ...props
 }: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
+  VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "span";
 
   return (
     <Comp
       data-slot="badge"
-      data-variant={variant}
       className={cn(badgeVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

components/ui/breadcrumb.tsx

@@ -1,101 +1,140 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import React from 'react';
+import { cn } from '@/lib/utils';
 
-import { cn } from "@/lib/utils"
-
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
 
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
   return (
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
   return (
     <li
       data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
+      className={cn('inline-flex items-center gap-1.5', className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbLink({
   asChild,
   className,
+  children,
   ...props
-}: React.ComponentProps<"a"> & {
-  asChild?: boolean
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
-      {...props}
-    />
-  )
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      className: cn(
+        'hover:text-foreground transition-colors',
+        children.props.className,
+        className
+      ),
+      ...props,
+    });
   }
 
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <a
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="breadcrumb-page"
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn('text-foreground font-normal', className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbSeparator({
   children,
   className,
   ...props
-}: React.ComponentProps<"li">) {
+}: React.ComponentProps<'li'>) {
   return (
     <li
       data-slot="breadcrumb-separator"
       role="presentation"
       aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
+      className={cn('[&>svg]:size-3.5', className)}
       {...props}
     >
-      {children ?? <ChevronRight />}
+      {children ?? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-3.5"
+        >
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      )}
     </li>
-  )
+  );
 }
 
 function BreadcrumbEllipsis({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
+      className={cn('flex size-9 items-center justify-center', className)}
       {...props}
     >
-      <MoreHorizontal className="size-4" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <circle cx="12" cy="12" r="1"></circle>
+        <circle cx="19" cy="12" r="1"></circle>
+        <circle cx="5" cy="12" r="1"></circle>
+      </svg>
       <span className="sr-only">More</span>
     </span>
-  )
+  );
 }
 
 export {
@@ -106,4 +145,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};

components/ui/button-group.tsx

@@ -1,83 +1,97 @@
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import React from 'react';
 
-import { cn } from "@/lib/utils"
-import { Separator } from "@/components/ui/separator"
-
-const buttonGroupVariants = cva(
-  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical:
-          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// Button group variants helper
+function getButtonGroupVariants(
+  orientation: 'horizontal' | 'vertical'
+): string {
+  const baseStyles =
+    'flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*="w-"])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2';
+
+  const orientationStyles = {
+    horizontal:
+      '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+    vertical:
+      'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+  };
+
+  return cn(baseStyles, orientationStyles[orientation]);
+}
+
+interface ButtonGroupProps extends React.ComponentProps<'div'> {
+  orientation?: 'horizontal' | 'vertical';
 }
-)
 
 function ButtonGroup({
   className,
-  orientation,
+  orientation = 'horizontal',
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+}: ButtonGroupProps) {
   return (
     <div
       role="group"
       data-slot="button-group"
       data-orientation={orientation}
-      className={cn(buttonGroupVariants({ orientation }), className)}
+      className={cn(getButtonGroupVariants(orientation), className)}
       {...props}
     />
-  )
+  );
+}
+
+interface ButtonGroupTextProps extends React.ComponentProps<'div'> {
+  asChild?: boolean;
 }
 
 function ButtonGroupText({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<"div"> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : "div"
-
+}: ButtonGroupTextProps) {
+  const Comp = asChild ? 'div' : 'div';
   return (
     <Comp
+      data-slot="button-group-text"
       className={cn(
-        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        'bg-muted flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
         className
       )}
       {...props}
     />
-  )
+  );
+}
+
+interface ButtonGroupSeparatorProps extends React.ComponentProps<'div'> {
+  orientation?: 'horizontal' | 'vertical';
 }
 
 function ButtonGroupSeparator({
   className,
-  orientation = "vertical",
+  orientation = 'vertical',
   ...props
-}: React.ComponentProps<typeof Separator>) {
+}: ButtonGroupSeparatorProps) {
+  const separatorClasses =
+    orientation === 'vertical' ? 'w-px h-auto' : 'h-px w-auto';
+
   return (
-    <Separator
+    <div
       data-slot="button-group-separator"
-      orientation={orientation}
       className={cn(
-        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        'bg-border relative !m-0 self-stretch',
+        separatorClasses,
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-export {
-  ButtonGroup,
-  ButtonGroupSeparator,
-  ButtonGroupText,
-  buttonGroupVariants,
-}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };
+export type {
+  ButtonGroupProps,
+  ButtonGroupTextProps,
+  ButtonGroupSeparatorProps,
+};

components/ui/button.tsx

@@ -1,34 +1,30 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        sm: "h-8 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 px-6 has-[>svg]:px-4",
         icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
@@ -36,29 +32,27 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 function Button({
   className,
-  variant = "default",
-  size = "default",
+  variant,
+  size,
   asChild = false,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
       data-slot="button"
-      data-variant={variant}
-      data-size={size}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

components/ui/calendar.tsx

@@ -1,220 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from "lucide-react"
-import {
-  DayPicker,
-  getDefaultClassNames,
-  type DayButton,
-} from "react-day-picker"
-
-import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = "label",
-  buttonVariant = "ghost",
-  formatters,
-  components,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
-}) {
-  const defaultClassNames = getDefaultClassNames()
-
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
-      )}
-      captionLayout={captionLayout}
-      formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
-        ...formatters,
-      }}
-      classNames={{
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
-          defaultClassNames.months
-        ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
-        nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
-          defaultClassNames.weekday
-        ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
-        week_number_header: cn(
-          "select-none w-(--cell-size)",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
-          props.showWeekNumber
-            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
-            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "rounded-l-md bg-accent",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
-
-          if (orientation === "right") {
-            return (
-              <ChevronRightIcon
-                className={cn("size-4", className)}
-                {...props}
-              />
-            )
-          }
-
-          return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
-          )
-        },
-        DayButton: CalendarDayButton,
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
-                {children}
-              </div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
-}
-
-function CalendarDayButton({
-  className,
-  day,
-  modifiers,
-  ...props
-}: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const ref = React.useRef<HTMLButtonElement>(null)
-  React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
-
-  return (
-    <Button
-      ref={ref}
-      variant="ghost"
-      size="icon"
-      data-day={day.date.toLocaleDateString()}
-      data-selected-single={
-        modifiers.selected &&
-        !modifiers.range_start &&
-        !modifiers.range_end &&
-        !modifiers.range_middle
-      }
-      data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
-      className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Calendar, CalendarDayButton }

components/ui/card.tsx

@@ -1,18 +1,18 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-border py-6 shadow-sm",
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -20,22 +20,22 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
+      className={cn("leading-none font-semibold tracking-tight", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
@@ -58,7 +58,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -68,7 +68,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("px-6", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -89,4 +89,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-}
+};

components/ui/carousel.tsx

@@ -1,241 +1,245 @@
-"use client"
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from './button';
 
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
+interface CarouselContextType {
+  currentIndex: number;
+  totalItems: number;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  orientation: 'horizontal' | 'vertical';
 }
 
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = createContext<CarouselContextType | undefined>(
+  undefined
+);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
+  const context = useContext(CarouselContext);
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error('Carousel components must be used within a Carousel');
+  }
+  return context;
 }
 
-  return context
+interface CarouselProps {
+  children: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
 }
 
 function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
-  className,
   children,
-  ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
-  const [carouselRef, api] = useEmblaCarousel(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
-    },
-    plugins
-  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
+  orientation = 'horizontal',
+  className,
+  autoPlay = false,
+  autoPlayInterval = 3000,
+}: CarouselProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const itemCount = React.Children.count(children);
+  const autoPlayTimerRef = useRef<NodeJS.Timeout | null>(null);
 
-  const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
+  const canScrollPrev = currentIndex > 0;
+  const canScrollNext = currentIndex < itemCount - 1;
 
-  const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
+  const scrollPrev = useCallback(() => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  }, []);
 
-  const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
+  const scrollNext = useCallback(() => {
+    setCurrentIndex((prev) => Math.min(itemCount - 1, prev + 1));
+  }, [itemCount]);
 
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault()
-        scrollNext()
+  useEffect(() => {
+    if (!autoPlay) return;
+
+    autoPlayTimerRef.current = setInterval(() => {
+      setCurrentIndex((prev) => {
+        if (prev >= itemCount - 1) {
+          return 0;
         }
-    },
-    [scrollPrev, scrollNext]
-  )
-
-  React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
-
-  React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on("reInit", onSelect)
-    api.on("select", onSelect)
+        return prev + 1;
+      });
+    }, autoPlayInterval);
 
     return () => {
-      api?.off("select", onSelect)
+      if (autoPlayTimerRef.current) {
+        clearInterval(autoPlayTimerRef.current);
       }
-  }, [api, onSelect])
+    };
+  }, [autoPlay, autoPlayInterval, itemCount]);
 
   return (
     <CarouselContext.Provider
       value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        currentIndex,
+        totalItems: itemCount,
         scrollPrev,
         scrollNext,
         canScrollPrev,
         canScrollNext,
+        orientation,
       }}
     >
       <div
-        onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
+        className={cn('relative', className)}
         role="region"
         aria-roledescription="carousel"
         data-slot="carousel"
-        {...props}
       >
         {children}
       </div>
     </CarouselContext.Provider>
-  )
+  );
 }
 
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel()
+interface CarouselContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function CarouselContent({ className, children }: CarouselContentProps) {
+  const { currentIndex, orientation } = useCarousel();
 
   return (
     <div
-      ref={carouselRef}
-      className="overflow-hidden"
+      className={cn('overflow-hidden', className)}
       data-slot="carousel-content"
     >
       <div
         className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
+          'flex transition-transform duration-300 ease-out',
+          orientation === 'horizontal' ? 'flex-row' : 'flex-col'
         )}
-        {...props}
-      />
+        style={{
+          transform:
+            orientation === 'horizontal'
+              ? `translateX(-${currentIndex * 100}%)`
+              : `translateY(-${currentIndex * 100}%)`,
+        }}
+      >
+        {children}
       </div>
-  )
+    </div>
+  );
 }
 
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel()
+interface CarouselItemProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function CarouselItem({ className, children }: CarouselItemProps) {
+  const { orientation } = useCarousel();
 
   return (
     <div
       role="group"
       aria-roledescription="slide"
       data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
+      className={cn('min-w-0 shrink-0 grow-0 basis-full', className)}
+    >
+      {children}
+    </div>
+  );
 }
 
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+interface CarouselPreviousProps {
+  className?: string;
+}
+
+function CarouselPrevious({ className }: CarouselPreviousProps) {
+  const { scrollPrev, canScrollPrev, orientation } = useCarousel();
 
   return (
     <Button
       data-slot="carousel-previous"
-      variant={variant}
-      size={size}
+      variant="outline"
+      onClick={scrollPrev}
+      disabled={!canScrollPrev}
       className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        'absolute size-10 rounded-full p-0 flex items-center justify-center',
+        orientation === 'horizontal'
+          ? 'top-1/2 left-2 -translate-y-1/2'
+          : 'top-2 left-1/2 -translate-x-1/2 -rotate-90',
         className
       )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
+      aria-label="Previous slide"
     >
-      <ArrowLeft />
-      <span className="sr-only">Previous slide</span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <path d="M15 18l-6-6 6-6" />
+      </svg>
     </Button>
-  )
+  );
 }
 
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+interface CarouselNextProps {
+  className?: string;
+}
+
+function CarouselNext({ className }: CarouselNextProps) {
+  const { scrollNext, canScrollNext, orientation } = useCarousel();
 
   return (
     <Button
       data-slot="carousel-next"
-      variant={variant}
-      size={size}
+      variant="outline"
+      onClick={scrollNext}
+      disabled={!canScrollNext}
       className={cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        'absolute size-10 rounded-full p-0 flex items-center justify-center',
+        orientation === 'horizontal'
+          ? 'top-1/2 right-2 -translate-y-1/2'
+          : 'bottom-2 left-1/2 -translate-x-1/2 rotate-90',
         className
       )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
+      aria-label="Next slide"
     >
-      <ArrowRight />
-      <span className="sr-only">Next slide</span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <path d="M9 18l6-6-6-6" />
+      </svg>
     </Button>
-  )
+  );
 }
 
 export {
-  type CarouselApi,
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-}
+  useCarousel,
+};

components/ui/chart.tsx

@@ -1,357 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-function ChartContainer({
-  id,
-  className,
-  children,
-  config,
-  ...props
-}: React.ComponentProps<"div"> & {
-  config: ChartConfig
-  children: React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]
-}) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-slot="chart"
-        data-chart={chartId}
-        className={cn(
-          "[&_.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",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-}
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-function ChartTooltipContent({
-  active,
-  payload,
-  className,
-  indicator = "dot",
-  hideLabel = false,
-  hideIndicator = false,
-  label,
-  labelFormatter,
-  labelClassName,
-  formatter,
-  color,
-  nameKey,
-  labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed"
-    nameKey?: string
-    labelKey?: string
-  }) {
-  const { config } = useChart()
-
-  const tooltipLabel = React.useMemo(() => {
-    if (hideLabel || !payload?.length) {
-      return null
-    }
-
-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
-    const value =
-      !labelKey && typeof label === "string"
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
-
-    if (labelFormatter) {
-      return (
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      )
-    }
-
-    if (!value) {
-      return null
-    }
-
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>
-  }, [
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ])
-
-  if (!active || !payload?.length) {
-    return null
-  }
-
-  const nestLabel = payload.length === 1 && indicator !== "dot"
-
-  return (
-    <div
-      className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-        className
-      )}
-    >
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload
-          .filter((item) => item.type !== "none")
-          .map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-      </div>
-    </div>
-  )
-}
-
-const ChartLegend = RechartsPrimitive.Legend
-
-function ChartLegendContent({
-  className,
-  hideIcon = false,
-  payload,
-  verticalAlign = "bottom",
-  nameKey,
-}: React.ComponentProps<"div"> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean
-    nameKey?: string
-  }) {
-  const { config } = useChart()
-
-  if (!payload?.length) {
-    return null
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
-        className
-      )}
-    >
-      {payload
-        .filter((item) => item.type !== "none")
-        .map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-    </div>
-  )
-}
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}

components/ui/checkbox.tsx

@@ -1,32 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { CheckIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export { Checkbox }

components/ui/collapsible.tsx

@@ -1,33 +0,0 @@
-"use client"
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }

components/ui/combobox.tsx

@@ -1,310 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Combobox as ComboboxPrimitive } from "@base-ui/react"
-import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/components/ui/input-group"
-
-const Combobox = ComboboxPrimitive.Root
-
-function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
-}
-
-function ComboboxTrigger({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Trigger.Props) {
-  return (
-    <ComboboxPrimitive.Trigger
-      data-slot="combobox-trigger"
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
-      {...props}
-    >
-      {children}
-      <ChevronDownIcon
-        data-slot="combobox-trigger-icon"
-        className="text-muted-foreground pointer-events-none size-4"
-      />
-    </ComboboxPrimitive.Trigger>
-  )
-}
-
-function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
-  return (
-    <ComboboxPrimitive.Clear
-      data-slot="combobox-clear"
-      render={<InputGroupButton variant="ghost" size="icon-xs" />}
-      className={cn(className)}
-      {...props}
-    >
-      <XIcon className="pointer-events-none" />
-    </ComboboxPrimitive.Clear>
-  )
-}
-
-function ComboboxInput({
-  className,
-  children,
-  disabled = false,
-  showTrigger = true,
-  showClear = false,
-  ...props
-}: ComboboxPrimitive.Input.Props & {
-  showTrigger?: boolean
-  showClear?: boolean
-}) {
-  return (
-    <InputGroup className={cn("w-auto", className)}>
-      <ComboboxPrimitive.Input
-        render={<InputGroupInput disabled={disabled} />}
-        {...props}
-      />
-      <InputGroupAddon align="inline-end">
-        {showTrigger && (
-          <InputGroupButton
-            size="icon-xs"
-            variant="ghost"
-            asChild
-            data-slot="input-group-button"
-            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
-            disabled={disabled}
-          >
-            <ComboboxTrigger />
-          </InputGroupButton>
-        )}
-        {showClear && <ComboboxClear disabled={disabled} />}
-      </InputGroupAddon>
-      {children}
-    </InputGroup>
-  )
-}
-
-function ComboboxContent({
-  className,
-  side = "bottom",
-  sideOffset = 6,
-  align = "start",
-  alignOffset = 0,
-  anchor,
-  ...props
-}: ComboboxPrimitive.Popup.Props &
-  Pick<
-    ComboboxPrimitive.Positioner.Props,
-    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
-  >) {
-  return (
-    <ComboboxPrimitive.Portal>
-      <ComboboxPrimitive.Positioner
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        anchor={anchor}
-        className="isolate z-50"
-      >
-        <ComboboxPrimitive.Popup
-          data-slot="combobox-content"
-          data-chips={!!anchor}
-          className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
-            className
-          )}
-          {...props}
-        />
-      </ComboboxPrimitive.Positioner>
-    </ComboboxPrimitive.Portal>
-  )
-}
-
-function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
-  return (
-    <ComboboxPrimitive.List
-      data-slot="combobox-list"
-      className={cn(
-        "max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxItem({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Item.Props) {
-  return (
-    <ComboboxPrimitive.Item
-      data-slot="combobox-item"
-      className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ComboboxPrimitive.ItemIndicator
-        data-slot="combobox-item-indicator"
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
-      >
-        <CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
-      </ComboboxPrimitive.ItemIndicator>
-    </ComboboxPrimitive.Item>
-  )
-}
-
-function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
-  return (
-    <ComboboxPrimitive.Group
-      data-slot="combobox-group"
-      className={cn(className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxLabel({
-  className,
-  ...props
-}: ComboboxPrimitive.GroupLabel.Props) {
-  return (
-    <ComboboxPrimitive.GroupLabel
-      data-slot="combobox-label"
-      className={cn(
-        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  )
-}
-
-function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
-  return (
-    <ComboboxPrimitive.Empty
-      data-slot="combobox-empty"
-      className={cn(
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxSeparator({
-  className,
-  ...props
-}: ComboboxPrimitive.Separator.Props) {
-  return (
-    <ComboboxPrimitive.Separator
-      data-slot="combobox-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function ComboboxChips({
-  className,
-  ...props
-}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
-  ComboboxPrimitive.Chips.Props) {
-  return (
-    <ComboboxPrimitive.Chips
-      data-slot="combobox-chips"
-      className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ComboboxChip({
-  className,
-  children,
-  showRemove = true,
-  ...props
-}: ComboboxPrimitive.Chip.Props & {
-  showRemove?: boolean
-}) {
-  return (
-    <ComboboxPrimitive.Chip
-      data-slot="combobox-chip"
-      className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {showRemove && (
-        <ComboboxPrimitive.ChipRemove
-          render={<Button variant="ghost" size="icon-xs" />}
-          className="-ml-1 opacity-50 hover:opacity-100"
-          data-slot="combobox-chip-remove"
-        >
-          <XIcon className="pointer-events-none" />
-        </ComboboxPrimitive.ChipRemove>
-      )}
-    </ComboboxPrimitive.Chip>
-  )
-}
-
-function ComboboxChipsInput({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Input.Props) {
-  return (
-    <ComboboxPrimitive.Input
-      data-slot="combobox-chip-input"
-      className={cn("min-w-16 flex-1 outline-none", className)}
-      {...props}
-    />
-  )
-}
-
-function useComboboxAnchor() {
-  return React.useRef<HTMLDivElement | null>(null)
-}
-
-export {
-  Combobox,
-  ComboboxInput,
-  ComboboxContent,
-  ComboboxList,
-  ComboboxItem,
-  ComboboxGroup,
-  ComboboxLabel,
-  ComboboxCollection,
-  ComboboxEmpty,
-  ComboboxSeparator,
-  ComboboxChips,
-  ComboboxChip,
-  ComboboxChipsInput,
-  ComboboxTrigger,
-  ComboboxValue,
-  useComboboxAnchor,
-}

components/ui/command.tsx

@@ -1,184 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <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">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "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",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function CommandList({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "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",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

components/ui/context-menu.tsx

@@ -1,252 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function ContextMenu({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
-}
-
-function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  )
-}
-
-function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
-}
-
-function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
-}
-
-function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
-}
-
-function ContextMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      data-slot="context-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubTrigger>
-  )
-}
-
-function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  return (
-    <ContextMenuPrimitive.SubContent
-      data-slot="context-menu-sub-content"
-      className={cn(
-        "bg-popover 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-content"
-        className={cn(
-          "bg-popover 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  )
-}
-
-function ContextMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <ContextMenuPrimitive.Item
-      data-slot="context-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
-  return (
-    <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  )
-}
-
-function ContextMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
-  return (
-    <ContextMenuPrimitive.RadioItem
-      data-slot="context-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  )
-}
-
-function ContextMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
-      data-inset={inset}
-      className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  return (
-    <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function ContextMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="context-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}

components/ui/dialog.tsx

@@ -1,128 +1,266 @@
-'use client';
+import React, { useState, useCallback, useContext, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { clsx } from 'clsx';
 
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { RiCloseLine } from '@remixicon/react';
+interface DialogContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
 
-import { cn } from '@/lib/utils';
+const DialogContext = createContext<DialogContextType | undefined>(undefined);
 
-const Dialog = DialogPrimitive.Root;
+function useDialog() {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog components must be used within a Dialog');
+  }
+  return context;
+}
 
-const DialogTrigger = DialogPrimitive.Trigger;
+interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
 
-const DialogPortal = DialogPrimitive.Portal;
+function Dialog({ open: controlledOpen, onOpenChange, children }: DialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
 
-const DialogClose = DialogPrimitive.Close;
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
 
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
-    )}
+  return (
+    <DialogContext.Provider value={{ open, setOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+function DialogTrigger({
+  children,
+  asChild,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) {
+  const { setOpen } = useDialog();
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      ...props,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(true);
+        children.props.onClick?.(e);
+      },
+    });
+  }
+
+  return (
+    <button
+      {...props}
+      onClick={(e) => {
+        setOpen(true);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function DialogPortal({ children }: { children: React.ReactNode }) {
+  return createPortal(children, document.body);
+}
+
+function DialogClose({
+  children,
+  asChild,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) {
+  const { setOpen } = useDialog();
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      ...props,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(false);
+        children.props.onClick?.(e);
+      },
+    });
+  }
+
+  return (
+    <button
+      {...props}
+      onClick={(e) => {
+        setOpen(false);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function DialogOverlay({ className, onClick, ...props }: DialogOverlayProps) {
+  const { setOpen } = useDialog();
+
+  return (
+    <motion.div
+      data-slot="dialog-overlay"
+      className={clsx('fixed inset-0 z-50 bg-black/50', className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+      onClick={(e) => {
+        setOpen(false);
+        onClick?.(e as any);
+      }}
       {...props}
     />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+  );
+}
 
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  showCloseButton?: boolean;
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogContentProps) {
+  const { open } = useDialog();
+
+  return (
     <DialogPortal>
+      <AnimatePresence>
+        {open && (
+          <>
             <DialogOverlay />
-    {/* Wrapper div handles centering, so animation transforms don't interfere */}
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          'relative z-50 grid w-full max-w-lg gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
-          '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',
+            <motion.div
+              data-slot="dialog-content"
+              className={clsx(
+                'bg-background fixed top-1/2 left-1/2 z-50 grid w-full max-w-screen-md max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border p-6 shadow-lg',
                 className
               )}
+              initial={{ opacity: 0, scale: 0.95, y: 0 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 0 }}
+              transition={{ type: 'spring', stiffness: 300, damping: 30 }}
               {...props}
             >
               {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background 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">
-          <RiCloseLine className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      </DialogPrimitive.Content>
-    </div>
+              {showCloseButton && (
+                <DialogClose
+                  data-slot="dialog-close"
+                  className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+                  aria-label="Close"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="size-4"
+                  >
+                    <path d="M18 6l-12 12M6 6l12 12" />
+                  </svg>
+                </DialogClose>
+              )}
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
     </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+  );
+}
 
-const DialogHeader = ({
+function DialogHeader({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
     <div
-    className={cn(
-      'flex flex-col space-y-1.5 text-center sm:text-left',
+      data-slot="dialog-header"
+      className={clsx(
+        'flex flex-col gap-2 text-center sm:text-left',
         className
       )}
       {...props}
     />
   );
-DialogHeader.displayName = 'DialogHeader';
+}
 
-const DialogFooter = ({
+function DialogFooter({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
     <div
-    className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      data-slot="dialog-footer"
+      className={clsx(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
         className
       )}
       {...props}
     />
   );
-DialogFooter.displayName = 'DialogFooter';
+}
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      'text-lg font-semibold leading-none tracking-tight',
-      className
-    )}
+function DialogTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2
+      data-slot="dialog-title"
+      className={clsx('text-lg leading-none font-semibold', className)}
       {...props}
     />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+  );
+}
 
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+function DialogDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      data-slot="dialog-description"
+      className={clsx('text-muted-foreground text-sm', className)}
       {...props}
     />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+  );
+}
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
   DialogClose,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
   DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  AnimatePresence,
 };

components/ui/direction.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Direction } from "radix-ui"
-
-function DirectionProvider({
-  dir,
-  direction,
-  children,
-}: React.ComponentProps<typeof Direction.DirectionProvider> & {
-  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
-}) {
-  return (
-    <Direction.DirectionProvider dir={direction ?? dir}>
-      {children}
-    </Direction.DirectionProvider>
-  )
-}
-
-const useDirection = Direction.useDirection
-
-export { DirectionProvider, useDirection }

components/ui/drawer.tsx

@@ -1,135 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-function Drawer({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
-}
-
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
-}
-
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
-}
-
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
-}
-
-function DrawerOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
-  return (
-    <DrawerPrimitive.Overlay
-      data-slot="drawer-overlay"
-      className={cn(
-        "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",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
-  return (
-    <DrawerPortal data-slot="drawer-portal">
-      <DrawerOverlay />
-      <DrawerPrimitive.Content
-        data-slot="drawer-content"
-        className={cn(
-          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
-          className
-        )}
-        {...props}
-      >
-        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
-  )
-}
-
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-header"
-      className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="drawer-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function DrawerTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
-  return (
-    <DrawerPrimitive.Title
-      data-slot="drawer-title"
-      className={cn("text-foreground font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function DrawerDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
-  return (
-    <DrawerPrimitive.Description
-      data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}

components/ui/dropdown-menu.tsx

@@ -1,257 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}

components/ui/empty.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"

components/ui/field.tsx

@@ -1,248 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-import { Separator } from "@/components/ui/separator"
-
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLegend({
-  className,
-  variant = "legend",
-  ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
-  return (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-group"
-      className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const fieldVariants = cva(
-  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
-  {
-    variants: {
-      orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-        horizontal: [
-          "flex-row items-center",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-        responsive: [
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  }
-)
-
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
-    />
-  )
-}
-
-function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-content"
-      className={cn(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot="field-label"
-      className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="field-label"
-      className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
-        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode
-}) {
-  return (
-    <div
-      data-slot="field-separator"
-      data-content={!!children}
-      className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
-      )}
-      {...props}
-    >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
-          data-slot="field-separator-content"
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  )
-}
-
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>
-}) {
-  const content = useMemo(() => {
-    if (children) {
-      return children
-    }
-
-    if (!errors?.length) {
-      return null
-    }
-
-    const uniqueErrors = [
-      ...new Map(errors.map((error) => [error?.message, error])).values(),
-    ]
-
-    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
-    }
-
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
-        )}
-      </ul>
-    )
-  }, [children, errors])
-
-  if (!content) {
-    return null
-  }
-
-  return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
-      {...props}
-    >
-      {content}
-    </div>
-  )
-}
-
-export {
-  Field,
-  FieldLabel,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldContent,
-  FieldTitle,
-}

components/ui/form.tsx

@@ -1,167 +0,0 @@
-"use client"
-
-import * as React from "react"
-import type * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-import {
-  Controller,
-  FormProvider,
-  useFormContext,
-  useFormState,
-  type ControllerProps,
-  type FieldPath,
-  type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
-    </FormItemContext.Provider>
-  )
-}
-
-function FormLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      data-slot="form-label"
-      data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-}
-
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      data-slot="form-control"
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-}
-
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      data-slot="form-description"
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-}
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}

components/ui/hover-card.tsx

@@ -1,44 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "@/lib/utils"
-
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
-}
-
-function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
-}
-
-function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  )
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }

components/ui/input-group.tsx

@@ -1,170 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
-        "h-9 min-w-0 has-[>textarea]:h-auto",
-
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
-
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end":
-          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start":
-          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
-        "block-end":
-          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  }
-)
-
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
-      }}
-      {...props}
-    />
-  )
-}
-
-const inputGroupButtonVariants = cva(
-  "text-sm shadow-none flex gap-2 items-center",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  }
-)
-
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "ghost",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  )
-}
-
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-}

components/ui/input-otp.tsx

@@ -1,57 +1,53 @@
-"use client"
-
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
+import React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { cn } from '@/lib/utils';
 
 function InputOTP({
   className,
   containerClassName,
   ...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
+  containerClassName?: string;
 }) {
   return (
     <OTPInput
       data-slot="input-otp"
       containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
+        'flex items-center gap-2 has-disabled:opacity-50',
         containerClassName
       )}
-      className={cn("disabled:cursor-not-allowed", className)}
+      className={cn('disabled:cursor-not-allowed', className)}
       {...props}
     />
-  )
+  );
 }
 
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="input-otp-group"
-      className={cn("flex items-center", className)}
+      className={cn('flex items-center', className)}
       {...props}
     />
-  )
+  );
 }
 
 function InputOTPSlot({
   index,
   className,
   ...props
-}: React.ComponentProps<"div"> & {
-  index: number
+}: React.ComponentProps<'div'> & {
+  index: number;
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
 
   return (
     <div
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r border-border text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l first:border-border last:rounded-r-md last:border-border data-[active=true]:z-10 data-[active=true]:ring-[3px]',
         className
       )}
       {...props}
@@ -63,15 +59,28 @@ function InputOTPSlot({
         </div>
       )}
     </div>
-  )
+  );
 }
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
   return (
     <div data-slot="input-otp-separator" role="separator" {...props}>
-      <MinusIcon />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+      </svg>
     </div>
-  )
+  );
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "text-foreground file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className

components/ui/item.tsx

@@ -1,182 +1,202 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import React from 'react';
 
-import { cn } from "@/lib/utils"
-import { Separator } from "@/components/ui/separator"
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
 
-function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+// Item variants helper
+function getItemVariants(
+  variant: 'default' | 'outline' | 'muted',
+  size: 'default' | 'sm'
+): string {
+  const baseStyles =
+    'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]';
+
+  const variantStyles = {
+    default: 'bg-transparent',
+    outline: 'border-border',
+    muted: 'bg-muted/50',
+  };
+
+  const sizeStyles = {
+    default: 'p-4 gap-4',
+    sm: 'py-3 px-4 gap-2.5',
+  };
+
+  return cn(baseStyles, variantStyles[variant], sizeStyles[size]);
+}
+
+// Item media variants helper
+function getItemMediaVariants(variant: 'default' | 'icon' | 'image'): string {
+  const baseStyles =
+    'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5';
+
+  const variantStyles = {
+    default: 'bg-transparent',
+    icon: "size-8 border border-border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+    image:
+      'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+  };
+
+  return cn(baseStyles, variantStyles[variant]);
+}
+
+interface ItemGroupProps extends React.ComponentProps<'div'> {}
+
+function ItemGroup({ className, ...props }: ItemGroupProps) {
   return (
     <div
       role="list"
       data-slot="item-group"
-      className={cn("group/item-group flex flex-col", className)}
+      className={cn('group/item-group flex flex-col', className)}
       {...props}
     />
-  )
+  );
 }
 
-function ItemSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
+interface ItemSeparatorProps extends React.ComponentProps<'div'> {}
+
+function ItemSeparator({ className, ...props }: ItemSeparatorProps) {
   return (
-    <Separator
+    <div
       data-slot="item-separator"
-      orientation="horizontal"
-      className={cn("my-0", className)}
+      className={cn('my-0 border-t border-border', className)}
       {...props}
     />
-  )
+  );
 }
 
-const itemVariants = cva(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border-border",
-        muted: "bg-muted/50",
-      },
-      size: {
-        default: "p-4 gap-4 ",
-        sm: "py-3 px-4 gap-2.5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
+interface ItemProps extends React.ComponentProps<'div'> {
+  variant?: 'default' | 'outline' | 'muted';
+  size?: 'default' | 'sm';
+  asChild?: boolean;
 }
-)
 
 function Item({
   className,
-  variant = "default",
-  size = "default",
+  variant = 'default',
+  size = 'default',
   asChild = false,
   ...props
-}: React.ComponentProps<"div"> &
-  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div"
+}: ItemProps) {
+  const Comp = asChild ? 'div' : 'div';
   return (
     <Comp
       data-slot="item"
       data-variant={variant}
       data-size={size}
-      className={cn(itemVariants({ variant, size, className }))}
+      className={cn(getItemVariants(variant, size), className)}
       {...props}
     />
-  )
+  );
 }
 
-const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
-        image:
-          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
+interface ItemMediaProps extends React.ComponentProps<'div'> {
+  variant?: 'default' | 'icon' | 'image';
 }
-)
 
 function ItemMedia({
   className,
-  variant = "default",
+  variant = 'default',
   ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+}: ItemMediaProps) {
   return (
     <div
       data-slot="item-media"
       data-variant={variant}
-      className={cn(itemMediaVariants({ variant, className }))}
+      className={cn(getItemMediaVariants(variant), className)}
       {...props}
     />
-  )
+  );
 }
 
-function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+interface ItemContentProps extends React.ComponentProps<'div'> {}
+
+function ItemContent({ className, ...props }: ItemContentProps) {
   return (
     <div
       data-slot="item-content"
       className={cn(
-        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+interface ItemTitleProps extends React.ComponentProps<'div'> {}
+
+function ItemTitle({ className, ...props }: ItemTitleProps) {
   return (
     <div
       data-slot="item-title"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+interface ItemDescriptionProps extends React.ComponentProps<'p'> {}
+
+function ItemDescription({ className, ...props }: ItemDescriptionProps) {
   return (
     <p
       data-slot="item-description"
       className={cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+interface ItemActionsProps extends React.ComponentProps<'div'> {}
+
+function ItemActions({ className, ...props }: ItemActionsProps) {
   return (
     <div
       data-slot="item-actions"
-      className={cn("flex items-center gap-2", className)}
+      className={cn('flex items-center gap-2', className)}
       {...props}
     />
-  )
+  );
 }
 
-function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+interface ItemHeaderProps extends React.ComponentProps<'div'> {}
+
+function ItemHeader({ className, ...props }: ItemHeaderProps) {
   return (
     <div
       data-slot="item-header"
       className={cn(
-        "flex basis-full items-center justify-between gap-2",
+        'flex basis-full items-center justify-between gap-2',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+interface ItemFooterProps extends React.ComponentProps<'div'> {}
+
+function ItemFooter({ className, ...props }: ItemFooterProps) {
   return (
     <div
       data-slot="item-footer"
       className={cn(
-        "flex basis-full items-center justify-between gap-2",
+        'flex basis-full items-center justify-between gap-2',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -190,4 +210,4 @@ export {
   ItemDescription,
   ItemHeader,
   ItemFooter,
-}
+};

components/ui/kbd.tsx

@@ -1,28 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
-  return (
-    <kbd
-      data-slot="kbd"
-      className={cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <kbd
-      data-slot="kbd-group"
-      className={cn("inline-flex items-center gap-1", className)}
-      {...props}
-    />
-  )
-}
-
-export { Kbd, KbdGroup }

components/ui/label.tsx

@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }