studio-engine 0.117.0 → 0.119.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27c8703c859ad0039101776ceeeee457d6f2bd47df12a5180ebc20aa1127ad8c
-  data.tar.gz: 6b05c69deb801b08c6d1f6b31012220bf07b43cebb06b22e8becbd14fab159b0
+  metadata.gz: 10f7eaf25386391e9c922bd4f6937c17bfba9edfd56c2d66fb0b7efbc47f0b0e
+  data.tar.gz: 6db5f0a4e76c6f40e7c24cc8411774c835c8a4a3bbd7187df19579b6d5d4b459
 SHA512:
-  metadata.gz: 92bb22f3f1c1e28d7b2606541f2880ff098f3ff18986f29476fdfe66a9713c8e7565c72059e684a66b1c82251b86f0984b95bea4e8b2640775ddb0401a02e03a
-  data.tar.gz: 81332763ef29a2ccb68ca9f143b3c828022b5a3f42e6d47b30c63334ed59363a6decabe7e611c9e471bc1b9e539ade2be5f0b8ce71373d54ccce7d86f607ef05
+  metadata.gz: c881adcf7be3fd52979932145acbd8c4b51d213950a48d95f302bbebad10f7bbf2cde647e50bb6cca267b4f3b7ca81613969aa2e86d606e28ca9bdc692f1af7c
+  data.tar.gz: d0e05f2556bb259a9e05b704da3374e638c70fdba0cf6d634948922ad5a72203488239d62e07ce65ac1e0d3b73cc9cf590df3936c8f64086feaf85f57ed09530

data/CHANGELOG.md

@@ -4,6 +4,63 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.119.0 — 2026-10-29
+
+### Added
+
+- **The branded loader: every app's own icon, in its own colours, as its
+  loader.** `studio_loader` (inline, any size), `studio_loader_pending` (inside a
+  submit button, shown while it or its form is `aria-busy`) and
+  `studio_loader_overlay` (the page-load overlay, shown when a visit the user
+  started, a Turbo `advance` or `restore`, outlasts 350ms, never for a
+  background `replace` refresh; `window.StudioLoader.show/hide` for other long
+  waits). The overlay and busy buttons always clear: on `turbo:reload` (a
+  download at a URL with no extension), on `pagehide` and a bfcache `pageshow`
+  (Back after a `data-turbo="false"` submit), and at a `max_wait:` cap
+  (15000ms) for a form whose response was a download. The overlay's "Loading"
+  status is announced; it never marks itself `aria-busy`. One
+  class, `.studio-loader`, one size variable, `--studio-loader-size`. Six styles
+  from the Loader Lab: generic `breathe` (the default), `liquid` (takes a
+  percent), `orbit` and `steel`; signature `weld_bead` and `sparkle`, which need
+  an art file of marked layers. Declared with `config.loader`. Reduced motion
+  shows a still icon. Nothing renders until an app calls a helper. docs/LOADER.md.
+
+- **Google sign-in ships ready with every app.** The engine now depends on
+  `omniauth`, `omniauth-google-oauth2` and `omniauth-rails_csrf_protection`,
+  registers the `google_oauth2` strategy itself (POST-only, `email,profile`,
+  `select_account`) and supplies a default `User.from_omniauth`
+  (`Studio::OmniauthUser`), so a new app needs no gem, initializer or User code
+  for Google. A host that registers its own provider keeps it (the engine reads
+  the built middleware stack and stands aside), and a host's own
+  `from_omniauth` wins. The default links a verified address
+  case-insensitively, refuses an unverified match (`:email_not_verified`), and
+  gives a same-name newcomer `user-<id>` instead of failing on the slug index.
+  `Studio.google_ready?` is true when `GOOGLE_CLIENT_ID` and
+  `GOOGLE_CLIENT_SECRET` are set; until then the Google button on `/login`,
+  `/signup` and `/profile` opens a modal whose "Request Google setup"
+  (`POST /_studio/google_setup_request`) mails `Studio.google_setup_request_to`
+  (team@mcritchie.studio) once per app per day with the redirect URI to
+  register, built from the app's configured canonical host
+  (`Studio.google_canonical_host`, else `APP_HOST`, else the first plain
+  `config.hosts` entry), never from the request; it answers 404 once the
+  button posts. Where the engine owns the strategy it pins OmniAuth's callback
+  host (`full_host` in production from an explicit host, else
+  `allowed_hosts` from `config.hosts`). The remaining manual step: add
+  `https://<host>/auth/google_oauth2/callback` to the shared OAuth client and
+  set the two env vars. docs/GOOGLE_AUTH_SETUP.md.
+
+## 0.118.0 — 2026-10-28
+
+### Added
+
+- **The type scale: five text roles every app draws from.** `type-title` (6x),
+  `type-heading` (3x), `type-subhead` (1.5x), `type-body` (1x) and `type-fine`
+  (0.75x), each a multiple of `--type-base`, which the theme tag sets from
+  `Studio.type_base` (16). A `type-dense` container swaps in
+  `Studio.type_dense_base` (14) for admin and ops pages. Title and heading take
+  `Studio.type_display_weight` (800), the rest `Studio.type_text_weight` (400).
+  Nothing changes on a page until it uses a role. README "Type scale".
+
 ## 0.117.0 — 2026-10-28
 
 ### Changed

data/README.md

@@ -30,7 +30,7 @@ resolved.
 
 ## What It Provides
 
-- **Authentication**: Passwordless magic-link auth, optional password auth, Google OAuth via OmniAuth, Solana wallet sign-in, and optional one-way SSO patterns
+- **Authentication**: Passwordless magic-link auth, optional password auth, Google OAuth via OmniAuth (ships ready: strategy, default `User.from_omniauth` and a setup modal until the OAuth client is set; docs/GOOGLE_AUTH_SETUP.md), Solana wallet sign-in, and optional one-way SSO patterns
 - **Error handling**: `Studio::ErrorHandling` concern with `rescue_and_log`, `ErrorLog` model with `capture!`, error log viewer at `/error_logs`
 - **Session drift**: every page carries a session stamp and loads `window.StudioSession`, which notices when another tab signs in or out, the session expires, or the server revokes it; `session:changed` / `session:mismatch` events, cross-tab sync, an identity-source plug-in interface, and `expectChange` holds for deliberate switches. The rehydrate endpoint (`GET /session/state`) is opt-in. See [`docs/SESSION_DRIFT.md`](docs/SESSION_DRIFT.md).
 - **Theme system**: Dynamic CSS custom properties generated from 7 role colors (primary, dark, light, success, accent, warning, danger). Dark/light mode toggle. Admin theme editor at `/admin/theme`.
@@ -40,6 +40,7 @@ resolved.
 - **ThemeSetting model**: Per-app DB overrides with fallback to config defaults
 - **Geo**: `Studio::GeoDetection` places every visitor (IP → country + subdivision, session-cached), `Studio::GeoSetting` stores the operator's blocked countries and regions, `require_geo_allowed` locks whichever surfaces an app chooses, and the shared badge + `/admin/geo` manager ship with it. See [`docs/GEO.md`](docs/GEO.md).
 - **Site identity and link previews**: `Studio::SiteIdentity` holds the app's title, description and image, edited at `/admin/link_preview` beside a live unfurl card and read anywhere through `Studio.site_identity`. Every page unfurls with it unless it calls `link_preview image:, title:, description:`, and `Studio::LinkPreviewBots` serves preview fetchers a slim page under iMessage's 1 MiB limit. Adopt with `bin/rails g studio:site_identity`. See [`docs/LINK_PREVIEW.md`](docs/LINK_PREVIEW.md).
