studio-engine 0.127.0 → 0.128.0

data/app/views/style/_glass.html.erb

@@ -0,0 +1,83 @@
+<%# The glass surfaces, the glass sidebar and the line icons (Studio.surface_style,
+    Studio.sidebar_style, studio_icon). Real classes and the real helper, so a change to any
+    of them shows here. The stage has a hard-edged backing because glass needs something
+    behind it: on a flat page it looks like a flat tint. Each specimen says whether this app
+    has turned its switch on, because the surface rules only apply when it has. %>
+<%
+  glass_backing = "rounded-xl p-4 [background-image:repeating-linear-gradient(135deg,rgb(var(--color-primary-rgb)/0.55)_0_14px,transparent_14px_28px)]"
+  surface_on = Studio.surface_style == :glass
+  sidebar_on = Studio.sidebar_style == :glass
+%>
+<section class="space-y-4" data-test="style-glass">
+  <div>
+    <h3 class="type-h4 text-heading">Glass</h3>
+    <p class="text-sm text-secondary mt-1">Translucent surfaces and the floating sidebar. Each is opt-in, so an app moves only when it asks.</p>
+  </div>
+  <div class="grid gap-4 md:grid-cols-2">
+    <%= render layout: "style/specimen",
+          locals: { klass: "Studio.surface_style = :glass",
+                    usage: %(config.surface_style = :glass, and <html data-surface-style="glass">),
+                    disabled: !surface_on, disabled_label: "surface style is off on this app" } do %>
+      <div class="<%= glass_backing %> w-full space-y-2" data-test="style-glass-surfaces">
+        <div class="card p-3 text-sm text-heading">.card, the dense tier: no blur</div>
+        <div class="card surface-glass-blur p-3 text-sm text-heading">.card.surface-glass-blur</div>
+      </div>
+    <% end %>
+    <%= render layout: "style/specimen",
+          locals: { klass: "Studio.sidebar_style = :glass",
+                    usage: %(config.sidebar_style = :glass),
+                    disabled: !sidebar_on, disabled_label: "glass sidebar is off on this app" } do %>
+      <div class="<%= glass_backing %> w-full" data-test="style-glass-sidebar">
+        <div class="flex flex-col" data-sidebar-glass-shell>
+          <nav aria-label="Glass sidebar specimen">
+            <div role="group" class="pt-2.5">
+              <a href="#tricks" class="group flex items-center" aria-current="page"><span class="flex-shrink-0" data-sidebar-row-icon><%= studio_icon("chart-column") %></span><span class="min-w-0"><span class="block truncate">Current page</span></span></a>
+              <a href="#tricks" class="group flex items-center" data-sidebar-row-described><span class="flex-shrink-0" data-sidebar-row-icon><%= studio_icon("rocket") %></span><span class="relative min-w-0 flex-1"><span class="block truncate" data-sidebar-row-label>Hover this row</span><span class="block truncate text-xs text-muted" data-sidebar-row-desc>Its description moves nothing</span></span></a>
+            </div>
+          </nav>
+        </div>
+      </div>
+      <% if respond_to?(:studio_sidebar?) && studio_sidebar? %>
+        <button type="button" class="btn btn-sm btn-outline mt-3" @click="$store.sidebars.linkTreeOpen = true" data-test="style-glass-open">Open the real sidebar</button>
+      <% end %>
+    <% end %>
+    <%= render layout: "style/specimen",
+          locals: { klass: "Lit from above, under surface_style = :glass",
+                    usage: %(.btn-primary, .btn-danger, .btn-neutral, .badge, .input-field),
+                    disabled: !surface_on, disabled_label: "surface style is off on this app" } do %>
+      <div class="w-full overflow-x-auto" data-test="style-lit-states">
+        <table class="text-xs text-muted">
+          <thead><tr><th></th><% %w[rest hover pressed focus disabled].each do |state| %><th class="font-medium text-left"><%= state %></th><% end %></tr></thead>
+          <tbody>
+            <% [["btn-primary", "Primary"], ["btn-secondary", "Secondary"], ["btn-success", "Success"], ["btn-danger", "Danger"], ["btn-warning", "Warning"], ["btn-primary btn-sm", "Small"], ["btn-neutral btn-sm", "Neutral"], ["btn-outline btn-sm", "Outline"]].each do |classes, label| %>
+              <tr>
+                <th class="font-medium text-left pr-2"><%= label %></th>
+                <% [nil, "hover", "pressed", "focus"].each do |state| %>
+                  <td class="p-1.5"><button type="button" class="btn <%= classes %>" tabindex="-1" <%= %(data-lit-state="#{state}").html_safe if state %>>Go</button></td>
+                <% end %>
+                <td class="p-1.5"><button type="button" class="btn <%= classes %>" disabled>Go</button></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+        <div class="flex flex-wrap items-center gap-2 mt-3">
+          <span class="badge text-heading border-subtle">Badge</span>
+          <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">Live</span>
+          <input class="input-field max-w-[12rem]" type="text" value="Input, pressed in" aria-label="Input specimen" readonly>
+        </div>
+      </div>
+    <% end %>
+    <%= render layout: "style/specimen",
+          locals: { klass: "studio_icon(name, size: 18)",
+                    usage: %(studio_icon("rocket", size: 22)) } do %>
+      <ul class="grid grid-cols-4 gap-3 w-full text-heading" data-test="style-glass-icons">
+        <% Studio::Icons.names.each do |name| %>
+          <li class="flex flex-col items-center gap-1 min-w-0" title="<%= name %>">
+            <%= studio_icon(name, size: 22) %>
+            <span class="text-3xs text-muted truncate max-w-full"><%= name %></span>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+</section>

