Add media and AI plugins, refresh editor configs

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

app.schema.json

@@ -6,12 +6,15 @@
         "headerFont": "Playfair Display",
         "bodyFont": "Inter",
         "primaryColor": "#0a0a0a",
+        "secondaryColor": "#64748B",
         "accentColor": "#f5f5f5",
         "bgColor": "#ffffff",
         "fgColor": "#0a0a0a",
         "mutedColor": "#f5f5f5",
         "roundedness": "md",
+        "radius": "md",
         "shadowLevel": "sm",
+        "shadow": "sm",
         "maxWidth": "xl"
       }
     },
@@ -193,12 +196,15 @@
         "headerFont": "Playfair Display",
         "bodyFont": "Inter",
         "primaryColor": "#0a0a0a",
+        "secondaryColor": "#64748B",
         "accentColor": "#f5f5f5",
         "bgColor": "#ffffff",
         "fgColor": "#0a0a0a",
         "mutedColor": "#f5f5f5",
         "roundedness": "md",
+        "radius": "md",
         "shadowLevel": "sm",
+        "shadow": "sm",
         "maxWidth": "xl"
       }
     },

editor/components/cta/cta.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Megaphone } from "lucide-react";
 import { CTA, type CTAProps } from "@/editor/components/cta/cta";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const ctaEditor: ComponentConfig<CTAProps> = {
   label: "Call to action",
@@ -37,7 +39,7 @@ export const ctaEditor: ComponentConfig<CTAProps> = {
         href: { label: "Link", type: "text" },
       },
     },
-    imageUrl: { label: "Background image URL", type: "text" },
+    imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     align: {
       label: "Alignment",
       type: "radio",

editor/components/hero/hero.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { LayoutTemplate } from "lucide-react";
 import { Hero, type HeroProps } from "@/editor/components/hero/hero";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const heroEditor: ComponentConfig<HeroProps> = {
   label: "Hero",
@@ -39,7 +41,7 @@ export const heroEditor: ComponentConfig<HeroProps> = {
         href: { label: "Link", type: "text" },
       },
     },
-    imageUrl: { label: "Background image URL", type: "text" },
+    imageUrl: { label: "Background image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     align: {
       label: "Alignment",
       type: "radio",

editor/components/landing/image-gallery.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Images } from "lucide-react";
 import { ImageGallery, type ImageGalleryProps } from "@/editor/components/landing/image-gallery";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
   label: "Image gallery",
@@ -36,9 +38,9 @@ export const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
       label: "Images",
       type: "array",
       defaultItemProps: { src: "", alt: "" },
-      getItemSummary: (it) => it?.alt || it?.src || "Image",
+      getItemSummary: (it) => it?.caption || "Image",
       arrayFields: {
-        src: { label: "Image URL", type: "text" },
+        src: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
         alt: { label: "Alt text", type: "text", contentEditable: true },
         caption: { label: "Caption", type: "text", contentEditable: true },
       },

editor/components/landing/newsletter-cta.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Mail } from "lucide-react";
 import { NewsletterCta, type NewsletterCtaProps } from "@/editor/components/landing/newsletter-cta";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
   label: "Newsletter",
@@ -23,7 +25,7 @@ export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
     subheading: { label: "Subheading", type: "textarea", contentEditable: true },
     buttonLabel: { label: "Button label", type: "text", contentEditable: true },
     endpoint: { label: "Submit endpoint", type: "text" },
-    imageUrl: { label: "Image URL", type: "text" },
+    imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     layout: {
       label: "Layout",
       type: "radio",

editor/components/logos/logos.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Award } from "lucide-react";
 import { Logos, type LogosProps } from "@/editor/components/logos/logos";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const logosEditor: ComponentConfig<LogosProps> = {
   label: "Press / Logos",
@@ -33,7 +35,7 @@ export const logosEditor: ComponentConfig<LogosProps> = {
       defaultItemProps: { src: "", alt: "" },
       getItemSummary: (it) => it?.alt || "Logo",
       arrayFields: {
-        src: { label: "Image URL", type: "text" },
+        src: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
         alt: { label: "Alt text", type: "text", contentEditable: true },
       },
     },

editor/components/testimonials/testimonials.editor.tsx

@@ -1,6 +1,8 @@
 import { ComponentConfig } from "@reacteditor/core";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { Quote } from "lucide-react";
 import { Testimonials, type TestimonialsProps } from "@/editor/components/testimonials/testimonials";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
   label: "Testimonials",
@@ -48,7 +50,7 @@ export const testimonialsEditor: ComponentConfig<TestimonialsProps> = {
         quote: { label: "Quote", type: "textarea", contentEditable: true },
         author: { label: "Author", type: "text", contentEditable: true },
         role: { label: "Role", type: "text", contentEditable: true },
-        avatar: { label: "Avatar URL", type: "text" },
+        avatar: { label: "Avatar", ...imageField({ adapter: frontendAiMediaAdapter }) },
       },
     },
   },

editor/config/root.tsx

@@ -1,6 +1,8 @@
 import { DefaultRootProps, RootConfig } from "@reacteditor/core";
 import { createFieldGoogleFonts } from "@reacteditor/field-google-fonts";
