@bongos/core 1.19.544 → 1.19.546

package/modules/hall-ui/public/hall-kit.js

@@ -1033,69 +1033,100 @@
       + '</div>';
   }
 
-  // calendarGridHtml(days, opts) — a year of ship-days as a contribution calendar:
-  // one cell per calendar day, BANDED by count rather than scaled, its reading a
-  // per-cell title (plus an aria summary on the whole grid), not a crosshair. The
-  // hall's THIRD chart family (task 1003572, criterion legibility-series-are-drawn):
-  // OTBKit's other two shapes are a horizontal bar series and a plot on a time axis;
-  // a 2-D year grid is neither, so it earns its own primitive rather than a hand-roll
-  // at the page (modules/hall-ui/CLAUDE.md; tests/hall_audit.mjs section 6b).
+  // The calendar's date arithmetic, shared by the window and the grid.
   //
-  // THE READING, decided and written down (the task asked which): a NON-picture reader
-  // gets the exact figure two ways — each cell carries a `title` ("2026-09-03 · 3
-  // ships" / "… · no ships"), and the grid carries an aria-label summarising the
-  // window (active days + total ships). No table twin: unlike a line, a calendar's
-  // value IS its position, so a per-cell title reads the same fact the picture shows,
-  // and a 366-row table beneath would be longer than the thing it explains.
-  //
-  // `days`: [{ local_date:'YYYY-MM-DD', count }] — SPARSE (only days that had ships),
-  // already resolved in the BUILDER's timezone server-side (GET /me). Empty → '' so
-  // the caller renders its own empty state, never an empty grid.
+  // THE TIMEZONE TRAP: local_date is already the builder's own day, so the grid is built
+  // by ORDINAL arithmetic on the 'YYYY-MM-DD' parts (Date.UTC on the parsed integers,
+  // floored to an epoch day) — never `new Date('2026-09-03')`, which is UTC-midnight and
+  // would shift a cell a day west of Greenwich. Same epoch-day floor cumulateByDay uses,
+  // so no cell moves relative to the other charts. calDow is Sunday-indexed: epoch day 0
+  // (1970-01-01) is a Thursday, hence the +4.
+  const calYmdToOrd = (ymd) => {
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(ymd);
+    if (!m) return null;
+    return Math.floor(Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3])) / 86400000);
+  };
+  const calOrdToYmd = (ord) => {
+    const dt = new Date(ord * 86400000);
+    return `${dt.getUTCFullYear()}-${String(dt.getUTCMonth() + 1).padStart(2, '0')}-${String(dt.getUTCDate()).padStart(2, '0')}`;
+  };
+  const calDow = (o) => (((o + 4) % 7) + 7) % 7;
+
+  // calendarWindow(days, opts) — the DRAWN window and what falls inside it, resolved
+  // once so the grid and whatever caption sits beside it can never disagree (task
+  // 1003583). Two bugs came from computing this twice: the aria summary tallied every
+  // row handed in rather than the cells drawn, and profile-charts.js counted
+  // `days.filter(d => d.count > 0)` over the whole bounded array — so "N days shipped
+  // this year" could name a day sitting outside the grid's first partial week.
   //
