studio-engine 0.135.2 → 0.136.0

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

@@ -11,9 +11,12 @@
                         does. extra_icons_slot is rendered here, so the link
                         sidebar's trigger still follows it; like the user nav,
                         a slot wins over its legacy _html string.
-      brand_heading   — boolean, draw the brand title as the page's h1 (default: true).
-                        Pass false on a page that carries its own h1: the brand is
-                        drawn as a div with the same classes and contents.
+      brand_heading   — boolean, draw the brand title as the page's h1. Default:
+                        the engine decides. The brand is the h1 unless the page
+                        has its own (studio_page_has_h1?: studio/_page_header
+                        recorded one, or the page body holds an h1 tag); then it
+                        is a div with the same classes and contents. A preview
+                        keeps the h1. Pass true or false and it wins.
 %>
 <% show_user = local_assigns.fetch(:show_logged_in, logged_in?) %>
 <% is_preview = local_assigns.fetch(:preview, false) %>
@@ -35,7 +38,11 @@
 <% if extra_icons_slot.present? %>
   <% extra_icons_html = extra_icons_slot.is_a?(Hash) ? render(extra_icons_slot[:partial], **extra_icons_slot.fetch(:locals, {})) : render(extra_icons_slot.to_s) %>
 <% end %>
-<% brand_tag = local_assigns.fetch(:brand_heading, true) ? "h1" : "div" %>
+<%# One h1 per page: the brand is the h1 only where the page has none of its own.
+    The class (.nav-title, or .nav-wordmark-brand for a lockup) is the stable
+    selector; the tag is not. %>
+<% brand_heading = local_assigns.fetch(:brand_heading) { is_preview || !(respond_to?(:studio_page_has_h1?) && studio_page_has_h1?) } %>
+<% brand_tag = brand_heading ? "h1" : "div" %>
 <%# Out-of-the-box navigation (engine 0.30): when the host declares
     Studio.sidebar_sections, the navbar mounts the link-sidebar trigger in its
     icon rails and renders the slide-out panels after the header. With no

data/app/views/studio/_cropper_assets.html.erb

@@ -9,16 +9,21 @@
     Pair with: the crop-photo and saving modal registrations in your modal-host
     block (see the README and CHANGELOG), and x-data="imageUploadHost({...})".
 
-    Both tags are pinned with Subresource Integrity, so a changed file on the CDN
-    fails to load rather than running. The hashes are sha384 over the exact
-    1.6.2 files; a version bump recomputes both (openssl dgst -sha384 -binary
-    FILE | openssl base64 -A), replaces the byte-exact copies in
-    test/fixtures/files/cropperjs-<version> that the browser lane serves, and
-    runs bin/cropper-sri-live. Keep the URLs exact: consumer CSPs name the
-    script by file. %>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css"
+    SERVED BY THE HOST'S ASSET PIPELINE, since engine-vendors-cropper-assets.
+    The two files were cdnjs tags, and a cdnjs connection that never answered
+    held the page's load event (the deferred script) on every page that renders
+    this partial. They are the cropperjs 1.6.2 npm package's dist files, byte for
+    byte (app/assets/javascripts/studio/cropper-1.6.2.min.js and
+    app/assets/stylesheets/studio/cropper-1.6.2.min.css); bin/cropper-sri-live
+    checks them against the npm tarball and cdnjs's published SRI.
+
+    Both tags keep Subresource Integrity, so a changed file fails to load
+    rather than running. The hashes are sha384 over the exact files. A version
+    bump replaces both files (new names), recomputes both hashes (openssl dgst
+    -sha384 -binary FILE | openssl base64 -A) and runs bin/cropper-sri-live. %>
+<link rel="stylesheet" href="<%= asset_path("studio/cropper-1.6.2.min.css") %>"
       integrity="sha384-6LFfkTKLRlzFtgx8xsWyBdKGpcMMQTkv+dB7rAbugeJAu1Ym2q1Aji1cjHBG12Xh"
       crossorigin="anonymous">
-<script defer src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"
+<script defer src="<%= asset_path("studio/cropper-1.6.2.min.js") %>"
         integrity="sha384-jrOgQzBlDeUNdmQn3rUt/PZD+pdcRBdWd/HWRqRo+n2OR2QtGyjSaJC0GiCeH+ir"
         crossorigin="anonymous"></script>

