@graview/embed 0.1.37 → 0.1.39

package/README.md

@@ -108,6 +108,32 @@ draws them first. Until a face's chunk arrives its box stands empty
 (`aria-busy`), and `handle.drawn()` resolves once the face asked for is on
 the page — after `mount`, and after every change of face.
 
+A face on the page is not yet a place a person can read: its parts, the
+fonts, a worker view's drawing and its pictures may still be on their way.
+Once the place the reader is on has drawn and settled — every part drawn
+on it arrived, the fonts and images loaded, each worker view drawn (or
+stopped, what stands in its place drawn), each frame guest drawn (or
+silent past its `limits.readyMs`, eight seconds by default) and nothing
+moving for 200 ms —
+the embed's root wears `data-graview-drawn`, its value the place's path,
+and `onDrawn(place)` is told where it is as `where()` says it. A move to
+another place takes the attribute off in the same commit, and the next
+place puts it back as it settles. A place that never stops moving is said
+drawn after ten seconds all the same. A host picturing a place headless
+waits for the attribute rather than a timer:
+
+```ts
+await page.waitForSelector("[data-graview-drawn]");
+```
+
+A frame guest (`guestView({ url })`) has drawn once it has said it is
+ready, been handed what it shows and asked for its height — or stayed
+quiet for a moment after, if it never asks — and its frame says
+`data-guest-view-drawn`; one that never says it is ready says
+`data-guest-view-failed="silent"`. Until one or the other, the frame is
+`aria-busy`, and so is its holder until the frame's host has drawn the
+frame in it.
+
 A host that knows its face before it mounts starts that chunk at once,
 beside its own requests, and an embed mounted once it is here draws it in
 the first commit:
@@ -219,6 +245,51 @@ handle.unmount();
 handle = mount(root, { app, store, at });
 ```
 
+## A view proposed and not kept
+
+A chat that proposes a worker view can try it headless and be told what it
+drew in words; to see it at a phone's width in dark it had to keep it
+first. `draftView` draws one for the seat at the keyboard without keeping
+it: its manifest and its `source` (or `worker`, and anything else a
+`WorkerViewDefinition` takes but `draft`):
+
+```ts
+mount(root, { app, remote, routing: "address", draftView: { manifest, source, author: "Proposed by Claude" } });
+```
+
+It is drawn where its manifest attaches — the home, a kind's list at the
+place its title names (`/places/<title>`), each record's page — under one
+line, "Draft — <title> · Not kept", in a group named "Draft: <title>"
+(`[data-graview-draft-view="<name>"]`), as the seat's drawn panel is marked
+on `/~draft`. A kept view of the same name is the one it stands in for: the
+host's `views` may register it as ever, and it is drawn nowhere beside the
+draft. A draft that is stopped says why in its place rather than standing
+the kind's own face there. Nothing of it is kept: it is registered under no
+name, so the place menu offers no Hide or Delete and `keptViews` is asked
+nothing; the store is not written; the next page, handed no draft, has
+none. The worker's host is fetched before the embed draws, and only when a
+draft is handed. With `data-graview-drawn`, a host pictures the proposal
+once it has drawn. `graview preview` and `graview shots` take one as
+`--view <view.js> --manifest <manifest.json>`.
+
+A host picturing several proposals in turn swaps them in place rather than
+mounting again: `handle.setDraftView(draft)` draws another, and
+`handle.setDraftView(null)` the app's own views again. The store, the place
+and the seat stay; `data-graview-drawn` comes off in the call and comes
+back, with `onDrawn` told again, once the new draft has drawn and settled:
+
+```ts
+for (const proposal of proposals) {
+  handle.setDraftView(proposal);
+  await page.waitForSelector("[data-graview-drawn]");
+  // picture it
+}
+```
+
+Under a base path — the page the app, served at `/a/<app>` — a draft of a
+kind's view is drawn at `/a/<app>/places/<title>`, and the attribute's
+value is the place's path within the app (`/places/<title>`).
+
 ## What stands over what
 
 Every popover, menu and list of suggestions the embed draws — the profile,
@@ -376,6 +447,12 @@ that and does not bundle the scene, the Graview or the studio:
 import { mount } from "@graview/embed/pages";
 ```
 
+It says when a page has drawn as the whole embed does — `onDrawn(place)`,
+and `data-graview-drawn` (`DRAWN_ATTRIBUTE`) on its root — and takes a
+`draftView`, swapped in place with `handle.setDraftView`, drawn and marked
+as the whole embed draws one, the worker's host fetched only when a draft
+is handed.
+
 Bundled for the browser without React, the pages face alone is about 500 KB
 minified (165 KB gzipped); the whole embed loads about 750 KB (190 KB) before a
 face is fetched, and every face about 1.28 MB (370 KB);

package/dist/draft.d.ts