-  // THE TIMEZONE TRAP the task names: local_date is already the builder's own day, so
-  // the grid is built by ORDINAL arithmetic on the 'YYYY-MM-DD' parts (Date.UTC on the
-  // parsed integers, floored to an epoch day) — never `new Date('2026-09-03')`, which
-  // is UTC-midnight and would shift a cell a day west of Greenwich. Same epoch-day
-  // floor cumulateByDay uses, so no cell moves relative to the other charts.
-  function calendarGridHtml(days, opts = {}) {
+  // Returns null when there is nothing real to draw, so callers keep their own empty
+  // state rather than rendering an empty grid.
+  function calendarWindow(days, opts = {}) {
     const list = (days || []).filter((d) => d && typeof d.local_date === 'string');
-    const ymdToOrd = (ymd) => {
-      const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(ymd);
-      if (!m) return null;
-      return Math.floor(Date.UTC(Number(m[1]), Number(m[2]) - 1, Number(m[3])) / 86400000);
-    };
-    const ordToYmd = (ord) => {
-      const dt = new Date(ord * 86400000);
-      return `${dt.getUTCFullYear()}-${String(dt.getUTCMonth() + 1).padStart(2, '0')}-${String(dt.getUTCDate()).padStart(2, '0')}`;
-    };
     const counts = new Map();
     let maxOrd = null;
-    let activeDays = 0;
-    let totalShips = 0;
     for (const d of list) {
-      const o = ymdToOrd(d.local_date);
+      const o = calYmdToOrd(d.local_date);
       if (o == null) continue;
       const c = Math.max(0, Math.round(Number(d.count) || 0));
       if (c <= 0) continue;
       counts.set(o, (counts.get(o) || 0) + c);
       if (maxOrd == null || o > maxOrd) maxOrd = o;
     }
-    if (maxOrd == null) return ''; // nothing real to draw → caller's empty state
-    for (const [, c] of counts) { activeDays += 1; totalShips += c; }
+    if (maxOrd == null) return null;
 
     // The grid ENDS at `today` (the builder's, when given) so a quiet recent week still
     // reads as time that passed, not a truncated chart; falls back to the last ship day.
-    const todayOrd = (opts.today && ymdToOrd(opts.today)) || maxOrd;
+    const todayOrd = (opts.today && calYmdToOrd(opts.today)) || maxOrd;
     const endOrd = Math.max(todayOrd, maxOrd);
     const weeks = Math.max(1, Math.min(53, Math.round(Number(opts.weeks)) || 53));
 
     // Columns are weeks, rows Sun..Sat. Epoch day 0 (1970-01-01) is a Thursday, so the
     // Sunday-indexed weekday is (ord + 4) mod 7. The last column is the week holding
     // endOrd; walk back `weeks` Sundays to the first cell.
-    const dow = (o) => (((o + 4) % 7) + 7) % 7;
-    const endSun = endOrd - dow(endOrd);
+    const endSun = endOrd - calDow(endOrd);
     const startSun = endSun - (weeks - 1) * 7;
 
+    // Tallied over the DRAWN range only — [startSun, endOrd] — not over everything
+    // handed in. A day the caller supplied that falls before the first column is real
+    // history, but it is not on this picture, so it is not in this picture's summary.
+    let activeDays = 0;
+    let totalShips = 0;
+    for (const [o, c] of counts) {
+      if (o < startSun || o > endOrd) continue;
+      activeDays += 1;
+      totalShips += c;
+    }
+    return { counts, startSun, endOrd, weeks, activeDays, totalShips };
+  }
+
+  // calendarGridHtml(days, opts) — a year of ship-days as a contribution calendar:
+  // one cell per calendar day, BANDED by count rather than scaled, its reading a
+  // per-cell title (plus an aria summary on the whole grid), not a crosshair. The
+  // hall's THIRD chart family (task 1003572, criterion legibility-series-are-drawn):
+  // OTBKit's other two shapes are a horizontal bar series and a plot on a time axis;
+  // a 2-D year grid is neither, so it earns its own primitive rather than a hand-roll
+  // at the page (modules/hall-ui/CLAUDE.md; tests/hall_audit.mjs section 6b).
+  //
+  // THE READING, decided and written down (the task asked which): a NON-picture reader
+  // gets the exact figure two ways — each cell carries a `title` ("2026-09-03 · 3
+  // ships" / "… · no ships"), and the grid carries an aria-label summarising the
+  // window (active days + total ships). No table twin: unlike a line, a calendar's
+  // value IS its position, so a per-cell title reads the same fact the picture shows,
+  // and a 366-row table beneath would be longer than the thing it explains.
+  //
+  // `days`: [{ local_date:'YYYY-MM-DD', count }] — SPARSE (only days that had ships),
+  // already resolved in the BUILDER's timezone server-side (GET /me). Empty → '' so
+  // the caller renders its own empty state, never an empty grid.
+  //
+  // The window it draws, and the tallies its summary quotes, come from calendarWindow —
+  // see the timezone trap documented there.
+  function calendarGridHtml(days, opts = {}) {
+    const win = calendarWindow(days, opts);
+    if (!win) return ''; // nothing real to draw → caller's empty state
+    const { counts, startSun, endOrd, weeks, activeDays, totalShips } = win;
+    const ordToYmd = calOrdToYmd;
+
     // level 0 = empty; 1..5 map to the anti-gaming daily cap (streak.js caps a day at
     // 5), so the darkest band means "hit the day's max", not "over some threshold".
     const level = (c) => (c <= 0 ? 0 : Math.min(5, c));
@@ -1112,8 +1143,11 @@
       }
     }
 
