@ghub/identity-chrome 0.1.0 → 0.3.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,50 @@
+/**
+ * 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 AccountItem, 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 items(): AccountItem[];
+    set items(next: AccountItem[] | 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, iconOf, type AccountItem, type AccountLabels, type AccountOrganisation, type AccountPerson, 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,27 @@
+"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.iconOf = 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; } });
+Object.defineProperty(exports, "iconOf", { enumerable: true, get: function () { return account_js_2.iconOf; } });
+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

@@ -2,11 +2,15 @@
  * @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. The server
- * half, with the token, is `@ghub/identity-chrome/server`.
+ * 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 type { CatalogueEntry, ChromeLegal, ChromePerson, ChromePublicView, ChromeTile, ChromeView, } from "./types.js";
+export { ACCOUNT_LABELS, APPS_LABELS, createAccountElementClass, createAppsElementClass, defineAccountElement, defineAppsElement, defineChromeElements, type AccountElement, type AccountItem, type AccountLabels, type AccountOrganisation, type AccountPerson, type AppsElement, type AppsLabels, 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

@@ -3,11 +3,13 @@
  * @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. The server
- * half, with the token, is `@ghub/identity-chrome/server`.
+ * 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.createCatalogue = exports.catalogueMarkUrl = exports.createChromeCore = exports.DEFAULT_TIMEOUT_MS = exports.CACHE_MAX_AGE_MS = exports.CACHE_KEY = void 0;
+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; } });
@@ -16,6 +18,18 @@ Object.defineProperty(exports, "createChromeCore", { enumerable: true, get: func
 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,49 @@
+/**
+ * @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 { AccountItem, 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";
+/** Whether the popup opens below the trigger (a top bar) or above it (the bottom of a sidebar). Below, by default. */
+type Placement = "bottom" | "top";
+export interface GpAppsProps {
+    core: ChromeCore | null;
+    labels?: Partial<AppsLabels>;
+    align?: Align;
+    placement?: Placement;
+    className?: string;
+}
+/** `<gp-apps>`, the apps picker. */
+export declare function GpApps({ core, labels, align, placement, 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;
+    /** The product's own items, after the organisations. */
+    items?: AccountItem[] | null;
+    labels?: Partial<AccountLabels>;
+    /** `row` for the bottom of a sidebar: the picture with the name over the address, full width. */
+    layout?: "button" | "row";
+    align?: Align;
+    placement?: Placement;
+    className?: string;
+}
+/** `<gp-account>`, the account popup. */
+export declare function GpAccount({ core, person, organisations, product, viaIdentity, onSignOut, onSwitch, items, labels, layout, align, placement, className, }: GpAccountProps): ReactElement;
+export {};
+//# sourceMappingURL=react.d.ts.map

package/dist/react.js

@@ -0,0 +1,77 @@
+"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, placement, 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, placement });
+}
+/** `<gp-account>`, the account popup. */
+function GpAccount({ core, person, organisations = null, product = null, viaIdentity = false, onSignOut = null, onSwitch = null, items = null, labels, layout, align, placement, 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)
+            ref.current.items = items;
+    }, [items]);
+    (0, react_1.useEffect)(() => {
+        if (ref.current !== null && labels !== undefined)
+            ref.current.labels = labels;
+    }, [labels]);
+    return (0, react_1.createElement)("gp-account", { ref, className, layout, align, placement });
+}
+//# sourceMappingURL=react.js.map

package/dist/tint.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The coloured initial's seven tints (sheet 32), and how one is picked.
+ *
+ * Tints of the seven product mark hues at L 0.84, C 0.07, with the initial in
+ * mark ink at 600: ink on tint measures 9.8 to 11.2, so the initial passes 4.5
+ * at any size on every host.
+ *
+ * **Picked by a stable id, never by the name**, so a person keeps their colour
+ * when they change their name and two people of the same name do not share one.
+ * Identity picks it from the Identity's id and sends only the result; a product
+ * hashes its own user id the same way for somebody with no Identity. Identity
+ * keeps a copy of `avatarTint` in step by hand, because this package is public
+ * and Identity does not depend on it: the vectors in `tint.test.ts` are the
+ * contract between the two.
+ */
+/** Tide, Harbour, Iris, Rose, Ember, Amber, Moss: the order the index counts in. */
+export declare const AVATAR_TINTS: readonly ["oklch(0.84 0.06 200)", "oklch(0.84 0.06 258)", "oklch(0.84 0.07 296)", "oklch(0.85 0.07 355)", "oklch(0.85 0.07 33)", "oklch(0.87 0.08 70)", "oklch(0.85 0.07 148)"];
+/** Mark ink: the initial on every tint. */
+export declare const AVATAR_INK = "#141c1e";
+/** Which of the seven tints a stable id gets: FNV-1a over its UTF-16 code units, modulo seven. */
+export declare function avatarTint(id: string): number;
+//# sourceMappingURL=tint.d.ts.map

package/dist/tint.js

