feat(presets): add persona library (Midnight, Cyberpunk, Corporate, Minimalist)

buffos · buffos · commit 24829f01af06 · 2026-02-15T22:00:37.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file. We will log
 - **Responsive Layout Tokens**: Introduced a new `basic-layout` plugin to manage global responsive breakpoints, container widths, and gutter sizes.
 - **Motion & Animation System**: Implemented a dedicated `basic-motion` plugin with global duration and easing tokens, integrated across all components for smooth, consistent transitions.
 - **Custom HTML Sandbox**: Added a new sandbox plugin allowing users to test their current theme against custom markup with real-time feedback.
+- **Theme Presets (Personas)**: Introduced a library of "One-Click Personas" (Midnight Pro, Cyberpunk, Corporate Clean, Minimalist) for rapid theme experimentation.
 
 ### Changed
 
diff --git a/src/app/preview.ts b/src/app/preview.ts
@@ -73,16 +73,15 @@ const createIframe = (): HTMLIFrameElement => {
         <style>${css}</style>
       </head>
       <body>
-        ${modules
-          .map(
-            (mod: PreviewModule, index: number) => `
+        ${modules.length === 1 
+          ? `<div class="preview-pane">${modules[0].render(config)}</div>` 
+          : modules.map((mod: PreviewModule, index: number) => `
               <details class="preview-accordion"${index === 0 ? ' open' : ''}>
                 <summary>${mod.title}</summary>
                 <div class="preview-pane">${mod.render(config)}</div>
               </details>
-            `
-          )
-          .join('\n')}
+            `).join('\n')
+        }
       </body>
     </html>
   `;
diff --git a/src/app/registry.ts b/src/app/registry.ts
@@ -12,6 +12,7 @@ export type ControlApi = {
   getConfig: () => ThemeConfig;
   updateConfig: (mutator: (current: ThemeConfig) => ThemeConfig) => void;
   subscribe: (listener: (config: ThemeConfig) => void) => () => void;
+  setActivePreview: (ids: string[]) => void;
 };
 
 export type ControlsRegistry = Record<string, ControlModule>;
diff --git a/src/app/ui.ts b/src/app/ui.ts
@@ -6,6 +6,7 @@ import { inputsControlModule } from '../plugins/basic-inputs';
 import { layoutControlModule } from '../plugins/basic-layout';
 import { modalControlModule } from '../plugins/basic-modal';
 import { motionControlModule } from '../plugins/basic-motion';
+import { presetsControlModule } from '../plugins/basic-presets';
 import { radiusControlModule } from '../plugins/basic-radius';
 import { sandboxControlModule } from '../plugins/basic-sandbox';
 import { shadowControlModule } from '../plugins/basic-shadow';
@@ -21,6 +22,7 @@ import type { ControlsRegistry } from './registry';
 // here we will place all controls we will build
 export const controlsRegistry: ControlsRegistry = {
   name: themeNameControlModule,
+  presets: presetsControlModule,
   sandbox: sandboxControlModule,
   layout: layoutControlModule,
   styleguide: styleguideControlModule,
diff --git a/src/main.ts b/src/main.ts
@@ -80,7 +80,12 @@ if (!controlsHost) {
 const preview = createPreview();
 preview.mount(previewHost);
 
-const controlApi = { getConfig, updateConfig, subscribe };
+const controlApi = { 
+  getConfig, 
+  updateConfig, 
+  subscribe,
+  setActivePreview: (ids: string[]) => preview.setActive(ids),
+};
 const controlCleanups: (() => void)[] = [];
 const openIds = new Set<string>();
 const accordions: { details: HTMLDetailsElement; id: string }[] = [];
diff --git a/src/plugins/basic-presets/index.ts b/src/plugins/basic-presets/index.ts
@@ -0,0 +1,64 @@
+import type { ControlModule } from '../../app/registry';
+import { buildThemeConfig, type PartialThemeConfig } from '../../compiler/types';
+
+import { THEME_PRESETS } from './presets';
+
+const renderPresetCard = (id: string, preset: PartialThemeConfig, activeName: string) => {
+  const isActive = activeName === preset.name;
+  const primary = preset.colors?.primary?.[500] ?? '#ccc';
+  const neutral = preset.colors?.neutral?.[50] ?? '#fff';
+  const neutral900 = preset.colors?.neutral?.[900] ?? '#000';
+  
+  return `
+    <div class="preset-card ${isActive ? 'active' : ''}" 
+         data-id="${id}"
+         style="cursor: pointer; padding: 12px; border-radius: 12px; border: 2px solid ${isActive ? 'var(--color-primary-500)' : 'rgba(128,128,128,0.1)'}; background: var(--surface-card); transition: all 0.2s ease; position: relative; overflow: hidden;">
+      <div style="display: flex; gap: 6px; margin-bottom: 8px;">
+        <div style="width: 24px; height: 24px; border-radius: 50%; background: ${primary}; border: 1px solid rgba(0,0,0,0.1);"></div>
+        <div style="width: 24px; height: 24px; border-radius: 50%; background: ${neutral}; border: 1px solid rgba(0,0,0,0.1);"></div>
+        <div style="width: 24px; height: 24px; border-radius: 50%; background: ${neutral900}; border: 1px solid rgba(0,0,0,0.1);"></div>
+      </div>
+      <div style="font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${preset.name}</div>
+      ${isActive ? '<div style="position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-500);"></div>' : ''}
+    </div>
+  `;
+};
+
+export const presetsControlModule: ControlModule = {
+  id: 'presets',
+  title: 'Theme Presets',
+  mount: (container, api) => {
+    const render = () => {
+      const cfg = api.getConfig();
+      const activeName = cfg.name;
+      
+      container.innerHTML = `
+        <div class="control-group">
+          <label style="margin-bottom: 12px; display: block; opacity: 0.8;">Choose a Visual Persona</label>
+          <div class="presets-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+            ${Object.entries(THEME_PRESETS).map(([id, preset]) => renderPresetCard(id, preset, activeName)).join('')}
+          </div>
+        </div>
+        <p class="controls-hint" style="font-size: 11px; opacity: 0.6; margin-top: 12px;">
+          Applying a preset will overwrite your current color and radius settings.
+        </p>
+      `;
+
+      container.querySelectorAll<HTMLElement>('.preset-card').forEach(card => {
+        card.addEventListener('click', () => {
+          const id = card.dataset.id;
+          if (id && THEME_PRESETS[id]) {
+            const fragment = THEME_PRESETS[id];
+            api.updateConfig(current => buildThemeConfig(fragment, [current]));
+            api.setActivePreview(['styleguide']);
+          }
+        });
+      });
+    };
+
+    const unsubscribe = api.subscribe(render);
+    render();
+
+    return unsubscribe;
+  }
+};
diff --git a/src/plugins/basic-presets/presets.ts b/src/plugins/basic-presets/presets.ts
@@ -0,0 +1,110 @@
+import type { PartialThemeConfig } from '../../compiler/types';
+import { generateScale } from '../../utils/colors';
+
+export const THEME_PRESETS: Record<string, PartialThemeConfig> = {
+  aurora: {
+    name: 'Aurora',
+    colors: {
+      primary: generateScale('#3b82f6'),
+      secondary: generateScale('#10b981'),
+      tertiary: generateScale('#8b5cf6'),
+      neutral: generateScale('#f8fafc'),
+      tuning: {
+        tintStrength: 60,
+        darkDepth: 25,
+        lightDepth: 92,
+        hueOffset: 0,
+      },
+      paletteMode: 'analogous',
+    },
+    radius: { sm: '4px', md: '8px', lg: '16px' },
+    motion: {
+      durations: { fast: 150, base: 300, slow: 500 },
+      easing: { in: 'ease-in', out: 'ease-out', inOut: 'ease-in-out' }
+    }
+  },
+  midnight: {
+    name: 'Midnight Pro',
+    colors: {
+      primary: generateScale('#7c4dff'),
+      secondary: generateScale('#448aff'),
+      tertiary: generateScale('#b388ff'),
+      neutral: generateScale('#0a0b10'),
+      tuning: {
+        tintStrength: 40,
+        darkDepth: 12,
+        lightDepth: 95,
+        hueOffset: 0,
+      },
+      paletteMode: 'analogous',
+    },
+    radius: { sm: '6px', md: '12px', lg: '24px' },
+    motion: {
+      durations: { fast: 120, base: 250, slow: 450 },
+      easing: {
+        in: 'cubic-bezier(0.4, 0, 1, 1)',
+        out: 'cubic-bezier(0, 0, 0.2, 1)',
+        inOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      }
+    }
+  },
+  cyberpunk: {
+    name: 'Cyberpunk',
+    colors: {
+      primary: generateScale('#ff00cc'),
+      secondary: generateScale('#00fbff'),
+      tertiary: generateScale('#ffff00'),
+      neutral: generateScale('#050505'),
+      tuning: {
+        tintStrength: 80,
+        darkDepth: 5,
+        lightDepth: 90,
+        hueOffset: 0,
+      },
+      paletteMode: 'complementary',
+    },
+    radius: { sm: '0px', md: '0px', lg: '0px' },
+    motion: {
+      durations: { fast: 80, base: 150, slow: 300 },
+      easing: {
+        in: 'steps(4, end)',
+        out: 'steps(4, start)',
+        inOut: 'cubic-bezier(1, 0, 0, 1)',
+      }
+    }
+  },
+  corporate: {
+    name: 'Corporate Clean',
+    colors: {
+      primary: generateScale('#0052cc'),
+      secondary: generateScale('#0747a6'),
+      tertiary: generateScale('#2684ff'),
+      neutral: generateScale('#f4f5f7'),
+      tuning: {
+        tintStrength: 10,
+        darkDepth: 25,
+        lightDepth: 92,
+        hueOffset: 0,
+      },
+      paletteMode: 'analogous',
+    },
+    radius: { sm: '2px', md: '4px', lg: '8px' },
+  },
+  minimalist: {
+    name: 'Minimalist',
+    colors: {
+      primary: generateScale('#171717'),
+      secondary: generateScale('#404040'),
+      tertiary: generateScale('#737373'),
+      neutral: generateScale('#ffffff'),
+      tuning: {
+        tintStrength: 0,
+        darkDepth: 20,
+        lightDepth: 100,
+        hueOffset: 0,
+      },
+      paletteMode: 'manual',
+    },
+    radius: { sm: '8px', md: '16px', lg: '32px' },
+  }
+};
