mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX: all sections on by default, palette at top, fix font loading

Browse Source 
- All library defaultConfigs now enable every available section
- Color palette moved above Library picker in right panel (top of mind)
- Added fontImport() helper that injects Google Fonts @import into each
  scaffold's style tag so Plus Jakarta, DM Sans, Geist, Inter, Nunito
  actually load instead of falling back to system-ui

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-06 10:31:37 -08:00
parent eff75a1ab5
commit ef9f5a6ad3
2 changed files with 48 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/[workspace]/project/[projectId]/design/page.tsx
View File

@@ -243,7 +243,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
{ id: "dm-sans", label: "DM Sans" },
{ id: "geist", label: "Geist" },
],
defaultConfig: { mode: "dark", background: "solid", nav: "standard", header: "centered", components: ["features", "pricing"], font: "system" },
defaultConfig: { mode: "dark", background: "solid", nav: "standard", header: "centered", components: ["logos", "features", "steps", "testimonials", "pricing", "faq", "cta"], font: "system" },
},
"hero-ui": {
modes: [{ id: "light", label: "Light" }, { id: "dark", label: "Dark" }],
@@ -277,7 +277,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
{ id: "geist", label: "Geist" },
{ id: "nunito", label: "Nunito" },
],
defaultConfig: { mode: "light", background: "clean", nav: "blur", header: "animated-badge", components: ["features", "metrics"], font: "system" },
defaultConfig: { mode: "light", background: "clean", nav: "blur", header: "animated-badge", components: ["features", "metrics", "avatars", "pricing", "testimonials", "cta"], font: "system" },
},
"aceternity": {
modes: [{ id: "dark", label: "Dark" }, { id: "light", label: "Light" }],
@@ -313,7 +313,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
{ id: "geist", label: "Geist" },
{ id: "plus-jakarta", label: "Plus Jakarta" },
],
defaultConfig: { mode: "dark", background: "gradient", nav: "minimal", header: "gradient-text", components: ["features", "moving-cards"], font: "system" },
defaultConfig: { mode: "dark", background: "gradient", nav: "minimal", header: "gradient-text", components: ["badge", "features", "moving-cards", "bento", "pricing", "cta"], font: "system" },
},
"tailwind-only": {
modes: [{ id: "light", label: "Light" }, { id: "dark", label: "Dark" }],
@@ -349,7 +349,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
{ id: "plus-jakarta", label: "Plus Jakarta" },
{ id: "dm-sans", label: "DM Sans" },
],
defaultConfig: { mode: "light", background: "clean", nav: "minimal", header: "editorial", components: ["features", "stats", "pricing"], font: "system" },
defaultConfig: { mode: "light", background: "clean", nav: "minimal", header: "editorial", components: ["badge", "logos", "features", "stats", "testimonials", "pricing", "faq", "cta"], font: "system" },
},
};
@@ -654,6 +654,36 @@ function SurfaceSection({
)}
</div>
{/* Palette (colour) — top of mind, shown right after Lock */}
{availableColorThemes.length > 0 && (
<div style={{ display: "flex", flexDirection: "column", gap: 7, paddingBottom: 12, borderBottom: "1px solid #f0ece4" }}>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>Colour</span>
<div style={{ display: "flex", gap: 7, flexWrap: "wrap", alignItems: "center" }}>
{availableColorThemes.map(ct => (
<button
key={ct.id}
title={ct.label}
onClick={() => !isLocked && setSelectedColorTheme(ct)}
disabled={isLocked}
style={{
width: 22, height: 22, borderRadius: "50%", border: "none", cursor: isLocked ? "not-allowed" : "pointer",
background: ct.bg ? `linear-gradient(135deg, ${ct.bg} 50%, ${ct.primary} 50%)` : ct.primary,
outline: activeColorTheme?.id === ct.id ? `2.5px solid ${ct.primary}` : "2px solid transparent",
outlineOffset: 2, transition: "transform 0.12s",
opacity: isLocked ? 0.4 : 1,
boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
}}
onMouseEnter={e => { if (!isLocked) (e.currentTarget as HTMLElement).style.transform = "scale(1.18)"; }}
onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = "scale(1)"; }}
/>
))}
</div>
{activeColorTheme && (
<span style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "Outfit" }}>{activeColorTheme.label}</span>
)}
</div>
)}
{/* Library — simple name buttons */}
<div style={{ display: "flex", flexDirection: "column", gap: 7, paddingBottom: 12, borderBottom: "1px solid #f0ece4" }}>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>Library</span>
@@ -696,35 +726,6 @@ function SurfaceSection({
/>
)}
{/* Palette (colour) — shown after configurator */}
{availableColorThemes.length > 0 && (
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<span style={{ fontSize: "0.68rem", fontWeight: 600, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.08em", fontFamily: "Outfit" }}>Colour</span>
<div style={{ display: "flex", gap: 6, flexWrap: "wrap", alignItems: "center" }}>
{availableColorThemes.map(ct => (
<button
key={ct.id}
title={ct.label}
onClick={() => !isLocked && setSelectedColorTheme(ct)}
disabled={isLocked}
style={{
width: 20, height: 20, borderRadius: "50%", border: "none", cursor: isLocked ? "not-allowed" : "pointer",
background: ct.bg ? `linear-gradient(135deg, ${ct.bg} 50%, ${ct.primary} 50%)` : ct.primary,
outline: activeColorTheme?.id === ct.id ? `2px solid ${ct.primary}` : "none",
outlineOffset: 2, transition: "transform 0.12s",
opacity: isLocked ? 0.4 : 1,
}}
onMouseEnter={e => { if (!isLocked) (e.currentTarget as HTMLElement).style.transform = "scale(1.15)"; }}
onMouseLeave={e => { (e.currentTarget as HTMLElement).style.transform = "scale(1)"; }}
/>
))}
{activeColorTheme && (
<span style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "Outfit" }}>{activeColorTheme.label}</span>
)}
</div>
</div>
)}
</div>{/* end inner padding div */}
</div>{/* end right panel */}
</div>