studio-engine 0.4.1

data/app/views/schema/index.html.erb

@@ -0,0 +1,85 @@
+<section class="mb-6" x-data="{ search: '' }">
+  <div class="flex items-center justify-between mb-4">
+    <h2 class="text-2xl font-bold text-heading">Database Schema</h2>
+    <span class="text-sm text-muted"><%= @tables.size %> tables</span>
+  </div>
+
+  <div class="mb-6 relative">
+    <input type="text" placeholder="Filter tables..." x-model="search"
+           @keydown.escape.prevent="search = ''"
+           class="input-field pr-10 py-2.5 text-sm placeholder-muted" />
+    <button x-show="search.length > 0" x-cloak @click="search = ''"
+            class="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-heading transition">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+    <% @tables.each do |table| %>
+      <div class="card p-0 overflow-hidden"
+           x-show="!search || '<%= table[:name] %>'.includes(search.toLowerCase())" x-cloak>
+        <div class="px-4 py-3 border-b border-subtle flex items-center justify-between">
+          <h3 class="text-heading font-bold text-sm font-mono"><%= table[:name] %></h3>
+          <span class="text-xs text-muted"><%= table[:columns].size %> columns</span>
+        </div>
+
+        <div class="overflow-x-auto">
+          <table class="w-full text-xs">
+            <thead>
+              <tr class="text-left text-muted border-b border-subtle">
+                <th class="px-4 py-2 font-medium">Column</th>
+                <th class="px-4 py-2 font-medium">Type</th>
+                <th class="px-4 py-2 font-medium">Details</th>
+              </tr>
+            </thead>
+            <tbody>
+              <% table[:columns].each do |col| %>
+                <tr class="border-b border-subtle last:border-0 hover:bg-surface-alt transition">
+                  <td class="px-4 py-1.5">
+                    <span class="font-semibold text-heading font-mono"><%= col.name %></span>
+                    <% if col.name == "id" %>
+                      <span class="ml-1 text-primary font-bold">PK</span>
+                    <% end %>
+                  </td>
+                  <td class="px-4 py-1.5 text-secondary font-mono"><%= col.sql_type %></td>
+                  <td class="px-4 py-1.5">
+                    <span class="inline-flex gap-1.5 flex-wrap">
+                      <% unless col.null %>
+                        <span class="text-warning font-medium">NOT NULL</span>
+                      <% end %>
+                      <% if col.default.present? %>
+                        <span class="text-muted">default: <span class="text-secondary font-mono"><%= col.default %></span></span>
+                      <% end %>
+                    </span>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+
+        <% if table[:indexes].any? %>
+          <div class="px-4 py-2 border-t border-subtle bg-surface-alt">
+            <p class="text-muted text-xs font-medium mb-1">Indexes</p>
+            <% table[:indexes].each do |idx| %>
+              <div class="flex items-center gap-2 text-xs py-0.5">
+                <span class="text-secondary font-mono truncate flex-1"><%= idx.columns.join(", ") %></span>
+                <% if idx.unique %>
+                  <span class="text-primary font-medium shrink-0">UNIQUE</span>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <template x-if="search && document.querySelectorAll('[x-show]:not([style*=\'display: none\'])').length === 0">
+    <div class="empty-state py-12 text-center">
+      <p class="text-muted">No tables matching "<span x-text="search"></span>"</p>
+    </div>
+  </template>
+</section>

data/app/views/sessions/_sso_continue.html.erb

@@ -0,0 +1,18 @@
+<% if sso_user_available? %>
+  <div class="mb-6">
+    <%= form_with url: sso_continue_path, method: :post do %>
+      <button type="submit" class="btn btn-primary btn-lg w-full flex items-center justify-center gap-3">
+        <% if sso_hub_logo %>
+          <img src="<%= sso_hub_logo %>" alt="<%= sso_source_app %>" width="20" height="20" class="w-5 h-5 object-contain">
+        <% end %>
+        Continue as <%= sso_display_name %>
+      </button>
+    <% end %>
+
+    <div class="flex items-center gap-3 mt-5">
+      <div class="flex-1 h-px border-t border-subtle"></div>
+      <span class="text-muted text-xs uppercase tracking-wider">or sign in below</span>
+      <div class="flex-1 h-px border-t border-subtle"></div>
+    </div>
+  </div>
+<% end %>

