studio-engine 0.4.1

data/app/views/layouts/_navbar.html.erb

@@ -0,0 +1,83 @@
+<%# Base navbar partial — apps can override by creating their own app/views/layouts/_navbar.html.erb
+    Locals (all optional):
+      show_logged_in  — override for logged_in? (default: real session)
+      preview         — if true, disables scroll handler and sticky positioning
+      balance_html    — raw HTML for balance display (passed through to _user_nav)
+      extra_icons_html — raw HTML for extra icon buttons (passed through to _user_nav)
+      show_logout_link — boolean, show "Log out" link in user nav (passed through to _user_nav)
+%>
+<% show_user = local_assigns.fetch(:show_logged_in, logged_in?) %>
+<% is_preview = local_assigns.fetch(:preview, false) %>
+<% balance_html = local_assigns.fetch(:balance_html, nil) %>
+<% extra_icons_html = local_assigns.fetch(:extra_icons_html, nil) %>
+<% show_logout_link = local_assigns.fetch(:show_logout_link, false) %>
+<%
+  words = Studio.app_name.split
+  last_word = words.pop
+  prefix = words.join(" ")
+  logo_path = Studio.logo_for("Navbar Logo")
+%>
+
+<header x-data="{ scrolled: false }" <%= '@scroll.window="scrolled = scrolled ? (window.scrollY > 20) : (window.scrollY > 60)"'.html_safe unless is_preview %>
+        class="<%= is_preview ? 'bg-page' : 'sticky top-0 z-50 bg-page transition-shadow duration-300' %>"
+        :class="scrolled && 'shadow-lg border-b border-subtle is-scrolled'">
+  <style>
+    .user-nav-col { width: 14rem; }
+    .nav-title { display: flex; gap: 0.25em; align-items: baseline; }
+    @media (min-width: 400px) { .user-nav-col { width: 15rem; } }
+    @media (min-width: 768px) { .user-nav-col { width: 20rem; } }
+    @media (max-width: 767px) {
+      .nav-title { font-size: 1.25rem !important; flex-direction: column; gap: 0; line-height: 1.15; transition: font-size 0.3s; }
+      .nav-title span:first-child { margin-bottom: -4px; }
+      .nav-title span:last-child { font-size: 1.5rem; transition: font-size 0.3s; }
+      .nav-logo-link { gap: 0.5rem !important; }
+      .is-scrolled .nav-title { font-size: 1rem !important; }
+      .is-scrolled .nav-title span:last-child { font-size: 1.15rem !important; }
+      .is-scrolled .nav-logo { width: 2.5rem !important; height: 2.5rem !important; }
+    }
+    @media (max-width: 399px) {
+      .nav-logo-link { gap: 0.25rem !important; }
+      .nav-title { font-size: 1.1rem !important; transition: font-size 0.3s; }
+      .nav-title span:last-child { font-size: 1.3rem; transition: font-size 0.3s; }
+      .is-scrolled .nav-title { font-size: 0.9rem !important; }
+      .is-scrolled .nav-title span:last-child { font-size: 1rem !important; }
+    }
+  </style>
+  <div class="flex items-center <%= is_preview ? 'py-6' : 'transition-all duration-300' %>"
+       <%= ":class=\"scrolled ? 'py-2' : 'py-6'\"".html_safe unless is_preview %>>
+    <%# Left side: logo + nav %>
+    <div class="flex-1 px-4">
+      <div class="flex items-center gap-6">
+        <%= link_to root_path, class: "nav-logo-link inline-flex items-center gap-3 group" do %>
+          <% if logo_path %>
+            <img src="<%= logo_path %>" alt="<%= Studio.app_name %>" class="nav-logo rounded-full shadow-lg <%= is_preview ? 'w-12 h-12' : 'group-hover:scale-105 transition-all duration-300' %>"
+                 <%= "x-bind:class=\"scrolled ? 'w-8 h-8' : 'w-12 h-12'\"".html_safe unless is_preview %>>
+          <% end %>
+          <h1 class="nav-title font-extrabold text-heading tracking-tight <%= is_preview ? 'text-3xl' : 'transition-all duration-300' %>"
+              <%= "x-bind:class=\"scrolled ? 'text-xl' : 'text-3xl'\"".html_safe unless is_preview %>><span><%= prefix %></span><span class="text-primary"><%= last_word %></span></h1>
+        <% end %>
+        <%# Desktop nav — apps should override this partial to add links here %>
+        <nav class="hidden md:flex items-center gap-4">
+        </nav>
+      </div>
+    </div>
+    <%# Right side: user nav (matches sidebar width) %>
+    <div class="user-nav-col flex-shrink-0 pl-0 pr-4 md:px-4">
+      <% if show_user %>
+        <%= render "components/user_nav", balance_html: balance_html, extra_icons_html: extra_icons_html, show_logout_link: show_logout_link %>
+      <% else %>
+        <div class="flex items-center justify-end gap-3">
+          <span class="hidden md:flex"><%= render "components/theme_toggle_morph" %></span>
+          <%= link_to "Log in", login_path, class: "btn btn-primary" %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <%# Mobile sub-navbar: compact row hidden on desktop — apps should override to add links %>
+  <div class="flex md:hidden items-center gap-3 px-4 py-1.5 border-t border-subtle bg-surface-alt">
+    <span class="ml-auto flex items-center gap-3">
+      <%= render "components/admin_dropdown" %>
+      <%= render "components/theme_toggle_morph" %>
+    </span>
+  </div>
+</header>

