Fix type mismatch

update package versions
Add media and AI plugins, refresh editor configs
2026-05-05 00:24:03 -04:00 · 2026-05-05 00:20:13 -04:00 · 2026-05-04 22:36:42 -04:00 · 2026-05-03 21:28:13 -04:00
15 changed files with 330 additions and 2063 deletions
--- a/app.schema.json
+++ b/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"
      }
    },
--- a/components/ui/loader.tsx
+++ b/components/ui/loader.tsx
@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+interface LoaderIconProps {
+  size?: number;
+}
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    style={{ color: "currentcolor" }}
+    viewBox="0 0 16 16"
+    width={size}
+  >
+    <title>Loader</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 16V12"
+        opacity="0.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 1.52783L5.64887 4.7639"
+        opacity="0.9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 1.52783L10.3511 4.7639"
+        opacity="0.1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 14.472L10.3511 11.236"
+        opacity="0.4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 14.472L5.64887 11.236"
+        opacity="0.6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 5.52783L11.8043 6.7639"
+        opacity="0.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 10.472L4.19583 9.23598"
+        opacity="0.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 10.4722L11.8043 9.2361"
+        opacity="0.3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 5.52783L4.19583 6.7639"
+        opacity="0.8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect fill="white" height="16" width="16" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+  <div
+    className={cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    <LoaderIcon size={size} />
+  </div>
+);
--- a/editor/components/cta/cta.editor.tsx
+++ b/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",
--- a/editor/components/hero/hero.editor.tsx
+++ b/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",
--- a/editor/components/landing/image-gallery.editor.tsx
+++ b/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 },
      },
--- a/editor/components/landing/newsletter-cta.editor.tsx
+++ b/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",
--- a/editor/components/logos/logos.editor.tsx
+++ b/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 },
      },
    },
--- a/editor/components/testimonials/testimonials.editor.tsx
+++ b/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 }) },
      },
    },
  },
--- a/editor/config/root.tsx
+++ b/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>
--- a/editor/services/media-adapter.ts
+++ b/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}`);
+  },
+};
--- a/editor/theme/ThemeProvider.tsx
+++ b/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 (shadowLevel) vars["--shadow"] = shadowMap[shadowLevel];
+    if (radius) vars["--radius"] = radiusEnumMap[radius];
+    else if (roundedness) vars["--radius"] = radiusMap[roundedness];
+    if (shadow) vars["--shadow"] = shadowEnumMap[shadow];
+    else if (shadowLevel) vars["--shadow"] = shadowMap[shadowLevel];
    if (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
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "@ai-sdk/anthropic": "^3.0.74",
-    "@ai-sdk/react": "^2.0.0",
+    "@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",
@@ -32,10 +32,11 @@
    "@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",
-    "ai": "^6.0.0",
+    "ai": "^6.0.175",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "embla-carousel-react": "^8.6.0",
@@ -48,7 +49,7 @@
    "tailwindcss": "^4.1.11",
    "tw-animate-css": "^1.4.0",
    "vaul": "^1.1.2",
-    "zod": "^4.0.0"
+    "zod": "3.25.76"
  },
  "devDependencies": {
    "@types/node": "^22.0.0",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,10 +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 =
@@ -27,6 +35,7 @@ function readPathname() {
 export default function App() {
  const pages = schemaJson as Pages;
  const [currentPath, setCurrentPath] = useState<string>(readPathname);
+  const [isPublishing, setIsPublishing] = useState(false);

  useEffect(() => {
    const onPop = () => setCurrentPath(readPathname());
@@ -44,21 +53,36 @@ 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,
+      }),
+    ],
    [],
  );

  const handlePublish = useCallback((data: any, route?: string) => {
+    setIsPublishing(true);
    if (typeof window !== "undefined" && window.parent !== window) {
      window.parent.postMessage(
        { type: "PUBLISH", data: { data, route } },
        "*",
      );
    }
+    setTimeout(() => setIsPublishing(false), 1000);
  }, []);

  return (
-    <div style={{ height: "100vh", width: "100vw" }}>
+    <div className="h-screen w-screen">
      <ShopifyProvider domain={SHOPIFY_DOMAIN} token={STOREFRONT_TOKEN}>
        <ReactEditorApp
          config={config as any}
@@ -69,6 +93,11 @@ export default function App() {
          onPublish={handlePublish}
        />
      </ShopifyProvider>
+      {isPublishing && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/30">
+          <Loader size={32} />
+        </div>
+      )}
    </div>
  );
 }
--- a/src/globals.css
+++ b/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 *));
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Rami Bitar	2a397da576	Fix type mismatch	2026-05-05 00:24:03 -04:00
Rami Bitar	570920ae5c	update package versions	2026-05-05 00:20:13 -04:00
Rami Bitar	343a2aa3a7	Add media and AI plugins, refresh editor configs Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-04 22:36:42 -04:00
Rami Bitar	865e16400c	Add loader while publishing	2026-05-03 21:28:13 -04:00