+    // The window is DESCRIBED, not assumed: a caller passing weeks:6 used to be handed
+    // an aria label saying "over the last year" (task 1003583).
+    const span = weeks === 53 ? 'the last year' : `the last ${weeks} week${weeks === 1 ? '' : 's'}`;
     const summary = opts.ariaLabel
-      || `Ships per day over the last year: ${totalShips} ship${totalShips === 1 ? '' : 's'} across ${activeDays} day${activeDays === 1 ? '' : 's'}.`;
+      || `Ships per day over ${span}: ${totalShips} ship${totalShips === 1 ? '' : 's'} across ${activeDays} day${activeDays === 1 ? '' : 's'}.`;
     // The legend is aria-hidden: it decorates the bands, it carries no fact the cell
     // titles and the summary do not already state in words.
     const legend = '<div class="kit-cal__key" aria-hidden="true"><span class="kit-cal__key-label">less</span>'
@@ -1141,6 +1175,7 @@
     sparklineHtml, barSeriesHtml, chartCardHtml, linePoints, cumulate, cumulateByDay,
     // the year-grid contribution calendar (task 1003572) — the hall's third chart family
     calendarGridHtml,
+    calendarWindow,
     // plotted charts: the axis frame + the two series shapes that ride it
     plotSvgHtml, plotValueLabelHtml, timeStepSeriesHtml, timeStepGeometry, columnSeriesHtml,
     // plotBox is exported so a caller mapping pointer x back into viewBox

package/modules/hall-ui/public/profile-charts.js