data/app/views/layouts/studio/_flash.html.erb

@@ -0,0 +1,256 @@
+<%# Toast notification system — floating toasts that overlay the page %>
+<%#   window.dispatchEvent(new CustomEvent('toast', { detail: { %>
+<%#     type: 'notice',           -- 'notice' or 'alert' %>
+<%#     title: 'Header',          -- bold title (auto: "Success"/"Error" if omitted) %>
+<%#     message: 'Subtext',       -- description text %>
+<%#     image: '/avatar.jpg',     -- optional image URL (shows icon if omitted) %>
+<%#     dismissible: true,        -- show X button (default: true) %>
+<%#     buttons: [{ label, style, onclick }], -- optional action buttons %>
+<%#     duration: 4000            -- auto-dismiss ms (default: 4000, 0 = stay, auto 0 when buttons) %>
+<%#     blurShadow: false         -- frosted glass halo behind the toast %>
+<%#   } })) %>
+
+<style>
+  .toast-shadow-all {
+    box-shadow: 0 0 30px rgba(0,0,0,0.4), 0 0 10px rgba(0,0,0,0.2);
+  }
+  .toast-shadow-top {
+    box-shadow: 0 -8px 30px rgba(0,0,0,0.4), -8px 0 30px rgba(0,0,0,0.4), 8px 0 30px rgba(0,0,0,0.4);
+  }
+  .toast-shadow-bottom {
+    box-shadow: 0 8px 30px rgba(0,0,0,0.4), -8px 0 30px rgba(0,0,0,0.4), 8px 0 30px rgba(0,0,0,0.4);
+  }
+  .toast-card {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  .dark .toast-card {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+  .toast-blur-glow {
+    position: absolute;
+    inset: -3rem -4rem;
+    border-radius: 2rem;
+    filter: blur(30px);
+    pointer-events: none;
+  }
+  .toast-blur-glow {
+    background: rgba(0, 0, 0, 0.06);
+  }
+  .dark .toast-blur-glow {
+    background: rgba(var(--color-primary-500-rgb), 0.12);
+  }
+  .toast-wrapper {
+    position: relative;
+    transition: transform 0.5s ease,
+                opacity 0.4s ease,
+                margin-top 0.4s ease,
+                max-height 0.4s ease;
+  }
+  .toast-page-blur {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 100%);
+    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 100%);
+    pointer-events: none;
+    z-index: 55;
+    transition: opacity 0.5s ease;
+    background: rgba(255, 255, 255, 0.15);
+  }
+  .dark .toast-page-blur {
+    background: rgba(255, 255, 255, 0.5);
+  }
+</style>
+
+<% messages = flash.select { |type, _| %w[notice alert].include?(type) } %>
+<% initial_json = messages.map { |type, msg| { type: type, message: msg } }.to_json %>
+
+<div x-data="toastManager(<%= initial_json %>)"
+     @toast.window="add($event.detail)">
+
+  <%# ── Page blur — half-ellipse backdrop blur behind toasts ── %>
+  <div class="toast-page-blur"
+       :style="'opacity: ' + (hasVisible() ? '1' : '0')"></div>
+
+  <div id="toast-container"
+       class="fixed top-0 left-1/2 flex flex-col items-center pointer-events-none"
+       style="z-index: 60; transform: translateX(-50%); padding: 1rem; width: 100%; max-width: 30rem;">
+
+  <template x-for="(toast, index) in toasts" :key="toast.id">
+    <div :style="toastStyle(index)"
+         class="toast-wrapper w-full"
+         @click="handlePeekClick(index)">
+
+      <%# ── Blur glow (optional) — uses filter:blur on a colored div, not backdrop-filter ── %>
+      <template x-if="toast.blurShadow">
+        <div class="toast-blur-glow"></div>
+      </template>
+
+      <%# ── Toast card — z-index above all blur backdrops ── %>
+      <div class="relative pointer-events-auto bg-surface rounded-lg p-4 w-full flex gap-3 toast-card"
+           :class="toastShadowClass(index)"
+           role="status">
+
+        <%# ── Image or icon ── %>
+        <template x-if="toast.image">
+          <img :src="toast.image" class="w-10 h-10 rounded-full object-cover shrink-0" style="margin-top: 2px;">
+        </template>
+        <template x-if="!toast.image">
+          <div class="w-10 h-10 rounded-full flex items-center justify-center bg-inset shrink-0" style="margin-top: 2px;">
+            <svg x-show="toast.type === 'notice'" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" style="color: var(--color-success)" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
+            </svg>
+            <svg x-show="toast.type !== 'notice'" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" style="color: var(--color-danger)" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-9 3.75h.008v.008H12v-.008z" />
+            </svg>
+          </div>
+        </template>
+
+        <%# ── Content ── %>
+        <div class="flex-1 min-w-0">
+          <div class="flex items-start justify-between gap-2">
+            <span x-text="toast.title" class="text-heading font-semibold text-sm"></span>
+            <template x-if="toast.dismissible">
+              <button @click.stop="dismiss(toast.id)"
+                      class="text-muted hover:text-heading shrink-0 cursor-pointer"
+                      aria-label="Dismiss">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </template>
+          </div>
+          <template x-if="toast.message">
+            <p x-text="toast.message" class="text-secondary text-sm" style="margin-top: 2px;"></p>
+          </template>
+          <template x-if="toast.buttons && toast.buttons.length > 0">
+            <div class="flex gap-2" style="margin-top: 0.75rem;">
+              <template x-for="btn in toast.buttons" :key="btn.label">
+                <button @click.stop="if (btn.onclick) btn.onclick(); dismiss(toast.id)"
+                        class="btn btn-sm"
+                        :class="btn.style === 'primary' ? 'btn-primary' : btn.style === 'danger' ? 'btn-danger' : 'btn-outline'">
+                  <span x-text="btn.label"></span>
+                </button>
+              </template>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </template>
+  </div>
+</div>
+
+<script>
+  if (!window.toastManager) {
+    window.toastManager = function(initial) {
+      return {
+        toasts: [],
+        _nextId: 0,
+        expanded: false,
+
+        init() {
+          if (initial && initial.length) {
+            initial.forEach((msg, i) => {
+              setTimeout(() => this.add(msg), i * 100 + 50);
+            });
+          }
+        },
+
+        add(detail) {
+          var id = ++this._nextId;
+          var type = detail.type || 'notice';
+          var buttons = detail.buttons || [];
+          this.toasts.unshift({
+            id: id,
+            type: type,
+            title: detail.title || (type === 'notice' ? 'Success' : 'Error'),
+            message: detail.message || '',
+            image: detail.image || null,
+            dismissible: detail.dismissible !== false,
+            blurShadow: detail.blurShadow || false,
+            buttons: buttons,
+            visible: false
+          });
+          // Cap at 5 toasts — dismiss oldest when exceeded
+          while (this.toasts.length > 5) {
+            this.toasts.pop();
+          }
+          this.expanded = false;
+          this.$nextTick(() => {
+            var t = this.toasts.find(function(t) { return t.id === id; });
+            if (t) t.visible = true;
+          });
+          var duration = detail.duration != null ? detail.duration : (buttons.length ? 0 : 4000);
+          if (duration > 0) {
+            var self = this;
+            setTimeout(function() { self.dismiss(id); }, duration);
+          }
+        },
+
+        dismiss(id) {
+          var toast = this.toasts.find(function(t) { return t.id === id; });
+          if (toast && toast.visible) {
+            toast.visible = false;
+            var self = this;
+            setTimeout(function() {
+              self.toasts = self.toasts.filter(function(t) { return t.id !== id; });
+              // Reset expanded when down to 1 or fewer toasts
+              if (self.toasts.filter(function(t) { return t.visible; }).length <= 1) {
+                self.expanded = false;
+              }
+            }, 400);
+          }
+        },
+
+        toastShadowClass(index) {
+          var visibleCount = this.toasts.filter(function(t) { return t.visible; }).length;
+          if (visibleCount <= 1) return 'toast-shadow-all';
+          if (index === 0) return 'toast-shadow-top';
+          return 'toast-shadow-bottom';
+        },
+
+        hasVisible() {
+          return this.toasts.some(function(t) { return t.visible; });
+        },
+
+        handlePeekClick(index) {
+          if (!this.expanded && index > 0 && this.toasts.length > 1) {
+            this.expanded = true;
+          }
+        },
+
+        toastStyle(index) {
+          var toast = this.toasts[index];
+
+          // Leaving — gentle shrink and fade
+          if (!toast.visible) {
+            return 'opacity: 0; transform: scale(0.7); max-height: 0; margin-top: 0; padding: 0; overflow: hidden;';
+          }
+
+          var visibleCount = this.toasts.filter(function(t) { return t.visible; }).length;
+          var isCollapsed = !this.expanded && visibleCount > 1;
+
+          // Full view — latest toast or expanded mode
+          if (!isCollapsed || index === 0) {
+            return 'opacity: 1; transform: scale(1) translateY(0); margin-top: ' + (index > 0 ? '0.35rem' : '0') + '; max-height: 20rem;';
+          }
+
+          // Collapsed peek — thin strip showing card edge
+          if (index <= 2) {
+            var scale = 1 - (index * 0.03);
+            var opacity = 0.7 - ((index - 1) * 0.15);
+            return 'display: flex; flex-direction: column; justify-content: flex-end; transform: scale(' + scale + ') translateY(0); max-height: 0.5rem; overflow: hidden; opacity: ' + opacity + '; margin-top: 0.15rem; pointer-events: auto; cursor: pointer;';
+          }
+
+          // Hidden — beyond visible stack
+          return 'max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; pointer-events: none;';
+        }
+      };
+    };
+  }
+</script>