data/app/views/style/_host.html.erb

@@ -93,7 +93,7 @@
 <section id="host-modals" class="space-y-8" x-data="{}"
          style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
   <div class="space-y-1">
-    <h2 class="text-2xl font-bold text-heading"><%= Studio.app_name %></h2>
+    <h2 class="type-h3 text-heading"><%= Studio.app_name %></h2>
     <p class="text-muted text-sm max-w-2xl">
       This app&rsquo;s own modals, contributed by
       <code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded">app/views/style/host/_modals.html.erb</code>.

data/app/views/style/_modals.html.erb

@@ -155,7 +155,7 @@
          x-data="{}" @ds-modal-close.window="$store.dsModals.close()"
          @age-verified.window="$store.dsModals.open('entry-confirmed', { txSignature: null, lobbyUrl: null, seedsEarned: 0 })">
   <div class="space-y-1">
-    <h2 class="text-2xl font-bold text-heading">Modals</h2>
+    <h2 class="type-h3 text-heading">Modals</h2>
     <p class="text-muted text-sm">
       The shared modal host and the reusable modal partials, ported from Turf
       Monster into the engine. Each tile is a <strong>visual representation, not
@@ -461,7 +461,7 @@
   <%# ===================================================================== %>
   <section id="modals-auth" class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Auth</h3>
+      <h3 class="type-h4 text-heading">Auth</h3>
       <p class="text-muted text-sm">
         <strong>The engine ships no sign-in card.</strong> A sign-in modal is a
         product decision &mdash; which methods, what terms, whose legal copy
@@ -523,7 +523,7 @@
       cannot show, now that the wallet step lives with the wallet cards. %>
   <section id="modals-profile" class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Profile</h3>
+      <h3 class="type-h4 text-heading">Profile</h3>
       <p class="text-muted text-sm">
         Who the account IS &mdash; the name it goes by, the birthday that decides
         eligibility, and the picture. The first three cards are asked at signup
@@ -711,7 +711,7 @@
   <section id="modals-profile-leveling" class="space-y-5">
     <div class="space-y-1">
       <div class="flex flex-wrap items-center gap-3">
-        <h3 class="text-xl font-bold text-heading">Profile Leveling</h3>
+        <h3 class="type-h4 text-heading">Profile Leveling</h3>
         <% if leveling_on %>
           <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">leveling on</span>
         <% else %>
@@ -865,7 +865,7 @@
   <section id="modals-web3" class="space-y-5">
     <div class="space-y-1">
       <div class="flex flex-wrap items-center gap-3">
