@ghub/identity-chrome 0.0.0-stage → 0.2.0

package/dist/elements/contract.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The host contract: what the two elements read from the page they sit in.
+ *
+ * **The published `@ghub/tokens` names, and no family of their own.** The
+ * design drew a `--gc-*` set; the operator chose (2026-10-17) to read the
+ * names a host on `@ghub/tokens` already declares on its root, so such a host
+ * is styled with no setup at all. Custom properties inherit into a shadow
+ * root, which is the one thing that crosses it. A host on something else sets
+ * the same names.
+ *
+ * | Read | From | Notes |
+ * | --- | --- | --- |
+ * | the popup's surface | `--ga-menu`, else `--gm-overlay` | Aurora's frosted menu where the host is Aurora |
+ * | its frost | `--ga-frost-menu`, else none | |
+ * | its shadow | `--ga-shadow-menu`, else `--gm-shadow-overlay` | |
+ * | the solid surface | `--gm-overlay` | reduced transparency, the badge, the fade |
+ * | the account popup's tinted ground | `--ga-menu`, else `--gm-sunken` | the operator's pick (2026-10-17): exact to sheet 32 on a light host; on a dark one a tray a step below the page |
+ * | its solid ground | `--gm-sunken` | reduced transparency |
+ * | the account popup's panels | `--ga-track`, else `--gm-overlay` | Aurora's six per cent ink film, the white wash sheet 32 draws on glass |
+ * | everything else | `--gm-plate`, `--gm-ink`, `--gm-ink-2`, `--gm-ink-3`, `--gm-hairline`, `--gm-control`, `--gm-hover`, `--gm-active`, `--gm-selected`, `--gm-accent`, `--gm-accent-text`, `--gm-ring`, `--gm-crit-ink` | |
+ * | the face | `--font-sans` | |
+ *
+ * A host that declares none of them gets modern light, or modern dark under
+ * `prefers-color-scheme: dark`, the values sheet 31 draws its light and dark
+ * hosts with. No second accent: the popups take the host's.
+ */
+/** The `:host` rules both elements start their sheet with. */
+export declare const CONTRACT_CSS: string;
+//# sourceMappingURL=contract.d.ts.map

package/dist/elements/contract.js