@@ -267,9 +267,15 @@
   // module doc's honest-exit rule; DONE WHEN #4).
   function calendarChart({ id, streak }) {
     const days = (streak && Array.isArray(streak.ship_days)) ? streak.ship_days : [];
-    const grid = window.OTBKit.calendarGridHtml(days, { today: streak && streak.today });
+    const opts = { today: streak && streak.today };
+    const grid = window.OTBKit.calendarGridHtml(days, opts);
     if (!grid) return null;
-    const active = days.filter((d) => Number(d.count) > 0).length;
+    // The caption counts what the GRID draws, not what the server sent (task 1003583).
+    // `days` is bounded to 371 days server-side while the grid spans 53 weeks back to a
+    // Sunday, so filtering `days` here could name a day the picture does not contain —
+    // and the number sits directly under that picture. One window, read twice.
+    const win = window.OTBKit.calendarWindow(days, opts);
+    const active = win ? win.activeDays : 0;
     const cur = Number(streak && streak.current) || 0;
     const lng = Number(streak && streak.longest) || 0;
     // The scalars in words, in the .pchart__read slot the other figures use for their

package/modules/hall-ui/public/shell.js

@@ -94,6 +94,10 @@
     leaderboard: '<path d="M3.5 15.5v-6M9 15.5V3.5m5.5 12v-9"/>',
     people: '<circle cx="6.5" cy="6.5" r="2.5"/><path d="M2.5 15c.5-2.4 2-3.7 4-3.7s3.5 1.3 4 3.7"/><circle cx="12.5" cy="7" r="2"/><path d="M12 11.5c1.8.1 3 1.3 3.5 3.3"/>',
     docs: '<path d="M4 3.5h7l3 3v10H4v-13Z"/><path d="M11 3.5v3h3"/>',
+    // task 1003117 (R06 of goal 1000074): the Studio (artist mode). A sprout —
+    // the zen-garden reading of "a place an artist wants to be", so it does not
+    // reuse a glyph that would read as one more docs/goals page.
+    studio: '<path d="M9 15.5V8.5"/><path d="M9 8.5C9 5.5 6.5 3.5 3.5 3.5c0 3 2.5 5 5.5 5Z"/><path d="M9 10C9 7.5 11.2 5.5 14 5.5c0 2.7-2.2 4.5-5 4.5Z"/>',
     settings: '<circle cx="9" cy="9" r="2.5"/><path d="M9 2.5v2m0 9v2M2.5 9h2m9 0h2M4.4 4.4l1.4 1.4m6.4 6.4 1.4 1.4m0-9.2-1.4 1.4M5.8 12.2l-1.4 1.4"/>',
     admin: '<path d="M9 2.5 15 5v4c0 3.5-2.4 6-6 7-3.6-1-6-3.5-6-7V5l6-2.5Z"/>',
     signout: '<path d="M7 3.5H4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3M12 12l3-3-3-3M15 9H7"/>',
@@ -153,6 +157,16 @@
       // everyone else who has a thought, which is most of the value.
       { id: 'ideas', label: 'Ideas', icon: 'goals', href: '/ideas', gate: 'signed' },
       { id: 'copy-desk', label: 'Copy desk', icon: 'docs', href: '/copy-desk', gate: 'signed', module: 'copy-desk' },
+      // task 1003117 (R06 of goal 1000074): the Studio — artist mode, "a place an
+      // artist wants to be, not a form". Beside the copy desk (the artist's other
+      // surface), for the same reason both sit here and not in Docs (a place you
+      // ACT, not reference) or You (its subject is the product, not a person).
+      // gate 'signed' and NOT craft-gated: an artist is a craft, not a rank, so
+      // hiding the artist's own room behind the artist craft would hide it from
+      // the artist — the exact mistake copy-desk's comment above names. NO module
+      // gate: it degrades to reviews alone on an instance without copy-desk,
+      // rather than vanishing.
+      { id: 'studio', label: 'Studio', icon: 'studio', href: '/studio', gate: 'signed' },
     ] },
     // Your own numbers. task 2174 folded Achievements into Standing and this task
     // retires its nav entry; VIEW_ALIASES still routes #achievements here, so old
@@ -549,6 +563,21 @@
     else delete root.dataset.social;
   }
 
+  // task 1003117 (R06 of goal 1000074): EMPHASISE the Studio nav entry for a
+  // builder whose craft includes artist — the "emphasized entry for artist-craft
+  // builders" half of artist mode. Cosmetic only (the page is open to every rank,
+  // and the server enforces nothing on craft), and craft is not a rank, so it
+  // reads preferred_disciplines off /me rather than the access ladder. A warm
+  // entry is the world's own language: the accent marks the live thing, and for
+  // an artist that is their room.
+  function applyCraftEmphasis(builder) {
+    var el = document.getElementById('nav-studio');
+    if (!el) return;
+    var crafts = (builder && builder.preferred_disciplines) || [];
+    var isArtist = Array.isArray(crafts) && crafts.indexOf('artist') !== -1;
+    el.classList.toggle('nav-item--craft', isArtist);
+  }
+
   // applyAccess({ authed, rank, graduated, showWork, social }) — settle nav
   // visibility and the social mode.
   // Called by builders.js on the index (it owns /me there) and by the shell's own
@@ -560,7 +589,7 @@
       if ('graduated' in state) access.graduated = !!state.graduated;
       if ('showWork' in state) access.showWork = !!state.showWork;
       if ('social' in state) applySocial(state.social);
