@quo-systems/dock 0.2.2 → 0.2.4

package/dist/harbor/files.js

@@ -1,35 +1,99 @@
 // SPDX-License-Identifier: Apache-2.0
-// The store as a folder on disk, one folder per ward:
+// The store as a folder on disk, one folder per ward, in one of two forms.
+//
+// Plain, when the store has no key, what the droplets run:
 //
 //   <dir>/wards/<name>/seed             32 bytes, hex, mode 0600
 //   <dir>/wards/<name>/partition.json
 //   <dir>/wards/<name>/ward.json        the ward record
+//
+// Sealed, when the store holds a key, what a device's daemon runs with the
+// key from its Keychain:
+//
+//   <dir>/wards/<name>/ward.sealed      seed, partition and record as one
+//                                       JSON, sealed under the key, hex
+//
+// and in both:
+//
 //   <dir>/reach.json                    the directory's hints
 //
-// Every write of the partition goes through a temp file and a rename, and
-// writes are queued per ward so two calls never race on one file.
+// A ward is whole in either form, and a store that meets the other form
+// refuses it by name: a daemon started without its key, or with one against
+// a plain folder, fails loudly instead of booting on what it cannot read.
+// Sealing a plain folder is a deliberate command, never a boot's doing.
+// Every write of a ward goes through a temp file and a rename, and writes
+// are queued per ward so two calls never race on one file.
 import { mkdir, readFile, writeFile, rename, readdir, rm, chmod } from 'node:fs/promises';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import { arithmetic } from '@quo-systems/quo/ward';
