Initial commit

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

@@ -0,0 +1,215 @@
+import * as React from "react";
+import { useEffect, useMemo, useRef } from "react";
+
+export type ThemeProps = {
+  headerFont?: string;
+  headerFontWeight?: string;
+  bodyFont?: string;
+  primaryColor?: string;
+  primaryForegroundColor?: string;
+  secondaryColor?: string;
+  accentColor?: string;
+  bgColor?: string;
+  fgColor?: string;
+  mutedColor?: string;
+  mutedForegroundColor?: string;
+  borderColor?: string;
+  radius?: "none" | "sm" | "md" | "lg" | "xl";
+  shadow?: "none" | "sm" | "md" | "lg" | "xl";
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "full";
+};
+
+const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
+  none: "0px",
+  sm: "0.25rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+  xl: "1rem",
+};
+
+const maxWidthMap: Record<NonNullable<ThemeProps["maxWidth"]>, string> = {
+  sm: "64rem",
+  md: "72rem",
+  lg: "80rem",
+  xl: "96rem",
+  full: "100%",
+};
+
+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)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px 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>();
+
+  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 (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,
+  secondaryColor,
+  accentColor,
+  bgColor,
+  fgColor,
+  mutedColor,
+  mutedForegroundColor,
+  borderColor,
+  radius,
+  shadow,
+  maxWidth,
+  children,
+}: ThemeProps & { children?: React.ReactNode }) {
+  // Recompute CSS-variable map only when a relevant prop changes.
+  const cssVars = useMemo<Record<string, string>>(() => {
+    const vars: Record<string, string> = {};
+    if (primaryColor) vars["--primary"] = primaryColor;
+    if (primaryForegroundColor) vars["--primary-foreground"] = primaryForegroundColor;
+    if (secondaryColor) vars["--secondary"] = secondaryColor;
+    if (accentColor) vars["--accent"] = accentColor;
+    if (bgColor) vars["--background"] = bgColor;
+    if (fgColor) vars["--foreground"] = fgColor;
+    if (mutedColor) vars["--muted"] = mutedColor;
+    if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
+    if (borderColor) vars["--border"] = borderColor;
+    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,
+    secondaryColor,
+    accentColor,
+    bgColor,
+    fgColor,
+    mutedColor,
+    mutedForegroundColor,
+    borderColor,
+    radius,
+    shadow,
+    maxWidth,
+  ]);
+
+  // Imperatively push every CSS var onto :root inside the host document
+  // (which is the iframe's document for the editor preview, and the page
+  // <html> for the published render). This guarantees descendants pick up
+  // updates even if React's style-prop diffing missed something or the
+  // base-layer rules need access via :root inheritance.
+  const rootRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const doc =
+      rootRef.current?.ownerDocument ??
+      (typeof document !== "undefined" ? document : null);
+    if (!doc) return;
+    const target = doc.documentElement;
+    const previous: Record<string, string> = {};
+    for (const [key, value] of Object.entries(cssVars)) {
+      previous[key] = target.style.getPropertyValue(key);
+      target.style.setProperty(key, value);
+    }
+    return () => {
+      // Restore prior values so unmount doesn't leak our overrides.
+      for (const [key, value] of Object.entries(previous)) {
+        if (value) target.style.setProperty(key, value);
+        else target.style.removeProperty(key);
+      }
+    };
+  }, [cssVars]);
+
+  const fontsHref = useMemo(
+    () => googleFontsHref(headerFont, bodyFont, headerFontWeight),
+    [headerFont, bodyFont, headerFontWeight],
+  );
+
+  // Plain CSS rules — applied directly, no Tailwind CDN runtime needed.
+  // 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 {
+      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);
+    }
+  `;
+
+  // Tailwind theme directives — only useful if/when the CDN compiles
+  // font-heading / font-body utilities. The plain CSS above handles the
+  // common case so headers always render with the right font.
+  const tailwindCss = `
+    @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);
+    }
+  `;
+
+  return (
+    <>
+      {fontsHref ? <link rel="stylesheet" href={fontsHref} /> : null}
+      <style dangerouslySetInnerHTML={{ __html: css }} />
+      <style type="text/tailwindcss" dangerouslySetInnerHTML={{ __html: tailwindCss }} />
+      <div
+        ref={rootRef}
+        data-theme-root
+        style={cssVars as React.CSSProperties}
+        className="flex min-h-screen flex-col bg-background text-foreground"
+      >
+        {children}
+      </div>
+    </>
+  );
+}

components/Typography.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type TypographyVariant =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "subtitle1"
+  | "subtitle2"
+  | "body1"
+  | "body2"
+  | "caption";
+
+const sizeClasses: Record<TypographyVariant, string> = {
+  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-xs font-bold uppercase tracking-[0.2em] text-muted-foreground",
+};
+
+// Inline-style fallbacks so headings size correctly even when Tailwind
+// preflight resets <h1>..<h6> to font-size: inherit and the iframe CDN
+// 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, 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.75rem", lineHeight: 1.5, fontWeight: 700, letterSpacing: "0.2em", textTransform: "uppercase" },
+};
+
+const defaultTag: Record<TypographyVariant, keyof JSX.IntrinsicElements> = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "p",
+  subtitle2: "p",
+  body1: "p",
+  body2: "p",
+  caption: "p",
+};
+
+type Props<C extends keyof JSX.IntrinsicElements = "p"> = {
+  variant: TypographyVariant;
+  as?: C;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<C>, "className" | "children" | "style">;
+
+export function Typography<C extends keyof JSX.IntrinsicElements = "p">({
+  variant,
+  as,
+  className,
+  style,
+  children,
+  ...rest
+}: Props<C>) {
+  const Tag = (as ?? defaultTag[variant]) as keyof JSX.IntrinsicElements;
+  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: { ...fontStyles, ...sizeStyles[variant], ...style },
+      ...rest,
+    },
+    children,
+  );
+}
+
+export default Typography;

components/commerce/cart-drawer.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import React from 'react';
+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,
+} from '@/components/ui/sheet';
+
+const CartDrawer: React.FC = () => {
+  const {
+    isOpen,
+    closeCart,
+    items,
+    itemCount,
+    totalAmount,
+    checkoutUrl,
+    loading,
+    removeItem,
+    updateItemQuantity,
+  } = useShopifyCart();
+
+  const handleCheckout = () => {
+    if (checkoutUrl) {
+      redirectToCheckout(checkoutUrl);
+    }
+  };
+
+  const getItemImage = (item: (typeof items)[0]) => {
+    return item.merchandise.image?.url;
+  };
+
+  const getSelectedOptions = (item: (typeof items)[0]) => {
+    return item.merchandise.selectedOptions ?? [];
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={(open) => !open && closeCart()}>
+      <SheetContent
+        side="right"
+        className="w-full max-w-md"
+        showCloseButton={false}
+      >
+        {/* Header */}
+        <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 */}
+        <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 ? (
+            <Empty className="border-0">
+              <EmptyContent>
+                <EmptyHeader>
+                  <EmptyTitle>Your cart is empty</EmptyTitle>
+                  <EmptyDescription>
+                    Add some products to get started!
+                  </EmptyDescription>
+                </EmptyHeader>
+                <Button
+                  onClick={closeCart}
+                  variant="outline"
+                >
+                  Continue Shopping
+                </Button>
+              </EmptyContent>
+            </Empty>
+          ) : (
+            <div className="space-y-6">
+              {items.map((item) => {
+                const image = getItemImage(item);
+                const selectedOptions = getSelectedOptions(item);
+
+                return (
+                  <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-muted rounded-lg overflow-hidden flex-shrink-0">
+                      {image ? (
+                        <img
+                          src={image}
+                          alt={item.merchandise.product.title}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <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-foreground mb-1 line-clamp-2">
+                        {item.merchandise.product.title}
+                      </h4>
+
+                      {/* Variant Info */}
+                      {selectedOptions.length > 0 && (
+                        <div className="text-sm text-muted-foreground mb-2">
+                          {selectedOptions.map((option, index) => (
+                            <span key={option.name}>
+                              {option.value}
+                              {index < selectedOptions.length - 1
+                                ? ' / '
+                                : ''}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+
+                      {/* Quantity Controls */}
+                      <div className="flex items-center mt-3">
+                        <div className="flex items-center border border-border rounded-lg">
+                          <Button
+                            onClick={() =>
+                              updateItemQuantity(item.id, item.quantity - 1)
+                            }
+                            variant="ghost"
+                            size="icon-sm"
+                            disabled={item.quantity <= 1 || loading}
+                            className="h-7 w-7"
+                          >
+                            <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)
+                            }
+                            variant="ghost"
+                            size="icon-sm"
+                            disabled={loading}
+                            className="h-7 w-7"
+                          >
+                            <Plus size={14} />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Price */}
+                    <div className="flex-shrink-0">
+                      <span className="text-sm font-semibold text-foreground">
+                        ${parseFloat(item.merchandise.price.amount).toFixed(2)}
+                      </span>
+                    </div>
+
+                    {/* Remove Button */}
+                    <div className="flex-shrink-0">
+                      <Button
+                        onClick={() => removeItem(item.id)}
+                        variant="ghost"
+                        size="icon-sm"
+                        disabled={loading}
+                        className="h-auto w-auto p-2 text-muted-foreground hover:text-foreground"
+                      >
+                        <X size={18} />
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Footer - Checkout Section */}
+        {items.length > 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>
+              <span className="text-lg font-bold">
+                ${totalAmount.toFixed(2)}
+              </span>
+            </div>
+
+            <div className="text-sm text-muted-foreground mb-4">
+              Shipping and taxes calculated at checkout
+            </div>
+
+            {/* Action Buttons */}
+            <div className="space-y-3">
+              <Button
+                onClick={handleCheckout}
+                disabled={loading || !checkoutUrl}
+                className="w-full"
+                size="lg"
+              >
+                {loading ? (
+                  <span className="flex items-center justify-center space-x-2">
+                    <Loader size={16} />
+                    <span>Processing...</span>
+                  </span>
+                ) : (
+                  'Checkout'
+                )}
+              </Button>
+
+              <Button onClick={closeCart} variant="link" className="w-full">
+                Continue Shopping
+              </Button>
+            </div>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default CartDrawer;

components/commerce/collection-card.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import Link from 'next/link';
+import { Card, CardContent } from '@/components/ui/card';
+import { Typography } from '@/components/Typography';
+
+interface CollectionImage {
+  url: string;
+  altText?: string;
+}
+
+interface Collection {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string;
+  image?: CollectionImage;
+}
+
+interface CollectionCardProps {
+  collection: Collection;
+}
+
+const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
+  return (
+    <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-muted">
+          {collection.image ? (
+            <img
+              src={collection.image.url}
+              alt={collection.image.altText || collection.title}
+              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-muted-foreground">
+              <i className="ri-folder-line text-6xl"></i>
+            </div>
+          )}
+        </div>
+
+        {/* Collection Info */}
+        <CardContent className="p-6">
+          <Typography
+            variant="subtitle1"
+            className="mb-3 font-semibold tracking-tight text-foreground transition-colors group-hover:text-muted-foreground"
+          >
+            {collection.title}
+          </Typography>
+
+          {collection.description && (
+            <p className="text-muted-foreground">
+              {collection.description.substring(0, 100)}
+              {collection.description.length > 100 ? '...' : ''}
+            </p>
+          )}
+
+          <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>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+};
+
+export default CollectionCard;

components/commerce/collection-detail.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { useCollectionProducts } from '@/hooks/use-shopify-collections';
+import ProductCard from './product-card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+const CollectionDetail: React.FC<{ handle?: string }> = ({ handle: handleProp }) => {
+  const handle = handleProp ?? '';
+
+  const { collection, loading, error, refetch } = useCollectionProducts(handle);
+
+  // Format title from handle
+  const formattedTitle = handle
+    ? handle.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+    : 'Collection';
+
+  if (loading || !handle) {
+    return (
+      <div className="pt-4 pb-16">
+        <div className="container mx-auto px-4">
+          <div className="mb-16 flex justify-center">
+            <Skeleton className="h-12 w-64" />
+          </div>
+
+          <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="flex flex-col gap-3">
+                <Skeleton className="aspect-square w-full" />
+                <Skeleton className="h-5 w-3/4" />
+                <Skeleton className="h-4 w-1/3" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="pt-4 pb-16">
+        <div className="container mx-auto px-4">
+          <div className="mx-auto flex max-w-md flex-col items-start gap-3 rounded-lg border border-border bg-foreground/[0.02] p-6">
+            <p className="text-sm font-medium">Could not load collection</p>
+            <p className="font-mono text-xs leading-relaxed text-muted-foreground line-clamp-3">
+              {error}
+            </p>
+            <button
+              onClick={() => refetch()}
+              className="rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-muted"
+            >
+              Retry
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const products = collection?.products || [];
+  const title = collection?.title || formattedTitle;
+
+  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-foreground font-heading">
+          {title}
+        </h2>
+
+        {products.length === 0 ? (
+          <div className="text-center py-12">
+            <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-muted-foreground">
+                This collection doesn&apos;t have any products yet.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {products.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CollectionDetail;

components/commerce/collection-grid.editor.tsx

@@ -0,0 +1,33 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { FolderOpen } from "lucide-react";
+import { CollectionGrid, type CollectionGridProps } from "@/components/commerce/collection-grid";
+
+const collectionGridEditor: ComponentConfig<CollectionGridProps> = {
+  label: "Collections",
+  icon: <FolderOpen size={16} />,
+  category: "commerce",
+  defaultProps: {
+    tagline: "Shop by collection",
+    heading: "Curated edits",
+    subheading: "Bundles built around the way you actually live.",
+    layout: "tiles",
+    limit: 6,
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    heading: { label: "Heading", type: "text", contentEditable: true },
+    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+    layout: {
+      label: "Layout",
+      type: "radio",
+      options: [
+        { label: "Tiles", value: "tiles" },
+        { label: "Editorial", value: "editorial" },
+      ],
+    },
+    limit: { label: "Limit", type: "number", min: 2, max: 12 },
+  },
+  render: (props) => <CollectionGrid {...props} />,
+};
+
+export default collectionGridEditor;

components/commerce/collection-grid.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+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;
+  heading: string;
+  subheading: string;
+  layout: "tiles" | "editorial";
+  limit: number;
+};
+
+type CollectionRow = {
+  id: string;
+  handle: string;
+  title: string;
+  description?: string;
+  image?: { url: string; altText?: string };
+};
+
+export function CollectionGrid({
+  tagline,
+  heading,
+  subheading,
+  layout,
+  limit,
+}: CollectionGridProps) {
+  const [collections, setCollections] = useState<CollectionRow[]>([]);
+
+  useEffect(() => {
+    shopifyFetch<any>({
+      query: GET_COLLECTIONS_QUERY,
+      variables: { first: limit },
+    })
+      .then((res) => {
+        const list = (res.data?.collections?.edges ?? []).map((e: any) => e.node);
+        setCollections(list);
+      })
+      .catch(() => setCollections([]));
+  }, [limit]);
+
+  const isEditorial = layout === "editorial";
+
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <Container>
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align="center"
+          size="lg"
+          className="mx-auto mb-12"
+          maxWidth="max-w-2xl"
+        />
+
+        <div
+          className={
+            isEditorial
+              ? "grid grid-cols-1 gap-8 md:grid-cols-2"
+              : "grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-3 lg:grid-cols-4"
+          }
+        >
+          {(collections.length === 0
+            ? Array.from({ length: limit }).map((_, i) => ({ id: `sk-${i}` }) as any)
+            : collections
+          ).map((c: CollectionRow) => (
+            <Link
+              key={c.id}
+              href={c.handle ? `/collections/${c.handle}` : "#"}
+              className="group block"
+            >
+              <div
+                className={`relative overflow-hidden rounded-md bg-muted ${isEditorial ? "aspect-[3/4] md:aspect-[5/6]" : "aspect-[4/5]"}`}
+              >
+                {c.image?.url ? (
+                  <img
+                    src={c.image.url}
+                    alt={c.image.altText || c.title}
+                    className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+                  />
+                ) : null}
+                {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="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
+                      </span>
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+              {!isEditorial ? (
+                <div className="mt-4">
+                  <Typography
+                    variant="subtitle2"
+                    className="font-medium tracking-tight text-foreground"
+                  >
+                    {c.title}
+                  </Typography>
+                </div>
+              ) : null}
+            </Link>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}

components/commerce/collection.editor.tsx

@@ -0,0 +1,247 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { FolderOpen } from "lucide-react";
+import { CollectionView, type CollectionProps } from "@/components/commerce/collection";
+
+const collectionEditor: ComponentConfig<CollectionProps> = {
+    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", type: "shopifyCollection" } as any,
+      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",
+        type: "image",
+      },
+      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} />,
+};
+
+export default collectionEditor;

components/commerce/collection.tsx

@@ -0,0 +1,552 @@
+import { useState, useCallback } from 'react';
+import { useRouteSegment } from '@/hooks/use-route-segment';
+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 routeHandle = useRouteSegment();
+  const handle = selected?.handle ?? routeHandle ?? '';
+
+  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 && !routeHandle) {
+    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 ?? routeHandle}
+          </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

@@ -0,0 +1,97 @@
+'use client';
+
+import React from 'react';
+import { useCollections } from '@/hooks/use-shopify-collections';
+import CollectionCard from './collection-card';
+
+const Collections: React.FC = () => {
+  const { collections, loading, error, refetch } = useCollections(20);
+
+  if (loading) {
+    return (
+      <div className="py-16">
+        <div className="container mx-auto px-4">
+          <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-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-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>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="py-16">
+        <div className="container mx-auto px-4">
+          <div className="mx-auto flex max-w-md flex-col items-start gap-3 rounded-lg border border-border bg-foreground/[0.02] p-6">
+            <p className="text-sm font-medium">Could not load collections</p>
+            <p className="font-mono text-xs leading-relaxed text-muted-foreground line-clamp-3">
+              {error}
+            </p>
+            <button
+              onClick={() => refetch()}
+              className="rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-muted"
+            >
+              Retry
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (collections.length === 0) {
+    return (
+      <div className="py-16">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-5xl font-bold mb-8 font-heading">
+            Our Collections
+          </h2>
+
+          <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-muted-foreground">
+              Check back later or configure your Shopify store connection.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-16">
+      <div className="container mx-auto px-4">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
+          Our Collections
+        </h2>
+
+        {/* Collections Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {collections.map((collection) => (
+            <CollectionCard key={collection.id} collection={collection} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Collections;

components/commerce/featured-product.editor.tsx

@@ -0,0 +1,40 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Star } from "lucide-react";
+import { FeaturedProductView, type FeaturedProductProps } from "@/components/commerce/featured-product";
+
+const featuredProductEditor: ComponentConfig<FeaturedProductProps> = {
+    label: "Featured product",
+    icon: <Star size={16} />,
+    category: "commerce",
+    defaultProps: {
+      product: null,
+      tagline: "Featured",
+      ctaLabel: "Add to bag",
+      align: "left",
+      tone: "default",
+    },
+    fields: {
+      product: { label: "Product", type: "shopifyProduct" } as any,
+      tagline: { label: "Tagline", type: "text", contentEditable: true },
+      ctaLabel: { label: "CTA label", type: "text", contentEditable: true },
+      align: {
+        label: "Image alignment",
+        type: "radio",
+        options: [
+          { label: "Image left", value: "left" },
+          { label: "Image right", value: "right" },
+        ],
+      },
+      tone: {
+        label: "Tone",
+        type: "radio",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Muted", value: "muted" },
+        ],
+      },
+    },
+    render: (props) => <FeaturedProductView {...props} />,
+};
+
+export default featuredProductEditor;

components/commerce/featured-product.tsx

@@ -0,0 +1,128 @@
+import Link from "next/link";
+import type { ShopifyProduct } from "@reacteditor/field-shopify";
+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 = {
+  product: ShopifyProduct | null;
+  tagline: string;
+  ctaLabel: string;
+  align: "left" | "right";
+  tone: "default" | "muted";
+};
+
+export function FeaturedProductView({
+  product: selected,
+  tagline,
+  ctaLabel,
+  align,
+  tone,
+}: FeaturedProductProps) {
+  const { product: full, loading } = useProduct(selected?.handle ?? null);
+  const product: any = full ?? selected;
+  const cart = useShopifyCart();
+
+  if (!product) {
+    return (
+      <section
+        className={cn(
+          "py-20 md:py-28",
+          tone === "muted" ? "bg-muted/40" : "bg-background",
+        )}
+      >
+        <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>
+          <div className="flex w-full flex-col items-start gap-5">
+            <Skeleton className="h-3 w-24" />
+            <Skeleton className="h-10 w-3/4" />
+            <Skeleton className="h-6 w-32" />
+            <div className="w-full max-w-md space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-5/6" />
+              <Skeleton className="h-4 w-4/6" />
+            </div>
+            <div className="mt-2 flex flex-wrap gap-3">
+              <Skeleton className="h-11 w-32 rounded-md" />
+              <Skeleton className="h-11 w-32 rounded-md" />
+            </div>
+          </div>
+        </Container>
+      </section>
+    );
+  }
+
+  const image =
+    product.images?.edges?.[0]?.node ?? (selected as any)?.featuredImage ?? null;
+  const variant = product.variants?.edges?.[0]?.node;
+  const price = product.priceRange?.minVariantPrice;
+  const formatted = price
+    ? new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: price.currencyCode,
+      }).format(parseFloat(price.amount))
+    : null;
+
+  return (
+    <section
+      className={
+        tone === "muted"
+          ? "bg-muted/40 py-20 md:py-28"
+          : "bg-background py-20 md:py-28"
+      }
+    >
+      <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
+              src={image.url}
+              alt={image.altText || product.title}
+              className="aspect-[4/5] w-full rounded-md object-cover"
+            />
+          ) : (
+            <div className="aspect-[4/5] w-full rounded-md bg-muted" />
+          )}
+        </div>
+        <div className="flex flex-col items-start gap-5">
+          {tagline ? (
+            <Typography variant="caption">{tagline}</Typography>
+          ) : null}
+          <Typography variant="h2">{product.title}</Typography>
+          {formatted ? (
+            <Typography variant="subtitle1" className="text-foreground font-medium">
+              {formatted}
+            </Typography>
+          ) : null}
+          {product.description ? (
+            <Typography variant="body2" className="max-w-md text-muted-foreground">
+              {product.description}
+            </Typography>
+          ) : null}
+          <div className="mt-2 flex flex-wrap gap-3">
+            <button
+              onClick={async () => {
+                if (!variant) return;
+                await cart.addItem(variant.id, 1);
+                cart.openCart();
+              }}
+              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
+              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>
+      </Container>
+    </section>
+  );
+}

components/commerce/product-card.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import Link from "next/link";
+import { Typography } from "@/components/Typography";
+
+type ProductImage = { url: string; altText?: string };
+type ProductPrice = { amount: string; currencyCode: string };
+
+export type ProductCardData = {
+  id: string;
+  handle: string;
+  title: string;
+  images?: { edges?: Array<{ node: ProductImage }> };
+  priceRange?: { minVariantPrice?: ProductPrice };
+  compareAtPriceRange?: { minVariantPrice?: ProductPrice };
+};
+
+function format(price: ProductPrice) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: price.currencyCode,
+  }).format(parseFloat(price.amount));
+}
+
+export function ProductCard({
+  product,
+  aspect = "portrait",
+}: {
+  product: ProductCardData;
+  aspect?: "portrait" | "square" | "landscape";
+}) {
+  const image = product.images?.edges?.[0]?.node;
+  const price = product.priceRange?.minVariantPrice;
+  const compare = product.compareAtPriceRange?.minVariantPrice;
+  const onSale =
+    price && compare && parseFloat(compare.amount) > parseFloat(price.amount);
+
+  const aspectClass: Record<string, string> = {
+    portrait: "aspect-[4/5]",
+    square: "aspect-square",
+    landscape: "aspect-[4/3]",
+  };
+
+  return (
+    <Link href={`/products/${product.handle}`} className="group block">
+      <div
+        className={`relative w-full overflow-hidden rounded-md bg-muted ${aspectClass[aspect]}`}
+      >
+        {image ? (
+          <img
+            src={image.url}
+            alt={image.altText || product.title}
+            className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+          />
+        ) : null}
+      </div>
+      <div className="mt-4 flex items-start justify-between gap-3">
+        <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 ? (
+              <span className="text-xs text-muted-foreground line-through">
+                {format(compare)}
+              </span>
+            ) : null}
+            <span className="font-medium">{format(price)}</span>
+          </div>
+        ) : null}
+      </div>
+    </Link>
+  );
+}
+
+export default ProductCard;

components/commerce/product-detail.tsx

@@ -0,0 +1,3 @@
+import ProductDetail from './product-detail/index.tsx';
+
+export default ProductDetail;

components/commerce/product-detail/index.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useProduct, type Product } from '@/hooks/use-shopify-products';
+import { useRouteSegment } from '@/hooks/use-route-segment';
+import { useShopifyCart } from '@/hooks/use-shopify-cart';
+import ProductDetailGallery from './product-detail-gallery';
+import ProductDetailInfo from './product-detail-info';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+  availableForSale: boolean;
+  selectedOptions: Array<{
+    name: string;
+    value: string;
+  }>;
+  image?: {
+    url: string;
+    altText?: string;
+  };
+}
+
+export type { Product };
+
+interface ProductDetailProps {
+  handle?: string;
+}
+
+const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) => {
+  const routeHandle = useRouteSegment();
+  const handle = handleProp || routeHandle || '';
+  const { addItem, openCart } = useShopifyCart();
+
+  const { product, loading, error } = useProduct(handle);
+
+  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
+  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({});
+  const [quantity, setQuantity] = useState(1);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [addingToCart, setAddingToCart] = useState(false);
+
+  // Initialize variant when product loads
+  useEffect(() => {
+    if (product) {
+      const firstVariant = product.variants.edges[0]?.node;
+      if (firstVariant) {
+        setSelectedVariant(firstVariant);
+
+        const initialOptions: Record<string, string> = {};
+        firstVariant.selectedOptions.forEach((option: { name: string; value: string }) => {
+          initialOptions[option.name] = option.value;
+        });
+        setSelectedOptions(initialOptions);
+      }
+    }
+  }, [product]);
+
+  const handleOptionChange = (optionName: string, value: string) => {
+    const newOptions = { ...selectedOptions, [optionName]: value };
+    setSelectedOptions(newOptions);
+
+    // Find matching variant
+    const matchingVariant = product?.variants.edges.find(({ node }) => {
+      return node.selectedOptions.every(option =>
+        newOptions[option.name] === option.value
+      );
+    });
+
+    if (matchingVariant) {
+      setSelectedVariant(matchingVariant.node);
+
+      // Update image if variant has an associated image
+      if (matchingVariant.node.image && product) {
+        const variantImageUrl = matchingVariant.node.image.url;
+        const imageIndex = product.images.edges.findIndex(
+          edge => edge.node.url === variantImageUrl
+        );
+        if (imageIndex !== -1) {
+          setSelectedImageIndex(imageIndex);
+        }
+      }
+    }
+  };
+
+  const handleAddToCart = async () => {
+    if (!selectedVariant || !product) return;
+
+    try {
+      setAddingToCart(true);
+      await addItem(selectedVariant.id, quantity);
+      openCart();
+    } catch (err) {
+      console.error('Failed to add item to cart:', err);
+    } finally {
+      setAddingToCart(false);
+    }
+  };
+
+  if (loading || !handle || !product) {
+    if (error && handle && !loading) {
+      return (
+        <div className="container mx-auto px-4 py-12">
+          <div className="mx-auto flex max-w-md flex-col items-start gap-3 rounded-lg border border-border bg-foreground/[0.02] p-6">
+            <p className="text-sm font-medium">Product not found</p>
+            <p className="font-mono text-xs leading-relaxed text-muted-foreground line-clamp-3">
+              {error}
+            </p>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => window.history.back()}
+            >
+              Go back
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <div>
+            <Skeleton className="aspect-square w-full mb-4" />
+            <div className="grid grid-cols-4 gap-2">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Skeleton key={i} className="aspect-square w-full" />
+              ))}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <Skeleton className="h-8 w-3/4" />
+            <Skeleton className="h-6 w-1/3" />
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-12 w-full" />
+            <Skeleton className="h-12 w-full" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <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 href="/">Home</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/shop">Shop</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{product.title}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <ProductDetailGallery
+            images={product.images.edges.map(edge => edge.node)}
+            selectedImageIndex={selectedImageIndex}
+            onImageSelect={setSelectedImageIndex}
+          />
+          <ProductDetailInfo
+            product={product}
+            selectedVariant={selectedVariant}
+            selectedOptions={selectedOptions}
+            quantity={quantity}
+            setQuantity={setQuantity}
+            handleAddToCart={handleAddToCart}
+            onOptionChange={handleOptionChange}
+            loading={addingToCart}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetail;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductDetailGalleryProps {
+  images: ProductImage[];
+  selectedImageIndex?: number;
+  onImageSelect?: (index: number) => void;
+}
+
+const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
+  images,
+  selectedImageIndex = 0,
+  onImageSelect
+}) => {
+  const selectedImage = selectedImageIndex;
+  const setSelectedImage = onImageSelect || (() => {});
+
+  return (
+    <div>
+      {/* Main Image */}
+      <div className="aspect-square bg-muted rounded-lg overflow-hidden mb-4">
+        {images.length > 0 ? (
+          <img
+            src={images[selectedImage].url}
+            alt={images[selectedImage].altText || 'Product image'}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+            <i className="ri-image-line text-6xl"></i>
+          </div>
+        )}
+      </div>
+
+      {/* Image Thumbnails */}
+      {images.length > 1 && (
+        <div className="grid grid-cols-4 gap-2">
+          {images.map((image, index) => (
+            <button
+              key={index}
+              onClick={() => setSelectedImage(index)}
+              className={`aspect-square rounded-lg overflow-hidden border-2 transition-colors ${
+                selectedImage === index 
+                  ? 'border-foreground'
+                  : 'border-border hover:border-muted-foreground'
+              }`}
+            >
+              <img
+                src={image.url}
+                alt={image.altText || 'Product thumbnail'}
+                className="w-full h-full object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductDetailGallery;

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

@@ -0,0 +1,158 @@
+import React from 'react';
+import { Product, ProductVariant } from './index.tsx';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Spinner } from '@/components/ui/spinner';
+
+interface ProductDetailInfoProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  selectedOptions: Record<string, string>;
+  quantity: number;
+  setQuantity: (quantity: number) => void;
+  handleAddToCart: () => void;
+  onOptionChange: (optionName: string, value: string) => void;
+  loading?: boolean;
+}
+
+const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
+  product,
+  selectedVariant,
+  selectedOptions,
+  quantity,
+  setQuantity,
+  handleAddToCart,
+  onOptionChange,
+  loading = false,
+}) => {
+  const formatPrice = (price: { amount: string; currencyCode: string }) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(parseFloat(price.amount));
+  };
+
+  const price = selectedVariant?.price || product.priceRange.minVariantPrice;
+  const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
+  const hasDiscount = compareAtPrice && parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
+
+  return (
+    <div>
+      <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-foreground">
+          {formatPrice(price)}
+        </span>
+        {hasDiscount && compareAtPrice && (
+          <>
+            <span className="text-xl text-muted-foreground line-through">
+              {formatPrice(compareAtPrice)}
+            </span>
+            <Badge variant="destructive">
+              {Math.round(((parseFloat(compareAtPrice.amount) - parseFloat(price.amount)) / parseFloat(compareAtPrice.amount)) * 100)}% OFF
+            </Badge>
+          </>
+        )}
+      </div>
+
+      {/* Description */}
+      {product.description && (
+        <div className="text-muted-foreground mb-8 text-lg leading-relaxed">
+          {product.descriptionHtml ? (
+            <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
+          ) : (
+            <p>{product.description}</p>
+          )}
+        </div>
+      )}
+
+      {/* Product Options */}
+      {product.options.map(option => (
+        <div key={option.id} className="mb-6">
+          <label className="block text-sm font-semibold text-foreground mb-2">
+            {option.name}
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {option.values.map(value => (
+              <Button
+                key={value}
+                onClick={() => onOptionChange(option.name, value)}
+                variant={selectedOptions[option.name] === value ? 'default' : 'outline'}
+              >
+                {value}
+              </Button>
+            ))}
+          </div>
+        </div>
+      ))}
+
+      {/* Quantity Selector */}
+      <div className="mb-8">
+        <label className="block text-sm font-semibold text-foreground mb-2">
+          Quantity
+        </label>
+        <div className="flex items-center border border-border rounded-lg w-fit">
+          <Button
+            onClick={() => setQuantity(Math.max(1, quantity - 1))}
+            variant="ghost"
+            size="icon-sm"
+            disabled={quantity <= 1}
+          >
+            <i className="ri-subtract-line"></i>
+          </Button>
+          <span className="w-10 text-center font-semibold">{quantity}</span>
+          <Button
+            onClick={() => setQuantity(quantity + 1)}
+            variant="ghost"
+            size="icon-sm"
+          >
+            <i className="ri-add-line"></i>
+          </Button>
+        </div>
+      </div>
+
+      {/* Add to Cart Button */}
+      <Button
+        onClick={handleAddToCart}
+        disabled={!selectedVariant?.availableForSale || loading}
+        size="lg"
+        className="w-full text-lg"
+      >
+        {loading ? (
+          <span className="flex items-center justify-center gap-2">
+            <Spinner size="sm" />
+            <span>Adding...</span>
+          </span>
+        ) : selectedVariant?.availableForSale ? (
+          'Add to Cart'
+        ) : (
+          'Out of Stock'
+        )}
+      </Button>
+
+      {/* Additional Info */}
+      <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>
+          </div>
+          <div className="flex items-center space-x-2">
+            <i className="ri-arrow-go-back-line"></i>
+            <span>30-day return policy</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <i className="ri-secure-payment-line"></i>
+            <span>Secure payment</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetailInfo;

components/commerce/product-details.editor.tsx

@@ -0,0 +1,14 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Package } from "lucide-react";
+import { ProductDetailsView, type ProductDetailsProps } from "@/components/commerce/product-details";
+
+const productDetailsEditor: ComponentConfig<ProductDetailsProps> = {
+    label: "Product details",
+    icon: <Package size={16} />,
+    category: "commerce",
+    defaultProps: { product: null },
+    fields: { product: { label: "Product", type: "shopifyProduct" } as any },
+    render: (props) => <ProductDetailsView {...props} />,
+};
+
+export default productDetailsEditor;

components/commerce/product-details.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useState } from "react";
+import { useRouteSegment } from "@/hooks/use-route-segment";
+import type { ShopifyProduct } from "@reacteditor/field-shopify";
+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 routeHandle = useRouteSegment();
+  const handle = selected?.handle ?? routeHandle ?? null;
+  const { product, loading } = useProduct(handle);
+  const cart = useShopifyCart();
+  const [activeImage, setActiveImage] = useState(0);
+  const [variant, setVariant] = useState<any>(null);
+  const [quantity, setQuantity] = useState(1);
+  const [adding, setAdding] = useState(false);
+
+  useEffect(() => {
+    if (product?.variants?.edges?.length) {
+      setVariant(product.variants.edges[0].node);
+    }
+  }, [product]);
+
+  if (!handle || loading || !product) {
+    return (
+      <section className="bg-background py-12 md:py-20">
+        <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">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <Skeleton key={i} className="aspect-square w-20 flex-shrink-0" />
+              ))}
+            </div>
+          </div>
+          <div className="flex flex-col gap-6">
+            <Skeleton className="h-10 w-3/4" />
+            <Skeleton className="h-6 w-1/4" />
+            <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-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-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" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-5/6" />
+              <Skeleton className="h-4 w-4/6" />
+            </div>
+          </div>
+        </Container>
+      </section>
+    );
+  }
+
+  const images = product.images?.edges?.map((e: any) => e.node) ?? [];
+  const main = images[activeImage];
+  const price = variant?.price ?? product.priceRange?.minVariantPrice;
+  const formatted = price
+    ? new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: price.currencyCode,
+      }).format(parseFloat(price.amount))
+    : null;
+
+  const onAdd = async () => {
+    if (!variant) return;
+    setAdding(true);
+    try {
+      await cart.addItem(variant.id, quantity);
+      cart.openCart();
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  return (
+    <section className="bg-background py-12 md:py-20">
+      <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 ? (
+              <img
+                src={main.url}
+                alt={main.altText || product.title}
+                className="h-full w-full object-cover"
+              />
+            ) : null}
+          </div>
+          {images.length > 1 ? (
+            <div className="flex gap-3 overflow-x-auto p-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+              {images.map((img: any, i: number) => (
+                <button
+                  key={i}
+                  onClick={() => setActiveImage(i)}
+                  className={cn(
+                    "aspect-square w-20 flex-shrink-0 overflow-hidden rounded-md transition-opacity",
+                    i === activeImage
+                      ? "ring-2 ring-foreground"
+                      : "opacity-60 hover:opacity-100",
+                  )}
+                >
+                  <img
+                    src={img.url}
+                    alt=""
+                    className="h-full w-full object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <div>
+            <Typography variant="h2" as="h1">
+              {product.title}
+            </Typography>
+            {formatted ? (
+              <Typography variant="subtitle1" className="mt-3 text-foreground">
+                {formatted}
+              </Typography>
+            ) : null}
+          </div>
+
+          {(product.options ?? []).map((opt: any) => (
+            <div key={opt.id ?? opt.name}>
+              <p className="mb-2 text-xs uppercase tracking-[0.18em] text-muted-foreground">
+                {opt.name}
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {opt.values.map((val: string) => {
+                  const matching = product.variants.edges.find((e: any) =>
+                    e.node.selectedOptions?.some(
+                      (o: any) => o.name === opt.name && o.value === val,
+                    ),
+                  );
+                  const selected = variant?.selectedOptions?.some(
+                    (o: any) => o.name === opt.name && o.value === val,
+                  );
+                  return (
+                    <button
+                      key={val}
+                      onClick={() => matching && setVariant(matching.node)}
+                      className={cn(
+                        "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",
+                      )}
+                    >
+                      {val}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+
+          <div className="flex items-center gap-4 pt-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"
+              >
+                −
+              </button>
+              <span className="w-6 text-center text-sm">{quantity}</span>
+              <button
+                onClick={() => setQuantity((q) => q + 1)}
+                className="text-base hover:opacity-60"
+              >
+                +
+              </button>
+            </div>
+            <button
+              onClick={onAdd}
+              disabled={!variant || adding}
+              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 ? (
+                <span className="flex items-center justify-center gap-2">
+                  <Loader size={16} />
+                  Adding…
+                </span>
+              ) : (
+                "Add to bag"
+              )}
+            </button>
+          </div>
+
+          {product.description ? (
+            <div className="border-t border-border pt-6">
+              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
+                Details
+              </p>
+              <p className="mt-3 text-sm leading-relaxed text-foreground/80">
+                {product.description}
+              </p>
+            </div>
+          ) : null}
+        </div>
+      </Container>
+    </section>
+  );
+}

components/commerce/product-recommendations.editor.tsx

@@ -0,0 +1,25 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { LayoutGrid } from "lucide-react";
+import {
+  ProductRecommendationsView,
+  type ProductRecommendationsProps,
+} from "@/components/commerce/product-recommendations";
+
+const productRecommendationsEditor: ComponentConfig<ProductRecommendationsProps> = {
+    label: "Product recommendations",
+    icon: <LayoutGrid size={16} />,
+    category: "commerce",
+    defaultProps: {
+      product: null,
+      heading: "You Might Also Like",
+      limit: 4,
+    },
+    fields: {
+      product: { label: "Source product", type: "shopifyProduct" } as any,
+      heading: { label: "Heading", type: "text", contentEditable: true },
+      limit: { label: "Limit", type: "number", min: 2, max: 8 },
+    },
+    render: (props) => <ProductRecommendationsView {...props} />,
+};
+
+export default productRecommendationsEditor;

components/commerce/product-recommendations.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import React from 'react';
+import type { ShopifyProduct } from '@reacteditor/field-shopify';
+import {
+  useProduct,
+  useProductRecommendations,
+} from '@/hooks/use-shopify-products';
+import { useRouteSegment } from '@/hooks/use-route-segment';
+import { ProductCard } from './product-card';
+
+export type ProductRecommendationsProps = {
+  product: ShopifyProduct | null;
+  heading: string;
+  limit: number;
+};
+
+export function ProductRecommendationsView({
+  product: selected,
+  heading,
+  limit,
+}: ProductRecommendationsProps) {
+  const routeHandle = useRouteSegment();
+  const handle = selected?.handle ?? routeHandle ?? null;
+  const { product } = useProduct(handle);
+  const { recommendations, loading, error } = useProductRecommendations(
+    product?.id ?? null,
+  );
+
+  // Don't show section if we're not loading and have no recommendations
+  if (!loading && (!recommendations || recommendations.length === 0)) {
+    return null;
+  }
+
+  return (
+    <div className="bg-muted py-16">
+      <div className="container mx-auto px-4">
+        <h2 className="text-4xl font-bold text-center mb-12 text-foreground font-heading">
+          {heading}
+        </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: limit }).map((_, index) => (
+              <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-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-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">
+            {recommendations.slice(0, limit).map((recommendedProduct) => (
+              <ProductCard
+                key={recommendedProduct.id}
+                product={recommendedProduct}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ProductRecommendationsView;

components/commerce/products-carousel.editor.tsx

@@ -0,0 +1,40 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { GalleryHorizontalEnd } from "lucide-react";
+import { ProductsCarousel, type ProductsCarouselProps } from "@/components/commerce/products-carousel";
+
+const productsCarouselEditor: ComponentConfig<ProductsCarouselProps> = {
+    label: "Products carousel",
+    icon: <GalleryHorizontalEnd size={16} />,
+    category: "commerce",
+    defaultProps: {
+      collection: null,
+      tagline: "New",
+      heading: "Just dropped",
+      subheading: "Fresh additions to the lineup.",
+      limit: 12,
+      slidesPerView: "4",
+      ctaLabel: "Shop new",
+      ctaHref: "",
+    },
+    fields: {
+      collection: { label: "Collection", type: "shopifyCollection" } as any,
+      tagline: { label: "Tagline", type: "text", contentEditable: true },
+      heading: { label: "Heading", type: "text", contentEditable: true },
+      subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+      limit: { label: "Limit", type: "number", min: 4, max: 24 },
+      slidesPerView: {
+        label: "Slides per view",
+        type: "select",
+        options: [
+          { label: "2 per view", value: "2" },
+          { label: "3 per view", value: "3" },
+          { label: "4 per view", value: "4" },
+        ],
+      },
+      ctaLabel: { label: "CTA label", type: "text", contentEditable: true },
+      ctaHref: { label: "CTA link", type: "text" },
+    },
+    render: (props) => <ProductsCarousel {...props} />,
+};
+
+export default productsCarouselEditor;

components/commerce/products-carousel.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import type { ShopifyCollection } from "@reacteditor/field-shopify";
+import { getProducts } from "@/hooks/use-shopify-products";
+import { getCollectionProducts } from "@/hooks/use-shopify-collections";
+import { ProductCard } from "./product-card";
+import { Heading } from "@/components/Heading";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Container } from "@/components/layout/Container";
+
+export type ProductsCarouselProps = {
+  collection: ShopifyCollection | null;
+  tagline: string;
+  heading: string;
+  subheading: string;
+  limit: number;
+  slidesPerView: "2" | "3" | "4";
+  ctaLabel: string;
+  ctaHref: string;
+};
+
+const basisClass: Record<ProductsCarouselProps["slidesPerView"], string> = {
+  "2": "md:basis-1/2",
+  "3": "md:basis-1/3",
+  "4": "md:basis-1/4",
+};
+
+export function ProductsCarousel({
+  collection,
+  tagline,
+  heading,
+  subheading,
+  limit,
+  slidesPerView,
+  ctaLabel,
+  ctaHref,
+}: ProductsCarouselProps) {
+  const [products, setProducts] = useState<any[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      try {
+        if (collection?.handle) {
+          const data = await getCollectionProducts(collection.handle, {
+            first: limit,
+          });
+          if (!cancelled) setProducts(data?.collection?.products ?? []);
+        } else {
+          const data = await getProducts({
+            first: limit,
+            sortKey: "CREATED_AT",
+            reverse: true,
+          });
+          if (!cancelled) setProducts(data ?? []);
+        }
+      } catch {
+        if (!cancelled) setProducts([]);
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [collection?.handle, limit]);
+
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <Container>
+        <div className="mb-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
+          <Heading
+            tagline={tagline}
+            title={heading}
+            subtitle={subheading}
+            align="left"
+            size="lg"
+            maxWidth="max-w-xl"
+          />
+          {ctaLabel ? (
+            <Link
+              href={
+                ctaHref ||
+                (collection?.handle ? `/collections/${collection.handle}` : "/collections")
+              }
+              className="text-sm font-medium tracking-wide hover:opacity-70"
+            >
+              {ctaLabel} →
+            </Link>
+          ) : null}
+        </div>
+
+        <Carousel opts={{ align: "start", loop: true }}>
+          <CarouselContent className="-ml-6">
+            {(products.length === 0
+              ? Array.from({ length: limit }).map((_, i) => ({ id: `sk-${i}` }))
+              : products
+            ).map((p: any) => (
+              <CarouselItem
+                key={p.id}
+                className={`pl-6 basis-3/4 sm:basis-1/2 ${basisClass[slidesPerView]}`}
+              >
+                {products.length === 0 ? (
+                  <div className="aspect-[4/5] w-full animate-pulse rounded-md bg-muted" />
+                ) : (
+                  <ProductCard product={p} />
+                )}
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious className="hidden md:inline-flex" />
+          <CarouselNext className="hidden md:inline-flex" />
+        </Carousel>
+      </Container>
+    </section>
+  );
+}

components/commerce/products-grid.editor.tsx

@@ -0,0 +1,39 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { LayoutGrid } from "lucide-react";
+import { ProductsGrid, type ProductsGridProps } from "@/components/commerce/products-grid";
+
+const productsGridEditor: ComponentConfig<ProductsGridProps> = {
+    label: "Products grid",
+    icon: <LayoutGrid size={16} />,
+    category: "commerce",
+    defaultProps: {
+      collection: null,
+      tagline: "Shop",
+      heading: "Latest arrivals",
+      subheading: "New pieces, fresh in this season.",
+      columns: "4",
+      limit: 8,
+      ctaLabel: "View all",
+      ctaHref: "",
+    },
+    fields: {
+      collection: { label: "Collection", type: "shopifyCollection" } as any,
+      tagline: { label: "Tagline", type: "text", contentEditable: true },
+      heading: { label: "Heading", type: "text", contentEditable: true },
+      subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+      columns: {
+        label: "Columns",
+        type: "radio",
+        options: [
+          { label: "3 columns", value: "3" },
+          { label: "4 columns", value: "4" },
+        ],
+      },
+      limit: { label: "Limit", type: "number", min: 2, max: 24 },
+      ctaLabel: { label: "CTA label", type: "text", contentEditable: true },
+      ctaHref: { label: "CTA link", type: "text" },
+    },
+    render: (props) => <ProductsGrid {...props} />,
+};
+
+export default productsGridEditor;

components/commerce/products-grid.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import type { ShopifyCollection } from "@reacteditor/field-shopify";
+import { getProducts } from "@/hooks/use-shopify-products";
+import { getCollectionProducts } from "@/hooks/use-shopify-collections";
+import { ProductCard } from "./product-card";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
+
+export type ProductsGridProps = {
+  collection: ShopifyCollection | null;
+  tagline: string;
+  heading: string;
+  subheading: string;
+  columns: "3" | "4";
+  limit: number;
+  ctaLabel: string;
+  ctaHref: string;
+};
+
+const colClass: Record<ProductsGridProps["columns"], string> = {
+  "3": "grid-cols-2 md:grid-cols-3",
+  "4": "grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+};
+
+export function ProductsGrid({
+  collection,
+  tagline,
+  heading,
+  subheading,
+  columns,
+  limit,
+  ctaLabel,
+  ctaHref,
+}: ProductsGridProps) {
+  const [products, setProducts] = useState<any[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      try {
+        if (collection?.handle) {
+          const data = await getCollectionProducts(collection.handle, {
+            first: limit,
+          });
+          if (!cancelled) setProducts(data?.collection?.products ?? []);
+        } else {
+          const data = await getProducts({ first: limit, sortKey: "BEST_SELLING" });
+          if (!cancelled) setProducts(data ?? []);
+        }
+      } catch {
+        if (!cancelled) setProducts([]);
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [collection?.handle, limit]);
+
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <Container>
+        <div className="mb-12 flex flex-col items-end justify-between gap-6 md:flex-row md:items-end">
+          <Heading
+            tagline={tagline}
+            title={heading}
+            subtitle={subheading}
+            align="left"
+            size="lg"
+            maxWidth="max-w-xl"
+          />
+          {ctaLabel ? (
+            <Link
+              href={ctaHref || (collection?.handle ? `/collections/${collection.handle}` : "/collections")}
+              className="text-sm font-medium tracking-wide hover:opacity-70"
+            >
+              {ctaLabel} →
+            </Link>
+          ) : null}
+        </div>
+
+        <div className={`grid gap-x-6 gap-y-12 ${colClass[columns]}`}>
+          {products.length === 0
+            ? Array.from({ length: limit }).map((_, i) => (
+                <div
+                  key={i}
+                  className="aspect-[4/5] w-full animate-pulse rounded-md bg-muted"
+                />
+              ))
+            : products.map((p) => <ProductCard key={p.id} product={p} />)}
+        </div>
+      </Container>
+    </section>
+  );
+}

components/commerce/products.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import ProductCard from './product-card';
+import { getProducts } from '@/hooks/use-shopify-products';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+}
+
+interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+}
+
+interface ProductsProps {
+  title?: string;
+  limit?: number;
+  showLoadMore?: boolean;
+}
+
+const Products: React.FC<ProductsProps> = ({ 
+  title = "Our Products", 
+  limit = 12,
+  showLoadMore = true 
+}) => {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMoreProducts, setHasMoreProducts] = useState(true);
+
+  const fetchProducts = async (currentProducts: Product[] = [], loadMore = false) => {
+    try {
+      if (loadMore) {
+        setLoadingMore(true);
+      } else {
+        setLoading(true);
+        setError(null);
+      }
+
+      const newProducts = await getProducts({ 
+        first: limit,
+        sortKey: 'CREATED_AT',
+        reverse: true
+      });
+
+      if (loadMore) {
+        // Filter out products that already exist
+        const existingIds = new Set(currentProducts.map(p => p.id));
+        const uniqueNewProducts = newProducts.filter(p => !existingIds.has(p.id));
+        
+        if (uniqueNewProducts.length === 0) {
+          setHasMoreProducts(false);
+        } else {
+          setProducts(prev => [...prev, ...uniqueNewProducts]);
+        }
+      } else {
+        setProducts(newProducts);
+        setHasMoreProducts(newProducts.length === limit);
+      }
+    } catch (err) {
+      console.error('Error fetching products:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load products');
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, [limit]);
+
+  const handleAddToCart = async (product: Product) => {
+    // Here you would typically integrate with cart functionality
+    console.log('Adding to cart:', product);
+  };
+
+  const handleLoadMore = () => {
+    if (!loadingMore && hasMoreProducts) {
+      fetchProducts(products, true);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="py-16">
+        <div className="container mx-auto px-4">
+          <h2 className="text-4xl font-bold text-center mb-12 font-heading">
+            {title}
+          </h2>
+          
+          {/* 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-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-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>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="py-16">
+        <div className="container mx-auto px-4">
+          <div className="mx-auto flex max-w-md flex-col items-start gap-3 rounded-lg border border-border bg-foreground/[0.02] p-6">
+            <p className="text-sm font-medium">Could not load products</p>
+            <p className="font-mono text-xs leading-relaxed text-muted-foreground line-clamp-3">
+              {error}
+            </p>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => fetchProducts()}
+            >
+              Retry
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (products.length === 0) {
+    return (
+      <div className="py-16">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-4xl font-bold mb-8 font-heading">
+            {title}
+          </h2>
+          
+          <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-muted-foreground">
+              Check back later or configure your Shopify store connection.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-16">
+      <div className="container mx-auto px-4">
+        <h2 className="text-5xl font-bold text-center mb-16 text-foreground font-heading">
+          {title}
+        </h2>
+
+        {/* Products Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-12">
+          {products.map((product) => (
+            <ProductCard
+              key={product.id}
+              product={product}
+              onAddToCart={handleAddToCart}
+            />
+          ))}
+        </div>
+
+        {/* Load More Button */}
+        {showLoadMore && hasMoreProducts && (
+          <div className="text-center">
+            <Button
+              onClick={handleLoadMore}
+              disabled={loadingMore}
+              size="lg"
+              className="font-heading"
+            >
+              {loadingMore ? (
+                <span className="flex items-center space-x-2">
+                  <Spinner size="sm" />
+                  <span>Loading...</span>
+                </span>
+              ) : (
+                'Load More Products'
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Products;

components/commerce/recommended-products.editor.tsx

@@ -0,0 +1,24 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Sparkles } from "lucide-react";
+import { RecommendedProductsView, type RecommendedProductsProps } from "@/components/commerce/recommended-products";
+
+const recommendedProductsEditor: ComponentConfig<RecommendedProductsProps> = {
+    label: "Recommended products",
+    icon: <Sparkles size={16} />,
+    category: "commerce",
+    defaultProps: {
+      product: null,
+      tagline: "You may also like",
+      heading: "More to explore",
+      limit: 4,
+    },
+    fields: {
+      product: { label: "Source product", type: "shopifyProduct" } as any,
+      tagline: { label: "Tagline", type: "text", contentEditable: true },
+      heading: { label: "Heading", type: "text", contentEditable: true },
+      limit: { label: "Limit", type: "number", min: 2, max: 8 },
+    },
+    render: (props) => <RecommendedProductsView {...props} />,
+};
+
+export default recommendedProductsEditor;

components/commerce/recommended-products.tsx

@@ -0,0 +1,68 @@
+import type { ShopifyProduct } from "@reacteditor/field-shopify";
+import {
+  useProduct,
+  useProductRecommendations,
+} from "@/hooks/use-shopify-products";
+import { ProductCard } from "./product-card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
+
+export type RecommendedProductsProps = {
+  product: ShopifyProduct | null;
+  tagline: string;
+  heading: string;
+  limit: number;
+};
+
+export function RecommendedProductsView({
+  product: selected,
+  tagline,
+  heading,
+  limit,
+}: RecommendedProductsProps) {
+  const { product } = useProduct(selected?.handle ?? null);
+  const { recommendations } = useProductRecommendations(product?.id ?? null);
+  const items = (recommendations ?? []).slice(0, limit);
+
+  if (!selected) {
+    return (
+      <section className="bg-background py-20 md:py-28">
+        <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" />
+          </div>
+          <div className="grid grid-cols-2 gap-x-6 gap-y-12 md:grid-cols-4">
+            {Array.from({ length: limit }).map((_, i) => (
+              <Skeleton key={i} className="aspect-[4/5] w-full" />
+            ))}
+          </div>
+        </Container>
+      </section>
+    );
+  }
+
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <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
+            ? Array.from({ length: limit }).map((_, i) => (
+                <Skeleton key={i} className="aspect-[4/5] w-full" />
+              ))
+            : items.map((p: any) => <ProductCard key={p.id} product={p} />)}
+        </div>
+      </Container>
+    </section>
+  );
+}

components/commerce/search-products.editor.tsx

@@ -0,0 +1,244 @@
+import { ComponentConfig } from '@reacteditor/core';
+import { Search } from 'lucide-react';
+import { SearchProductsView, type SearchProductsProps } from '@/components/commerce/search-products';
+
+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} />,
+};
+
+export default searchProductsEditor;

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

@@ -0,0 +1,53 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Megaphone } from "lucide-react";
+import { CTA, type CTAProps } from "@/components/cta/cta";
+
+const ctaEditor: ComponentConfig<CTAProps> = {
+  label: "Call to action",
+  icon: <Megaphone size={16} />,
+  category: "content",
+  defaultProps: {
+    tagline: "",
+    heading: "Designed once. Worn for years.",
+    subheading:
+      "Join 40,000 people building a wardrobe they actually reach for.",
+    primaryCta: { label: "Shop now", href: "/collections" },
+    secondaryCta: { label: "Read our story", href: "/about" },
+    imageUrl:
+      "https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=2400&q=80",
+    align: "center",
+  },
+  fields: {
+    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: {
+        label: { label: "Label", type: "text", contentEditable: true },
+        href: { label: "Link", type: "text" },
+      },
+    },
+    secondaryCta: {
+      label: "Secondary CTA",
+      type: "object",
+      objectFields: {
+        label: { label: "Label", type: "text", contentEditable: true },
+        href: { label: "Link", type: "text" },
+      },
+    },
+    imageUrl: { label: "Background image", type: "image" },
+    align: {
+      label: "Alignment",
+      type: "radio",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Center", value: "center" },
+      ],
+    },
+  },
+  render: (props) => <CTA {...props} />,
+};
+
+export default ctaEditor;

components/cta/cta.tsx

@@ -0,0 +1,81 @@
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Heading } from "@/components/Heading";
+
+export type CTAProps = {
+  tagline: string;
+  heading: string;
+  subheading: string;
+  primaryCta: { label: string; href: string };
+  secondaryCta: { label: string; href: string };
+  imageUrl: string;
+  align: "left" | "center";
+};
+
+export function CTA({
+  tagline,
+  heading,
+  subheading,
+  primaryCta,
+  secondaryCta,
+  imageUrl,
+  align,
+}: CTAProps) {
+  return (
+    <section className="relative overflow-hidden py-24 md:py-32">
+      <div className="absolute inset-0 -z-10">
+        {imageUrl ? (
+          <>
+            <img
+              src={imageUrl}
+              alt=""
+              className="h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 bg-black/45" />
+          </>
+        ) : (
+          <div className="h-full w-full bg-foreground" />
+        )}
+      </div>
+      <div
+        className={cn(
+          "container mx-auto flex max-w-4xl flex-col px-6 text-white",
+          align === "center" ? "items-center text-center" : "items-start",
+        )}
+      >
+        <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",
+            align === "center" && "justify-center",
+          )}
+        >
+          {primaryCta?.label ? (
+            <Link
+              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
+              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>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+}

components/faq/faq.editor.tsx

@@ -0,0 +1,54 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { HelpCircle } from "lucide-react";
+import { FAQ, type FAQProps } from "@/components/faq/faq";
+
+const faqEditor: ComponentConfig<FAQProps> = {
+  label: "FAQ",
+  icon: <HelpCircle size={16} />,
+  category: "content",
+  defaultProps: {
+    tagline: "Help",
+    heading: "Common questions",
+    subheading: "",
+    items: [
+      {
+        question: "What's your return policy?",
+        answer:
+          "Free returns within 30 days of delivery. Items should be unworn with original tags attached.",
+      },
+      {
+        question: "Where do you ship?",
+        answer:
+          "We ship worldwide. Free standard shipping on orders over $150 in the US, $250 international.",
+      },
+      {
+        question: "How are your products made?",
+        answer:
+          "In small batches at family-run mills in Portugal, Italy, and Japan. Every piece is sampled and approved by our team.",
+      },
+      {
+        question: "How do I care for my pieces?",
+        answer:
+          "Cold wash, lay flat to dry, iron when damp. Care details are on every product page and on the inner label.",
+      },
+    ],
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    heading: { label: "Heading", type: "text", contentEditable: true },
+    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+    items: {
+      label: "Items",
+      type: "array",
+      defaultItemProps: { question: "", answer: "" },
+      getItemSummary: (it) => it?.question || "Question",
+      arrayFields: {
+        question: { label: "Question", type: "text", contentEditable: true },
+        answer: { label: "Answer", type: "textarea", contentEditable: true },
+      },
+    },
+  },
+  render: (props) => <FAQ {...props} />,
+};
+
+export default faqEditor;

components/faq/faq.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { Plus, Minus } from "lucide-react";
+import { Heading } from "@/components/Heading";
+
+export type FAQProps = {
+  tagline: string;
+  heading: string;
+  subheading: string;
+  items: Array<{ question: string; answer: string }>;
+};
+
+export function FAQ({ tagline, heading, subheading, items }: FAQProps) {
+  const [open, setOpen] = useState<number | null>(0);
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <div className="container mx-auto max-w-3xl px-6">
+        <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) => {
+            const isOpen = open === i;
+            return (
+              <div key={i}>
+                <button
+                  onClick={() => setOpen(isOpen ? null : i)}
+                  className="flex w-full items-center justify-between py-6 text-left"
+                >
+                  <span className="text-base font-medium tracking-tight md:text-lg">
+                    {item.question}
+                  </span>
+                  {isOpen ? (
+                    <Minus size={18} strokeWidth={1.5} className="flex-shrink-0" />
+                  ) : (
+                    <Plus size={18} strokeWidth={1.5} className="flex-shrink-0" />
+                  )}
+                </button>
+                {isOpen ? (
+                  <p className="pb-6 pr-8 text-sm leading-relaxed text-muted-foreground md:text-base">
+                    {item.answer}
+                  </p>
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

components/features/features.editor.tsx

@@ -0,0 +1,56 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Sparkles } from "lucide-react";
+import { Features, type FeaturesProps } from "@/components/features/features";
+
+const featuresEditor: ComponentConfig<FeaturesProps> = {
+  label: "Features",
+  icon: <Sparkles size={16} />,
+  category: "content",
+  defaultProps: {
+    tagline: "Why us",
+    heading: "Built with intention",
+    subheading: "A small set of values that shape every piece we make.",
+    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 — and nothing gets discounted into the bin.",
+      },
+      {
+        title: "Built to last",
+        body: "Reinforced seams, double-stitched edges, and finishes that age into something better.",
+      },
+    ],
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    heading: { label: "Heading", type: "text", contentEditable: true },
+    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+    columns: {
+      label: "Columns",
+      type: "select",
+      options: [
+        { label: "2 columns", value: "2" },
+        { label: "3 columns", value: "3" },
+        { label: "4 columns", value: "4" },
+      ],
+    },
+    items: {
+      label: "Items",
+      type: "array",
+      defaultItemProps: { title: "Feature", body: "Description." },
+      getItemSummary: (it) => it?.title || "Feature",
+      arrayFields: {
+        title: { label: "Title", type: "text", contentEditable: true },
+        body: { label: "Body", type: "textarea", contentEditable: true },
+      },
+    },
+  },
+  render: (props) => <Features {...props} />,
+};
+
+export default featuresEditor;

components/features/features.tsx

@@ -0,0 +1,49 @@
+import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
+
+export type FeaturesProps = {
+  tagline: string;
+  heading: string;
+  subheading: string;
+  columns: "2" | "3" | "4";
+  items: Array<{ title: string; body: string }>;
+};
+
+const colClass: Record<FeaturesProps["columns"], string> = {
+  "2": "md:grid-cols-2",
+  "3": "md:grid-cols-3",
+  "4": "md:grid-cols-2 lg:grid-cols-4",
+};
+
+export function Features({ tagline, heading, subheading, columns, items }: FeaturesProps) {
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <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="flex flex-col gap-3">
+              <Typography variant="caption">
+                {String(i + 1).padStart(2, "0")}
+              </Typography>
+              <Typography variant="h5">{item.title}</Typography>
+              <Typography variant="body2" className="text-muted-foreground">
+                {item.body}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}

components/footer/footer.editor.tsx

@@ -0,0 +1,104 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { LayoutGrid } from "lucide-react";
+import { Footer, type FooterProps } from "@/components/footer/footer";
+
+const footerEditor: ComponentConfig<FooterProps> = {
+  label: "Footer",
+  icon: <LayoutGrid size={16} />,
+  category: "footer",
+  global: true,
+  defaultProps: {
+    brand: "Maison",
+    tagline:
+      "Considered essentials, made in small batches and built to last beyond the season.",
+    columns: [
+      {
+        title: "Shop",
+        links: [
+          { label: "All", href: "/collections" },
+          { label: "New", href: "/collections/new" },
+          { label: "Best sellers", href: "/collections/best" },
+        ],
+      },
+      {
+        title: "About",
+        links: [
+          { label: "Our story", href: "/about" },
+          { label: "Materials", href: "/materials" },
+          { label: "Journal", href: "/journal" },
+        ],
+      },
+      {
+        title: "Help",
+        links: [
+          { label: "Shipping", href: "/help/shipping" },
+          { label: "Returns", href: "/help/returns" },
+          { label: "Contact", href: "/contact" },
+        ],
+      },
+      {
+        title: "Legal",
+        links: [
+          { label: "Terms", href: "/terms" },
+          { label: "Privacy", href: "/privacy" },
+        ],
+      },
+    ],
+    social: [
+      { label: "Instagram", href: "#" },
+      { label: "Pinterest", href: "#" },
+      { label: "TikTok", href: "#" },
+    ],
+    showNewsletter: "yes",
+    newsletterHeading: "Stay in touch",
+    newsletterEndpoint: "",
+    copyright: "© 2026 Maison. All rights reserved.",
+  },
+  fields: {
+    brand: { label: "Brand", type: "text", contentEditable: true },
+    tagline: { label: "Tagline", type: "textarea", contentEditable: true },
+    columns: {
+      label: "Columns",
+      type: "array",
+      defaultItemProps: { title: "Column", links: [] },
+      getItemSummary: (it) => it?.title || "Column",
+      arrayFields: {
+        title: { label: "Title", type: "text", contentEditable: true },
+        links: {
+          label: "Links",
+          type: "array",
+          defaultItemProps: { label: "Link", href: "/" },
+          getItemSummary: (it) => it?.label || "Link",
+          arrayFields: {
+            label: { label: "Label", type: "text", contentEditable: true },
+            href: { label: "Link", type: "text" },
+          },
+        },
+      },
+    },
+    social: {
+      label: "Social links",
+      type: "array",
+      defaultItemProps: { label: "Instagram", href: "#" },
+      getItemSummary: (it) => it?.label || "Social",
+      arrayFields: {
+        label: { label: "Label", type: "text", contentEditable: true },
+        href: { label: "Link", type: "text" },
+      },
+    },
+    showNewsletter: {
+      label: "Newsletter form",
+      type: "radio",
+      options: [
+        { label: "Show", value: "yes" },
+        { label: "Hide", value: "no" },
+      ],
+    },
+    newsletterHeading: { label: "Newsletter heading", type: "text", contentEditable: true },
+    newsletterEndpoint: { label: "Newsletter endpoint", type: "text" },
+    copyright: { label: "Copyright", type: "text", contentEditable: true },
+  },
+  render: (props) => <Footer {...props} />,
+};
+
+export default footerEditor;

components/footer/footer.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import Link from "next/link";
+import { Typography } from "@/components/Typography";
+import { Container } from "@/components/layout/Container";
+
+export type FooterProps = {
+  brand: string;
+  tagline: string;
+  columns: Array<{
+    title: string;
+    links: Array<{ label: string; href: string }>;
+  }>;
+  social: Array<{ label: string; href: string }>;
+  showNewsletter: "yes" | "no";
+  newsletterHeading: string;
+  newsletterEndpoint: string;
+  copyright: string;
+};
+
+export function Footer({
+  brand,
+  tagline,
+  columns,
+  social,
+  showNewsletter,
+  newsletterHeading,
+  newsletterEndpoint,
+  copyright,
+}: FooterProps) {
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+    if (newsletterEndpoint) {
+      try {
+        await fetch(newsletterEndpoint, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email }),
+        });
+      } catch {}
+    }
+    setSubmitted(true);
+  };
+
+  return (
+    <footer className="border-t border-border bg-background">
+      <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">
+              {brand}
+            </Typography>
+            {tagline ? (
+              <Typography variant="body2" className="mt-3 max-w-sm text-muted-foreground">
+                {tagline}
+              </Typography>
+            ) : null}
+
+            {showNewsletter === "yes" ? (
+              <form onSubmit={submit} className="mt-8 max-w-sm">
+                <p className="text-sm font-medium">{newsletterHeading}</p>
+                {submitted ? (
+                  <p className="mt-3 text-sm text-muted-foreground">
+                    Thanks — we'll be in touch.
+                  </p>
+                ) : (
+                  <div className="mt-3 flex border-b border-border focus-within:border-foreground">
+                    <input
+                      type="email"
+                      required
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="you@example.com"
+                      className="flex-1 bg-transparent py-2 text-sm placeholder:text-muted-foreground focus:outline-none"
+                    />
+                    <button
+                      type="submit"
+                      className="ml-3 text-sm font-medium tracking-wide hover:opacity-70"
+                    >
+                      Subscribe →
+                    </button>
+                  </div>
+                )}
+              </form>
+            ) : null}
+          </div>
+
+          <div className="grid grid-cols-2 gap-8 md:col-span-8 md:grid-cols-4">
+            {columns.map((col, i) => (
+              <div key={i}>
+                <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                  {col.title}
+                </p>
+                <ul className="mt-4 space-y-2.5">
+                  {col.links.map((l, j) => (
+                    <li key={j}>
+                      <Link
+                        href={l.href}
+                        className="text-sm text-foreground/80 hover:text-foreground"
+                      >
+                        {l.label}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-16 flex flex-col items-start justify-between gap-4 border-t border-border pt-8 md:flex-row md:items-center">
+          <p className="text-xs text-muted-foreground">{copyright}</p>
+          <div className="flex flex-wrap gap-x-5 gap-y-2">
+            {social.map((s, i) => (
+              <a
+                key={i}
+                href={s.href}
+                className="text-xs uppercase tracking-[0.18em] text-foreground/70 hover:text-foreground"
+              >
+                {s.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </footer>
+  );
+}

components/hero/hero.editor.tsx

@@ -0,0 +1,82 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { LayoutTemplate } from "lucide-react";
+import { Hero, type HeroProps } from "@/components/hero/hero";
+
+const heroEditor: ComponentConfig<HeroProps> = {
+  label: "Hero",
+  icon: <LayoutTemplate size={16} />,
+  category: "hero",
+  defaultProps: {
+    tagline: "Spring 2026",
+    heading: "Made for the way you move",
+    subheading:
+      "A considered wardrobe of essentials, cut from natural fibers and designed to last.",
+    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",
+    height: "lg",
+    tone: "dark",
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    heading: { label: "Heading", type: "textarea", contentEditable: true },
+    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+    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" },
+          ],
+        },
+      },
+      defaultItemProps: {
+        label: "Button",
+        href: "/",
+        variant: "primary",
+      },
+      getItemSummary: (item) => item?.label || "Button",
+    },
+    imageUrl: { label: "Background image", type: "image" },
+    align: {
+      label: "Alignment",
+      type: "radio",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Center", value: "center" },
+      ],
+    },
+    height: {
+      label: "Height",
+      type: "select",
+      options: [
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" },
+        { label: "Full", value: "full" },
+      ],
+    },
+    tone: {
+      label: "Tone",
+      type: "radio",
+      options: [
+        { label: "Light", value: "light" },
+        { label: "Dark", value: "dark" },
+      ],
+    },
+  },
+  render: (props) => <Hero {...props} />,
+};
+
+export default heroEditor;

components/hero/hero.tsx

@@ -0,0 +1,141 @@
+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;
+  buttons: HeroButton[];
+  imageUrl: string;
+  align: "left" | "center";
+  height: "md" | "lg" | "full";
+  tone: "light" | "dark";
+};
+
+const heightClass: Record<HeroProps["height"], string> = {
+  md: "min-h-[60vh]",
+  lg: "min-h-[80vh]",
+  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,
+  buttons,
+  imageUrl,
+  align,
+  height,
+  tone,
+}: HeroProps) {
+  const isDark = tone === "dark";
+  const visibleButtons = (buttons ?? []).filter((b) => b?.label);
+
+  return (
+    <section
+      className={cn(
+        "relative flex w-full items-end overflow-hidden isolate",
+        heightClass[height],
+      )}
+    >
+      {imageUrl ? (
+        <img
+          src={imageUrl}
+          alt=""
+          className="absolute inset-0 z-0 h-full w-full object-cover"
+        />
+      ) : null}
+      <div
+        className="absolute inset-0 z-[1]"
+        style={{
+          background: isDark
+            ? "linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%)"
+            : "linear-gradient(180deg, rgba(255,255,255,0.0) 30%, rgba(255,255,255,0.85) 100%)",
+        }}
+      />
+
+      <div
+        className={cn(
+          "container relative z-[2] mx-auto flex max-w-7xl flex-col px-6 py-20 md:py-28",
+          align === "center" ? "items-center text-center" : "items-start",
+          isDark ? "text-white" : "text-foreground",
+        )}
+      >
+        {tagline ? (
+          <Typography
+            variant="caption"
+            className={cn(
+              "mb-5",
+              isDark ? "text-white/80" : "text-foreground/70",
+            )}
+          >
+            {tagline}
+          </Typography>
+        ) : null}
+        <Typography variant="h1" className="max-w-3xl">
+          {heading}
+        </Typography>
+        {subheading ? (
+          <Typography
+            variant="subtitle1"
+            className={cn(
+              "mt-6 max-w-xl",
+              isDark ? "text-white/80" : "text-foreground/70",
+            )}
+          >
+            {subheading}
+          </Typography>
+        ) : null}
+
+        {visibleButtons.length > 0 ? (
+          <div
+            className={cn(
+              "mt-10 flex flex-wrap gap-3",
+              align === "center" && "justify-center",
+            )}
+          >
+            {visibleButtons.map((b, i) => (
+              <Link
+                key={`${b.href}-${b.label}-${i}`}
+                href={b.href || "#"}
+                className={buttonClass(b.variant, isDark)}
+              >
+                {b.label}
+              </Link>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}

components/landing/banner.editor.tsx

@@ -0,0 +1,32 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Megaphone } from "lucide-react";
+import { Banner, type BannerProps } from "@/components/landing/banner";
+
+const bannerEditor: ComponentConfig<BannerProps> = {
+  label: "Announcement bar",
+  icon: <Megaphone size={16} />,
+  category: "hero",
+  defaultProps: {
+    text: "Free shipping on orders over $150",
+    ctaLabel: "Shop new",
+    ctaHref: "/collections/new",
+    tone: "default",
+  },
+  fields: {
+    text: { label: "Text", type: "text", contentEditable: true },
+    ctaLabel: { label: "CTA label", type: "text", contentEditable: true },
+    ctaHref: { label: "CTA link", type: "text" },
+    tone: {
+      label: "Tone",
+      type: "select",
+      options: [
+        { label: "Default (dark)", value: "default" },
+        { label: "Inverse (light)", value: "inverse" },
+        { label: "Muted", value: "muted" },
+      ],
+    },
+  },
+  render: (props) => <Banner {...props} />,
+};
+
+export default bannerEditor;

components/landing/banner.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+export type BannerProps = {
+  text: string;
+  ctaLabel: string;
+  ctaHref: string;
+  tone: "default" | "inverse" | "muted";
+};
+
+export function Banner({ text, ctaLabel, ctaHref, tone }: BannerProps) {
+  const toneClass: Record<BannerProps["tone"], string> = {
+    default: "bg-foreground text-background",
+    inverse: "bg-background text-foreground border-y border-border",
+    muted: "bg-muted text-foreground border-y border-border",
+  };
+  return (
+    <div className={cn("w-full py-2 text-center text-xs tracking-[0.18em] uppercase", toneClass[tone])}>
+      <div className="container mx-auto flex flex-col items-center justify-center gap-2 px-6 sm:flex-row">
+        <span>{text}</span>
+        {ctaLabel ? (
+          <Link
+            href={ctaHref || "#"}
+            className="underline-offset-4 hover:underline"
+          >
+            {ctaLabel} →
+          </Link>
+        ) : null}
+      </div>
+    </div>
+  );
+}

components/landing/image-gallery.editor.tsx

@@ -0,0 +1,50 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Images } from "lucide-react";
+import { ImageGallery, type ImageGalleryProps } from "@/components/landing/image-gallery";
+
+const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
+  label: "Image gallery",
+  icon: <Images size={16} />,
+  category: "content",
+  defaultProps: {
+    tagline: "Lookbook",
+    heading: "Spring in the studio",
+    subheading: "",
+    layout: "editorial",
+    items: [
+      { src: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=1600&q=80", alt: "" },
+      { src: "https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1200&q=80", alt: "" },
+      { src: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1200&q=80", alt: "" },
+      { src: "https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=1200&q=80", alt: "" },
+      { src: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=1200&q=80", alt: "" },
+    ],
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    heading: { label: "Heading", type: "text", contentEditable: true },
+    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+    layout: {
+      label: "Layout",
+      type: "select",
+      options: [
+        { label: "Grid", value: "grid" },
+        { label: "Masonry", value: "masonry" },
+        { label: "Editorial (mosaic)", value: "editorial" },
+      ],
+    },
+    items: {
+      label: "Images",
+      type: "array",
+      defaultItemProps: { src: "", alt: "" },
+      getItemSummary: (it) => it?.caption || "Image",
+      arrayFields: {
+        src: { label: "Image", type: "image" },
+        alt: { label: "Alt text", type: "text", contentEditable: true },
+        caption: { label: "Caption", type: "text", contentEditable: true },
+      },
+    },
+  },
+  render: (props) => <ImageGallery {...props} />,
+};
+
+export default imageGalleryEditor;

components/landing/image-gallery.tsx

@@ -0,0 +1,87 @@
+import { cn } from "@/lib/utils";
+import { Container } from "@/components/layout/Container";
+import { Heading } from "@/components/Heading";
+
+export type ImageGalleryProps = {
+  tagline: string;
+  heading: string;
+  subheading: string;
+  layout: "grid" | "masonry" | "editorial";
+  items: Array<{ src: string; alt: string; caption?: string }>;
+};
+
+export function ImageGallery({ tagline, heading, subheading, layout, items }: ImageGalleryProps) {
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <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">
+            {items.map((it, i) => (
+              <figure key={i} className="mb-4 break-inside-avoid">
+                <img
+                  src={it.src}
+                  alt={it.alt}
+                  className="w-full rounded-md object-cover"
+                />
+                {it.caption ? (
+                  <figcaption className="mt-2 text-xs text-muted-foreground">
+                    {it.caption}
+                  </figcaption>
+                ) : null}
+              </figure>
+            ))}
+          </div>
+        ) : layout === "editorial" ? (
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-12">
+            {items.slice(0, 5).map((it, i) => (
+              <figure
+                key={i}
+                className={cn(
+                  "overflow-hidden rounded-md bg-muted",
+                  i === 0 && "md:col-span-7 md:row-span-2",
+                  i === 1 && "md:col-span-5",
+                  i === 2 && "md:col-span-5",
+                  i === 3 && "md:col-span-6",
+                  i === 4 && "md:col-span-6",
+                )}
+              >
+                <img
+                  src={it.src}
+                  alt={it.alt}
+                  className="h-full w-full object-cover"
+                />
+              </figure>
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {items.map((it, i) => (
+              <figure key={i}>
+                <img
+                  src={it.src}
+                  alt={it.alt}
+                  className="aspect-[4/5] w-full rounded-md object-cover"
+                />
+                {it.caption ? (
+                  <figcaption className="mt-2 text-xs text-muted-foreground">
+                    {it.caption}
+                  </figcaption>
+                ) : null}
+              </figure>
+            ))}
+          </div>
+        )}
+      </Container>
+    </section>
+  );
+}

components/landing/newsletter-cta.editor.tsx

@@ -0,0 +1,80 @@
+import { ComponentConfig, Fields } from "@reacteditor/core";
+import { Mail } from "lucide-react";
+import { NewsletterCta, type NewsletterCtaProps } from "@/components/landing/newsletter-cta";
+
+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", type: "image" },
+  layout: {
+    label: "Layout",
+    type: "radio",
+    options: [
+      { label: "Split (image + form)", value: "split" },
+      { label: "Stacked (centered)", value: "stacked" },
+    ],
+  },
+};
+
+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} />,
+};
+
+export default newsletterCtaEditor;

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

@@ -0,0 +1,44 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Award } from "lucide-react";
+import { Logos, type LogosProps } from "@/components/logos/logos";
+
+const logosEditor: ComponentConfig<LogosProps> = {
+  label: "Press / Logos",
+  icon: <Award size={16} />,
+  category: "content",
+  defaultProps: {
+    tagline: "As seen in",
+    layout: "row",
+    items: [
+      { src: "https://logo.clearbit.com/vogue.com", alt: "Vogue" },
+      { src: "https://logo.clearbit.com/highsnobiety.com", alt: "Highsnobiety" },
+      { src: "https://logo.clearbit.com/gq.com", alt: "GQ" },
+      { src: "https://logo.clearbit.com/dezeen.com", alt: "Dezeen" },
+      { src: "https://logo.clearbit.com/wallpaper.com", alt: "Wallpaper*" },
+    ],
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    layout: {
+      label: "Layout",
+      type: "radio",
+      options: [
+        { label: "Row", value: "row" },
+        { label: "Marquee", value: "marquee" },
+      ],
+    },
+    items: {
+      label: "Logos",
+      type: "array",
+      defaultItemProps: { src: "", alt: "" },
+      getItemSummary: (it) => it?.alt || "Logo",
+      arrayFields: {
+        src: { label: "Image", type: "image" },
+        alt: { label: "Alt text", type: "text", contentEditable: true },
+      },
+    },
+  },
+  render: (props) => <Logos {...props} />,
+};
+
+export default logosEditor;

components/logos/logos.tsx

@@ -0,0 +1,47 @@
+import { Container } from "@/components/layout/Container";
+import { Typography } from "@/components/Typography";
+
+export type LogosProps = {
+  tagline: string;
+  items: Array<{ src: string; alt: string }>;
+  layout: "row" | "marquee";
+};
+
+export function Logos({ tagline, items, layout }: LogosProps) {
+  return (
+    <section className="border-y border-border bg-muted/40 py-12">
+      <Container>
+        {tagline ? (
+          <Typography variant="caption" className="mb-8 text-center">
+            {tagline}
+          </Typography>
+        ) : null}
+        {layout === "marquee" ? (
+          <div className="overflow-hidden">
+            <div className="flex animate-[marquee_30s_linear_infinite] gap-16 [--gap:4rem]">
+              {[...items, ...items].map((it, i) => (
+                <img
+                  key={i}
+                  src={it.src}
+                  alt={it.alt}
+                  className="h-7 w-auto opacity-60 grayscale"
+                />
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
+            {items.map((it, i) => (
+              <img
+                key={i}
+                src={it.src}
+                alt={it.alt}
+                className="h-7 w-auto opacity-60 grayscale"
+              />
+            ))}
+          </div>
+        )}
+      </Container>
+    </section>
+  );
+}

components/navigation/navigation.editor.tsx

@@ -0,0 +1,74 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Menu as MenuIcon } from "lucide-react";
+import { Navigation, type NavigationProps } from "@/components/navigation/navigation";
+
+const navigationEditor: ComponentConfig<NavigationProps> = {
+  label: "Navigation",
+  icon: <MenuIcon size={16} />,
+  category: "navigation",
+  global: true,
+  defaultProps: {
+    brand: "Maison",
+    logo: "",
+    links: [
+      { 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",
+  },
+  fields: {
+    logo: { label: "Logo", type: "image" },
+    brand: { label: "Logo Alt", type: "text", contentEditable: true },
+    links: {
+      label: "Links",
+      type: "array",
+      defaultItemProps: { label: "Link", href: "/" },
+      getItemSummary: (it) => it?.label || "Link",
+      arrayFields: {
+        label: { label: "Label", type: "text", contentEditable: true },
+        href: { label: "Link", type: "text" },
+      },
+    },
+    showSearch: {
+      label: "Search icon",
+      type: "radio",
+      options: [
+        { label: "Show", value: "yes" },
+        { label: "Hide", value: "no" },
+      ],
+    },
+    showCart: {
+      label: "Cart icon",
+      type: "radio",
+      options: [
+        { label: "Show", value: "yes" },
+        { label: "Hide", value: "no" },
+      ],
+    },
+    sticky: {
+      label: "Position",
+      type: "radio",
+      options: [
+        { label: "Sticky", value: "yes" },
+        { label: "Static", value: "no" },
+      ],
+    },
+    tone: {
+      label: "Tone",
+      type: "select",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Muted", value: "muted" },
+        { label: "Inverse (dark)", value: "inverse" },
+      ],
+    },
+  },
+  render: (props) => <Navigation {...props} />,
+};
+
+export default navigationEditor;

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

@@ -0,0 +1,58 @@
+import { ComponentConfig } from "@reacteditor/core";
+import { Quote } from "lucide-react";
+import { Testimonials, type TestimonialsProps } from "@/components/testimonials/testimonials";
+
+const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
+  label: "Testimonials",
+  icon: <Quote size={16} />,
+  category: "content",
+  defaultProps: {
+    tagline: "Reviews",
+    heading: "What our customers say",
+    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:
+          "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:
+          "The shipping was thoughtful, the packaging was minimal, and the trousers fit on the first try. Rare combination.",
+        author: "Ines P.",
+        role: "Paris",
+        avatar:
+          "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=200&q=80",
+      },
+    ],
+  },
+  fields: {
+    tagline: { label: "Tagline", type: "text", contentEditable: true },
+    heading: { label: "Heading", type: "text", contentEditable: true },
+    items: {
+      label: "Items",
+      type: "array",
+      defaultItemProps: { quote: "", author: "", role: "" },
+      getItemSummary: (it) => it?.author || "Testimonial",
+      arrayFields: {
+        quote: { label: "Quote", type: "textarea", contentEditable: true },
+        author: { label: "Author", type: "text", contentEditable: true },
+        role: { label: "Role", type: "text", contentEditable: true },
+        avatar: { label: "Avatar", type: "image" },
+      },
+    },
+  },
+  render: (props) => <Testimonials {...props} />,
+};
+
+export default testimonialsEditor;

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

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <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({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+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",
+}
+
+function Alert({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & { variant?: AlertVariant }) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(baseClasses, variantClasses[variant], className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

components/ui/badge.tsx

@@ -0,0 +1,48 @@
+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";
+
+const badgeVariants = cva(
+  "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:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

components/ui/breadcrumb.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+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',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement, {
+      className: cn(
+        'hover:text-foreground transition-colors',
+        children.props.className,
+        className
+      ),
+      ...props,
+    });
+  }
+
+  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)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {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'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <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 {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

components/ui/button-group.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+
+// 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 = 'horizontal',
+  ...props
+}: ButtonGroupProps) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(getButtonGroupVariants(orientation), className)}
+      {...props}
+    />
+  );
+}
+
+interface ButtonGroupTextProps extends React.ComponentProps<'div'> {
+  asChild?: boolean;
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: 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 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',
+  ...props
+}: ButtonGroupSeparatorProps) {
+  const separatorClasses =
+    orientation === 'vertical' ? 'w-px h-auto' : 'h-px w-auto';
+
+  return (
+    <div
+      data-slot="button-group-separator"
+      className={cn(
+        'bg-border relative !m-0 self-stretch',
+        separatorClasses,
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };
+export type {
+  ButtonGroupProps,
+  ButtonGroupTextProps,
+  ButtonGroupSeparatorProps,
+};

components/ui/button.tsx

@@ -0,0 +1,58 @@
+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";
+
+const buttonVariants = cva(
+  "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 shadow-sm hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "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",
+        sm: "h-8 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+
+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 border-border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@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 tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

components/ui/carousel.tsx

@@ -0,0 +1,245 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from './button';
+
+interface CarouselContextType {
+  currentIndex: number;
+  totalItems: number;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  orientation: 'horizontal' | 'vertical';
+}
+
+const CarouselContext = createContext<CarouselContextType | undefined>(
+  undefined
+);
+
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error('Carousel components must be used within a Carousel');
+  }
+  return context;
+}
+
+interface CarouselProps {
+  children: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+}
+
+function Carousel({
+  children,
+  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 canScrollPrev = currentIndex > 0;
+  const canScrollNext = currentIndex < itemCount - 1;
+
+  const scrollPrev = useCallback(() => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  const scrollNext = useCallback(() => {
+    setCurrentIndex((prev) => Math.min(itemCount - 1, prev + 1));
+  }, [itemCount]);
+
+  useEffect(() => {
+    if (!autoPlay) return;
+
+    autoPlayTimerRef.current = setInterval(() => {
+      setCurrentIndex((prev) => {
+        if (prev >= itemCount - 1) {
+          return 0;
+        }
+        return prev + 1;
+      });
+    }, autoPlayInterval);
+
+    return () => {
+      if (autoPlayTimerRef.current) {
+        clearInterval(autoPlayTimerRef.current);
+      }
+    };
+  }, [autoPlay, autoPlayInterval, itemCount]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        currentIndex,
+        totalItems: itemCount,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        orientation,
+      }}
+    >
+      <div
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+interface CarouselContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function CarouselContent({ className, children }: CarouselContentProps) {
+  const { currentIndex, orientation } = useCarousel();
+
+  return (
+    <div
+      className={cn('overflow-hidden', className)}
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex transition-transform duration-300 ease-out',
+          orientation === 'horizontal' ? 'flex-row' : 'flex-col'
+        )}
+        style={{
+          transform:
+            orientation === 'horizontal'
+              ? `translateX(-${currentIndex * 100}%)`
+              : `translateY(-${currentIndex * 100}%)`,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+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', className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface CarouselPreviousProps {
+  className?: string;
+}
+
+function CarouselPrevious({ className }: CarouselPreviousProps) {
+  const { scrollPrev, canScrollPrev, orientation } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant="outline"
+      onClick={scrollPrev}
+      disabled={!canScrollPrev}
+      className={cn(
+        '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
+      )}
+      aria-label="Previous slide"
+    >
+      <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>
+  );
+}
+
+interface CarouselNextProps {
+  className?: string;
+}
+
+function CarouselNext({ className }: CarouselNextProps) {
+  const { scrollNext, canScrollNext, orientation } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant="outline"
+      onClick={scrollNext}
+      disabled={!canScrollNext}
+      className={cn(
+        '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
+      )}
+      aria-label="Next slide"
+    >
+      <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 {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+};

components/ui/dialog.tsx

@@ -0,0 +1,266 @@
+import React, { useState, useCallback, useContext, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { clsx } from 'clsx';
+
+interface DialogContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DialogContext = createContext<DialogContextType | undefined>(undefined);
+
+function useDialog() {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog components must be used within a Dialog');
+  }
+  return context;
+}
+
+interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+function Dialog({ open: controlledOpen, onOpenChange, children }: DialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  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}
+    />
+  );
+}
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  showCloseButton?: boolean;
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogContentProps) {
+  const { open } = useDialog();
+
+  return (
+    <DialogPortal>
+      <AnimatePresence>
+        {open && (
+          <>
+            <DialogOverlay />
+            <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}
+              {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>
+  );
+}
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={clsx(
+        'flex flex-col gap-2 text-center sm:text-left',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={clsx(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2
+      data-slot="dialog-title"
+      className={clsx('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      data-slot="dialog-description"
+      className={clsx('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  AnimatePresence,
+};

components/ui/empty.tsx

@@ -0,0 +1,105 @@
+import React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

components/ui/input-otp.tsx

@@ -0,0 +1,86 @@
+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;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}) {
+  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 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}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <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 };

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "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
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/item.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// 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)}
+      {...props}
+    />
+  );
+}
+
+interface ItemSeparatorProps extends React.ComponentProps<'div'> {}
+
+function ItemSeparator({ className, ...props }: ItemSeparatorProps) {
+  return (
+    <div
+      data-slot="item-separator"
+      className={cn('my-0 border-t border-border', className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemProps extends React.ComponentProps<'div'> {
+  variant?: 'default' | 'outline' | 'muted';
+  size?: 'default' | 'sm';
+  asChild?: boolean;
+}
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: ItemProps) {
+  const Comp = asChild ? 'div' : 'div';
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(getItemVariants(variant, size), className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemMediaProps extends React.ComponentProps<'div'> {
+  variant?: 'default' | 'icon' | 'image';
+}
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: ItemMediaProps) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(getItemMediaVariants(variant), className)}
+      {...props}
+    />
+  );
+}
+
+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',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+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',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+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',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+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)}
+      {...props}
+    />
+  );
+}
+
+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',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+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',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+};

components/ui/loader.tsx

@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+interface LoaderIconProps {
+  size?: number;
+}
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    style={{ color: "currentcolor" }}
+    viewBox="0 0 16 16"
+    width={size}
+  >
+    <title>Loader</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 16V12"
+        opacity="0.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 1.52783L5.64887 4.7639"
+        opacity="0.9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 1.52783L10.3511 4.7639"
+        opacity="0.1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 14.472L10.3511 11.236"
+        opacity="0.4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 14.472L5.64887 11.236"
+        opacity="0.6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 5.52783L11.8043 6.7639"
+        opacity="0.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 10.472L4.19583 9.23598"
+        opacity="0.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 10.4722L11.8043 9.2361"
+        opacity="0.3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 5.52783L4.19583 6.7639"
+        opacity="0.8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect fill="white" height="16" width="16" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+  <div
+    className={cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    <LoaderIcon size={size} />
+  </div>
+);

components/ui/navigation-menu.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[active=true]:bg-accent/50 outline-none transition-[color,box-shadow]"
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

components/ui/pagination.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants, type Button } from "@/components/ui/button"
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">
+
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

components/ui/progress.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+interface ProgressProps extends React.ComponentProps<'div'> {
+  value?: number;
+  max?: number;
+}
+
+function Progress({
+  className,
+  value = 0,
+  max = 100,
+  ...props
+}: ProgressProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  return (
+    <div
+      data-slot="progress"
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className
+      )}
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      {...props}
+    >
+      <div
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - percentage}%)` }}
+      />
+    </div>
+  );
+}
+
+export { Progress };
+export type { ProgressProps };