@@ -0,0 +1,109 @@
+"use strict";
+/**
+ * The host contract: what the two elements read from the page they sit in.
+ *
+ * **The published `@ghub/tokens` names, and no family of their own.** The
+ * design drew a `--gc-*` set; the operator chose (2026-10-17) to read the
+ * names a host on `@ghub/tokens` already declares on its root, so such a host
+ * is styled with no setup at all. Custom properties inherit into a shadow
+ * root, which is the one thing that crosses it. A host on something else sets
+ * the same names.
+ *
+ * | Read | From | Notes |
+ * | --- | --- | --- |
+ * | the popup's surface | `--ga-menu`, else `--gm-overlay` | Aurora's frosted menu where the host is Aurora |
+ * | its frost | `--ga-frost-menu`, else none | |
+ * | its shadow | `--ga-shadow-menu`, else `--gm-shadow-overlay` | |
+ * | the solid surface | `--gm-overlay` | reduced transparency, the badge, the fade |
+ * | the account popup's tinted ground | `--ga-menu`, else `--gm-sunken` | the operator's pick (2026-10-17): exact to sheet 32 on a light host; on a dark one a tray a step below the page |
+ * | its solid ground | `--gm-sunken` | reduced transparency |
+ * | the account popup's panels | `--ga-track`, else `--gm-overlay` | Aurora's six per cent ink film, the white wash sheet 32 draws on glass |
+ * | everything else | `--gm-plate`, `--gm-ink`, `--gm-ink-2`, `--gm-ink-3`, `--gm-hairline`, `--gm-control`, `--gm-hover`, `--gm-active`, `--gm-selected`, `--gm-accent`, `--gm-accent-text`, `--gm-ring`, `--gm-crit-ink` | |
+ * | the face | `--font-sans` | |
+ *
+ * A host that declares none of them gets modern light, or modern dark under
+ * `prefers-color-scheme: dark`, the values sheet 31 draws its light and dark
+ * hosts with. No second accent: the popups take the host's.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTRACT_CSS = void 0;
+const LIGHT = {
+    overlay: "#ffffff",
+    sunken: "oklch(0.955 0.004 258)",
+    plate: "oklch(0.97 0.003 258)",
+    ink: "oklch(0.19 0.008 258)",
+    ink2: "oklch(0.42 0.012 258)",
+    ink3: "oklch(0.53 0.014 258)",
+    hairline: "oklch(0 0 0 / 0.09)",
+    control: "oklch(0 0 0 / 0.48)",
+    hover: "oklch(0 0 0 / 0.045)",
+    active: "oklch(0 0 0 / 0.08)",
+    selected: "oklch(0.52 0.11 205 / 0.1)",
+    accent: "oklch(0.52 0.11 205)",
+    accentText: "oklch(0.5 0.11 205)",
+    ring: "oklch(0.52 0.11 205)",
+    critInk: "oklch(0.5 0.19 22)",
+    shadow: "0 0 0 1px oklch(0 0 0 / 0.07), 0 2px 4px oklch(0 0 0 / 0.04), 0 18px 40px -10px oklch(0 0 0 / 0.2)",
+};
+const DARK = {
+    overlay: "oklch(0.265 0.01 258)",
+    sunken: "oklch(0.155 0.007 258)",
+    plate: "oklch(0.235 0.009 258)",
+    ink: "oklch(0.975 0.003 255)",
+    ink2: "oklch(0.8 0.009 255)",
+    ink3: "oklch(0.645 0.012 258)",
+    hairline: "oklch(1 0 0 / 0.11)",
+    control: "oklch(1 0 0 / 0.36)",
+    hover: "oklch(1 0 0 / 0.06)",
+    active: "oklch(1 0 0 / 0.1)",
+    selected: "oklch(0.72 0.12 200 / 0.14)",
+    accent: "oklch(0.72 0.12 200)",
+    accentText: "oklch(0.78 0.11 200)",
+    ring: "oklch(0.82 0.11 196)",
+    critInk: "oklch(0.72 0.18 25)",
+    shadow: "inset 0 1px 0 oklch(1 0 0 / 0.08), 0 0 0 1px oklch(1 0 0 / 0.06), 0 24px 48px -12px oklch(0 0 0 / 0.6)",
+};
+/** The element's private names, each read from the host's published one with a fallback. */
+function declarations(f) {
+    return `
+    --_overlay: var(--ga-menu, var(--gm-overlay, ${f.overlay}));
+    --_overlay-solid: var(--gm-overlay, ${f.overlay});
+    --_backdrop: var(--ga-frost-menu, none);
+    --_shadow: var(--ga-shadow-menu, var(--gm-shadow-overlay, ${f.shadow}));
+    --_tint: var(--ga-menu, var(--gm-sunken, ${f.sunken}));
+    --_tint-solid: var(--gm-sunken, ${f.sunken});
+    --_panel: var(--ga-track, var(--gm-overlay, ${f.overlay}));
+    --_plate: var(--gm-plate, ${f.plate});
+    --_ink: var(--gm-ink, ${f.ink});
+    --_ink-2: var(--gm-ink-2, ${f.ink2});
+    --_ink-3: var(--gm-ink-3, ${f.ink3});
+    --_hairline: var(--gm-hairline, ${f.hairline});
+    --_control: var(--gm-control, ${f.control});
+    --_hover: var(--gm-hover, ${f.hover});
+    --_active: var(--gm-active, ${f.active});
+    --_selected: var(--gm-selected, ${f.selected});
+    --_accent: var(--gm-accent, ${f.accent});
+    --_accent-text: var(--gm-accent-text, ${f.accentText});
+    --_ring: var(--gm-ring, ${f.ring});
+    --_crit-ink: var(--gm-crit-ink, ${f.critInk});
+    --_font: var(--font-sans, Geist, ui-sans-serif, system-ui, sans-serif);`;
+}
+/** The `:host` rules both elements start their sheet with. */
+exports.CONTRACT_CSS = `
+  :host {${declarations(LIGHT)}
+    position: relative;
+    display: inline-block;
+    font-family: var(--_font);
+    -webkit-font-smoothing: antialiased;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host {${declarations(DARK)}
+    }
+  }
+  :host([hidden]) { display: none; }
+  .sr-only {
+    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+  }
+`;
+//# sourceMappingURL=contract.js.map

