@bongos/core 1.23.22 → 1.24.2

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

@@ -0,0 +1,193 @@
+/* modules/hall-ui/public/ai-studio.css — the studio's AI pages,
+   /builders/ai-studio (task 1004921, goal 1000136).
+
+   Built 1:1 on option C of the AI Studio options canvas, the owner's pick: the
+   three steps, the waiting page, the result with its request to change and
+   make again, and the balance. It rides studio.css: the room, its night and
+   day tokens (--st-*) and the glass action rows are the studio's own, and this
+   sheet spends only those tokens, never a colour of its own. Where it differs
+   from the canvas, and why, is in modules/hall-ui/records/ai-studio.md. */
+
+.ais-page { position: relative; z-index: 1; width: min(580px, 100%); display: flex; flex-direction: column; gap: 22px; }
+.ais[data-view="result"] .ais-page { width: 100%; }
+.ais-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+
+.ais-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+.ais-quiet, .ais-note { margin: 0; font-size: 17px; line-height: 1.5; color: var(--st-ink-soft); }
+.ais-soft { color: var(--st-ink-soft); }
+.ais-faint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--st-ink-faint); }
+.ais-dim { font-size: 13px; color: var(--st-ink-dim); white-space: nowrap; }
+.ais-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ais-wrap { white-space: normal; }
+.ais-head { font-family: var(--st-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink-faint); }
+.ais-back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; }
+.ais [data-head]:focus { outline: none; }
+.ais [data-head]:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 4px; }
+
+/* The step line: back, then "1 Pick ✓  2 Describe  3 Make". */
+.ais-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
+.ais-marks { margin-left: auto; display: flex; gap: 18px; font-size: 13px; }
+.ais-mark--done { color: var(--st-link); }
+.ais-mark--now { color: var(--st-ink); font-weight: 500; }
+.ais-mark--later { color: var(--st-ink-dim); }
+
+.ais-ask { margin: 20px 0 0; font-size: 44px; font-weight: 200; letter-spacing: -.03em; line-height: 1.1; color: var(--st-ink); }
+.ais-ask label { cursor: text; }
+
+/* Step 1: the drop zone and the one-line file rows. */
+.ais-drop {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+  min-height: 120px; padding: 16px; box-sizing: border-box; text-align: center;
+  border-radius: 18px; border: 1.5px dashed var(--st-rule); color: var(--st-ink-soft); font-size: 14px;
+}
+.ais-drop--over { border-color: var(--st-focus); background: var(--st-glass); }
+.ais-link {
+  display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; padding: 0; border: 0; background: none;
+  font: inherit; color: var(--st-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
+}
+.ais-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.ais-row {
+  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 18px; box-sizing: border-box;
+  border-radius: 16px; background: var(--st-glass); border: 1px solid var(--st-glass-edge); font-size: 14px; color: var(--st-ink);
+}
+.ais-row--summary { min-height: 56px; }
+.ais-thumb { flex: none; width: 28px; height: 28px; border-radius: 7px; object-fit: cover; background: var(--st-track); }
+.ais-thumb--pdf { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--st-link); }
+.ais-remove {
+  min-height: 24px; min-width: 24px; padding: 0 2px; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 13px; color: var(--st-ink-dim);
+}
+.ais-remove:hover { color: var(--st-ink); }
+.ais-err-inline { font-size: 13px; color: var(--st-danger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
+
+/* Buttons: the studio's accent pill and its quiet ghost. */
+.ais-go { display: flex; align-items: center; gap: 16px; }
+.ais-go--wrap { flex-wrap: wrap; gap: 10px; }
+.ais-btn {
+  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border-radius: 999px;
+  border: 0; background: var(--st-accent); color: var(--st-on-accent); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
+}
+.ais-btn:disabled { opacity: .5; cursor: default; }
+.ais-ghost {
+  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 999px;
+  border: 0; background: var(--st-close); color: var(--st-ink); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
+}
+.ais a.ais-ghost:hover { color: var(--st-ink); border-color: var(--st-focus); }
+.ais-btn:focus-visible, .ais-ghost:focus-visible, .ais-link:focus-visible, .ais-remove:focus-visible,
+.ais-chip:focus-visible, .ais-pick:focus-visible, .ais-back:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 3px; }
+
+/* Step 2: the request box (also the result's "Your request"). */
+.ais-field {
+  width: 100%; box-sizing: border-box; min-height: 96px; padding: 16px 18px; resize: vertical;
+  border-radius: 18px; background: var(--st-glass); border: 1px solid var(--st-panel-edge);
+  color: var(--st-ink); font: inherit; font-size: 15px; line-height: 1.5; font-weight: 300;
+}
+.ais-field--tall { min-height: 160px; font-size: 16px; }
+.ais-field::placeholder { color: var(--st-ink-dim); }
+.ais-field:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }
+
+/* Step 3: the two pay cards, the studio's glass action rows made tall. */
+.ais-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.ais .ais-card { min-height: 150px; justify-content: flex-start; padding-top: 22px; font: inherit; }
+.ais .ais-card--ours { background: var(--st-glass); border-color: var(--st-glass-edge); }
+.ais .ais-card:disabled { opacity: .55; cursor: default; }
+.ais .ais-card[aria-busy="true"] { border-color: var(--st-focus); }
+.ais-card__line { font-size: 13.5px; line-height: 1.45; color: var(--st-ink-soft); }
+.ais-card__foot { margin-top: 10px; font-size: 13px; color: var(--st-ink-dim); }
+
+.ais-err { margin: 0; font-size: 14px; line-height: 1.5; color: var(--st-danger); }
+.ais-err[hidden] { display: none; }
+
+/* The waiting page: the clock, the three lines, and the lamp turned up. */
+.ais-wait { margin-top: 70px; display: flex; flex-direction: column; gap: 18px; }
+.ais-clock { margin: 0; font-family: var(--st-mono); font-size: 56px; font-weight: 200; letter-spacing: -.03em; line-height: 1; color: var(--st-ink); font-variant-numeric: tabular-nums; }
+.ais-wait > .ais-soft { margin: -10px 0 0; }
+.ais-checks { list-style: none; margin: 0; padding: 0; width: min(420px, 100%); }
+.ais-check { display: flex; align-items: center; gap: 12px; min-height: 40px; border-top: 1px solid var(--st-track); font-size: 14px; color: var(--st-ink); }
+.ais-check:first-child { border-top: 0; }
+.ais-check__mark { width: 22px; flex: none; color: var(--st-link); }
+.ais-check--now .ais-check__mark::before {
+  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+  background: var(--st-accent); box-shadow: 0 0 0 4px var(--st-resume);
+}
+.ais-check--later { color: var(--st-ink-dim); }
+/* By day the room's lamp is off; while a request runs it is on in either sky,
+   so "the lamp stays on until it's done" holds at noon too. */
+.ais[data-making="on"] .st-glow { opacity: 1; transform: scale(1.35); background: radial-gradient(circle, var(--st-glow) 0%, var(--st-glow) 20%, var(--st-glow-out) 65%); }
+.ais[data-making="on"] .st-lamp-shade { box-shadow: 0 18px 40px var(--st-glow); }
+
+/* The result: the picture on the left, the words, the request and the receipt
+   on the right. The canvas draws it over the bare floor, so the window steps
+   back. */
+.ais[data-view="result"] .st-window,
+.ais[data-view="result"] .st-glow,
+.ais[data-view="result"] .st-lamp-stem,
+.ais[data-view="result"] .st-lamp-shade,
+.ais[data-view="result"] .st-mug,
+.ais[data-view="result"] .st-leaf { display: none; }
+.ais-result { display: flex; gap: 40px; align-items: flex-start; }
+.ais-result__art { width: min(640px, 55%); flex: none; display: flex; flex-direction: column; gap: 12px; }
+.ais-result__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 44px; }
+.ais-big { display: block; width: 100%; height: 520px; object-fit: cover; border-radius: 16px; background: var(--st-track); }
+.ais-big--none { display: flex; align-items: center; justify-content: center; height: 240px; background: var(--st-glass); border: 1px solid var(--st-glass-edge); box-sizing: border-box; }
+.ais-thumbs { display: flex; align-items: center; gap: 10px; }
+.ais-pick { width: 96px; height: 64px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; }
+.ais-pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.ais-pick--on { outline: 2px solid var(--st-accent); outline-offset: 0; }
+.ais-reply p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--st-ink-sub); font-weight: 300; }
+.ais-reply b { color: var(--st-ink); font-weight: 500; }
+.ais-again { display: flex; flex-direction: column; gap: 8px; }
+.ais-receipt, .ais-topup {
+  display: flex; flex-direction: column; padding: 10px 20px; border-radius: 22px;
+  background: var(--st-glass); border: 1px solid var(--st-glass-edge);
+}
+.ais-line { display: flex; align-items: center; gap: 14px; min-height: 40px; border-top: 1px solid var(--st-track); font-size: 14px; color: var(--st-ink); }
+.ais-line:first-child, .ais-head + .ais-line { border-top: 0; }
+.ais-line a { color: var(--st-link); display: inline-flex; align-items: center; min-height: 24px; }
+
+/* The balance. */
+.ais-balance { display: flex; flex-direction: column; gap: 24px; margin-top: 20px; }
+.ais-figure { margin: 0; display: flex; align-items: baseline; gap: 16px; font-weight: 400; font-size: 17px; }
+.ais-big-num { font-family: var(--st-mono); font-size: 56px; font-weight: 200; letter-spacing: -.03em; line-height: 1; color: var(--st-ink); font-variant-numeric: tabular-nums; }
+.ais-topup { gap: 10px; padding: 18px 20px; background: none; border: 0; padding-left: 0; padding-right: 0; }
+.ais-chips { display: flex; gap: 8px; flex-wrap: wrap; }
+.ais-chip {
+  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--st-chip-edge); background: none; color: var(--st-ink); font: inherit; font-size: 13.5px;
+}
+.ais-chip[aria-pressed="true"] { background: var(--st-resume); border-color: var(--st-resume-edge); }
+.ais-other { display: flex; align-items: center; gap: 12px; }
+.ais-other input {
+  width: 120px; height: 40px; padding: 0 12px; box-sizing: border-box; border-radius: 12px;
+  border: 1px solid var(--st-panel-edge); background: var(--st-glass); color: var(--st-ink); font: inherit;
+}
+.ais-ledger { display: flex; flex-direction: column; margin-top: 8px; }
+.ais-ledger > .ais-head { margin-bottom: 4px; }
+.ais-all { display: flex; flex-direction: column; }
+.ais-date { width: 64px; flex: none; font-family: var(--st-mono); font-size: 12px; color: var(--st-ink-dim); }
+.ais-detail { white-space: nowrap; font-size: 12.5px; }
+.ais-num { font-family: var(--st-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ais-tone-ok { color: var(--st-link); }
+.ais-tone-dim { color: var(--st-ink-dim); }
+
+@media (max-width: 1100px) {
+  .ais-result { flex-direction: column; gap: 20px; }
+  .ais-result__art { width: 100%; }
+  .ais-result__words { padding-top: 0; width: 100%; }
+}
+/* On a phone the studio scales its window into the top right and stands the
+   desk on the floor at the bottom; the words start below the window and end
+   above the plant, so no line is read over the drawing. */
+@media (max-width: 760px) {
+  .studio.ais { padding-bottom: 240px; }
+  .ais-page { gap: 18px; }
+  .ais-ask { margin-top: 196px; font-size: 32px; }
+  .ais-marks { margin-left: 0; width: 100%; gap: 14px; }
+  .ais-cards { grid-template-columns: minmax(0, 1fr); }
+  .ais .ais-card { min-height: 120px; }
+  .ais-wait { margin-top: 210px; }
+  .ais-balance { margin-top: 210px; }
+  .ais-big { height: auto; aspect-ratio: 4 / 3; }
+  .ais-detail { display: none; }
+  .ais-err-inline { max-width: 40%; }
+}

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

@@ -0,0 +1,98 @@
+<!doctype html>
+<!-- data-artist="on": the studio's mode marker, as on studio.html. These pages
+     are rooms of the studio, so entering them is still entering the mode. -->
+<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="Make something with AI in the studio: bring sketches, pictures or a PDF, say what you want, and get an answer and pictures back.">
+  <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="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
+  <link rel="stylesheet" href="/builders/studio.css?v=2026-10-09-day">
+  <link rel="stylesheet" href="/builders/ai-studio.css?v=2026-10-29-ais1">
+</head>
+<!-- THE STUDIO'S AI PAGES (task 1004921, goal 1000136; ADR 0392). Built 1:1 on
+     the owner's pick, option C of the AI Studio options canvas ("Three steps:
+     pick, describe, make"), plus the owner's addition: the results page lets
+     the request be changed and made again. One page, four views, each a FULL
+     page in the studio's own room (never a dialog):
+       ?step=pick|describe|make   the three steps
+       ?request=N                 the waiting page, then the result
+       ?view=balance              what is left, add money, every charge
+     data-page="ai-studio" is the page's own id (page-inventory.js); studio.css
+     names it beside "studio" on the room's rules, so the room, its tokens and
+     its two skies apply unchanged. The words and rules are
+     ai-studio-lib.js; the record is modules/hall-ui/records/ai-studio.md. A key
+     is NEVER asked for here: it is entered only in Settings. -->
+<body data-page="ai-studio" data-page-title="Studio" data-fullscreen-switch>
+
+<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">
+
+      <main id="hall-main" class="studio ais" data-view="step">
+        <!-- The studio's room, drawn as studio.html draws it. -->
+        <div class="st-room" aria-hidden="true">
+          <div class="st-window">
+            <span class="st-moon"></span>
+            <span class="st-star st-star--1"></span>
+            <span class="st-star st-star--2"></span>
+            <span class="st-star st-star--3"></span>
+            <span class="st-star st-star--4"></span>
+            <span class="st-star st-star--5"></span>
+            <span class="st-cloud st-cloud--1"></span>
+            <span class="st-cloud st-cloud--2"></span>
+            <span class="st-tower st-tower--1"></span>
+            <span class="st-tower st-tower--2"></span>
+            <span class="st-tower st-tower--3"></span>
+            <span class="st-tower st-tower--4"></span>
+            <span class="st-tower st-tower--5"></span>
+            <span class="st-light st-light--1"></span>
+            <span class="st-light st-light--2"></span>
+            <span class="st-light st-light--3"></span>
+            <span class="st-light st-light--4"></span>
+            <span class="st-light st-light--5"></span>
+            <span class="st-light st-light--6"></span>
+            <span class="st-light st-light--7"></span>
+            <span class="st-mullion"></span>
+          </div>
+          <div class="st-floor"></div>
+          <div class="st-sunpatch"></div>
+          <div class="st-glow"></div>
+          <div class="st-lamp-stem"></div>
+          <div class="st-lamp-shade"></div>
+          <div class="st-mug"></div>
+          <div class="st-leaf st-leaf--1"></div>
+          <div class="st-leaf st-leaf--2"></div>
+        </div>
+
+        <!-- The view, painted by ai-studio.js. The page's one <h1> is each
+             view's own question or figure. -->
+        <div class="ais-page" id="ais-page">
+          <p class="ais-quiet">Opening…</p>
+        </div>
+        <input type="file" id="ais-file" class="ais-file" multiple accept="image/png,image/jpeg,image/gif,image/webp,application/pdf" tabindex="-1" aria-hidden="true">
+      </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/dom-utils.js?v=2026-10-25-escape"></script>
+<script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
+<script src="/builders/craft-mode.js?v=2026-10-09-living3"></script>
+<script src="/builders/shell.js?v=2026-10-25-escape"></script>
+<script src="/builders/palette.js" defer></script>
+<script src="/builders/tweak-editor-lib.js?v=2026-09-28-tw23"></script>
+<script src="/builders/studio-lib.js?v=2026-10-09-day"></script>
+<script src="/builders/ai-studio-lib.js?v=2026-10-29-ais1"></script>
+<script src="/builders/ai-studio.js?v=2026-10-29-ais1"></script>
+</body>
+</html>