+- **Branded loader**: `studio_loader`, `studio_loader_pending` and `studio_loader_overlay` draw the app's own icon in its theme colours for page loads, long waits and pending buttons, in the style `config.loader` names (Breathe by default). See [`docs/LOADER.md`](docs/LOADER.md).
 - **Public user page**: `/u/:username` shows a user's avatar and username (nothing else), and unfurls with their avatar, falling back to the site image. Link any username to it with `link_to_user_profile(user)` or `studio_user_profile_path(user)`. Opt in with `config.draw_public_user_routes = true`. See [`docs/PUBLIC_USER_PAGE.md`](docs/PUBLIC_USER_PAGE.md).
 - **Transactional emails**: `Studio::EmailCatalog` — every email an app sends, its type, a live preview, and its banner — plus the shared `/admin/emails` page. Every app inherits the standard emails and their artwork on day one, and can register its own workflows and upload its own banners. See [Transactional emails](#transactional-emails).
 - **Site footer**: `<%= studio_site_footer %>` in the layout renders the public site's footer. It is on by default: with nothing configured it prints the app's name, logo and the legal links the app has routes for, and no address. `config.site_footer` declares the app's own facts (brand, social profiles, link columns, an address with a live map, legal links), every part optional; `config.site_footer_address` adds a location in one setting; `config.site_footer = false` turns the footer off. Leaflet is vendored and served by the engine. See [`docs/SITE_FOOTER.md`](docs/SITE_FOOTER.md).
@@ -310,6 +311,47 @@ flag — it cannot know where the reader is sitting, so only the reader's machin
 may assert one. A host that omits the script still gets working stamps, just
 frozen in the app's timezone. Specimen: `/admin/style` → Tricks → Time stamps.
 
+### Type scale — `type-*`
+
+The one set of text sizes every Studio app uses (Alex McRitchie's standard,
+2026-10-28; the hub's `/logos/<brand>` Type Scale card shows it per brand).
+Each role is a multiple of one base:
+
+| Utility | Multiple | Public base (16 px) | Dense base (14 px) | Weight |
+|---|---|---|---|---|
+| `type-title` | 6x | 96 px | 84 px | display |
+| `type-heading` | 3x | 48 px | 42 px | display |
+| `type-subhead` | 1.5x | 24 px | 21 px | text |
+| `type-body` | 1x | 16 px | 14 px | text |
+| `type-fine` | 0.75x | 12 px | 10.5 px | text |
+
+```erb
+<h1 class="type-title text-heading">Winter Run 2026</h1>
+<p class="type-body text-body">Since 2016 ...</p>
+
+<%# an admin or ops page: everything inside takes the dense base %>
+<main class="type-dense">
+  <h1 class="type-heading text-heading">Releases</h1>
+</main>
+```
+
+- **Public pages** use the public base. **Admin and ops pages** put
+  `type-dense` on their container: the roles inside keep their ratios on the
+  dense base.
+- **Set the base and weights from the brand kit**, in
+  `config/initializers/studio.rb`: `Studio.type_base`,
+  `Studio.type_dense_base`, `Studio.type_display_weight`,
+  `Studio.type_text_weight`. The theme tag (`studio_theme_css_tag`) writes them
+  as `--type-base`, `--type-dense-base`, `--type-display-weight` and
+  `--type-text-weight`; a bad value raises, naming the setting.
+- **A role sets size, weight and line height only.** Colour stays with
+  `text-heading`, `text-body` and the rest, which are colour utilities, not
+  sizes.
+- **Nothing is smaller than `type-fine`.** A new page uses the roles, not
+  `text-xs` or `text-2xs`; existing pages move over app by app.
+- The multiples live in `Studio::TypeScale::ROLES` and in `engine.css`;
+  `test/lib/type_scale_contract_test.rb` keeps the two the same.
+
 ### Tints and shades — `.scrim`
 
 Text laid over media on a PAGE (a hero photo, a video, a banner) reads through

data/app/assets/tailwind/studio_engine/engine-motion.css

@@ -28,6 +28,10 @@
     .hold-stack/.fizz-bit the carbonation behind it           (ported, TM)
     .email-reject         email field rejection shake + fade  (extracted, TM)
 
+  Loader:
+    .studio-loader        the app's icon as a branded loader   (Loader Lab picks)
+    .studio-loader-overlay  the page-load overlay around it    (docs/LOADER.md)
+
   Leveling:
     .level-badge(-1..-10) progressive level pill ladder       (ported, TM)
     .level-up-pop         level-up pop + glow burst           (ported, TM)
@@ -2163,3 +2167,322 @@ body.modal-open { overflow: visible; }
     30% { transform: translateY(-3px); opacity: 1; }
   }
 }
