@earendil-works/chord 1.4.0 → 1.5.1

package/dist/web/page.js

@@ -0,0 +1,92 @@
+// / <reference lib="dom" /> `startPage` (slice 11 §2, decisions "Slice 11, P4" to "P6"): a page's client host, in the
+// app's web entry (the base bundle). It takes the plugin scripts the page's combined file registered, loads them with
+// the app's core facets and the kit's themes and translations, follows the theme and the language, keeps its link to
+// the server (the connection loop), follows `WebScripts` to apply new plugin scripts in place, reloads the page when
+// the server's base bundle changed, records its telemetry when asked (sent to the server's `PageTelemetry`), and hands
+// the host to the app's render.
+import { BACKGROUND_CONTEXT } from "../context/index.js";
+import { webSocketLink } from "../link/index.js";
+import { startClient, themesFacet, translationsFacet, WebScripts, } from "../surfaces/index.js";
+import { sendPageTelemetry, TelemetryRecorder } from "../telemetry-ingest/index.js";
+import { pageEnvironment } from "./environment.js";
+import { followLanguage } from "./language.js";
+import { PageScripts } from "./scripts.js";
+import { PageStyles } from "./styles.js";
+import { followThemes } from "./themes.js";
+/** Where the web surface's files live (the server's `WEB_PREFIX`). */
+const PREFIX = "/_chord/web/";
+/** Starts the page; resolves with its client once rendered. */
+export async function startPage(options) {
+    // Written by the page's inline bootstrap (the server's `PageAssets.bootstrap`).
+    const bootstrap = globalThis.chordPage;
+    if (bootstrap === undefined)
+        throw new Error("startPage: the page has no Chord bootstrap (PageAssets.bootstrap)");
+    const scripts = new PageScripts(bootstrap);
+    // From here on `PageStyles` follows the stylesheets' loads itself.
+    document.removeEventListener("load", bootstrap.watching, true);
+    document.removeEventListener("error", bootstrap.watching, true);
+    const core = [
+        { name: "chord.themes", facet: themesFacet() },
+        { name: "chord.translations", facet: translationsFacet() },
+        ...(options.core ?? []),
+    ];
+    const onError = options.onError ?? ((error) => console.error("chord page:", error));
+    let recorder;
+    const telemetry = options.telemetry === true
+        ? (incarnation) => {
+            recorder = new TelemetryRecorder(() => `browser:${incarnation()}`, PAGE_QUEUE);
+            return recorder;
+        }
+        : undefined;
+    const client = await startClient({
+        scripts: WebScripts,
+        base: scripts.base,
+        initial: scripts.initial,
+        modules: options.modules,
+        core,
+        open: (events) => {
+            const socket = options.connect();
+            socket.addEventListener("open", () => events.opened());
+            socket.addEventListener("message", () => events.received());
+            return webSocketLink(socket);
+        },
+        fetchScript: (entry) => scripts.fetch(entry),
+        serverBase,
+        outdated: () => location.reload(),
+        ...(options.canRetry === undefined ? {} : { canRetry: options.canRetry }),
+        ...(options.onConnection === undefined ? {} : { onConnection: options.onConnection }),
+        styles: new PageStyles(bootstrap.styles, bootstrap.links, onError),
+        environment: pageEnvironment(),
+        ...(telemetry === undefined ? {} : { telemetry }),
+        onError,
+    });
+    if (recorder !== undefined)
+        sendEvery(sendPageTelemetry(client.host, recorder, BACKGROUND_CONTEXT));
+    await followThemes(client.host, BACKGROUND_CONTEXT);
+    await followLanguage(client.host, (report) => onError({ kind: "messages", report }), BACKGROUND_CONTEXT);
+    options.render(client.host);
+    return client;
+}
+/** How many finished spans a page keeps while it cannot send (past it new ones are dropped). */
+const PAGE_QUEUE = 1000;
+/** How often a page sends its finished spans. */
+const PAGE_SEND_MS = 3000;
+/** Sends with `sender` every `PAGE_SEND_MS` and at once when the page is hidden (it may not come back). */
+function sendEvery(sender) {
+    setInterval(() => void sender.send(false), PAGE_SEND_MS);
+    document.addEventListener("visibilitychange", () => {
+        if (document.visibilityState === "hidden")
+            void sender.send(true);
+    });
+}
+/** The server's current base bundle hash (`undefined` when it cannot be asked: offline, restarting). */
+async function serverBase() {
+    try {
+        const response = await fetch(`${PREFIX}base`, { cache: "no-store", credentials: "same-origin" });
+        return response.ok ? (await response.json()) : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+//# sourceMappingURL=page.js.map

package/dist/web/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/web/page.ts"],"names":[],"mappings":"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","sourcesContent":["// / <reference lib=\"dom\" /> `startPage` (slice 11 §2, decisions \"Slice 11, P4\" to \"P6\"): a page's client host, in the\n// app's web entry (the base bundle). It takes the plugin scripts the page's combined file registered, loads them with\n// the app's core facets and the kit's themes and translations, follows the theme and the language, keeps its link to\n// the server (the connection loop), follows `WebScripts` to apply new plugin scripts in place, reloads the page when\n// the server's base bundle changed, records its telemetry when asked (sent to the server's `PageTelemetry`), and hands\n// the host to the app's render.\n\nimport { BACKGROUND_CONTEXT } from \"../context/index.ts\";\nimport type { Principal } from \"../data/index.ts\";\nimport type { PluginFacet } from \"../host/index.ts\";\nimport { type WebSocketLike, webSocketLink } from \"../link/index.ts\";\nimport {\n\ttype Client,\n\ttype ClientError,\n\ttype ClientModules,\n\ttype ConnectionState,\n\tstartClient,\n\tthemesFacet,\n\ttranslationsFacet,\n\tWebScripts,\n} from \"../surfaces/index.ts\";\nimport { sendPageTelemetry, TelemetryRecorder, type TelemetrySender } from \"../telemetry-ingest/index.ts\";\nimport { pageEnvironment } from \"./environment.ts\";\nimport { followLanguage } from \"./language.ts\";\nimport { type PageBootstrap, PageScripts } from \"./scripts.ts\";\nimport { PageStyles } from \"./styles.ts\";\nimport { followThemes } from \"./themes.ts\";\n\n/** What `startPage` takes. */\nexport type PageOptions<P extends Principal> = {\n\t/** Opens the page's socket to the server's links endpoint (`/chord`). */\n\treadonly connect: () => WebSocketLike;\n\t/** The modules the web plugins import, by specifier: the app's API modules for the web kind, React, ... */\n\treadonly modules: ClientModules;\n\t/** The app's own web facets. */\n\treadonly core?: readonly PluginFacet<P>[];\n\t/** Asked before each reconnect; `false` stops reconnecting (a guest's ended share). */\n\treadonly canRetry?: () => Promise<boolean>;\n\treadonly onConnection?: (state: ConnectionState) => void;\n\t/** Renders the app with its host, once the plugins are loaded. */\n\treadonly render: (host: Client<P>[\"host\"]) => void;\n\t/**\n\t * Records the page's telemetry (decision \"Telemetry from browser pages\"): its spans (a click started with\n\t * `host.root(fn, ctx, { trace })`, the calls under it, carriers on its calls) are kept in memory and sent to the\n\t * server's telemetry object every few seconds and when the page is hidden. Off by default.\n\t */\n\treadonly telemetry?: boolean;\n\t/** Plugins left out or kept old, a failed update, the host's errors, messages' reports: the console by default. */\n\treadonly onError?: (error: ClientError) => void;\n};\n\n/** Where the web surface's files live (the server's `WEB_PREFIX`). */\nconst PREFIX = \"/_chord/web/\";\n\n/** Starts the page; resolves with its client once rendered. */\nexport async function startPage<P extends Principal>(options: PageOptions<P>): Promise<Client<P>> {\n\t// Written by the page's inline bootstrap (the server's `PageAssets.bootstrap`).\n\tconst bootstrap = (globalThis as { readonly chordPage?: PageBootstrap }).chordPage;\n\tif (bootstrap === undefined) throw new Error(\"startPage: the page has no Chord bootstrap (PageAssets.bootstrap)\");\n\tconst scripts = new PageScripts(bootstrap);\n\t// From here on `PageStyles` follows the stylesheets' loads itself.\n\tdocument.removeEventListener(\"load\", bootstrap.watching, true);\n\tdocument.removeEventListener(\"error\", bootstrap.watching, true);\n\tconst core: PluginFacet<P>[] = [\n\t\t{ name: \"chord.themes\", facet: themesFacet<P>() },\n\t\t{ name: \"chord.translations\", facet: translationsFacet<P>() },\n\t\t...(options.core ?? []),\n\t];\n\tconst onError = options.onError ?? ((error: ClientError) => console.error(\"chord page:\", error));\n\tlet recorder: TelemetryRecorder | undefined;\n\tconst telemetry =\n\t\toptions.telemetry === true\n\t\t\t? (incarnation: () => string) => {\n\t\t\t\t\trecorder = new TelemetryRecorder(() => `browser:${incarnation()}`, PAGE_QUEUE);\n\t\t\t\t\treturn recorder;\n\t\t\t\t}\n\t\t\t: undefined;\n\tconst client = await startClient<P>({\n\t\tscripts: WebScripts,\n\t\tbase: scripts.base,\n\t\tinitial: scripts.initial,\n\t\tmodules: options.modules,\n\t\tcore,\n\t\topen: (events) => {\n\t\t\tconst socket = options.connect();\n\t\t\tsocket.addEventListener(\"open\", () => events.opened());\n\t\t\tsocket.addEventListener(\"message\", () => events.received());\n\t\t\treturn webSocketLink(socket);\n\t\t},\n\t\tfetchScript: (entry) => scripts.fetch(entry),\n\t\tserverBase,\n\t\toutdated: () => location.reload(),\n\t\t...(options.canRetry === undefined ? {} : { canRetry: options.canRetry }),\n\t\t...(options.onConnection === undefined ? {} : { onConnection: options.onConnection }),\n\t\tstyles: new PageStyles(bootstrap.styles, bootstrap.links, onError),\n\t\tenvironment: pageEnvironment(),\n\t\t...(telemetry === undefined ? {} : { telemetry }),\n\t\tonError,\n\t});\n\tif (recorder !== undefined) sendEvery(sendPageTelemetry(client.host, recorder, BACKGROUND_CONTEXT));\n\tawait followThemes(client.host, BACKGROUND_CONTEXT);\n\tawait followLanguage(client.host, (report) => onError({ kind: \"messages\", report }), BACKGROUND_CONTEXT);\n\toptions.render(client.host);\n\treturn client;\n}\n\n/** How many finished spans a page keeps while it cannot send (past it new ones are dropped). */\nconst PAGE_QUEUE = 1000;\n\n/** How often a page sends its finished spans. */\nconst PAGE_SEND_MS = 3000;\n\n/** Sends with `sender` every `PAGE_SEND_MS` and at once when the page is hidden (it may not come back). */\nfunction sendEvery(sender: TelemetrySender): void {\n\tsetInterval(() => void sender.send(false), PAGE_SEND_MS);\n\tdocument.addEventListener(\"visibilitychange\", () => {\n\t\tif (document.visibilityState === \"hidden\") void sender.send(true);\n\t});\n}\n\n/** The server's current base bundle hash (`undefined` when it cannot be asked: offline, restarting). */\nasync function serverBase(): Promise<string | undefined> {\n\ttry {\n\t\tconst response = await fetch(`${PREFIX}base`, { cache: \"no-store\", credentials: \"same-origin\" });\n\t\treturn response.ok ? ((await response.json()) as string) : undefined;\n\t} catch {\n\t\treturn undefined;\n\t}\n}\n"]}

package/dist/web/scripts.d.ts

@@ -0,0 +1,23 @@
+import type { FacetFunction, RegisteredScript, ScriptEntry } from "../surfaces/index.ts";
+/**
+ * What the page's bootstrap left: the base bundle's hash, the stylesheet of each plugin's script in the combined file
+ * (by plugin), how each stylesheet's load ended so far (by `href`) and the listener recording it, and the scripts the
+ * combined file registered.
+ */
+export type PageBootstrap = {
+    readonly base: string;
+    readonly styles: Readonly<Record<string, string>>;
+    readonly links: Readonly<Record<string, "load" | "error">>;
+    readonly watching: (event: Event) => void;
+    readonly queued: readonly (readonly [string, string, FacetFunction])[];
+};
+/** The page's plugin scripts: those the page started with, and fetches of later ones. */
+export declare class PageScripts {
+    #private;
+    readonly initial: readonly RegisteredScript[];
+    readonly base: string;
+    constructor(bootstrap: PageBootstrap);
+    /** Loads `entry`'s script with a `<script src>`; resolves once it registered, rejects when it does not load. */
+    fetch(entry: ScriptEntry): Promise<RegisteredScript>;
+}
+//# sourceMappingURL=scripts.d.ts.map

package/dist/web/scripts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scripts.d.ts","sourceRoot":"","sources":["../../src/web/scripts.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGzF;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAClD,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC;IAC3D,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC;CACvE,CAAC;AAEF,yFAAyF;AACzF,qBAAa,WAAW;;IAGvB,QAAQ,CAAC,OAAO,EAAE,SAAS,gBAAgB,EAAE,CAAC;IAC9C,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,YAAY,SAAS,EAAE,aAAa,EAOnC;IAED,gHAAgH;IAChH,KAAK,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAyBnD;CACD"}

package/dist/web/scripts.js

@@ -0,0 +1,50 @@
+/// <reference lib="dom" />
+// A page's plugin scripts (slice 11 §2, decision "Slice 11's points" (P2)): scripts that register themselves through
+// `chordFacet`, loaded with `<script src>` (no `eval` under the page's CSP). The combined file's scripts ran before the
+// base bundle and queued (the page's bootstrap); later ones are fetched one each and resolve the fetch that asked for
+// them. The plugins' stylesheets are `styles.ts`'s.
+import { REGISTER } from "../surfaces/index.js";
+/** The page's plugin scripts: those the page started with, and fetches of later ones. */
+export class PageScripts {
+    /** Fetches waiting for their script to register, by plugin and digest. */
+    #waiting = new Map();
+    initial;
+    base;
+    constructor(bootstrap) {
+        this.base = bootstrap.base;
+        this.initial = bootstrap.queued.map(([plugin, digest, run]) => ({ plugin, digest, run }));
+        // From now on a script that registers resolves its fetch.
+        globalThis[REGISTER] = (plugin, digest, run) => {
+            this.#waiting.get(`${plugin}\0${digest}`)?.({ plugin, digest, run });
+        };
+    }
+    /** Loads `entry`'s script with a `<script src>`; resolves once it registered, rejects when it does not load. */
+    fetch(entry) {
+        const key = `${entry.name}\0${entry.digest}`;
+        return new Promise((resolve, reject) => {
+            const element = document.createElement("script");
+            const done = () => {
+                this.#waiting.delete(key);
+                element.remove();
+            };
+            this.#waiting.set(key, (script) => {
+                done();
+                resolve(script);
+            });
+            element.addEventListener("error", () => {
+                done();
+                reject(new Error(`plugin "${entry.name}": its script ${entry.url} did not load`));
+            });
+            // A script that loaded without registering (a wrong file) never resolves its own key: refused on load.
+            element.addEventListener("load", () => {
+                if (!this.#waiting.has(key))
+                    return;
+                done();
+                reject(new Error(`plugin "${entry.name}": ${entry.url} did not register ${entry.digest}`));
+            });
+            element.src = entry.url;
+            document.head.append(element);
+        });
+    }
+}
+//# sourceMappingURL=scripts.js.map

package/dist/web/scripts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scripts.js","sourceRoot":"","sources":["../../src/web/scripts.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,qHAAqH;AACrH,wHAAwH;AACxH,sHAAsH;AACtH,oDAAoD;AAGpD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAehD,yFAAyF;AACzF,MAAM,OAAO,WAAW;IACvB,0EAA0E;IACjE,QAAQ,GAAG,IAAI,GAAG,EAA8C,CAAC;IACjE,OAAO,CAA8B;IACrC,IAAI,CAAS;IAEtB,YAAY,SAAwB;QACnC,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QAC1F,0DAA0D;QACzD,UAAsC,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAkB,EAAE,EAAE;YAC1G,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,MAAM,KAAK,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;IACH,CAAC;IAED,gHAAgH;IAChH,KAAK,CAAC,KAAkB;QACvB,MAAM,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,EAAE,CAAC;QAC7C,OAAO,IAAI,OAAO,CAAmB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACxD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACjD,MAAM,IAAI,GAAG,GAAS,EAAE;gBACvB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC1B,OAAO,CAAC,MAAM,EAAE,CAAC;YAClB,CAAC,CAAC;YACF,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE;gBACjC,IAAI,EAAE,CAAC;gBACP,OAAO,CAAC,MAAM,CAAC,CAAC;YACjB,CAAC,CAAC,CAAC;YACH,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBACtC,IAAI,EAAE,CAAC;gBACP,MAAM,CAAC,IAAI,KAAK,CAAC,WAAW,KAAK,CAAC,IAAI,iBAAiB,KAAK,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC;YACnF,CAAC,CAAC,CAAC;YACH,uGAAuG;YACvG,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;gBACrC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;oBAAE,OAAO;gBACpC,IAAI,EAAE,CAAC;gBACP,MAAM,CAAC,IAAI,KAAK,CAAC,WAAW,KAAK,CAAC,IAAI,MAAM,KAAK,CAAC,GAAG,qBAAqB,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;YAC5F,CAAC,CAAC,CAAC;YACH,OAAO,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;YACxB,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACJ,CAAC;CACD","sourcesContent":["/// <reference lib=\"dom\" />\n// A page's plugin scripts (slice 11 §2, decision \"Slice 11's points\" (P2)): scripts that register themselves through\n// `chordFacet`, loaded with `<script src>` (no `eval` under the page's CSP). The combined file's scripts ran before the\n// base bundle and queued (the page's bootstrap); later ones are fetched one each and resolve the fetch that asked for\n// them. The plugins' stylesheets are `styles.ts`'s.\n\nimport type { FacetFunction, RegisteredScript, ScriptEntry } from \"../surfaces/index.ts\";\nimport { REGISTER } from \"../surfaces/index.ts\";\n\n/**\n * What the page's bootstrap left: the base bundle's hash, the stylesheet of each plugin's script in the combined file\n * (by plugin), how each stylesheet's load ended so far (by `href`) and the listener recording it, and the scripts the\n * combined file registered.\n */\nexport type PageBootstrap = {\n\treadonly base: string;\n\treadonly styles: Readonly<Record<string, string>>;\n\treadonly links: Readonly<Record<string, \"load\" | \"error\">>;\n\treadonly watching: (event: Event) => void;\n\treadonly queued: readonly (readonly [string, string, FacetFunction])[];\n};\n\n/** The page's plugin scripts: those the page started with, and fetches of later ones. */\nexport class PageScripts {\n\t/** Fetches waiting for their script to register, by plugin and digest. */\n\treadonly #waiting = new Map<string, (script: RegisteredScript) => void>();\n\treadonly initial: readonly RegisteredScript[];\n\treadonly base: string;\n\n\tconstructor(bootstrap: PageBootstrap) {\n\t\tthis.base = bootstrap.base;\n\t\tthis.initial = bootstrap.queued.map(([plugin, digest, run]) => ({ plugin, digest, run }));\n\t\t// From now on a script that registers resolves its fetch.\n\t\t(globalThis as Record<string, unknown>)[REGISTER] = (plugin: string, digest: string, run: FacetFunction) => {\n\t\t\tthis.#waiting.get(`${plugin}\\0${digest}`)?.({ plugin, digest, run });\n\t\t};\n\t}\n\n\t/** Loads `entry`'s script with a `<script src>`; resolves once it registered, rejects when it does not load. */\n\tfetch(entry: ScriptEntry): Promise<RegisteredScript> {\n\t\tconst key = `${entry.name}\\0${entry.digest}`;\n\t\treturn new Promise<RegisteredScript>((resolve, reject) => {\n\t\t\tconst element = document.createElement(\"script\");\n\t\t\tconst done = (): void => {\n\t\t\t\tthis.#waiting.delete(key);\n\t\t\t\telement.remove();\n\t\t\t};\n\t\t\tthis.#waiting.set(key, (script) => {\n\t\t\t\tdone();\n\t\t\t\tresolve(script);\n\t\t\t});\n\t\t\telement.addEventListener(\"error\", () => {\n\t\t\t\tdone();\n\t\t\t\treject(new Error(`plugin \"${entry.name}\": its script ${entry.url} did not load`));\n\t\t\t});\n\t\t\t// A script that loaded without registering (a wrong file) never resolves its own key: refused on load.\n\t\t\telement.addEventListener(\"load\", () => {\n\t\t\t\tif (!this.#waiting.has(key)) return;\n\t\t\t\tdone();\n\t\t\t\treject(new Error(`plugin \"${entry.name}\": ${entry.url} did not register ${entry.digest}`));\n\t\t\t});\n\t\t\telement.src = entry.url;\n\t\t\tdocument.head.append(element);\n\t\t});\n\t}\n}\n"]}

package/dist/web/styles.d.ts

@@ -0,0 +1,17 @@
+import type { ClientError, ClientStyles, ScriptSet } from "../surfaces/index.ts";
+/**
+ * The page's plugin stylesheets (`ClientStyles`). A plugin new to the page gets its stylesheet at its place in the set's
+ * order, so the cascade between plugins stays. UI an object contributes and keeps until its successor is live (design
+ * §21) may outlast the old stylesheet: it can show unstyled while that object restarts.
+ */
+export declare class PageStyles implements ClientStyles {
+    #private;
+    /**
+     * Takes the page's own links of the plugins' stylesheets (`initial`, by plugin) with how their loads ended so far
+     * (`ended`, by `href`, as the bootstrap recorded them).
+     */
+    constructor(initial: Readonly<Record<string, string>>, ended: Readonly<Record<string, "load" | "error">>, report: (error: ClientError) => void);
+    prepare(set: ScriptSet, signal: AbortSignal): Promise<void>;
+    settle(set: ScriptSet, kept: ReadonlySet<string>): void;
+}
+//# sourceMappingURL=styles.d.ts.map

package/dist/web/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/web/styles.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAe,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAE9F;;;;GAIG;AACH,qBAAa,UAAW,YAAW,YAAY;;IAO9C;;;OAGG;IACH,YACC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EACzC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,EACjD,MAAM,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,EASpC;IAEK,OAAO,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAyBhE;IAED,MAAM,CAAC,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,IAAI,CA+BtD;CA0BD"}

package/dist/web/styles.js

@@ -0,0 +1,218 @@
+/// <reference lib="dom" />
+// A page's plugin stylesheets (p3 step 0a; design §21, "UI on client hosts"): each plugin's `<link>` paired with the
+// code it runs, the bootstrap's at first. An update fetches a plugin's new stylesheet inactive (`media="not all"`:
+// loaded, not applied) right after the plugin's own before the reload, and applies it only when the plugin's new code
+// was adopted; the old one goes once the page has drawn a frame after the reload. A stylesheet that did not load (or not
+// in time) is loaded again by the next update; a stopped update removes what it prepared.
+/**
+ * The page's plugin stylesheets (`ClientStyles`). A plugin new to the page gets its stylesheet at its place in the set's
+ * order, so the cascade between plugins stays. UI an object contributes and keeps until its successor is live (design
+ * §21) may outlast the old stylesheet: it can show unstyled while that object restarts.
+ */
+export class PageStyles {
+    /** The stylesheet of the code each plugin runs, by plugin. */
+    #current = new Map();
+    /** The stylesheets fetched inactive for the update under way, by plugin. */
+    #prepared = new Map();
+    #report;
+    /**
+     * Takes the page's own links of the plugins' stylesheets (`initial`, by plugin) with how their loads ended so far
+     * (`ended`, by `href`, as the bootstrap recorded them).
+     */
+    constructor(initial, ended, report) {
+        this.#report = report;
+        const plugins = new Map(Object.entries(initial).map(([plugin, href]) => [href, plugin]));
+        for (const link of document.querySelectorAll('link[rel="stylesheet"]')) {
+            const href = link.getAttribute("href") ?? "";
+            const plugin = plugins.get(href);
+            if (plugin !== undefined)
+                this.#current.set(plugin, Sheet.present(link, href, ended[href]));
+        }
+    }
+    async prepare(set, signal) {
+        const waits = [];
+        for (const [index, { name, css }] of set.plugins.entries()) {
+            if (css === undefined || this.#current.get(name)?.loadedFrom(css) === true) {
+                this.#drop(name);
+                continue;
+            }
+            let sheet = this.#prepared.get(name);
+            if (sheet === undefined || !sheet.usableFor(css)) {
+                this.#drop(name);
+                sheet = Sheet.inactive(css);
+                this.#insert(sheet.link, name, set.plugins.slice(0, index), set.plugins.slice(index + 1));
+                this.#prepared.set(name, sheet);
+            }
+            waits.push(sheet.wait(signal).then((outcome) => {
+                if (outcome.kind === "failed") {
+                    this.#report({ kind: "stylesheet_failed", plugin: name, url: css, reason: outcome.reason });
+                }
+            }));
+        }
+        await Promise.all(waits);
+        // Stopped: nothing it prepared will be adopted, and a request finishing later must change nothing.
+        if (signal.aborted)
+            for (const name of [...this.#prepared.keys()])
+                this.#drop(name);
+    }
+    settle(set, kept) {
+        const retired = [];
+        const names = new Set(set.plugins.map(({ name }) => name));
+        for (const { name, css } of set.plugins) {
+            const prepared = this.#prepared.get(name);
+            this.#prepared.delete(name);
+            const current = this.#current.get(name);
+            if (kept.has(name))
+                prepared?.remove();
+            else if (prepared !== undefined) {
+                prepared.activate();
+                if (current !== undefined)
+                    retired.push(current);
+                this.#current.set(name, prepared);
+            }
+            else if (css === undefined && current !== undefined) {
+                retired.push(current);
+                this.#current.delete(name);
+            }
+        }
+        for (const sheet of this.#prepared.values())
+            sheet.remove();
+        this.#prepared.clear();
+        for (const [name, sheet] of this.#current) {
+            if (names.has(name))
+                continue;
+            retired.push(sheet);
+            this.#current.delete(name);
+        }
+        // The new code renders after the reload resolved (its registries notify, React commits): the old rules stay
+        // until the page drew a frame after the reload (UI an object keeps until its successor is live may outlast them).
+        if (retired.length > 0) {
+            afterDrawn(() => {
+                for (const sheet of retired)
+                    sheet.remove();
+            });
+        }
+    }
+    /** Removes plugin `name`'s prepared stylesheet, if it has one. */
+    #drop(name) {
+        this.#prepared.get(name)?.remove();
+        this.#prepared.delete(name);
+    }
+    /**
+     * Inserts `link` of `plugin` right after the plugin's own link, else after the last link of the nearest plugin
+     * `before` it in the set's order, else before the first link of a plugin `after` it, else at the end of the head.
+     */
+    #insert(link, plugin, before, after) {
+        const own = this.#current.get(plugin)?.link;
+        const previous = [...before]
+            .reverse()
+            .map(({ name }) => (this.#prepared.get(name) ?? this.#current.get(name))?.link)
+            .find((each) => each !== undefined);
+        const next = after
+            .map(({ name }) => (this.#current.get(name) ?? this.#prepared.get(name))?.link)
+            .find((each) => each !== undefined);
+        if (own !== undefined)
+            own.after(link);
+        else if (previous !== undefined)
+            previous.after(link);
+        else if (next !== undefined)
+            next.before(link);
+        else
+            document.head.append(link);
+    }
+}
+/** How long an update waits for a new stylesheet before it reloads its plugin anyway: 10 s. */
+const STYLESHEET_WAIT_MS = 10_000;
+/**
+ * One plugin stylesheet's `<link>` and its load's state, followed while the link is in the page: a load finishing after a
+ * wait gave up still counts.
+ */
+class Sheet {
+    link;
+    href;
+    #state;
+    /** Waits listening for the load's end (or the link's removal). */
+    #waiting = new Set();
+    /** Ends the link's listeners when it is removed. */
+    #listening = new AbortController();
+    constructor(link, href, state) {
+        this.link = link;
+        this.href = href;
+        this.#state = state;
+        if (state !== "loading")
+            return;
+        const settle = (next) => {
+            this.#state = next;
+            this.#wake(next === "loaded" ? { kind: "loaded" } : { kind: "failed", reason: "error" });
+        };
+        link.addEventListener("load", () => settle("loaded"), { signal: this.#listening.signal });
+        link.addEventListener("error", () => settle("failed"), { signal: this.#listening.signal });
+    }
+    /** A new `<link>` for `href`, fetched but not applied (`media="not all"`) until `activate`; not inserted yet. */
+    static inactive(href) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.media = "not all";
+        const sheet = new Sheet(link, href, "loading");
+        link.href = href;
+        return sheet;
+    }
+    /**
+     * A `<link>` the page came with, at `href`, its load `ended` as the bootstrap saw it (`undefined`: still under way,
+     * followed from now). Not its `sheet`: a failed load (an HTTP error) still has one, empty.
+     */
+    static present(link, href, ended) {
+        return new Sheet(link, href, ended === "load" ? "loaded" : ended === "error" ? "failed" : "loading");
+    }
+    /** Whether it loaded from `href`: an update with that stylesheet has nothing to load. */
+    loadedFrom(href) {
+        return this.href === href && this.#state === "loaded";
+    }
+    /** Whether an update with stylesheet `href` can wait for it rather than fetch again: the same, and not failed. */
+    usableFor(href) {
+        return this.href === href && this.#state !== "failed";
+    }
+    /** Its load's outcome: at once when it ended, else when it ends, after 10 s (`timeout`), or when `signal` aborts. */
+    wait(signal) {
+        return new Promise((resolve) => {
+            const done = (outcome) => {
+                clearTimeout(timer);
+                signal.removeEventListener("abort", aborted);
+                this.#waiting.delete(done);
+                resolve(outcome);
+            };
+            const aborted = () => done({ kind: "cancelled" });
+            const timer = setTimeout(() => done({ kind: "failed", reason: "timeout" }), STYLESHEET_WAIT_MS);
+            if (signal.aborted)
+                aborted();
+            else if (this.#state === "loaded")
+                done({ kind: "loaded" });
+            else if (this.#state === "failed")
+                done({ kind: "failed", reason: "error" });
+            else {
+                this.#waiting.add(done);
+                signal.addEventListener("abort", aborted, { once: true });
+            }
+        });
+    }
+    /** Applies it (it was fetched inactive). */
+    activate() {
+        this.link.removeAttribute("media");
+    }
+    /** Takes it out of the page and stops following its load (its waits end `cancelled`). */
+    remove() {
+        this.#listening.abort();
+        this.#wake({ kind: "cancelled" });
+        this.link.remove();
+    }
+    /** Ends every wait with `outcome`. */
+    #wake(outcome) {
+        for (const done of [...this.#waiting])
+            done(outcome);
+    }
+}
+/** Runs `fn` once the page has drawn a frame after the current task (the next frame's callbacks run before it paints). */
+function afterDrawn(fn) {
+    setTimeout(() => requestAnimationFrame(() => requestAnimationFrame(fn)), 0);
+}
+//# sourceMappingURL=styles.js.map

package/dist/web/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/web/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/// <reference lib=\"dom\" />\n// A page's plugin stylesheets (p3 step 0a; design §21, \"UI on client hosts\"): each plugin's `<link>` paired with the\n// code it runs, the bootstrap's at first. An update fetches a plugin's new stylesheet inactive (`media=\"not all\"`:\n// loaded, not applied) right after the plugin's own before the reload, and applies it only when the plugin's new code\n// was adopted; the old one goes once the page has drawn a frame after the reload. A stylesheet that did not load (or not\n// in time) is loaded again by the next update; a stopped update removes what it prepared.\n\nimport type { ClientError, ClientStyles, ScriptEntry, ScriptSet } from \"../surfaces/index.ts\";\n\n/**\n * The page's plugin stylesheets (`ClientStyles`). A plugin new to the page gets its stylesheet at its place in the set's\n * order, so the cascade between plugins stays. UI an object contributes and keeps until its successor is live (design\n * §21) may outlast the old stylesheet: it can show unstyled while that object restarts.\n */\nexport class PageStyles implements ClientStyles {\n\t/** The stylesheet of the code each plugin runs, by plugin. */\n\treadonly #current = new Map<string, Sheet>();\n\t/** The stylesheets fetched inactive for the update under way, by plugin. */\n\treadonly #prepared = new Map<string, Sheet>();\n\treadonly #report: (error: ClientError) => void;\n\n\t/**\n\t * Takes the page's own links of the plugins' stylesheets (`initial`, by plugin) with how their loads ended so far\n\t * (`ended`, by `href`, as the bootstrap recorded them).\n\t */\n\tconstructor(\n\t\tinitial: Readonly<Record<string, string>>,\n\t\tended: Readonly<Record<string, \"load\" | \"error\">>,\n\t\treport: (error: ClientError) => void,\n\t) {\n\t\tthis.#report = report;\n\t\tconst plugins = new Map(Object.entries(initial).map(([plugin, href]) => [href, plugin]));\n\t\tfor (const link of document.querySelectorAll<HTMLLinkElement>('link[rel=\"stylesheet\"]')) {\n\t\t\tconst href = link.getAttribute(\"href\") ?? \"\";\n\t\t\tconst plugin = plugins.get(href);\n\t\t\tif (plugin !== undefined) this.#current.set(plugin, Sheet.present(link, href, ended[href]));\n\t\t}\n\t}\n\n\tasync prepare(set: ScriptSet, signal: AbortSignal): Promise<void> {\n\t\tconst waits: Promise<void>[] = [];\n\t\tfor (const [index, { name, css }] of set.plugins.entries()) {\n\t\t\tif (css === undefined || this.#current.get(name)?.loadedFrom(css) === true) {\n\t\t\t\tthis.#drop(name);\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tlet sheet = this.#prepared.get(name);\n\t\t\tif (sheet === undefined || !sheet.usableFor(css)) {\n\t\t\t\tthis.#drop(name);\n\t\t\t\tsheet = Sheet.inactive(css);\n\t\t\t\tthis.#insert(sheet.link, name, set.plugins.slice(0, index), set.plugins.slice(index + 1));\n\t\t\t\tthis.#prepared.set(name, sheet);\n\t\t\t}\n\t\t\twaits.push(\n\t\t\t\tsheet.wait(signal).then((outcome) => {\n\t\t\t\t\tif (outcome.kind === \"failed\") {\n\t\t\t\t\t\tthis.#report({ kind: \"stylesheet_failed\", plugin: name, url: css, reason: outcome.reason });\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t);\n\t\t}\n\t\tawait Promise.all(waits);\n\t\t// Stopped: nothing it prepared will be adopted, and a request finishing later must change nothing.\n\t\tif (signal.aborted) for (const name of [...this.#prepared.keys()]) this.#drop(name);\n\t}\n\n\tsettle(set: ScriptSet, kept: ReadonlySet<string>): void {\n\t\tconst retired: Sheet[] = [];\n\t\tconst names = new Set(set.plugins.map(({ name }) => name));\n\t\tfor (const { name, css } of set.plugins) {\n\t\t\tconst prepared = this.#prepared.get(name);\n\t\t\tthis.#prepared.delete(name);\n\t\t\tconst current = this.#current.get(name);\n\t\t\tif (kept.has(name)) prepared?.remove();\n\t\t\telse if (prepared !== undefined) {\n\t\t\t\tprepared.activate();\n\t\t\t\tif (current !== undefined) retired.push(current);\n\t\t\t\tthis.#current.set(name, prepared);\n\t\t\t} else if (css === undefined && current !== undefined) {\n\t\t\t\tretired.push(current);\n\t\t\t\tthis.#current.delete(name);\n\t\t\t}\n\t\t}\n\t\tfor (const sheet of this.#prepared.values()) sheet.remove();\n\t\tthis.#prepared.clear();\n\t\tfor (const [name, sheet] of this.#current) {\n\t\t\tif (names.has(name)) continue;\n\t\t\tretired.push(sheet);\n\t\t\tthis.#current.delete(name);\n\t\t}\n\t\t// The new code renders after the reload resolved (its registries notify, React commits): the old rules stay\n\t\t// until the page drew a frame after the reload (UI an object keeps until its successor is live may outlast them).\n\t\tif (retired.length > 0) {\n\t\t\tafterDrawn(() => {\n\t\t\t\tfor (const sheet of retired) sheet.remove();\n\t\t\t});\n\t\t}\n\t}\n\n\t/** Removes plugin `name`'s prepared stylesheet, if it has one. */\n\t#drop(name: string): void {\n\t\tthis.#prepared.get(name)?.remove();\n\t\tthis.#prepared.delete(name);\n\t}\n\n\t/**\n\t * Inserts `link` of `plugin` right after the plugin's own link, else after the last link of the nearest plugin\n\t * `before` it in the set's order, else before the first link of a plugin `after` it, else at the end of the head.\n\t */\n\t#insert(link: HTMLLinkElement, plugin: string, before: readonly ScriptEntry[], after: readonly ScriptEntry[]): void {\n\t\tconst own = this.#current.get(plugin)?.link;\n\t\tconst previous = [...before]\n\t\t\t.reverse()\n\t\t\t.map(({ name }) => (this.#prepared.get(name) ?? this.#current.get(name))?.link)\n\t\t\t.find((each) => each !== undefined);\n\t\tconst next = after\n\t\t\t.map(({ name }) => (this.#current.get(name) ?? this.#prepared.get(name))?.link)\n\t\t\t.find((each) => each !== undefined);\n\t\tif (own !== undefined) own.after(link);\n\t\telse if (previous !== undefined) previous.after(link);\n\t\telse if (next !== undefined) next.before(link);\n\t\telse document.head.append(link);\n\t}\n}\n\n/** How long an update waits for a new stylesheet before it reloads its plugin anyway: 10 s. */\nconst STYLESHEET_WAIT_MS = 10_000;\n\n/** What became of a stylesheet's load within an update's wait. */\ntype LoadOutcome =\n\t| { readonly kind: \"loaded\" }\n\t| { readonly kind: \"failed\"; readonly reason: \"error\" | \"timeout\" }\n\t| { readonly kind: \"cancelled\" };\n\n/** Where a stylesheet's load is: under way (also past a wait's 10 s), loaded, or failed. */\ntype LoadState = \"loading\" | \"loaded\" | \"failed\";\n\n/**\n * One plugin stylesheet's `<link>` and its load's state, followed while the link is in the page: a load finishing after a\n * wait gave up still counts.\n */\nclass Sheet {\n\treadonly link: HTMLLinkElement;\n\treadonly href: string;\n\t#state: LoadState;\n\t/** Waits listening for the load's end (or the link's removal). */\n\treadonly #waiting = new Set<(outcome: LoadOutcome) => void>();\n\t/** Ends the link's listeners when it is removed. */\n\treadonly #listening = new AbortController();\n\n\tprivate constructor(link: HTMLLinkElement, href: string, state: LoadState) {\n\t\tthis.link = link;\n\t\tthis.href = href;\n\t\tthis.#state = state;\n\t\tif (state !== \"loading\") return;\n\t\tconst settle = (next: \"loaded\" | \"failed\"): void => {\n\t\t\tthis.#state = next;\n\t\t\tthis.#wake(next === \"loaded\" ? { kind: \"loaded\" } : { kind: \"failed\", reason: \"error\" });\n\t\t};\n\t\tlink.addEventListener(\"load\", () => settle(\"loaded\"), { signal: this.#listening.signal });\n\t\tlink.addEventListener(\"error\", () => settle(\"failed\"), { signal: this.#listening.signal });\n\t}\n\n\t/** A new `<link>` for `href`, fetched but not applied (`media=\"not all\"`) until `activate`; not inserted yet. */\n\tstatic inactive(href: string): Sheet {\n\t\tconst link = document.createElement(\"link\");\n\t\tlink.rel = \"stylesheet\";\n\t\tlink.media = \"not all\";\n\t\tconst sheet = new Sheet(link, href, \"loading\");\n\t\tlink.href = href;\n\t\treturn sheet;\n\t}\n\n\t/**\n\t * A `<link>` the page came with, at `href`, its load `ended` as the bootstrap saw it (`undefined`: still under way,\n\t * followed from now). Not its `sheet`: a failed load (an HTTP error) still has one, empty.\n\t */\n\tstatic present(link: HTMLLinkElement, href: string, ended: \"load\" | \"error\" | undefined): Sheet {\n\t\treturn new Sheet(link, href, ended === \"load\" ? \"loaded\" : ended === \"error\" ? \"failed\" : \"loading\");\n\t}\n\n\t/** Whether it loaded from `href`: an update with that stylesheet has nothing to load. */\n\tloadedFrom(href: string): boolean {\n\t\treturn this.href === href && this.#state === \"loaded\";\n\t}\n\n\t/** Whether an update with stylesheet `href` can wait for it rather than fetch again: the same, and not failed. */\n\tusableFor(href: string): boolean {\n\t\treturn this.href === href && this.#state !== \"failed\";\n\t}\n\n\t/** Its load's outcome: at once when it ended, else when it ends, after 10 s (`timeout`), or when `signal` aborts. */\n\twait(signal: AbortSignal): Promise<LoadOutcome> {\n\t\treturn new Promise((resolve) => {\n\t\t\tconst done = (outcome: LoadOutcome): void => {\n\t\t\t\tclearTimeout(timer);\n\t\t\t\tsignal.removeEventListener(\"abort\", aborted);\n\t\t\t\tthis.#waiting.delete(done);\n\t\t\t\tresolve(outcome);\n\t\t\t};\n\t\t\tconst aborted = (): void => done({ kind: \"cancelled\" });\n\t\t\tconst timer = setTimeout(() => done({ kind: \"failed\", reason: \"timeout\" }), STYLESHEET_WAIT_MS);\n\t\t\tif (signal.aborted) aborted();\n\t\t\telse if (this.#state === \"loaded\") done({ kind: \"loaded\" });\n\t\t\telse if (this.#state === \"failed\") done({ kind: \"failed\", reason: \"error\" });\n\t\t\telse {\n\t\t\t\tthis.#waiting.add(done);\n\t\t\t\tsignal.addEventListener(\"abort\", aborted, { once: true });\n\t\t\t}\n\t\t});\n\t}\n\n\t/** Applies it (it was fetched inactive). */\n\tactivate(): void {\n\t\tthis.link.removeAttribute(\"media\");\n\t}\n\n\t/** Takes it out of the page and stops following its load (its waits end `cancelled`). */\n\tremove(): void {\n\t\tthis.#listening.abort();\n\t\tthis.#wake({ kind: \"cancelled\" });\n\t\tthis.link.remove();\n\t}\n\n\t/** Ends every wait with `outcome`. */\n\t#wake(outcome: LoadOutcome): void {\n\t\tfor (const done of [...this.#waiting]) done(outcome);\n\t}\n}\n\n/** Runs `fn` once the page has drawn a frame after the current task (the next frame's callbacks run before it paints). */\nfunction afterDrawn(fn: () => void): void {\n\tsetTimeout(() => requestAnimationFrame(() => requestAnimationFrame(fn)), 0);\n}\n"]}

package/dist/web/themes.d.ts

@@ -0,0 +1,6 @@
+import type { Context } from "../context/index.ts";
+import type { Principal } from "../data/index.ts";
+import type { Host } from "../host/index.ts";
+/** Follows the themes on `host` and writes the active one on `:root` until the returned stop. */
+export declare function followThemes<P extends Principal>(host: Host<P>, context: Context): Promise<() => void>;
+//# sourceMappingURL=themes.d.ts.map

package/dist/web/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/web/themes.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAG7C,iGAAiG;AACjG,wBAAsB,YAAY,CAAC,CAAC,SAAS,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,IAAI,CAAC,CAkB5G"}

package/dist/web/themes.js

@@ -0,0 +1,31 @@
+/// <reference lib="dom" />
+// The page's themes (slice 11 §4b, decision "Looks and themes"): the active theme written as CSS custom properties on
+// `:root` (and `color-scheme`), following the registry, the user's pick and the system's colour scheme; no reload. The
+// app's stylesheet and the plugins' CSS read the variables.
+import { followActiveTheme, themeVariables } from "../surfaces/index.js";
+/** Follows the themes on `host` and writes the active one on `:root` until the returned stop. */
+export async function followThemes(host, context) {
+    const scheme = matchMedia("(prefers-color-scheme: dark)");
+    let written = [];
+    const follower = await followActiveTheme(host, scheme.matches ? "dark" : "light", (theme) => {
+        written = writeVariables(themeVariables(theme), written);
+        document.documentElement.style.colorScheme = theme.mode;
+    }, context);
+    const schemeChanged = () => follower.setMode(scheme.matches ? "dark" : "light");
+    scheme.addEventListener("change", schemeChanged);
+    return () => {
+        follower.stop();
+        scheme.removeEventListener("change", schemeChanged);
+    };
+}
+/** Sets `variables` on `:root`, removing those of `before` it no longer has; the names it set. */
+function writeVariables(variables, before) {
+    const style = document.documentElement.style;
+    for (const name of before)
+        if (!Object.hasOwn(variables, name))
+            style.removeProperty(name);
+    for (const [name, value] of Object.entries(variables))
+        style.setProperty(name, value);
+    return Object.keys(variables);
+}
+//# sourceMappingURL=themes.js.map

package/dist/web/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../../src/web/themes.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,sHAAsH;AACtH,uHAAuH;AACvH,4DAA4D;AAK5D,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEzE,iGAAiG;AACjG,MAAM,CAAC,KAAK,UAAU,YAAY,CAAsB,IAAa,EAAE,OAAgB;IACtF,MAAM,MAAM,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAC;IAC1D,IAAI,OAAO,GAAsB,EAAE,CAAC;IACpC,MAAM,QAAQ,GAAG,MAAM,iBAAiB,CACvC,IAAI,EACJ,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACjC,CAAC,KAAK,EAAE,EAAE;QACT,OAAO,GAAG,cAAc,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QACzD,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC;IACzD,CAAC,EACD,OAAO,CACP,CAAC;IACF,MAAM,aAAa,GAAG,GAAS,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACtF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;IACjD,OAAO,GAAG,EAAE;QACX,QAAQ,CAAC,IAAI,EAAE,CAAC;QAChB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;IACrD,CAAC,CAAC;AACH,CAAC;AAED,kGAAkG;AAClG,SAAS,cAAc,CAAC,SAA2C,EAAE,MAAyB;IAC7F,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC;IAC7C,KAAK,MAAM,IAAI,IAAI,MAAM;QAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC;YAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC3F,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;QAAE,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACtF,OAAO,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAC/B,CAAC","sourcesContent":["/// <reference lib=\"dom\" />\n// The page's themes (slice 11 §4b, decision \"Looks and themes\"): the active theme written as CSS custom properties on\n// `:root` (and `color-scheme`), following the registry, the user's pick and the system's colour scheme; no reload. The\n// app's stylesheet and the plugins' CSS read the variables.\n\nimport type { Context } from \"../context/index.ts\";\nimport type { Principal } from \"../data/index.ts\";\nimport type { Host } from \"../host/index.ts\";\nimport { followActiveTheme, themeVariables } from \"../surfaces/index.ts\";\n\n/** Follows the themes on `host` and writes the active one on `:root` until the returned stop. */\nexport async function followThemes<P extends Principal>(host: Host<P>, context: Context): Promise<() => void> {\n\tconst scheme = matchMedia(\"(prefers-color-scheme: dark)\");\n\tlet written: readonly string[] = [];\n\tconst follower = await followActiveTheme(\n\t\thost,\n\t\tscheme.matches ? \"dark\" : \"light\",\n\t\t(theme) => {\n\t\t\twritten = writeVariables(themeVariables(theme), written);\n\t\t\tdocument.documentElement.style.colorScheme = theme.mode;\n\t\t},\n\t\tcontext,\n\t);\n\tconst schemeChanged = (): void => follower.setMode(scheme.matches ? \"dark\" : \"light\");\n\tscheme.addEventListener(\"change\", schemeChanged);\n\treturn () => {\n\t\tfollower.stop();\n\t\tscheme.removeEventListener(\"change\", schemeChanged);\n\t};\n}\n\n/** Sets `variables` on `:root`, removing those of `before` it no longer has; the names it set. */\nfunction writeVariables(variables: Readonly<Record<string, string>>, before: readonly string[]): readonly string[] {\n\tconst style = document.documentElement.style;\n\tfor (const name of before) if (!Object.hasOwn(variables, name)) style.removeProperty(name);\n\tfor (const [name, value] of Object.entries(variables)) style.setProperty(name, value);\n\treturn Object.keys(variables);\n}\n"]}