data/app/views/sessions/new.html.erb

@@ -0,0 +1,79 @@
+<%
+  has_sso = defined?(sso_user_available?) && sso_user_available?
+  logo_path = Studio.logo_for("Auth Logo")
+  words = Studio.app_name.split
+  last_word = words.pop
+  prefix = words.join(" ")
+%>
+
+<div class="min-h-[70vh] flex items-center justify-center">
+  <div class="w-full max-w-md">
+    <div class="text-center mb-8">
+      <% if logo_path %>
+        <img src="<%= logo_path %>" alt="<%= Studio.app_name %>" class="w-20 h-20 rounded-full shadow-lg mx-auto mb-4">
+      <% end %>
+      <h1 class="text-3xl font-extrabold text-heading tracking-tight"><%= prefix %> <span class="text-primary"><%= last_word %></span></h1>
+      <p class="text-secondary mt-2">Log in to continue</p>
+    </div>
+
+    <% if has_sso %>
+      <div x-data="{ revealed: false }" class="relative" :class="{ 'select-none': !revealed }">
+          <div x-show="!revealed" @click="revealed = true; setTimeout(() => $refs.emailField.focus(), 500)"
+               x-transition:leave="transition ease-in duration-500"
+               x-transition:leave-start="opacity-100"
+               x-transition:leave-end="opacity-0"
+               class="absolute inset-0 z-10 rounded-2xl cursor-pointer flex items-center justify-center backdrop-overlay">
+            <span class="text-secondary text-xs font-medium uppercase tracking-wider">Click to show other options</span>
+          </div>
+    <% end %>
+    <div class="card p-8 shadow">
+      <% if has_sso %>
+        <div class="relative" style="z-index: 20;">
+          <%= render "sessions/sso_continue" %>
+        </div>
+      <% else %>
+        <%= render "sessions/sso_continue" if defined?(sso_user_available?) && sso_user_available? %>
+      <% end %>
+
+      <%= form_tag login_path, method: :post do %>
+        <div class="mb-5">
+          <label for="email" class="block text-sm text-secondary mb-2 font-medium">Email</label>
+          <input type="email" name="email" id="email" value="<%= params[:email] %>" <%= 'autofocus' unless has_sso %>
+            x-ref="emailField"
+            class="input-field"
+            placeholder="you@example.com">
+        </div>
+
+        <div class="mb-6">
+          <label for="password" class="block text-sm text-secondary mb-2 font-medium">Password</label>
+          <input type="password" name="password" id="password"
+            class="input-field"
+            placeholder="Your password">
+        </div>
+
+        <button type="submit" class="btn btn-primary btn-lg w-full">
+          Log In
+        </button>
+      <% end %>
+
+      <div class="relative my-6">
+        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-subtle"></div></div>
+        <div class="relative flex justify-center text-sm"><span class="bg-surface px-3 text-secondary">or</span></div>
+      </div>
+
+      <%= button_to "/auth/google_oauth2", method: :post, data: { turbo: false },
+        class: "btn btn-google btn-lg w-full gap-3" do %>
+        <%= render "components/google_logo" %>
+        Sign in with Google
+      <% end %>
+
+      <p class="text-center text-secondary text-sm mt-6">
+        Don't have an account?
+        <%= link_to "Sign up", signup_path, class: "text-primary hover:text-primary-300 font-medium underline underline-offset-2" %>
+      </p>
+    </div>
+    <% if has_sso %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/theme_settings/edit.html.erb