package/dist/elements/dom.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The few DOM helpers both elements build their shadow trees with. Nothing here
+ * runs until an element is constructed, so importing it on a server is safe.
+ */
+export declare const SVG_NS = "http://www.w3.org/2000/svg";
+export declare function element<K extends keyof HTMLElementTagNameMap>(tag: K, attributes?: Record<string, string>, text?: string): HTMLElementTagNameMap[K];
+/** An icon of one stroked or filled path, hidden from assistive technology. */
+export declare function pathIcon(size: number, viewBox: string, d: string, stroke?: {
+    width: number;
+} | null): SVGSVGElement;
+/** The close cross both popups draw. */
+export declare function crossMark(): SVGSVGElement;
+//# sourceMappingURL=dom.d.ts.map

package/dist/elements/dom.js

@@ -0,0 +1,45 @@
+"use strict";
+/**
+ * The few DOM helpers both elements build their shadow trees with. Nothing here
+ * runs until an element is constructed, so importing it on a server is safe.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVG_NS = void 0;
+exports.element = element;
+exports.pathIcon = pathIcon;
+exports.crossMark = crossMark;
+exports.SVG_NS = "http://www.w3.org/2000/svg";
+function element(tag, attributes = {}, text) {
+    const made = document.createElement(tag);
+    for (const [name, value] of Object.entries(attributes))
+        made.setAttribute(name, value);
+    if (text !== undefined)
+        made.textContent = text;
+    return made;
+}
+/** An icon of one stroked or filled path, hidden from assistive technology. */
+function pathIcon(size, viewBox, d, stroke = null) {
+    const svg = document.createElementNS(exports.SVG_NS, "svg");
+    svg.setAttribute("width", String(size));
+    svg.setAttribute("height", String(size));
+    svg.setAttribute("viewBox", viewBox);
+    svg.setAttribute("aria-hidden", "true");
+    const path = document.createElementNS(exports.SVG_NS, "path");
+    path.setAttribute("d", d);
+    if (stroke === null) {
+        path.setAttribute("fill", "currentColor");
+    }
+    else {
+        path.setAttribute("fill", "none");
+        path.setAttribute("stroke", "currentColor");
+        path.setAttribute("stroke-width", String(stroke.width));
+        path.setAttribute("stroke-linecap", "round");
+    }
+    svg.append(path);
+    return svg;
+}
+/** The close cross both popups draw. */
+function crossMark() {
+    return pathIcon(14, "0 0 14 14", "M2 2l10 10M12 2L2 12", { width: 1.6 });
+}
+//# sourceMappingURL=dom.js.map