@@ -0,0 +1,29 @@
+import type { WorkerViewDefinition } from "@graview/guest/host/views";
+import type { DraftOver } from "./frame.js";
+/** A view proposed and not kept (FR-187): a worker view's definition, its code as `source` — a plain script against the `graview` global — or `worker`. */
+export type EmbedDraftView = Omit<WorkerViewDefinition, "worker" | "draft"> & ({
+    readonly source: string;
+    readonly worker?: undefined;
+} | {
+    readonly worker: WorkerViewDefinition["worker"];
+    readonly source?: undefined;
+});
+export declare const fetchDraftHost: () => Promise<void>;
+/** Whether a draft handed now must wait for the worker's host before the embed first draws. */
+export declare const draftWaits: (draft: EmbedDraftView | null | undefined) => boolean;
+/** Stands in for the embed while what it draws with arrives — the worker's host for a draft, the rules for a place handed back — then draws it. */
+export declare function Settling({ onReady, fetch }: {
+    readonly onReady: () => void;
+    readonly fetch: () => Promise<void>;
+}): null;
+/**
+ * How the frame registers the draft over the app's views, kept while the
+ * same draft is handed, and which draft it is. A draft handed after the
+ * embed first drew, before the worker's host is here, is registered once
+ * the host arrives; the embed is not drawn again from nothing for it.
+ */
+export declare function useDraft(draft: EmbedDraftView | null | undefined): {
+    readonly over: DraftOver | undefined;
+    readonly n: number;
+};
+//# sourceMappingURL=draft.d.ts.map

package/dist/draft.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draft.d.ts","sourceRoot":"","sources":["../src/draft.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAQ5C,2JAA2J;AAC3J,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC;IAAE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,QAAQ,CAAC,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC;AAW5N,eAAO,MAAM,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAsB,CAAC;AAEtE,+FAA+F;AAC/F,eAAO,MAAM,UAAU,GAAI,OAAO,cAAc,GAAG,IAAI,GAAG,SAAS,KAAG,OAAoD,CAAC;AAE3H,mJAAmJ;AACnJ,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAAE,QAGjH;AAKD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,GAAG;IAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAqB/H"}

package/dist/draft.js

@@ -0,0 +1,54 @@
+import { retryingImport } from "@graview/core/retry";
+import { partArriving } from "@graview/react/provider";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
+/*
+ * THE WORKER'S HOST FOR A DRAFT, fetched only when one is handed: a page
+ * that is handed none never loads it for this. Counted while it is on its
+ * way (`partArriving`), so a place a draft is handed to after it first drew
+ * is not said drawn before the draft is in it (FR-188).
+ */
+let draftHost;
+const draftChunk = retryingImport(() => import("@graview/guest/host/views"));
+const load = () => draftChunk().then((module) => void (draftHost = module), () => new Promise((resolve) => setTimeout(resolve, 2_000)).then(load));
+export const fetchDraftHost = partArriving(load);
+/** Whether a draft handed now must wait for the worker's host before the embed first draws. */
+export const draftWaits = (draft) => Boolean(draft) && draftHost === undefined;
+/** Stands in for the embed while what it draws with arrives — the worker's host for a draft, the rules for a place handed back — then draws it. */
+export function Settling({ onReady, fetch }) {
+    useLayoutEffect(() => void fetch().then(onReady), [onReady, fetch]);
+    return null;
+}
+/** Each draft handed, counted: what the drawn signal is watched again for when a draft is swapped (`setDraftView`). */
+let handed = 0;
+/**
+ * How the frame registers the draft over the app's views, kept while the
+ * same draft is handed, and which draft it is. A draft handed after the
+ * embed first drew, before the worker's host is here, is registered once
+ * the host arrives; the embed is not drawn again from nothing for it.
+ */
+export function useDraft(draft) {
+    const [host, setHost] = useState(() => draftHost);
+    useEffect(() => {
+        if (!draft || host)
+            return;
+        let gone = false;
+        void fetchDraftHost().then(() => {
+            if (!gone)
+                setHost(draftHost);
+        });
+        return () => {
+            gone = true;
+        };
+    }, [draft, host]);
+    const n = useMemo(() => (handed += 1), [draft]);
+    const over = useMemo(() => {
+        const views = host ?? draftHost;
+        if (!draft || !views)
+            return undefined;
+        const { source, worker, ...rest } = draft;
+        const definition = { ...rest, worker: worker ?? { source: source }, draft: true };
+        return { name: draft.manifest.name, home: draft.manifest.attach === "home", register: (registry) => views.registerWorkerView(registry, definition) };
+    }, [draft, host]);
+    return { over, n };
+}
+//# sourceMappingURL=draft.js.map

package/dist/draft.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draft.js","sourceRoot":"","sources":["../src/draft.ts"],"names":[],"mappings":"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"}

package/dist/drawn.d.ts