-        <h3 class="text-xl font-bold text-heading">Web3</h3>
+        <h3 class="type-h4 text-heading">Web3</h3>
         <% if web3_on %>
           <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">enabled on this app</span>
         <% else %>
@@ -1035,7 +1035,7 @@
   <section id="modals-contest-entry" class="space-y-5">
     <div class="space-y-1">
       <div class="flex flex-wrap items-center gap-3">
-        <h3 class="text-xl font-bold text-heading">Contest entry &amp; eligibility</h3>
+        <h3 class="type-h4 text-heading">Contest entry &amp; eligibility</h3>
         <% if age_gate_on %>
           <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">age gate on</span>
         <% else %>
@@ -1133,7 +1133,7 @@
   <%# ===================================================================== %>
   <section id="modals-system-status" class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">System &amp; status</h3>
+      <h3 class="type-h4 text-heading">System &amp; status</h3>
       <p class="text-muted text-sm">
         The reusable card blocks under <code class="font-mono text-2xs">studio/modals/blocks/</code> &mdash;
         the studio-canonical processing, success, error, and countdown states.
@@ -1283,7 +1283,7 @@
   <%# ===================================================================== %>
   <section id="modals-templates" class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Templates</h3>
+      <h3 class="type-h4 text-heading">Templates</h3>
       <p class="text-muted text-sm">
         Reusable archetypes under <code class="font-mono text-2xs">studio/modals/templates/</code> &mdash;
         the copy-from reference cards for a new modal (wizard, form, action,
@@ -1318,7 +1318,7 @@
   <section id="modals-rewards" class="space-y-5">
     <div class="space-y-1">
       <div class="flex flex-wrap items-center gap-3">
-        <h3 class="text-xl font-bold text-heading">Rewards</h3>
+        <h3 class="type-h4 text-heading">Rewards</h3>
         <% if leveling_on %>
           <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">enabled on this app</span>
         <% else %>
@@ -1395,7 +1395,7 @@
   <%# ===================================================================== %>
   <section id="modals-motion-registry" class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Enter &amp; leave animations</h3>
+      <h3 class="type-h4 text-heading">Enter &amp; leave animations</h3>
       <p class="text-muted text-sm">
         The per-modal entrance/exit registry &mdash;
         <code class="font-mono text-2xs">window.ModalAnimations</code>, published by
@@ -1461,7 +1461,7 @@
   <%# ===================================================================== %>
   <section id="modals-stack-mechanics" class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Stack behaviour</h3>
+      <h3 class="type-h4 text-heading">Stack behaviour</h3>
       <p class="text-muted text-sm">
         The engine modal-stack mechanics, poked at directly on
         <code class="font-mono text-2xs">$store.dsModals</code>:

data/app/views/style/_scrims.html.erb

@@ -37,7 +37,7 @@
 %>
 <section id="scrims" class="space-y-5" data-scrim-group>
   <div class="space-y-1">
-    <h3 class="text-xl font-bold text-heading">Tints &amp; shades</h3>
+    <h3 class="type-h4 text-heading">Tints &amp; shades</h3>
     <p class="text-muted text-sm max-w-2xl">
       A <strong>shade</strong> lays the dark base over media and light ink reads on it; a
       <strong>tint</strong> lays the light base over media and dark ink reads on it.

data/app/views/style/_site_footer.html.erb

@@ -35,7 +35,7 @@
 %>
 <section id="site-footer" class="space-y-5" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
   <div class="space-y-1">
-    <h3 class="text-xl font-bold text-heading">Site footer and booking</h3>
+    <h3 class="type-h4 text-heading">Site footer and booking</h3>
     <p class="text-muted text-sm max-w-2xl">
       One layout line renders the public site's footer from
       <code class="font-mono text-2xs">config.site_footer</code>; every part is optional. With

data/app/views/style/_tasks.html.erb

@@ -65,7 +65,7 @@
 %>
 <section id="tasks" class="space-y-8" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
   <div class="space-y-1">
-    <h2 class="text-2xl font-bold text-heading">Tasks</h2>
+    <h2 class="type-h3 text-heading">Tasks</h2>
     <p class="text-muted text-sm max-w-2xl">
       The shared board primitive that every board builds from &mdash; columns, cards, the
       <code class="font-mono text-2xs">stage-*</code> badge palette, and the drag / optimistic

data/app/views/style/_theme.html.erb

@@ -1,6 +1,6 @@
 <%#  Theme section of the living style guide (admin/style) — the LANDING section.
-     Theme owns "the colors": it leads with the 7 role tokens/swatches, then the
-     editor with a live dark/light preview, then the logos, the semantic tokens and
+     Theme owns "the colors": it leads with the role editor, which names each role's CSS
+     variable and the derived tokens, with a live dark/light preview, then the logos, the semantic tokens and
      the type. GET /admin/theme redirects here.
      
      Save-in-place: this section intercepts Save + Regenerate and submits them via
@@ -42,17 +42,14 @@
   # Seed the live-preview editor with role -> hex, resolved from saved values.
   seed_colors = roles.index_with { |role| current_hex.call(role) }
 
-  # The 7 role tokens read live off the resolved theme (cta/text/border-strong
-  # are the semantic names — there is no --color-heading var).
-  token_swatches = [
-    ["--color-cta",           "CTA / primary"],
-    ["--color-surface",       "Surface"],
-    ["--color-success",       "Success"],
-    ["--color-danger",        "Danger"],
-    ["--color-warning",       "Warning"],
-    ["--color-text",          "Heading / text"],
-    ["--color-border-strong", "Border (strong)"]
-  ]
+  # Each role's CSS variable (there is no --color-heading or --color-primary var for a page to
+  # paint with: cta and text are the semantic names). Dark and light are each theme's page.
+  role_vars = { primary: "--color-cta", dark: "--color-page (dark)", light: "--color-page (light)", success: "--color-success",
+                warning: "--color-warning", danger: "--color-danger", accent: "--color-accent" }
+
+  # Not roles: Studio::ThemeResolver works these out from the roles, so they read here and
+  # no one edits them.
+  derived_tokens = [["Surface", "--color-surface"], ["Text", "--color-text"], ["Border (strong)", "--color-border-strong"]]
 
   csrf_ok = respond_to?(:protect_against_forgery?) && protect_against_forgery?
 %>
@@ -60,7 +57,7 @@
          x-data="dsThemeEditor(<%= seed_colors.to_json %>)">
   <div class="flex flex-wrap items-start justify-between gap-3">
     <div class="space-y-1">
-      <h2 class="text-2xl font-bold text-heading">Theme</h2>
+      <h2 class="type-h3 text-heading">Theme</h2>
       <p class="text-muted text-sm max-w-2xl">
         The color foundation. The 7-role system, editable here. Edits preview live; Save writes them
         and Regenerate clears the theme cache. Both persist <strong>in place</strong> — the page never
@@ -75,25 +72,32 @@
     </form>
   </div>
 
-  <%# ---- The colors — the role tokens/swatches (Theme owns these) ---------- %>
-  <div class="space-y-3">
-    <p class="label-upper">The colors — 7 role tokens</p>
-    <p class="text-muted text-sm max-w-2xl">
-      Read live off this app's theme via <code class="font-mono text-2xs">var(--color-*)</code>. Change
-      the app or its light/dark mode and every swatch (and every specimen on this page) follows.
-    </p>
-    <div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
-      <% token_swatches.each do |var, label| %>
-        <div class="card overflow-hidden">
-          <div class="h-16 border-b border-subtle" style="background: var(<%= var %>)"></div>
-          <div class="p-3 space-y-0.5">
-            <p class="text-sm text-heading font-medium"><%= label %></p>
-            <code class="font-mono text-2xs text-muted break-all"><%= var %></code>
+  <%# THE LOGOS, first in the section. A host may supply its own block in
+      app/views/style/host/_logos.html.erb, the same seam as host modals: the hub's has
+      one-click PNG downloads, which draw through a script only the hub carries. %>
+  <% if lookup_context.exists?("logos", ["style/host"], true) %>
+    <%= render "style/host/logos" %>
+  <% else %>
+  <% logos = Studio.respond_to?(:theme_logos) ? Array(Studio.theme_logos) : [] %>
+  <% if logos.any? %>
+    <div class="space-y-3">
+      <p class="label-upper">Logos</p>
+      <div class="grid gap-4 grid-cols-2 md:grid-cols-5">
+        <% 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="text-sm text-heading font-medium"><%= 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>
+            <code class="font-mono text-2xs text-muted break-all"><%= file %></code>
           </div>
-        </div>
-      <% end %>
+        <% end %>
+      </div>
     </div>
-  </div>
+  <% end %>
+  <% end %>
 
   <div class="grid gap-6 lg:grid-cols-2">
     <%# ---- Role-color editor (posts to /admin/theme, intercepted in place) - %>
@@ -103,7 +107,8 @@
       <% if csrf_ok %>
         <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" autocomplete="off">
       <% end %>
-      <h3 class="text-lg font-bold text-heading">Role colors</h3>
+      <h3 class="type-h4 text-heading">Role colors</h3>
+      <p class="text-muted text-sm">Every specimen on this page reads these through its CSS variable, so it follows the app and its light or dark mode.</p>
 
       <% roles.each do |role| %>
         <% db_col = db_col_for.call(role) %>
@@ -119,6 +124,7 @@
             <div class="flex items-center gap-2">
               <span class="text-heading font-medium text-sm"><%= role.to_s.titleize %></span>
               <% if has_custom %><span class="text-xs text-muted">(custom)</span><% end %>
+              <% if role_vars[role.to_sym] %><code class="font-mono text-2xs text-muted truncate"><%= role_vars[role.to_sym] %></code><% end %>
             </div>
             <input type="text"
                    name="theme_setting[<%= db_col %>]"
@@ -135,14 +141,28 @@
         </div>
       <% end %>
 
+      <div class="pt-4 border-t border-subtle space-y-2" data-test="style-derived-tokens">
+        <p class="label-upper">Derived, read only</p>
+        <% derived_tokens.each do |label, var| %>
+          <div class="flex items-center gap-4">
+            <div class="w-10 h-6 rounded border border-subtle shrink-0" style="background: var(<%= var %>)"></div>
+            <span class="text-heading font-medium text-sm"><%= label %></span>
+            <code class="font-mono text-2xs text-muted truncate"><%= var %></code>
+          </div>
+        <% end %>
+      </div>
+
       <div class="pt-4 border-t border-subtle">
         <button type="submit" class="btn btn-primary" :disabled="saving"
                 x-text="saving ? 'Saving…' : 'Save theme'">Save theme</button>
       </div>
     </form>
 
-    <%# ---- Live dark/light preview (Alpine, updates as you edit) ----------- %>
-    <div class="space-y-3">
+    <%# The half beside the editor: Typography, then the live dark/light preview, which
+        appears once a role color has been edited. %>
+    <div class="space-y-6 min-w-0">
+      <%= render "style/type_ladder" %>
+    <div class="space-y-3" x-show="edited" x-cloak data-test="style-theme-preview">
       <p class="label-upper">Preview</p>
       <p class="text-muted text-sm">A live dark/light mock — it tracks the editor as you type, before you save.</p>
       <div class="grid gap-3 sm:grid-cols-2">
@@ -168,28 +188,9 @@
         </div>
       </div>
     </div>
-  </div>
-  
-  <% logos = Studio.respond_to?(:theme_logos) ? Array(Studio.theme_logos) : [] %>
-  <% if logos.any? %>
-    <div class="space-y-3">
-      <p class="label-upper">Logos</p>
-      <div class="grid gap-4 grid-cols-2 md:grid-cols-5">
-        <% 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="text-sm text-heading font-medium"><%= 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>
-            <code class="font-mono text-2xs text-muted break-all"><%= file %></code>
-          </div>
-        <% end %>
-      </div>
     </div>
-  <% end %>
-  
+  </div>
+
   <%# Semantic tokens: the utilities a page paints with, under the role colours. %>
   <div class="space-y-3">
     <p class="label-upper">Semantic tokens</p>
@@ -217,21 +218,4 @@
     </div>
   </div>
   
-  <%# Type in this app's own font, named by role: the font itself is the host's. %>
-  <div class="space-y-3">
-    <p class="label-upper">Typography</p>
-    <div class="card p-6 space-y-4">
-      <p class="text-heading text-3xl font-extrabold">Heading</p>
-      <p class="text-heading text-xl font-bold">Subheading</p>
-      <p class="text-body text-base">Body text. The quick brown fox jumps over the lazy dog.</p>
-      <p class="text-secondary text-sm">Secondary text. Additional context and metadata.</p>
-      <p class="text-muted text-xs">Muted text. Timestamps, hints and fine print.</p>
-      <hr class="border-subtle">
-      <div class="flex flex-wrap gap-4">
-        <% [400, 500, 600, 700, 800, 900].each do |weight| %>
-          <span class="text-heading text-lg" style="font-weight: <%= weight %>"><%= weight %></span>
-        <% end %>
-      </div>
-    </div>
-  </div>
   </section>

data/app/views/style/_tricks.html.erb

@@ -33,7 +33,7 @@
 %>
 <section id="tricks" class="space-y-12" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
   <div class="space-y-1">
-    <h2 class="text-2xl font-bold text-heading">Tricks</h2>
+    <h2 class="type-h3 text-heading">Tricks</h2>
     <p class="text-muted text-sm max-w-2xl">
       A board of style tricks you can see and hand to an agent to use out of the box.
       Each specimen surfaces the rendered primitive, its <strong>class name (one-click
@@ -45,7 +45,7 @@
   <!-- Buttons -->
   <section class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Buttons</h3>
+      <h3 class="type-h4 text-heading">Buttons</h3>
       <p class="text-muted text-sm">
         <code class="font-mono text-2xs">.btn</code> base plus one role variant, and the
         <code class="font-mono text-2xs">.btn-sm</code> / <code class="font-mono text-2xs">.btn-lg</code> sizes.
@@ -75,7 +75,7 @@
   <!-- Page header -->
   <section class="space-y-5" data-page-header-specimen>
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Page header</h3>
+      <h3 class="type-h4 text-heading">Page header</h3>
       <p class="text-muted text-sm">
         <code class="font-mono text-2xs">studio/_page_header</code>: the title, optional meta beside
         it and optional tabs on the right. This page's own title row is one: scroll to see it take the bar.
@@ -110,7 +110,7 @@
   <!-- Surfaces, text and form -->
   <section class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Surfaces, text &amp; form</h3>
+      <h3 class="type-h4 text-heading">Surfaces, text &amp; form</h3>
       <p class="text-muted text-sm">Cards, badges, inputs, the empty state, and the uppercase meta label.</p>
     </div>
     <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -152,12 +152,14 @@
   </section>
 
   <!-- Tints and shades: the scrim primitive -->
+  <%= render "style/glass" %>
+
   <%= render "style/scrims" %>
 
   <!-- Time stamps: the "at" format -->
   <section class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Time stamps — the &ldquo;at&rdquo; format</h3>
+      <h3 class="type-h4 text-heading">Time stamps — the &ldquo;at&rdquo; format</h3>
       <p class="text-muted text-sm">
         <code class="font-mono text-2xs">at_time_tag</code> stamps WHEN something happened, on
         the reader&rsquo;s own clock. The stamps below are live: the server rendered them in this
@@ -231,7 +233,7 @@
   %>
   <section id="loader" class="space-y-5" style="scroll-margin-top: calc(var(--nav-h, 0px) + 5rem)">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Branded loader</h3>
+      <h3 class="type-h4 text-heading">Branded loader</h3>
       <p class="text-muted text-sm max-w-2xl">
         This app's own icon in its theme colours, in the style <code class="font-mono text-2xs">config.loader</code>
         names (<strong><%= loader_config[:style].to_s.tr("_", " ") %></strong>). Page loads, long waits and pending
@@ -282,7 +284,7 @@
   <!-- Motion primitives -->
   <section class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Motion primitives</h3>
+      <h3 class="type-h4 text-heading">Motion primitives</h3>
       <p class="text-muted text-sm">
         The seven <code class="font-mono text-2xs">engine-motion.css</code> primitives. Each knob is a themeable
         CSS variable - tune it inline with <code class="font-mono text-2xs">style="--knob: value"</code>.
@@ -369,7 +371,7 @@
   <!-- Effects -->
   <section class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Effects</h3>
+      <h3 class="type-h4 text-heading">Effects</h3>
       <p class="text-muted text-sm">
         The <code class="font-mono text-2xs">engine-motion.css</code> visual-effect primitives beyond motion -
         gradient text, a soft glow halo, a one- or two-color rotating <strong>selection glow</strong>
@@ -434,7 +436,7 @@
   <!-- Hold to confirm -->
   <section class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Hold to confirm</h3>
+      <h3 class="type-h4 text-heading">Hold to confirm</h3>
       <p class="text-muted text-sm max-w-2xl">
         A press-and-hold CTA for an action you do not want taken by accident, and the
         carbonation behind it. Ported from Turf Monster, where it confirms a contest entry.
@@ -497,7 +499,7 @@
   <!-- Confetti & pulse -->
   <section class="space-y-5">
     <div class="space-y-1">
-      <h3 class="text-xl font-bold text-heading">Confetti &amp; pulse</h3>
+      <h3 class="type-h4 text-heading">Confetti &amp; pulse</h3>
       <p class="text-muted text-sm max-w-2xl">
         Celebration effects lifted from Turf Monster into the engine. Confetti is
         <code class="font-mono text-2xs">window.studioConfetti</code> - a zero-dependency,
@@ -544,7 +546,7 @@
   <section class="space-y-5">
     <div class="space-y-1">
       <div class="flex flex-wrap items-center gap-3">
-        <h3 class="text-xl font-bold text-heading">Leveling</h3>
+        <h3 class="type-h4 text-heading">Leveling</h3>
         <% if leveling_on %>
           <span class="badge" style="color: var(--color-success-ink); border-color: var(--color-success)">enabled on this app</span>
         <% else %>

data/app/views/style/_type_ladder.html.erb

@@ -0,0 +1,33 @@
+<%# Typography, in this app's own font. The type ladder, on trial on this page: each named
+    role, its pixel size at this page's density, and what it is for; then the text inks and
+    the weights. A role sets size, not the tag. Body and fine print follow the
+    page's base, so they read 14 and 10.5 on a dense admin page and 16 and 12 on a public one. %>
+<% dense = respond_to?(:type_dense_page?) && type_dense_page? %>
+<%
+  ladder = [
+    ["type-h1", "48px", "Marketing headline"],
+    ["type-h2", "30px", "Page title on a tool page"],
+    ["type-h3", "20px", "Section"],
+    ["type-h4", "16px", "Subsection"],
+    ["type-body", dense ? "14px" : "16px", "Body text"],
+    ["type-fine", dense ? "10.5px" : "12px", "Fine print"]
+  ]
+%>
+<div class="card p-4 space-y-2" data-test="style-type-ladder">
+  <h3 class="type-h4 text-heading">Typography</h3>
+  <% ladder.each do |role, size, use| %>
+    <div class="flex flex-col gap-0.5 min-w-0" data-type-role="<%= role %>">
+      <code class="text-xs text-muted shrink-0"><%= role %> · <%= size %></code>
+      <span class="<%= role %> text-heading min-w-0"><%= use %></span>
+    </div>
+  <% end %>
+  <hr class="border-subtle">
+  <p class="text-body text-sm">Body ink. The quick brown fox jumps over the lazy dog.</p>
+  <p class="text-secondary text-sm">Secondary ink. Additional context and metadata.</p>
+  <p class="text-muted text-xs">Muted ink. Timestamps, hints and fine print.</p>
+  <div class="flex flex-wrap gap-4 pt-1">
+    <% [400, 500, 600, 700, 800, 900].each do |weight| %>
+      <span class="type-h4 text-heading" style="font-weight: <%= weight %>"><%= weight %></span>
+    <% end %>
+  </div>
+</div>

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

@@ -20,6 +20,10 @@
      specimen drives and why it is not the one the Modals section uses:
      app/views/style/_host.html.erb.
 
+     HEADINGS wear the type ladder, on trial on this page only (style/_type_ladder): the one
+     <h1> is studio/_page_header's, at type-h2; a section is an <h2> at type-h3; a subsection
+     is an <h3> at type-h4.
+
      Specimens use ONLY the engine's own classes (engine.css component layer plus
      engine-motion.css motion/effect/leveling layer), so a consumer that imports
      the engine's Tailwind entry (host.css: engine.css and engine-motion.css)
@@ -53,7 +57,7 @@
     ["components", "Components"]
   ]
 %>