package/dist/elements/index.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The two header controls as custom elements, and the one call that defines both.
+ *
+ * Safe to import on a server: nothing touches the DOM until a define call runs
+ * in a browser.
+ */
+import type { ChromeCore } from "../core.js";
+import { type AccountLabels, type AccountOrganisation, type AccountPerson, type SignOutHandler, type SwitchHandler } from "./account.js";
+import { type AppsLabels } from "./apps.js";
+/** What `<gp-apps>` offers its page. */
+export interface AppsElement extends HTMLElement {
+    get core(): ChromeCore | null;
+    set core(next: ChromeCore | null);
+    get labels(): AppsLabels;
+    set labels(next: Partial<AppsLabels>);
+    readonly open: boolean;
+    show(): void;
+    close(returnFocus: boolean): void;
+}
+/** What `<gp-account>` offers its page. */
+export interface AccountElement extends HTMLElement {
+    get core(): ChromeCore | null;
+    set core(next: ChromeCore | null);
+    get person(): AccountPerson | null;
+    set person(next: AccountPerson | null);
+    get organisations(): AccountOrganisation[];
+    set organisations(next: AccountOrganisation[] | null);
+    product: string | null;
+    viaIdentity: boolean;
+    onSignOut: SignOutHandler | null;
+    onSwitch: SwitchHandler | null;
+    get labels(): AccountLabels;
+    set labels(next: Partial<AccountLabels>);
+    readonly open: boolean;
+    show(): void;
+    close(returnFocus: boolean): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "gp-apps": AppsElement;
+        "gp-account": AccountElement;
+    }
+}
+/** Defines `<gp-apps>` and `<gp-account>`, each once. */
+export declare function defineChromeElements(): void;
+export { ACCOUNT_LABELS, createAccountElementClass, defineAccountElement, type AccountLabels, type AccountOrganisation, type AccountPerson, type OrganisationRole, type SignOutHandler, type SwitchHandler, } from "./account.js";
+export { APPS_LABELS, createAppsElementClass, defineAppsElement, type AppsLabels } from "./apps.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/index.js