components/ui/select.tsx

@@ -0,0 +1,287 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+} from 'react';
+import { cn } from '@/lib/utils';
+
+interface SelectContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  value: string;
+  setValue: (value: string) => void;
+}
+
+const SelectContext = createContext<SelectContextType | undefined>(undefined);
+
+function useSelect() {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error('Select components must be used within a Select');
+  }
+  return context;
+}
+
+interface SelectProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+}
+
+function Select({
+  value: controlledValue,
+  onValueChange,
+  children,
+}: SelectProps) {
+  const [internalValue, setInternalValue] = useState('');
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+      setOpen(false);
+    },
+    [isControlled, onValueChange]
+  );
+
+  // Handle clicking outside to close the menu
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [open]);
+
+  return (
+    <SelectContext.Provider
+      value={{ open, setOpen, value, setValue: handleValueChange }}
+    >
+      <div ref={containerRef} data-slot="select" className="relative">
+        {children}
+      </div>
+    </SelectContext.Provider>
+  );
+}
+
+interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  placeholder?: string;
+}
+
+function SelectTrigger({
+  className,
+  children,
+  placeholder = 'Select...',
+  ...props
+}: SelectTriggerProps) {
+  const { open, setOpen, value } = useSelect();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <button
+      ref={triggerRef}
+      data-slot="select-trigger"
+      onClick={() => setOpen(!open)}
+      className={cn(
+        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*="text-"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full min-w-[10rem] items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
+        className
+      )}
+      {...props}
+    >
+      {children || <span className="text-muted-foreground">{placeholder}</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={cn(
+          'size-4 opacity-50 transition-transform',
+          open && 'rotate-180'
+        )}
+      >
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </button>
+  );
+}
+
+interface SelectValueProps {
+  children?: React.ReactNode;
+  placeholder?: string;
+}
+
+function SelectValue({
+  children,
+  placeholder = 'Select...',
+}: SelectValueProps) {
+  const { value } = useSelect();
+
+  return (
+    <span data-slot="select-value">{children || value || placeholder}</span>
+  );
+}
+
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SelectContent({ className, children, ...props }: SelectContentProps) {
+  const { open } = useSelect();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={contentRef}
+      data-slot="select-content"
+      className={cn(
+        'bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border border-border shadow-md overflow-hidden top-full mt-2 left-0',
+        className
+      )}
+      {...props}
+    >
+      <div className="p-1 overflow-y-auto max-h-60">{children}</div>
+    </div>
+  );
+}
+
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+}
+
+function SelectItem({
+  value,
+  children,
+  disabled = false,
+  className,
+  ...props
+}: SelectItemProps) {
+  const { value: selectedValue, setValue } = useSelect();
+  const isSelected = selectedValue === value;
+
+  return (
+    <div
+      data-slot="select-item"
+      onClick={() => !disabled && setValue(value)}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*="text-"])]:text-muted-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 transition-colors',
+        !disabled &&
+          'hover:bg-accent hover:text-accent-foreground cursor-pointer',
+        disabled && 'pointer-events-none opacity-50',
+        isSelected && 'bg-accent text-accent-foreground',
+        className
+      )}
+      {...props}
+    >
+      {isSelected && (
+        <span className="absolute right-2 flex size-3.5 items-center justify-center">
+          <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"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </span>
+      )}
+      {children}
+    </div>
+  );
+}
+
+interface SelectGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SelectGroup({ className, children, ...props }: SelectGroupProps) {
+  return (
+    <div
+      data-slot="select-group"
+      className={cn('overflow-hidden', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SelectLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SelectLabel({ className, children, ...props }: SelectLabelProps) {
+  return (
+    <div
+      data-slot="select-label"
+      className={cn(
+        'text-muted-foreground px-2 py-1.5 text-xs font-semibold',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SelectSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
+  return (
+    <div
+      data-slot="select-separator"
+      className={cn(
+        'bg-border pointer-events-none -mx-1 my-1 h-px',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+};

components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

components/ui/sheet.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-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 SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { toast } from 'sonner';
+
+import Button from '@/components/ui/button';
+
+export function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast('Event has been created', {
+          description: 'Sunday, December 03, 2023 at 9:00 AM',
+          action: {
+            label: 'Undo',
+            onClick: () => console.log('Undo'),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  );
+}

components/ui/spinner.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SpinnerProps extends React.ComponentProps<'svg'> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const sizeClasses = {
+  sm: 'size-3',
+  md: 'size-4',
+  lg: 'size-6',
+  xl: 'size-8',
+};
+
+function Spinner({ className, size = 'md', ...props }: SpinnerProps) {
+  return (
+    <svg
+      role="status"
+      aria-label="Loading"
+      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={cn('animate-spin', sizeClasses[size], className)}
+      {...props}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+export { Spinner };
+export type { SpinnerProps };

components/ui/switch.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SwitchProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, checked, onCheckedChange, disabled, ...props }, ref) => {
+    const [isChecked, setIsChecked] = React.useState(checked ?? false);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newChecked = e.target.checked;
+      setIsChecked(newChecked);
+      onCheckedChange?.(newChecked);
+      props.onChange?.(e);
+    };
+
+    React.useEffect(() => {
+      if (checked !== undefined) {
+        setIsChecked(checked);
+      }
+    }, [checked]);
+
+    return (
+      <div className="relative inline-flex">
+        <input
+          ref={ref}
+          type="checkbox"
+          checked={isChecked}
+          onChange={handleChange}
+          disabled={disabled}
+          className="sr-only"
+          {...props}
+        />
+        <div
+          data-slot="switch"
+          className={cn(
+            'inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px]',
+            isChecked
+              ? 'bg-primary focus-visible:ring-ring/50 focus-visible:border-ring'
+              : 'bg-input dark:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring',
+            disabled && 'cursor-not-allowed opacity-50',
+            className
+          )}
+          onClick={() => {
+            if (!disabled) {
+              setIsChecked(!isChecked);
+              onCheckedChange?.(!isChecked);
+            }
+          }}
+        >
+          <div
+            data-slot="switch-thumb"
+            className={cn(
+              'bg-background dark:bg-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform',
+              isChecked
+                ? 'translate-x-[calc(100%-2px)] dark:bg-primary-foreground'
+                : 'translate-x-0'
+            )}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';
+
+export { Switch };

components/ui/table.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto rounded-md border border-border"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b border-border', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t border-border font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground bg-muted/30 h-10 px-4 py-2 text-left align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-4 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }