Initial commit

app/[[...slug]]/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { Render } from "@reacteditor/core";
+import { appConfig } from "@/editor.config";
+import resolveRoute from "@/lib/resolve-route";
+import schema from "@/app.schema.json";
+import globals from "@/app.globals.json";
+
+export default function Page() {
+  const params = useParams();
+  const segments = Array.isArray(params?.slug) ? (params.slug as string[]) : [];
+  const { key } = resolveRoute(segments);
+  const { root, content } = (schema as any)[key] ?? {};
+  const data = { root, content, globals };
+  return <Render config={appConfig as any} data={data} />;
+}

app/api/media/[id]/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest } from "next/server";
+import { CLOUD_BASE, FRONTEND_API_KEY } from "@/lib/cloud";
+
+// DELETE /api/media/:id — remove a media asset.
+export async function DELETE(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const upstream = await fetch(
+    `${CLOUD_BASE}/api/media/${encodeURIComponent(id)}`,
+    {
+      method: "DELETE",
+      headers: { "x-api-key": FRONTEND_API_KEY },
+    },
+  );
+
+  return new Response(upstream.body, {
+    status: upstream.status,
+    headers: {
+      "content-type":
+        upstream.headers.get("content-type") ?? "application/json",
+    },
+  });
+}

app/api/media/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest } from "next/server";
+import { CLOUD_BASE, FRONTEND_API_KEY } from "@/lib/cloud";
+
+// GET /api/media — list/search media. Forwards query + cursor params.
+export async function GET(req: NextRequest) {
+  const incoming = new URL(req.url);
+  const url = new URL("/api/media", CLOUD_BASE);
+  const query = incoming.searchParams.get("query");
+  const cursor = incoming.searchParams.get("cursor");
+  if (query) url.searchParams.set("query", query);
+  if (cursor) url.searchParams.set("cursor", cursor);
+
+  const upstream = await fetch(url, {
+    method: "GET",
+    headers: { "x-api-key": FRONTEND_API_KEY },
+  });
+
+  return new Response(upstream.body, {
+    status: upstream.status,
+    headers: {
+      "content-type":
+        upstream.headers.get("content-type") ?? "application/json",
+    },
+  });
+}
+
+// POST /api/media — upload. Forwards the multipart body as-is.
+export async function POST(req: NextRequest) {
+  const upstream = await fetch(`${CLOUD_BASE}/api/media`, {
+    method: "POST",
+    headers: {
+      "content-type": req.headers.get("content-type") ?? "",
+      "x-api-key": FRONTEND_API_KEY,
+    },
+    body: req.body,
+    // @ts-expect-error - duplex is valid but missing from the lib types.
+    duplex: "half",
+  });
+
+  return new Response(upstream.body, {
+    status: upstream.status,
+    headers: {
+      "content-type":
+        upstream.headers.get("content-type") ?? "application/json",
+    },
+  });
+}

app/editor/[[...slug]]/page.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useMemo } from "react";
+import { useParams } from "next/navigation";
+import { Editor, blocksPlugin, outlinePlugin } from "@reacteditor/core";
+import createTailwindCdnPlugin from "@reacteditor/plugin-tailwind-cdn";
+import { createShopifyPlugin } from "@reacteditor/plugin-shopify";
+import { mediaPlugin } from "@reacteditor/plugin-media";
+import { mediaAdapter } from "@/lib/adapters/media-adapter";
+import { appConfig } from "@/editor.config";
+import resolveRoute from "@/lib/resolve-route";
+import schema from "@/app.schema.json";
+import globals from "@/app.globals.json";
+
+export default function EditorPage() {
+  const params = useParams();
+  const segments = Array.isArray(params?.slug) ? (params.slug as string[]) : [];
+  const { key, path, params: routeParams } = resolveRoute(segments);
+  const { root, content } = (schema as any)[key] ?? {};
+  const data = { root, content, globals };
+
+  const plugins = useMemo(
+    () => [
+      blocksPlugin(),
+      outlinePlugin(),
+      mediaPlugin({
+        adapter: mediaAdapter,
+      }),
+      createTailwindCdnPlugin(),
+      createShopifyPlugin({
+        storeDomain: process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN ?? "mock.shop",
+        publicAccessToken:
+          process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN,
+      }),
+    ],
+    [],
+  );
+
+  const handlePublish = async (nextData: any, route?: any) => {
+    const resolved = route ?? { key };
+    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={appConfig as any}
+        data={data}        
+        route={{ key, path, params: routeParams }}
+        plugins={plugins}
+        onPublish={handlePublish}
+      />
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,149 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-family-heading: var(--font-header);
+  --font-family-header: var(--font-header);
+  --font-family-body: var(--font-body);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --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);
+
+  --animate-marquee: marquee var(--duration) infinite linear;
+  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+
+  @keyframes marquee {
+    from { transform: translateX(0); }
+    to { transform: translateX(calc(-100% - var(--gap))); }
+  }
+  @keyframes marquee-vertical {
+    from { transform: translateY(0); }
+    to { transform: translateY(calc(-100% - var(--gap))); }
+  }
+  --font-heading: var(--font-sans);
+  --font-sans: 'Geist Variable', sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --radius-2xl: calc(var(--radius) * 2);
+  --radius-3xl: calc(var(--radius) * 3);
+  --radius-4xl: calc(var(--radius) * 4)
+}
+
+:root {
+  --radius: 0.625rem;
+  --font-header: system-ui, -apple-system, sans-serif;
+  --font-body: system-ui, -apple-system, sans-serif;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: #fafafa;
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+@layer base {
+  * { @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";
+    margin: 0;
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;}
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}

app/layout.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+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/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>
+  );
+}