@@ -0,0 +1,26 @@
+"use strict";
+/**
+ * The two header controls as custom elements, and the one call that defines both.
+ *
+ * Safe to import on a server: nothing touches the DOM until a define call runs
+ * in a browser.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineAppsElement = exports.createAppsElementClass = exports.APPS_LABELS = exports.defineAccountElement = exports.createAccountElementClass = exports.ACCOUNT_LABELS = void 0;
+exports.defineChromeElements = defineChromeElements;
+const account_js_1 = require("./account.js");
+const apps_js_1 = require("./apps.js");
+/** Defines `<gp-apps>` and `<gp-account>`, each once. */
+function defineChromeElements() {
+    (0, apps_js_1.defineAppsElement)();
+    (0, account_js_1.defineAccountElement)();
+}
+var account_js_2 = require("./account.js");
+Object.defineProperty(exports, "ACCOUNT_LABELS", { enumerable: true, get: function () { return account_js_2.ACCOUNT_LABELS; } });
+Object.defineProperty(exports, "createAccountElementClass", { enumerable: true, get: function () { return account_js_2.createAccountElementClass; } });
+Object.defineProperty(exports, "defineAccountElement", { enumerable: true, get: function () { return account_js_2.defineAccountElement; } });
+var apps_js_2 = require("./apps.js");
+Object.defineProperty(exports, "APPS_LABELS", { enumerable: true, get: function () { return apps_js_2.APPS_LABELS; } });
+Object.defineProperty(exports, "createAppsElementClass", { enumerable: true, get: function () { return apps_js_2.createAppsElementClass; } });
+Object.defineProperty(exports, "defineAppsElement", { enumerable: true, get: function () { return apps_js_2.defineAppsElement; } });
+//# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @ghub/identity-chrome
+ *
+ * The shared header controls of the Gelhaus Solutions products. This entry is the
+ * browser half: state, cache and the last list held for an outage, and the two
+ * controls as custom elements (`<gp-apps>`, `<gp-account>`). The server half,
+ * with the token, is `@ghub/identity-chrome/server`; React wrappers are
+ * `@ghub/identity-chrome/react`.
+ */
+export { CACHE_KEY, CACHE_MAX_AGE_MS, DEFAULT_TIMEOUT_MS, createChromeCore, type ChromeCore, type ChromeCoreOptions, type ChromeState, type ChromeStatus, type StorageLike, } from "./core.js";
+export { catalogueMarkUrl, createCatalogue, type Catalogue, type CatalogueOptions, } from "./catalogue.js";
+export { ACCOUNT_LABELS, APPS_LABELS, createAccountElementClass, createAppsElementClass, defineAccountElement, defineAppsElement, defineChromeElements, type AccountElement, type AccountLabels, type AccountOrganisation, type AccountPerson, type AppsElement, type AppsLabels, type OrganisationRole, type SignOutHandler, type SwitchHandler, } from "./elements/index.js";
+export { AVATAR_INK, AVATAR_TINTS, avatarTint } from "./tint.js";
+export type { CatalogueEntry, ChromeIdentityLinks, ChromeLegal, ChromePerson, ChromePublicView, ChromeTile, ChromeView, } from "./types.js";
+export { safeUrl } from "./validate.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/**
+ * @ghub/identity-chrome
+ *
+ * The shared header controls of the Gelhaus Solutions products. This entry is the
+ * browser half: state, cache and the last list held for an outage, and the two
+ * controls as custom elements (`<gp-apps>`, `<gp-account>`). The server half,
+ * with the token, is `@ghub/identity-chrome/server`; React wrappers are
+ * `@ghub/identity-chrome/react`.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.safeUrl = exports.avatarTint = exports.AVATAR_TINTS = exports.AVATAR_INK = exports.defineChromeElements = exports.defineAppsElement = exports.defineAccountElement = exports.createAppsElementClass = exports.createAccountElementClass = exports.APPS_LABELS = exports.ACCOUNT_LABELS = exports.createCatalogue = exports.catalogueMarkUrl = exports.createChromeCore = exports.DEFAULT_TIMEOUT_MS = exports.CACHE_MAX_AGE_MS = exports.CACHE_KEY = void 0;
+var core_js_1 = require("./core.js");
+Object.defineProperty(exports, "CACHE_KEY", { enumerable: true, get: function () { return core_js_1.CACHE_KEY; } });
+Object.defineProperty(exports, "CACHE_MAX_AGE_MS", { enumerable: true, get: function () { return core_js_1.CACHE_MAX_AGE_MS; } });
+Object.defineProperty(exports, "DEFAULT_TIMEOUT_MS", { enumerable: true, get: function () { return core_js_1.DEFAULT_TIMEOUT_MS; } });
+Object.defineProperty(exports, "createChromeCore", { enumerable: true, get: function () { return core_js_1.createChromeCore; } });
+var catalogue_js_1 = require("./catalogue.js");
+Object.defineProperty(exports, "catalogueMarkUrl", { enumerable: true, get: function () { return catalogue_js_1.catalogueMarkUrl; } });
+Object.defineProperty(exports, "createCatalogue", { enumerable: true, get: function () { return catalogue_js_1.createCatalogue; } });
+var index_js_1 = require("./elements/index.js");
+Object.defineProperty(exports, "ACCOUNT_LABELS", { enumerable: true, get: function () { return index_js_1.ACCOUNT_LABELS; } });
+Object.defineProperty(exports, "APPS_LABELS", { enumerable: true, get: function () { return index_js_1.APPS_LABELS; } });
+Object.defineProperty(exports, "createAccountElementClass", { enumerable: true, get: function () { return index_js_1.createAccountElementClass; } });
+Object.defineProperty(exports, "createAppsElementClass", { enumerable: true, get: function () { return index_js_1.createAppsElementClass; } });
+Object.defineProperty(exports, "defineAccountElement", { enumerable: true, get: function () { return index_js_1.defineAccountElement; } });
+Object.defineProperty(exports, "defineAppsElement", { enumerable: true, get: function () { return index_js_1.defineAppsElement; } });
+Object.defineProperty(exports, "defineChromeElements", { enumerable: true, get: function () { return index_js_1.defineChromeElements; } });
+var tint_js_1 = require("./tint.js");
+Object.defineProperty(exports, "AVATAR_INK", { enumerable: true, get: function () { return tint_js_1.AVATAR_INK; } });
+Object.defineProperty(exports, "AVATAR_TINTS", { enumerable: true, get: function () { return tint_js_1.AVATAR_TINTS; } });
+Object.defineProperty(exports, "avatarTint", { enumerable: true, get: function () { return tint_js_1.avatarTint; } });
+var validate_js_1 = require("./validate.js");
+Object.defineProperty(exports, "safeUrl", { enumerable: true, get: function () { return validate_js_1.safeUrl; } });
+//# sourceMappingURL=index.js.map

