studio-engine 0.53.1 → 0.54.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 16972aaa58808c367d4c21f31458b67e23e19e56e84198b4bb6721607a6f9d25
-  data.tar.gz: 1e88013ef4adbda0991bc14df7d9c9e398339ad2201b1d48ce913bc22b212d77
+  metadata.gz: b79896d29716fe1408c39d86c9e2d19d4e6dc12dd28749ff85054c29e5ba9a77
+  data.tar.gz: 033a9a7e0e4799ef5ed0522e3fb6b6d1652ab4239d7de625add1e24ac81a5386
 SHA512:
-  metadata.gz: 9fa4d61d52965e76a67df8646261b59de6eb8729378093c414fa638b2211f020ac64f87ec47a1ddbb7005d69f25fa95699e10e5bb74b6a87137f62d5db25b7ea
-  data.tar.gz: d71d74679f35845bd0816fb1fade459ceb6ffa08c7e803798026909263f5de988345cec4972b063d8ebb2a1809fa355974e7ca9ef95d4c320538e0566b5213f9
+  metadata.gz: dcd13075e85ee744c86ec901f62e749320f916a72c7c04b1530a5715dcdbcec3adcaa39dc1b8236327bc5a2de4238ef1585cf42853444ff92eeae0ff7cfcc702
+  data.tar.gz: 6d242c947ec1d582202bb53652091f6ab4ed111cadfa721aab578df1f89f7b8b9a9bdb4bcd9f57b5b8a15ba9d8c9200b2358668ec2058d59f0c210072e93a79a

data/CHANGELOG.md

@@ -4,6 +4,77 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+### Fixed
+
+- **`.conic-surface` keeps its wash inside its own box.** The wash was an
+  OVERSIZED pseudo (`inset: -50%`) spun by a `transform` keyframe, cut back to
+  the element by the host's `overflow: hidden`. That clip is not dependable: the
+  rotating child is composited, and a `backdrop-filter` in its compositing path
+  drops it. The `.surface-glass` specimen — a backdrop-filter child of the wash
+  itself — is exactly that path, and on admin/style in Chromium the wash escaped
+  as a rotated slab across BOTH conic specimens.
+
+  The element no longer moves. The pseudo sits at `inset: 0` with
+  `border-radius: inherit`, and the sweep animates a registered
+  `--conic-surface-angle` inside the gradient — the technique §9b already used.
+  Nothing extends past the box, the rounded corners come from the pseudo, and no
+  clip has to hold. Same picture, one fewer thing that can fail.
+  `overflow: hidden` stays for the host's CONTENT.
+
+  The trade, stated: a registered-property animation repaints on the main thread
+  where a transform rode the compositor. At the default 16s sweep that is cheap,
+  and §9b already pays it at 4s.
+
+- **`.studio-team-glow` is demoed and documented as the wrapper it is.** Its two
+  wedge layers are pseudos at z-index -1/-2, and CSS paints an element's own
+  background BEFORE its negative-z descendants — so a background on the glow HOST
+  is covered BY the wedges, not the other way round, and the ring becomes a wash
+  across the whole card face. What covers the middle is an opaque CHILD, which
+  paints later; that is TM's `holo-wrap` / `holo-card` split, and what both real
+  consumers already ship.
+
+  The §9b comment claimed the opposite ("host needs an opaque background"), and
+  the Effects specimen followed it, so the style guide showed two washed slabs
+  where the selection ring belongs. The specimen, its copyable snippet, and the
+  contract comment now all state the same thing. The primitive's geometry is
+  unchanged — the consumers tuned against it are untouched.
+
+### Added
+
+- **`studio/fields/_date_of_birth`** — the engine's one date-of-birth field,
+  three selects (Month / Day / Year). Rendered by
+  `studio/modals/blocks/_age_verify` and by `/profile/edit`'s birthday row.
+
+  **It was already duplicated**, which is the real argument for extracting it:
+  those selects lived in the age-verify block, and turf-monster forked a second
+  copy into its own `modals/_age_verify`. Two copies of one field is how they
+  drift.
+
+### Changed
+
+- **`/profile/edit`'s birthday drops the calendar popover** for that shared
+  field (operator's call). The calendar shipped **four defects in three days**:
+  its day grid used `grid-cols-7`, which exists in no consumer bundle, so the
+  weekday letters stacked into one column and it grew to the height of the page;
+  a flipped popover positioned from a hardcoded 340px height when the real one
+  is ~245px; `place()` re-decided the side on every scroll so it snapped
+  mid-scroll; and it came back open after a browser Back.
+
+  Three selects have none of those failure modes — no position, no flip, no
+  popover, no scroll listener. Their utilities are also **proven across the
+  fleet**: `grid-cols-3` and `label-upper` are present in all three consumers'
+  compiled bundles, which `grid-cols-7` never was.
+
+  The **no-JavaScript path is unchanged**: the native `<input type="date">` still
+  renders under `template x-if`, so only one branch is ever in the DOM.
+
+  Nine browser specs retired with the popover — all of them about positioning —
+  and six replaced them, testing where a select-based field can actually be
+  wrong: the day list following the month (30 in April, 29 in a leap February),
+  clearing a day the new month lost, refusing a partial date, and a year list
+  that stops at this year.
+
+
 ### Changed
 
 - **Each `/profile` row is its own card.** They were rendered inside one merged

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

@@ -521,10 +521,22 @@
    transition, so a consumer can fade the glow in/out (the living style guide
    slides it between step cards as a modal's step machine advances).
 
-   Host needs an opaque background (the ring shows only around the edge) and must
-   NOT be clipped by an overflow-hidden ancestor near its border.
-
-   Usage:  <div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>
+   THE HOST IS A BARE WRAPPER, NOT THE CARD. Both wedge layers are pseudo-elements
+   at z-index -1 / -2, and CSS paints an element's own background FIRST, then its
+   negative-z descendants on top of it (CSS 2.1 Appendix E, steps 1 and 2). So a
+   background on the HOST cannot cover the wedges — they wash its whole face, and
+   the ring is gone. What covers the middle is an opaque CHILD in front: in-flow
+   descendants paint later (step 3), leaving only the thickness-wide band around
+   the edge. That is TM's holo-wrap / holo-card split, and it is what both
+   consumers ship — the engine's style/_modal_specimen (bare glow wrapper + the
+   opaque .card article) and the hub's release-phase-meter (bare host + the bar's
+   own fill). Demoing it the other way is what shipped a washed card to
+   admin/style; the host also must NOT be clipped by an overflow-hidden ancestor
+   near its border.
+
+   Usage:  <div class="studio-team-glow rounded-xl">
+             <div class="rounded-xl bg-surface p-5">Selected</div>
+           </div>
            red glow:  style="--studio-team-glow-color: #E11D48"
    Tune:   --studio-team-glow-color / -opacity / -speed / -thickness / -bloom
    ========================================================================== */