@@ -0,0 +1,21 @@
+import type { EmbedWhere } from "./where.js";
+/** The attribute the embed's root wears while the place it is on has drawn and settled. */
+export declare const DRAWN_ATTRIBUTE = "data-graview-drawn";
+/**
+ * Watch a place settle: takes `data-graview-drawn` off the root at once,
+ * and puts it back — `path` its value — once the place has drawn and
+ * nothing has moved for a moment, then calls `settled`. The answer stops
+ * watching; a place left before it settled is never said drawn.
+ */
+export declare function watchDrawn(root: HTMLElement, path: string, settled: () => void): () => void;
+/**
+ * SAYS WHEN THE PLACE HAS DRAWN AND SETTLED, on the root and to the host:
+ * watched again from nothing each time `key` moves — another page, another
+ * stop on the scene, another face, another draft — so the attribute comes
+ * off in the commit that moved and goes back on once the new place
+ * settles. The whole embed and the pages alone say it alike.
+ */
+export declare function useDrawnSignal(rootRef: {
+    readonly current: HTMLElement | null;
+}, key: string, place: EmbedWhere, onDrawn: ((place: EmbedWhere) => void) | undefined): void;
+//# sourceMappingURL=drawn.d.ts.map

package/dist/drawn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawn.d.ts","sourceRoot":"","sources":["../src/drawn.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAgB7C,2FAA2F;AAC3F,eAAO,MAAM,eAAe,uBAAuB,CAAC;AAyCpD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAmD3F;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE;IAAE,QAAQ,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAiB1K"}

package/dist/drawn.js

@@ -0,0 +1,151 @@
+import { partsArriving } from "@graview/react/provider";
+import { useLayoutEffect, useRef } from "react";
+/*
+ * THE PAGE SAYS WHEN A PLACE HAS DRAWN AND SETTLED (FR-188).
+ *
+ * A host picturing a place — Graview Cloud's describe_place, headless —
+ * waited on a guess: the opening frame gone, the network quiet, then 600
+ * ms. The embed knows better. Once the place it is on has drawn — the face
+ * here, every part drawn on it arrived (or said it did not), the fonts and
+ * images loaded, every worker view drawn (or failed, its plain face drawn
+ * in its place), every frame guest drawn (or silent past its time) — and nothing in it has moved for a moment, its root says
+ * `data-graview-drawn`, its value the place's path, and the host is told
+ * `onDrawn(place)`. A move to another place takes it off in the same
+ * commit, and the new place says it again once it settles.
+ */
+/** The attribute the embed's root wears while the place it is on has drawn and settled. */
+export const DRAWN_ATTRIBUTE = "data-graview-drawn";
+/** How long nothing may move before a place is said to have settled. */
+const QUIET_MS = 200;
+/** How often a place still settling is looked at. */
+const EVERY_MS = 50;
+/** A place that never stops moving — a clock, a view that draws forever — is said drawn after this long all the same. */
+const MOST_MS = 10_000;
+const now = () => (typeof performance !== "undefined" ? performance.now() : Date.now());
+/** Every image the place draws, the worker views' own among them (their shadow roots are open). */
+function images(root) {
+    const all = [...root.querySelectorAll("img")];
+    for (const view of root.querySelectorAll("[data-worker-view]"))
+        if (view.shadowRoot)
+            all.push(...view.shadowRoot.querySelectorAll("img"));
+    return all;
+}
+/** Whether what the place draws is all here: the face, its parts, its fonts, its images and its views. */
+function here(root) {
+    const fonts = root.ownerDocument.fonts;
+    if (fonts?.status === "loading")
+        return false;
+    if (partsArriving() > 0)
+        return false;
+    // The face on its way, or a part of it saying it is busy: a frame guest among them, until it has drawn or its time is up.
+    if (root.querySelector('[aria-busy="true"]'))
+        return false;
+    // An image off screen and lazy is not waited for: it never loads until it is scrolled to.
+    if (images(root).some((image) => !image.complete && image.loading !== "lazy"))
+        return false;
+    // Each worker view drawn, or failed with its plain face: the region inside its place says which.
+    for (const place of root.querySelectorAll("[data-worker-view-place]")) {
+        if (!place.querySelector("[data-worker-view][data-worker-view-drawn], [data-worker-view][data-worker-view-failed]"))
+            return false;
+    }
+    return true;
+}
+/** What a move would change: the sizes of the root, the face and each worker view, whose own drawing the observer cannot see. */
+function measure(root) {
+    const content = root.querySelector("[data-embed-content]");
+    const views = [...root.querySelectorAll("[data-worker-view]")].map((view) => `${view.offsetWidth}x${view.offsetHeight}`);
+    return `${root.scrollWidth}x${root.scrollHeight}|${content ? `${content.scrollWidth}x${content.scrollHeight}` : ""}|${views.join(",")}`;
+}
+/**
+ * Watch a place settle: takes `data-graview-drawn` off the root at once,
+ * and puts it back — `path` its value — once the place has drawn and
+ * nothing has moved for a moment, then calls `settled`. The answer stops
+ * watching; a place left before it settled is never said drawn.
+ */
+export function watchDrawn(root, path, settled) {
+    root.removeAttribute(DRAWN_ATTRIBUTE);
+    const window = root.ownerDocument.defaultView;
+    if (!window)
+        return () => undefined;
+    const started = now();
+    let moved = started;
+    let last = measure(root);
+    let stopped = false;
+    let timer;
+    const observer = typeof MutationObserver === "undefined" ? undefined : new MutationObserver((records) => {
+        if (records.some((record) => !(record.target === root && record.attributeName === DRAWN_ATTRIBUTE)))
+            moved = now();
+    });
+    observer?.observe(root, { childList: true, subtree: true, characterData: true, attributes: true });
+    const stop = () => {
+        stopped = true;
+        observer?.disconnect();
+        if (timer !== undefined)
+            clearTimeout(timer);
+    };
+    // Said after the browser has painted what settled, where it paints at all.
+    // A tab out of sight paints nothing, so a frame that never comes is not waited for past a tenth of a second.
+    const afterPaint = (then) => {
+        let once = false;
+        const go = () => {
+            if (once)
+                return;
+            once = true;
+            then();
+        };
+        if (typeof window.requestAnimationFrame === "function")
+            window.requestAnimationFrame(() => setTimeout(go, 0));
+        setTimeout(go, 100);
+    };
+    const look = () => {
+        if (stopped)
+            return;
+        const size = measure(root);
+        if (size !== last) {
+            last = size;
+            moved = now();
+        }
+        const at = now();
+        if ((here(root) && at - moved >= QUIET_MS) || at - started >= MOST_MS) {
+            afterPaint(() => {
+                if (stopped)
+                    return;
+                stop();
+                root.setAttribute(DRAWN_ATTRIBUTE, path);
+                settled();
+            });
+            return;
+        }
+        timer = setTimeout(look, EVERY_MS);
+    };
+    timer = setTimeout(look, EVERY_MS);
+    return stop;
+}
+/**
+ * SAYS WHEN THE PLACE HAS DRAWN AND SETTLED, on the root and to the host:
+ * watched again from nothing each time `key` moves — another page, another
+ * stop on the scene, another face, another draft — so the attribute comes
+ * off in the commit that moved and goes back on once the new place
+ * settles. The whole embed and the pages alone say it alike.
+ */
+export function useDrawnSignal(rootRef, key, place, onDrawn) {
+    const latest = useRef({ place, onDrawn });
+    latest.current = { place, onDrawn };
+    useLayoutEffect(() => {
+        const watch = (root) => watchDrawn(root, latest.current.place.path, () => latest.current.onDrawn?.(latest.current.place));
+        if (rootRef.current)
+            return watch(rootRef.current);
+        // First drawn below the root, its ref is set after this effect runs: watched once the commit is done (there is nothing to take off yet).
+        let stop;
+        let gone = false;
+        queueMicrotask(() => {
+            if (!gone && rootRef.current)
+                stop = watch(rootRef.current);
+        });
+        return () => {
+            gone = true;
+            stop?.();
+        };
+    }, [key, rootRef]);
+}
+//# sourceMappingURL=drawn.js.map