-      if (state.builder) renderUser(state.builder);
+      if (state.builder) { renderUser(state.builder); applyCraftEmphasis(state.builder); }
     }
     document.querySelectorAll('#app-sidebar [data-gate]').forEach(function (el) {
       var ok = gateAllows(el.dataset.gate);

package/modules/hall-ui/public/studio.css

@@ -0,0 +1,268 @@
+/* modules/hall-ui/public/studio.css — the Studio (artist mode), /builders/studio.
+   R06 of goal 1000074 (the artist's loop), task 1003117.
+
+   The criterion (artist-mode): "a place an artist wants to be, not a form. A
+   focus environment on the Cloud Bongos screen — a lofi-girl-style zen garden of
+   focus and creativity — rather than another table of rows." So this sheet is
+   deliberately NOT the oversight row archetype the copy desk rides. It is a calm
+   room: one thing to tend at a time, generous air, tonal separation, and one
+   slow ambient presence — the warm "lamp" that gives a lofi room its light.
+
+   THE ONE WARM THING RULE, kept (DESIGN.md): the salmon accent lights only what
+   is pressable (the primary action) or LIVE. The ambient lamp is the live thing
+   — a slow-breathing warm presence, the room's own light — and nothing else here
+   is warm: the eyebrows, the step numbers and the stones are ink, never accent.
+
+   Tokens only — no colour literals (tests/hall_audit.mjs §9 holds every hall
+   sheet to that), so every colour is a var() or a color-mix() of one, and both
+   modes come for free from style.css's tier. The mode marker html[data-artist]
+   is set on this page's <html> (the social-mode pattern, shell.js applySocial):
+   entering the studio IS entering the mode, so the calm reads off the attribute. */
+
+/* The room. Generous vertical air so the one focus sits in space, not in a list.
+   position:relative anchors the ambient layer below it. */
+.studio {
+  position: relative;
+  padding: clamp(28px, 6vh, 76px) 0 64px;
+}
+
+/* The ambient presence — the lamp. A single soft warm disc, low and slow, the
+   only atmosphere the room draws (the hall's --plate ground is a deferred seam,
+   owner's call, so nothing is painted into it here). overflow:hidden clips the
+   disc to the room so it can never widen the document (the no-sideways rule). */
+.studio-atmos {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+.studio-atmos::before {
+  content: "";
+  position: absolute;
+  top: -24%;
+  right: -10%;
+  width: min(680px, 82vw);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  animation: studio-lamp 38s ease-in-out infinite;
+}
+/* A second, cooler and fainter presence low-left, so the room has depth rather
+   than one lamp in a corner. --glass is the world's tonal wash token (translucent
+   ink on paper in light, translucent white on black in dark) — the sanctioned way
+   to lay a neutral wash that reads right in both modes, never a raw --ink mix into
+   transparent (which inverts; tests/hall_audit.mjs bans it). */
+.studio-atmos::after {
+  content: "";
+  position: absolute;
+  bottom: -30%;
+  left: -14%;
+  width: min(560px, 72vw);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--glass);
+  animation: studio-lamp 52s ease-in-out infinite reverse;
+}
+/* Long-period, transform/opacity only, and dead under the shell's global
+   reduced-motion kill switch (style.css) — the DESIGN.md rule for ambient loops. */
+@keyframes studio-lamp {
+  0%, 100% { transform: scale(1); opacity: .85; }
+  50% { transform: scale(1.08); opacity: 1; }
+}
+
+/* Everything the reader acts on sits above the lamp. */
+.studio-head,
+.studio-focus,
+.studio-rest { position: relative; z-index: 1; }
+
+/* The head: a mono eyebrow naming the mode, then the greeting as the display
+   voice (Manrope light, tight), then the live count as a quiet sub-line. */
+.studio-head { margin-bottom: clamp(22px, 4vh, 40px); max-width: var(--measure); }
+.studio-eyebrow {
+  margin: 0 0 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.studio-greet {
+  margin: 0 0 8px;
+  font-weight: 300;
+  font-size: clamp(28px, 4.4vw, 46px);
+  line-height: 1.04;
+  letter-spacing: -.028em;
+  color: var(--ink);
+}
+.studio-sub {
+  margin: 0;
+  font-size: 15.5px;
+  line-height: 1.5;
+  color: var(--ink-soft);
+}
+
+/* The focus — the one thing to tend now. Tone separates it from the room (the
+   v3 hall rule: a --bg-card panel at the full radius, no drawn edge), and it is
+   held to a reading width so it stays a card and not a banner. */
+.studio-focus {
+  max-width: 720px;
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  padding: clamp(22px, 3.2vw, 34px);
+}
+.studio-card__eyebrow {
+  margin: 0 0 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.studio-card__title {
+  margin: 0 0 14px;
+  font-weight: 300;
+  font-size: clamp(20px, 2.6vw, 26px);
+  line-height: 1.2;
+  letter-spacing: -.02em;
+  color: var(--ink);
+}
+/* The product's own words, shown as evidence for a flag — mono, wrapping
+   preserved (leading/trailing space is often exactly what is wrong), in a soft
+   tonal well so the quote reads as quotation, not as this room's own voice. */
+.studio-card__quote {
+  display: block;
+  margin: 0 0 16px;
+  padding: 12px 14px;
+  border-radius: var(--radius-sm);
+  background: var(--glass);
+  font-family: var(--font-mono);
+  font-size: 13.5px;
+  line-height: 1.5;
+  color: var(--ink);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.studio-card__context {
+  margin: 0 0 18px;
+  font-size: 14.5px;
+  line-height: 1.55;
+  color: var(--ink-soft);
+  max-width: var(--measure);
+}
+
+/* The two steps of a review (R04): coach the grader, then remake or tweak. Not
+   a checklist widget — a gentle reminder of the shape of the work, so the room
+   describes the craft without becoming the form the criterion warns against. */
+.studio-steps {
+  list-style: none;
+  margin: 0 0 20px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.studio-step {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+  font-size: 14.5px;
+  line-height: 1.5;
+  color: var(--ink);
+}
+.studio-step__n {
+  flex: none;
+  min-width: 16px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--ink-faint);
+}
+.studio-step small {
+  display: block;
+  margin-top: 2px;
+  font-size: 13px;
+  color: var(--ink-faint);
+}
+
+/* The one place the accent is spent on a control. Ghost is the calm pass —
+   "let it be for now" advances to the next piece without changing anything. */
+.studio-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+/* What else waits — a gentle line and a row of stones, one per remaining piece
+   (the zen garden), never a table. Non-interactive on purpose: the room asks the
+   reader to tend one thing, not to scan a queue. */
+.studio-rest {
+  margin-top: clamp(20px, 3.5vh, 34px);
+  max-width: 720px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+}
+.studio-rest__line {
+  margin: 0;
+  font-size: 13.5px;
+  color: var(--ink-faint);
+}
+.studio-stones {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 9px;
+  align-items: center;
+}
+.studio-stone {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: var(--ink-faint);
+}
+
+/* Where the full queues live — the calm room is the front door; the tables it
+   replaces stay one link away for when the reader wants the whole list. */
+.studio-links {
+  position: relative;
+  z-index: 1;
+  margin-top: clamp(26px, 4vh, 44px);
+  padding-top: 18px;
+  border-top: 1px solid var(--rule-soft);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 22px;
+  max-width: 720px;
+  font-size: 13.5px;
+  color: var(--ink-faint);
+}
+.studio-links a { color: var(--accent-ink); }
+
+/* The empty room — a good sign, said plainly, not a dead panel. */
+.studio-empty {
+  max-width: 720px;
+  background: var(--bg-card);
+  border-radius: var(--radius);
+  padding: clamp(24px, 3.4vw, 36px);
+}
+.studio-empty h2 {
+  margin: 0 0 8px;
+  font-weight: 300;
+  font-size: clamp(19px, 2.4vw, 24px);
+  letter-spacing: -.02em;
+  color: var(--ink);
+}
+.studio-empty p {
+  margin: 0;
+  font-size: 14.5px;
+  line-height: 1.55;
+  color: var(--ink-soft);
+  max-width: var(--measure);
+}
+
+/* Phone: the room keeps its air but the head and cards take the full width. */
+@media (max-width: 640px) {
+  .studio { padding-top: 20px; }
+  .studio-card__actions { gap: 8px; }
+}

package/modules/hall-ui/public/studio.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<!-- data-artist="on" is the studio's MODE marker (shell.js applySocial's pattern,
+     set here statically so entering the room IS entering the mode, with no paint
+     flash). It is the surface half of goal 1000074's argument: the artist's craft
+     gets its own place, not one more table on the engineer's screen. -->
+<html lang="en" data-artist="on">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Studio — {{worldName}}</title>
+  <meta name="description" content="Artist mode — a calm place to tend the words and art the project shows people, one piece at a time: the review that shipped, and the copy someone flagged.">
+  <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text x='16' y='24' font-size='24' text-anchor='middle' font-family='sans-serif'>⌂</text></svg>">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/studio.css">
+</head>
+<body data-page="studio" data-page-title="Studio">
+
+<div class="app">
+  <aside class="app-sidebar" id="app-sidebar" aria-label="Primary"></aside>
+  <div class="app-scrim" id="app-scrim" hidden></div>
+  <div class="app-body">
+    <header class="app-topbar" id="app-topbar"></header>
+    <div class="app-content">
+
+      <!-- The studio is a room, not a board, so it carries its OWN head voice
+           (a greeting in the display face) rather than the quiet .page-head--board
+           a working table uses. The static h1 is the no-JS / signed-out fallback;
+           studio.js rewrites it to "Good evening, <name>" once /me answers, and
+           fills the sub-line with what waits. It is the page's one <h1>. -->
+      <main id="hall-main" class="studio">
+        <div class="studio-atmos" aria-hidden="true"></div>
+
+        <header class="studio-head">
+          <p class="studio-eyebrow">artist mode</p>
+          <h1 class="studio-greet" id="studio-greet">The studio</h1>
+          <p class="studio-sub" id="studio-sub">A quiet place to tend the words and art the project shows people.</p>
+        </header>
+
+        <!-- The one thing to tend now. Rendered by studio.js; the markup here is
+             the loading state (and the no-JS fallback), never an empty panel. -->
+        <section class="studio-focus" id="studio-focus" aria-live="polite">
+          <div class="studio-empty">
+            <h2>Opening the studio…</h2>
+            <p>Gathering the reviews and flagged copy that wait for you.</p>
+          </div>
+        </section>
+
+        <!-- What else waits — the garden's remaining stones. Hidden until there
+             is more than the one in focus. -->
+        <div class="studio-rest" id="studio-rest" hidden></div>
+
+        <!-- The full tables the room replaces stay one link away, for when the
+             reader wants the whole list rather than one piece at a time. -->
+        <nav class="studio-links" aria-label="The full queues">
+          <a href="/builders/copy-desk">The copy desk — every flagged string</a>
+          <a href="/builders/work">The task board — all work</a>
+        </nav>
+      </main>
+
+      <footer class="app-foot" id="app-foot"></footer>
+    </div>
+  </div>
+</div>
+
+<div id="toast" class="toast" role="status" aria-live="polite" data-visible="0"></div>
+
+<script src="/builders/shell.js?v=2026-07-02-shell1"></script>
+<script src="/builders/palette.js" defer></script>
+<script src="/builders/dom-utils.js?v=2026-06-23-contrib"></script>
+<script src="/builders/studio.js?v=2026-09-04-studio1"></script>
+</body>
+</html>