package/dist/react.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @ghub/identity-chrome/react
+ *
+ * The two header controls for a React page: each renders its custom element and
+ * hands it what it needs as properties after mounting, because a core, a person
+ * and a callback are objects and an attribute can carry only a string. The
+ * elements do the drawing, the keyboard and the accessibility; these wrappers
+ * only connect them.
+ */
+import { type ReactElement } from "react";
+import type { ChromeCore } from "./core.js";
+import type { AccountLabels, AccountOrganisation, AccountPerson, AppsLabels, SignOutHandler, SwitchHandler } from "./elements/index.js";
+/** Which edge of the trigger the popup lines up with. The end, by default. */
+type Align = "start" | "end";
+export interface GpAppsProps {
+    core: ChromeCore | null;
+    labels?: Partial<AppsLabels>;
+    align?: Align;
+    className?: string;
+}
+/** `<gp-apps>`, the apps picker. */
+export declare function GpApps({ core, labels, align, className }: GpAppsProps): ReactElement;
+export interface GpAccountProps {
+    core: ChromeCore | null;
+    /** Who is signed in, from the product's own session. Nothing renders without one. */
+    person: AccountPerson | null;
+    organisations?: AccountOrganisation[] | null;
+    /** The product's own name, from its catalogue entry. */
+    product?: string | null;
+    /** The product signs in through Identity, so signing out ends both. */
+    viaIdentity?: boolean;
+    onSignOut?: SignOutHandler | null;
+    onSwitch?: SwitchHandler | null;
+    labels?: Partial<AccountLabels>;
+    align?: Align;
+    className?: string;
+}
+/** `<gp-account>`, the account popup. */
+export declare function GpAccount({ core, person, organisations, product, viaIdentity, onSignOut, onSwitch, labels, align, className, }: GpAccountProps): ReactElement;
+export {};
+//# sourceMappingURL=react.d.ts.map

package/dist/react.js

@@ -0,0 +1,73 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GpApps = GpApps;
+exports.GpAccount = GpAccount;
+/**
+ * @ghub/identity-chrome/react
+ *
+ * The two header controls for a React page: each renders its custom element and
+ * hands it what it needs as properties after mounting, because a core, a person
+ * and a callback are objects and an attribute can carry only a string. The
+ * elements do the drawing, the keyboard and the accessibility; these wrappers
+ * only connect them.
+ */
+const react_1 = require("react");
+const index_js_1 = require("./elements/index.js");
+/** `<gp-apps>`, the apps picker. */
+function GpApps({ core, labels, align, className }) {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        (0, index_js_1.defineChromeElements)();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null)
+            ref.current.core = core;
+    }, [core]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null && labels !== undefined)
+            ref.current.labels = labels;
+    }, [labels]);
+    return (0, react_1.createElement)("gp-apps", { ref, className, align });
+}
+/** `<gp-account>`, the account popup. */
+function GpAccount({ core, person, organisations = null, product = null, viaIdentity = false, onSignOut = null, onSwitch = null, labels, align, className, }) {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        (0, index_js_1.defineChromeElements)();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null)
+            ref.current.core = core;
+    }, [core]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null)
+            ref.current.person = person;
+    }, [person]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null)
+            ref.current.organisations = organisations;
+    }, [organisations]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null)
+            ref.current.product = product;
+    }, [product]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null)
+            ref.current.viaIdentity = viaIdentity;
+    }, [viaIdentity]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null)
+            ref.current.onSignOut = onSignOut;
+    }, [onSignOut]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null)
+            ref.current.onSwitch = onSwitch;
+    }, [onSwitch]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null && labels !== undefined)
+            ref.current.labels = labels;
+    }, [labels]);
+    return (0, react_1.createElement)("gp-account", { ref, className, align });
+}
+//# sourceMappingURL=react.js.map