package/dist/drawn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawn.js","sourceRoot":"","sources":["../src/drawn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGhD;;;;;;;;;;;;GAYG;AAEH,2FAA2F;AAC3F,MAAM,CAAC,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAEpD,wEAAwE;AACxE,MAAM,QAAQ,GAAG,GAAG,CAAC;AACrB,qDAAqD;AACrD,MAAM,QAAQ,GAAG,EAAE,CAAC;AACpB,yHAAyH;AACzH,MAAM,OAAO,GAAG,MAAM,CAAC;AAEvB,MAAM,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;AAExF,mGAAmG;AACnG,SAAS,MAAM,CAAC,IAAiB;IAC/B,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;QAAE,IAAI,IAAI,CAAC,UAAU;YAAE,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1I,OAAO,GAAG,CAAC;AACb,CAAC;AAED,0GAA0G;AAC1G,SAAS,IAAI,CAAC,IAAiB;IAC7B,MAAM,KAAK,GAAI,IAAI,CAAC,aAA4D,CAAC,KAAK,CAAC;IACvF,IAAI,KAAK,EAAE,MAAM,KAAK,SAAS;QAAE,OAAO,KAAK,CAAC;IAC9C,IAAI,aAAa,EAAE,GAAG,CAAC;QAAE,OAAO,KAAK,CAAC;IACtC,0HAA0H;IAC1H,IAAI,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC;QAAE,OAAO,KAAK,CAAC;IAC3D,0FAA0F;IAC1F,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC;QAAE,OAAO,KAAK,CAAC;IAC5F,iGAAiG;IACjG,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,EAAE,CAAC;QACtE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,yFAAyF,CAAC;YAAE,OAAO,KAAK,CAAC;IACpI,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,iIAAiI;AACjI,SAAS,OAAO,CAAC,IAAiB;IAChC,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAc,oBAAoB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IACtI,OAAO,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAC1I,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,IAAiB,EAAE,IAAY,EAAE,OAAmB;IAC7E,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;IAC9C,IAAI,CAAC,MAAM;QAAE,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC;IACpC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC;IACtB,IAAI,KAAK,GAAG,OAAO,CAAC;IACpB,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,IAAI,OAAO,GAAG,KAAK,CAAC;IACpB,IAAI,KAAgD,CAAC;IACrD,MAAM,QAAQ,GAAG,OAAO,gBAAgB,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE;QACtG,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,KAAK,IAAI,IAAI,MAAM,CAAC,aAAa,KAAK,eAAe,CAAC,CAAC;YAAE,KAAK,GAAG,GAAG,EAAE,CAAC;IACrH,CAAC,CAAC,CAAC;IACH,QAAQ,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;IACnG,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,OAAO,GAAG,IAAI,CAAC;QACf,QAAQ,EAAE,UAAU,EAAE,CAAC;QACvB,IAAI,KAAK,KAAK,SAAS;YAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IAC/C,CAAC,CAAC;IACF,2EAA2E;IAC3E,6GAA6G;IAC7G,MAAM,UAAU,GAAG,CAAC,IAAgB,EAAE,EAAE;QACtC,IAAI,IAAI,GAAG,KAAK,CAAC;QACjB,MAAM,EAAE,GAAG,GAAG,EAAE;YACd,IAAI,IAAI;gBAAE,OAAO;YACjB,IAAI,GAAG,IAAI,CAAC;YACZ,IAAI,EAAE,CAAC;QACT,CAAC,CAAC;QACF,IAAI,OAAO,MAAM,CAAC,qBAAqB,KAAK,UAAU;YAAE,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QAC9G,UAAU,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;IACtB,CAAC,CAAC;IACF,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,IAAI,OAAO;YAAE,OAAO;QACpB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,IAAI,GAAG,IAAI,CAAC;YACZ,KAAK,GAAG,GAAG,EAAE,CAAC;QAChB,CAAC;QACD,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,QAAQ,CAAC,IAAI,EAAE,GAAG,OAAO,IAAI,OAAO,EAAE,CAAC;YACtE,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,OAAO;oBAAE,OAAO;gBACpB,IAAI,EAAE,CAAC;gBACP,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;gBACzC,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QACD,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACrC,CAAC,CAAC;IACF,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACnC,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,OAAiD,EAAE,GAAW,EAAE,KAAiB,EAAE,OAAkD;IAClK,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;IACpC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,CAAC,IAAiB,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QACvI,IAAI,OAAO,CAAC,OAAO;YAAE,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACnD,yIAAyI;QACzI,IAAI,IAA8B,CAAC;QACnC,IAAI,IAAI,GAAG,KAAK,CAAC;QACjB,cAAc,CAAC,GAAG,EAAE;YAClB,IAAI,CAAC,IAAI,IAAI,OAAO,CAAC,OAAO;gBAAE,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,IAAI,GAAG,IAAI,CAAC;YACZ,IAAI,EAAE,EAAE,CAAC;QACX,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;AACrB,CAAC"}

