fix: support grid-cols-4, accent color, and header layout controls

- Fix grid columns 4 by using conditional logic instead of string interpolation
- Simplify CSS generator to only generate accent colors (mood/typography/shape/density now use data attributes)
- Add header component to all 7 preview pages with logo, nav, and cart
- Add header layout CSS for centered and minimal variants
- Move nav display property to CSS to enable minimal mode hiding

This resolves all high-priority theme control issues:
- Grid columns now supports 2, 3, and 4 columns
- Accent color picker now updates button colors
- Header layout control now works (standard, centered, minimal)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/css/theme-layer2-attributes.css

@@ -155,3 +155,22 @@
 .preview-frame[data-density="compact"] {
   --t-density: 0.85;
 }
+
+/* Header Layout */
+.shop-nav {
+  display: flex;
+}
+
+.preview-frame[data-header="centered"] .shop-header {
+  flex-direction: column;
+  gap: 0.75rem;
+  text-align: center;
+}
+
+.preview-frame[data-header="centered"] .shop-nav {
+  justify-content: center;
+}
+
+.preview-frame[data-header="minimal"] .shop-nav {
+  display: none !important;
+}

lib/simpleshop_theme/theme/css_generator.ex

@@ -19,10 +19,6 @@ defmodule SimpleshopTheme.Theme.CSSGenerator do
     .preview-frame, .shop-root {
       #{generate_accent(settings.accent_color)}
       #{generate_secondary_colors(settings)}
-      #{generate_mood(settings.mood)}
-      #{generate_typography(settings.typography)}
-      #{generate_shape(settings.shape)}
-      #{generate_density(settings.density)}
     }
     """
     |> String.trim()

lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex

@@ -1,4 +1,22 @@
 <div class="min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+  <!-- Header -->
+  <header class="shop-header" style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between;">
+    <div class="shop-logo">
+      <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: 1.25rem; font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+        Store Name
+      </span>
+    </div>
+    <nav class="shop-nav" style="gap: 1.5rem;">
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">About</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+    </nav>
+    <div class="shop-cart">
+      <button style="color: var(--t-text-primary); background: none; border: none; cursor: pointer;">Cart (0)</button>
+    </div>
+  </header>
+
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
     <h1 class="text-4xl md:text-5xl font-bold mb-6 text-center" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
       About Us

lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex

@@ -1,4 +1,22 @@
 <div class="min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+  <!-- Header -->
+  <header class="shop-header" style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between;">
+    <div class="shop-logo">
+      <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: 1.25rem; font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+        Store Name
+      </span>
+    </div>
+    <nav class="shop-nav" style="gap: 1.5rem;">
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">About</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+    </nav>
+    <div class="shop-cart">
+      <button style="color: var(--t-text-primary); background: none; border: none; cursor: pointer;">Cart (0)</button>
+    </div>
+  </header>
+
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <h1 class="text-3xl md:text-4xl font-bold mb-8" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
       Shopping Cart

lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex

@@ -1,5 +1,23 @@
 <div class="min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
   <!-- Header -->
+  <header class="shop-header" style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between;">
+    <div class="shop-logo">
+      <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: 1.25rem; font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+        Store Name
+      </span>
+    </div>
+    <nav class="shop-nav" style="gap: 1.5rem;">
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">About</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+    </nav>
+    <div class="shop-cart">
+      <button style="color: var(--t-text-primary); background: none; border: none; cursor: pointer;">Cart (0)</button>
+    </div>
+  </header>
+
+  <!-- Page Header -->
   <div class="border-b" style="background-color: var(--t-surface-raised); border-color: var(--t-border-default);">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <h1 class="text-3xl md:text-4xl font-bold mb-2" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
@@ -95,7 +113,15 @@
           </select>
         </div>
 
-        <div class={"grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-#{@theme_settings.grid_columns || "3"}"}>
+        <div class={[
+          "grid gap-6 grid-cols-1 sm:grid-cols-2",
+          case @theme_settings.grid_columns do
+            "2" -> "lg:grid-cols-2"
+            "3" -> "lg:grid-cols-3"
+            "4" -> "lg:grid-cols-4"
+            _ -> "lg:grid-cols-3"
+          end
+        ]}>
           <%= for product <- @preview_data.products do %>
             <div
               class="group overflow-hidden transition-all"

lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex

@@ -1,4 +1,22 @@
 <div class="min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+  <!-- Header -->
+  <header class="shop-header" style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between;">
+    <div class="shop-logo">
+      <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: 1.25rem; font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+        Store Name
+      </span>
+    </div>
+    <nav class="shop-nav" style="gap: 1.5rem;">
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">About</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+    </nav>
+    <div class="shop-cart">
+      <button style="color: var(--t-text-primary); background: none; border: none; cursor: pointer;">Cart (0)</button>
+    </div>
+  </header>
+
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
     <h1 class="text-4xl md:text-5xl font-bold mb-6 text-center" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
       Contact Us

lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex

@@ -1,5 +1,24 @@
-<div class="min-h-screen flex items-center justify-center" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
-  <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
+<div class="min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+  <!-- Header -->
+  <header class="shop-header" style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between;">
+    <div class="shop-logo">
+      <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: 1.25rem; font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+        Store Name
+      </span>
+    </div>
+    <nav class="shop-nav" style="gap: 1.5rem;">
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">About</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+    </nav>
+    <div class="shop-cart">
+      <button style="color: var(--t-text-primary); background: none; border: none; cursor: pointer;">Cart (0)</button>
+    </div>
+  </header>
+
+  <div class="flex items-center justify-center" style="min-height: calc(100vh - 4rem);">
+    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
     <h1 class="text-8xl md:text-9xl font-bold mb-4" style="font-family: var(--t-font-heading); color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); font-weight: var(--t-heading-weight);">
       404
     </h1>
@@ -52,5 +71,6 @@
         </div>
       <% end %>
     </div>
+    </div>
   </div>
 </div>

lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex

@@ -1,4 +1,22 @@
 <div class="min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+  <!-- Header -->
+  <header class="shop-header" style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between;">
+    <div class="shop-logo">
+      <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: 1.25rem; font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+        Store Name
+      </span>
+    </div>
+    <nav class="shop-nav" style="gap: 1.5rem;">
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">About</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+    </nav>
+    <div class="shop-cart">
+      <button style="color: var(--t-text-primary); background: none; border: none; cursor: pointer;">Cart (0)</button>
+    </div>
+  </header>
+
   <!-- Hero Section -->
   <div class="relative" style="background-color: var(--t-surface-raised);">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
@@ -25,7 +43,15 @@
       Featured Products
     </h2>
 
-    <div class={"grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-#{@theme_settings.grid_columns || "3"}"}>
+    <div class={[
+      "grid gap-6 grid-cols-1 sm:grid-cols-2",
+      case @theme_settings.grid_columns do
+        "2" -> "lg:grid-cols-2"
+        "3" -> "lg:grid-cols-3"
+        "4" -> "lg:grid-cols-4"
+        _ -> "lg:grid-cols-3"
+      end
+    ]}>
       <%= for product <- Enum.take(@preview_data.products, 6) do %>
         <div
           class="group overflow-hidden transition-all"

lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex

@@ -2,6 +2,24 @@
   product = List.first(@preview_data.products)
 %>
 <div class="min-h-screen" style="background-color: var(--t-surface-base); font-family: var(--t-font-body); color: var(--t-text-primary);">
+  <!-- Header -->
+  <header class="shop-header" style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between;">
+    <div class="shop-logo">
+      <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: 1.25rem; font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+        Store Name
+      </span>
+    </div>
+    <nav class="shop-nav" style="gap: 1.5rem;">
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">About</a>
+      <a href="#" style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+    </nav>
+    <div class="shop-cart">
+      <button style="color: var(--t-text-primary); background: none; border: none; cursor: pointer;">Cart (0)</button>
+    </div>
+  </header>
+
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <!-- Breadcrumb -->
     <div class="mb-8 flex items-center gap-2 text-sm" style="color: var(--t-text-secondary);">