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,