package/dist/server.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The server half: a product's own server speaking to Identity for the header
+ * controls.
+ *
+ * The secret token lives here and nowhere near a browser. The page asks the
+ * product's own route; that route knows who is signed in, from the product's own
+ * session, and asks Identity about that one person by verified email. Identity
+ * answers with the products they have and the public ones they do not.
+ *
+ * **Say only who is signed in, and only what the product has verified.** The
+ * address goes to Identity as the thing the person's products are joined on, so
+ * an address the product has not verified is a way to ask about somebody else.
+ *
+ * **Never log the token, and never put it in an error.** Everything thrown here
+ * says what happened and nothing about what was sent.
+ */
+import type { ChromeView } from "./types.js";
+/** A refusal or a failure from Identity, with how long to wait when it said. */
+export declare class ChromeError extends Error {
+    readonly status: number;
+    readonly retryAfterSeconds?: number | undefined;
+    constructor(status: number, message: string, retryAfterSeconds?: number | undefined);
+}
+export interface ChromeServerOptions {
+    /** Identity's public address, with or without a trailing slash. */
+    baseUrl: string;
+    /** This product's slug in the catalogue. */
+    product: string;
+    /** The secret token staff issued for this product. Never sent to a browser. */
+    token: string;
+    fetch?: typeof fetch;
+    /** Milliseconds. A call that hangs must not hang a page render. */
+    timeoutMs?: number;
+    /** How long one person's answer is reused, in seconds. Zero asks every time. */
+    viewCacheSeconds?: number;
+    now?: () => number;
+}
+export interface ChromeServer {
+    /** The products of the person signed in, as Identity knows them. Counts as a visit to this product. */
+    view(email: string): Promise<ChromeView>;
+    /** The one-off push of this product's users, inside the window staff opened. Batched for you. */
+    seed(emails: readonly string[]): Promise<{
+        changed: number;
+    }>;
+    /** Say these people no longer have access to this product. */
+    remove(emails: readonly string[]): Promise<{
+        changed: number;
+    }>;
+    /** Drop what is held for one person, on sign-out. */
+    forget(email: string): void;
+    /**
+     * A route for any framework that speaks the web `Request` and `Response`
+     * (Next route handlers, Hono, Bun, Deno, Cloudflare). `who` says who is
+     * signed in, from the product's own session, or null for nobody.
+     */
+    handler(who: (request: Request) => Promise<{
+        email: string;
+    } | null> | {
+        email: string;
+    } | null): (request: Request) => Promise<Response>;
+}
+/** One request to Identity carries at most this many addresses. */
+export declare const BATCH = 1000;
+export declare function createChromeServer(options: ChromeServerOptions): ChromeServer;
+//# sourceMappingURL=server.d.ts.map

package/dist/server.js