data/app/views/studio/_legal_page.html.erb

@@ -0,0 +1,52 @@
+<%# locals: (title:, updated: nil, crumbs: [], links: [], data: {}) %>
+<%# THE LEGAL PAGE: the standard page header and a readable column, for an app's
+    privacy policy and terms (docs/PAGE_HEADER.md, "The legal page"). Render it as a
+    layout around the page's sections:
+
+      render layout: "studio/legal_page", locals: { title: "Privacy Policy", updated: "November 8, 2026" }
+        ...the sections, each an h2 and its paragraphs...
+
+      title     the page's one h1, in studio/_page_header.
+      updated   the date the text last changed, as the reader should see it. It is
+                printed as "Last updated" and the date, under the row.
+      crumbs    the row's trail, as studio/_page_header takes it.
+      links     the row's links line, such as the other legal page.
+      data      data attributes for the column, such as data-legal-page.
+
+    SCOPED CSS, NOT UTILITIES, as studio/site_footer/_assets: the column reads the
+    theme's custom properties with a fallback beside each, so it reads the same in a
+    Tailwind app and in a plain-CSS one. A plain-CSS app also sets
+    config.page_header_self_styled, so the row brings its own styles too.
+
+    The column has a 1rem gutter, which the row's default bleed fits. %>
+<% unless @_studio_legal_page_styled %>
+<% @_studio_legal_page_styled = true %>
+<style <%= tag.attributes(nonce: (content_security_policy_nonce if respond_to?(:content_security_policy_nonce))) %>>
+  .legal-page { box-sizing: border-box; max-width: 46rem; margin-inline: auto; padding: 1.5rem 1rem 3rem; }
+  .legal-page-updated { margin: .25rem 0 0; font-size: .875rem; line-height: 1.25rem;
+    color: var(--color-text-muted, var(--color-text-secondary, currentColor)); }
+  .legal-page-body { margin-top: 1.5rem; font-size: 1rem; line-height: 1.7; color: var(--color-text-body, currentColor);
+    overflow-wrap: break-word; }
+  .legal-page-body > :first-child { margin-top: 0; }
+  .legal-page-body :is(h2, h3) { color: var(--color-text, currentColor); line-height: 1.3; letter-spacing: -.01em; }
+  .legal-page-body h2 { margin: 2.25rem 0 0; font-size: 1.25rem; font-weight: 700; }
+  .legal-page-body h3 { margin: 1.5rem 0 0; font-size: 1.0625rem; font-weight: 700; }
+  .legal-page-body :is(p, ul, ol) { margin: .75rem 0 0; }
+  .legal-page-body :is(ul, ol) { padding-left: 1.5rem; }
+  .legal-page-body ul { list-style: disc; }
+  .legal-page-body ol { list-style: decimal; }
+  .legal-page-body li + li { margin-top: .375rem; }
+  .legal-page-body strong { color: var(--color-text, currentColor); font-weight: 700; }
+  .legal-page-body a { color: var(--color-primary-ink, var(--color-primary, currentColor)); text-decoration: underline;
+    text-underline-offset: 3px; }
+  .legal-page-body a:hover { text-decoration-thickness: 2px; }
+  .legal-page-body section + section { margin-top: 0; }
+</style>
+<% end %>
+<%= tag.div(class: "legal-page", data: { studio_legal_page: "" }.merge(data)) do %>
+  <%= render "studio/page_header", title: title, crumbs: crumbs, links: links %>
+  <% if updated.present? %>
+    <p class="legal-page-updated">Last updated <%= updated %></p>
+  <% end %>
+  <article class="legal-page-body"><%= yield %></article>
+<% end %>

data/app/views/studio/_page_header.html.erb

@@ -66,8 +66,18 @@
     parent's start, so the controller measures the row's place from the row. It
     carries the controller, so the row keeps its data-studio-controller for the
     page's own. So the row carries no top margin: the space above it belongs to its
