@quo-systems/dock 0.2.4 → 0.2.5

package/beings/carry.ts

@@ -58,16 +58,20 @@ export class Carrier extends Being {
       if (!st) continue;
       if (!rec.blueprint || rec.seen !== rec.digest) await st.ask(); // her ward writes the record
       if (!rec.blueprint) continue;
+      // her look is kept here once per digest and never carried as an ask;
+      // her page follows every call, so it is carried as one and named in
+      // the notes, where every side finds it and none takes it for a form
       const names: string[] = [];
+      const group: { asks: string[]; look?: Look; page?: string } = { asks: names };
       for (const a of rec.blueprint.asks) {
-        if (a.name === 'look' || a.name === 'page') continue; // presentation is hers, never carried as an ask
+        if (a.name === 'look') continue;
         const name = `${id}-${a.name}`;
         if (own.has(name)) continue;
         carried[name] = { id, ask: a.name };
-        names.push(name);
         bp.asks.push({ ...a, name });
+        if (a.name === 'page') group.page = name;
+        else names.push(name);
       }
-      const group: { asks: string[]; look?: Look } = { asks: names };
       if (rec.blueprint.asks.some((a) => a.name === 'look')) {
         const kept = this.looks[id];
         if (!kept || kept.digest !== rec.digest) {

package/beings/desk.ts

@@ -25,8 +25,12 @@ export class Desk extends Being {
     device: { description: 'trade a proof for a device invitation', input: { type: 'object', properties: { proof: { type: 'object' } }, required: ['proof'] } },
   };
 
+  // A stranger learns the proof kinds and nothing else. Who lives on this
+  // world is not the caller's to know: the verifier names the user, so
+  // nobody at the door ever has to, and a world with a thousand of them
+  // would otherwise hand the whole list to anyone who knocked.
   hello(_args: JsonObject, asker: Asker) {
-    return { desk: true, asker: asker.id ?? null, kinds: Object.keys(Desk.verifiers), users: Object.keys(this.cells.standings).filter((k) => k.startsWith('user:')).map((k) => k.slice(5)) };
+    return { desk: true, asker: asker.id ?? null, kinds: Object.keys(Desk.verifiers) };
   }
 
   async device(args: JsonObject) {

package/beings/look.ts

@@ -75,15 +75,24 @@ export function sanitise(v: Json | undefined): Look {
 // The one hint a side reads first: whether this ask is in the look at all.
 export const hint = (l: Look | undefined, name: string): Hint => l?.asks?.[name] ?? {};
 
-// A carrier's notes say which asks are a standing's, and how she looks:
-// `standings: { id: { asks: [name], look? } }`. Every side reads them here.
-export type Group = { asks?: string[]; look?: Json };
+// A carrier's notes say which asks are a standing's, how she looks, and
+// which carried ask is her page: `standings: { id: { asks: [name], look?,
+// page? } }`. Every side reads them here.
+export type Group = { asks?: string[]; look?: Json; page?: string };
 export function groups(bp: Blueprint | null): Record<string, Group> {
   const n = bp?.notes;
   const g = n !== null && n !== undefined && typeof n === 'object' && !Array.isArray(n) ? n.standings : undefined;
   return g !== null && g !== undefined && typeof g === 'object' && !Array.isArray(g) ? (g as Record<string, Group>) : {};
 }
 
+// The asks that are presentation and never a form nor a tool: her look, her
+// page, and the page of every standing she carries, named in her notes.
+export function presentation(bp: Blueprint | null): Set<string> {
+  const p = new Set(['look', 'page']);
+  for (const g of Object.values(groups(bp))) if (typeof g.page === 'string') p.add(g.page);
+  return p;
+}
+
 // The hint for one ask, hers or a standing's: a carried ask is looked up
 // under its bare name in that standing's look.
 export function hintFor(bp: Blueprint | null, mine: Look, name: string): Hint {

package/beings/quo-dock.md

@@ -278,14 +278,15 @@ Carrying is a base, `beings/carry.ts`, and nothing in it knows what a user
 is: a house being could carry its rooms, a company its suppliers. A subclass
 says who may see what she carries, and the user being says a device with the
 `reach` note, written when the human ticked the box at the exchange. The
-notes of a carrier's describe say which asks are whose,
-`standings: { id: { asks, look? } }`, so a screen draws one section per
-standing and a model side keeps the flat list it needs; the mapping back
-from a carried name to the standing is in her cells and never parsed from
-the name. Her own asks come first and are never shadowed. She asks a
-standing's describe again when its digest moved and its `look` once per
-digest, so a describe of hers may cost one ask per stale standing, the price
-of a page that is never more than one ask behind.
+notes of a carrier's describe say which asks are whose, how each standing
+looks and which carried ask is her page, `standings: { id: { asks, look?,
+page? } }`, so a screen draws one section per standing, paints her page in
+it when she has one, and a model side keeps the flat list it needs with no
+page in it; the mapping back from a carried name to the standing is in her
+cells and never parsed from the name. Her own asks come first and are never
+shadowed. She asks a standing's describe again when its digest moved and its
+`look` once per digest, so a describe of hers may cost one ask per stale
+standing, the price of a page that is never more than one ask behind.
 
 ## The look
 
@@ -313,11 +314,13 @@ A look is not capability: it is never in a blueprint or a digest, Quo never
 sees it, and a being without one renders and lists exactly as before. The
 `look` ask itself is presentation and is neither a form nor a tool, and so
 is `page`, the one other presentation ask, which a screen alone reads and
-`packages/dock/human/quo-human.md` defines; a carrier carries neither. A
-carrier keeps each standing's look beside her asks in the notes, so acme's
-section on the human's page is painted as acme asked, inside that section
-and nowhere else. No token can carry a URL, a stylesheet or code, so a far
-being cannot paint over the page or reach a server through it. A being who
+`packages/dock/human/quo-human.md` defines. A carrier keeps each standing's
+look beside her asks in the notes, since a look moves with the digest, and
+carries her page as an ask named there, since a page moves with every call;
+so acme's section on the human's page is painted as acme asked, her look
+and her page, inside that section and nowhere else. No token can carry a
+URL, a stylesheet or code, so a far being cannot paint over the page or
+reach a server through it. A being who
 marks an ask read-only and then writes has lied to her own page, and nothing
 enforces it, the way nothing enforces that her empty ask is safe to repeat.
 

package/dist/beings/carry.js

@@ -56,18 +56,24 @@ export class Carrier extends Being {
                 await st.ask(); // her ward writes the record
             if (!rec.blueprint)
                 continue;
+            // her look is kept here once per digest and never carried as an ask;
+            // her page follows every call, so it is carried as one and named in
+            // the notes, where every side finds it and none takes it for a form
             const names = [];
+            const group = { asks: names };
             for (const a of rec.blueprint.asks) {
-                if (a.name === 'look' || a.name === 'page')
-                    continue; // presentation is hers, never carried as an ask
+                if (a.name === 'look')
+                    continue;
                 const name = `${id}-${a.name}`;
                 if (own.has(name))
                     continue;
                 carried[name] = { id, ask: a.name };
-                names.push(name);
                 bp.asks.push({ ...a, name });
+                if (a.name === 'page')
+                    group.page = name;
+                else
+                    names.push(name);
             }
-            const group = { asks: names };
             if (rec.blueprint.asks.some((a) => a.name === 'look')) {
                 const kept = this.looks[id];
                 if (!kept || kept.digest !== rec.digest) {

package/dist/beings/desk.d.ts

@@ -37,7 +37,6 @@ export declare class Desk extends Being {
         desk: boolean;
         asker: string | null;
         kinds: string[];
-        users: string[];
     };
     device(args: JsonObject): Promise<Json>;
 }

package/dist/beings/desk.js

@@ -17,8 +17,12 @@ export class Desk extends Being {
         hello: { description: 'how to get in', input: { type: 'object' } },
         device: { description: 'trade a proof for a device invitation', input: { type: 'object', properties: { proof: { type: 'object' } }, required: ['proof'] } },
     };
+    // A stranger learns the proof kinds and nothing else. Who lives on this
+    // world is not the caller's to know: the verifier names the user, so
+    // nobody at the door ever has to, and a world with a thousand of them
+    // would otherwise hand the whole list to anyone who knocked.
     hello(_args, asker) {
-        return { desk: true, asker: asker.id ?? null, kinds: Object.keys(Desk.verifiers), users: Object.keys(this.cells.standings).filter((k) => k.startsWith('user:')).map((k) => k.slice(5)) };
+        return { desk: true, asker: asker.id ?? null, kinds: Object.keys(Desk.verifiers) };
     }
     async device(args) {
         const proof = args.proof;

package/dist/beings/look.d.ts

@@ -22,6 +22,8 @@ export declare const hint: (l: Look | undefined, name: string) => Hint;
 export type Group = {
     asks?: string[];
     look?: Json;
+    page?: string;
 };
 export declare function groups(bp: Blueprint | null): Record<string, Group>;
+export declare function presentation(bp: Blueprint | null): Set<string>;
 export declare function hintFor(bp: Blueprint | null, mine: Look, name: string): Hint;

package/dist/beings/look.js

@@ -58,6 +58,15 @@ export function groups(bp) {
     const g = n !== null && n !== undefined && typeof n === 'object' && !Array.isArray(n) ? n.standings : undefined;
     return g !== null && g !== undefined && typeof g === 'object' && !Array.isArray(g) ? g : {};
 }
+// The asks that are presentation and never a form nor a tool: her look, her
+// page, and the page of every standing she carries, named in her notes.
+export function presentation(bp) {
+    const p = new Set(['look', 'page']);
+    for (const g of Object.values(groups(bp)))
+        if (typeof g.page === 'string')
+            p.add(g.page);
+    return p;
+}
 // The hint for one ask, hers or a standing's: a carried ask is looked up
 // under its bare name in that standing's look.
 export function hintFor(bp, mine, name) {

package/dist/harbor/browser.d.ts

@@ -1,13 +1,13 @@
 import type { BeingClass } from '@quo-systems/quo';
-import { Harbor, type Dialer } from '@quo-systems/quo/harbor';
-import { Idb } from './idb.ts';
+import { Harbor, type Dialer, type Store } from '@quo-systems/quo/harbor';
 export declare const BUILT_IN: Record<string, BeingClass>;
 export declare class BrowserHarbor extends Harbor {
     #private;
-    readonly db: Idb;
+    readonly name: string;
     readonly dialers: Dialer[];
-    constructor(name?: string, classes?: Record<string, BeingClass>);
+    constructor(store?: string | Store, classes?: Record<string, BeingClass>);
     boot(): Promise<void>;
     dial(url: string): Dialer;
+    wake(): void;
     close(): Promise<void>;
 }

package/dist/harbor/browser.js

@@ -3,18 +3,21 @@ import { Harbor, dial } from '@quo-systems/quo/harbor';
 import { Idb } from './idb.js';
 export const BUILT_IN = { User, Desk, Avatar };
 export class BrowserHarbor extends Harbor {
-    db;
+    name;
     dialers = [];
+    #locked;
     #release;
-    constructor(name = 'quo', classes = {}) {
-        const db = new Idb(name);
-        super(db, async () => ({ ...BUILT_IN, ...classes }));
-        this.db = db;
+    constructor(store = 'quo', classes = {}) {
+        const s = typeof store === 'string' ? new Idb(store) : store;
+        super(s, async () => ({ ...BUILT_IN, ...classes }));
+        this.name = typeof store === 'string' ? store : 'quo';
+        this.#locked = typeof store === 'string';
     }
     // Take the lock and boot every ward kept here. A lock already held is
     // another tab's harbor over this seed, and this one refuses to boot.
     async boot() {
-        await this.#lease();
+        if (this.#locked)
+            await this.#lease();
         await super.boot();
     }
     // Hold one socket to a world's quo. route.
@@ -23,10 +26,16 @@ export class BrowserHarbor extends Harbor {
         this.dialers.push(d);
         return d;
     }
+    // The device is back: a phone out of a pocket, an app to the foreground.
+    // Every socket is told, and one that died silently is dialed again.
+    wake() {
+        for (const d of this.dialers)
+            d.wake();
+    }
     async close() {
         for (const d of this.dialers.splice(0))
             d.close();
-        this.db.close();
+        this.store.close?.();
         this.#release?.();
         this.#release = undefined;
     }
@@ -35,7 +44,7 @@ export class BrowserHarbor extends Harbor {
         if (!locks)
             return; // no web locks on this terrain: nothing vouches, as in the memory harbor
         const granted = await new Promise((ok) => {
-            void locks.request(`quo:${this.db.name}`, { ifAvailable: true }, (lock) => {
+            void locks.request(`quo:${this.name}`, { ifAvailable: true }, (lock) => {
                 if (!lock) {
                     ok(false);
                     return;
@@ -45,6 +54,6 @@ export class BrowserHarbor extends Harbor {
             });
         });
         if (!granted)
-            throw new Error(`harbor ${this.db.name} is held by another tab`);
+            throw new Error(`harbor ${this.name} is held by another tab`);
     }
 }

package/dist/harbor/capacitor.d.ts

@@ -1,4 +1,7 @@
+import type { BeingClass } from '@quo-systems/quo';
 import type { Kept, Store, WardRecord } from '@quo-systems/quo/harbor';
+import { BrowserHarbor } from './browser.ts';
+export declare function nativeHarbor(name?: string, classes?: Record<string, BeingClass>): Promise<BrowserHarbor>;
 export declare class Native implements Store {
     #private;
     readonly harbor: string;

package/dist/harbor/capacitor.js

@@ -12,11 +12,27 @@
 // with no folder is a reinstall, and the stale key is deleted; a folder
 // with no key is a restore to another device, and the unreadable files are
 // deleted. Either way the harbor starts fresh and there is never a twin.
+//
+// The harbor on a phone is the browser harbor over this store: the app
+// process is its lease, and the App plugin's foreground is its wake.
 import { Capacitor } from '@capacitor/core';
+import { App } from '@capacitor/app';
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 import { SecureStorage, KeychainAccess } from '@aparajita/capacitor-secure-storage';
 import { arithmetic } from '@quo-systems/quo/ward';
+import { BrowserHarbor } from './browser.js';
 import { sealKey, seal, open } from './seal.js';
+// The app's one harbor, booted, told `wake` every time the app comes to
+// the foreground, since a phone asleep loses its sockets silently.
+export async function nativeHarbor(name = 'quo', classes = {}) {
+    const h = new BrowserHarbor(await Native.open(name), classes);
+    await h.boot();
+    await App.addListener('appStateChange', ({ isActive }) => {
+        if (isActive)
+            h.wake();
+    });
+    return h;
+}
 const { hex, unhex } = arithmetic;
 // Where the files live: the folder iCloud does not copy on iOS, the app's
 // own files on Android, whose manifest says no backup.

package/dist/human/html.d.ts

@@ -28,6 +28,7 @@ export type Model = {
     blueprint: Blueprint | null;
     look: Look;
     tree: Node | null;
+    pages: Record<string, Node | null>;
     notice: string;
     answers: Record<string, Word>;
     pushes: JsonObject[];

package/dist/human/html.js

@@ -1,5 +1,5 @@
 import { SILENCE_TEXT, UNREACHED_TEXT, wordText } from '../beings/side.js';
-import { hint, hintFor, sanitise, groups as grouped } from '../beings/look.js';
+import { hint, hintFor, sanitise, groups as grouped, presentation } 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 ?? {}));
@@ -154,17 +154,35 @@ 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 pres = presentation(bp);
     const one = (l, prefix = '') => (a) => {
         const w = m.answers[a.name];
         const h = hint(l, a.name.startsWith(prefix) ? a.name.slice(prefix.length) : a.name);
         return `<section>${form(a, h)}${w ? face(w, a.output) : ''}</section>`;
     };
+    // an answer shown as the page asks: as text, as cards, as a list, or by its shape
+    const answer = (name, as) => {
+        const a = bp?.asks.find((x) => x.name === name);
+        const w = a ? m.answers[name] : undefined;
+        if (!a || !w)
+            return '';
+        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);
+    };
     const groups = grouped(bp);
     const taken = new Set(Object.values(groups).flatMap((g) => g.asks ?? []));
+    // A standing's section. With her page, the far tree is painted inside it
+    // through a painter of her own: a name it uses is one of her asks, carried,
+    // and never one of the carrier's or another standing's, so a far page
+    // reaches nothing outside its section; her title is the page's, and the
+    // section keeps her look. Without one, her asks are forms under her name.
     const section = (id) => {
         const g = groups[id];
         const asks = bp && g ? bp.asks.filter((a) => g.asks?.includes(a.name)) : [];
@@ -173,6 +191,19 @@ export function page(m) {
         const kept = sanitise(g.look);
         const l = look(kept);
         const prefix = `${id}-`;
+        const tree = m.pages[id];
+        if (tree) {
+            const hers = {
+                form: (name) => {
+                    const a = asks.find((x) => x.name === prefix + name);
+                    return a ? one(kept, prefix)(a) : '';
+                },
+                answer: (name, as) => (asks.some((x) => x.name === prefix + name) ? answer(prefix + name, as) : ''),
+                standing: () => '',
+                standings: () => '',
+            };
+            return `<section class="standing" data-standing="${escape(id)}"${l.style}><div class="page">${paint(tree, hers)}</div></section>`;
+        }
         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>`;
@@ -182,26 +213,14 @@ export function page(m) {
     // 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));
+            const a = bp?.asks.find((x) => x.name === name && !taken.has(x.name) && !pres.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 '';
-            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);
-        },
+        answer: (name, as) => (pres.has(name) ? '' : answer(name, as)),
         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 own = bp ? ordered(bp.asks.filter((a) => !taken.has(a.name) && !pres.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>` : '';

package/dist/human/screen.js

@@ -11,12 +11,12 @@ 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 { groups, 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: {}, tree: null, notice, answers: {}, pushes: [] };
+    const model = { blueprint: null, look: {}, tree: null, pages: {}, notice, answers: {}, pushes: [] };
     let seen = null;
     const show = () => surface.show(page(model));
     // Her describe, again: the page follows the digest.
@@ -47,14 +47,20 @@ export async function screenSide(avatar, surface, options = {}) {
             // 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) : []);
+            const trees = () => [model.tree ? answersIn(model.tree) : [], ...Object.entries(model.pages).map(([id, t]) => (t ? answersIn(t).map((n) => `${id}-${n}`) : []))].flat();
+            const shows = new Set(trees());
+            const tree = async (name) => {
+                const t = await avatar.call(name);
+                return isSilence(t) || isWord(t) ? null : sanitiseTree(t);
+            };
+            model.tree = bp.asks.some((a) => a.name === 'page') ? await tree('page') : null;
+            // and the page of every standing she carries, the same way, painted in that standing's section;
+            // a name a carried page uses is one of that standing's asks, carried, and nothing else
+            model.pages = {};
+            for (const [id, g] of Object.entries(groups(bp)))
+                if (typeof g.page === 'string' && bp.asks.some((a) => a.name === g.page))
+                    model.pages[id] = await tree(g.page);
+            const wanted = new Set(trees());
             for (const n of shows)
                 if (wanted.has(n))
                     delete model.answers[n];

package/dist/human/web.js

@@ -98,7 +98,9 @@ const CSS = [
     ':root{color-scheme:light dark;--accent:#3b6ef5;--bg:transparent;--fg:inherit;--font:system-ui,sans-serif;--radius:6px;--ink:#1c1b22;--paper:#fbfaf7;--mute:#6b6a73}',
     '@media(prefers-color-scheme:dark){:root{--ink:#ecebe6;--paper:#141318;--mute:#9a99a2}}',
     'html{background:var(--paper);color:var(--ink)}',
-    'body{font:16px/1.5 system-ui,sans-serif;max-width:40rem;margin:2rem auto;padding:0 1rem}',
+    // one column that is a phone first and a desk after: the same page, more air
+    'body{font:16px/1.5 system-ui,sans-serif;max-width:40rem;margin:1rem auto;padding:0 1rem}@media(min-width:40rem){body{margin:2rem auto}}',
+    'input:not([type=checkbox]),select,textarea{width:100%;max-width:24rem;box-sizing:border-box}',
     'nav.worlds{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.9rem;opacity:.8}nav.worlds a[aria-current]{font-weight:600}',
     'nav.relations{display:flex;flex-wrap:wrap;gap:.25rem;margin:.5rem 0}nav.relations button{background:transparent;color:inherit;border:1px solid color-mix(in srgb,currentColor 30%,transparent)}nav.relations button[aria-current]{border-color:var(--accent);font-weight:600}',
     'header,main{background:var(--bg);color:var(--fg);font-family:var(--font)}header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}header .notice{width:100%;margin:0}',
@@ -112,6 +114,10 @@ const CSS = [
     '.page .stack{display:flex;flex-direction:column;gap:.5rem}.page .row{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}',
     '.page .t-title{font-size:2rem;font-weight:600;letter-spacing:-.02em;margin:.5rem 0}.page .t-lead{font-size:1.25rem;margin:.25rem 0}.page .t-label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0}.page .t-quiet{color:var(--mute);font-size:.9rem}.page .t-body{margin:.25rem 0}',
     '.page .picture{max-height:6rem}.cards{display:flex;flex-wrap:wrap;gap:.75rem}.card{border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:var(--radius);padding:.5rem .75rem}',
+    // a row with a picture is a line about someone or something: the picture small and the words beside it, centred
+    '.page .row:has(>.picture){align-items:center;flex-wrap:nowrap}.page .row>.picture{max-height:2.75rem;flex:none}.page .row>.stack{gap:0;min-width:0}.page .row>.stack>p{margin:0}',
+    // a far page inside a standing's section: her title is a section's, not the page's
+    'section.standing .page{padding:.5rem 0}section.standing .page .t-title{font-size:1.3rem;margin:.25rem 0}',
     // the door page: one column, generous air, the mark, a word, a sentence
     'main.door{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:32rem;margin:0 auto;padding:3rem 0;font-family:ui-serif,Georgia,"Times New Roman",serif}',
     'main.door .picture{width:3.5rem;height:3.5rem;color:var(--ink);opacity:.9;margin-bottom:1.25rem}',

package/dist/mcp/runner.js

@@ -1,13 +1,15 @@
 import { word, wordText, SILENCE_TEXT, UNREACHED_TEXT } from '../beings/side.js';
+import { presentation } from '../beings/look.js';
 export const TURNS = 10;
 // Her describe, spoken as a tools array. Name, description and input are
 // verbatim, with the one narrowing an endpoint has asked for: an ask that
 // declares no properties is sent with an empty `properties`, because
-// LM Studio refuses a parameters schema without one. `look` and `page` are
-// presentation, for a screen, and are not functions.
+// LM Studio refuses a parameters schema without one. Her look, her page and
+// every carried page are presentation, for a screen, and are not functions.
 export function tools(bp) {
+    const shown = presentation(bp);
     return bp.asks
-        .filter((a) => a.name !== 'look' && a.name !== 'page')
+        .filter((a) => !shown.has(a.name))
         .map((a) => {
         const t = { type: 'function', function: { name: a.name, parameters: { properties: {}, ...a.input, type: 'object' } } };
         if (a.description !== undefined)

package/dist/mcp/server.js

@@ -11,7 +11,7 @@
 import { Server } from '@modelcontextprotocol/sdk/server/index.js';
 import { ListToolsRequestSchema, CallToolRequestSchema } from '@modelcontextprotocol/sdk/types.js';
 import { word, wordText, SILENCE_TEXT, UNREACHED_TEXT } from '../beings/side.js';
-import { hintFor, sanitise } from '../beings/look.js';
+import { hintFor, presentation, sanitise } from '../beings/look.js';
 import { isSilence, isWord, digest } from '@quo-systems/quo';
 export const NAME = 'quo';
 export const VERSION = '0.0.0';
@@ -20,10 +20,12 @@ export const DESCRIBE = { name: 'describe', description: 'the empty ask: her des
 // Her describe, spoken as tools, the empty ask first. Name, description and
 // input are verbatim; an output schema crosses when she declared one. Her
 // look, when she has one, is the hints: a title, and the annotations a host
-// reads. The `look` ask itself is presentation, and is not a tool.
+// reads. Her look, her page and every carried page are presentation, for a
+// screen, and are not tools.
 export function tools(bp, look = {}) {
+    const shown = presentation(bp);
     const asks = bp.asks
-        .filter((a) => a.name !== 'look' && a.name !== 'page') // presentation, for a screen, and not a tool
+        .filter((a) => !shown.has(a.name))
         .map((a) => {
         const t = { name: a.name, inputSchema: { ...a.input, type: 'object' } };
         if (a.description !== undefined)

package/harbor/browser.ts

@@ -1,33 +1,38 @@
 // SPDX-License-Identifier: Apache-2.0
-// The browser harbor: the core over IndexedDB, in a tab. A dialer and never
-// a listener: it holds one socket per world it is connected to, and every
-// ask to a pk it does not hold goes down a socket to the listener, which is
-// the rendezvous. The lease is a web lock on the database name, held for
-// the life of the tab: a second tab on one origin meets the lock and is a
-// screen, not a harbor. The classes are the estate's beings, handed in
-// with the bundle, plus whatever a page hands in beside them.
+// The browser harbor: the core over a store, in a webview. A dialer and
+// never a listener: it holds one socket per world it is connected to, and
+// every ask to a pk it does not hold goes down a socket to the listener,
+// which is the rendezvous. In a tab the store is IndexedDB under a name,
+// and the lease is a web lock on that name, held for the life of the tab:
+// a second tab on one origin meets the lock and is a screen, not a harbor.
+// In an app the store is handed in, and the process that holds it is the
+// lease: an app has one harbor and nothing else can open its files. The
+// classes are the estate's beings, handed in with the bundle, plus whatever
+// a page hands in beside them.
 import type { BeingClass } from '@quo-systems/quo';
 import { User, Desk, Avatar } from '../beings/index.ts';
-import { Harbor, dial, type Dialer } from '@quo-systems/quo/harbor';
+import { Harbor, dial, type Dialer, type Store } from '@quo-systems/quo/harbor';
 import { Idb } from './idb.ts';
 
 export const BUILT_IN: Record<string, BeingClass> = { User, Desk, Avatar };
 
 export class BrowserHarbor extends Harbor {
-  readonly db: Idb;
+  readonly name: string;
   readonly dialers: Dialer[] = [];
+  readonly #locked: boolean;
   #release: (() => void) | undefined;
 
-  constructor(name = 'quo', classes: Record<string, BeingClass> = {}) {
-    const db = new Idb(name);
-    super(db, async () => ({ ...BUILT_IN, ...classes }));
-    this.db = db;
+  constructor(store: string | Store = 'quo', classes: Record<string, BeingClass> = {}) {
+    const s = typeof store === 'string' ? new Idb(store) : store;
+    super(s, async () => ({ ...BUILT_IN, ...classes }));
+    this.name = typeof store === 'string' ? store : 'quo';
+    this.#locked = typeof store === 'string';
   }
 
   // Take the lock and boot every ward kept here. A lock already held is
   // another tab's harbor over this seed, and this one refuses to boot.
   override async boot(): Promise<void> {
-    await this.#lease();
+    if (this.#locked) await this.#lease();
     await super.boot();
   }
 
@@ -38,9 +43,15 @@ export class BrowserHarbor extends Harbor {
     return d;
   }
 
+  // The device is back: a phone out of a pocket, an app to the foreground.
+  // Every socket is told, and one that died silently is dialed again.
+  wake(): void {
+    for (const d of this.dialers) d.wake();
+  }
+
   async close(): Promise<void> {
     for (const d of this.dialers.splice(0)) d.close();
-    this.db.close();
+    (this.store as { close?(): void }).close?.();
     this.#release?.();
     this.#release = undefined;
   }
@@ -49,7 +60,7 @@ export class BrowserHarbor extends Harbor {
     const locks = (globalThis.navigator as Navigator | undefined)?.locks;
     if (!locks) return; // no web locks on this terrain: nothing vouches, as in the memory harbor
     const granted = await new Promise<boolean>((ok) => {
-      void locks.request(`quo:${this.db.name}`, { ifAvailable: true }, (lock) => {
+      void locks.request(`quo:${this.name}`, { ifAvailable: true }, (lock) => {
         if (!lock) {
           ok(false);
           return;
@@ -58,6 +69,6 @@ export class BrowserHarbor extends Harbor {
         return new Promise<void>((release) => (this.#release = release)); // held until close
       });
     });
-    if (!granted) throw new Error(`harbor ${this.db.name} is held by another tab`);
+    if (!granted) throw new Error(`harbor ${this.name} is held by another tab`);
   }
 }

package/harbor/capacitor.ts

@@ -12,13 +12,30 @@
 // with no folder is a reinstall, and the stale key is deleted; a folder
 // with no key is a restore to another device, and the unreadable files are
 // deleted. Either way the harbor starts fresh and there is never a twin.
+//
+// The harbor on a phone is the browser harbor over this store: the app
+// process is its lease, and the App plugin's foreground is its wake.
 import { Capacitor } from '@capacitor/core';
+import { App } from '@capacitor/app';
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 import { SecureStorage, KeychainAccess } from '@aparajita/capacitor-secure-storage';
+import type { BeingClass } from '@quo-systems/quo';
 import { arithmetic } from '@quo-systems/quo/ward';
 import type { Kept, Store, WardRecord } from '@quo-systems/quo/harbor';
+import { BrowserHarbor } from './browser.ts';
 import { sealKey, seal, open } from './seal.ts';
 
+// The app's one harbor, booted, told `wake` every time the app comes to
+// the foreground, since a phone asleep loses its sockets silently.
+export async function nativeHarbor(name = 'quo', classes: Record<string, BeingClass> = {}): Promise<BrowserHarbor> {
+  const h = new BrowserHarbor(await Native.open(name), classes);
+  await h.boot();
+  await App.addListener('appStateChange', ({ isActive }) => {
+    if (isActive) h.wake();
+  });
+  return h;
+}
+
 const { hex, unhex } = arithmetic;
 type Blob = { seed: string; partition: Record<string, unknown>; record: WardRecord };
 

package/harbor/quo-harbor.md

@@ -417,15 +417,27 @@ key is a restore to another device, and the unreadable files are deleted;
 either way the harbor starts fresh and there is never a twin. The app that
 holds the store is `packages/app/`, which the dock does not know.
 
+The harbor on a phone is the browser harbor, `browser.ts`, over that
+store: the browser harbor takes a name, which is an IndexedDB database
+under a web lock, or a store handed in, whose lease is the process that
+holds it, since an app has one harbor and nothing else can open its
+files. `nativeHarbor` in `capacitor.ts` is that harbor booted and armed:
+the App plugin's foreground event tells it `wake`, which tells every
+dialer, because a phone asleep loses its sockets silently and the wake is
+what dials them back.
+
 The proof is `packages/dock/test/terrain/ios.test.ts`, behind
-`npm run check:terrain`: the store suite, untouched, and the custody rule,
-run inside the real app in the iOS Simulator against a real Keychain and a
-real folder. The app is synced with the test's origin as its page, built
-with xcodebuild, installed fresh and launched with simctl; the page loads
-the bundled exercise, `native.ts`, runs it and posts the list back. Two
-things the plugins taught, held in the store: the secure store keeps JSON,
-so a value is read with the call that parses; and mkdir refuses a folder
-that exists, recursive or not.
+`npm run check:terrain`, inside the real app in the iOS Simulator: the
+store suite, untouched, and the custody rule against a real Keychain and
+a real folder; the whole conformance suite over two harbors on native
+stores, both dialing a daemon on the Mac's loopback through the tab's own
+probe; and the wake, the app sent behind another and brought back, its
+dialer told and its socket held again. The app is synced with the test's
+origin as its page, built with xcodebuild, installed fresh and launched
+with simctl; the page loads the bundled exercise, `native.ts`, runs it and
+posts the list back. Two things the plugins taught, held in the store:
+the secure store keeps JSON, so a value is read with the call that
+parses; and mkdir refuses a folder that exists, recursive or not.
 
 ## The link
 

package/human/html.ts

@@ -11,8 +11,8 @@
 //   page(model)           the whole page: title, notice, forms, views, pushes
 import type { Ask, Blueprint, Json, JsonObject } from '@quo-systems/quo';
 import { SILENCE_TEXT, UNREACHED_TEXT, wordText, type Word } from '../beings/side.ts';
-import { hint, hintFor, sanitise, groups as grouped, type Look, type Hint } from '../beings/look.ts';
-import { paint, type Node, type Painter } from './tree.ts';
+import { hint, hintFor, sanitise, groups as grouped, presentation, type Look, type Hint } from '../beings/look.ts';
+import { paint, type As, type Node, type Painter } from './tree.ts';
 
 // One property of an input schema, as the form needs it.
 export type Property = { type?: string; description?: string; enum?: Json[]; format?: string; default?: Json };
@@ -142,6 +142,7 @@ export type Model = {
   blueprint: Blueprint | null; // her describe for this human, or nothing yet
   look: Look; // her own look, from her `look` ask, or nothing
   tree: Node | null; // her page, from her `page` ask, or nothing: then her asks are painted as forms
+  pages: Record<string, Node | null>; // the page of each standing she carries, by id, from its carried `page` ask
   notice: string; // one line about where the human stands: in, not in, an error before an ask
   answers: Record<string, Word>; // the last answer per ask, shown under its form
   pushes: JsonObject[]; // every push from the world, newest last
@@ -181,18 +182,31 @@ export function ordered(asks: Ask[], l: Look | undefined): Ask[] {
 
 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: Model): string {
   const bp = m.blueprint;
-  const one = (l: Look | undefined, prefix = '') => (a: Ask) => {
+  const pres = presentation(bp);
+  const one =(l: Look | undefined, prefix = '') => (a: Ask) => {
     const w = m.answers[a.name];
     const h = hint(l, a.name.startsWith(prefix) ? a.name.slice(prefix.length) : a.name);
     return `<section>${form(a, h)}${w ? face(w, a.output) : ''}</section>`;
   };
+  // an answer shown as the page asks: as text, as cards, as a list, or by its shape
+  const answer = (name: string, as: As): string => {
+    const a = bp?.asks.find((x) => x.name === name);
+    const w = a ? m.answers[name] : undefined;
+    if (!a || !w) return '';
+    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);
+  };
   const groups = grouped(bp);
   const taken = new Set(Object.values(groups).flatMap((g) => g.asks ?? []));
+  // A standing's section. With her page, the far tree is painted inside it
+  // through a painter of her own: a name it uses is one of her asks, carried,
+  // and never one of the carrier's or another standing's, so a far page
+  // reaches nothing outside its section; her title is the page's, and the
+  // section keeps her look. Without one, her asks are forms under her name.
   const section = (id: string): string => {
     const g = groups[id];
     const asks = bp && g ? bp.asks.filter((a) => g.asks?.includes(a.name)) : [];
@@ -200,6 +214,19 @@ export function page(m: Model): string {
     const kept = sanitise(g!.look);
     const l = look(kept);
     const prefix = `${id}-`;
+    const tree = m.pages[id];
+    if (tree) {
+      const hers: Painter = {
+        form: (name) => {
+          const a = asks.find((x) => x.name === prefix + name);
+          return a ? one(kept, prefix)(a) : '';
+        },
+        answer: (name, as) => (asks.some((x) => x.name === prefix + name) ? answer(prefix + name, as) : ''),
+        standing: () => '',
+        standings: () => '',
+      };
+      return `<section class="standing" data-standing="${escape(id)}"${l.style}><div class="page">${paint(tree, hers)}</div></section>`;
+    }
     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>`;
@@ -209,22 +236,14 @@ export function page(m: Model): string {
   // uses looked up in her describe, so a page shows nothing her gate hid.
   const painter: Painter = {
     form: (name) => {
-      const a = bp?.asks.find((x) => x.name === name && !taken.has(x.name) && !PRESENTATION.has(x.name));
+      const a = bp?.asks.find((x) => x.name === name && !taken.has(x.name) && !pres.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 '';
-      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);
-    },
+    answer: (name, as) => (pres.has(name) ? '' : answer(name, as)),
     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 own = bp ? ordered(bp.asks.filter((a) => !taken.has(a.name) && !pres.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 as Json)}</aside>` : '';

package/human/quo-human.md

@@ -55,9 +55,9 @@ running there, from her cells, and painted by the same painter.
 - **What opens with the page.** The answers a tree shows are run on open
   when the ask needs nothing typed, beside the read-only asks her look
   marks, so the page opens with what it shows.
-- **The page is presentation.** `page` is asked once per digest, like
-  `look`; it is never a form, never a tool, and a carrier never carries it.
-  The user being answers one: her name as the title, who this device is as
+- **The page is presentation.** `page` is asked after every call, and it is
+  never a form and never a tool, hers or a carried one. The user being
+  answers one: her name as the title, who this device is as
   an answer, her standings as sections, and the two things a human does
   here by hand, waking another device and calling her by a name, as forms.
   A being does not know her own key, so her name is given: by the desk's
@@ -99,9 +99,20 @@ classes, and the ward runs them.
   same: her page is never more than one ask behind her.
 - **One section each.** Under the far being's page, each being of the world
   has her own section and her own side; the shell's own heading is dropped
-  wherever a page carries its title. Slots that bind her page to a
-  standing she holds, and the shadow root that isolates a far page, are
-  the next part of the same design.
+  wherever a page carries its title.
+- **A carried page is painted in her section.** The third source of the one
+  grammar, and no new grammar: a standing the user being carries answers
+  `page` like anyone, the carrier carries it as `<id>-page` and names it in
+  her notes, and the side asks it after every call like her own. The
+  section that was her forms under her name becomes her page under her
+  look, painted through a painter of her own: a form or an answer it names
+  is one of her asks by its bare name, carried, and a name that is not hers,
+  or a `standing` inside a page, paints as nothing. So a far page reaches
+  nothing outside its section, by construction and not by a shadow root:
+  the grammar carries no selector, no script and no stylesheet, the one
+  stylesheet is the shell's, and a root of her own would keep the shell's
+  stylesheet out of her section for no gain. The section is the root a page
+  owns.
 
 ## How a screen is made
 

package/human/screen.ts

@@ -13,7 +13,7 @@ import { isInvitation } from '../beings/link.ts';
 import type { Invitation } from '@quo-systems/quo';
 import { page, values, hintFor, type Model, type Raw } from './html.ts';
 import { sanitiseTree, answersIn } from './tree.ts';
-import { sanitise } from '../beings/look.ts';
+import { groups, sanitise } from '../beings/look.ts';
 import { isSilence, isWord } from '@quo-systems/quo';
 import type { Json } from '@quo-systems/quo';
 
@@ -36,7 +36,7 @@ export type Options = { after?: () => Promise<void>; notice?: string; admit?: (i
 export async function screenSide(avatar: Subject, surface: Surface, options: Options = {}): Promise<Serving & { model: Model; refresh(): Promise<void> }> {
   const after = options.after ?? (async () => {});
   const notice = options.notice ?? '';
-  const model: Model = { blueprint: null, look: {}, tree: null, notice, answers: {}, pushes: [] };
+  const model: Model = { blueprint: null, look: {}, tree: null, pages: {}, notice, answers: {}, pushes: [] };
   let seen: string | null = null;
   const show = () => surface.show(page(model));
 
@@ -63,12 +63,18 @@ export async function screenSide(avatar: Subject, surface: Surface, options: Opt
       // 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 as Blueprint).asks.some((a) => a.name === 'page')) {
-        const t = await avatar.call('page');
-        model.tree = isSilence(t) || isWord(t) ? null : sanitiseTree(t as Json);
-      } else model.tree = null;
-      const wanted = new Set(model.tree ? answersIn(model.tree) : []);
+      const trees = () => [model.tree ? answersIn(model.tree) : [], ...Object.entries(model.pages).map(([id, t]) => (t ? answersIn(t).map((n) => `${id}-${n}`) : []))].flat();
+      const shows = new Set(trees());
+      const tree = async (name: string) => {
+        const t = await avatar.call(name);
+        return isSilence(t) || isWord(t) ? null : sanitiseTree(t as Json);
+      };
+      model.tree = (bp as Blueprint).asks.some((a) => a.name === 'page') ? await tree('page') : null;
+      // and the page of every standing she carries, the same way, painted in that standing's section;
+      // a name a carried page uses is one of that standing's asks, carried, and nothing else
+      model.pages = {};
+      for (const [id, g] of Object.entries(groups(bp as Blueprint))) if (typeof g.page === 'string' && (bp as Blueprint).asks.some((a) => a.name === g.page)) model.pages[id] = await tree(g.page);
+      const wanted = new Set(trees());
       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

package/human/web.ts

@@ -125,7 +125,9 @@ const CSS = [
   ':root{color-scheme:light dark;--accent:#3b6ef5;--bg:transparent;--fg:inherit;--font:system-ui,sans-serif;--radius:6px;--ink:#1c1b22;--paper:#fbfaf7;--mute:#6b6a73}',
   '@media(prefers-color-scheme:dark){:root{--ink:#ecebe6;--paper:#141318;--mute:#9a99a2}}',
   'html{background:var(--paper);color:var(--ink)}',
-  'body{font:16px/1.5 system-ui,sans-serif;max-width:40rem;margin:2rem auto;padding:0 1rem}',
+  // one column that is a phone first and a desk after: the same page, more air
+  'body{font:16px/1.5 system-ui,sans-serif;max-width:40rem;margin:1rem auto;padding:0 1rem}@media(min-width:40rem){body{margin:2rem auto}}',
+  'input:not([type=checkbox]),select,textarea{width:100%;max-width:24rem;box-sizing:border-box}',
   'nav.worlds{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.9rem;opacity:.8}nav.worlds a[aria-current]{font-weight:600}',
   'nav.relations{display:flex;flex-wrap:wrap;gap:.25rem;margin:.5rem 0}nav.relations button{background:transparent;color:inherit;border:1px solid color-mix(in srgb,currentColor 30%,transparent)}nav.relations button[aria-current]{border-color:var(--accent);font-weight:600}',
   'header,main{background:var(--bg);color:var(--fg);font-family:var(--font)}header{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}header .notice{width:100%;margin:0}',
@@ -139,6 +141,10 @@ const CSS = [
   '.page .stack{display:flex;flex-direction:column;gap:.5rem}.page .row{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}',
   '.page .t-title{font-size:2rem;font-weight:600;letter-spacing:-.02em;margin:.5rem 0}.page .t-lead{font-size:1.25rem;margin:.25rem 0}.page .t-label{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0}.page .t-quiet{color:var(--mute);font-size:.9rem}.page .t-body{margin:.25rem 0}',
   '.page .picture{max-height:6rem}.cards{display:flex;flex-wrap:wrap;gap:.75rem}.card{border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:var(--radius);padding:.5rem .75rem}',
+  // a row with a picture is a line about someone or something: the picture small and the words beside it, centred
+  '.page .row:has(>.picture){align-items:center;flex-wrap:nowrap}.page .row>.picture{max-height:2.75rem;flex:none}.page .row>.stack{gap:0;min-width:0}.page .row>.stack>p{margin:0}',
+  // a far page inside a standing's section: her title is a section's, not the page's
+  'section.standing .page{padding:.5rem 0}section.standing .page .t-title{font-size:1.3rem;margin:.25rem 0}',
   // the door page: one column, generous air, the mark, a word, a sentence
   'main.door{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:32rem;margin:0 auto;padding:3rem 0;font-family:ui-serif,Georgia,"Times New Roman",serif}',
   'main.door .picture{width:3.5rem;height:3.5rem;color:var(--ink);opacity:.9;margin-bottom:1.25rem}',

package/mcp/runner.ts

@@ -13,6 +13,7 @@
 import type { Blueprint, JsonObject } from '@quo-systems/quo';
 import type { Avatar } from '../beings/avatar.ts';
 import { word, wordText, SILENCE_TEXT, UNREACHED_TEXT, type Serving } from '../beings/side.ts';
+import { presentation } from '../beings/look.ts';
 
 // Where the model is. `key` is a bearer for endpoints that want one, read
 // from the device and never from cells. `turns` is the ceiling of model
@@ -32,11 +33,12 @@ type Completion = { choices: { message: { role: 'assistant'; content: string | n
 // Her describe, spoken as a tools array. Name, description and input are
 // verbatim, with the one narrowing an endpoint has asked for: an ask that
 // declares no properties is sent with an empty `properties`, because
-// LM Studio refuses a parameters schema without one. `look` and `page` are
-// presentation, for a screen, and are not functions.
+// LM Studio refuses a parameters schema without one. Her look, her page and
+// every carried page are presentation, for a screen, and are not functions.
 export function tools(bp: Blueprint): Tool[] {
+  const shown = presentation(bp);
   return bp.asks
-    .filter((a) => a.name !== 'look' && a.name !== 'page')
+    .filter((a) => !shown.has(a.name))
     .map((a) => {
       const t: Tool = { type: 'function', function: { name: a.name, parameters: { properties: {}, ...a.input, type: 'object' } } };
       if (a.description !== undefined) t.function.description = a.description;

package/mcp/server.ts

@@ -13,7 +13,7 @@ import type { Transport } from '@modelcontextprotocol/sdk/shared/transport.js';
 import { ListToolsRequestSchema, CallToolRequestSchema, type CallToolResult, type Tool } from '@modelcontextprotocol/sdk/types.js';
 import type { Blueprint, JsonObject } from '@quo-systems/quo';
 import { word, wordText, SILENCE_TEXT, UNREACHED_TEXT, type Serving, type Subject } from '../beings/side.ts';
-import { hintFor, sanitise, type Look } from '../beings/look.ts';
+import { hintFor, presentation, sanitise, type Look } from '../beings/look.ts';
 import { isSilence, isWord, digest } from '@quo-systems/quo';
 import type { Json } from '@quo-systems/quo';
 
@@ -28,10 +28,12 @@ export const DESCRIBE: Tool = { name: 'describe', description: 'the empty ask: h
 // Her describe, spoken as tools, the empty ask first. Name, description and
 // input are verbatim; an output schema crosses when she declared one. Her
 // look, when she has one, is the hints: a title, and the annotations a host
-// reads. The `look` ask itself is presentation, and is not a tool.
+// reads. Her look, her page and every carried page are presentation, for a
+// screen, and are not tools.
 export function tools(bp: Blueprint, look: Look = {}): Tool[] {
+  const shown = presentation(bp);
   const asks = bp.asks
-    .filter((a) => a.name !== 'look' && a.name !== 'page') // presentation, for a screen, and not a tool
+    .filter((a) => !shown.has(a.name))
     .map((a) => {
       const t: Tool = { name: a.name, inputSchema: { ...a.input, type: 'object' } };
       if (a.description !== undefined) t.description = a.description;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quo-systems/dock",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "The dock: what every estate on Quo needs and nobody writes twice. A daemon and the quo command, the front desk, the user being and the avatar, harbors on disk, in a tab and on the edge, the model sides and the screen.",
   "keywords": [
     "quo",
@@ -76,10 +76,11 @@
   },
   "dependencies": {
     "@aparajita/capacitor-secure-storage": "^8.0.0",
+    "@capacitor/app": "^8.1.1",
     "@capacitor/core": "^8.5.1",
     "@capacitor/filesystem": "^8.1.3",
     "@modelcontextprotocol/sdk": "^1.30.0",
-    "@quo-systems/quo": "^0.2.4",
+    "@quo-systems/quo": "^0.2.5",
     "esbuild": "^0.28.2",
     "ws": "^8.21.3"
   },