-<div class="max-w-6xl mx-auto px-4 pt-6 pb-16">
+<div class="max-w-6xl mx-auto px-4 pt-6 pb-16" data-type-ladder>
   <%# The page's title and its section tabs: studio/_page_header, the row of the
       triple stack (docs/PAGE_HEADER.md). It sits at --z-sticky, above --z-raised,
       so the live hold button's portal bubbles scroll under it rather than over it.

data/docs/SITE_FOOTER.md

@@ -436,7 +436,7 @@ config.site_footer_chat_path = "/chat"             # or ->(view) { view.chat_pat
 
 | Setting | Meaning | Unset |
 |---------|---------|-------|
-| `site_footer_chat_path` | A path, or a callable taking the view (route helpers do not exist yet in an initializer). It answers nil to show no link on this page | No link |
+| `site_footer_chat_path` | A path, or a callable taking the view (route helpers do not exist yet in an initializer). It answers nil to show no link on this page; one that raises hides the link and reports it (the log on each render, `ErrorLog` once per error class), and the page still renders | No link |
 | `site_footer_chat_label` | The link's words | "Chat" |
 | `site_footer_chat_allowed` | A callable taking the viewer: `current_user`, **nil when signed out**, so write `user&.admin?` | `Studio.agent_chat_allowed` (everyone, by default) |
 