+import { imageField } from "@reacteditor/plugin-media/field";
 import { ThemeProvider, ThemeProps } from "@/editor/theme/ThemeProvider";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 
 export type RootProps = DefaultRootProps &
   ThemeProps & {
@@ -24,21 +26,25 @@ export const Root: RootConfig<{
     // Hex defaults so the color picker reads them and any non-picker
     // input (typed hex, AI-set value, etc.) is round-trip compatible.
     primaryColor: "#0a0a0a",
+    secondaryColor: "#64748B",
     accentColor: "#f5f5f5",
     bgColor: "#ffffff",
     fgColor: "#0a0a0a",
     mutedColor: "#f5f5f5",
     roundedness: "md",
+    radius: "md",
     shadowLevel: "sm",
+    shadow: "sm",
     maxWidth: "xl",
   },
   fields: {
     title: { label: "Page title", type: "text" },
     description: { label: "Description", type: "textarea" },
-    ogImage: { label: "OG image URL", type: "text" },
+    ogImage: { label: "OG image", ...imageField({ adapter: frontendAiMediaAdapter }) },
     headerFont: { label: "Header font", ...headerFontField },
     bodyFont: { label: "Body font", ...bodyFontField },
     primaryColor: { label: "Primary color", type: "color", placeholder: "#0a0a0a" },
+    secondaryColor: { label: "Secondary color", type: "color", placeholder: "#64748B" },
     accentColor: { label: "Accent color", type: "color", placeholder: "#f5f5f5" },
     bgColor: { label: "Background color", type: "color", placeholder: "#ffffff" },
     fgColor: { label: "Foreground color", type: "color", placeholder: "#0a0a0a" },
@@ -55,6 +61,17 @@ export const Root: RootConfig<{
         { label: "Full (pill)", value: "full" },
       ],
     },
+    radius: {
+      label: "Radius",
+      type: "select",
+      options: [
+        { label: "None", value: "none" },
+        { label: "Extra small", value: "xs" },
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" },
+      ],
+    },
     shadowLevel: {
       label: "Shadow level",
       type: "select",
@@ -66,6 +83,16 @@ export const Root: RootConfig<{
         { label: "Extra large", value: "xl" },
       ],
     },
+    shadow: {
+      label: "Shadow",
+      type: "select",
+      options: [
+        { label: "None", value: "none" },
+        { label: "Small", value: "sm" },
+        { label: "Medium", value: "md" },
+        { label: "Large", value: "lg" },
+      ],
+    },
     maxWidth: {
       label: "Max width",
       type: "select",
@@ -84,24 +111,30 @@ export const Root: RootConfig<{
     headerFont,
     bodyFont,
     primaryColor,
+    secondaryColor,
     accentColor,
     bgColor,
     fgColor,
     mutedColor,
     roundedness,
+    radius,
     shadowLevel,
+    shadow,
   }) => {
     return (
       <ThemeProvider
         headerFont={headerFont}
         bodyFont={bodyFont}
         primaryColor={primaryColor}
+        secondaryColor={secondaryColor}
         accentColor={accentColor}
         bgColor={bgColor}
         fgColor={fgColor}
         mutedColor={mutedColor}
         roundedness={roundedness}
+        radius={radius}
         shadowLevel={shadowLevel}
+        shadow={shadow}
       >
         {children}
       </ThemeProvider>

editor/services/media-adapter.ts

@@ -0,0 +1,65 @@
+import type {
+  MediaAdapter,
+  MediaItem,
+  MediaPage,
+} 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) ?? "";
+
+export const frontendAiMediaAdapter: MediaAdapter = {
+  fetchList: async ({ query, cursor, signal }) => {
+    const url = new URL("/api/media", MEDIA_BASE);
+    if (query) url.searchParams.set("query", query);
+    if (cursor) url.searchParams.set("cursor", cursor);
+    const res = await fetch(url, {
+      method: "GET",
+      headers: { "X-Api-Key": MEDIA_API_KEY },
+      signal,
+    });
+    if (!res.ok) throw new Error(`List failed: ${res.status}`);
+    return (await res.json()) as MediaPage;
+  },
+
+  upload: (file, opts) =>
+    new Promise<MediaItem>((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", `${MEDIA_BASE}/api/media`);
+      xhr.setRequestHeader("X-Api-Key", MEDIA_API_KEY);
+      xhr.upload.onprogress = (e) => {
+        if (e.lengthComputable) opts?.onProgress?.(e.loaded / e.total);
+      };
+      xhr.onload = () => {
+        if (xhr.status >= 400) {
+          reject(new Error(xhr.responseText || `Upload failed: ${xhr.status}`));
+          return;
+        }
+        try {
+          resolve(JSON.parse(xhr.responseText) as MediaItem);
+        } catch (err) {
+          reject(err instanceof Error ? err : new Error(String(err)));
+        }
+      };
+      xhr.onerror = () => reject(new Error("Network error"));
+      xhr.onabort = () => {
+        const err = new Error("Aborted");
+        err.name = "AbortError";
+        reject(err);
+      };
+      opts?.signal?.addEventListener("abort", () => xhr.abort());
+      const fd = new FormData();
+      fd.append("file", file);
+      xhr.send(fd);
+    }),
+
+  delete: async (id) => {
+    const res = await fetch(
+      `${MEDIA_BASE}/api/media/${encodeURIComponent(id)}`,
+      {
+        method: "DELETE",
+        headers: { "X-Api-Key": MEDIA_API_KEY },
+      },
+    );
+    if (!res.ok) throw new Error(`Delete failed: ${res.status}`);
+  },
+};

editor/theme/ThemeProvider.tsx

@@ -6,6 +6,7 @@ export type ThemeProps = {
   bodyFont?: string;
   primaryColor?: string;
   primaryForegroundColor?: string;
+  secondaryColor?: string;
   accentColor?: string;
   bgColor?: string;
   fgColor?: string;
@@ -13,7 +14,9 @@ export type ThemeProps = {
   mutedForegroundColor?: string;
   borderColor?: string;
   roundedness?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+  radius?: "none" | "xs" | "sm" | "md" | "lg";
   shadowLevel?: "none" | "sm" | "md" | "lg" | "xl";
+  shadow?: "none" | "sm" | "md" | "lg";
   maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 };
 
@@ -26,6 +29,14 @@ const radiusMap: Record<NonNullable<ThemeProps["roundedness"]>, string> = {
   full: "9999px",
 };
 
+const radiusEnumMap: Record<NonNullable<ThemeProps["radius"]>, string> = {
+  none: "0px",
+  xs: "0.125rem",
+  sm: "0.25rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+};
+
 const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
   none: "0 0 #0000",
   sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -34,6 +45,13 @@ const shadowMap: Record<NonNullable<ThemeProps["shadowLevel"]>, string> = {
   xl: "0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10)",
 };
 
+const shadowEnumMap: Record<NonNullable<ThemeProps["shadow"]>, string> = {
+  none: "0 0 #0000",
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10)",
+};
+
 function googleFontsHref(headerFont?: string, bodyFont?: string): string | null {
   const fonts = [headerFont, bodyFont].filter(
     (f): f is string => !!f && f !== "system-ui"
@@ -50,6 +68,7 @@ export function ThemeProvider({
   bodyFont,
   primaryColor,
   primaryForegroundColor,
+  secondaryColor,
   accentColor,
   bgColor,
   fgColor,
@@ -57,7 +76,9 @@ export function ThemeProvider({
   mutedForegroundColor,
   borderColor,
   roundedness,
+  radius,
   shadowLevel,
+  shadow,
   children,
 }: ThemeProps & { children?: React.ReactNode }) {
   // Recompute CSS-variable map only when a relevant prop changes.
@@ -65,14 +86,17 @@ export function ThemeProvider({
     const vars: Record<string, string> = {};
     if (primaryColor) vars["--primary"] = primaryColor;
     if (primaryForegroundColor) vars["--primary-foreground"] = primaryForegroundColor;
+    if (secondaryColor) vars["--secondary"] = secondaryColor;
     if (accentColor) vars["--accent"] = accentColor;
     if (bgColor) vars["--background"] = bgColor;
     if (fgColor) vars["--foreground"] = fgColor;
     if (mutedColor) vars["--muted"] = mutedColor;
     if (mutedForegroundColor) vars["--muted-foreground"] = mutedForegroundColor;
     if (borderColor) vars["--border"] = borderColor;
-    if (roundedness) vars["--radius"] = radiusMap[roundedness];
+    if (radius) vars["--radius"] = radiusEnumMap[radius];
-    if (shadowLevel) vars["--shadow"] = shadowMap[shadowLevel];
+    else if (roundedness) vars["--radius"] = radiusMap[roundedness];
+    if (shadow) vars["--shadow"] = shadowEnumMap[shadow];
+    else if (shadowLevel) vars["--shadow"] = shadowMap[shadowLevel];
     if (headerFont) vars["--font-header"] = `"${headerFont}", system-ui, sans-serif`;
     if (bodyFont) vars["--font-body"] = `"${bodyFont}", system-ui, sans-serif`;
     return vars;
@@ -81,6 +105,7 @@ export function ThemeProvider({
     bodyFont,
     primaryColor,
     primaryForegroundColor,
+    secondaryColor,
     accentColor,
     bgColor,
     fgColor,
@@ -88,7 +113,9 @@ export function ThemeProvider({
     mutedForegroundColor,
     borderColor,
     roundedness,
+    radius,
     shadowLevel,
+    shadow,
   ]);
 
   // Imperatively push every CSS var onto :root inside the host document

package.json

@@ -32,6 +32,7 @@
     "@reacteditor/field-google-fonts": "^0.0.1",
     "@reacteditor/field-shopify": "^0.0.1",
     "@reacteditor/plugin-ai": "^0.0.3",
+    "@reacteditor/plugin-media": "^0.0.1",
     "@reacteditor/plugin-tailwind-cdn": "^0.0.2",
     "@shopify/storefront-api-client": "^1.0.0",
     "@tailwindcss/postcss": "^4.1.11",

src/App.tsx

@@ -5,11 +5,18 @@ import {
   outlinePlugin,
 } from "@reacteditor/core";
 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 "@/editor/config";
 import { ShopifyProvider } from "@/editor/contexts/shopify-context";
+import { frontendAiMediaAdapter } from "@/editor/services/media-adapter";
 import { Loader } from "@/components/ui/loader";
 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 =
@@ -46,7 +53,20 @@ export default function App() {
   );
 
   const plugins = useMemo(
-    () => [createTailwindCdnPlugin(), blocksPlugin(), outlinePlugin()],
+    () => [
+      aiPlugin({
+        api: "https://www.frontend-ai.com/cloud/api/chat",
+        headers: { "X-Api-Key": AI_API_KEY },
+        getCurrentRoute: () => ({ path: window.location.pathname }),
+      }),
+      createTailwindCdnPlugin(),
+      blocksPlugin(),
+      outlinePlugin(),
+      mediaPlugin({
+        adapter: frontendAiMediaAdapter,
+        showSearch: true,
+      }),
+    ],
     [],
   );
 

src/globals.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "shadcn/tailwind.css";
 @import "@fontsource-variable/geist";
 
 @custom-variant dark (&:is(.dark *));