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/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" },