data/app/views/layouts/studio/_head.html.erb

@@ -0,0 +1,78 @@
+<script>
+  (function(){
+    if (localStorage.getItem('theme') !== 'light') {
+      document.documentElement.classList.add('dark');
+    }
+  })();
+</script>
+
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<%= csrf_meta_tags %>
+<%= csp_meta_tag %>
+<link rel="icon" type="image/png" href="/favicon.png">
+
+<%= yield :head %>
+
+<%= studio_theme_css_tag %>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
+<script>
+  window.fireSuccessConfetti = function() {
+    if (typeof confetti === 'undefined') return;
+    var colors = window.CONFETTI_COLORS || ['#4BAF50', '#8E82FE', '#06D6A0', '#FF7C47', '#FFD700', '#00BFFF', '#FF6B9D', '#C084FC'];
+    confetti({ particleCount: 150, spread: 100, origin: { x: 0.5, y: 0.5 }, colors: colors, zIndex: 9999, startVelocity: 45, gravity: 0.8, ticks: 300, scalar: 1.2 });
+    setTimeout(function() { confetti({ particleCount: 80, angle: 60, spread: 60, origin: { x: 0, y: 0.6 }, colors: colors, zIndex: 9999, startVelocity: 55, gravity: 1, ticks: 250 }); }, 150);
+    setTimeout(function() { confetti({ particleCount: 80, angle: 120, spread: 60, origin: { x: 1, y: 0.6 }, colors: colors, zIndex: 9999, startVelocity: 55, gravity: 1, ticks: 250 }); }, 150);
+    setTimeout(function() { confetti({ particleCount: 100, spread: 160, origin: { x: 0.5, y: 0.3 }, colors: colors, zIndex: 9999, startVelocity: 30, gravity: 1.2, ticks: 200, scalar: 0.8 }); }, 400);
+  };
+</script>
+<script>
+  // Nav spinner — scale morph between theme toggle and loading spinner
+  // Minimum display time prevents quick flashes
+  window._navSpinnerShownAt = 0;
+  window._navSpinnerMinMs = 2500;
+  window.showNavSpinner = function() {
+    window._navSpinnerShownAt = Date.now();
+    document.querySelectorAll('.nav-toggle-icon').forEach(function(e) { e.style.opacity = '0'; e.style.transform = 'scale(0) rotate(90deg)'; });
+    document.querySelectorAll('.nav-spinner-icon').forEach(function(e) { e.style.opacity = '1'; e.style.transform = 'scale(1) rotate(0deg)'; });
+  };
+  window.hideNavSpinner = function() {
+    var elapsed = Date.now() - window._navSpinnerShownAt;
+    var remaining = Math.max(0, window._navSpinnerMinMs - elapsed);
+    setTimeout(function() {
+      document.querySelectorAll('.nav-toggle-icon').forEach(function(e) { e.style.opacity = '1'; e.style.transform = 'scale(1) rotate(0deg)'; });
+      document.querySelectorAll('.nav-spinner-icon').forEach(function(e) { e.style.opacity = '0'; e.style.transform = 'scale(0) rotate(-90deg)'; });
+    }, remaining);
+  };
+  // Reset spinner state before Turbo caches the page
+  document.addEventListener('turbo:before-cache', function() {
+    document.querySelectorAll('.nav-toggle-icon').forEach(function(e) { e.style.opacity = '1'; e.style.transform = 'scale(1) rotate(0deg)'; });
+    document.querySelectorAll('.nav-spinner-icon').forEach(function(e) { e.style.opacity = '0'; e.style.transform = 'scale(0) rotate(-90deg)'; });
+  });
+</script>
+<script>
+  document.addEventListener('alpine:init', () => {
+    Alpine.store('devMode', localStorage.getItem('devMode') === 'true');
+    Alpine.store('theme', {
+      value: localStorage.getItem('theme') || 'dark',
+      get isDark() { return this.value === 'dark'; },
+      toggle() {
+        document.documentElement.classList.add('theme-transition');
+        document.documentElement.classList.toggle('dark');
+        this.value = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+        localStorage.setItem('theme', this.value);
+        setTimeout(() => document.documentElement.classList.remove('theme-transition'), 300);
+      }
+    });
+  });
+</script>
+
+<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+<%= javascript_importmap_tags %>