@@ -0,0 +1,41 @@
+"use strict";
+/**
+ * The coloured initial's seven tints (sheet 32), and how one is picked.
+ *
+ * Tints of the seven product mark hues at L 0.84, C 0.07, with the initial in
+ * mark ink at 600: ink on tint measures 9.8 to 11.2, so the initial passes 4.5
+ * at any size on every host.
+ *
+ * **Picked by a stable id, never by the name**, so a person keeps their colour
+ * when they change their name and two people of the same name do not share one.
+ * Identity picks it from the Identity's id and sends only the result; a product
+ * hashes its own user id the same way for somebody with no Identity. Identity
+ * keeps a copy of `avatarTint` in step by hand, because this package is public
+ * and Identity does not depend on it: the vectors in `tint.test.ts` are the
+ * contract between the two.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AVATAR_INK = exports.AVATAR_TINTS = void 0;
+exports.avatarTint = avatarTint;
+/** Tide, Harbour, Iris, Rose, Ember, Amber, Moss: the order the index counts in. */
+exports.AVATAR_TINTS = [
+    "oklch(0.84 0.06 200)",
+    "oklch(0.84 0.06 258)",
+    "oklch(0.84 0.07 296)",
+    "oklch(0.85 0.07 355)",
+    "oklch(0.85 0.07 33)",
+    "oklch(0.87 0.08 70)",
+    "oklch(0.85 0.07 148)",
+];
+/** Mark ink: the initial on every tint. */
+exports.AVATAR_INK = "#141c1e";
+/** Which of the seven tints a stable id gets: FNV-1a over its UTF-16 code units, modulo seven. */
+function avatarTint(id) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < id.length; i += 1) {
+        hash ^= id.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return (hash >>> 0) % exports.AVATAR_TINTS.length;
+}
+//# sourceMappingURL=tint.js.map

package/dist/types.d.ts

@@ -19,6 +19,28 @@ export interface ChromeTile {
 export interface ChromePerson {
     hasIdentity: boolean;
     avatarUrl: string | null;
+    /**
+     * Which of the seven avatar tints the Identity's id picks (0 to 6, `avatarTint`),
+     * so the coloured initial is the same in every product. Null without an Identity,
+     * and from an Identity too old to send it.
+     */
+    tint: number | null;
+}
+/**
+ * Where the account popup's own links go on Identity: the pill and the pencil.
+ * Identity sends them, like the footer, so its address can move without a
+ * release here. Null when they were not sent or any is not a web address, and
+ * then neither the pill nor the pencil is drawn.
+ */
+export interface ChromeIdentityLinks {
+    /** "Manage your Identity account". */
+    accountUrl: string;
+    /** The pencil on the picture: the profile screen, where the picture is set. */
+    pictureUrl: string;
+    /** "Set up your Identity": registration, saying which product sent them and never carrying an address. */
+    setupUrl: string;
+    /** Identity's own mark for the pill, at an address that always leads to the current file. */
+    iconUrl: string | null;
 }
 /**
  * The account popup's two footer links, the same in every product. Identity sends
@@ -29,11 +51,12 @@ export interface ChromeLegal {
     termsUrl: string;
     privacyUrl: string;
 }
-/** The person, the products they have, the public ones they do not, and the footer. */
+/** The person, the products they have, the public ones they do not, Identity's own links and the footer. */
 export interface ChromeView {
     person: ChromePerson;
     yours: ChromeTile[];
     more: ChromeTile[];
+    identity: ChromeIdentityLinks | null;
     legal: ChromeLegal | null;
 }
 /** The public half alone, for painting the lower group before the personal one arrives. */

package/dist/validate.js

@@ -69,6 +69,29 @@ function legalOf(value) {
     const privacyUrl = safeUrl(value["privacyUrl"]);
     return termsUrl === null || privacyUrl === null ? null : { termsUrl, privacyUrl };
 }
+/** All three of Identity's links, or null, the same way as the footer. */
+function identityOf(value) {
+    if (!isRecord(value))
+        return null;
+    const accountUrl = safeUrl(value["accountUrl"]);
+    const pictureUrl = safeUrl(value["pictureUrl"]);
+    const setupUrl = safeUrl(value["setupUrl"]);
+    if (accountUrl === null || pictureUrl === null || setupUrl === null)
+        return null;
+    const icon = value["iconUrl"];
+    return {
+        accountUrl,
+        pictureUrl,
+        setupUrl,
+        iconUrl: icon === null || icon === undefined ? null : safeUrl(icon),
+    };
+}
+/** One of the seven tints, or null for anything else. */
+function tintOf(value) {
+    return typeof value === "number" && Number.isInteger(value) && value >= 0 && value < 7
+        ? value
+        : null;
+}
 /** A view that can be drawn, or null where the answer is not one. */
 function parseView(value) {
     if (!isRecord(value) || !isRecord(value["person"]))
@@ -85,9 +108,11 @@ function parseView(value) {
         person: {
             hasIdentity: person["hasIdentity"],
             avatarUrl: avatar === null || avatar === undefined ? null : safeUrl(avatar),
+            tint: tintOf(person["tint"]),
         },
         yours,
         more,
+        identity: identityOf(value["identity"]),
         legal: legalOf(value["legal"]),
     };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ghub/identity-chrome",
-  "version": "0.1.0",
-  "description": "The shared header controls of the Gelhaus Solutions products: the apps picker and the account popup. The browser half (state, cache, the last list held for an outage) and the server half (the token calls and a route handler). No dependencies.",
+  "version": "0.3.0",
+  "description": "The shared header controls of the Gelhaus Solutions products: the apps picker and the account popup, as custom elements with shadow DOM and as React wrappers. The browser half (state, cache, the last list held for an outage) and the server half (the token calls and a route handler). No dependencies.",
   "author": "Gelhaus Solutions (Enno Gelhaus) <egelhaus@ennogelhaus.de> (https://ennogelhaus.de)",
   "homepage": "https://ennogelhaus.de",
   "license": "SEE LICENSE IN LICENSE",
@@ -20,6 +20,10 @@
     "./server": {
       "types": "./dist/server.d.ts",
       "default": "./dist/server.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
     }
   },
   "files": [
@@ -34,8 +38,19 @@
   "publishConfig": {
     "access": "public"
   },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^22.19.7",
+    "@types/react": "^19.3.0",
+    "jsdom": "^30.1.1",
+    "react": "19.2.8",
     "typescript": "5.9.3",
     "vitest": "^4.1.8"
   },