-    container. %>
-<div class="page-header-sentinel" data-studio-controller="page-header" aria-hidden="true"></div>
+    container.
+
+    SELF-STYLED, IN A PLAIN-CSS APP. studio_page_header_assets renders the row's own
+    CSS and script once per page, only where config.page_header_self_styled asks
+    (Studio::PageHeaderHelper). Everywhere else it is nil, and it sits on the
+    sentinel's line, so a Tailwind app's row is the same to the byte.
+
+    THE PAGE'S ONE H1 is this row's title, so it records one, and the navbar draws its
+    brand as a div (StudioNavbarHelper#studio_page_has_h1?). content_for, not the helper:
+    a host renders this partial from views that may not include the engine's helpers. It
+    sits on the same line and renders nothing. %>
+<% content_for(:studio_page_h1, "1") unless content_for?(:studio_page_h1) %><%= studio_page_header_assets if respond_to?(:studio_page_header_assets) %><div class="page-header-sentinel" data-studio-controller="page-header" aria-hidden="true"></div>
 <%= tag.div(class: "page-header sticky #{row_class}".strip,
       style: "top: var(--pin-page-top, var(--nav-bottom, var(--nav-h, 0px))); z-index: var(--z-sticky, 30)",
       data: data.merge(pin: "page")) do %>

data/app/views/studio/page_header/_assets.html.erb

@@ -0,0 +1,151 @@
+<%# The self-styled page header's CSS and script. Rendered once per page, by
+    studio_page_header_assets, and only where config.page_header_self_styled asks
+    (docs/PAGE_HEADER.md, "In a plain-CSS app").
+
+    SCOPED CSS, NOT UTILITIES, as studio/site_footer/_assets. Everything the row needs
+    is here, under .page-header, reading the theme's custom properties with a fallback
+    beside each, so the row renders whole in an app whose stylesheet has never seen
+    the engine's classes. The rules are the ones engine.css gives the row (its "page
+    header" block, the .btn family at .btn-sm, and .label-upper), so the two looks
+    are one. Change one, change the other.
+
+    The default bleed (row_class "-mx-4 px-4") is a pair of Tailwind classes. This
+    file defines them on the row alone, so the default fits a plain container with a
+    1rem gutter as it fits a Tailwind px-4.
+
+    THE SCRIPT is studio/page_header_self_styled, a module with no imports, loaded by
+    its own tag because a plain app may have no import map and no Stimulus. It is the
+    page-header controller's work: the stuck bar, the tab fades, the open tab on a
+    phone, each Links menu's aria-expanded, and the menu's place where the browser
+    has no anchor positioning. It also publishes --nav-bottom from the app's own
+    sticky masthead. The tag carries the request's CSP nonce when the host sets one.
+    Without the script the row keeps its bar at all times (the noscript rule), and
+    every control is still a link or a popover. %>
+<style <%= tag.attributes(nonce: (content_security_policy_nonce if respond_to?(:content_security_policy_nonce))) %>>
+  .page-header { --ph-ink: var(--color-text, currentColor); --ph-body: var(--color-text-body, currentColor);
+    --ph-muted: var(--color-text-muted, var(--color-text-secondary, currentColor));
+    --ph-surface: var(--color-surface, Canvas); --ph-surface-alt: var(--color-surface-alt, var(--color-surface, Canvas));
+    --ph-line: var(--color-border, rgb(127 127 127 / .25));
+    --ph-line-strong: var(--color-border-strong, var(--color-border, rgb(127 127 127 / .4)));
+    --ph-primary: var(--color-cta-fill, var(--color-cta, var(--color-primary, #6558e5)));
+    --ph-primary-hover: var(--color-cta-hover, var(--ph-primary));
+    --ph-primary-fg: var(--btn-primary-fg, #fff);
+    --ph-focus: var(--color-primary-ink, var(--color-primary, #6558e5));
+    --ph-base: var(--type-base, 16px);
+    position: sticky; box-sizing: border-box;
+    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; min-width: 0;
+    padding-block: .5rem; border-block: 1px solid transparent; background-color: transparent;
+    transition: background-color 150ms ease, border-color 150ms ease; }
+  .page-header *, .page-header *::before, .page-header *::after { box-sizing: border-box; }
+  .page-header[data-stuck] { background-color: var(--ph-surface); border-color: var(--ph-line); }
+  .page-header.-mx-4 { margin-inline: -1rem; }
+  .page-header.px-4 { padding-inline: 1rem; }
+  .page-header-sentinel { position: absolute; width: 0; height: 0; }
+  .page-header a { text-decoration: none; }
+
+  /* The title and the meta. */
+  .page-header-lead { display: flex; align-items: baseline; gap: .5rem; flex: 0 1 auto; min-width: 0; }
+  .page-header .page-header-title { margin: 0; color: var(--ph-ink); font-size: calc(var(--ph-base) * 1.5);
+    font-weight: var(--type-display-weight, 800); line-height: 1.25; min-width: 0; overflow-wrap: anywhere;
+    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-x: visible; overflow-y: clip; }
+  @media (width >= 40rem) { .page-header .page-header-title { font-size: 30px; line-height: 1.2; } }
+  .page-header :is(.page-header-meta, .label-upper) { margin: 0; white-space: nowrap; color: var(--ph-muted);
+    font-size: .75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: .05em; }
+  @media (width < 40rem) { .page-header .page-header-meta { display: none; } }
+
+  /* The buttons, at .btn-sm: every control on the right stands at one height. */
+  .page-header .btn { display: inline-flex; align-items: center; justify-content: center; margin: 0;
+    font-family: inherit; font-weight: 700; border: 1px solid transparent; border-radius: .5rem;
+    white-space: nowrap; cursor: pointer; text-decoration: none;
+    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, filter 150ms ease; }
+  .page-header .btn-sm { padding: .375rem .75rem; font-size: .75rem; line-height: 1rem; }
+  .page-header .btn-primary { color: var(--ph-primary-fg); background-color: var(--ph-primary); }
+  .page-header .btn-primary:hover { color: var(--btn-primary-fg-hover, var(--ph-primary-fg));
+    background-color: var(--ph-primary-hover); filter: brightness(.94); }
+  .page-header .btn-neutral { color: var(--ph-ink); background-color: var(--btn-neutral-bg, var(--ph-surface-alt));
+    border-color: var(--ph-line-strong); }
+  .page-header .btn-neutral:hover { color: var(--ph-ink); background-color: var(--btn-neutral-bg-hover, var(--ph-surface));
+    filter: var(--btn-neutral-hover-filter, none); }
+  .page-header .btn:focus-visible { outline: 2px solid var(--ph-focus); outline-offset: 2px; border-radius: .5rem; }
+
+  /* The pill group: it scrolls sideways inside the row on a phone, with a fade at an end
+     that hides a tab. */
+  .page-header .page-header-tabs { --page-header-fade-start: 0px; --page-header-fade-end: 0px;
+    flex: 1 1 6rem; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: .25rem; margin: -.25rem;
+    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--page-header-fade-start), #000 calc(100% - var(--page-header-fade-end)), transparent 100%);
+            mask-image: linear-gradient(to right, transparent 0, #000 var(--page-header-fade-start), #000 calc(100% - var(--page-header-fade-end)), transparent 100%); }
+  .page-header .page-header-tabs::-webkit-scrollbar { display: none; }
+  .page-header .page-header-tabs[data-fade-start] { --page-header-fade-start: 2rem; }
+  .page-header .page-header-tabs[data-fade-end] { --page-header-fade-end: 2rem; }
+  .page-header-track { display: flex; align-items: center; gap: .5rem; width: max-content; margin-left: auto; }
+  .page-header-tab-label { position: relative; z-index: 2; }
+  .page-header .page-header-glide { display: none; }
+
+  /* The cluster: the menu, the action, the tools. */
+  .page-header-actions { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
+    gap: .5rem; max-width: 100%; margin-left: auto; }
+  .page-header-tabs + .page-header-actions { margin-left: 0; }
+  .page-header-menu { position: relative; anchor-scope: --page-header-menu; }
+  .page-header .page-header-menu-button { gap: .375rem; anchor-name: --page-header-menu; }
+  .page-header-menu-caret { width: .375rem; height: .375rem; border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor; transform: translateY(-.125rem) rotate(45deg); transition: transform 150ms ease; }
+  .page-header-menu:has(> .page-header-menu-list:popover-open) .page-header-menu-caret { transform: translateY(.125rem) rotate(225deg); }
+  .page-header .page-header-menu-list { position: fixed; inset: auto; margin: 0; min-width: 10rem;
+    max-width: min(20rem, calc(100vw - 2rem)); padding: .25rem; border: 1px solid var(--ph-line); border-radius: .5rem;
+    background-color: var(--ph-surface); color: var(--ph-body);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); }
+  .page-header .page-header-menu-list ul { margin: 0; padding: 0; list-style: none; }
+  @supports (anchor-name: --a) and (position-anchor: --a) {
+    .page-header .page-header-menu-list { position-anchor: --page-header-menu; top: anchor(bottom); right: anchor(right);
+      margin-top: .25rem; position-try-fallbacks: flip-block, flip-inline; }
+  }
+  .page-header .page-header-menu-item { display: block; padding: .5rem .75rem; border-radius: .375rem;
+    font-size: calc(var(--ph-base) * .875); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    color: var(--ph-body); }
+  .page-header .page-header-menu-item:is(:hover, :focus-visible) { background-color: var(--ph-surface-alt); color: var(--ph-ink); }
+  .page-header .page-header-menu-item:focus-visible { outline: 2px solid var(--ph-focus); outline-offset: -2px; }
+  .page-header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-left: .5rem;
+    border-left: 1px dashed var(--ph-line); opacity: .7; transition: opacity 150ms ease; }
+  .page-header-tools:is(:hover, :focus-within) { opacity: 1; }
+
+  /* The trail above the title, and the one parent link that stands for it on a phone. */
+  .page-header-trail { flex: 1 0 100%; min-width: 0; margin-bottom: -.5rem;
+    font-size: calc(var(--ph-base) * .8125); line-height: 1.25; }
+  .page-header-crumbs { min-width: 0; }
+  .page-header-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; row-gap: .125rem;
+    margin: 0; padding: 0; list-style: none; }
+  .page-header-crumbs li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
+  .page-header-crumbs li + li::before { content: "\203A"; content: "\203A" / ""; color: var(--ph-muted); opacity: .6; }
+  @media (width < 40rem) { .page-header-crumbs { display: none; } }
+  .page-header .page-header-crumb { color: var(--ph-muted); transition: color 150ms ease; }
+  .page-header .page-header-crumb-current { color: var(--ph-ink); font-weight: 600; overflow-wrap: anywhere; }
+  .page-header .page-header-parent { display: none; color: var(--ph-muted); font-size: calc(var(--ph-base) * .875); }
+  @media (width < 40rem) { .page-header .page-header-parent { display: inline-flex; gap: .25rem; align-items: baseline; } }
+
+  /* The links line at the foot of the row. */
+  .page-header-links { flex: 1 0 100%; display: flex; align-items: center; gap: 1rem; min-width: 0; margin-top: -.25rem;
+    overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: calc(var(--ph-base) * .8125); }
+  .page-header .page-header-link { color: var(--ph-muted); transition: color 150ms ease; }
+  .page-header .page-header-link[aria-current] { font-weight: 600; }
+  .page-header :is(.page-header-crumb, .page-header-parent, .page-header-link):is(:hover, :focus-visible),
+  .page-header .page-header-link[aria-current] { color: var(--ph-ink); }
+
+  /* The gliding pill, where the browser can anchor it (engine.css, "The gliding pill"). */
+  @supports (anchor-name: --a) and (position-anchor: --a) and selector(:has(a)) {
+    .page-header .page-header-track { position: relative; anchor-scope: --page-header-current; }
+    .page-header .page-header-track > [aria-current] { anchor-name: --page-header-current; }
+    .page-header .page-header-track:has(> .page-header-tab[aria-current]) > .page-header-glide {
+      display: block; position: absolute; position-anchor: --page-header-current;
+      top: anchor(top); right: anchor(right); bottom: anchor(bottom); left: anchor(left);
+      z-index: 1; margin: 0; padding: 0; pointer-events: none;
+      transition: top 320ms cubic-bezier(.2, .8, .2, 1), right 320ms cubic-bezier(.2, .8, .2, 1),
+        bottom 320ms cubic-bezier(.2, .8, .2, 1), left 320ms cubic-bezier(.2, .8, .2, 1); }
+    .page-header .page-header-track:has(> .page-header-glide) > .page-header-tab[aria-current] {
+      background-color: transparent; background-image: none; border-color: transparent; box-shadow: none; filter: none; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .page-header, .page-header *, .page-header-menu-caret { transition: none !important; }
+  }
+</style>
+<noscript><style>.page-header { background-color: var(--ph-surface); border-color: var(--ph-line); }</style></noscript>
+<script type="module" src="<%= asset_path("studio/page_header_self_styled.js") %>" <%= tag.attributes(nonce: (content_security_policy_nonce if respond_to?(:content_security_policy_nonce))) %>></script>

data/db/migrate/20261108120000_add_device_revocation_to_studio_user_sessions.rb

@@ -0,0 +1,28 @@
+# Lets a logout end one device's session on the server (Studio::UserSession,
+# docs/DEVICE_SESSIONS.md). `sid` is the random id the device's cookie carries in
+# its mark; every row of that device session carries it. `revoked_at` is stamped
+# on logout, and a request whose sid is revoked is signed out.
+#
+# Both columns are nullable with no default, so the add is a catalog-only change
+# and no existing row is rewritten. Rows from before this migration have no sid;
+# their cookies get one on their next request (Studio::UserSession.track).
+#
+# A host without the table (it has not installed CreateStudioUserSessions) is a
+# no-op here; the model checks for these columns and stays off until they exist.
+class AddDeviceRevocationToStudioUserSessions < ActiveRecord::Migration[7.2]
+  def up
+    return unless table_exists?(:studio_user_sessions)
+
+    add_column :studio_user_sessions, :sid, :string, if_not_exists: true
+    add_column :studio_user_sessions, :revoked_at, :datetime, if_not_exists: true
+    add_index :studio_user_sessions, :sid, if_not_exists: true
+  end
+
+  def down
+    return unless table_exists?(:studio_user_sessions)
+
+    remove_index :studio_user_sessions, :sid, if_exists: true
+    remove_column :studio_user_sessions, :revoked_at, if_exists: true
+    remove_column :studio_user_sessions, :sid, if_exists: true
+  end
+end

data/lib/studio/engine.rb

@@ -88,7 +88,8 @@ module Studio
       # app/assets/javascripts/studio: the vendored third-party builds, each
       # loaded as an ES module (Alpine by the head's type="module" tag,
       # canvas-confetti and SortableJS through their importmap pins, Leaflet by
-      # studio/footer_map's import()), and studio/session.js, the one classic
+      # studio/footer_map's import(), Cropper.js by studio/_cropper_assets'
+      # two tags), and studio/session.js, the one classic
       # script (layouts/studio/_head says why), with studio/page_transition_reveal.js,
       # the other classic one. The engine's own modules are under app/javascript,
       # enumerated below.
@@ -99,6 +100,8 @@ module Studio
         studio/sortable.js
         studio/leaflet.js
         studio/leaflet.css
+        studio/cropper-1.6.2.min.js
+        studio/cropper-1.6.2.min.css
         studio/session.js
         studio/page_transition_full_load.css
         studio/page_transition_reveal.js
@@ -429,8 +432,10 @@ module Studio
       # The host's error_logs, theme_settings and image_caches carry every
       # column the engine's models write (Studio::HostSchema). Skipped in a
       # rake task, which boots to migrate rather than to serve.
+      # Then the device-session columns, which only warn (docs/DEVICE_SESSIONS.md).
       if Studio.active_record? && !Studio::HostSchema.inside_rake_task?
         Studio::HostSchema.check!
+        Studio::HostSchema.device_session_check!
       end
     end
 

data/lib/studio/host_schema.rb

@@ -125,6 +125,57 @@ module Studio
       missing
     end
 
+    # DEVICE SESSIONS (docs/DEVICE_SESSIONS.md). Studio::UserSession checks a
+    # logged-out cookie only when studio_user_sessions carries sid and
+    # revoked_at; without them it checks nothing and serves as before. That
+    # off switch is right for an app that has not installed the migration yet,
+    # but silent: a replayed cookie would sign in and nobody would know why.
+    # So the boot names the gap. It is a WARNING in every environment and never
+    # raises: the release sweep installs the migration, and a host's CI must not
+    # go red over a column the next sweep adds.
+    DEVICE_SESSION_TABLE = "studio_user_sessions"
+    DEVICE_SESSION_COLUMNS = %w[sid revoked_at].freeze
+
+    # The device-session columns the host lacks: every one of them when the
+    # table is absent, else the ones it is short of. Empty when the host checks.
+    def missing_device_session_columns(connection)
+      return DEVICE_SESSION_COLUMNS.dup unless connection.table_exists?(DEVICE_SESSION_TABLE)
+
+      DEVICE_SESSION_COLUMNS - connection.columns(DEVICE_SESSION_TABLE).map(&:name)
+    end
+
+    def device_session_message(missing)
+      gap = missing == DEVICE_SESSION_COLUMNS ? "has no #{DEVICE_SESSION_TABLE} sid/revoked_at columns" : "#{DEVICE_SESSION_TABLE} is missing #{missing.join(', ')}"
+      "studio-engine: this app #{gap}, so a logged-out device's cookie is NOT " \
+        "checked and a copy of it still signs in (docs/DEVICE_SESSIONS.md). Run " \
+        "bin/rails studio_engine:install:migrations && bin/rails db:migrate."
+    end
+
+    # The boot hook for device sessions. Returns the missing columns (empty when
+    # whole, or skipped) and logs a warning, plus a Sentry warning, when any are
+    # missing. Never raises. Off when Studio.host_schema_check is false.
+    def device_session_check!(connection: nil, mode: self.mode, logger: Rails.logger)
+      return [] if mode == false
+
+      missing =
+        begin
+          if connection
+            missing_device_session_columns(connection)
+          else
+            ActiveRecord::Base.connection_pool.with_connection { |conn| missing_device_session_columns(conn) }
+          end
+        rescue ActiveRecord::ActiveRecordError => e
+          logger&.debug("[studio-engine] device session schema check skipped: #{e.class}: #{e.message}")
+          return []
+        end
+      return missing if missing.empty?
+
+      text = device_session_message(missing)
+      logger&.warn("[studio-engine] #{text}")
+      report_to_sentry(text, level: :warning)
+      missing
+    end
+
     # True while a rake task is running: the app booted to migrate, install or
     # precompile, not to serve.
     def inside_rake_task?
@@ -133,10 +184,10 @@ module Studio
         ::Rake.application.top_level_tasks.any?
     end
 
-    def report_to_sentry(text)
+    def report_to_sentry(text, level: :error)
       return unless defined?(::Sentry) && ::Sentry.respond_to?(:capture_message)
 
-      ::Sentry.capture_message(text, level: :error)
+      ::Sentry.capture_message(text, level: level)
     rescue StandardError
       nil
     end

data/lib/studio/page_header.rb

@@ -1,8 +1,9 @@
 # frozen_string_literal: true
 
 module Studio
-  # studio/_page_header's one piece of Ruby: the deprecation note for its old free-HTML
-  # slot (docs/PAGE_HEADER.md, "The four kinds of control").
+  # studio/_page_header's Ruby: whether a row is self-styled (self_styled?), and the
+  # deprecation note for its old free-HTML slot (docs/PAGE_HEADER.md, "The four kinds of
+  # control").
   #
   # actions_html still renders for one release. In development only, the first render
   # that passes it writes one warning to the log per call site, so a host sees each
@@ -16,6 +17,14 @@ module Studio
     @mutex = Mutex.new
 
     class << self
+      # Whether this view's rows bring their own CSS and script (config.page_header_self_styled,
+      # docs/PAGE_HEADER.md, "In a plain-CSS app"): true, false, or a callable that receives
+      # the view. Anything truthy is true.
+      def self_styled?(view, setting = Studio.page_header_self_styled)
+        setting = setting.call(view) if setting.respond_to?(:call)
+        setting ? true : false
+      end
+
       # site: the caller's "path:line", so each page warns once. env and logger default to
       # Rails' and are injectable for a test.
       def deprecate_actions_html(site: nil, env: rails_env, logger: rails_logger)

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.135.2"
+  VERSION = "0.136.0"
 end

data/lib/studio.rb

@@ -157,6 +157,16 @@ module Studio
   mattr_accessor :theme_logos,         default: []
   mattr_accessor :sticky_table_headers, default: false
 
+  # ---- The self-styled page header ------------------------------------------
+  # For an app that does not build the engine's Tailwind layer (a plain-CSS app,
+  # such as rantly): studio/_page_header then brings its own scoped CSS and the
+  # small script for its stuck bar and its Links menu, once per page, as the site
+  # footer does (docs/PAGE_HEADER.md, "In a plain-CSS app"). true, false (the
+  # default: the row renders exactly as it always has, for a Tailwind app), or a
+  # callable that receives the view.
+  # Studio::PageHeader.self_styled? reads it.
+  mattr_accessor :page_header_self_styled, default: false
+
   # ---- Smooth-load convention ---------------------------------------------
   # Opt-in per app: renders the view-transition + no-preview metas so Turbo 8
   # page swaps materialize behind the current page and present with a view

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.135.2
+  version: 0.136.0
 platform: ruby
 authors:
 - Alex McRitchie
@@ -423,10 +423,12 @@ files:
 - app/assets/images/state-flags/wy.svg
 - app/assets/javascripts/studio/alpine.js
 - app/assets/javascripts/studio/canvas_confetti.js
+- app/assets/javascripts/studio/cropper-1.6.2.min.js
 - app/assets/javascripts/studio/leaflet.js
 - app/assets/javascripts/studio/page_transition_reveal.js
 - app/assets/javascripts/studio/session.js
 - app/assets/javascripts/studio/sortable.js
+- app/assets/stylesheets/studio/cropper-1.6.2.min.css
 - app/assets/stylesheets/studio/leaflet.css
 - app/assets/stylesheets/studio/page_transition_full_load.css
 - app/assets/stylesheets/studio/sticky_table_header.css
@@ -488,6 +490,7 @@ files:
 - app/helpers/studio/geo_helper.rb
 - app/helpers/studio/link_preview_helper.rb
 - app/helpers/studio/loader_helper.rb
+- app/helpers/studio/page_header_helper.rb
 - app/helpers/studio/public_user_helper.rb
 - app/helpers/studio/site_footer_helper.rb
 - app/helpers/studio_email_delivery_helper.rb
@@ -561,10 +564,12 @@ files:
 - app/javascript/studio/nav_collapse.js
 - app/javascript/studio/newsletter_modal.js
 - app/javascript/studio/page_header.js
+- app/javascript/studio/page_header_self_styled.js
 - app/javascript/studio/page_transitions.js
 - app/javascript/studio/pinned_stack.js
 - app/javascript/studio/profile_form.js
 - app/javascript/studio/pull_to_refresh.js
+- app/javascript/studio/reload_visits.js
 - app/javascript/studio/sticky_table_header.js
 - app/javascript/studio/stimulus.js
 - app/javascript/studio/studio_confetti.js
@@ -656,6 +661,7 @@ files:
 - app/views/studio/_fizz_layer.html.erb
 - app/views/studio/_hold_button.html.erb
 - app/views/studio/_hold_button_guard.html.erb
+- app/views/studio/_legal_page.html.erb
 - app/views/studio/_leveling_activity_assets.html.erb
 - app/views/studio/_not_found.html.erb
 - app/views/studio/_page_header.html.erb
@@ -774,6 +780,7 @@ files:
 - app/views/studio/newsletter_mailer/subscribed.html.erb
 - app/views/studio/newsletter_mailer/subscribed.text.erb
 - app/views/studio/not_found/show.html.erb
+- app/views/studio/page_header/_assets.html.erb
 - app/views/studio/profile_mailer/email_change_notification.html.erb
 - app/views/studio/profile_mailer/email_change_notification.text.erb
 - app/views/studio/profiles/_birthday_fields.html.erb
@@ -870,6 +877,7 @@ files:
 - db/migrate/20261010120000_add_stored_in_to_image_caches.rb
 - db/migrate/20261029120000_add_voice_profile_to_users.rb
 - db/migrate/20261103120000_create_studio_user_sessions.rb
+- db/migrate/20261108120000_add_device_revocation_to_studio_user_sessions.rb
 - docs/BOOKING.md
 - docs/SITE_FOOTER.md
 - lib/active_storage/service/studio_trash_s3_service.rb