@@ -0,0 +1,376 @@
+<div class="max-w-5xl mx-auto px-4 py-8" x-data="themeEditor()">
+  <div class="flex items-center justify-between mb-8">
+    <h1 class="text-2xl font-bold text-heading">Theme</h1>
+    <div class="flex gap-3">
+      <%= form_tag("/admin/theme/regenerate", method: :post) do %>
+        <button type="submit" class="btn btn-outline btn-sm">Regenerate Cache</button>
+      <% end %>
+    </div>
+  </div>
+
+  <%= form_tag("/admin/theme", method: :patch) do %>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <!-- Color Inputs -->
+      <div class="card p-6">
+        <h2 class="text-lg font-bold text-heading mb-6">Role Colors</h2>
+
+        <% ThemeSetting::ROLES.each do |role| %>
+          <% db_col = ThemeSetting.db_column_for(role) %>
+          <% db_val = @theme_setting.read_attribute(db_col) %>
+          <% default_val = @defaults[role] %>
+          <% current_val = db_val.presence || default_val %>
+          <div class="flex items-center gap-4 mb-4">
+            <input type="color"
+                   :value="colors.<%= role %>"
+                   @input="colors.<%= role %> = $event.target.value; updatePreview()"
+                   class="w-10 h-10 rounded cursor-pointer border border-subtle"
+                   style="padding: 1px;">
+            <div class="flex-1">
+              <div class="flex items-center gap-2">
+                <span class="text-heading font-medium text-sm"><%= role.to_s.titleize %></span>
+                <% if db_val.present? %>
+                  <span class="text-xs text-muted">(custom)</span>
+                <% end %>
+              </div>
+              <input type="text"
+                     name="theme_setting[<%= db_col %>]"
+                     x-model="colors.<%= role %>"
+                     @input="updatePreview()"
+                     @blur="normalizeHex('<%= role %>')"
+                     class="text-xs text-secondary font-mono"
+                     style="background: transparent; border: none; border-bottom: 1px dashed currentColor; padding: 0; width: 5.5rem; outline: none;"
+                     spellcheck="false">
+            </div>
+            <% if default_val %>
+              <button type="button"
+                      @click="resetColor('<%= role %>', '<%= default_val %>')"
+                      class="text-xs text-muted hover:text-heading transition"
+                      title="Reset to default (<%= default_val %>)">
+                Reset
+              </button>
+            <% end %>
+          </div>
+        <% end %>
+
+        <div class="flex gap-3 mt-6 pt-6 border-t border-subtle">
+          <button type="submit" class="btn btn-primary">Save Theme</button>
+        </div>
+      </div>
+
+      <!-- Live Preview -->
+      <div class="space-y-6">
+        <!-- Dark Preview -->
+        <div class="rounded-xl border border-subtle overflow-hidden">
+          <div class="px-4 py-2 bg-surface-alt">
+            <span class="text-xs font-bold text-secondary uppercase tracking-wider">Dark Mode Preview</span>
+          </div>
+          <div class="p-6" :style="darkPreviewStyle()">
+            <h3 class="font-bold mb-1" :style="{ color: '#ffffff' }">Page Heading</h3>
+            <p class="text-sm mb-4" :style="{ color: '#e2e8f0' }">Body text on the page surface.</p>
+            <div class="rounded-lg p-4 mb-4" :style="darkSurfaceStyle()">
+              <p class="text-sm mb-3" :style="{ color: '#94a3b8' }">Card on surface with secondary text.</p>
+              <div class="flex gap-2">
+                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.primary }">Primary</button>
+                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.success || '#4BAF50' }">Accent</button>
+                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.danger || '#EF4444' }">Danger</button>
+              </div>
+            </div>
+            <div class="flex gap-2">
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: colors.primary + '33', color: colors.primary, border: '1px solid ' + colors.primary + '55' }">Badge</span>
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: (colors.success || '#4BAF50') + '33', color: colors.success || '#4BAF50', border: '1px solid ' + (colors.success || '#4BAF50') + '55' }">Success</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Light Preview -->
+        <div class="rounded-xl border border-subtle overflow-hidden">
+          <div class="px-4 py-2 bg-surface-alt">
+            <span class="text-xs font-bold text-secondary uppercase tracking-wider">Light Mode Preview</span>
+          </div>
+          <div class="p-6" :style="lightPreviewStyle()">
+            <h3 class="font-bold mb-1" :style="{ color: '#0f172a' }">Page Heading</h3>
+            <p class="text-sm mb-4" :style="{ color: '#334155' }">Body text on the page surface.</p>
+            <div class="rounded-lg p-4 mb-4" :style="lightSurfaceStyle()">
+              <p class="text-sm mb-3" :style="{ color: '#64748b' }">Card on surface with secondary text.</p>
+              <div class="flex gap-2">
+                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.primary }">Primary</button>
+                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.success || '#4BAF50' }">Accent</button>
+                <button class="btn btn-sm text-white rounded-lg px-3 py-1.5 text-xs font-bold" :style="{ backgroundColor: colors.danger || '#EF4444' }">Danger</button>
+              </div>
+            </div>
+            <div class="flex gap-2">
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: colors.primary + '33', color: colors.primary, border: '1px solid ' + colors.primary + '55' }">Badge</span>
+              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium" :style="{ backgroundColor: (colors.success || '#4BAF50') + '33', color: colors.success || '#4BAF50', border: '1px solid ' + (colors.success || '#4BAF50') + '55' }">Success</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <%# ── Styleguide ── %>
+  <div class="border-t border-subtle mt-12 pt-12 space-y-12">
+
+    <% if Studio.theme_logos.any? %>
+    <%# ── Logos ── %>
+    <section>
+      <h2 class="text-xl font-bold text-heading mb-4">Logos</h2>
+      <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+        <% Studio.theme_logos.each do |logo| %>
+          <% file = logo.is_a?(Hash) ? logo[:file] : logo %>
+          <% title = logo.is_a?(Hash) ? logo[:title] : file %>
+          <div class="card p-4 space-y-3">
+            <p class="label-upper"><%= title %></p>
+            <div class="flex items-center justify-center w-20 h-20 rounded-lg" style="background-color: #ddd; background-image: linear-gradient(45deg, #777 25%, transparent 25%, transparent 75%, #777 75%), linear-gradient(45deg, #777 25%, transparent 25%, transparent 75%, #777 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px;">
+              <img src="/<%= file %>" alt="<%= title %>" class="max-w-16 max-h-16 rounded">
+            </div>
+            <p class="text-muted text-xs font-mono"><%= file %></p>
+          </div>
+        <% end %>
+      </div>
+    </section>
+    <% end %>
+
+    <%# ── Semantic Tokens ── %>
+    <section>
+      <h2 class="text-xl font-bold text-heading mb-4">Semantic Tokens</h2>
+      <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
+        <%
+          semantic_colors = [
+            { name: "Page",           utility: "bg-page",         type: :bg },
+            { name: "Surface",        utility: "bg-surface",      type: :bg },
+            { name: "Surface Alt",    utility: "bg-surface-alt",  type: :bg },
+            { name: "Inset",          utility: "bg-inset",        type: :bg },
+            { name: "Heading",        utility: "text-heading",    type: :text },
+            { name: "Body",           utility: "text-body",       type: :text },
+            { name: "Secondary",      utility: "text-secondary",  type: :text },
+            { name: "Muted",          utility: "text-muted",      type: :text },
+            { name: "Border",         utility: "border-subtle",   type: :border },
+            { name: "Border Strong",  utility: "border-strong",   type: :border },
+          ]
+        %>
+        <% semantic_colors.each do |c| %>
+          <div class="card p-3 flex items-center gap-3">
+            <% if c[:type] == :bg %>
+              <div class="w-8 h-8 rounded-full border border-subtle shrink-0 <%= c[:utility] %>"></div>
+            <% elsif c[:type] == :text %>
+              <div class="w-8 h-8 rounded-full border border-subtle shrink-0 bg-surface flex items-center justify-center">
+                <span class="text-sm font-bold <%= c[:utility] %>">A</span>
+              </div>
+            <% else %>
+              <div class="w-8 h-8 rounded-full shrink-0 border-2 <%= c[:utility] %> bg-transparent"></div>
+            <% end %>
+            <div class="min-w-0">
+              <p class="text-heading text-sm font-semibold truncate"><%= c[:name] %></p>
+              <p class="text-muted text-xs font-mono truncate"><%= c[:utility] %></p>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </section>
+
+    <%# ── Typography ── %>
+    <section>
+      <h2 class="text-xl font-bold text-heading mb-4">Typography</h2>
+      <div class="card p-6 space-y-4">
+        <p class="text-heading text-3xl font-extrabold">Heading — Montserrat 800</p>
+        <p class="text-heading text-xl font-bold">Subheading — Montserrat 700</p>
+        <p class="text-body text-base">Body text — The quick brown fox jumps over the lazy dog. Montserrat 400</p>
+        <p class="text-secondary text-sm">Secondary text — Additional context and metadata. Montserrat 400</p>
+        <p class="text-muted text-xs">Muted text — Timestamps, hints, and fine print. Montserrat 400</p>
+        <hr class="border-subtle">
+        <div class="flex flex-wrap gap-4">
+          <% [400, 500, 600, 700, 800, 900].each do |w| %>
+            <span class="text-heading text-lg" style="font-weight: <%= w %>"><%= w %></span>
+          <% end %>
+        </div>
+      </div>
+    </section>
+
+    <%# ── Buttons ── %>
+    <section>
+      <h2 class="text-xl font-bold text-heading mb-4">Buttons</h2>
+      <div class="card p-6 space-y-6">
+        <div>
+          <p class="label-upper mb-3">Primary</p>
+          <div class="flex flex-wrap items-center gap-3">
+            <button type="button" class="btn btn-primary btn-sm">Small</button>
+            <button type="button" class="btn btn-primary">Medium</button>
+            <button type="button" class="btn btn-primary btn-lg">Large</button>
+          </div>
+        </div>
+        <div>
+          <p class="label-upper mb-3">Secondary</p>
+          <div class="flex flex-wrap items-center gap-3">
+            <button type="button" class="btn btn-secondary btn-sm">Small</button>
+            <button type="button" class="btn btn-secondary">Medium</button>
+            <button type="button" class="btn btn-secondary btn-lg">Large</button>
+          </div>
+        </div>
+        <div>
+          <p class="label-upper mb-3">Outline</p>
+          <div class="flex flex-wrap items-center gap-3">
+            <button type="button" class="btn btn-outline btn-sm">Small</button>
+            <button type="button" class="btn btn-outline">Medium</button>
+            <button type="button" class="btn btn-outline btn-lg">Large</button>
+          </div>
+        </div>
+        <div>
+          <p class="label-upper mb-3">Danger</p>
+          <div class="flex flex-wrap items-center gap-3">
+            <button type="button" class="btn btn-danger btn-sm">Small</button>
+            <button type="button" class="btn btn-danger">Medium</button>
+            <button type="button" class="btn btn-danger btn-lg">Large</button>
+          </div>
+        </div>
+        <div>
+          <p class="label-upper mb-3">Google</p>
+          <div class="flex flex-wrap items-center gap-3">
+            <button type="button" class="btn btn-google">Sign in with Google</button>
+          </div>
+        </div>
+        <div>
+          <p class="label-upper mb-3">Disabled</p>
+          <div class="flex flex-wrap items-center gap-3">
+            <button type="button" class="btn btn-primary" disabled>Primary</button>
+            <button type="button" class="btn btn-outline" disabled>Outline</button>
+            <button type="button" class="btn btn-danger" disabled>Danger</button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <%# ── Components ── %>
+    <section>
+      <h2 class="text-xl font-bold text-heading mb-4">Components</h2>
+      <div class="space-y-6">
+        <div>
+          <p class="label-upper mb-3">Cards</p>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="card p-6">
+              <p class="text-heading font-semibold mb-1">.card</p>
+              <p class="text-secondary text-sm">Static card with surface background and subtle border.</p>
+            </div>
+            <div class="card-hover p-6">
+              <p class="text-heading font-semibold mb-1">.card-hover</p>
+              <p class="text-secondary text-sm">Interactive card — hover to see the border glow.</p>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p class="label-upper mb-3">Badges</p>
+          <div class="flex flex-wrap gap-2">
+            <span class="badge bg-mint/10 text-mint border-mint/30">Mint</span>
+            <span class="badge bg-violet/10 text-violet border-violet/30">Violet</span>
+            <span class="badge bg-red-600/10 text-red-400 border-red-600/30">Red</span>
+            <span class="badge bg-yellow-500/10 text-yellow-400 border-yellow-500/30">Yellow</span>
+            <span class="badge bg-surface-alt text-secondary border-subtle">Gray</span>
+          </div>
+        </div>
+
+        <div>
+          <p class="label-upper mb-3">Input Field</p>
+          <div class="max-w-md">
+            <input type="text" class="input-field" placeholder="Placeholder text...">
+          </div>
+        </div>
+
+        <div>
+          <p class="label-upper mb-3">Empty State</p>
+          <div class="empty-state">
+            <p class="text-secondary">No items found.</p>
+            <p class="text-muted text-sm mt-1">Try adjusting your search or filters.</p>
+          </div>
+        </div>
+
+        <div>
+          <p class="label-upper mb-3">Label Upper</p>
+          <span class="label-upper">This is a .label-upper element</span>
+        </div>
+
+        <div>
+          <p class="label-upper mb-3">JSON Debug</p>
+          <div class="json-debug">
+            <pre class="text-mint text-sm font-mono"><%= JSON.pretty_generate({ id: 1, name: "Example", status: "active", created_at: Time.current.iso8601 }) %></pre>
+          </div>
+        </div>
+      </div>
+    </section>
+
+  </div>
+</div>
+
+<script>
+  function themeEditor() {
+    return {
+      colors: {
+        primary: '<%= @theme_setting.resolved_colors[:primary] %>',
+        success: '<%= @theme_setting.resolved_colors[:success] %>',
+        accent:  '<%= @theme_setting.resolved_colors[:accent] %>',
+        warning: '<%= @theme_setting.resolved_colors[:warning] %>',
+        danger:  '<%= @theme_setting.resolved_colors[:danger] %>',
+        dark:    '<%= @theme_setting.resolved_colors[:dark] %>',
+        light:   '<%= @theme_setting.resolved_colors[:light] %>'
+      },
+
+      resetColor(role, defaultVal) {
+        this.colors[role] = defaultVal;
+        this.updatePreview();
+      },
+
+      normalizeHex(role) {
+        let val = this.colors[role].trim();
+        if (!val.startsWith('#')) val = '#' + val;
+        if (/^#[0-9a-fA-F]{3}$/.test(val)) {
+          val = '#' + val[1] + val[1] + val[2] + val[2] + val[3] + val[3];
+        }
+        if (/^#[0-9a-fA-F]{6}$/.test(val)) {
+          this.colors[role] = val;
+        }
+        this.updatePreview();
+      },
+
+      updatePreview() {
+        // Update live CSS vars on the document for immediate feedback
+        document.documentElement.style.setProperty('--color-cta', this.colors.primary);
+        document.documentElement.style.setProperty('--color-success', this.colors.success);
+        document.documentElement.style.setProperty('--color-warning', this.colors.warning || '#FF7C47');
+        document.documentElement.style.setProperty('--color-danger', this.colors.danger || '#EF4444');
+      },
+
+      darkPreviewStyle() {
+        return { backgroundColor: this.colors.dark, borderRadius: '0' };
+      },
+
+      darkSurfaceStyle() {
+        return {
+          backgroundColor: this.lightenColor(this.colors.dark, 0.3),
+          border: '1px solid rgba(255,255,255,0.1)'
+        };
+      },
+
+      lightPreviewStyle() {
+        return { backgroundColor: this.colors.light, borderRadius: '0' };
+      },
+
+      lightSurfaceStyle() {
+        return {
+          backgroundColor: '#ffffff',
+          border: '1px solid #e2e8f0'
+        };
+      },
+
+      lightenColor(hex, amount) {
+        hex = hex.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        const nr = Math.round(r + (255 - r) * amount);
+        const ng = Math.round(g + (255 - g) * amount);
+        const nb = Math.round(b + (255 - b) * amount);
+        return '#' + [nr, ng, nb].map(c => c.toString(16).padStart(2, '0')).join('');
+      }
+    };
+  }
+</script>

