@homie-rocks/studio 0.48.4 → 0.50.0

package/CHANGELOG.md

@@ -17,6 +17,52 @@ To bring a studio up to date, tell Claude: "Upgrade my studio to the newest Homi
 `npx -y @homie-rocks/studio@latest upgrade`, which shows what's new since the version your studio pins (from this
 file) and what the upgrade would change, and changes nothing until you agree.
 
+## [0.50.0] - 2026-10-13
+
+**Plugin 0.50.0** · Build the person's app from their dream.
+
+Apps now follow their owner’s words through planning, a living scene and evidence of each need.
+
+### Added
+
+- Apps use the shared Codex planning page: their own words, pictured scene, people, offers and demonstrable needs. A plan can precede app plumbing and survives creation.
+- Opt-in app checks run the Codex's real UI flows and attach wall/phone captures to each need; the Codex shows their status. Existing apps without an executable needs block retain their checks.
+- App checkout accepts a reference to a booking, ticket or gift. Verified paid events include that reference, the app and order ID, including reopened Payment Links.
+
+### Changed
+
+- App making and playtesting follow the person's needs, living scene, records and individual customer journey. Starters are plumbing. The packaged toolkit includes shared planning, style, media and playtest guides.
+- Scaffold and app creation direct the AI through that path with the same engines and shared parts available to games. No new studio caps or defaults.
+
+### Upgrade notes
+
+- Existing apps and games keep their behavior. Add the executable needs block to an app Codex to opt into needs evidence; omitted payment references remain null. The new migration updates only the paid-event payload.
+
+## [0.49.0] - 2026-10-13
+
+**Plugin 0.49.0** · Apps from the first request.
+
+Businesses and causes can start, check and preview their first live app without hand fixes.
+
+### Added
+
+- Business and cause scaffolds, gathering, quiz, service-request and giving app starters; custom pages and Shop in the header.
+- Giving preset with the organisation’s currency, suggested one-time and monthly Stripe Payment Links, and organisation-supplied receipt wording.
+- Local shop preview before Stripe is connected, and a visible fallback when WebGL is unavailable.
+
+### Fixed
+
+- Fresh app installs include Three.js types; strict builds need no hand-installed dependencies.
+- App text checks wait for visual readiness, prove wall/two-phone actions and reconnect, and leave receipts visible to deployment hooks.
+- Deployment command parsing excludes quoted documentation and heredocs; Codex exec user events retain task authorization.
+- Starter words and blurb reach the wall. Busy local dev ports select and print a free port.
+- App setup, paths, guides and parts messages use app wording. Grok setup explains trust through the AI.
+- Updated Agents/MCP dependencies and Wrangler to resolve the reported audit advisories.
+
+### Upgrade notes
+
+Existing studios and games keep their authored files and policies. New app starters are opt-in. Calendar capacity and booking availability are planned next; service starters collect requests, not confirmed reservations.
+
 ## [0.48.4] - 2026-10-13
 
 **Plugin 0.48.4** · Deploys go right.

package/app-starters/gathering/README.md

@@ -0,0 +1,4 @@
+# Gather together
+
+Edit app.json words and starter settings. Phone: /<id>/open; wall: /<id>/tv. A site/pages/<id>/index.html replaces only the landing. Records are public; use references, never private contact details. Staff updates require an account grant.
+

package/app-starters/gathering/app.json