@@ -0,0 +1,148 @@
+"use strict";
+/**
+ * The server half: a product's own server speaking to Identity for the header
+ * controls.
+ *
+ * The secret token lives here and nowhere near a browser. The page asks the
+ * product's own route; that route knows who is signed in, from the product's own
+ * session, and asks Identity about that one person by verified email. Identity
+ * answers with the products they have and the public ones they do not.
+ *
+ * **Say only who is signed in, and only what the product has verified.** The
+ * address goes to Identity as the thing the person's products are joined on, so
+ * an address the product has not verified is a way to ask about somebody else.
+ *
+ * **Never log the token, and never put it in an error.** Everything thrown here
+ * says what happened and nothing about what was sent.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BATCH = exports.ChromeError = void 0;
+exports.createChromeServer = createChromeServer;
+const validate_js_1 = require("./validate.js");
+/** A refusal or a failure from Identity, with how long to wait when it said. */
+class ChromeError extends Error {
+    status;
+    retryAfterSeconds;
+    constructor(status, message, retryAfterSeconds) {
+        super(message);
+        this.status = status;
+        this.retryAfterSeconds = retryAfterSeconds;
+        this.name = "ChromeError";
+    }
+}
+exports.ChromeError = ChromeError;
+/** One request to Identity carries at most this many addresses. */
+exports.BATCH = 1000;
+const MAX_HELD = 500;
+const DEFAULT_TIMEOUT_MS = 4000;
+const DEFAULT_CACHE_SECONDS = 60;
+function createChromeServer(options) {
+    const base = options.baseUrl.replace(/\/+$/u, "");
+    const now = options.now ?? Date.now;
+    const timeoutMs = options.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+    const ttlMs = (options.viewCacheSeconds ?? DEFAULT_CACHE_SECONDS) * 1000;
+    const held = new Map();
+    const key = (email) => email.trim().normalize("NFC").toLowerCase();
+    async function call(method, path, body) {
+        const send = options.fetch ?? globalThis.fetch.bind(globalThis);
+        const controller = new AbortController();
+        const timer = setTimeout(() => {
+            controller.abort();
+        }, timeoutMs);
+        let response;
+        try {
+            response = await send(`${base}${path}`, {
+                method,
+                headers: {
+                    accept: "application/json",
+                    "content-type": "application/json",
+                    "x-gpid-product": options.product,
+                    authorization: `Bearer ${options.token}`,
+                },
+                body: JSON.stringify(body),
+                signal: controller.signal,
+            });
+        }
+        catch {
+            throw new ChromeError(0, "Identity could not be reached");
+        }
+        finally {
+            clearTimeout(timer);
+        }
+        if (!response.ok) {
+            const retry = Number(response.headers.get("retry-after"));
+            throw new ChromeError(response.status, `Identity answered ${String(response.status)}`, Number.isFinite(retry) && retry > 0 ? retry : undefined);
+        }
+        try {
+            return await response.json();
+        }
+        catch {
+            throw new ChromeError(502, "Identity's answer was not understood");
+        }
+    }
+    async function batched(method, emails) {
+        let changed = 0;
+        for (let start = 0; start < emails.length; start += exports.BATCH) {
+            const answer = await call(method, "/api/v1/chrome/access", {
+                emails: emails.slice(start, start + exports.BATCH),
+            });
+            const count = answer.changed;
+            changed += typeof count === "number" ? count : 0;
+        }
+        return { changed };
+    }
+    const server = {
+        async view(email) {
+            const id = key(email);
+            const reuse = held.get(id);
+            if (reuse !== undefined && now() - reuse.at < ttlMs)
+                return reuse.view;
+            const view = (0, validate_js_1.parseView)(await call("POST", "/api/v1/chrome/view", { email }));
+            if (view === null)
+                throw new ChromeError(502, "Identity's answer was not understood");
+            // Newest last, so the oldest is the one to go when the table is full.
+            held.delete(id);
+            held.set(id, { view, at: now() });
+            if (held.size > MAX_HELD) {
+                const oldest = held.keys().next().value;
+                if (oldest !== undefined)
+                    held.delete(oldest);
+            }
+            return view;
+        },
+        seed: (emails) => batched("PUT", emails),
+        remove: (emails) => batched("DELETE", emails),
+        forget(email) {
+            held.delete(key(email));
+        },
+        handler(who) {
+            return async (request) => {
+                const json = (status, body, headers = {}) => new Response(JSON.stringify(body), {
+                    status,
+                    headers: {
+                        "content-type": "application/json",
+                        "cache-control": "private, no-store",
+                        ...headers,
+                    },
+                });
+                if (request.method !== "GET")
+                    return json(405, { error: "method not allowed" }, { allow: "GET" });
+                const person = await who(request);
+                if (person === null)
+                    return json(401, { error: "not signed in" });
+                try {
+                    return json(200, await server.view(person.email));
+                }
+                catch (error) {
+                    // Whatever went wrong, the page keeps the list it held. Nothing about why leaves here.
+                    const wait = error instanceof ChromeError && error.status === 429
+                        ? (error.retryAfterSeconds ?? 60)
+                        : 30;
+                    return json(503, { error: "unavailable" }, { "retry-after": String(wait) });
+                }
+            };
+        },
+    };
+    return server;
+}
+//# sourceMappingURL=server.js.map