Add live design configurator for marketing surface

Users can now compose their marketing site by selecting:
- Mode (dark/light), Background style (gradient/beams/meteors/etc.),
  Nav style, Hero header layout, which Sections appear, and Font.

All 4 marketing scaffolds (DaisyUI, HeroUI, Aceternity, Tailwind)
respond live to config changes. Library capability cards + style
options data defined per library. Aceternity shows actual
background effects (beams, meteors, sparkles, wavy, dot-grid).

Made-with: Cursor

components/design-scaffolds/index.ts

@@ -8,7 +8,7 @@
  *  4. Add it to ALL_SURFACES in the design page
  */
 
-export type { ThemeColor } from "./types";
+export type { ThemeColor, DesignConfig, StyleOption, LibraryStyleOptions } from "./types";
 export {
   SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES,
   DAISY_THEMES, HEROUI_MARKETING_THEMES,
@@ -21,7 +21,7 @@ import { MobileNativewind, MobileGluestack } from "./mobile";
 import { EmailReactEmail } from "./email";
 import { DocsNextra, DocsShadcnCustom } from "./docs";
 
-import type { ThemeColor } from "./types";
+import type { ThemeColor, DesignConfig } from "./types";
 import {
   SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES,
   DAISY_THEMES, HEROUI_MARKETING_THEMES,
@@ -31,7 +31,7 @@ import {
 // SCAFFOLD_REGISTRY — surface → library → preview component
 // ---------------------------------------------------------------------------
 
-export const SCAFFOLD_REGISTRY: Record<string, Record<string, React.ComponentType<{ themeColor?: ThemeColor }>>> = {
+export const SCAFFOLD_REGISTRY: Record<string, Record<string, React.ComponentType<{ themeColor?: ThemeColor; config?: DesignConfig }>>> = {
   "web-app": {
     shadcn:    WebAppShadcn,
     mantine:   WebAppMantine,

components/design-scaffolds/types.ts

@@ -19,6 +19,35 @@ export interface ThemeColor {
   mutedText?: string;
 }
 
+// ---------------------------------------------------------------------------
+// Design configurator types — used by the surface configurator and scaffolds
+// ---------------------------------------------------------------------------
+
+export interface StyleOption {
+  id: string;
+  label: string;
+  description?: string;
+}
+
+export interface LibraryStyleOptions {
+  modes: StyleOption[];
+  backgrounds: StyleOption[];
+  navStyles: StyleOption[];
+  headerStyles: StyleOption[];
+  components: StyleOption[];
+  fonts: StyleOption[];
+  defaultConfig: DesignConfig;
+}
+
+export interface DesignConfig {
+  mode: "dark" | "light";
+  background: string;
+  nav: string;
+  header: string;
+  components: string[];
+  font: string;
+}
+
 // Shared mock data
 export const TABLE_ROWS = [
   { name: "Alice Martin",  email: "alice@co.com",  role: "Admin",   status: "Active",   date: "Jan 12" },