studio-engine 0.130.0 → 0.131.0

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

@@ -308,6 +308,13 @@ body.modal-open .studio-app-banner {
   font-size: calc(var(--type-base, 16px) * 1.5);
   font-weight: var(--type-display-weight, 800);
   line-height: 1.25;
+
+  /* From 40rem, the h2 of the type scale (type-h2), Alex McRitchie's "H2 header"
+     (2026-11-05). A phone keeps 1.5x, so a long title leaves the tabs room. */
+  @media (width >= 40rem) {
+    font-size: 30px;
+    line-height: 1.2;
+  }
   min-width: 0;
   overflow-wrap: anywhere;
   display: -webkit-box;
@@ -340,6 +347,11 @@ body.modal-open .studio-app-banner {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
+  /* A sideways scroller clips both axes, so the pills get room inside it: their contact
+     shadow (3px below), the lit edge (1px) and a focus ring (2px). The negative margin
+     gives the room back, so the row's box does not move. */
+  padding: 0.25rem;
+  margin: -0.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%);
 
@@ -365,9 +377,584 @@ body.modal-open .studio-app-banner {
 
 @utility page-header-actions {
   flex-shrink: 0;
+  /* Never wider than the row: a group of controls wraps inside it on a phone, and the
+     page does not scroll sideways. */
+  max-width: 100%;
+  margin-left: auto;
+
+  /* After the tabs, the tabs' own auto margin already pushes both right. */
+  .page-header-tabs + & {
+    margin-left: 0;
+  }
+}
+
+/* THE TRAIL: the page's ancestors above the title (docs/PAGE_HEADER.md, "Crumbs"). It takes
+   the row's whole first line, so the title, the tabs and the actions share the next one.
+   Ancestors are muted links, the page itself is bold, and a chevron sits between. Below
+   40rem the trail gives way to one link to the parent. The negative margin brings the
+   title up to the trail: the row's gap is for the title and the tabs. */
+@utility page-header-trail {
+  flex: 1 0 100%;
+  min-width: 0;
+  margin-bottom: -0.5rem;
+  font-size: calc(var(--type-base, 16px) * 0.8125);
+  line-height: 1.25;
+}
+
+@utility page-header-crumbs {
+  min-width: 0;
+
+  & ol {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 0.5rem;
+    row-gap: 0.125rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  & li {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+  /* The chevron is CSS, with empty alt text, so a reader hears the names alone. */
+  & li + li::before {
+    content: "\203A";
+    content: "\203A" / "";
+    @apply text-muted;
+    opacity: 0.6;
+  }
+
+  @media (width < 40rem) {
+    display: none;
+  }
+}
+
+@utility page-header-crumb {
+  @apply text-muted;
+  text-decoration: none;
+  transition: color 150ms ease;
+
+  &:hover,
+  &:focus-visible {
+    @apply text-heading;
+  }
+}
+
+@utility page-header-crumb-current {
+  @apply text-heading;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+@utility page-header-parent {
+  display: none;
+  @apply text-muted;
+  font-size: calc(var(--type-base, 16px) * 0.875);
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    @apply text-heading;
+  }
+
+  @media (width < 40rem) {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: baseline;
+  }
+}
+
+/* THE LINKS LINE: the page's other links, on a line of their own at the foot of the row, so
+   they stick with it. Muted, small, one line; on a phone it scrolls sideways inside the row. */
+@utility page-header-links {
+  flex: 1 0 100%;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-width: 0;
+  margin-top: -0.25rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+  white-space: nowrap;
+  font-size: calc(var(--type-base, 16px) * 0.8125);
+}
+
+@utility page-header-link {
+  @apply text-muted;
+  text-decoration: none;
+  transition: color 150ms ease;
+
+  &:hover,
+  &:focus-visible,
+  &[aria-current] {
+    @apply text-heading;
+  }
+
+  /* More than colour marks the current link (WCAG 1.4.1). */
+  &[aria-current] {
+    font-weight: 600;
+  }
+}
+
+/* The tab's label sits above the gliding pill. */
+@utility page-header-tab-label {
+  position: relative;
+  z-index: 2;
+}
+
+/* The pill is hidden until the browser can anchor it (below). */
+@utility page-header-glide {
+  display: none;
+}
+
+/* -- The gliding pill -------------------------------------------------------
+   Alex McRitchie, 2026-11-05: the current tab's pill glides to the next current tab, as
+   one highlight, instead of each tab switching its own fill. One pill per row
+   (.page-header-glide, the lit primary button's own classes, so it keeps that look in
+   light, dark and glass) is anchored with CSS anchor positioning to whichever tab carries
+   aria-current. aria-current stays the one source of truth: the scroll spy and a page's
+   own markup set it, and the pill follows with no script measuring anything. Its insets
+   transition, so a change of anchor slides it. Reduced motion jumps.
+
+   The tab with aria-current gives up its own fill so the pill shows through, and the
+   labels sit above the pill. !important on the fill: the glass lit button's selectors are
+   heavier than any a row should repeat.
+
+   Where anchor positioning or :has is missing, nothing in this block applies and each tab
+   keeps its own fill, as before. */
+@supports (anchor-name: --a) and (position-anchor: --a) and selector(:has(a)) {
+  .page-header-track {
+    position: relative;
+    /* Each row's pill anchors to its own current tab, not the last one on the page. */
+    anchor-scope: --page-header-current;
+  }
+
+  .page-header-track > [aria-current] {
+    anchor-name: --page-header-current;
+  }
+
+  .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(0.2, 0.8, 0.2, 1), right 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
+      bottom 320ms cubic-bezier(0.2, 0.8, 0.2, 1), left 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .page-header-track:has(> .page-header-glide) > .page-header-tab[aria-current] {
+    background-color: transparent !important;
+    background-image: none !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .page-header-track > .page-header-glide {
+      transition: none !important;
+    }
+  }
+}
+
+/* -- The clear border glow (.studio-border-glow--clear) ------------------------
+   Alex McRitchie, 2026-11-05: "a clear background and the glowing circumference". A
+   modifier on .studio-border-glow (engine-motion.css), named as .sheen--loop is: the
+   button has no fill, so the page shows through, and only the moving rainbow ring and
+   its soft halo draw. The label is the heading ink, which clears 4.5:1 on every surface
+   (e2e/border_glow_clear.spec.js). Pair it with .btn alone, not a filled variant.
+
+     <button class="btn studio-border-glow studio-border-glow--clear">Save</button> */
+.btn.studio-border-glow--clear {
+  @apply text-heading;
+  background-color: transparent;
+  background-image: none;
+}
+
+.btn.studio-border-glow--clear:not(:disabled, [aria-disabled="true"]):hover {
+  --studio-border-glow-halo-opacity: 0.4;
+}
+
+/* Reduced motion: the ring and the halo stay, still. */
+@media (prefers-reduced-motion: reduce) {
+  .studio-border-glow::before,
+  .studio-border-glow::after {
+    animation: none;
+  }
+}
+
+/* -- The carousel (studio/_carousel) -----------------------------------------
+   One sideways row of slides on a native scroll-snap track: a swipe, a trackpad and
+   a focused link move it with no script. The carousel controller adds the edge fade,
+   the arrows, the dots and the keys (studio/controllers/carousel_controller).
+
+   WIDTHS COME FROM THE REGION, NOT THE WINDOW. The region is an inline-size container,
+   so a carousel in a narrow column lays out as a phone does. A phone row shows one
+   slide, a medium row up to two, a wide row --carousel-per-view (the partial's
+   per_view). Every row adds --carousel-peek of the next slide, so a visitor sees
+   there is more. n slides and their n gaps plus the peek fill the row:
+   n * w + n * gap + peek * w = 100 percent.
+
+   BEFORE THE CONTROLLER CONNECTS, or when it failed to load, the controls are hidden
+   (they would do nothing) and the track keeps a thin scrollbar, so the row still
+   scrolls with a mouse. */
+@utility carousel {
+  --carousel-gap: 1rem;
+  --carousel-peek: 0.2;
+  --carousel-fade: 2.5rem;
+  position: relative;
+  min-width: 0;
+  container-type: inline-size;
+
+  /* The track's focus ring is drawn here: the track's edge mask clips anything
+     outside its own box, an outline included. */
+  &:has(> .carousel-track:focus-visible) {
+    outline: 2px solid color-mix(in srgb, var(--color-cta) 70%, transparent);
+    outline-offset: 2px;
+    border-radius: 0.75rem;
+  }
+}
+
+@utility carousel-track {
+  --carousel-n: min(var(--carousel-per-view, 3), 1);
+  --carousel-fade-start: 0px;
+  --carousel-fade-end: 0px;
+  position: relative;
+  display: flex;
+  gap: var(--carousel-gap);
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  /* Room for a slide's hover shadow and focus ring: the scroll box clips both ways. */
+  padding-block: 0.25rem 0.5rem;
+  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--carousel-fade-start), #000 calc(100% - var(--carousel-fade-end)), transparent 100%);
+          mask-image: linear-gradient(to right, transparent 0, #000 var(--carousel-fade-start), #000 calc(100% - var(--carousel-fade-end)), transparent 100%);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &[data-fade-start] {
+    --carousel-fade-start: var(--carousel-fade);
+  }
+
+  &[data-fade-end] {
+    --carousel-fade-end: var(--carousel-fade);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  .carousel:not([data-carousel-ready]) & {
+    scrollbar-width: thin;
+  }
+
+  .carousel:not([data-carousel-ready]) &::-webkit-scrollbar {
+    display: initial;
+  }
+
+  @container (width >= 36rem) {
+    --carousel-n: min(var(--carousel-per-view, 3), 2);
+  }
+
+  @container (width >= 56rem) {
+    --carousel-n: var(--carousel-per-view, 3);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+  }
+}
+
+@utility carousel-slide {
+  flex: 0 0 calc((100% - var(--carousel-n) * var(--carousel-gap)) / (var(--carousel-n) + var(--carousel-peek)));
+  min-width: 0;
+  scroll-snap-align: start;
+}
+
+@utility carousel-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+
+  /* Until the controller connects the row is hidden but keeps its room, so nothing
+     below moves when the arrows arrive (a hash landing, CLS). A row that fits, or a
+     controller that failed to load, gives the room back. */
+  .carousel:not([data-carousel-ready]) & {
+    visibility: hidden;
+  }
+
+  .carousel[data-carousel-static] &,
+  .carousel[data-studio-controller-failed] & {
+    display: none;
+  }
+}
+
+@utility carousel-dots {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+}
+
+/* A 1.5rem tap target around a small pill. The open stop's pill is wider and wears
+   the primary, so the dots read as a progress line. */
+@utility carousel-dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  padding-inline: 0.1875rem;
+  border-radius: 9999px;
+  cursor: pointer;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
+    transition: width 200ms ease, background-color 200ms ease;
+  }
+
+  &:hover::before {
+    background-color: var(--color-text-muted);
+  }
+
+  &[aria-current="true"]::before {
+    width: 1.5rem;
+    background-color: var(--color-primary);
+  }
+
+  &[hidden] {
+    display: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--color-cta) 70%, transparent);
+    outline-offset: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before {
+      transition: none;
+    }
+  }
+}
+
+@utility carousel-arrows {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.5rem;
   margin-left: auto;
 }
 