data/app/views/navbar/show.html.erb

@@ -0,0 +1,147 @@
+<% content_for(:title, "Navbar Review") %>
+
+<style>
+  /* Preview container base */
+  .navbar-preview {
+    overflow: hidden;
+    border: 2px solid var(--color-border-strong);
+    border-radius: 0.5rem;
+    pointer-events: none;
+    transition: width 0.15s ease;
+  }
+  .navbar-preview header { position: static !important; }
+
+  /* Mobile previews: force mobile layout (undo md: classes active at desktop viewport) */
+  .navbar-preview.is-mobile .hidden.md\:flex { display: none !important; }
+  .navbar-preview.is-mobile .hidden.md\:block { display: none !important; }
+  .navbar-preview.is-mobile .flex.md\:hidden { display: flex !important; }
+  .navbar-preview.is-mobile .user-nav-col { padding-left: 0 !important; padding-right: 1rem !important; }
+  .navbar-preview.is-mobile .nav-title { flex-direction: column !important; gap: 0 !important; line-height: 1.15 !important; }
+  .navbar-preview.is-mobile .nav-title span:first-child { margin-bottom: -4px !important; }
+  .navbar-preview.is-mobile .nav-title span:last-child { font-size: 1.5rem !important; }
+  .navbar-preview.is-mobile .nav-logo-link { gap: 0.5rem !important; }
+
+  /* Tiny (< 400px) */
+  .navbar-preview.bp-tiny .nav-title { font-size: 1.1rem !important; }
+  .navbar-preview.bp-tiny .nav-title span:last-child { font-size: 1.3rem !important; }
+  .navbar-preview.bp-tiny .nav-logo-link { gap: 0.25rem !important; }
+  .navbar-preview.bp-tiny .user-nav-col { width: 14rem !important; }
+  .navbar-preview.bp-tiny .username-cap { max-width: 5rem !important; }
+
+  /* Small (400-767px) */
+  .navbar-preview.bp-small .nav-title { font-size: 1.25rem !important; }
+  .navbar-preview.bp-small .user-nav-col { width: 15rem !important; }
+  .navbar-preview.bp-small .username-cap { max-width: 6rem !important; }
+
+  /* Desktop (768px+) */
+  .navbar-preview.is-desktop .user-nav-col { width: 20rem !important; }
+  .navbar-preview.is-desktop .username-cap { max-width: 7rem !important; }
+
+  /* Transitions for scrolled toggle */
+  .navbar-preview .nav-logo { transition: width 0.3s, height 0.3s; }
+  .navbar-preview .nav-title,
+  .navbar-preview .nav-title span:last-child { transition: font-size 0.3s; }
+  .navbar-preview .py-6 { transition: padding 0.3s; }
+  .navbar-preview header { transition: box-shadow 0.3s, border-color 0.3s; }
+  .navbar-preview [data-balance-display] { transition: font-size 0.3s; }
+
+  /* Scrolled state: base (all breakpoints) */
+  .navbar-preview.is-scrolled-preview header { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border-bottom: 1px solid var(--color-border-subtle); }
+  .navbar-preview.is-scrolled-preview .py-6 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
+  .navbar-preview.is-scrolled-preview .nav-logo { width: 2rem !important; height: 2rem !important; }
+  .navbar-preview.is-scrolled-preview .nav-title { font-size: 1.25rem !important; }
+  .navbar-preview.is-scrolled-preview [data-balance-display] { font-size: 1.125rem !important; }
+
+  /* Scrolled state: mobile overrides */
+  .navbar-preview.is-mobile.is-scrolled-preview .nav-logo { width: 2.5rem !important; height: 2.5rem !important; }
+  .navbar-preview.bp-tiny.is-scrolled-preview .nav-title { font-size: 0.9rem !important; }
+  .navbar-preview.bp-tiny.is-scrolled-preview .nav-title span:last-child { font-size: 1rem !important; }
+  .navbar-preview.bp-small.is-scrolled-preview .nav-title { font-size: 1rem !important; }
+  .navbar-preview.bp-small.is-scrolled-preview .nav-title span:last-child { font-size: 1.15rem !important; }
+
+  /* Slider with device marker */
+  .slider-wrap { position: relative; }
+  .slider-wrap input[type="range"] { width: 100%; accent-color: var(--color-cta); }
+  .navbar-card { margin-bottom: 1px; }
+  .slider-marker {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 2px;
+    height: 14px;
+    background: var(--color-cta);
+    pointer-events: none;
+    border-radius: 1px;
+  }
+</style>
+
+<div class="py-8 space-y-10" x-data="{
+       previewName: '',
+       updateNames() {
+         var els = document.querySelectorAll('.navbar-preview [data-username-display]');
+         var name = this.previewName;
+         els.forEach(function(el) {
+           el.textContent = name || el.getAttribute('data-original-name');
+           var data = Alpine.$data(el);
+           if (data) { data.overflows = el.scrollWidth > el.clientWidth; }
+         });
+       },
+       init() {
+         var els = document.querySelectorAll('.navbar-preview [data-username-display]');
+         els.forEach(function(el) { el.setAttribute('data-original-name', el.textContent.trim()); });
+       }
+     }" x-effect="updateNames()">
+  <div>
+    <h1 class="text-2xl font-bold text-heading">Navbar Review</h1>
+    <div class="flex items-center gap-4 mt-1">
+      <p class="text-sm text-muted">Desktop (1200px+) is the live navbar above.</p>
+      <div class="flex items-center gap-2">
+        <label class="text-xs text-muted font-medium">Username:</label>
+        <input type="text" x-model="previewName" placeholder="<%= current_user.display_name %>"
+               class="input-field text-xs !py-1 !px-2 !w-36">
+      </div>
+    </div>
+  </div>
+
+  <% breakpoints = [
+    { name: "Tiny",   min: 320, max: 399, classes: "is-mobile bp-tiny",  device: "iPhone 15", device_w: 390 },
+    { name: "Small",  min: 400, max: 767, classes: "is-mobile bp-small", device: "iPhone 16 Pro Max", device_w: 430 },
+    { name: "Tablet", min: 768, max: 1200, classes: "is-desktop",        device: "iPad Pro 13\"", device_w: 1032 },
+  ] %>
+
+  <% [
+    { title: "Logged-In View",  show_logged_in: true },
+    { title: "Pre-Login View",  show_logged_in: false },
+  ].each do |section| %>
+    <section class="space-y-6">
+      <h2 class="text-lg font-semibold text-heading"><%= section[:title] %></h2>
+      <div class="grid gap-8">
+        <% breakpoints.each do |bp|
+             marker_pct = ((bp[:device_w] - bp[:min]).to_f / (bp[:max] - bp[:min]) * 100).round(1)
+        %>
+          <div x-data="{ w: <%= bp[:device_w] %>, scrolled: false }" class="navbar-card">
+            <div class="flex items-center gap-3 mb-2">
+              <span class="text-sm font-bold text-heading"><%= bp[:name] %></span>
+              <span class="text-xs text-muted font-mono" x-text="w + 'px'"><%= bp[:device_w] %>px</span>
+              <div class="flex-1 max-w-xs slider-wrap">
+                <input type="range" min="<%= bp[:min] %>" max="<%= bp[:max] %>" x-model="w">
+                <div class="slider-marker" style="left: <%= marker_pct %>%;"></div>
+              </div>
+              <button @click="w = <%= bp[:device_w] %>" class="text-xs text-primary hover:text-primary-300 font-medium transition whitespace-nowrap">
+                <%= bp[:device] %> (<%= bp[:device_w] %>px)
+              </button>
+              <span class="text-xs text-muted font-mono"><%= bp[:min] %>-<%= bp[:max] %>px</span>
+              <button @click="scrolled = !scrolled" class="text-xs font-bold px-2 py-0.5 rounded transition"
+                      :class="scrolled ? 'bg-primary text-white' : 'bg-surface-alt text-secondary hover:text-heading'">
+                Scrolled
+              </button>
+            </div>
+            <div class="navbar-preview <%= bp[:classes] %>" :class="scrolled && 'is-scrolled-preview'" :style="'width: ' + w + 'px'">
+              <%= render "layouts/navbar", preview: true, show_logged_in: section[:show_logged_in] %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </section>
+  <% end %>
+</div>

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