package/dist/embed.d.ts

@@ -3,6 +3,7 @@ import type { StudioOffered, StudioOnApply, StudioPlace as StudioPlaceType } fro
 import { type Notice, type NoticeHandle } from "@graview/primitives/frame";
 import { type Scheme } from "@graview/react/provider";
 import type { EmbedWhere } from "./where.js";
+import { type EmbedDraftView } from "./draft.js";
 import { AUTO_SCENE_HEIGHT, type EmbedFace, type EmbedHostContext, type EmbedRemote, type FrameOptions } from "./frame.js";
 /**
  * FETCH A FACE BEFORE IT IS DRAWN (FR-57). A host that knows which face it
@@ -58,12 +59,16 @@ export interface EmbedOptions<S extends AnySchema = AnySchema> extends FrameOpti
      */
     readonly studio?: false | EmbedStudio;
     /**
-     * TOLD WHEN A FACE IS ON THE PAGE (FR-57). Each face is fetched as it is
-     * first drawn, so the frame stands before the face does; this is called
-     * with the face asked for once it has drawn (below `pagesBelow`, drawn
-     * as the pages that stand in for it), each time the face changes.
+     * TOLD WHEN A PLACE HAS DRAWN AND SETTLED (FR-188): once the place the
+     * reader is on — its face here, every part drawn on it arrived, the fonts
+     * and images loaded, each worker view drawn (or failed, its plain face
+     * drawn instead) — has not moved for a moment. It is handed the place as
+     * `where()` says it. The embed's root wears `data-graview-drawn` (the
+     * place's path) from then until the reader moves: a move takes it off in
+     * the same commit, and the next place puts it back as it settles. A host
+     * picturing a place waits for the attribute rather than a guess.
      */
-    readonly onDrawn?: (face: EmbedFace) => void;
+    readonly onDrawn?: (place: EmbedWhere) => void;
     /**
      * THE QUICK ASK on both faces (Roadmap f-quick-ask-framework): ⌘K's
      * command bar beside what is selected, and the answer cards it leaves.
@@ -79,7 +84,20 @@ export interface EmbedOptions<S extends AnySchema = AnySchema> extends FrameOpti
      * host that must remount on a new declaration hands the old place back here.
      */
     readonly at?: EmbedWhere;
