update product details

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

app/_components/editor-shell.tsx

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

app/collections/[handle]/page.tsx

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

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

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

app/editor/page.tsx

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

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

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

app/editor/search/page.tsx

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

app/globals.css

@@ -32,7 +32,6 @@
   --radius-md: calc(var(--radius) * 0.75);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) * 1.5);
-  --radius-button: var(--button-radius, var(--radius));
 
   --animate-marquee: marquee var(--duration) infinite linear;
   --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
@@ -103,9 +102,16 @@
   --sidebar-ring: oklch(0.708 0 0);
 }
 
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: var(--border);
+}
+
 @layer base {
-  * { border-color: var(--border);
-    @apply border-border outline-ring/50; }
+  * { @apply outline-ring/50; }
   html, body { background-color: var(--background); color: var(--foreground); }
   body {
     font-family: var(--font-body), "Apple Color Emoji", "Segoe UI Emoji";

app/layout.tsx

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

app/page.tsx

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

app/products/[handle]/page.tsx

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

app/providers.tsx

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

app/search/page.tsx

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

components.json

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

components/Heading.tsx

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

components/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useRef } from "react";
 
 export type ThemeProps = {
   headerFont?: string;
+  headerFontWeight?: string;
   bodyFont?: string;
   primaryColor?: string;
   primaryForegroundColor?: string;
@@ -14,9 +15,8 @@ export type ThemeProps = {
   mutedForegroundColor?: string;
   borderColor?: string;
   radius?: "none" | "sm" | "md" | "lg" | "xl";
-  buttonRadius?: "none" | "sm" | "md" | "lg" | "xl";
   shadow?: "none" | "sm" | "md" | "lg" | "xl";
-  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "full";
 };
 
 const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
@@ -27,12 +27,12 @@ const radiusMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
   xl: "1rem",
 };
 
-const buttonRadiusMap: Record<NonNullable<ThemeProps["buttonRadius"]>, 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> = {
@@ -43,19 +43,40 @@ const shadowMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
   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): string | null {
-  const fonts = [headerFont, bodyFont].filter(
-    (f): f is string => !!f && f !== "system-ui"
-  );
-  if (fonts.length === 0) return null;
-  const families = Array.from(new Set(fonts))
-    .map((f) => `family=${encodeURIComponent(f)}:wght@400;500;600;700`)
-    .join("&");
-  return `https://fonts.googleapis.com/css2?${families}&display=swap`;
+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,
@@ -67,8 +88,8 @@ export function ThemeProvider({
   mutedForegroundColor,
   borderColor,
   radius,
-  buttonRadius,
   shadow,
+  maxWidth,
   children,
 }: ThemeProps & { children?: React.ReactNode }) {
   // Recompute CSS-variable map only when a relevant prop changes.
@@ -84,13 +105,15 @@ export function ThemeProvider({
     if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
     if (borderColor) vars["--border"] = borderColor;
     if (radius) vars["--radius"] = radiusMap[radius];
-    if (buttonRadius) vars["--button-radius"] = buttonRadiusMap[buttonRadius];
     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,
@@ -102,8 +125,8 @@ export function ThemeProvider({
     mutedForegroundColor,
     borderColor,
     radius,
-    buttonRadius,
     shadow,
+    maxWidth,
   ]);
 
   // Imperatively push every CSS var onto :root inside the host document
@@ -133,20 +156,28 @@ export function ThemeProvider({
   }, [cssVars]);
 
   const fontsHref = useMemo(
-    () => googleFontsHref(headerFont, bodyFont),
-    [headerFont, bodyFont],
+    () => googleFontsHref(headerFont, bodyFont, headerFontWeight),
+    [headerFont, bodyFont, headerFontWeight],
   );
 
   // Plain CSS rules — applied directly, no Tailwind CDN runtime needed.
-  // Tailwind preflight resets h1..h6 to font-family: inherit, which would
-  // make headings pick up the body font. We override that here using the
-  // `--font-header` CSS var ThemeProvider sets per-page.
+  // Body font is set on `body` once and inherited by descendants (span, a,
+  // p, li, etc. don't need explicit rules — applying one to `span/a` would
+  // break heading children, anchors inside headings, and any element using
+  // `as="span"` to render a heading variant).
+  // Form controls have user-agent defaults, so they need an explicit override.
+  // Tailwind preflight resets h1..h6 to font-family: inherit, so we restore
+  // the heading font + weight here using the per-page CSS vars.
   const css = `
-    body, p, span, a, li, button, input, textarea, select {
+    body {
       font-family: var(--font-body), system-ui, -apple-system, sans-serif;
     }
+    button, input, textarea, select {
+      font-family: inherit;
+    }
     h1, h2, h3, h4, h5, h6 {
       font-family: var(--font-header), system-ui, -apple-system, sans-serif;
+      font-weight: var(--font-weight-header, 600);
     }
   `;
 
@@ -157,6 +188,12 @@ export function ThemeProvider({
     @theme {
       --font-family-heading: var(--font-header), system-ui, -apple-system, sans-serif;
       --font-family-body: var(--font-body), system-ui, -apple-system, sans-serif;
+      --radius-sm: calc(var(--radius) * 0.5);
+      --radius-md: calc(var(--radius) * 0.75);
+      --radius-lg: var(--radius);
+      --radius-xl: calc(var(--radius) * 1.5);
+      --radius-2xl: calc(var(--radius) * 2);
+      --radius-3xl: calc(var(--radius) * 3);
     }
   `;
 

components/Typography.tsx

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

components/commerce/cart-drawer.tsx

@@ -98,10 +98,10 @@ const CartDrawer: React.FC = () => {
                 return (
                   <div
                     key={item.id}
-                    className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0"
+                    className="flex items-start space-x-4 pb-6 border-b border-border last:border-b-0"
                   >
                     {/* Product Image */}
-                    <div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
+                    <div className="w-20 h-20 bg-muted rounded-lg overflow-hidden flex-shrink-0">
                       {image ? (
                         <img
                           src={image}
@@ -109,7 +109,7 @@ const CartDrawer: React.FC = () => {
                           className="w-full h-full object-cover"
                         />
                       ) : (
-                        <div className="w-full h-full flex items-center justify-center text-gray-400">
+                        <div className="w-full h-full flex items-center justify-center text-muted-foreground">
                           <ImageIcon size={24} />
                         </div>
                       )}
@@ -117,13 +117,13 @@ const CartDrawer: React.FC = () => {
 
                     {/* Product Details */}
                     <div className="flex-1 min-w-0">
-                      <h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                      <h4 className="font-semibold text-foreground mb-1 line-clamp-2">
                         {item.merchandise.product.title}
                       </h4>
 
                       {/* Variant Info */}
                       {selectedOptions.length > 0 && (
-                        <div className="text-sm text-gray-500 mb-2">
+                        <div className="text-sm text-muted-foreground mb-2">
                           {selectedOptions.map((option, index) => (
                             <span key={option.name}>
                               {option.value}
@@ -137,7 +137,7 @@ const CartDrawer: React.FC = () => {
 
                       {/* Quantity Controls */}
                       <div className="flex items-center mt-3">
-                        <div className="flex items-center border border-gray-300 rounded-lg">
+                        <div className="flex items-center border border-border rounded-lg">
                           <Button
                             onClick={() =>
                               updateItemQuantity(item.id, item.quantity - 1)
@@ -169,7 +169,7 @@ const CartDrawer: React.FC = () => {
 
                     {/* Price */}
                     <div className="flex-shrink-0">
-                      <span className="text-sm font-semibold text-gray-900">
+                      <span className="text-sm font-semibold text-foreground">
                         ${parseFloat(item.merchandise.price.amount).toFixed(2)}
                       </span>
                     </div>
@@ -181,7 +181,7 @@ const CartDrawer: React.FC = () => {
                         variant="ghost"
                         size="icon-sm"
                         disabled={loading}
-                        className="text-gray-400 hover:text-gray-700"
+                        className="text-muted-foreground hover:text-foreground"
                       >
                         <X size={18} />
                       </Button>
@@ -204,7 +204,7 @@ const CartDrawer: React.FC = () => {
               </span>
             </div>
 
-            <div className="text-sm text-gray-500 mb-4">
+            <div className="text-sm text-muted-foreground mb-4">
               Shipping and taxes calculated at checkout
             </div>
 

components/commerce/collection-card.tsx

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

components/commerce/collection-detail.tsx

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

components/commerce/collection-grid.tsx

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

components/commerce/collection.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react';
-import { useParams } from 'react-router';
+import { useParams } from 'next/navigation';
 import { ChevronDown, SlidersHorizontal } from 'lucide-react';
 import type { ShopifyCollection } from '@reacteditor/field-shopify';
 import {
@@ -13,6 +13,7 @@ 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 };
@@ -357,7 +358,9 @@ function buildProductFilters(active: ActiveFilters): ProductFilter[] {
 
 export function CollectionView(props: CollectionProps) {
   const { collection: selected, showDescription, showCoverImage, customCoverImage, columns, limit, defaultSort } = props;
-  const { handle: paramHandle } = useParams<{ handle?: string }>();
+  const params = useParams();
+  const paramHandle =
+    typeof params?.handle === 'string' ? params.handle : undefined;
   const handle = selected?.handle ?? paramHandle ?? '';
 
   const [sort, setSort] = useState<CollectionSortKey>(defaultSort);
@@ -425,7 +428,7 @@ export function CollectionView(props: CollectionProps) {
   if (!selected && !paramHandle) {
     return (
       <section className="bg-background pb-24 pt-12 md:pt-20">
-        <div className="container mx-auto max-w-7xl px-6">
+        <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" />
@@ -435,14 +438,14 @@ export function CollectionView(props: CollectionProps) {
               <Skeleton key={i} className="aspect-[4/5] w-full" />
             ))}
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
 
   return (
     <section className="bg-background pb-24 pt-12 md:pt-20">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
         {/* Cover image */}
         {showCoverImage === 'yes' && collectionImage && (
           <div className="mb-10 overflow-hidden rounded-lg">
@@ -545,7 +548,7 @@ export function CollectionView(props: CollectionProps) {
             </button>
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/collections.tsx

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

components/commerce/featured-product.tsx

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

components/commerce/product-card.tsx

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

components/commerce/product-detail/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router';
+import Link from 'next/link';
 import { useProduct, type Product } from '@/hooks/use-shopify-products';
 import { useShopifyCart } from '@/hooks/use-shopify-cart';
 import ProductDetailGallery from './product-detail-gallery';
@@ -158,19 +158,19 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ handle: handleProp }) =>
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <div className="container mx-auto px-4 py-8">
         <Breadcrumb className="mb-6">
           <BreadcrumbList>
             <BreadcrumbItem>
               <BreadcrumbLink asChild>
-                <Link to="/">Home</Link>
+                <Link href="/">Home</Link>
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>
               <BreadcrumbLink asChild>
-                <Link to="/shop">Shop</Link>
+                <Link href="/shop">Shop</Link>
               </BreadcrumbLink>
             </BreadcrumbItem>
             <BreadcrumbSeparator />

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

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

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

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

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

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

components/commerce/product-details.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router";
+import { useParams } from "next/navigation";
 import type { ShopifyProduct } from "@reacteditor/field-shopify";
 import { useProduct } from "@/hooks/use-shopify-products";
 import { useShopifyCart } from "@/hooks/use-shopify-cart";
@@ -7,13 +7,16 @@ import { Typography } from "@/components/Typography";
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Loader } from "@/components/ui/loader";
+import { Container } from "@/components/layout/Container";
 
 export type ProductDetailsProps = {
   product: ShopifyProduct | null;
 };
 
 export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
-  const { handle: paramHandle } = useParams<{ handle?: string }>();
+  const params = useParams();
+  const paramHandle =
+    typeof params?.handle === "string" ? params.handle : undefined;
   const handle = selected?.handle ?? paramHandle ?? null;
   const { product, loading } = useProduct(handle);
   const cart = useShopifyCart();
@@ -31,7 +34,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
   if (!handle || loading || !product) {
     return (
       <section className="bg-background py-12 md:py-20">
-        <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+        <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
           <div className="flex flex-col gap-4">
             <Skeleton className="aspect-[4/5] w-full" />
             <div className="flex gap-3">
@@ -62,7 +65,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
               <Skeleton className="h-4 w-4/6" />
             </div>
           </div>
-        </div>
+        </Container>
       </section>
     );
   }
@@ -90,7 +93,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
 
   return (
     <section className="bg-background py-12 md:py-20">
-      <div className="container mx-auto grid max-w-7xl grid-cols-1 gap-10 px-6 md:grid-cols-2 md:gap-16">
+      <Container className="grid grid-cols-1 gap-10 md:grid-cols-2 md:gap-16">
         <div className="flex flex-col gap-4">
           <div className="aspect-[4/5] w-full overflow-hidden rounded-md bg-muted">
             {main ? (
@@ -214,7 +217,7 @@ export function ProductDetailsView({ product: selected }: ProductDetailsProps) {
             </div>
           ) : null}
         </div>
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/products-carousel.tsx

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

components/commerce/products-grid.tsx

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

components/commerce/products.tsx

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

components/commerce/recommended-products.tsx

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

components/commerce/search-products.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useSearchParams } from 'react-router';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { ChevronDown, SlidersHorizontal } from 'lucide-react';
 import { useShopifySearch, type SearchFilters, type SortOption } from '@/hooks/use-shopify-search';
 
@@ -8,6 +8,7 @@ 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 };
@@ -316,7 +317,9 @@ function Sidebar({
 // ─── Main component ──────────────────────────────────────────────────────────
 
 export function SearchProductsView(props: SearchProductsProps) {
-  const [searchParams, setSearchParams] = useSearchParams();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
   const initialQ = searchParams.get('q') ?? '';
 
   const [query, setQuery] = useState(initialQ);
@@ -385,9 +388,10 @@ export function SearchProductsView(props: SearchProductsProps) {
 
   // Sync ?q= param when query changes
   useEffect(() => {
-    const params = new URLSearchParams(searchParams);
+    const params = new URLSearchParams(searchParams.toString());
     if (query) params.set('q', query); else params.delete('q');
-    setSearchParams(params, { replace: true });
+    const qs = params.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
   }, [query]);
 
   const handleSearch = (e: React.FormEvent) => {
@@ -397,7 +401,7 @@ export function SearchProductsView(props: SearchProductsProps) {
 
   return (
     <section className="bg-background py-12 md:py-16">
-      <div className="container mx-auto max-w-7xl px-6">
+      <Container>
 
         {/* Page header */}
         <div className="mb-10">
@@ -523,7 +527,7 @@ export function SearchProductsView(props: SearchProductsProps) {
             </button>
           </div>
         )}
-      </div>
+      </Container>
     </section>
   );
 }

components/commerce/shop-footer.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-const Footer: React.FC = () => {
-  return (
-    <footer className="bg-black text-white py-12">
-      <div className="container mx-auto px-4 text-center">
-        <h3
-          className="text-2xl font-bold mb-4"
-          style={{fontFamily: 'Space Grotesk, sans-serif'}}
-        >
-          Store
-        </h3>
-        <p className="text-gray-400 mb-6">
-          Your premium shopping destination
-        </p>
-        <div className="mt-8 pt-8 border-t border-gray-800 text-gray-400">
-          <p>&copy; 2025 Store. All rights reserved.</p>
-        </div>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;

components/commerce/shop-header.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Link } from 'react-router';
-import { useShopifyCart } from '@/hooks/use-shopify-cart';
-import config from '@/lib/config.json';
-
-const CartIcon: React.FC = () => {
-  const { toggleCart, itemCount } = useShopifyCart();
-
-  return (
-    <button
-      onClick={toggleCart}
-      className="relative p-1 text-black hover:text-gray-600 transition-colors"
-    >
-      <i className="ri-shopping-cart-line text-xl"></i>
-      {itemCount > 0 && (
-        <span className="absolute -top-1 -right-1 bg-black text-white text-[10px] rounded-full w-4 h-4 flex items-center justify-center font-semibold">
-          {itemCount > 99 ? '99+' : itemCount}
-        </span>
-      )}
-    </button>
-  );
-};
-
-const Header: React.FC = () => {
-  return (
-    <nav className="bg-white shadow-sm sticky top-0 z-30 h-14">
-      <div className="container mx-auto px-4 h-full">
-        <div className="flex justify-between items-center h-full">
-          {/* Logo */}
-          <Link to="/" className="text-lg font-bold text-black font-heading">
-            {config.brand.logo.url ? (
-              <img
-                src={config.brand.logo.url}
-                alt={config.brand.logo.alt || 'Store'}
-                className="h-8"
-              />
-            ) : (
-              'Store'
-            )}
-          </Link>
-
-          {/* Navigation Links */}
-          <div className="flex items-center space-x-6">
-            <Link
-              to="/"
-              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
-            >
-              Products
-            </Link>
-            <Link
-              to="/collections"
-              className="text-sm text-black hover:text-gray-600 font-medium transition-colors"
-            >
-              Collections
-            </Link>
-
-            {/* Cart Icon */}
-            <CartIcon />
-          </div>
-        </div>
-      </div>
-    </nav>
-  );
-};
-
-export default Header;

components/cta/cta.tsx

@@ -1,6 +1,6 @@
-import { Link } from "react-router";
+import Link from "next/link";
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type CTAProps = {
   tagline: string;
@@ -43,17 +43,15 @@ export function CTA({
           align === "center" ? "items-center text-center" : "items-start",
         )}
       >
-        {tagline ? (
-          <p className="mb-4 text-xs uppercase tracking-[0.2em] text-white/80">
-            {tagline}
-          </p>
-        ) : null}
-        <Typography variant="h2">{heading}</Typography>
-        {subheading ? (
-          <Typography variant="subtitle1" className="mt-5 max-w-xl text-white/80">
-            {subheading}
-          </Typography>
-        ) : null}
+        <Heading
+          tagline={tagline}
+          title={heading}
+          subtitle={subheading}
+          align={align === "center" ? "center" : "left"}
+          size="lg"
+          tone="light"
+          subtitleClassName="max-w-xl"
+        />
         <div
           className={cn(
             "mt-10 flex flex-wrap gap-3",
@@ -62,7 +60,7 @@ export function CTA({
         >
           {primaryCta?.label ? (
             <Link
-              to={primaryCta.href || "#"}
+              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}
@@ -70,7 +68,7 @@ export function CTA({
           ) : null}
           {secondaryCta?.label ? (
             <Link
-              to={secondaryCta.href || "#"}
+              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}

components/faq/faq.tsx

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

components/features/features.tsx

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

components/footer/footer.tsx

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

components/hero/hero.editor.tsx

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

components/hero/hero.tsx

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

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

components/landing/image-gallery.tsx

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

components/landing/newsletter-cta.tsx

@@ -1,6 +1,9 @@
 import { useState } from "react";
 import { cn } from "@/lib/utils";
-import { Typography } from "@/components/Typography";
+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";
 
@@ -108,92 +111,80 @@ export function NewsletterCta({
   const Form = (
     <form
       onSubmit={submit}
-      className="flex w-full max-w-md items-center border-b border-foreground/30 focus-within:border-foreground"
+      className="flex w-full max-w-md flex-col gap-3 sm:flex-row sm:items-center"
     >
-      <input
+      <Input
         type="email"
         required
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        placeholder="you@example.com"
-        className="flex-1 bg-transparent py-3 text-sm placeholder:text-muted-foreground focus:outline-none"
+        placeholder="Enter your email"
+        className="h-11 flex-1"
       />
-      <button
-        type="submit"
-        disabled={submitting}
-        className="ml-3 text-sm font-medium tracking-wide hover:opacity-70 disabled:opacity-40"
-      >
-        {submitting ? "…" : buttonLabel} →
-      </button>
+      <Button type="submit" size="lg" disabled={submitting} className="h-11">
+        {submitting ? "Joining…" : buttonLabel}
+      </Button>
     </form>
   );
 
-  if (layout === "split") {
-    return (
-      <section className="bg-background">
-        <div className="container mx-auto max-w-7xl px-6 py-16 md:py-24">
-          <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2">
-            <div>
-              {imageUrl ? (
+  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="aspect-[5/4] w-full rounded-md object-cover"
+                  className={cn(
+                    "w-full object-cover transition-transform duration-700 hover:scale-105",
+                    isStacked ? "aspect-[16/9]" : "aspect-[4/3]",
+                  )}
                 />
-              ) : null}
-            </div>
-            <div className="flex flex-col items-start">
-              {tagline ? (
-                <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-                  {tagline}
-                </p>
-              ) : null}
-              <Typography variant="h2">{heading}</Typography>
-              {subheading ? (
-                <Typography variant="subtitle1" className="mt-3 max-w-md">
-                  {subheading}
-                </Typography>
-              ) : null}
-              <div className="mt-8 w-full">
-                {submitted ? (
-                  <p className="text-sm text-muted-foreground">
-                    Thanks — we'll be in touch.
-                  </p>
-                ) : (
-                  Form
-                )}
               </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>
-      </section>
-    );
-  }
-
-  return (
-    <section className="bg-muted/40 py-20 md:py-28">
-      <div className="container mx-auto max-w-2xl px-6 text-center">
-        {tagline ? (
-          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-            {tagline}
-          </p>
-        ) : null}
-        <Typography variant="h2">{heading}</Typography>
-        {subheading ? (
-          <Typography variant="subtitle1" className="mt-3">
-            {subheading}
-          </Typography>
-        ) : null}
-        <div className={cn("mx-auto mt-10 flex w-full max-w-md justify-center")}>
-          {submitted ? (
-            <p className="text-sm text-muted-foreground">
-              Thanks — we'll be in touch.
-            </p>
-          ) : (
-            Form
-          )}
-        </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.tsx

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

components/navigation/navigation.tsx

@@ -1,8 +1,10 @@
 import { Menu as MenuIcon, ShoppingBag, Search } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router";
+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 = {
@@ -49,12 +51,8 @@ export function Navigation({
           toneClass[tone],
         )}
       >
-        <div className="container mx-auto flex h-16 max-w-7xl items-center justify-between px-6 md:h-20">
-          <Link
-            to="/"
-            className="inline-flex items-center font-semibold tracking-tight"
-            style={{ fontSize: "1.125rem", letterSpacing: "0.02em" }}
-          >
+        <Container className="flex h-16 items-center justify-between md:h-20">
+          <Link href="/" className="inline-flex items-center">
             {logo ? (
               <img
                 src={logo}
@@ -62,7 +60,9 @@ export function Navigation({
                 className="h-8 w-auto object-contain"
               />
             ) : (
-              brand || "Brand Logo"
+              <Typography variant="h3" as="span">
+                {brand || "Brand Logo"}
+              </Typography>
             )}
           </Link>
 
@@ -70,7 +70,7 @@ export function Navigation({
             {links.map((l) => (
               <Link
                 key={l.href + l.label}
-                to={l.href}
+                href={l.href}
                 className="text-sm tracking-wide opacity-80 transition-opacity hover:opacity-100"
               >
                 {l.label}
@@ -81,7 +81,7 @@ export function Navigation({
           <div className="flex items-center gap-1">
             {showSearch === "yes" && (
               <Link
-                to="/search"
+                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"
               >
@@ -110,7 +110,7 @@ export function Navigation({
               <MenuIcon size={20} strokeWidth={1.5} />
             </button>
           </div>
-        </div>
+        </Container>
       </header>
       </div>
 
@@ -124,7 +124,7 @@ export function Navigation({
             {links.map((l) => (
               <Link
                 key={l.href + l.label}
-                to={l.href}
+                href={l.href}
                 className="rounded-md px-3 py-3 text-base hover:bg-muted"
               >
                 {l.label}

components/testimonials/testimonials.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
-import { Typography } from "@/components/Typography";
+import { Heading } from "@/components/Heading";
 
 export type TestimonialsProps = {
   tagline: string;
@@ -21,58 +21,77 @@ export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
   return (
     <section className="bg-muted/40 py-20 md:py-28">
       <div className="container mx-auto max-w-4xl px-6 text-center">
-        {tagline ? (
-          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
-            {tagline}
-          </p>
-        ) : null}
-        {heading ? <Typography variant="h2">{heading}</Typography> : null}
+        <Heading
+          tagline={tagline}
+          title={heading}
+          align="center"
+          size="lg"
+        />
 
         {item ? (
-          <figure className="mx-auto mt-12 flex max-w-2xl flex-col items-center">
-            <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>
-        ) : null}
+          <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}
 
-        {total > 1 ? (
-          <div className="mt-10 flex items-center justify-center gap-3">
-            <button
-              onClick={() => setI((p) => (p - 1 + total) % total)}
-              className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
-              aria-label="Previous"
-            >
-              <ArrowLeft size={16} />
-            </button>
-            <span className="text-xs tabular-nums text-muted-foreground">
-              {i + 1} / {total}
-            </span>
-            <button
-              onClick={() => setI((p) => (p + 1) % total)}
-              className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border hover:bg-background"
-              aria-label="Next"
-            >
-              <ArrowRight size={16} />
-            </button>
+            <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>

components/ui/button.tsx

@@ -5,7 +5,7 @@ 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-[var(--radius-button)] 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",
+  "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: {

config/configs.ts

@@ -0,0 +1,108 @@
+import {
+  createFieldShopifyProduct,
+  createFieldShopifyCollection,
+} from "@reacteditor/field-shopify";
+
+import { navigationEditor } from "@/components/navigation/navigation.editor";
+import { footerEditor } from "@/components/footer/footer.editor";
+
+import { heroEditor } from "@/components/hero/hero.editor";
+import { bannerEditor } from "@/components/landing/banner.editor";
+
+import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
+import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
+import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
+import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
+import { createCollectionEditor } from "@/components/commerce/collection.editor";
+import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
+import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";
+import { searchProductsEditor } from "@/components/commerce/search-products.editor";
+
+import { featuresEditor } from "@/components/features/features.editor";
+import { testimonialsEditor } from "@/components/testimonials/testimonials.editor";
+import { imageGalleryEditor } from "@/components/landing/image-gallery.editor";
+import { newsletterCtaEditor } from "@/components/landing/newsletter-cta.editor";
+import { logosEditor } from "@/components/logos/logos.editor";
+import { ctaEditor } from "@/components/cta/cta.editor";
+import { faqEditor } from "@/components/faq/faq.editor";
+
+import Root from "@/config/root";
+import type { UserConfig } from "@/config/types";
+
+const SHOPIFY_DOMAIN =
+  process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop";
+const STOREFRONT_TOKEN =
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN ?? "";
+
+const productField = createFieldShopifyProduct({
+  storeDomain: SHOPIFY_DOMAIN,
+  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
+}) as any;
+
+const collectionField = createFieldShopifyCollection({
+  storeDomain: SHOPIFY_DOMAIN,
+  storefrontAccessToken: STOREFRONT_TOKEN || undefined,
+}) as any;
+
+const categories = {
+  navigation: { title: "Navigation" },
+  hero: { title: "Hero & Banners" },
+  commerce: { title: "Commerce" },
+  content: { title: "Content" },
+  footer: { title: "Footer" },
+};
+
+const sharedComponents = {
+  navigation: navigationEditor,
+  footer: footerEditor,
+};
+
+export const homeConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    hero: heroEditor,
+    banner: bannerEditor,
+    "featured-product": createFeaturedProductEditor({ productField }),
+    "products-grid": createProductsGridEditor({ collectionField }),
+    "products-carousel": createProductsCarouselEditor({ collectionField }),
+    "collection-grid": collectionGridEditor,
+    features: featuresEditor,
+    testimonials: testimonialsEditor,
+    "image-gallery": imageGalleryEditor,
+    "newsletter-cta": newsletterCtaEditor,
+    logos: logosEditor,
+    cta: ctaEditor,
+    faq: faqEditor,
+  } as any,
+};
+
+export const productConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    "product-details": createProductDetailsEditor({ productField }),
+    "recommended-products": createRecommendedProductsEditor({ productField }),
+    "products-carousel": createProductsCarouselEditor({ collectionField }),
+  } as any,
+};
+
+export const collectionsConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    collection: createCollectionEditor({ collectionField }),
+  } as any,
+};
+
+export const searchConfig: UserConfig = {
+  root: Root,
+  categories,
+  components: {
+    ...sharedComponents,
+    "search-products": searchProductsEditor,
+  } as any,
+};

config/root.tsx

@@ -22,6 +22,7 @@ export const Root: RootConfig<{
   defaultProps: {
     title: "Untitled",
     headerFont: "Inter",
+    headerFontWeight: "600",
     bodyFont: "Inter",
     // Hex defaults so the color picker reads them and any non-picker
     // input (typed hex, AI-set value, etc.) is round-trip compatible.
@@ -32,15 +33,27 @@ export const Root: RootConfig<{
     fgColor: "#0a0a0a",
     mutedColor: "#f5f5f5",
     radius: "md",
-    buttonRadius: "md",
     shadow: "sm",
-    maxWidth: "xl",
+    maxWidth: "lg",
   },
   fields: {
     title: { label: "Page title", type: "text" },
     description: { label: "Description", type: "textarea" },
     ogImage: { label: "OG image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     headerFont: { label: "Header font", ...headerFontField },
+    headerFontWeight: {
+      label: "Header font weight",
+      type: "select",
+      options: [
+        { label: "300 — Light", value: "300" },
+        { label: "400 — Regular", value: "400" },
+        { label: "500 — Medium", value: "500" },
+        { label: "600 — Semibold", value: "600" },
+        { label: "700 — Bold", value: "700" },
+        { label: "800 — Extrabold", value: "800" },
+        { label: "900 — Black", value: "900" },
+      ],
+    },
     bodyFont: { label: "Body font", ...bodyFontField },
     primaryColor: { label: "Primary color", type: "color", placeholder: "#0a0a0a" },
     secondaryColor: { label: "Secondary color", type: "color", placeholder: "#64748B" },
@@ -59,17 +72,6 @@ export const Root: RootConfig<{
         { label: "Extra large", value: "xl" },
       ],
     },
-    buttonRadius: {
-      label: "Button radius",
-      type: "select",
-      options: [
-        { label: "None (square)", value: "none" },
-        { label: "Small", value: "sm" },
-        { label: "Medium", value: "md" },
-        { label: "Large", value: "lg" },
-        { label: "Extra large", value: "xl" },
-      ],
-    },
     shadow: {
       label: "Shadow",
       type: "select",
@@ -89,7 +91,6 @@ export const Root: RootConfig<{
         { label: "Medium", value: "md" },
         { label: "Large", value: "lg" },
         { label: "Extra large", value: "xl" },
-        { label: "2X large", value: "2xl" },
         { label: "Full bleed", value: "full" },
       ],
     },
@@ -97,6 +98,7 @@ export const Root: RootConfig<{
   render: ({
     children,
     headerFont,
+    headerFontWeight,
     bodyFont,
     primaryColor,
     secondaryColor,
@@ -105,12 +107,13 @@ export const Root: RootConfig<{
     fgColor,
     mutedColor,
     radius,
-    buttonRadius,
     shadow,
+    maxWidth,
   }) => {
     return (
       <ThemeProvider
         headerFont={headerFont}
+        headerFontWeight={headerFontWeight}
         bodyFont={bodyFont}
         primaryColor={primaryColor}
         secondaryColor={secondaryColor}
@@ -119,8 +122,8 @@ export const Root: RootConfig<{
         fgColor={fgColor}
         mutedColor={mutedColor}
         radius={radius}
-        buttonRadius={buttonRadius}
         shadow={shadow}
+        maxWidth={maxWidth}
       >
         {children}
       </ThemeProvider>

index.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Shopify Storefront</title>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-    <link
-      rel="stylesheet"
-      href="https://esm.sh/@reacteditor/core@0.0.10/dist/index.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://esm.sh/@reacteditor/plugin-ai@0.0.3/styles.css"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+};
+
+export default nextConfig;

package.json

@@ -2,16 +2,13 @@
   "name": "react-editor-demo",
   "version": "1.0.0",
   "private": true,
-  "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "start": "vite preview"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^3.0.74",
-    "@ai-sdk/react": "^3.0.177",
     "@base-ui/react": "^1.4.1",
     "@fontsource-variable/geist": "^5.2.8",
     "@radix-ui/react-accordion": "^1.2.11",
@@ -28,23 +25,23 @@
     "@radix-ui/react-switch": "^1.2.5",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@reacteditor/core": "0.0.18",
-    "@reacteditor/field-google-fonts": "^0.0.1",
-    "@reacteditor/field-shopify": "^0.0.1",
-    "@reacteditor/plugin-ai": "^0.0.4",
-    "@reacteditor/plugin-media": "^0.0.1",
-    "@reacteditor/plugin-tailwind-cdn": "^0.0.2",
+    "@reacteditor/core": "0.0.30",
+    "@reacteditor/field-google-fonts": "^0.0.3",
+    "@reacteditor/field-shopify": "^0.0.2",
+    "@reacteditor/plugin-ai": "^0.0.7",
+    "@reacteditor/plugin-media": "^0.0.4",
+    "@reacteditor/plugin-tailwind-cdn": "^0.0.3",
     "@shopify/storefront-api-client": "^1.0.0",
     "@tailwindcss/postcss": "^4.1.11",
-    "ai": "^6.0.175",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.16.0",
     "lucide-react": "^1.14.0",
+    "next": "16.2.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.0.0",
+    "react-router": "^7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.11",
     "tw-animate-css": "^1.4.0",
@@ -55,8 +52,6 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "^5.5.4",
-    "vite": "^6.0.0"
+    "typescript": "^5.5.4"
   }
 }

react-editor.config.tsx

@@ -1,90 +0,0 @@
-import {
-  createFieldShopifyProduct,
-  createFieldShopifyCollection,
-} from "@reacteditor/field-shopify";
-
-import { navigationEditor } from "@/components/navigation/navigation.editor";
-import { footerEditor } from "@/components/footer/footer.editor";
-
-import { heroEditor } from "@/components/hero/hero.editor";
-import { bannerEditor } from "@/components/landing/banner.editor";
-
-import { createFeaturedProductEditor } from "@/components/commerce/featured-product.editor";
-import { createProductsGridEditor } from "@/components/commerce/products-grid.editor";
-import { createProductsCarouselEditor } from "@/components/commerce/products-carousel.editor";
-import { collectionGridEditor } from "@/components/commerce/collection-grid.editor";
-import { createCollectionEditor } from "@/components/commerce/collection.editor";
-import { createProductDetailsEditor } from "@/components/commerce/product-details.editor";
-import { createRecommendedProductsEditor } from "@/components/commerce/recommended-products.editor";
-import { searchProductsEditor } from "@/components/commerce/search-products.editor";
-
-import { featuresEditor } from "@/components/features/features.editor";
-import { testimonialsEditor } from "@/components/testimonials/testimonials.editor";
-import { imageGalleryEditor } from "@/components/landing/image-gallery.editor";
-import { newsletterCtaEditor } from "@/components/landing/newsletter-cta.editor";
-import { logosEditor } from "@/components/logos/logos.editor";
-import { ctaEditor } from "@/components/cta/cta.editor";
-import { faqEditor } from "@/components/faq/faq.editor";
-
-import Root from "@/config/root";
-import type { UserConfig } from "@/config/types";
-import { initialData } from "@/config/initial-data";
-
-export type CreateConfigOptions = {
-  domain: string;
-  token?: string | null;
-};
-
-export function createConfig({ domain, token }: CreateConfigOptions): UserConfig {
-  const productField = createFieldShopifyProduct({
-    storeDomain: domain,
-    storefrontAccessToken: token ?? undefined,
-  }) as any;
-  const collectionField = createFieldShopifyCollection({
-    storeDomain: domain,
-    storefrontAccessToken: token ?? undefined,
-  }) as any;
-
-  return {
-    root: Root,
-    categories: {
-      navigation: { title: "Navigation" },
-      hero: { title: "Hero & Banners" },
-      commerce: { title: "Commerce" },
-      content: { title: "Content" },
-      footer: { title: "Footer" },
-    },
-    components: {
-      navigation: navigationEditor,
-      hero: heroEditor,
-      banner: bannerEditor,
-      "featured-product": createFeaturedProductEditor({ productField }),
-      "products-grid": createProductsGridEditor({ collectionField }),
-      "products-carousel": createProductsCarouselEditor({ collectionField }),
-      "collection-grid": collectionGridEditor,
-      collection: createCollectionEditor({ collectionField }),
-      "product-details": createProductDetailsEditor({ productField }),
-      "recommended-products": createRecommendedProductsEditor({ productField }),
-      "search-products": searchProductsEditor,
-      features: featuresEditor,
-      testimonials: testimonialsEditor,
-      "image-gallery": imageGalleryEditor,
-      "newsletter-cta": newsletterCtaEditor,
-      logos: logosEditor,
-      cta: ctaEditor,
-      faq: faqEditor,
-      footer: footerEditor,
-    } as any,
-  };
-}
-
-function toBase64(s: string): string {
-  if (typeof btoa === "function") return btoa(unescape(encodeURIComponent(s)));
-  return Buffer.from(s, "utf8").toString("base64");
-}
-
-export const componentKey = toBase64(
-  `commerce-redesign-${JSON.stringify({ initialData })}`,
-);
-
-export default createConfig;

services/media-adapter.ts

@@ -5,7 +5,7 @@ import type {
 } from "@reacteditor/plugin-media";
 
 const MEDIA_BASE = "https://www.frontend-ai.com";
-const MEDIA_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
+const MEDIA_API_KEY = process.env.NEXT_PUBLIC_API_KEY ?? "";
 
 export const frontendAiMediaAdapter: MediaAdapter = {
   fetchList: async ({ query, cursor, signal }) => {

src/App.tsx

@@ -1,82 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { App as ReactEditorApp } from "@reacteditor/core";
-import "@reacteditor/core/react-editor.css";
-import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
-import { mediaPlugin } from "@reacteditor/plugin-media";
-import "@reacteditor/plugin-media/styles.css";
-import { aiPlugin } from "@reacteditor/plugin-ai";
-import "@reacteditor/plugin-ai/styles.css";
-import { createConfig } from "@/react-editor.config";
-import { ShopifyProvider } from "@/contexts/shopify-context";
-import { frontendAiMediaAdapter } from "@/services/media-adapter";
-import schemaJson from "../app.schema.json";
-
-const AI_API_KEY = (import.meta.env.VITE_API_KEY as string | undefined) ?? "";
-
-type Pages = Record<string, { root: any; content: any[] }>;
-
-const SHOPIFY_DOMAIN =
-  (import.meta.env.VITE_SHOPIFY_DOMAIN as string | undefined) ?? "mock.shop";
-const STOREFRONT_TOKEN =
-  (import.meta.env.VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN as
-    | string
-    | undefined) ?? "";
-
-function readPathname() {
-  if (typeof window === "undefined") return "/";
-  const p = window.location.pathname;
-  return p === "" ? "/" : p;
-}
-
-export default function App() {
-  const pages = schemaJson as Pages;
-  const [currentPath, setCurrentPath] = useState<string>(readPathname);
-  const latestDataRef = useRef<any>(null);
-
-  const handleChange = useCallback((data: any) => {
-    latestDataRef.current = data;
-  }, []);
-
-  const config = useMemo(
-    () =>
-      createConfig({
-        domain: SHOPIFY_DOMAIN,
-        token: STOREFRONT_TOKEN || null,
-      }),
-    [],
-  );
-
-  const handlePublish = async (data: any, route?: { key: string }) => {
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      if (typeof window !== "undefined" && window.parent !== window) {
-        window.parent.postMessage(
-          { type: "PUBLISH", data: { data, route: route?.key } },
-          "*",
-        );
-      }
-    }
-
-  const plugins = useMemo(
-    () => [createTailwindCdnPlugin()],
-    [pages, currentPath, handlePublish],
-  );
-
-  return (
-    <div className="h-screen w-screen">
-      <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
-        <ReactEditorApp
-          config={config as any}
-          pages={pages as any}
-          currentPath={currentPath}
-          plugins={plugins}
-          iframe={{ enabled: true }}
-          ui={{
-            leftSideBarVisible: false,
-          }}
-          onPublish={handlePublish}
-          onChange={handleChange}
-        />
-      </ShopifyProvider>
-    </div>
-  );
-}

src/main.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-import "./globals.css";
-
-createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);

src/vite-env.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_SHOPIFY_DOMAIN?: string;
-  readonly VITE_SHOPIFY_STOREFRONT_ACCESS_TOKEN?: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}

tsconfig.json

@@ -1,29 +1,46 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "moduleResolution": "Bundler",
-    "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+    "incremental": true,
     "strict": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowJs": true,
-    "types": ["node", "vite/client"],
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "node"
+    ],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"],
-      "~/*": ["./*"]
-    }
+      "@/*": [
+        "./*"
+      ],
+      "~/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
-    "src",
+    "next-env.d.ts",
+    "app",
     "api",
     "components",
     "config",
@@ -33,8 +50,15 @@
     "lib",
     "services",
     "vendor",
-    "react-editor.config.tsx",
-    "vite.config.ts"
+    "next.config.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules", "dist"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    ".next"
+  ]
 }

vite.config.ts

@@ -1,23 +0,0 @@
-import { defineConfig, loadEnv } from "vite";
-import react from "@vitejs/plugin-react";
-import path from "node:path";
-
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), "");
-  for (const k of Object.keys(env)) {
-    if (process.env[k] === undefined) process.env[k] = env[k];
-  }
-
-  return {
-    plugins: [react()],
-    resolve: {
-      alias: {
-        "@": path.resolve(__dirname, "."),
-        "~": path.resolve(__dirname, "."),
-      },
-    },
-    server: {
-      port: 3001,
-    },
-  };
-});