@@ -0,0 +1,162 @@
+{
+  "id": "gathering",
+  "name": "Gather together",
+  "blurb": "Check in, choose a task, and let the team know you are here.",
+  "entry": "src/view.ts",
+  "roles": {
+    "customer": {
+      "signIn": false,
+      "can": [
+        "read:entries",
+        "create:entries"
+      ]
+    },
+    "wall": {
+      "signIn": false,
+      "can": [
+        "read:entries"
+      ]
+    },
+    "staff": {
+      "signIn": true,
+      "can": [
+        "read:entries",
+        "update:entries",
+        "delete:entries"
+      ]
+    }
+  },
+  "surfaces": {
+    "phone": "customer",
+    "wall": "wall",
+    "kiosk": "customer",
+    "tablet": "staff"
+  },
+  "words": {
+    "open": "Open",
+    "join": "Scan to join",
+    "one": "person",
+    "many": "people",
+    "action": "Check in",
+    "total": "Check-ins",
+    "choice": "Choose an option",
+    "monthly": "Gift frequency",
+    "once": "One time",
+    "month": "Monthly",
+    "give": "Give securely on Stripe",
+    "goal": "Intention goal \u00b7 not payments received",
+    "prompt": "Choose what works for you.",
+    "finished": "All three answers are in. Thank you!",
+    "complete": "Mark complete",
+    "done": "Complete",
+    "pending": "Checked in",
+    "thanks": "Thank you \u2014 the wall is up to date.",
+    "live": "Together \u00b7 live",
+    "reconnecting": "Reconnecting\u2026"
+  },
+  "records": {
+    "persist": true,
+    "collections": {
+      "entries": {
+        "fields": {
+          "choice": {
+            "type": "string",
+            "required": true,
+            "maxLength": 100
+          },
+          "status": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60
+          },
+          "amount": {
+            "type": "number",
+            "required": true
+          },
+          "monthly": {
+            "type": "boolean",
+            "required": true
+          }
+        }
+      }
+    }
+  },
+  "parts": [],
+  "netplay": {
+    "v": 1,
+    "public": true,
+    "version": "1",
+    "params": [
+      "role",
+      "surface",
+      "ticket"
+    ]
+  },
+  "playerCard": false,
+  "chat": false,
+  "agents": {
+    "vote": false
+  },
+  "watch": "overview",
+  "screen": {
+    "join": "bottom-right",
+    "share": "top-right"
+  },
+  "needs": {
+    "three": "0.185.1",
+    "@homie-rocks/camera": "0.2.1",
+    "@homie-rocks/geom": "0.1.1",
+    "@types/three": "0.185.1"
+  },
+  "check": {
+    "action": "[data-action]",
+    "observe": "[data-count]"
+  },
+  "landing": {
+    "pitch": "Check in, choose a task, and let the team know you are here."
+  },
+  "room": {
+    "host": "server"
+  },
+  "players": {
+    "min": 1,
+    "max": 32
+  },
+  "starter": {
+    "kind": "gathering",
+    "choices": [
+      "Welcome desk",
+      "Packing",
+      "Deliveries"
+    ],
+    "color": "#184b43",
+    "currency": "CAD",
+    "goal": 2500,
+    "questions": [
+      {
+        "text": "Which planet is called the red planet?",
+        "choices": [
+          "Venus",
+          "Mars",
+          "Jupiter"
+        ]
+      },
+      {
+        "text": "How many sides does a hexagon have?",
+        "choices": [
+          "5",
+          "6",
+          "8"
+        ]
+      },
+      {
+        "text": "Which is a mammal?",
+        "choices": [
+          "Dolphin",
+          "Trout",
+          "Octopus"
+        ]
+      }
+    ]
+  }
+}