+    /**
+     * A VIEW PROPOSED AND NOT KEPT (FR-187): a worker view's manifest and its
+     * `source` (or `worker`), drawn for the seat at the keyboard where its
+     * manifest attaches — the home, a kind's list, a record — over the app's
+     * own views, and marked "Draft — <title> · Not kept". A kept view of the
+     * same name is the one it stands in for. Nothing of it is kept: it is in
+     * no store and no `keptViews`, the place menu offers it nothing, and it
+     * is gone when the page closes. The worker's host is fetched before the
+     * embed draws, only when a draft is handed. `handle.setDraftView` swaps
+     * it for another, or none, without a remount.
+     */
+    readonly draftView?: EmbedDraftView | null;
 }
+export type { EmbedDraftView } from "./draft.js";
 /** The studio an embed offers, for a host that keeps the declaration itself. */
 export interface EmbedStudio {
     /**
@@ -121,6 +139,14 @@ export interface EmbedProps<S extends AnySchema = AnySchema> extends EmbedOption
     readonly onOpening?: (face: EmbedFace) => void;
     /** Called when a seat is taken in the person's menu; the host decides who sits. */
     readonly onSeat?: (principal: Principal) => void;
+    /**
+     * TOLD WHEN A FACE IS ON THE PAGE (FR-57). Each face is fetched as it is
+     * first drawn, so the frame stands before the face does; this is called
+     * with the face asked for once it has drawn (below `pagesBelow`, drawn
+     * as the pages that stand in for it), each time the face changes. What
+     * `handle.drawn()` waits for; `onDrawn` waits for the place to settle.
+     */
+    readonly onFaceDrawn?: (face: EmbedFace) => void;
 }
 /** The face a stop implies: a stop at altitude opens the Graview, anything else the scene (FR-132). */
 export declare function faceOf(stop: string | undefined): EmbedFace;