+import { sealKey, seal, open } from './seal.js';
 const { hex, unhex } = arithmetic;
 export class Files {
     dir;
+    #key;
     #queues = new Map();
-    constructor(dir) {
+    constructor(dir, key) {
         this.dir = dir;
+        if (key)
+            this.#key = sealKey(key);
     }
     #ward(name) {
         return join(this.dir, 'wards', name);
     }
+    get sealed() {
+        return this.#key !== undefined;
+    }
+    // The form a folder holds, checked against the form this store speaks.
+    #form(name) {
+        const wd = this.#ward(name);
+        const form = existsSync(join(wd, 'ward.sealed')) ? 'sealed' : existsSync(join(wd, 'seed')) ? 'plain' : undefined;
+        if (form === 'sealed' && !this.sealed)
+            throw new Error(`ward ${name} in ${this.dir} is sealed and this harbor has no key`);
+        if (form === 'plain' && this.sealed)
+            throw new Error(`ward ${name} in ${this.dir} is plain and this harbor holds a key`);
+        return form;
+    }
+    // One write at a time per ward, through a temp file and a rename.
+    #write(name, file, body) {
+        const next = (this.#queues.get(name) ?? Promise.resolve()).then(async () => {
+            const tmp = join(this.#ward(name), `${file}.tmp`);
+            await writeFile(tmp, body, { mode: 0o600 });
+            await rename(tmp, join(this.#ward(name), file));
+        });
+        this.#queues.set(name, next.catch(() => { }));
+        return next;
+    }
+    async #read(name) {
+        const blob = (await readFile(join(this.#ward(name), 'ward.sealed'), 'utf8')).trim();
+        return JSON.parse(new TextDecoder().decode(await open(await this.#key, blob)));
+    }
+    // A sealed ward is rewritten whole, so the read sits inside the queue
+    // with the write: two changes to one ward never lose each other's part.
+    #keep(name, change) {
+        const next = (this.#queues.get(name) ?? Promise.resolve()).then(async () => {
+            const wd = this.#ward(name);
+            const blob = change(existsSync(join(wd, 'ward.sealed')) ? await this.#read(name) : undefined);
+            const sealed = await seal(await this.#key, new TextEncoder().encode(JSON.stringify(blob)));
+            await writeFile(join(wd, 'ward.sealed.tmp'), sealed + '\n', { mode: 0o600 });
+            await rename(join(wd, 'ward.sealed.tmp'), join(wd, 'ward.sealed'));
+        });
+        this.#queues.set(name, next.catch(() => { }));
+        return next;
+    }
     async list() {
         const wards = join(this.dir, 'wards');
-        return existsSync(wards) ? (await readdir(wards)).filter((n) => existsSync(join(wards, n, 'seed'))) : [];
+        return existsSync(wards) ? (await readdir(wards)).filter((n) => existsSync(join(wards, n, 'seed')) || existsSync(join(wards, n, 'ward.sealed'))) : [];
     }
     async load(name) {
-        const wd = this.#ward(name);
-        if (!existsSync(join(wd, 'seed')))
+        const form = this.#form(name);
+        if (!form)
             return undefined;
+        if (form === 'sealed') {
+            const b = await this.#read(name);
+            return { seed: unhex(b.seed), partition: b.partition, record: b.record };
+        }
+        const wd = this.#ward(name);
         return {
             seed: unhex((await readFile(join(wd, 'seed'), 'utf8')).trim()),
             partition: JSON.parse(await readFile(join(wd, 'partition.json'), 'utf8')),
@@ -37,31 +101,32 @@ export class Files {
         };
     }
     async put(name, kept) {
-        const wd = this.#ward(name);
-        if (existsSync(join(wd, 'seed')))
+        if (this.#form(name))
             throw new Error(`ward ${name} already exists in ${this.dir}`);
+        const wd = this.#ward(name);
         await mkdir(wd, { recursive: true, mode: 0o700 });
+        if (this.sealed)
+            return this.#keep(name, () => ({ seed: hex(kept.seed), partition: kept.partition, record: kept.record }));
         await writeFile(join(wd, 'seed'), hex(kept.seed), { mode: 0o600 });
         await chmod(join(wd, 'seed'), 0o600);
         await writeFile(join(wd, 'partition.json'), JSON.stringify(kept.partition) + '\n', { mode: 0o600 });
         await writeFile(join(wd, 'ward.json'), JSON.stringify(kept.record, null, 2) + '\n', { mode: 0o600 });
     }
-    save(name, partition) {
-        const wd = this.#ward(name);
-        if (!existsSync(join(wd, 'seed')))
-            return Promise.resolve(); // a name not kept is nothing
-        const next = (this.#queues.get(name) ?? Promise.resolve()).then(async () => {
-            const tmp = join(wd, 'partition.json.tmp');
-            await writeFile(tmp, JSON.stringify(partition) + '\n', { mode: 0o600 });
-            await rename(tmp, join(wd, 'partition.json'));
-        });
-        this.#queues.set(name, next.catch(() => { }));
-        return next;
+    async save(name, partition) {
+        const form = this.#form(name);
+        if (!form)
+            return; // a name not kept is nothing
+        if (form === 'sealed')
+            return this.#keep(name, (b) => ({ ...b, partition }));
+        return this.#write(name, 'partition.json', JSON.stringify(partition) + '\n');
     }
     async record(name, record) {
-        if (!existsSync(join(this.#ward(name), 'seed')))
+        const form = this.#form(name);
+        if (!form)
             return;
-        await writeFile(join(this.#ward(name), 'ward.json'), JSON.stringify(record, null, 2) + '\n', { mode: 0o600 });
+        if (form === 'sealed')
+            return this.#keep(name, (b) => ({ ...b, record }));
+        return this.#write(name, 'ward.json', JSON.stringify(record, null, 2) + '\n');
     }
     async take(name) {
         const kept = await this.load(name);

package/dist/harbor/seal.d.ts

@@ -0,0 +1,3 @@
+export declare function sealKey(secret: string): Promise<CryptoKey>;
+export declare function seal(key: CryptoKey, bytes: Uint8Array): Promise<string>;
+export declare function open(key: CryptoKey, sealed: string): Promise<Uint8Array>;

package/dist/harbor/seal.js

@@ -0,0 +1,25 @@
+// SPDX-License-Identifier: Apache-2.0
+// The seal: what a store does to a ward's bytes before they rest on a data
+// store, under one key the secret store holds. One piece with three users,
+// the edge under the platform's secret, the daemon under a key from its
+// environment, the phone under a key from the Keychain. AES-GCM under a
+// 32-byte key, a fresh nonce each time, nonce and ciphertext together as
+// hex. WebCrypto only, so it runs wherever a store does.
+import { arithmetic } from '@quo-systems/quo/ward';
+const { hex, unhex } = arithmetic;
+// Bytes as the platform's crypto wants them: over a plain ArrayBuffer.
+const plain = (b) => new Uint8Array(b);
+export async function sealKey(secret) {
+    if (!/^[0-9a-f]{64}$/.test(secret))
+        throw new Error('a seal key is 32 bytes as hex');
+    return crypto.subtle.importKey('raw', plain(unhex(secret)), 'AES-GCM', false, ['encrypt', 'decrypt']);
+}
+export async function seal(key, bytes) {
+    const iv = crypto.getRandomValues(new Uint8Array(12));
+    const ct = new Uint8Array(await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, plain(bytes)));
+    return hex(iv) + hex(ct);
+}
+export async function open(key, sealed) {
+    const b = plain(unhex(sealed));
+    return new Uint8Array(await crypto.subtle.decrypt({ name: 'AES-GCM', iv: b.subarray(0, 12) }, key, b.subarray(12)));
+}

package/dist/human/door.d.ts

@@ -1,5 +1,7 @@
+import { type Node } from './tree.ts';
 export type Door = {
     world?: string;
     host: string;
 };
+export declare function doorTree(at: Door): Node;
 export declare function door(at: Door): string;

package/dist/human/door.js

@@ -5,15 +5,27 @@
 // Quo's page and not the estate's: it says what this is and that a world
 // here is entered by a link someone sends you, and it asks for nothing,
 // since there is nothing a stranger could type that would let them in. A
-// world that wants a face of its own has a public being with a look, or
-// its own page on its own origin; this is the default and nothing more.
-// Pure, strings in and strings out, under the tab's policy: no script, no
-// image that is not a data URI, styles from the one stylesheet.
-import { escape } from './html.js';
+// world that wants a face of its own has a public being with a page and a
+// look, or its own page on its own origin; this is the default and nothing
+// more. It is the first page written in the grammar, `tree.ts`, painted
+// with nobody behind it: no ask, no answer, no standing.
+import { paint, nobody } from './tree.js';
 // The mark: a ring with a gap, one being's voice reaching another's door.
 const MARK = 'data:image/svg+xml;base64,' +
     btoa(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"><circle cx="32" cy="32" r="22" stroke-dasharray="110 30" transform="rotate(-60 32 32)"/><circle cx="32" cy="32" r="5" fill="currentColor" stroke="none"/></svg>`);
+export function doorTree(at) {
+    return {
+        kind: 'stack',
+        of: [
+            { kind: 'image', src: MARK, alt: '' },
+            { kind: 'text', text: 'quo', role: 'title' },
+            { kind: 'text', text: at.world ? `${at.world} at ${at.host}` : at.host, role: 'label' },
+            { kind: 'text', text: at.world ? 'This world is entered by invitation.' : 'The worlds here are entered by invitation.', role: 'lead' },
+            { kind: 'text', text: 'An invitation is a link someone sends you. Open it here, and you are in: no account, no password, nothing to type. What you can do inside is what the world shows you, and it is yours to keep on this device.' },
+            { kind: 'text', text: 'Nothing on this page asks anything of you. If you were sent here without a link, ask the person who sent you for one.', role: 'quiet' },
+        ],
+    };
+}
 export function door(at) {
-    const where = at.world ? `<p class="where">${escape(at.world)} <span>at ${escape(at.host)}</span></p>` : `<p class="where">${escape(at.host)}</p>`;
-    return `<main class="door"><img class="mark" alt="" src="${MARK}"><h1>quo</h1>${where}<p class="lead">${at.world ? 'This world is entered by invitation.' : 'The worlds here are entered by invitation.'}</p><p>An invitation is a link someone sends you. Open it here, and you are in: no account, no password, nothing to type. What you can do inside is what the world shows you, and it is yours to keep on this device.</p><p class="quiet">Nothing on this page asks anything of you. If you were sent here without a link, ask the person who sent you for one.</p></main>`;
+    return `<main class="door">${paint(doorTree(at), nobody)}</main>`;
 }

package/dist/human/html.d.ts

@@ -1,6 +1,7 @@
 import type { Ask, Blueprint, Json, JsonObject } from '@quo-systems/quo';
 import { type Word } from '../beings/side.ts';
 import { hintFor, type Look, type Hint } from '../beings/look.ts';
+import { type Node } from './tree.ts';
 export type Property = {
     type?: string;
     description?: string;
@@ -26,6 +27,7 @@ export declare function face(w: Word, schema?: JsonObject): string;
 export type Model = {
     blueprint: Blueprint | null;
     look: Look;
+    tree: Node | null;
     notice: string;
     answers: Record<string, Word>;
     pushes: JsonObject[];

package/dist/human/html.js

@@ -1,5 +1,6 @@
 import { SILENCE_TEXT, UNREACHED_TEXT, wordText } from '../beings/side.js';
 import { hint, hintFor, sanitise, groups as grouped } from '../beings/look.js';
+import { paint } from './tree.js';
 export const escape = (s) => s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c] ?? c);
 const props = (schema) => Object.entries((schema?.properties ?? {}));
 const required = (schema) => new Set((schema?.required ?? []));
@@ -153,6 +154,8 @@ export function ordered(asks, l) {
     return [...want.map((n) => asks.find((a) => a.name === n)).filter((a) => a !== undefined), ...asks.filter((a) => !want.includes(a.name))];
 }
 export { hintFor };
+// The asks that are presentation and never a form: her look and her page.
+const PRESENTATION = new Set(['look', 'page']);
 export function page(m) {
     const bp = m.blueprint;
     const one = (l, prefix = '') => (a) => {
@@ -162,26 +165,49 @@ export function page(m) {
     };
     const groups = grouped(bp);
     const taken = new Set(Object.values(groups).flatMap((g) => g.asks ?? []));
-    const own = bp ? ordered(bp.asks.filter((a) => !taken.has(a.name) && a.name !== 'look'), m.look).map(one(m.look)).join('') : '';
-    const far = bp
-        ? Object.entries(groups)
-            .map(([id, g]) => {
-            const asks = bp.asks.filter((a) => g.asks?.includes(a.name));
-            if (!asks.length)
+    const section = (id) => {
+        const g = groups[id];
+        const asks = bp && g ? bp.asks.filter((a) => g.asks?.includes(a.name)) : [];
+        if (!asks.length)
+            return '';
+        const kept = sanitise(g.look);
+        const l = look(kept);
+        const prefix = `${id}-`;
+        const want = (kept.order ?? []).map((n) => prefix + n);
+        const inOrder = ordered(asks, { order: want });
+        return `<section class="standing" data-standing="${escape(id)}"${l.style}>${l.head || `<h2>${escape(id)}</h2>`}${inOrder.map(one(kept, prefix)).join('')}</section>`;
+    };
+    const far = Object.keys(groups).map(section).join('');
+    // Her page, when she answered one: painted from her tree, each name it
+    // uses looked up in her describe, so a page shows nothing her gate hid.
+    const painter = {
+        form: (name) => {
+            const a = bp?.asks.find((x) => x.name === name && !taken.has(x.name) && !PRESENTATION.has(x.name));
+            return a ? one(m.look)(a) : '';
+        },
+        answer: (name, as) => {
+            const a = bp?.asks.find((x) => x.name === name);
+            const w = a ? m.answers[name] : undefined;
+            if (!a || !w)
                 return '';
-            const kept = sanitise(g.look);
-            const l = look(kept);
-            const prefix = `${id}-`;
-            const want = (kept.order ?? []).map((n) => prefix + n);
-            const inOrder = ordered(asks, { order: want });
-            return `<section class="standing" data-standing="${escape(id)}"${l.style}>${l.head || `<h2>${escape(id)}</h2>`}${inOrder.map(one(kept, prefix)).join('')}</section>`;
-        })
-            .join('')
-        : '';
-    const asks = own + far;
+            if (w.word === 'object' && as === 'text')
+                return `<div class="answer">${view(w.value === null || typeof w.value !== 'object' ? w.value : JSON.stringify(w.value))}</div>`;
+            if (w.word === 'object' && as === 'cards' && Array.isArray(w.value))
+                return `<div class="cards">${w.value.map((v) => `<div class="card">${view(v)}</div>`).join('')}</div>`;
+            if (w.word === 'object' && as === 'list' && Array.isArray(w.value))
+                return `<ul class="answer">${w.value.map((v) => `<li>${view(v)}</li>`).join('')}</ul>`;
+            return face(w, a.output);
+        },
+        standing: section,
+        standings: () => far,
+    };
+    const own = bp ? ordered(bp.asks.filter((a) => !taken.has(a.name) && !PRESENTATION.has(a.name)), m.look).map(one(m.look)).join('') : '';
+    const asks = m.tree ? `<div class="page">${paint(m.tree, painter)}</div>` : own + far;
     const shown = bp && bp.notes !== null && typeof bp.notes === 'object' && !Array.isArray(bp.notes) ? Object.fromEntries(Object.entries(bp.notes).filter(([k]) => k !== 'standings' && k !== 'name')) : bp?.notes;
     const notes = bp && shown !== null && shown !== undefined && !(typeof shown === 'object' && !Array.isArray(shown) && !Object.keys(shown).length) ? `<aside class="notes">${view(shown)}</aside>` : '';
     const pushes = m.pushes.length ? `<section class="pushes"><h2>pushes</h2><ol>${m.pushes.map((p) => `<li>${view(p)}</li>`).join('')}</ol></section>` : '';
     const mine = look(m.look);
-    return `<header${mine.style}>${m.look.logo ? `<img class="logo" alt="" src="${m.look.logo}">` : ''}<h1>${escape(title(bp, m.look))}</h1><p class="notice">${escape(m.notice)}</p></header>${notes}<main${mine.style}>${asks}</main>${pushes}`;
+    // a page carries its own title, so the header keeps only the notice; a being painted as forms is headed by her name
+    const head = m.tree ? '' : `${m.look.logo ? `<img class="logo" alt="" src="${m.look.logo}">` : ''}<h1>${escape(title(bp, m.look))}</h1>`;
+    return `<header${mine.style}>${head}<p class="notice">${escape(m.notice)}</p></header>${notes}<main${mine.style}>${asks}</main>${pushes}`;
 }

package/dist/human/local.d.ts

@@ -0,0 +1,10 @@
+import type { JsonObject } from '@quo-systems/quo';
+import type { Subject } from '../beings/side.ts';
+export declare const TAB = "tab";
+type Door = {
+    answer(asker: {
+        id: string;
+    }, method?: string, args?: JsonObject): Promise<unknown>;
+};
+export declare function local(being: Door): Subject;
+export {};

package/dist/human/local.js

@@ -0,0 +1,10 @@
+// The asker the tab speaks under to its own beings.
+export const TAB = 'tab';
+export function local(being) {
+    const me = { id: TAB };
+    return {
+        tools: async () => (await being.answer(me)),
+        call: (name, args = {}) => being.answer(me, name, args),
+        ears: new Set(),
+    };
+}

package/dist/human/screen.js

@@ -10,12 +10,13 @@ import { digest } from '@quo-systems/quo';
 import { word } from '../beings/side.js';
 import { isInvitation } from '../beings/link.js';
 import { page, values, hintFor } from './html.js';
+import { sanitiseTree, answersIn } from './tree.js';
 import { sanitise } from '../beings/look.js';
 import { isSilence, isWord } from '@quo-systems/quo';
 export async function screenSide(avatar, surface, options = {}) {
     const after = options.after ?? (async () => { });
     const notice = options.notice ?? '';
-    const model = { blueprint: null, look: {}, notice, answers: {}, pushes: [] };
+    const model = { blueprint: null, look: {}, tree: null, notice, answers: {}, pushes: [] };
     let seen = null;
     const show = () => surface.show(page(model));
     // Her describe, again: the page follows the digest.
@@ -28,7 +29,8 @@ export async function screenSide(avatar, surface, options = {}) {
         }
         else {
             const d = await digest(bp);
-            if (d !== seen) {
+            const moved = d !== seen;
+            if (moved) {
                 seen = d;
                 model.blueprint = bp;
                 for (const k of Object.keys(model.answers))
@@ -41,12 +43,28 @@ export async function screenSide(avatar, surface, options = {}) {
                 }
                 else
                     model.look = {};
-                // a read-only ask that needs nothing typed is run on her behalf, so the page opens with what it shows
-                for (const a of bp.asks) {
-                    const needs = (a.input.required ?? []).length > 0;
-                    if (hintFor(bp, model.look, a.name).readOnly && !needs && !(a.name in model.answers))
-                        model.answers[a.name] = word(await avatar.call(a.name, {}));
-                }
+            }
+            // her page, after every ask: a tree of values from what she holds now, or nothing and her asks
+            // are forms. A cell moved is a page moved, and her describe need not have; so the answers the
+            // page shows are run again with it, and the page never stands more than one ask behind her
+            const shows = new Set(model.tree ? answersIn(model.tree) : []);
+            if (bp.asks.some((a) => a.name === 'page')) {
+                const t = await avatar.call('page');
+                model.tree = isSilence(t) || isWord(t) ? null : sanitiseTree(t);
+            }
+            else
+                model.tree = null;
+            const wanted = new Set(model.tree ? answersIn(model.tree) : []);
+            for (const n of shows)
+                if (wanted.has(n))
+                    delete model.answers[n];
+            // a read-only ask that needs nothing typed is run on her behalf once per digest, and one her page
+            // shows the answer of after every ask, so the page opens and stays with what it shows
+            for (const a of bp.asks) {
+                const needs = (a.input.required ?? []).length > 0;
+                const run = wanted.has(a.name) || (moved && hintFor(bp, model.look, a.name).readOnly);
+                if (run && !needs && !(a.name in model.answers))
+                    model.answers[a.name] = word(await avatar.call(a.name, {}));
             }
         }
         await after();

package/dist/human/tab.d.ts

@@ -7,6 +7,7 @@ export type Config = {
         public: boolean;
     }>;
     ward?: string;
+    beings?: boolean;
 };
 export declare function start(cfg: Config, root?: HTMLElement): Promise<void>;
 export { USER };

package/dist/human/tab.js

@@ -1,3 +1,11 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
 import { BrowserHarbor } from '../harbor/browser.js';
 import { USER } from '../beings/avatar.js';
 import { parse, strip } from '../beings/link.js';
@@ -6,6 +14,7 @@ import { domSurface } from './dom.js';
 import { guest } from './guest.js';
 import { door } from './door.js';
 import { world, relations, fresh } from './worlds.js';
+import { local } from './local.js';
 const kept = (key, fallback) => {
     try {
         return JSON.parse(localStorage.getItem(key) ?? 'null') ?? fallback;
@@ -48,7 +57,22 @@ export async function start(cfg, root = document.body) {
     root.append(nav, who, status, screen);
     const say = (s) => (status.textContent = s);
     // The harbor in the tab: one database per origin, one ward per world.
+    // The world's code first, when its origin serves any: the classes for
+    // the tab, handed to the harbor beside the built-in ones before any ward
+    // boots, since a being kept from the last visit is booted by class name.
+    // A world that serves none has no beings in the tab, and the page is the
+    // far being's alone.
     const harbor = new BrowserHarbor('quo');
+    const classes = cfg.beings
+        ? await import(__rewriteRelativeImportExtension(`${cfg.web}/beings.js`)).then((mod) => {
+            const out = {};
+            for (const [name, v] of Object.entries(mod))
+                if (typeof v === 'function' && 'prototype' in v)
+                    out[name] = v;
+            return out;
+        })
+        : {};
+    Object.assign(harbor.classes, classes);
     await harbor.boot();
     harbor.dial(cfg.quo);
     // The world this page is about: the link's, since an invitation names
@@ -100,16 +124,45 @@ export async function start(cfg, root = document.body) {
             who.append(more);
         }
     };
-    // In, as one relation: her page. Every call rotates her keys and a
-    // same-ward ask never crosses the harbor, so the side saves after each.
+    // The world's beings in the tab, for one relation: one of each class,
+    // booted under her key the first time and found there after, since their
+    // cells are in the ward and come back with it. Each is a subject of her
+    // own with her own side in her own section, so a note she keeps and a
+    // form she shows are hers, painted by the same painter as the far page.
+    const locals = [];
+    const boot = async (rel) => {
+        const beings = ward.partition.beings ?? {};
+        for (const name of Object.keys(classes)) {
+            const key = `${rel.key}-${name}`;
+            if (!beings[key]) {
+                const out = (await ward.ask('boot', { key, class: name }));
+                if (out.error)
+                    continue;
+                await ward.save();
+            }
+            const being = ward.being(key);
+            if (!being)
+                continue;
+            const section = el('section', '', { class: 'local', 'data-being': key });
+            screen.append(section);
+            locals.push(await screenSide(local(being), domSurface(section), { after: () => ward.save() }));
+        }
+    };
+    // In, as one relation: her page, then the world's beings for her. Every
+    // call rotates her keys and a same-ward ask never crosses the harbor, so
+    // the side saves after each.
     const inside = async (rel, notice, called) => {
         await side?.close();
+        for (const l of locals.splice(0))
+            await l.close();
         status.remove();
         root.querySelector('form.password')?.remove();
         screen.replaceChildren();
         current = rel;
         keep(AT(pk), rel.key);
-        const s = await screenSide(rel.avatar, domSurface(screen), { after: () => ward.save(), notice });
+        const mine = el('div', '', { class: 'far' });
+        screen.append(mine);
+        const s = await screenSide(rel.avatar, domSurface(mine), { after: () => ward.save(), notice });
         side = s;
         const bp = s.model.blueprint;
         const notesName = typeof bp?.notes?.name === 'string' ? bp.notes.name : '';
@@ -118,6 +171,7 @@ export async function start(cfg, root = document.body) {
             keep(NAMES(pk), { ...names(), [rel.key]: called });
         switcher();
         people();
+        await boot(rel);
     };
     // The way in, from any of the three: a fresh avatar joins, the ward is
     // saved, and she is the one on screen.
@@ -138,6 +192,8 @@ export async function start(cfg, root = document.body) {
     // there, the door page: a link is the only way in, and nothing to type.
     const atDoor = async () => {
         await side?.close();
+        for (const l of locals.splice(0))
+            await l.close();
         side = null;
         current = null;
         screen.replaceChildren();

package/dist/human/tree.d.ts

@@ -0,0 +1,40 @@
+import type { Json } from '@quo-systems/quo';
+export type Role = 'title' | 'lead' | 'body' | 'quiet' | 'label';
+export type As = 'auto' | 'text' | 'table' | 'cards' | 'list';
+export type Node = {
+    kind: 'stack';
+    of: Node[];
+} | {
+    kind: 'row';
+    of: Node[];
+} | {
+    kind: 'text';
+    text: string;
+    role?: Role;
+} | {
+    kind: 'image';
+    src: string;
+    alt?: string;
+} | {
+    kind: 'form';
+    ask: string;
+} | {
+    kind: 'answer';
+    ask: string;
+    as?: As;
+} | {
+    kind: 'standing';
+    id: string;
+} | {
+    kind: 'standings';
+};
+export declare function sanitiseTree(v: Json, depth?: number): Node | null;
+export declare function answersIn(n: Node, out?: string[]): string[];
+export type Painter = {
+    form(ask: string): string;
+    answer(ask: string, as: As): string;
+    standing(id: string): string;
+    standings(): string;
+};
+export declare function paint(n: Node, p: Painter): string;
+export declare const nobody: Painter;