@@ -0,0 +1,80 @@
+<%
+  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">Create your account</p>
+    </div>
+
+    <div class="card p-8 shadow">
+      <% if @user.errors.any? %>
+        <div class="mb-4 p-3 bg-red-900/50 border border-red-700 rounded-lg text-red-300 text-sm">
+          <% @user.errors.full_messages.each do |msg| %>
+            <p><%= msg %></p>
+          <% end %>
+        </div>
+      <% end %>
+
+      <%= form_with model: @user, url: signup_path, method: :post do |f| %>
+        <% if Studio.registration_params.include?(:name) %>
+          <div class="mb-5">
+            <label for="user_name" class="block text-sm text-secondary mb-2 font-medium">Name</label>
+            <%= f.text_field :name, id: "user_name", autofocus: true,
+              class: "input-field",
+              placeholder: "Your name" %>
+          </div>
+        <% end %>
+
+        <div class="mb-5">
+          <label for="user_email" class="block text-sm text-secondary mb-2 font-medium">Email</label>
+          <%= f.email_field :email, id: "user_email", autofocus: !Studio.registration_params.include?(:name),
+            class: "input-field",
+            placeholder: "you@example.com" %>
+        </div>
+
+        <div class="mb-5">
+          <label for="user_password" class="block text-sm text-secondary mb-2 font-medium">Password</label>
+          <%= f.password_field :password, id: "user_password",
+            class: "input-field",
+            placeholder: "Choose a password" %>
+        </div>
+
+        <div class="mb-6">
+          <label for="user_password_confirmation" class="block text-sm text-secondary mb-2 font-medium">Confirm Password</label>
+          <%= f.password_field :password_confirmation, id: "user_password_confirmation",
+            class: "input-field",
+            placeholder: "Confirm your password" %>
+        </div>
+
+        <button type="submit" class="btn btn-primary btn-lg w-full">
+          Sign Up
+        </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 up with Google
+      <% end %>
+
+      <p class="text-center text-secondary text-sm mt-6">
+        Already have an account?
+        <%= link_to "Log in", login_path, class: "text-primary hover:text-primary-300 font-medium underline underline-offset-2" %>
+      </p>
+    </div>
+  </div>
+</div>