@@ -182,6 +208,14 @@ export interface EmbedHandle {
     setHostContext(context: EmbedHostContext): void;
     /** Re-dress the embed: another brand, or the same brand with a different kit. */
     setBrand(brand: Brand | undefined): void;
+    /**
+     * ANOTHER VIEW PROPOSED AND NOT KEPT, OR NONE (FR-187): the draft drawn
+     * where it attaches swapped in place, without a remount — the store, the
+     * place and the seat stay. `data-graview-drawn` comes off in the call and
+     * returns once the new draft has drawn and settled; `null` draws the
+     * app's own views again.
+     */
+    setDraftView(draft: EmbedDraftView | null): void;
     /**
      * Resolves once the face now asked for is drawn (FR-57). The frame is on
      * the page when `mount` returns; each face is fetched as it is first

package/dist/embed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../src/embed.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"embed.d.ts","sourceRoot":"","sources":["../src/embed.tsx"],"names":[],"mappings":"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"}

package/dist/embed.js

@@ -7,6 +7,8 @@ import { createNoticeBoard, quickAskOf } from "@graview/primitives/frame";
 import { ErrorReportContext, GraviewProvider, lazyModule, markLanded, openingView, useNavigation } from "@graview/react/provider";
 import { AddressBar, atTheBareHome, faceAtAddress, holdsNothing, landing, placed, stopAtAddress, whereTheSceneOpens } from "./address.js";
 import { createContext, createElement, Suspense, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useDrawnSignal } from "./drawn.js";
+import { draftWaits, fetchDraftHost, Settling, useDraft } from "./draft.js";
 import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
 import { AUTO_SCENE_HEIGHT, FaceBoundary, FrameBar, FrameFirstLook, FrameNotices, providerProps, storeOf, useErrorReport, useFrame, useIntrinsicHeight, useReady, titleBelow, useSteering, useViews, } from "./frame.js";
@@ -181,13 +183,22 @@ export function opensOnTheHome(app, views) {
 export function Embed(props) {
     const [, ready] = useState(false);
     const arrived = useCallback(() => ready(true), []);
+    const drew = useRef(false);
     // A place handed back is settled before the embed draws: until the rules for it are here, nothing stands in the element.
-    return props.at && !settling ? _jsx(Settling, { onReady: arrived }) : _jsx(Drawing, { ...props });
+    if (props.at && !settling)
+        return _jsx(Settling, { onReady: arrived, fetch: fetchSettling });
+    // A draft is drawn with the app's own views from the first frame (FR-187): until the worker's host is here, nothing stands in the element.
+    // One handed later (`setDraftView`) is drawn in once the host arrives, never by drawing the embed again from nothing.
+    if (!drew.current && draftWaits(props.draftView))
+        return _jsx(Settling, { onReady: arrived, fetch: fetchDraftHost });
+    drew.current = true;
+    return _jsx(Drawing, { ...props });
 }
 function Drawing(props) {
     const { app, stop, bar = true, standing = "Everything is in order", principal, heading = 2 } = props;
     const { rootRef, scope, css, scheme, store, presence, brand, auto, height } = useFrame(props);
-    const views = useViews(props, frameworkViewDoors);
+    const draft = useDraft(props.draftView);
+    const views = useViews(props, frameworkViewDoors, draft.over);
     /*
      * THE FACE IT OPENS ON (FR-136). When the host names none: the home, when
      * the app has a home view and the declaration names no other first place
@@ -302,8 +313,8 @@ function Drawing(props) {
     useOtherFaceWhenIdle(shown, width);
     const report = useErrorReport(props.onError, shown);
     const ready = useReady(props.onReady, shown);
-    const drawnTold = useRef(props.onDrawn);
-    drawnTold.current = props.onDrawn;
+    const drawnTold = useRef(props.onFaceDrawn);
+    drawnTold.current = props.onFaceDrawn;
     const drawn = useCallback((asked, drew) => {
         ready(drew);
         drawnTold.current?.(asked);
@@ -400,7 +411,7 @@ function Drawing(props) {
      */
     return (_jsxs("section", { ref: rootRef, className: scope, "aria-label": props.label ?? app.name, "data-graview-embed": shown, "data-graview-scheme": scheme, ...(narrow ? { "data-graview-embed-narrow": "" } : {}), 
         // Its own stacking context: every layer inside it (the scene's corner control, a panel) is ordered inside it, never over the host's page.
-        style: { position: "relative", isolation: "isolate", height, minHeight: auto ? 0 : 320, display: "flex", flexDirection: "column", overflow: "hidden", borderRadius: "var(--graview-radius, 12px)" }, children: [_jsx("style", { children: css }), _jsxs(ErrorReportContext.Provider, { value: report, children: [_jsx(FrameNotices, { rootRef: rootRef, board: notices }), _jsx(FrameFirstLook, { rootRef: rootRef, firstLook: props.firstLook, app: appKeyOf(brand ?? { name: app.name }, app.schema) }), _jsx(FaceBoundary, { module: "@graview/react", report: report, content: true, children: _jsx(GraviewProvider, { store: store, views: views, initialView: initialView, scheme: scheme, ...providerProps(props, presence, brand), ...(props.onSeat ? { onSeat: props.onSeat } : {}), children: _jsxs(NoticeBoardContext.Provider, { value: notices, children: [_jsx(Faces, { face: shown, stop: overviewStop ?? stop, kinds: kinds, places: places, opens: opens }), whereabouts ? _jsx(Watch, { into: whereabouts }) : null, address ? _jsx(AddressBar, { pagesWere: at?.path, basePath: props.basePath, shown: shown, onFace: props.onFace, toggle: toggled, kinds: kinds, places: places, opens: opens, landed: landed }) : null, bar && shown !== "picture" ? (_jsx(FaceBoundary, { module: "@graview/embed", report: report, children: _jsx(FrameBar, { name: brand?.name ?? app.name, heading: heading, faces: {
+        style: { position: "relative", isolation: "isolate", height, minHeight: auto ? 0 : 320, display: "flex", flexDirection: "column", overflow: "hidden", borderRadius: "var(--graview-radius, 12px)" }, children: [_jsx("style", { children: css }), _jsxs(ErrorReportContext.Provider, { value: report, children: [_jsx(FrameNotices, { rootRef: rootRef, board: notices }), _jsx(FrameFirstLook, { rootRef: rootRef, firstLook: props.firstLook, app: appKeyOf(brand ?? { name: app.name }, app.schema) }), _jsx(FaceBoundary, { module: "@graview/react", report: report, content: true, children: _jsx(GraviewProvider, { store: store, views: views, initialView: initialView, scheme: scheme, ...providerProps(props, presence, brand), ...(props.onSeat ? { onSeat: props.onSeat } : {}), children: _jsxs(NoticeBoardContext.Provider, { value: notices, children: [_jsx(Faces, { face: shown, stop: overviewStop ?? stop, kinds: kinds, places: places, opens: opens }), whereabouts ? _jsx(Watch, { into: whereabouts }) : null, _jsx(DrawnSignal, { rootRef: rootRef, face: face, shown: shown, path: pageAt, stop: stop, draft: draft.n, onDrawn: props.onDrawn }), address ? _jsx(AddressBar, { pagesWere: at?.path, basePath: props.basePath, shown: shown, onFace: props.onFace, toggle: toggled, kinds: kinds, places: places, opens: opens, landed: landed }) : null, bar && shown !== "picture" ? (_jsx(FaceBoundary, { module: "@graview/embed", report: report, children: _jsx(FrameBar, { name: brand?.name ?? app.name, heading: heading, faces: {
                                                 scene: { label: sceneTitle(arrangement), current: !onPages, go: () => toOverview(), reach: () => void preload(sceneFace.current) },
                                                 // The pages, back at the page the reader was on.
                                                 pages: { label: pagesTitle(arrangement), current: onPages, go: () => toPage(pagesAt.current.path), reach: () => void preload("pages") },
@@ -414,6 +425,22 @@ function Watch({ into }) {
     into.view = useNavigation().view;
     return null;
 }
+/**
+ * SAYS WHEN THE PLACE HAS DRAWN AND SETTLED (FR-188), on the root, and to
+ * the host: watched again from nothing each time the reader moves — another
+ * page, another stop on the scene, another face — or another draft is
+ * handed (`setDraftView`), so the attribute comes off in the commit that
+ * moved and goes back on once the new place settles.
+ */
+function DrawnSignal({ rootRef, face, shown, path, stop, draft, onDrawn }) {
+    const { view } = useNavigation();
+    const onScene = shown === "scene" || shown === "graview";
+    const sceneStop = toUrl(view);
+    // Where the reader is, as `where()` says it: the overview's path on the scene, with its stop.
+    const place = { face, path: onScene ? OVERVIEW_PATH : shown === "picture" ? (stop ?? "#") : path, stop: sceneStop };
+    useDrawnSignal(rootRef, `${shown} ${onScene ? sceneStop : place.path} ${draft}`, place, onDrawn);
+    return null;
+}
 /*
  * SETTLING A PLACE IN A NEW APP, fetched when one is handed over (FR-116):
  * a declaration changes rarely, and a page that never swaps one never loads
@@ -431,11 +458,6 @@ const fetchSettling = () => whereChunk().then((module) => void (settling = modul
     const timer = setTimeout(again, 10_000);
     window.addEventListener("online", again);
 }).then(fetchSettling));
-/** Stands in for the embed while the rules for a handed-back place arrive, then draws it. */
-function Settling({ onReady }) {
-    useLayoutEffect(() => void fetchSettling().then(onReady), [onReady]);
-    return null;
-}
 /** Keeps the scene's view in step with the face and stop props. */
 function Faces({ face, stop, kinds, places, opens }) {
     const { view, go } = useNavigation();
@@ -521,9 +543,8 @@ export function mount(element, options) {
     let asked = opening ?? faceOf(options.stop);
     let drawnFace = null;
     let waiting = [];
-    const onDrawn = (face) => {
+    const onFaceDrawn = (face) => {
         drawnFace = face;
-        options.onDrawn?.(face);
         if (face !== asked)
             return;
         const done = waiting;
@@ -545,20 +566,21 @@ export function mount(element, options) {
         const [called, setCalled] = useState(options.label);
         const [hostActions, setHostActions] = useState(options.hostActions);
         const [swap, setSwap] = useState(undefined);
+        const [draft, setDraft] = useState(options.draftView);
         setters = {
             app: (next) => {
                 setSwap(next);
                 setPath(undefined);
                 setStop(undefined);
             },
-            face: setFace, stop: setStop, path: setPath, scheme: setScheme, seat: setSeat, seats: setSeats, quickAsk: setQuickAsk, people: setPeople, hostContext: setHostContext, brand: setBrand, label: setCalled, hostActions: setHostActions
+            face: setFace, stop: setStop, path: setPath, scheme: setScheme, seat: setSeat, seats: setSeats, quickAsk: setQuickAsk, people: setPeople, hostContext: setHostContext, brand: setBrand, label: setCalled, hostActions: setHostActions, draft: setDraft
         };
         return (_jsx(Whereabouts.Provider, { value: here, children: _jsx(Embed, { ...(swap ? swapped(options, swap) : options), store: store, notices: board, ...(face !== undefined ? { face } : {}), onOpening: (opened) => {
                     asked = opened;
-                }, ...(stop !== undefined ? { stop } : {}), ...(path !== undefined ? { path } : {}), ...(principal ? { principal } : {}), ...(seats ? { seats } : {}), ...(quickAsk !== undefined ? { quickAsk } : {}), ...(people ? { people } : {}), ...(hostContext ? { hostContext } : {}), ...(brand ? { brand } : {}), label: called, hostActions: hostActions, scheme: scheme, onFace: (next) => {
+                }, ...(stop !== undefined ? { stop } : {}), ...(path !== undefined ? { path } : {}), ...(principal ? { principal } : {}), ...(seats ? { seats } : {}), ...(quickAsk !== undefined ? { quickAsk } : {}), ...(people ? { people } : {}), ...(hostContext ? { hostContext } : {}), ...(brand ? { brand } : {}), label: called, hostActions: hostActions, draftView: draft, scheme: scheme, onFace: (next) => {
                     asked = next;
                     setFace(next);
-                }, onSeat: setSeat, onDrawn: onDrawn }, swap?.n ?? 0) }));
+                }, onSeat: setSeat, onFaceDrawn: onFaceDrawn }, swap?.n ?? 0) }));
     }
     const where = () => {
         const focus = here.view?.focusId;
@@ -620,6 +642,7 @@ export function mount(element, options) {
         setPeople: (people) => flushSync(() => setters?.people(people)),
         setHostContext: (context) => flushSync(() => setters?.hostContext(context)),
         setBrand: (brand) => flushSync(() => setters?.brand(brand)),
+        setDraftView: (draft) => flushSync(() => setters?.draft(draft)),
         setLabel: (given) => {
             label = given;
             flushSync(() => setters?.label(given));