@@ -604,12 +616,36 @@
    11. conic-surface — slow rotating conic-gradient wash (authored fresh)
    A subtle animated ambient background for hero panels / empty states: a conic
    gradient sweeps between two themed stops (CTA -> surface by default) on a slow
-   rotation. The gradient lives on a ::before that rotates, so content kept above
-   it stays crisp. The element's radius clips the wash; give it one.
+   rotation. The gradient lives on a ::before behind the content, so content kept
+   above it stays crisp.
+
+   THE WASH IS CONTAINED BY CONSTRUCTION, NOT BY A CLIP. The first cut rotated an
+   OVERSIZED child (`inset: -50%` + `transform: rotate`) and leaned on the host's
+   `overflow: hidden` to cut it back to the box. That clip is not dependable: the
+   rotating child is composited, and a `backdrop-filter` anywhere in its
+   compositing path (its OWN .surface-glass child on the style guide, or an
+   unrelated overlay elsewhere on the page) drops the clip — the wash then paints
+   outside the box as a rotated slab. Observed on admin/style in Chromium, on both
+   conic specimens, with the .surface-glass demo the reliable trigger.
+
+   So the element never moves. The ::before sits at `inset: 0` with
+   `border-radius: inherit`, and the sweep animates a registered @property angle
+   inside the gradient — the same technique §9b uses. Nothing extends past the
+   box, the rounded corners come from the pseudo itself, and no clip has to hold.
+   `overflow: hidden` stays for the host's CONTENT, not for the wash.
+
+   The cost of the trade, stated: a registered-property animation repaints the
+   gradient on the main thread each frame, where a transform rode the compositor.
+   At the default 16s sweep that is cheap, and §9b already pays it at 4s.
 
    Usage:  <div class="conic-surface rounded-2xl p-8"> ...content... </div>
    Tune:   --conic-surface-from / --conic-surface-to / --conic-surface-duration
    ========================================================================== */