package/app-starters/gathering/index.html

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Live together</title><style>
+*{box-sizing:border-box}body{margin:0;background:var(--tone,#183b55);color:#fff7df;font-family:system-ui,sans-serif}main{min-height:100svh;padding:clamp(24px,5vw,64px);display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}h1{font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-.05em;margin:20px 0}p{line-height:1.6;max-width:40em}#connection{font-size:12px;text-transform:uppercase;letter-spacing:.18em}.panel{background:#fff7df;color:#20352e;border-radius:28px;padding:28px;box-shadow:0 30px 80px #0003}#count{font-size:80px;font-weight:800;line-height:1}ul{padding:0;list-style:none}li{padding:12px 0;border-bottom:1px solid #20352e22}button,select,a{font:inherit;min-height:48px;border-radius:12px}button,select{padding:10px 16px;width:100%;margin-top:8px}button{background:var(--tone);color:#fff7df;border:0;cursor:pointer}button:disabled{opacity:.5}a{display:inline-flex;align-items:center;color:inherit}label{display:block;margin-top:14px}select{background:white;color:#20352e;border:1px solid #20352e66}progress{width:100%;height:22px;accent-color:var(--tone)}#status{min-height:24px}#amount{font-size:40px;font-weight:700}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #df9325;outline-offset:4px}.wall #controls{display:none}#giving-link[hidden],[hidden]{display:none!important}@media(max-width:650px){main{display:block;padding:72px 22px 24px}h1{font-size:46px}.panel{margin-top:24px;padding:22px}#count{font-size:58px}li{font-size:14px}}@media(max-height:520px) and (min-width:651px){main{padding:65px 25px 20px;gap:22px}h1{font-size:38px}.panel{padding:18px}}
+</style><main><header><span id="connection"></span><h1></h1><p id="intro"></p><div id="goal"><p id="goal-label"></p><div><span id="amount"></span> / <span id="target"></span></div><progress></progress></div><ul id="entries" aria-live="polite"></ul></header><section class="panel"><div id="label"></div><div id="count" data-count>0</div><div id="controls"><p id="prompt"></p><label><span id="choice-label"></span><select id="choice"></select></label><label id="frequency"><span id="frequency-label"></span><select id="monthly"><option id="once" value="once"></option><option id="month" value="month"></option></select></label><button data-action></button><a id="giving-link" href="/shop/" target="_blank" rel="noopener"></a></div><p id="status" role="status"></p></section></main><script type="module" src="./assets/main.js"></script></html>

package/app-starters/gathering/map/main.json

@@ -0,0 +1 @@
+{"bounds":{"min":[-1,-1],"max":[1,1]},"boxes":[],"spots":{"start":[[0,0]]}}

package/app-starters/gathering/src/move.ts

@@ -0,0 +1,3 @@
+// The current rules contract requires a move for a participant, even without an avatar.
+import { defineMove } from '@homie-rocks/studio/rules';
+export const move = defineMove({ participant() {} });

package/app-starters/gathering/src/rules.ts

@@ -0,0 +1,21 @@
+// Transient scene truth lives in the room; authorized queue records live in AppRecords.
+// A phone has a logical stationary seat anchor. The wall watches without a seat.
+import { defineRules, f } from '@homie-rocks/studio/rules';
+import { move } from './move';
+export default defineRules({
+  contract: 2, space: { dims: 2 }, move,
+  shared: { revision: f.u32() },
+  shapes: { events: { refresh: {} }, commands: { refresh: {} }, effects: { refresh: {} } },
+  entities: {
+    participant: {
+      player: true,
+      body: { shape: 'circle', radius: 0.1, maxSpeed: 0 },
+      commands: { refresh(world, self) { world.sendRoom('refresh', {}); } },
+    },
+  },
+  room: {
+    rounds: { seconds: 0, breakSeconds: 0 }, bots: { keep: 0 },
+    join() { return { kind: 'participant', at: { x: 0, y: 0 } }; },
+    on: { refresh(world) { world.shared.revision += 1; world.emit('refresh', { x: 0, y: 0 }, {}); } },
+  },
+});

package/app-starters/gathering/src/view.ts

@@ -0,0 +1,74 @@
+import app from '../app.json';
+import { openRoom } from '@homie-rocks/studio/rules/view';
+import type rules from './rules';
+import { createAppRecords, type AppRecord } from '@homie-rocks/studio/apps';
+import { randomId } from '@homie-rocks/studio/links';
+type Entry = { choice: string; status: string; amount: number; monthly: boolean };
+const room = openRoom<typeof rules>();
+const net = room.net;
+const role = net.params.role ?? 'customer';
+const words: Record<string, string> = app.words;
+const config = app.starter;
+const $ = <T extends HTMLElement = HTMLElement>(s: string) => document.querySelector<T>(s)!;
+const records = createAppRecords<Entry>({ collection: 'entries' });
+let rows: AppRecord<Entry>[] = [], busy = false, ready = false, question = 0;
+const action = $<HTMLButtonElement>('[data-action]');
+document.body.className = role;
+document.body.style.setProperty('--tone', config.color);
+$('h1').textContent = app.name; $('#intro').textContent = app.blurb;
+$('#label').textContent = words.total; action.textContent = words.action;
+$('#choice-label').textContent = words.choice;
+$('#frequency-label').textContent = words.monthly;
+$('#once').textContent = words.once; $('#month').textContent = words.month;
+$('#giving-link').textContent = words.give;
+$('#giving-link').hidden = config.kind !== 'giving';
+$('#frequency').hidden = config.kind !== 'giving';
+$('#goal').hidden = config.kind !== 'giving';
+$('#controls').hidden = role === 'wall';
+const select = $<HTMLSelectElement>('#choice');
+function choices() {
+ select.replaceChildren();
+ const list = config.kind === 'quiz' ? config.questions[question]?.choices ?? [] : config.choices;
+ for (const value of list) { const option = document.createElement('option'); option.value = value; option.textContent = value; select.append(option); }
+ $('#prompt').textContent = config.kind === 'quiz' ? config.questions[question]?.text ?? words.finished : words.prompt;
+ action.hidden = config.kind === 'quiz' && question >= config.questions.length;
+}
+choices();
+function paint() {
+ $('[data-count]').textContent = String(rows.length);
+ const amount = rows.reduce((n, r) => n + r.data.amount, 0);
+ $('#amount').textContent = new Intl.NumberFormat(undefined, { style: 'currency', currency: config.currency }).format(amount);
+ $('#target').textContent = new Intl.NumberFormat(undefined, { style: 'currency', currency: config.currency }).format(config.goal);
+ $<HTMLProgressElement>('progress').max = config.goal; $<HTMLProgressElement>('progress').value = amount;
+ $('#goal-label').textContent = words.goal;
+ action.disabled = busy || !ready;
+ $('#entries').replaceChildren();
+ for (const row of rows.slice(-6).reverse()) {
+  const li = document.createElement('li');
+  li.textContent = `${row.data.choice} · ${row.data.status}${row.data.monthly ? ' · ' + words.month : ''}`;
+  if (role === 'staff' && row.data.status !== words.done) {
+   const button = document.createElement('button'); button.textContent = words.complete;
+   button.onclick = () => { void records.update(row, { ...row.data, status: words.done }).then(refresh).catch(e => { $('#status').textContent = e.message; }); }; li.append(button);
+  }
+  $('#entries').append(li);
+ }
+}
+async function refresh() {
+ try { rows = await records.list(); ready = true; paint(); net.playable(); }
+ catch (error) { $('#status').textContent = (error as Error).message; }
+}
+action.onclick = async () => {
+ busy = true; paint();
+ try {
+  const choice = select.value;
+  await records.create({ choice: config.kind === 'quiz' ? `${question + 1}. ${choice}` : choice, status: words.pending, amount: config.kind === 'giving' ? Number(choice) : 0, monthly: $<HTMLSelectElement>('#monthly').value === 'month' }, randomId());
+  $('#status').textContent = words.thanks;
+  if (config.kind === 'quiz') { question++; choices(); }
+  room.command('refresh', {}); await refresh();
+ } catch (error) { $('#status').textContent = (error as Error).message; }
+ finally { busy = false; paint(); }
+};
+room.on('refresh', () => { void refresh(); });
+net.on('link', () => { void refresh(); });
+setInterval(() => { $('#connection').textContent = net.link === 'online' ? words.live : words.reconnecting; void refresh(); }, 2000);
+void refresh();

package/app-starters/giving/README.md

@@ -0,0 +1,5 @@
+# Together we can
+
+Edit app.json words and starter settings. Phone: /<id>/open; wall: /<id>/tv. A site/pages/<id>/index.html replaces only the landing. Records are public; use references, never private contact details. Staff updates require an account grant.
+
+Giving totals are public intentions, not received money. The gift link opens the studio shop. Use `shop init --giving --currency CAD` and connect the organisation’s Stripe account. Monthly renewals are managed in Stripe.

package/app-starters/giving/app.json

@@ -0,0 +1,162 @@
+{
+  "id": "giving",
+  "name": "Together we can",
+  "blurb": "Support our goal with a one-time or monthly gift. Intentions below are not payments.",
+  "entry": "src/view.ts",
+  "roles": {
+    "customer": {
+      "signIn": false,
+      "can": [
+        "read:entries",
+        "create:entries"
+      ]
+    },
+    "wall": {
+      "signIn": false,
+      "can": [
+        "read:entries"
+      ]
+    },
+    "staff": {
+      "signIn": true,
+      "can": [
+        "read:entries",
+        "update:entries",
+        "delete:entries"
+      ]
+    }
+  },
+  "surfaces": {
+    "phone": "customer",
+    "wall": "wall",
+    "kiosk": "customer",
+    "tablet": "staff"
+  },
+  "words": {
+    "open": "Open",
+    "join": "Scan to join",
+    "one": "person",
+    "many": "people",
+    "action": "Record my intention",
+    "total": "Giving intentions",
+    "choice": "Choose an option",
+    "monthly": "Gift frequency",
+    "once": "One time",
+    "month": "Monthly",
+    "give": "Give securely on Stripe",
+    "goal": "Intention goal \u00b7 not payments received",
+    "prompt": "Choose what works for you.",
+    "finished": "All three answers are in. Thank you!",
+    "complete": "Mark complete",
+    "done": "Complete",
+    "pending": "Recorded",
+    "thanks": "Thank you \u2014 the wall is up to date.",
+    "live": "Together \u00b7 live",
+    "reconnecting": "Reconnecting\u2026"
+  },
+  "records": {
+    "persist": true,
+    "collections": {
+      "entries": {
+        "fields": {
+          "choice": {
+            "type": "string",
+            "required": true,
+            "maxLength": 100
+          },
+          "status": {
+            "type": "string",
+            "required": true,
+            "maxLength": 60
+          },
+          "amount": {
+            "type": "number",
+            "required": true
+          },
+          "monthly": {
+            "type": "boolean",
+            "required": true
+          }
+        }
+      }
+    }
+  },
+  "parts": [],
+  "netplay": {
+    "v": 1,
+    "public": true,
+    "version": "1",
+    "params": [
+      "role",
+      "surface",
+      "ticket"
+    ]
+  },
+  "playerCard": false,
+  "chat": false,
+  "agents": {
+    "vote": false
+  },
+  "watch": "overview",
+  "screen": {
+    "join": "bottom-right",
+    "share": "top-right"
+  },
+  "needs": {
+    "three": "0.185.1",
+    "@homie-rocks/camera": "0.2.1",
+    "@homie-rocks/geom": "0.1.1",
+    "@types/three": "0.185.1"
+  },
+  "check": {
+    "action": "[data-action]",
+    "observe": "[data-count]"
+  },
+  "landing": {
+    "pitch": "Support our goal with a one-time or monthly gift. Intentions below are not payments."
+  },
+  "room": {
+    "host": "server"
+  },
+  "players": {
+    "min": 1,
+    "max": 32
+  },
+  "starter": {
+    "kind": "giving",
+    "choices": [
+      "10",
+      "25",
+      "50"
+    ],
+    "color": "#354d2e",
+    "currency": "CAD",
+    "goal": 2500,
+    "questions": [
+      {
+        "text": "Which planet is called the red planet?",
+        "choices": [
+          "Venus",
+          "Mars",
+          "Jupiter"
+        ]
+      },
+      {
+        "text": "How many sides does a hexagon have?",
+        "choices": [
+          "5",
+          "6",
+          "8"
+        ]
+      },
+      {
+        "text": "Which is a mammal?",
+        "choices": [
+          "Dolphin",
+          "Trout",
+          "Octopus"
+        ]
+      }
+    ]
+  }
+}

package/app-starters/giving/index.html

@@ -0,0 +1,3 @@
+<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Live together</title><style>
+*{box-sizing:border-box}body{margin:0;background:var(--tone,#183b55);color:#fff7df;font-family:system-ui,sans-serif}main{min-height:100svh;padding:clamp(24px,5vw,64px);display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}h1{font-size:clamp(44px,6vw,88px);line-height:1;letter-spacing:-.05em;margin:20px 0}p{line-height:1.6;max-width:40em}#connection{font-size:12px;text-transform:uppercase;letter-spacing:.18em}.panel{background:#fff7df;color:#20352e;border-radius:28px;padding:28px;box-shadow:0 30px 80px #0003}#count{font-size:80px;font-weight:800;line-height:1}ul{padding:0;list-style:none}li{padding:12px 0;border-bottom:1px solid #20352e22}button,select,a{font:inherit;min-height:48px;border-radius:12px}button,select{padding:10px 16px;width:100%;margin-top:8px}button{background:var(--tone);color:#fff7df;border:0;cursor:pointer}button:disabled{opacity:.5}a{display:inline-flex;align-items:center;color:inherit}label{display:block;margin-top:14px}select{background:white;color:#20352e;border:1px solid #20352e66}progress{width:100%;height:22px;accent-color:var(--tone)}#status{min-height:24px}#amount{font-size:40px;font-weight:700}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #df9325;outline-offset:4px}.wall #controls{display:none}#giving-link[hidden],[hidden]{display:none!important}@media(max-width:650px){main{display:block;padding:72px 22px 24px}h1{font-size:46px}.panel{margin-top:24px;padding:22px}#count{font-size:58px}li{font-size:14px}}@media(max-height:520px) and (min-width:651px){main{padding:65px 25px 20px;gap:22px}h1{font-size:38px}.panel{padding:18px}}
+</style><main><header><span id="connection"></span><h1></h1><p id="intro"></p><div id="goal"><p id="goal-label"></p><div><span id="amount"></span> / <span id="target"></span></div><progress></progress></div><ul id="entries" aria-live="polite"></ul></header><section class="panel"><div id="label"></div><div id="count" data-count>0</div><div id="controls"><p id="prompt"></p><label><span id="choice-label"></span><select id="choice"></select></label><label id="frequency"><span id="frequency-label"></span><select id="monthly"><option id="once" value="once"></option><option id="month" value="month"></option></select></label><button data-action></button><a id="giving-link" href="/shop/" target="_blank" rel="noopener"></a></div><p id="status" role="status"></p></section></main><script type="module" src="./assets/main.js"></script></html>

package/app-starters/giving/map/main.json

@@ -0,0 +1 @@
+{"bounds":{"min":[-1,-1],"max":[1,1]},"boxes":[],"spots":{"start":[[0,0]]}}

package/app-starters/giving/src/move.ts

@@ -0,0 +1,3 @@
+// The current rules contract requires a move for a participant, even without an avatar.
+import { defineMove } from '@homie-rocks/studio/rules';
+export const move = defineMove({ participant() {} });

package/app-starters/giving/src/rules.ts

@@ -0,0 +1,21 @@
+// Transient scene truth lives in the room; authorized queue records live in AppRecords.
+// A phone has a logical stationary seat anchor. The wall watches without a seat.
+import { defineRules, f } from '@homie-rocks/studio/rules';
+import { move } from './move';
+export default defineRules({
+  contract: 2, space: { dims: 2 }, move,
+  shared: { revision: f.u32() },
+  shapes: { events: { refresh: {} }, commands: { refresh: {} }, effects: { refresh: {} } },
+  entities: {
+    participant: {
+      player: true,
+      body: { shape: 'circle', radius: 0.1, maxSpeed: 0 },
+      commands: { refresh(world, self) { world.sendRoom('refresh', {}); } },
+    },
+  },
+  room: {
+    rounds: { seconds: 0, breakSeconds: 0 }, bots: { keep: 0 },
+    join() { return { kind: 'participant', at: { x: 0, y: 0 } }; },
+    on: { refresh(world) { world.shared.revision += 1; world.emit('refresh', { x: 0, y: 0 }, {}); } },
+  },
+});

package/app-starters/giving/src/view.ts

@@ -0,0 +1,74 @@
+import app from '../app.json';
+import { openRoom } from '@homie-rocks/studio/rules/view';
+import type rules from './rules';
+import { createAppRecords, type AppRecord } from '@homie-rocks/studio/apps';
+import { randomId } from '@homie-rocks/studio/links';
+type Entry = { choice: string; status: string; amount: number; monthly: boolean };
+const room = openRoom<typeof rules>();
+const net = room.net;
+const role = net.params.role ?? 'customer';
+const words: Record<string, string> = app.words;
+const config = app.starter;
+const $ = <T extends HTMLElement = HTMLElement>(s: string) => document.querySelector<T>(s)!;
+const records = createAppRecords<Entry>({ collection: 'entries' });
+let rows: AppRecord<Entry>[] = [], busy = false, ready = false, question = 0;
+const action = $<HTMLButtonElement>('[data-action]');
+document.body.className = role;
+document.body.style.setProperty('--tone', config.color);
+$('h1').textContent = app.name; $('#intro').textContent = app.blurb;
+$('#label').textContent = words.total; action.textContent = words.action;
+$('#choice-label').textContent = words.choice;
+$('#frequency-label').textContent = words.monthly;
+$('#once').textContent = words.once; $('#month').textContent = words.month;
+$('#giving-link').textContent = words.give;
+$('#giving-link').hidden = config.kind !== 'giving';
+$('#frequency').hidden = config.kind !== 'giving';
+$('#goal').hidden = config.kind !== 'giving';
+$('#controls').hidden = role === 'wall';
+const select = $<HTMLSelectElement>('#choice');
+function choices() {
+ select.replaceChildren();
+ const list = config.kind === 'quiz' ? config.questions[question]?.choices ?? [] : config.choices;
+ for (const value of list) { const option = document.createElement('option'); option.value = value; option.textContent = value; select.append(option); }
+ $('#prompt').textContent = config.kind === 'quiz' ? config.questions[question]?.text ?? words.finished : words.prompt;
+ action.hidden = config.kind === 'quiz' && question >= config.questions.length;
+}
+choices();
+function paint() {
+ $('[data-count]').textContent = String(rows.length);
+ const amount = rows.reduce((n, r) => n + r.data.amount, 0);
+ $('#amount').textContent = new Intl.NumberFormat(undefined, { style: 'currency', currency: config.currency }).format(amount);
+ $('#target').textContent = new Intl.NumberFormat(undefined, { style: 'currency', currency: config.currency }).format(config.goal);
+ $<HTMLProgressElement>('progress').max = config.goal; $<HTMLProgressElement>('progress').value = amount;
+ $('#goal-label').textContent = words.goal;
+ action.disabled = busy || !ready;
+ $('#entries').replaceChildren();
+ for (const row of rows.slice(-6).reverse()) {
+  const li = document.createElement('li');
+  li.textContent = `${row.data.choice} · ${row.data.status}${row.data.monthly ? ' · ' + words.month : ''}`;
+  if (role === 'staff' && row.data.status !== words.done) {
+   const button = document.createElement('button'); button.textContent = words.complete;
+   button.onclick = () => { void records.update(row, { ...row.data, status: words.done }).then(refresh).catch(e => { $('#status').textContent = e.message; }); }; li.append(button);
+  }
+  $('#entries').append(li);
+ }
+}
+async function refresh() {
+ try { rows = await records.list(); ready = true; paint(); net.playable(); }
+ catch (error) { $('#status').textContent = (error as Error).message; }
+}
+action.onclick = async () => {
+ busy = true; paint();
+ try {
+  const choice = select.value;
+  await records.create({ choice: config.kind === 'quiz' ? `${question + 1}. ${choice}` : choice, status: words.pending, amount: config.kind === 'giving' ? Number(choice) : 0, monthly: $<HTMLSelectElement>('#monthly').value === 'month' }, randomId());
+  $('#status').textContent = words.thanks;
+  if (config.kind === 'quiz') { question++; choices(); }
+  room.command('refresh', {}); await refresh();
+ } catch (error) { $('#status').textContent = (error as Error).message; }
+ finally { busy = false; paint(); }
+};
+room.on('refresh', () => { void refresh(); });
+net.on('link', () => { void refresh(); });
+setInterval(() => { $('#connection').textContent = net.link === 'online' ? words.live : words.reconnecting; void refresh(); }, 2000);
+void refresh();

package/app-starters/jobs/README.md

@@ -0,0 +1,4 @@
+# At your service
+
+Edit app.json words and starter settings. Phone: /<id>/open; wall: /<id>/tv. A site/pages/<id>/index.html replaces only the landing. Records are public; use references, never private contact details. Staff updates require an account grant.
+