+/* Round arrows on the card fill, so under the glass surfaces they are glass too. */
+@utility carousel-button {
+  @apply border border-subtle text-heading;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  background-color: var(--surface-card-fill, var(--color-surface));
+  -webkit-backdrop-filter: var(--surface-glass-filter, none);
+          backdrop-filter: var(--surface-glass-filter, none);
+  box-shadow: var(--surface-glass-highlight, 0 0 #0000), var(--surface-glass-shadow, 0 0 #0000);
+  cursor: pointer;
+  transition: border-color 150ms ease, opacity 150ms ease, transform 150ms ease;
+
+  & svg {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  &:hover:not([aria-disabled="true"]) {
+    @apply border-primary;
+  }
+
+  &:active:not([aria-disabled="true"]) {
+    transform: scale(0.94);
+  }
+
+  &[aria-disabled="true"] {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--color-cta) 70%, transparent);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    &:active:not([aria-disabled="true"]) {
+      transform: none;
+    }
+  }
+}
+
+/* -- The spotlight carousel (studio/_carousel, style: :spotlight) --------------
+   The same region, track, arrows, dots and keys, but each slide snaps to the centre.
+   The centred slide is full size and full colour, with its caption under it; its
+   neighbours are smaller, faded and grey, and the next ones peek at the edges.
+
+   WIDTHS. A slide is --carousel-spot-w wide, in units of the region (cqi, since the
+   region is the inline-size container). n slides and a 0.6 peek fill the row:
+   n * w + (n - 1) * gap + 0.6 * w = 100cqi. The track pads each end by half the
+   rest, so the first and the last slide can centre too.
+
+   THE EFFECT FOLLOWS THE SCROLL where the browser has scroll-driven animations:
+   each slide is its own inline view timeline, and its body and caption run one
+   animation across the stretch from one neighbour's place to the other's (a step,
+   a slide and a gap, either side of the centre), full at the middle. Outside that
+   stretch the fill holds the neighbour look.
+
+   ELSEWHERE, the controller marks the centred slide (data-current) and the body
+   transitions to it. Until the controller connects every slide stays plain.
+
+   UNDER REDUCED MOTION nothing scales, greys or animates: the neighbours of the
+   marked slide are only dimmed. */
+@keyframes carousel-spotlight {
+  0%, 100% {
+    scale: var(--carousel-spot-scale);
+    opacity: var(--carousel-spot-opacity);
+    filter: grayscale(1);
+  }
+  50% {
+    scale: 1;
+    opacity: 1;
+    filter: grayscale(0);
+  }
+}
+
+@keyframes carousel-spotlight-caption {
+  0%, 30%, 70%, 100% {
+    opacity: 0;
+    translate: 0 0.25rem;
+  }
+  50% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@utility carousel-spotlight {
+  --carousel-spot-scale: 0.75;
+  --carousel-spot-opacity: 0.45;
+
+  /* On the track, not the region: the track's container queries set --carousel-n,
+     and a container query cannot read the element it sits on. */
+  & > .carousel-track {
+    /* A smaller gap: the neighbours' scale already opens space around the centre. */
+    --carousel-gap: 0.5rem;
+    --carousel-spot-w: calc((100cqi - (var(--carousel-n) - 1) * var(--carousel-gap)) / (var(--carousel-n) + 0.6));
+    --carousel-spot-step: calc(var(--carousel-spot-w) + var(--carousel-gap));
+    padding-inline: calc((100cqi - var(--carousel-spot-w)) / 2);
+    /* The neighbours are already dimmed; an edge fade over them reads as a smear. */
+    -webkit-mask-image: none;
+            mask-image: none;
+  }
+
+  & > .carousel-track > .carousel-slide {
+    flex: 0 0 var(--carousel-spot-w);
+    scroll-snap-align: center;
+    display: flex;
+    flex-direction: column;
+    view-timeline: --carousel-slide inline;
+  }
+
+  & .carousel-spotlight-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    transform-origin: 50% 50%;
+  }
+
+  & .carousel-caption {
+    margin-top: 0.75rem;
+    text-align: center;
+    @apply text-sm text-body;
+  }
+
+  /* The fallback: the controller's mark, with a transition. */
+  &[data-carousel-ready] .carousel-slide .carousel-spotlight-body {
+    transition: scale 300ms ease, opacity 300ms ease, filter 300ms ease;
+  }
+
+  &[data-carousel-ready] .carousel-slide:not([data-current]) .carousel-spotlight-body {
+    scale: var(--carousel-spot-scale);
+    opacity: var(--carousel-spot-opacity);
+    filter: grayscale(1);
+  }
+
+  &[data-carousel-ready] .carousel-caption {
+    transition: opacity 300ms ease;
+  }
+
+  &[data-carousel-ready] .carousel-slide:not([data-current]) .carousel-caption {
+    opacity: 0;
+  }
+
+  /* A neighbour holding focus drops the neighbour look on every path, so its focus
+     ring shows at full strength (WCAG 2.4.7). It outranks the animation and the mark. */
+  & .carousel-slide:focus-within .carousel-spotlight-body,
+  &[data-carousel-ready] .carousel-slide:focus-within .carousel-spotlight-body {
+    animation: none;
+    scale: 1;
+    opacity: 1;
+    filter: none;
+  }
+
+  /* The scroll-driven path. It needs no controller, so it runs from the first paint. */
+  @supports (animation-timeline: view()) and (animation-range: cover 0% cover 100%) {
+    & .carousel-spotlight-body,
+    & .carousel-caption {
+      transition: none;
+      animation: carousel-spotlight linear both;
+      animation-timeline: --carousel-slide;
+      animation-range: cover calc(50% - var(--carousel-spot-step)) cover calc(50% + var(--carousel-spot-step));
+    }
+
+    & .carousel-caption {
+      animation-name: carousel-spotlight-caption;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    & .carousel-spotlight-body,
+    & .carousel-caption {
+      animation: none !important;
+      transition: none !important;
+    }
+
+    &[data-carousel-ready] .carousel-slide:not([data-current]) .carousel-spotlight-body {
+      scale: none;
+      filter: none;
+    }
+  }
+}
+
 /* -- The section header (studio/_section_header, docs/PAGE_HEADER.md) --------
    A section's title that sticks under the rest of the stack, inside its own <section>,
    so the next section's header takes its place with no scroll script. At rest it reads as

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

@@ -125,6 +125,10 @@
   --text-color-success-ink: var(--color-success-ink);
   /* The primary role as chip text; text-primary stays the brand colour. */
   --text-color-primary-ink: var(--color-primary-ink);
+  /* The keyboard focus ring: the primary ink, so a ring clears 3:1 beside every
+     surface it lands on (WCAG 1.4.11). A translucent ring-primary/40 measured 1.3
+     to 2.0:1 (e2e/sidebar_focus_ring.spec.js). */
+  --ring-color-primary-ink: var(--color-primary-ink);
 
   /* The status-role FILLS, for backgrounds and borders ONLY. */
   --background-color-success: var(--color-success);

data/app/controllers/concerns/studio/error_handling.rb

@@ -213,25 +213,56 @@ module Studio
     rescue ActiveRecord::RecordNotFound => e
       raise e
     rescue StandardError => e
-      error_log = create_error_log(e)
-      # `slug` is NOT in the engine's User contract (REQUIRED_USER_INSTANCE_METHODS
-      # is admin? + display_name), and `target` is routinely a User. Unguarded,
-      # the LOGGER raises NoMethodError and MASKS the original exception — the
-      # exact inverse of what this method exists to do. The name is a convenience
-      # column; its absence must never cost the record.
-      if target
-        error_log.target = target
-        error_log.target_name = target.slug if target.respond_to?(:slug)
+      begin
+        error_log = create_error_log(e)
+        attach_error_context(error_log, :target, target)
+        attach_error_context(error_log, :parent, parent)
+        error_log.save!
+      rescue StandardError => log_error
+        log_error_write_failed(log_error, e)
       end
-      if parent
-        error_log.parent = parent
-        error_log.parent_name = parent.slug if parent.respond_to?(:slug)
-      end
-      error_log.save!
+      # Set on a failed write too: the catch-all would only try the same write
+      # again, and its raise would replace the friendly reply with a raw 500.
       @_error_logged = true
       raise e
     end
 
+    # The row could not be written. The original error still reaches the caller,
+    # and the process log keeps both, so a rescue that redirects never leaves the
+    # failure with no trace at all.
+    def log_error_write_failed(log_error, original)
+      Rails.logger.error(
+        "[Studio::ErrorHandling] ErrorLog write failed (#{log_error.class}: #{log_error.message}) " \
+        "while logging #{original.class}: #{original.message}"
+      )
+    end
+
+    # Names `record` on the row as its target or parent.
+    #
+    # An UNSAVED record is named (its slug, else "unsaved <Class>"), never
+    # linked. ErrorLog `belongs_to` it, and a belongs_to autosaves a new record:
+    # the logger would run the failing save a second time, and that raise
+    # escaped before @_error_logged was set, so the catch-all wrote the same
+    # failure twice. It also created the account a failed signup was meant not
+    # to create.
+    #
+    # `slug` is NOT in the engine's User contract (REQUIRED_USER_INSTANCE_METHODS
+    # is admin? + display_name), and a target is routinely a User. Unguarded, the
+    # LOGGER raises NoMethodError and MASKS the original exception. The name is a
+    # convenience column; its absence must never cost the record.
+    def attach_error_context(error_log, role, record)
+      return unless record
+
+      name_column = :"#{role}_name"
+      slug = record.slug.presence if record.respond_to?(:slug)
+      if record.respond_to?(:new_record?) && record.new_record?
+        slug ||= "unsaved #{record.class.name}"
+      else
+        error_log.public_send(:"#{role}=", record)
+      end
+      error_log[name_column] = slug if slug && error_log.has_attribute?(name_column)
+    end
+
     # Layer 1: RecordNotFound — Rails' own 404, never an ErrorLog row.
     #
     # This handler exists for exactly ONE reason: to stop `handle_unexpected_error`
@@ -291,7 +322,14 @@ module Studio
     # Layer 1: Catch-all for unexpected errors — log + friendly response.
     # Skips logging if rescue_and_log already captured it.
     def handle_unexpected_error(exception)
-      create_error_log(exception) unless @_error_logged
+      unless @_error_logged
+        begin
+          create_error_log(exception)
+        rescue StandardError => log_error
+          # Unguarded, this raise replaced the friendly reply with a raw 500.
+          log_error_write_failed(log_error, exception)
+        end
+      end
       raise exception if Rails.env.development? || Rails.env.test?
 
       respond_to do |format|