Add media and AI plugins, refresh editor configs

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

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>