+
+/* =============================================================================
+   BRANDED LOADER — the app's own icon, in its own theme colours, as a loader.
+   Ported from the Loader Lab (task branded-app-loader, Alex McRitchie's picks:
+   01 Breathe, 03 Liquid fill, 04 Spark orbit, 05 Weld bead, 08 Sparkle,
+   09 Steel square spin). Markup: app/views/studio/loader/_loader.html.erb,
+   through Studio::LoaderHelper (studio_loader, studio_loader_pending,
+   studio_loader_overlay). Rules: docs/LOADER.md.
+
+   ONE class, .studio-loader, and ONE size variable, --studio-loader-size; the
+   style is data-loader-style. Generic styles (breathe, liquid, orbit, steel)
+   draw the icon as an image and so fit any app; the signature styles
+   (weld-bead, sparkle) animate layers the app's art file marks.
+
+   Tune:  --studio-loader-size   the box, any length (default 96px)
+          --studio-loader-color  halo, frame, sparkle tint (default primary)
+          --studio-loader-hot    the orbiting spark (default accent)
+          --studio-loader-bead-1..6  the bead's cooling colours, coolest first
+
+   Under prefers-reduced-motion every loader is a STILL icon: no animation, and
+   the moving parts (orbit spark, bead, sparkle flares, halo) are not drawn.
+   ========================================================================== */
+@property --studio-loader-level {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
+@property --studio-loader-wave {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@layer components {
+  .studio-loader {
+    --studio-loader-size: 96px;
+    --studio-loader-color: var(--color-primary);
+    --studio-loader-hot: var(--color-accent);
+    --studio-loader-bead-1: #5A1E0E;
+    --studio-loader-bead-2: #A63A17;
+    --studio-loader-bead-3: #D7602E;
+    --studio-loader-bead-4: #F08A5A;
+    --studio-loader-bead-5: #FFD2A6;
+    --studio-loader-bead-6: #FFFFFF;
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    width: var(--studio-loader-size);
+    height: var(--studio-loader-size);
+    vertical-align: middle;
+    isolation: isolate;
+  }
+
+  .studio-loader > * { grid-area: 1 / 1; }
+
+  .studio-loader-icon {
+    display: block;
+    width: 80%;
+    height: 80%;
+    object-fit: contain;
+    user-select: none;
+  }
+
+  .studio-loader-icon[data-loader-blank] {
+    width: 44%;
+    height: 44%;
+    border-radius: 28%;
+    background: var(--studio-loader-color);
+  }
+
+  /* Mono: the icon as a mask in the text colour, for a loader inside a filled
+     button where the brand colour would vanish into the fill. */
+  .studio-loader[data-loader-mono] { --studio-loader-color: currentColor; }
+  .studio-loader[data-loader-mono] .studio-loader-icon:not(img):not([data-loader-blank]) {
+    background: currentColor;
+    -webkit-mask: var(--studio-loader-mask) center / contain no-repeat;
+    mask: var(--studio-loader-mask) center / contain no-repeat;
+  }
+
+  /* ---- 01 Breathe: the icon swells and settles under a soft halo ---------- */
+  .studio-loader[data-loader-style="breathe"] .studio-loader-icon {
+    animation: studio-loader-breathe 2.6s ease-in-out infinite;
+  }
+
+  .studio-loader-halo {
+    position: absolute;
+    inset: -8%;
+    border-radius: 50%;
+    background: radial-gradient(closest-side, color-mix(in srgb, var(--studio-loader-color) 42%, transparent), transparent);
+    animation: studio-loader-halo 2.6s ease-in-out infinite;
+    pointer-events: none;
+  }
+
+  /* ---- 03 Liquid fill: the icon fills under a drifting wave, then drains --- */
+  .studio-loader[data-loader-style="liquid"] .studio-loader-icon { width: 84%; height: 84%; }
+
+  .studio-loader-ghost { opacity: 0.2; filter: grayscale(1) brightness(1.4); }
+
+  .studio-loader-fill {
+    --studio-loader-wave-h: calc(var(--studio-loader-size) * 0.07);
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    -webkit-mask:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q10 0 20 4T40 4V8H0Z'/%3E%3C/svg%3E") repeat-x,
+      linear-gradient(#000, #000) no-repeat;
+    mask:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4Q10 0 20 4T40 4V8H0Z'/%3E%3C/svg%3E") repeat-x,
+      linear-gradient(#000, #000) no-repeat;
+    -webkit-mask-size: calc(var(--studio-loader-size) * 0.5) var(--studio-loader-wave-h), 100% 100%;
+    mask-size: calc(var(--studio-loader-size) * 0.5) var(--studio-loader-wave-h), 100% 100%;
+    -webkit-mask-position:
+      var(--studio-loader-wave) calc(var(--studio-loader-level) * var(--studio-loader-size) - var(--studio-loader-wave-h) + 1px),
+      0 calc(var(--studio-loader-level) * var(--studio-loader-size));
+    mask-position:
+      var(--studio-loader-wave) calc(var(--studio-loader-level) * var(--studio-loader-size) - var(--studio-loader-wave-h) + 1px),
+      0 calc(var(--studio-loader-level) * var(--studio-loader-size));
+    animation: studio-loader-level 4.4s ease-in-out infinite, studio-loader-wave 1.9s linear infinite;
+  }
+
+  /* With a percent the level follows it (studio_loader percent:, or
+     StudioLoader.setPercent), and only the wave moves. */
+  .studio-loader[data-loader-percent] .studio-loader-fill {
+    --studio-loader-level: calc(1 - var(--studio-loader-percent, 0) / 100);
+    animation: studio-loader-wave 1.9s linear infinite;
+    transition: --studio-loader-level 0.45s cubic-bezier(.12, .82, .24, 1);
+  }
+
+  /* ---- 04 Spark orbit: a white-hot spark circles the icon ------------------ */
+  .studio-loader[data-loader-style="orbit"] .studio-loader-icon { width: 62%; height: 62%; }
+
+  .studio-loader-track {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: max(1px, calc(var(--studio-loader-size) * 0.012)) solid color-mix(in srgb, var(--studio-loader-hot) 16%, transparent);
+  }
+
+  .studio-loader-orb {
+    position: absolute;
+    inset: 0;
+    animation: studio-loader-spin 1.9s linear infinite;
+  }
+
+  .studio-loader-trail {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: conic-gradient(from 0deg, transparent 0turn 0.66turn, color-mix(in srgb, var(--studio-loader-hot) 70%, transparent) 0.96turn, color-mix(in srgb, var(--studio-loader-hot) 25%, #fff) 1turn);
+    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - max(2px, var(--studio-loader-size) * 0.035)), #000 calc(100% - max(1.5px, var(--studio-loader-size) * 0.03)));
+    mask: radial-gradient(farthest-side, transparent calc(100% - max(2px, var(--studio-loader-size) * 0.035)), #000 calc(100% - max(1.5px, var(--studio-loader-size) * 0.03)));
+  }
+
+  .studio-loader-spark {
+    position: absolute;
+    left: 50%;
+    top: max(1px, calc(var(--studio-loader-size) * 0.016));
+    width: max(4px, calc(var(--studio-loader-size) * 0.085));
+    aspect-ratio: 1;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    background: radial-gradient(circle, #fff 0 30%, color-mix(in srgb, var(--studio-loader-hot) 45%, #fff) 45%, var(--studio-loader-hot) 72%, transparent 74%);
+    box-shadow: 0 0 calc(var(--studio-loader-size) * 0.09) calc(var(--studio-loader-size) * 0.02) color-mix(in srgb, var(--studio-loader-hot) 70%, transparent);
+  }
+
+  /* ---- 09 Steel square spin: quarter-turn snaps inside drafting corners ---- */
+  .studio-loader[data-loader-style="steel"] .studio-loader-icon {
+    width: 60%;
+    height: 60%;
+    animation: studio-loader-snap 3.6s infinite;
+  }
+
+  .studio-loader-frame {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+    fill: none;
+    stroke: var(--studio-loader-color);
+    stroke-opacity: 0.45;
+    stroke-width: 2.5;
+  }
+
+  /* ---- Signature styles: the art's marked layers over the icon ------------- */
+  .studio-loader-art {
+    display: block;
+    width: 80%;
+    height: 80%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  /* 05 Weld bead: a hot point runs the outline and cools behind itself. */
+  .studio-loader-bead {
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    animation: studio-loader-bead 3.6s linear infinite;
+    animation-delay: calc((var(--studio-loader-bead-length) / 100 - 1) * 3.6s);
+  }
+
+  .studio-loader-bead[data-layer="1"] { stroke: var(--studio-loader-bead-1); }
+  .studio-loader-bead[data-layer="2"] { stroke: var(--studio-loader-bead-2); }
+  .studio-loader-bead[data-layer="3"] { stroke: var(--studio-loader-bead-3); }
+  .studio-loader-bead[data-layer="4"] { stroke: var(--studio-loader-bead-4); }
+  .studio-loader-bead[data-layer="5"] { stroke: var(--studio-loader-bead-5); }
+  .studio-loader-bead[data-layer="6"] { stroke: var(--studio-loader-bead-6); }
+
+  /* 08 Sparkle: the icon's own sparkles flare in turn, in the art's order. */
+  .studio-loader-sparkle {
+    fill: color-mix(in srgb, var(--studio-loader-color) 15%, #fff);
+    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--studio-loader-color) 60%, #fff));
+    transform-box: fill-box;
+    transform-origin: center;
+    opacity: 0;
+    animation: studio-loader-twinkle calc(var(--studio-loader-sparks, 5) * 0.6s) infinite;
+    animation-delay: calc(var(--studio-loader-i, 0) * 0.6s - var(--studio-loader-sparks, 5) * 0.6s);
+  }
+
+  /* ---- Pending: inside a button, shown only while it or its form is busy --- */
+  .studio-loader[data-loader-pending] { display: none; }
+  :where(form, button)[aria-busy="true"] .studio-loader[data-loader-pending] { display: inline-grid; }
+  :where(form, button)[aria-busy="true"] [data-loader-idle] { display: none; }
+  .studio-loader[data-loader-pending] .studio-loader-halo { display: none; }
+  .studio-loader[data-loader-pending] .studio-loader-icon { width: 100%; height: 100%; animation-duration: 1.4s; }
+
+  /* ---- The page-load overlay (studio_loader_overlay) ----------------------- */
+  .studio-loader-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-alert);
+    display: grid;
+    place-items: center;
+    background: color-mix(in srgb, var(--color-page) 78%, transparent);
+    -webkit-backdrop-filter: blur(3px);
+    backdrop-filter: blur(3px);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  .studio-loader-overlay[hidden] { display: none; }
+  .studio-loader-overlay[data-state="shown"] { opacity: 1; }
+
+  .studio-loader-overlay-panel {
+    display: grid;
+    justify-items: center;
+    gap: 0.75rem;
+    padding: 1.5rem;
+  }
+
+  .studio-loader-caption {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+  }
+
+  .studio-loader-caption:empty { display: none; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .studio-loader,
+    .studio-loader *,
+    .studio-loader-overlay {
+      animation: none !important;
+      transition: none !important;
+    }
+    .studio-loader-halo,
+    .studio-loader-orb,
+    .studio-loader-art { display: none; }
+    .studio-loader-fill { --studio-loader-level: 0.45; }
+  }
+
+  @keyframes studio-loader-breathe {
+    0%, 100% { transform: scale(0.9); opacity: 0.55; }
+    50% { transform: scale(1); opacity: 1; }
+  }
+
+  @keyframes studio-loader-halo {
+    0%, 100% { opacity: 0; transform: scale(0.85); }
+    50% { opacity: 0.9; transform: scale(1.04); }
+  }
+
+  @keyframes studio-loader-level {
+    0% { --studio-loader-level: 1.06; }
+    55%, 64% { --studio-loader-level: -0.05; }
+    100% { --studio-loader-level: 1.06; }
+  }
+
+  @keyframes studio-loader-wave {
+    from { --studio-loader-wave: 0px; }
+    to { --studio-loader-wave: calc(var(--studio-loader-size) * -0.5); }
+  }
+
+  @keyframes studio-loader-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes studio-loader-snap {
+    0% { transform: rotate(0); animation-timing-function: cubic-bezier(.76, 0, .12, 1); }
+    12.5%, 25% { transform: rotate(90deg); animation-timing-function: cubic-bezier(.76, 0, .12, 1); }
+    37.5%, 50% { transform: rotate(180deg); animation-timing-function: cubic-bezier(.76, 0, .12, 1); }
+    62.5%, 75% { transform: rotate(270deg); animation-timing-function: cubic-bezier(.76, 0, .12, 1); }
+    87.5%, 100% { transform: rotate(360deg); }
+  }
+
+  @keyframes studio-loader-bead {
+    from { stroke-dashoffset: 0; }
+    to { stroke-dashoffset: -100; }
+  }
+
+  @keyframes studio-loader-twinkle {
+    0% { transform: scale(0.8); opacity: 0; }
+    9% { transform: scale(1.7) rotate(25deg); opacity: 1; animation-timing-function: ease-in; }
+    26%, 100% { transform: scale(0.8); opacity: 0; }
+  }
+}

data/app/assets/tailwind/studio_engine/engine.css

@@ -179,6 +179,50 @@ body.modal-open .studio-app-banner {
   @apply bg-inset rounded-xl border border-subtle p-4 overflow-x-auto;
 }
 
+/* -- Type scale ------------------------------------------------------------
+   The one set of text sizes every app draws from (Studio::TypeScale, README
+   "Type scale"). Each role is a multiple of --type-base: title 6x, heading 3x,
+   subhead 1.5x, body 1x, fine print 0.75x. The theme tag sets the app's base
+   (Studio.type_base, 16px) and weights; `type-dense` swaps in the dense base
+   (Studio.type_dense_base, 14px) for everything inside it, for admin and ops
+   pages. The fallbacks are the engine defaults, for a page with no theme tag.
+   The multiples here must match Studio::TypeScale::ROLES
+   (test/lib/type_scale_contract_test.rb). */
+
+@utility type-dense {
+  --type-base: var(--type-dense-base, 14px);
+}
+
+@utility type-title {
+  font-size: calc(var(--type-base, 16px) * 6);
+  font-weight: var(--type-display-weight, 800);
+  line-height: 1.05;
+}
+
+@utility type-heading {
+  font-size: calc(var(--type-base, 16px) * 3);
+  font-weight: var(--type-display-weight, 800);
+  line-height: 1.1;
+}
+
+@utility type-subhead {
+  font-size: calc(var(--type-base, 16px) * 1.5);
+  font-weight: var(--type-text-weight, 400);
+  line-height: 1.25;
+}
+
+@utility type-body {
+  font-size: calc(var(--type-base, 16px) * 1);
+  font-weight: var(--type-text-weight, 400);
+  line-height: 1.5;
+}
+
+@utility type-fine {
+  font-size: calc(var(--type-base, 16px) * 0.75);
+  font-weight: var(--type-text-weight, 400);
+  line-height: 1.4;
+}
+
 /* -- Scrims: tints and shades ----------------------------------------------
    A scrim is the wash laid over media (a photo, a video) so text reads on it.
    It comes in two TONES, and the tone is a design decision, not a colour pick:

data/app/controllers/omniauth_callbacks_controller.rb

@@ -6,6 +6,9 @@
 # email_verified + expiry before trusting the identity. Only a Google-confirmed
 # verified email is allowed to find-or-create an account.
 #
+# The strategy itself is registered by the engine (Studio::GoogleSignIn) unless
+# the host registered its own.
+#
 # Engine GENERIC base. turf-monster OVERRIDES this controller for popup-mode,
 # account merge, wallet-collision stashing, and funnel attribution.
 class OmniauthCallbacksController < ApplicationController
@@ -19,7 +22,10 @@ class OmniauthCallbacksController < ApplicationController
       return redirect_to login_path, alert: "Google sign-in could not be verified. Please try again."
     end
 
-    user = User.from_omniauth(auth, email_verified: result.email_verified)
+    # The host's own User.from_omniauth when it defines one, else the engine's
+    # default (Studio::OmniauthUser), so a new app signs people in with Google
+    # before it writes any User code of its own.
+    user = Studio::OmniauthUser.resolve(User, auth, email_verified: result.email_verified)
     unless user.is_a?(User)
       return redirect_to login_path, alert: "Google sign-in couldn't be completed. Please try another method."
     end
@@ -28,7 +34,14 @@ class OmniauthCallbacksController < ApplicationController
       set_app_session(user)
       redirect_to root_path, notice: "Signed in with Google!"
     end
-  rescue StandardError
+  rescue StandardError => e
+    # Recorded before the redirect, so a failing sign-in shows up somewhere the
+    # team looks rather than only as a flash the person dismisses.
+    begin
+      ErrorLog.capture!(e) if defined?(::ErrorLog) && ::ErrorLog.respond_to?(:capture!)
+    rescue StandardError
+      Rails.logger.warn("[omniauth] could not log the Google sign-in failure: #{e.class}")
+    end
     redirect_to login_path, alert: "Google sign-in failed. Please try again."
   end
 

data/app/controllers/studio/google_setup_requests_controller.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Studio
+  # POST /_studio/google_setup_request: "Request Google setup", from the modal
+  # the Google button opens while the app has no OAuth client
+  # (Studio::GoogleSignIn, studio/google_sign_in/_button).
+  #
+  # Unauthenticated, because the person asking cannot sign in yet, and CSRF-
+  # checked like any form post. Three rules keep a stranger from turning it
+  # into a mail cannon or a way to plant a callback (Carl and Steffon,
+  # 2026-10-29):
+  #
+  #   * NOTHING IN IT COMES FROM THE REQUEST'S HOST. The daily claim is keyed on
+  #     the app (Studio::GoogleSignIn.app_key), so a forged Host header, port or
+  #     X-Forwarded-Host cannot mint a fresh day; and the redirect URI in the
+  #     email is built from the app's configured canonical host
+  #     (Studio::GoogleSignIn.canonical_redirect_uri), so ops is never asked to
+  #     register a host an attacker chose.
+  #   * ONCE PER APP PER DAY (Studio::GoogleSignIn.claim_daily_request).
+  #   * ONLY WHILE THE BUTTON SHOWS THE MODAL. An app whose button already
+  #     posts to Google (client configured, or its own provider) answers 404.
+  #
+  # Every accepted request writes a log line, the repeats included, so the logs
+  # show demand.
+  class GoogleSetupRequestsController < ::ApplicationController
+    skip_before_action :require_authentication, raise: false
+
+    def create
+      return head(:not_found) if Studio::GoogleSignIn.button_posts?
+
+      redirect_uri = Studio::GoogleSignIn.canonical_redirect_uri
+      notified = Studio::GoogleSignIn.claim_daily_request
+
+      Rails.logger.info(
+        "[google-setup] request app=#{Studio.app_name.inspect} " \
+        "redirect_uri=#{redirect_uri || 'unconfigured'} notified=#{notified}"
+      )
+      deliver(redirect_uri) if notified
+
+      notice = if notified
+        "Thanks. We've asked the team to finish setting up Google sign-in. Use email for now."
+      else
+        "The team already has a request to set up Google sign-in today. Use email for now."
+      end
+
+      respond_to do |format|
+        format.json { render json: { requested: true, notified: notified, message: notice } }
+        format.any { redirect_to login_path, notice: notice }
+      end
+    end
+
+    private
+
+    def deliver(redirect_uri)
+      recipient = Studio.google_setup_request_to
+      Studio::Email.deliver(Studio::GoogleSetupMailer, :setup_requested,
+                            Studio.app_name.to_s, Studio::GoogleSignIn.canonical_host.to_s,
+                            redirect_uri.to_s, recipient, to: recipient)
+    rescue StandardError => e
+      # The person asking still gets an answer; the failure goes where the team
+      # looks for failures.
+      Rails.logger.warn("[google-setup] the request email failed: #{e.class}: #{e.message.to_s[0, 200]}")
+      ErrorLog.capture!(e) if defined?(::ErrorLog) && ::ErrorLog.respond_to?(:capture!)
+    end
+  end
+end