data/lib/studio/agent_chat.rb

@@ -25,7 +25,8 @@ module Studio
   # POST that still holds the visitor's anon token sends {email:, anon_token:},
   # and the hub folds the anonymous thread into the person's. A turn is
   # {id, role: "user"|"agent", text, created_at, status} with status
-  # pending|typing|answered|failed.
+  # pending|typing|answered|failed|held. held: stored, and no automatic answer is
+  # coming (a hub that predates it says failed for the same message).
   #
   # `voice` marks a spoken message: {check, score, duration_ms}, what POST
   # /voice/takes answered for the take (voice_param). NEVER A NAME: the hub
@@ -104,12 +105,13 @@ module Studio
       "silent" => { "button" => "Hold to talk" },
       "failed" => { "button" => "Hold to try again" },
       "denied" => { "button" => "Hold to talk" },
+      "tapped" => { "button" => "Hold to talk" },
       "unsupported" => { "button" => "Hold to talk" }
     }.freeze
 
     # The microphone chip's first words (the engine's say "tap Record").
     VOICE_CHIP_COPY = {
-      "prompt" => { "chip" => "Microphone: hold to talk to allow",
+      "prompt" => { "chip" => "Microphone: hold to allow",
                     "note" => "Hold the talk button once and allow the microphone. Then you can pick one here." }
     }.freeze
 

data/lib/studio/icons/README.md

@@ -0,0 +1,12 @@
+# Vendored icons
+
+`lucide/` holds the line icons `studio_icon` renders, copied unchanged from the
+`lucide-static` npm package, version 1.68.0. Lucide is under the ISC license, and its
+Feather-derived icons (`log-out` here) are under MIT. Both texts are in
+[`lucide/LICENSE`](lucide/LICENSE), which ships with the gem.
+
+The files are vendored, and render inline, because a strict CSP allows no icon CDN.
+
+To add an icon, copy its `.svg` from the same package version, and read it first. Vendor
+only what a view uses. `test/lib/studio_icons_test.rb` holds each file to the shape the
+helper reads.