data/lib/studio/color_scale.rb

@@ -0,0 +1,80 @@
+module Studio
+  module ColorScale
+    # Mix ratios: how much white (lighter) or black (darker) to mix
+    LIGHT_RATIOS = {
+      50  => 0.95,
+      100 => 0.85,
+      200 => 0.70,
+      300 => 0.50,
+      400 => 0.30
+    }.freeze
+
+    DARK_RATIOS = {
+      600 => 0.15,
+      700 => 0.30,
+      800 => 0.45,
+      900 => 0.60
+    }.freeze
+
+    # Generate a full 50-900 shade scale from a base hex color.
+    # 500 = base color, lighter shades mix toward white, darker toward black.
+    def self.generate(hex)
+      r, g, b = hex_to_rgb(hex)
+      scale = { 500 => hex.upcase }
+
+      LIGHT_RATIOS.each do |shade, ratio|
+        scale[shade] = rgb_to_hex(
+          (r + (255 - r) * ratio).round,
+          (g + (255 - g) * ratio).round,
+          (b + (255 - b) * ratio).round
+        )
+      end
+
+      DARK_RATIOS.each do |shade, ratio|
+        scale[shade] = rgb_to_hex(
+          (r * (1 - ratio)).round,
+          (g * (1 - ratio)).round,
+          (b * (1 - ratio)).round
+        )
+      end
+
+      scale.sort.to_h
+    end
+
+    def self.lighten(hex, amount)
+      r, g, b = hex_to_rgb(hex)
+      rgb_to_hex(
+        (r + (255 - r) * amount).round,
+        (g + (255 - g) * amount).round,
+        (b + (255 - b) * amount).round
+      )
+    end
+
+    def self.darken(hex, amount)
+      r, g, b = hex_to_rgb(hex)
+      rgb_to_hex(
+        (r * (1 - amount)).round,
+        (g * (1 - amount)).round,
+        (b * (1 - amount)).round
+      )
+    end
+
+    def self.hex_to_rgb(hex)
+      hex = hex.delete("#")
+      [
+        hex[0..1].to_i(16),
+        hex[2..3].to_i(16),
+        hex[4..5].to_i(16)
+      ]
+    end
+
+    def self.rgb_to_hex(r, g, b)
+      "#%02X%02X%02X" % [r.clamp(0, 255), g.clamp(0, 255), b.clamp(0, 255)]
+    end
+
+    def self.with_opacity(hex, opacity)
+      r, g, b = hex_to_rgb(hex)
+      "rgba(#{r},#{g},#{b},#{opacity})"
+    end
+  end
+end

data/lib/studio/engine.rb

@@ -0,0 +1,12 @@
+module Studio
+  class Engine < ::Rails::Engine
+    config.after_initialize do
+      # Validate the host app's User model satisfies the engine's contract.
+      # See docs/USER_CONTRACT.md. Opt out with Studio.validate_user_contract = false.
+      if defined?(::User) && ::User.is_a?(Class) &&
+         (!defined?(::ActiveRecord::Base) || ::User.ancestors.include?(::ActiveRecord::Base))
+        Studio.validate_user_contract!(::User)
+      end
+    end
+  end
+end