+@property --conic-surface-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
 .conic-surface {
   position: relative;
   isolation: isolate;
@@ -619,10 +655,11 @@
 .conic-surface::before {
   content: "";
   position: absolute;
-  inset: -50%;
+  inset: 0;
+  border-radius: inherit;
   z-index: -1;
   background: conic-gradient(
-    from 0deg,
+    from var(--conic-surface-angle),
     var(--conic-surface-from, var(--color-cta)),
     var(--conic-surface-to, var(--color-surface)),
     var(--conic-surface-from, var(--color-cta))
@@ -631,7 +668,7 @@
 }
 
 @keyframes conic-surface-spin {
-  to { transform: rotate(360deg); }
+  to { --conic-surface-angle: 360deg; }
 }
 
 /* =============================================================================

data/app/views/studio/fields/_date_of_birth.html.erb

@@ -0,0 +1,80 @@
+<%# A date of birth, as three selects. The engine's one DOB field.
+
+    Locals (all optional):
+      label_month / label_day / label_year — the field labels. Defaults below.
+      on_change — Alpine expression run when ANY of the three changes, so a call
+                  site can recompute whatever it derives. Defaults to the
+                  age-gate's onMonthChange(), which every current caller has.
+
+                  ONE HOOK FOR ALL THREE, where age_verify used onMonthChange()
+                  for month/year and `error = ''` for day. That is not a
+                  behaviour change: onMonthChange() clears an out-of-range day
+                  and then clears the error, and a day just chosen FROM
+                  dayOptions is never out of range — so on the day select it
+                  reduces to exactly `error = ''`. Checked rather than assumed,
+                  because an extraction that quietly alters a call site is worse
+                  than no extraction.
+
+    WHAT THE ENCLOSING ALPINE COMPONENT MUST SUPPLY. This partial is markup
+    only; it binds to the component it is rendered inside:
+
+      month, day, year   — x-model targets
+      months             — [{ n: 1, label: "January" }, …]
+      dayOptions         — the days valid for the selected month/year
+      years              — the year range this caller offers
+
+    EXTRACTED BECAUSE IT WAS ALREADY DUPLICATED: these selects lived in
+    studio/modals/blocks/_age_verify, and turf-monster forked a second copy into
+    its own modals/_age_verify. Two copies of one field is how they drift.
+
+    AND BECAUSE IT REPLACED SOMETHING WORSE. /profile/edit used a custom calendar
+    popover, which shipped four defects in three days — its grid collapsed in
+    every consumer (grid-cols-7 exists in no consumer bundle), a flipped popover
+    used a hardcoded height and landed ~95px wrong, place() re-decided the side on
+    every scroll so it snapped mid-scroll, and it came back OPEN after a browser
+    Back. Three selects have none of those failure modes: no positioning, no
+    flip, no popover, no scroll listener.
+
+    ITS UTILITIES ARE PROVEN, which the calendar's were not. Measured across the
+    fleet: grid-cols-3 and label-upper are present in turf-monster,
+    mcritchie-studio AND mcritchie-industries' compiled bundles. The engine ships
+    a prebuilt bundle, so a utility exists in a consumer only if that consumer
+    already emitted it — this field's do. %>
+<%
+  label_month = local_assigns.fetch(:label_month, "Month")
+  label_day   = local_assigns.fetch(:label_day, "Day")
+  label_year  = local_assigns.fetch(:label_year, "Year")
+  on_change   = local_assigns.fetch(:on_change, "onMonthChange()")
+%>
+<div class="grid grid-cols-3 gap-2">
+  <div>
+    <label class="label-upper block mb-1"><%= label_month %></label>
+    <select x-model="month" @change="<%= on_change %>"
+            class="input-field !px-3 !py-2.5 text-sm appearance-none cursor-pointer">
+      <option value="" disabled><%= label_month %></option>
+      <template x-for="m in months" :key="m.n">
+        <option :value="m.n" x-text="m.label"></option>
+      </template>
+    </select>
+  </div>
+  <div>
+    <label class="label-upper block mb-1"><%= label_day %></label>
+    <select x-model="day" @change="<%= on_change %>"
+            class="input-field !px-3 !py-2.5 text-sm appearance-none cursor-pointer">
+      <option value="" disabled><%= label_day %></option>
+      <template x-for="d in dayOptions" :key="d">
+        <option :value="d" x-text="d"></option>
+      </template>
+    </select>
+  </div>
+  <div>
+    <label class="label-upper block mb-1"><%= label_year %></label>
+    <select x-model="year" @change="<%= on_change %>"
+            class="input-field !px-3 !py-2.5 text-sm appearance-none cursor-pointer">
+      <option value="" disabled><%= label_year %></option>
+      <template x-for="y in years" :key="y">
+        <option :value="y" x-text="y"></option>
+      </template>
+    </select>
+  </div>
+</div>

data/app/views/studio/modals/blocks/_age_verify.html.erb

@@ -49,35 +49,11 @@
       <%= intro %>
     </p>
 
-    <%# Month / Day / Year selectors %>
-    <div class="grid grid-cols-3 gap-2 mb-4">
-      <div>
-        <label class="label-upper block mb-1">Month</label>
-        <select x-model="month" @change="onMonthChange()" class="input-field !px-3 !py-2.5 text-sm appearance-none cursor-pointer">
-          <option value="" disabled>Month</option>
-          <template x-for="m in months" :key="m.n">
-            <option :value="m.n" x-text="m.label"></option>
-          </template>
-        </select>
-      </div>
-      <div>
-        <label class="label-upper block mb-1">Day</label>
-        <select x-model="day" @change="error = ''" class="input-field !px-3 !py-2.5 text-sm appearance-none cursor-pointer">
-          <option value="" disabled>Day</option>
-          <template x-for="d in dayOptions" :key="d">
-            <option :value="d" x-text="d"></option>
-          </template>
-        </select>
-      </div>
-      <div>
-        <label class="label-upper block mb-1">Year</label>
-        <select x-model="year" @change="onMonthChange()" class="input-field !px-3 !py-2.5 text-sm appearance-none cursor-pointer">
-          <option value="" disabled>Year</option>
-          <template x-for="y in years" :key="y">
-            <option :value="y" x-text="y"></option>
-          </template>
-        </select>
-      </div>
+    <%# Month / Day / Year — the engine's one DOB field, shared with the profile
+        page's birthday row. It lived here first and turf-monster forked a second
+        copy; extracting it is what stops the two drifting. %>
+    <div class="mb-4">
+      <%= render "studio/fields/date_of_birth" %>
     </div>
 
     <%# Live too-young hint — shown once a full date is picked and it fails the

data/app/views/studio/profiles/_birthday_fields.html.erb

@@ -1,4 +1,4 @@
-<%# Birthday — ONE date over THREE integer columns, entered through a calendar.
+<%# Birthday — THREE SELECTS over three integer columns.
 
     Locals: user (required).
 
@@ -9,26 +9,29 @@
     (needs month and day, and no year at all). A single date column answers the
     second one badly.
 
-    So the UI joins them and ProfilesController#update splits them again. The row
-    renders only when the host has all three columns, so nothing here re-checks.
+    THE SAME FIELD THE AGE GATE USES (operator's call, 2026-08-15). It renders
+    studio/fields/_date_of_birth, which studio/modals/blocks/_age_verify also
+    renders — one field, two surfaces. It replaced a custom calendar popover that
+    shipped four defects in three days; see the component script for the list.
 
     TWO INPUTS, ONE NAME, AND ONLY EVER ONE IN THE DOM. `<template x-if>` is what
     makes that true rather than a claim: the branch Alpine does not take is never
     instantiated, so the form can never carry two `profile[birthday]` fields and
     the server can never receive the wrong one. Toggling with x-show would leave
     BOTH present and submit the hidden one's value too — the last duplicate wins
-    in Rack's params, which is precisely the bug this shape avoids.
+    in Rack's params.
 
-      no JS  — the native `<input type="date">`. It is not a downgrade; it is the
+      no JS  — the native `<input type="date">`. Not a downgrade: it is the
                control every platform already knows how to render, and the reason
                a JS-less page can still set a birthday at all.
-      JS     — the calendar below. `alpine` comes from the enclosing
+      JS     — the three selects. `alpine` comes from the enclosing
                studioProfileForm and is true only once that component has booted.
-
-    The operator asked for a calendar rather than an open field (2026-08-15).
 %>
-<label class="block text-sm text-secondary mb-2 font-medium" for="profile_birthday">Date of birth</label>
-
+<%# NO FIELD LABEL HERE, deliberately (operator's call, 2026-08-15). The row is
+    already titled "Birthday" by the section wrapper, and the three selects carry
+    their own MONTH / DAY / YEAR labels — a "Date of birth" line between the two
+    said the same thing a third time. The no-JS <input type="date"> keeps its id
+    so a label elsewhere could still point at it. %>
 <%
   y = user.birth_year
   m = user.birth_month
@@ -36,7 +39,7 @@
   value = (y.present? && m.present? && d.present?) ? format("%04d-%02d-%02d", y, m, d) : nil
 %>
 
-<div x-data="studioBirthdayPicker('<%= value %>')">
+<div x-data="studioBirthdayFields('<%= value %>')">
   <%# --- the JS-less path ------------------------------------------------- %>
   <template x-if="!alpine">
     <input type="date" name="profile[birthday]" id="profile_birthday"
@@ -44,187 +47,37 @@
            autocomplete="bday" max="<%= Date.current.iso8601 %>">
   </template>
 
-  <%# --- the calendar ------------------------------------------------------ %>
+  <%# --- the three selects -------------------------------------------------- %>
   <template x-if="alpine">
     <div>
-      <%# The value the form actually submits. The calendar writes here; nothing
-          types into it. %>
-      <input type="hidden" name="profile[birthday]" :value="value">
-
-      <button type="button" x-ref="trigger" @click="toggle()"
-              @keydown.escape="open = false"
-              :aria-expanded="open ? 'true' : 'false'"
-              aria-haspopup="dialog"
-              class="input-field w-full text-left flex items-center justify-between gap-2">
-        <span :class="displayValue ? 'text-heading' : 'text-muted'"
-              x-text="displayValue || 'Select your date of birth'"></span>
-        <svg class="w-4 h-4 text-muted flex-shrink-0" fill="none" stroke="currentColor"
-             stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round"
-                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"/>
-        </svg>
-      </button>
-
-      <div x-show="open" x-cloak
-           x-ref="popover"
-           @click.outside="open = false"
-           @keydown.escape.window="open = false"
-           @scroll.window="place()" @resize.window="place()"
-           role="dialog" aria-label="Choose your date of birth"
-           class="studio-birthday-popover"
-           :style="'top:' + top + 'px; left:' + left + 'px; min-width:' + width + 'px;'">
-
-        <%# Month and year JUMP rather than step. Stepping from today to 1985 is
-            about four hundred clicks, which is the whole reason this is not the
-            contest picker. %>
-        <div class="studio-birthday-nav">
-          <select x-model.number="viewMonth" class="input-field studio-birthday-month"
-                  aria-label="Month">
-            <template x-for="(name, i) in months" :key="name">
-              <option :value="i" x-text="name"></option>
-            </template>
-          </select>
-          <select x-model.number="viewYear" class="input-field studio-birthday-year"
-                  aria-label="Year">
-            <template x-for="y in years" :key="y">
-              <option :value="y" x-text="y"></option>
-            </template>
-          </select>
-        </div>
-
-        <div class="studio-birthday-grid studio-birthday-weekdays">
-          <template x-for="(wd, i) in weekdays" :key="i">
-            <div x-text="wd"></div>
-          </template>
-        </div>
-
-        <div class="studio-birthday-grid">
-          <template x-for="(cell, i) in calDays()" :key="i">
-            <div>
-              <template x-if="cell">
-                <button type="button" @click="pick(cell)" :disabled="isFuture(cell)"
-                        :class="isSelected(cell) && 'is-selected'"
-                        class="studio-birthday-day"
-                        x-text="cell"></button>
-              </template>
-            </div>
-          </template>
-        </div>
-
-        <%# A birthday already set is the only case where clearing is meaningful,
-            and without this the calendar is a one-way door — every day cell sets
-            a value and none of them unset one. %>
-        <div class="mt-3 flex justify-end" x-show="value">
-          <button type="button" @click="clear()"
-                  class="text-xs text-secondary hover:text-heading transition">
-            Clear
-          </button>
-        </div>
-      </div>
+      <%# The value the form actually submits. The selects write here; nothing
+          types into it.
+
+          THE NAME IS BOUND, AND THAT IS THE WHOLE POINT. A partly-filled date
+          has no ISO value, and submitting a BLANK birthday is not "no change" to
+          this controller — it is DELETE, and it clears all three columns on
+          purpose (see #birthday_attributes: someone deleting their birthday
+          means it). Those two facts met in a data-loss bug: a stored Jan 31,
+          switch the month to February, onMonthChange blanks the 31st because
+          February has no 31st, and the form is now one Save away from wiping a
+          birthday the person never asked to delete.
+
+          On THIS path a blank is always an edit in progress and never an
+          intentional clear, because the selects offer no empty option — once a
+          part is set the user cannot unset it. The intentional clear lives on
+          the no-JS <input type="date"> above, where it is a real gesture.
+
+          So while the date is incomplete the field submits NOTHING: Alpine
+          removes an attribute bound to false, an input with no name is not
+          submitted, and the controller's `return {} if raw.nil?` makes an absent
+          param a no-op. The birthday is left exactly as it was. %>
+      <input type="hidden" :name="complete ? 'profile[birthday]' : false" :value="isoValue">
+
+      <%= render "studio/fields/date_of_birth" %>
     </div>
   </template>
 </div>
 
 <p class="text-muted text-xs mt-2">Stored as day, month and year — we use it for birthdays and age checks.</p>
 
-<style>
-  /* EVERY RULE BELOW IS OWNED CSS, NOT TAILWIND UTILITIES, and that is not a
-     style preference — it is the bug the operator reported.
-     
-     The engine ships a PREBUILT bundle to consumers. A Tailwind utility exists in
-     a consuming app only if that app's OWN views already emitted it, because its
-     build scans its own source, not the gem's. This calendar first shipped using
-     `grid grid-cols-7`, and `grid-cols-7` is rare enough that NO consumer had
-     ever emitted it: measured in mcritchie-studio's compiled bundle, zero
-     occurrences. With no grid, the seven weekday letters stacked into a single
-     vertical column and the popover grew to the height of the page.
-     `hover:bg-surface-alt` was missing for the same reason.
-     
-     The same note is on studio/profiles/_identity_styles for the same reason.
-     
-     AND THE BROWSER LANE COULD NOT SEE IT. e2e/tailwind_input.css carries
-     `@source "../app/views"`, so the lane compiles the engine's OWN views and
-     emits grid-cols-7 — every spec passed against a page no consumer renders.
-     That blindness is recorded in docs/E2E_LANE.md; the fix here is to stop
-     depending on the utility at all. */
-  .studio-birthday-nav {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-bottom: 0.75rem;
-  }
-
-  .studio-birthday-month { flex: 1 1 auto; }
-
-  .studio-birthday-month,
-  .studio-birthday-year {
-    font-size: 0.875rem;
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-
-  /* THE ONE THAT BROKE. Seven columns, owned outright. */
-  .studio-birthday-grid {
-    display: grid;
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-    text-align: center;
-  }
-
-  .studio-birthday-weekdays {
-    margin-bottom: 0.25rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--color-text-muted, #9ca3af);
-  }
-
-  .studio-birthday-weekdays > div { padding: 0.25rem 0; }
-
-  .studio-birthday-day {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 9999px;
-    font-size: 0.875rem;
-    color: var(--color-text-body, inherit);
-    transition: background-color 150ms ease, color 150ms ease;
-  }
-
-  .studio-birthday-day:hover:not(:disabled) {
-    background: var(--color-surface-alt, rgba(127, 127, 127, 0.15));
-  }
-
-  .studio-birthday-day:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  .studio-birthday-day.is-selected {
-    background: var(--color-primary);
-    color: #fff;
-    font-weight: 700;
-  }
-
-  /* FIXED, not absolute, for TWO reasons — and the second is the one a spec can
-     actually catch.
-
-     1. Clipping. The edit page's rows sit inside `card p-0 overflow-hidden`. An
-        absolutely-positioned popover only escapes that clip while NO ancestor is
-        positioned; the day a consumer's card grows a `position: relative` it is
-        clipped out of sight, with perfectly correct markup.
-     2. Anchoring. place() writes VIEWPORT coordinates from the trigger's rect.
-        Fixed keeps them meaningful as the page scrolls; absolute reinterprets
-        them as document coordinates and the popover drifts by the scroll offset.
-
-     At scroll 0 the two are indistinguishable, which is why the spec that proves
-     this scrolls first. */
-  .studio-birthday-popover {
-    position: fixed;
-    z-index: 40;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border-subtle);
-    border-radius: 0.75rem;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25);
-    padding: 0.75rem;
-  }
-</style>
-
 <%= render "studio/profiles/birthday_picker_script" %>

data/app/views/studio/profiles/_birthday_picker_script.html.erb

@@ -1,40 +1,48 @@
-<%# The birthday calendar's Alpine component.
-
-    Its own partial so the field markup stays readable and this can be reasoned
-    about as behaviour.
-
-    WHY NOT REUSE turf-monster's contest_lock_picker. That component is the
-    nearest thing in the ecosystem and its GRID is where this one's shape came
-    from, but its navigation is built for the opposite problem: picking a lock
-    time a few weeks OUT, by stepping months from today. Stepping to 1985 that
-    way is roughly four hundred clicks. A birthday needs to JUMP — hence the year
-    and month selects in the header — and it needs the future closed off, which a
-    contest picker specifically must not do.
-
-    WHY `position: fixed` AND NOT `absolute`. The edit page renders its rows
-    inside `card p-0 overflow-hidden`, which CLIPS an absolutely-positioned child
-    — the popover would open and be invisible below the row. Fixed takes it out
-    of the clipping context entirely, at the cost of having to place it by hand
-    from the trigger's rect and re-place it while it is open. The compact identity
-    header is fixed for a related reason, so this is the file's second instance of
-    the same trade rather than a one-off.
+<%# The birthday field's Alpine component.
+
+    Supplies exactly what studio/fields/_date_of_birth binds to — month, day,
+    year, months, dayOptions, years, onMonthChange() — plus the one thing the
+    profile page needs on top: it writes the assembled ISO date into the
+    enclosing studioProfileForm's `fields.birthday`, which is what raises the
+    save bar.
+
+    THIS REPLACED A CALENDAR POPOVER, and the replacement is the point. That
+    component shipped four defects in three days:
+
+      · its day grid used `grid-cols-7`, which exists in NO consumer bundle, so
+        the seven weekday letters stacked into one column and the popover grew to
+        the height of the page;
+      · a flipped popover positioned itself from a hardcoded 340px height when
+        the real popover is ~245px, landing ~95px too high;
+      · place() ran on every scroll and RE-DECIDED the side, so it snapped
+        between above and below mid-scroll — a 254px jump between two 60px steps;
+      · and it came back OPEN after a browser Back.
+
+    Three selects have none of those failure modes. There is no position, no
+    flip, no popover, and no scroll listener — so there is nothing to place
+    wrongly, nothing to re-decide, and nothing to restore open.
 %>
 <script>
-  window.studioBirthdayPicker = function (initial) {
+  window.studioBirthdayFields = function (initial) {
+    var parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(initial || ""));
+
     return {
-      open: false,
-      // Which side this open chose. Set by chooseSide() when the popover opens and
-      // then left alone — see place() for why re-deciding it is the bug.
-      flipped: false,
-      value: initial || "",
-      viewYear: 0,
-      viewMonth: 0,
-      top: 0,
-      left: 0,
-      width: 0,
+      year:  parts ? String(+parts[1]) : "",
+      month: parts ? String(+parts[2]) : "",
+      day:   parts ? String(+parts[3]) : "",
+
+      months: [
+        { n: 1, label: "January" },   { n: 2, label: "February" },
+        { n: 3, label: "March" },     { n: 4, label: "April" },
+        { n: 5, label: "May" },       { n: 6, label: "June" },
+        { n: 7, label: "July" },      { n: 8, label: "August" },
+        { n: 9, label: "September" }, { n: 10, label: "October" },
+        { n: 11, label: "November" }, { n: 12, label: "December" }
+      ],
 
       // Oldest year offered. 120 covers every living person with room to spare;
-      // the point is a bounded list, because a select has to end somewhere.
+      // the newest is THIS year, because a birthday cannot be in the future and
+      // the cheapest way to say so is not to offer one.
       get years() {
         var now = new Date().getFullYear();
         var out = [];
@@ -42,153 +50,96 @@
         return out;
       },
 
-      months: ["January", "February", "March", "April", "May", "June",
-               "July", "August", "September", "October", "November", "December"],
-
-      weekdays: ["S", "M", "T", "W", "T", "F", "S"],
-
-      init() {
-        this.syncViewFromValue();
-      },
-
-      // The month the grid opens on: the chosen birthday when there is one, else
-      // a sensible landing spot. NOT today — opening a birthday picker on the
-      // current year means everyone starts 30+ years from where they are going.
-      syncViewFromValue() {
-        var parts = this.parse(this.value);
-        var now = new Date();
-        this.viewYear = parts ? parts.y : now.getFullYear() - 30;
-        this.viewMonth = parts ? parts.m - 1 : 0;
-      },
-
-      parse(iso) {
-        var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(iso || ""));
-        if (!m) return null;
-        return { y: +m[1], m: +m[2], d: +m[3] };
-      },
-
-      get displayValue() {
-        var p = this.parse(this.value);
-        if (!p) return "";
-        return this.months[p.m - 1] + " " + p.d + ", " + p.y;
+      // The days that exist in the chosen month — 30 in April, and 29 in a
+      // February only when the chosen year is a leap year. Day 0 of the NEXT
+      // month is the last day of this one, which is the standard trick and
+      // handles the leap rule without one being written down.
+      get dayOptions() {
+        var m = parseInt(this.month, 10);
+        var y = parseInt(this.year, 10) || 2000; // a leap year, so Feb offers 29 before a year is picked
+        if (!m) return Array.from({ length: 31 }, function (_, i) { return i + 1; });
+
+        var count = new Date(y, m, 0).getDate();
+        return Array.from({ length: count }, function (_, i) { return i + 1; });
       },
 
-      // Leading blanks so the 1st lands under its real weekday, then the days.
-      calDays() {
-        var first = new Date(this.viewYear, this.viewMonth, 1).getDay();
-        var count = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
-        var cells = [];
-        for (var i = 0; i < first; i++) cells.push(null);
-        for (var d = 1; d <= count; d++) cells.push(d);
-        return cells;
+      get complete() {
+        return !!(this.year && this.month && this.day);
       },
 
-      // A birthday cannot be in the future. Checked per-DAY rather than by
-      // clamping the year, because the boundary month is half valid.
-      isFuture(day) {
-        var candidate = new Date(this.viewYear, this.viewMonth, day);
-        var today = new Date();
-        today.setHours(0, 0, 0, 0);
-        return candidate > today;
+      get isoValue() {
+        if (!this.complete) return "";
+        return this.year + "-" +
+          String(this.month).padStart(2, "0") + "-" +
+          String(this.day).padStart(2, "0");
       },
 
-      isSelected(day) {
-        var p = this.parse(this.value);
-        return !!p && p.y === this.viewYear && p.m === this.viewMonth + 1 && p.d === day;
+      // Named to match what the shared field binds to. Clears a day that the new
+      // month or year does not have — pick 31 January then switch to February and
+      // the 31st stops existing — then publishes.
+      onMonthChange() {
+        if (this.day && parseInt(this.day, 10) > this.dayOptions.length) this.day = "";
+        this.publish();
       },
 
-      pick(day) {
-        if (this.isFuture(day)) return;
-        var mm = String(this.viewMonth + 1).padStart(2, "0");
-        var dd = String(day).padStart(2, "0");
-        this.value = this.viewYear + "-" + mm + "-" + dd;
-
-        // `fields` belongs to the enclosing studioProfileForm component. Alpine's
-        // scope chain makes it reachable from here, and it is the SAME object, so
-        // assigning through it is what raises the save bar. Without this line the
-        // picker would set a value the dirty check never notices.
-        if (this.fields) this.fields.birthday = this.value;
-
-        this.open = false;
-      },
-
-      clear() {
-        this.value = "";
-        if (this.fields) this.fields.birthday = "";
-        this.syncViewFromValue();
+      // WHAT THE DIRTY CHECK IS SHOWN, and why it is not isoValue.
+      //
+      // isoValue is "" for EVERY incomplete date, so publishing it made a whole
+      // class of edit invisible: on an empty birthday, choosing a month wrote ""
+      // over "" and the save bar never appeared. The operator reported exactly
+      // that. Choosing a month IS a change — the form just had no way to see it.
+      //
+      // So the signal is the three parts, which differ whenever any one of them
+      // does. It stays equal to isoValue for a COMPLETE date (same string, same
+      // shape) so a finished edit compares correctly against the value the page
+      // loaded with, and Discard restores it to that same string.
+      //
+      // `fields` belongs to the enclosing studioProfileForm — Alpine's scope
+      // chain makes it reachable and it is the SAME object, so assigning through
+      // it is what raises the save bar.
+      // THE EMPTY CASE IS NOT A PARTIAL ONE, and conflating them makes the page
+      // arrive already dirty. studioProfileForm's initial.birthday is "" for a
+      // person with no birthday on file, so an untouched empty field must also
+      // read "" — joining three blanks gives "--", which compares as a change and
+      // would raise the save bar on load, before anyone touched anything.
+      get signature() {
+        if (this.complete) return this.isoValue;
+        if (!this.year && !this.month && !this.day) return "";
+        return [this.year, this.month, this.day].join("-");
       },
 
-      toggle() {
-        this.open = !this.open;
-        if (!this.open) return;
-
-        this.syncViewFromValue();
-
-        // Placed twice, deliberately. The first call stops the popover appearing
-        // at 0,0 for a frame; the second is the one that can MEASURE, because
-        // offsetHeight is 0 while x-show still has the element hidden — and it is
-        // also the only place the SIDE is chosen, for the life of this open.
-        this.place();
-        this.$nextTick(function () {
-          this.chooseSide();
-          this.place();
-        }.bind(this));
+      publish() {
+        if (this.fields) this.fields.birthday = this.signature;
       },
 
-      // Placed from the trigger's rect because the popover is fixed. Flips above
-      // the trigger when there is not room below, so it never opens off-screen on
-      // a short viewport.
+      // DISCARD MUST REACH THE SELECTS. studioProfileForm#discard reassigns its
+      // `fields` object, which restores every input bound with x-model — and the
+      // three selects are not, because they are bound to THIS component's own
+      // month/day/year. So Discard used to leave them showing the abandoned edit
+      // while the bar disappeared, and the hidden input went on carrying it: the
+      // next save would write the change the user had just discarded.
       //
-      // THE HEIGHT IS MEASURED, NOT GUESSED, and that distinction is the bug the
-      // operator reported. This used a hardcoded `estimatedHeight = 340` for both
-      // the decision AND the flipped coordinate. The real popover is about 245px,
-      // so a flip landed ~95px too high and the calendar floated visibly detached
-      // from its field — and since scroll re-runs this, it kept jumping. The
-      // arithmetic was legible in the screenshot: trigger at 640, popover at 300,
-      // and 640 - 340 - 4 = 316.
-      //
-      // The element is rendered under x-show (display is toggled, it stays in the
-      // DOM), so offsetHeight is readable as soon as it is shown. The constant
-      // survives only as the fallback for the first call, before the ref exists.
-      place() {
-        var el = this.$refs.trigger;
-        if (!el) return;
-
-        var r = el.getBoundingClientRect();
-        var popover = this.$refs.popover;
-        var height = (popover && popover.offsetHeight) || 340;
-        var GAP = 4;
-
-        this.left = r.left;
-        this.width = r.width;
-
-        // THE SIDE IS NOT RE-DECIDED HERE. place() runs on every scroll and
-        // resize event, and choosing the side each time makes the popover SNAP
-        // between above and below the moment the available space crosses the
-        // threshold. Measured on turf-monster at 60px scroll steps: ABOVE, ABOVE,
-        // ABOVE, ABOVE, then below — a 254px jump between two steps, mid-scroll,
-        // while the reader was looking at it. That is what "the date picker
-        // freaks out on scroll" was.
-        //
-        // chooseSide() runs ONCE per open; this only moves the popover.
-        this.top = this.flipped ? r.top - height - GAP : r.bottom + GAP;
+      // Watching `fields.birthday` is what joins them. Discard sets it back to
+      // the initial string, this fires, and the selects follow — and because the
+      // guard below returns early when the value already matches, the publish →
+      // watch → publish path cannot loop.
+      init() {
+        var self = this;
+        this.publish();
+        this.$watch("fields.birthday", function (value) {
+          if (value === self.signature) return;
+          self.adopt(value);
+        });
       },
 
-      // Which side to open on, decided once and then left alone. Flips above only
-      // when there is not room below AND there is room above — with neither, it
-      // stays below, attached to its field rather than pinned to the top of the
-      // viewport.
-      chooseSide() {
-        var el = this.$refs.trigger;
-        if (!el) return;
-
-        var r = el.getBoundingClientRect();
-        var popover = this.$refs.popover;
-        var height = (popover && popover.offsetHeight) || 340;
-        var GAP = 4;
-        var below = window.innerHeight - r.bottom;
-
-        this.flipped = below < height + GAP && r.top > height + GAP;
+      // Takes an ISO date (or a blank) and puts the selects on it. Anything that
+      // is not a full date empties all three, which is what an initial blank and
+      // a cleared birthday both mean.
+      adopt(value) {
+        var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(value || ""));
+        this.year  = m ? String(+m[1]) : "";
+        this.month = m ? String(+m[2]) : "";
+        this.day   = m ? String(+m[3]) : "";
       }
     };
   };

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

@@ -297,12 +297,22 @@
         </div>
       <% end %>
 
+      <%# The glow host is a BARE wrapper and the opaque face is a CHILD. The ring
+          pseudos sit at z-index -1/-2, and a negative-z descendant paints ABOVE its
+          host's own background — so a background on the HOST washes the whole card
+          face and there is no ring left. The child in front is what covers the
+          middle, exactly as TM's holo-wrap / holo-card split does. See
+          engine-motion.css §9b. %>
       <%= render layout: "style/specimen",
             locals: { klass: ".studio-team-glow  (knob: --studio-team-glow-color)",
-                      usage: %(<div class="studio-team-glow rounded-xl bg-surface p-5">Selected</div>\n<div class="studio-team-glow rounded-xl bg-surface p-5" style="--studio-team-glow-color: #E11D48">Ravens</div>) } do %>
+                      usage: %(<div class="studio-team-glow rounded-xl">\n  <div class="rounded-xl bg-surface p-5">Selected</div>\n</div>) } do %>
         <div class="flex flex-wrap items-center justify-center gap-6">
-          <div class="studio-team-glow rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Selected</div>
-          <div class="studio-team-glow rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center" style="--studio-team-glow-color: #E11D48">Ravens</div>
+          <div class="studio-team-glow rounded-xl">
+            <div class="rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Selected</div>
+          </div>
+          <div class="studio-team-glow rounded-xl" style="--studio-team-glow-color: #E11D48">
+            <div class="rounded-xl bg-surface border border-subtle px-5 py-4 text-sm font-semibold text-heading text-center">Ravens</div>
+          </div>
         </div>
       <% end %>
 

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.53.1"
+  VERSION = "0.54.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.53.1
+  version: 0.54.1
 platform: ruby
 authors:
 - Alex McRitchie
@@ -298,6 +298,7 @@ files:
 - app/views/studio/emails/index.html.erb
 - app/views/studio/emails/orphan.html.erb
 - app/views/studio/emails/show.html.erb
+- app/views/studio/fields/_date_of_birth.html.erb
 - app/views/studio/links/confirm.html.erb
 - app/views/studio/local_emails/index.html.erb
 - app/views/studio/mailers/_layered_banner.html.erb