@statewalker/httpeers-join 0.1.3

package/dist/qr.d.ts

@@ -0,0 +1,60 @@
+/**
+ * How the widget reads a QR code: a seam, with html5-qrcode behind it.
+ *
+ * A SEAM BECAUSE A TEST HAS NO CAMERA. The widget's own behaviour -- which
+ * button shows, what a scanned code does, what a picture with no code says --
+ * is tested through a fake `QrScanner`; the real one is two calls into
+ * `@statewalker/httpeers-qr/browser`, which has its own tests.
+ *
+ * THE CAMERA LIBRARY IS LOADED ON THE FIRST SCAN, NOT AT IMPORT. `html5-qrcode`
+ * is the largest thing in this package's closure by far, and most visits to a
+ * join page never scan anything: they resume, or arrive with `?join=`. A
+ * dynamic `import()` gives a bundler its own chunk to fetch only when someone
+ * presses a scan button, and keeps importing this module free of anything
+ * that needs a browser.
+ *
+ * WHAT COUNTS AS AN INVITATION is `invitationFromQrText` from
+ * `@statewalker/httpeers-member`: a join link (`?join=` or `?invite=`) or a
+ * join blob. A bare invitation id does NOT count from a QR -- nothing tells it
+ * apart from any other short string -- which is why a live scan carries on
+ * past a wifi sticker instead of trying to join with it.
+ */
+/** A running camera scan. */
+export interface QrCameraScan {
+    stop(): Promise<void>;
+}
+/** What a picture held. */
+export type QrFileScan = {
+    ok: true;
+    invitation: string;
+}
+/** `no-qr`: nothing readable in it. `not-accepted`: a QR, but not an invitation. */
+ | {
+    ok: false;
+    reason: "no-qr" | "not-accepted";
+};
+export interface QrScanner {
+    /** Whether a camera can even be asked for. `false` hides the camera button; the picture stays. */
+    cameraAvailable(): boolean;
+    /**
+     * Scan from the camera into `host` (which has an `id`, and is visible) and
+     * call `onInvitation` once with the first invitation seen, the camera
+     * already stopped. REJECTS when the camera cannot start -- refused, absent,
+     * or an insecure origin -- which the widget turns into "choose a picture".
+     */
+    scanCamera(host: HTMLElement, onInvitation: (invitation: string) => void): Promise<QrCameraScan>;
+    /** Find an invitation in a picture. Never rejects for an ordinary miss; that is `ok: false`. */
+    scanFile(file: Blob): Promise<QrFileScan>;
+}
+/**
+ * The real scanner: the rear camera or a picture, through
+ * `@statewalker/httpeers-qr/browser`.
+ *
+ * `cameraAvailable` asks only whether `getUserMedia` exists. That is `false`
+ * on an insecure origin (browsers remove `mediaDevices` there) and in a
+ * browser with no camera API, which are the two cases where a button would be
+ * a promise the page cannot keep. A camera that exists but is refused is
+ * found out by pressing the button, and said then.
+ */
+export declare function defaultQrScanner(): QrScanner;
+//# sourceMappingURL=qr.d.ts.map

package/dist/qr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr.d.ts","sourceRoot":"","sources":["../src/qr.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,6BAA6B;AAC7B,MAAM,WAAW,YAAY;IAC3B,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACvB;AAED,2BAA2B;AAC3B,MAAM,MAAM,UAAU,GAClB;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE;AAClC,oFAAoF;GAClF;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,OAAO,GAAG,cAAc,CAAA;CAAE,CAAC;AAEpD,MAAM,WAAW,SAAS;IACxB,kGAAkG;IAClG,eAAe,IAAI,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IACjG,gGAAgG;IAChG,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;CAC3C;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,IAAI,SAAS,CAsB5C"}

package/dist/qr.js

@@ -0,0 +1,115 @@
+/**
+ * How the widget reads a QR code: a seam, with html5-qrcode behind it.
+ *
+ * A SEAM BECAUSE A TEST HAS NO CAMERA. The widget's own behaviour -- which
+ * button shows, what a scanned code does, what a picture with no code says --
+ * is tested through a fake `QrScanner`; the real one is two calls into
+ * `@statewalker/httpeers-qr/browser`, which has its own tests.
+ *
+ * THE CAMERA LIBRARY IS LOADED ON THE FIRST SCAN, NOT AT IMPORT. `html5-qrcode`
+ * is the largest thing in this package's closure by far, and most visits to a
+ * join page never scan anything: they resume, or arrive with `?join=`. A
+ * dynamic `import()` gives a bundler its own chunk to fetch only when someone
+ * presses a scan button, and keeps importing this module free of anything
+ * that needs a browser.
+ *
+ * WHAT COUNTS AS AN INVITATION is `invitationFromQrText` from
+ * `@statewalker/httpeers-member`: a join link (`?join=` or `?invite=`) or a
+ * join blob. A bare invitation id does NOT count from a QR -- nothing tells it
+ * apart from any other short string -- which is why a live scan carries on
+ * past a wifi sticker instead of trying to join with it.
+ */
+import { invitationFromQrText } from "@statewalker/httpeers-member";
+/**
+ * The real scanner: the rear camera or a picture, through
+ * `@statewalker/httpeers-qr/browser`.
+ *
+ * `cameraAvailable` asks only whether `getUserMedia` exists. That is `false`
+ * on an insecure origin (browsers remove `mediaDevices` there) and in a
+ * browser with no camera API, which are the two cases where a button would be
+ * a promise the page cannot keep. A camera that exists but is refused is
+ * found out by pressing the button, and said then.
+ */
+export function defaultQrScanner() {
+    return {
+        cameraAvailable: () => typeof navigator !== "undefined" &&
+            typeof navigator.mediaDevices?.getUserMedia === "function",
+        async scanCamera(host, onInvitation) {
+            const { scanFromCamera } = await import("@statewalker/httpeers-qr/browser");
+            return scanFromCamera(host, { accept: invitationFromQrText, onCode: onInvitation });
+        },
+        async scanFile(file) {
+            const { scanFile } = await import("@statewalker/httpeers-qr/browser");
+            const found = await scanFile(file, { accept: invitationFromQrText });
+            if (found.ok)
+                return { ok: true, invitation: found.value };
+            // A QR was read and it was not an invitation: a second decoder would
+            // only read the same wrong code.
+            if (found.reason === "not-accepted")
+                return { ok: false, reason: "not-accepted" };
+            const text = await decodePicture(file);
+            if (text == null)
+                return { ok: false, reason: "no-qr" };
+            const invitation = invitationFromQrText(text);
+            return invitation != null ? { ok: true, invitation } : { ok: false, reason: "not-accepted" };
+        },
+    };
+}
+/**
+ * The longest sides a picture is decoded at, largest first, when
+ * html5-qrcode found nothing.
+ */
+const FALLBACK_SIDES = [1600, 800, 400];
+/**
+ * A second decoder for a picture: `decodeQr` (jsQR) from
+ * `@statewalker/httpeers-qr`, over the picture drawn at a few sizes.
+ *
+ * WHY THIS EXISTS. Measured on the demos hub page's own invitation QR (a
+ * 310-character join blob), html5-qrcode's `scanFile` found nothing in a
+ * clean 684x684 screenshot, nor at 600 or 480 pixels, and read it at 400
+ * and 300. A phone screenshot or photo is far larger than that. jsQR read the
+ * same 684-pixel picture at once. The two decoders fail on different
+ * pictures (the package's rung 03 measured 9/12 and 8/12 over twelve
+ * degradations, differing on heavy blur), so trying both costs a second only
+ * when the first has already failed.
+ *
+ * The sizes go DOWN from the picture's own size, capped at 1600: jsQR is
+ * slow on a 12-megapixel photo, and a code that fills a phone photo is still
+ * many pixels per module at 1600.
+ */
+async function decodePicture(file) {
+    let bitmap;
+    try {
+        bitmap = await createImageBitmap(file);
+    }
+    catch {
+        return null; // not a picture the browser can open
+    }
+    try {
+        const { decodeQr } = await import("@statewalker/httpeers-qr");
+        const longest = Math.max(bitmap.width, bitmap.height);
+        const sides = [Math.min(longest, FALLBACK_SIDES[0])];
+        for (const side of FALLBACK_SIDES)
+            if (side < sides[0])
+                sides.push(side);
+        for (const side of sides) {
+            const scale = side / longest;
+            const width = Math.max(1, Math.round(bitmap.width * scale));
+            const height = Math.max(1, Math.round(bitmap.height * scale));
+            const canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            const context = canvas.getContext("2d", { willReadFrequently: true });
+            if (context == null)
+                return null;
+            context.drawImage(bitmap, 0, 0, width, height);
+            const text = decodeQr(context.getImageData(0, 0, width, height));
+            if (text != null)
+                return text;
+        }
+        return null;
+    }
+    finally {
+        bitmap.close();
+    }
+}

package/dist/styles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The widget's own stylesheet, injected once per document.
+ *
+ * OWN CSS, NOT THE PAGE'S. The two pages that use it style in opposite ways:
+ * the demos with a few plain element rules, llm-chat with Tailwind, whose
+ * preflight strips every button of its border and background. Every rule here
+ * is on an `hp-join-` or `hp-invite-` class, so it neither leaks into the page nor depends on
+ * it, and it is NOT in a cascade layer -- unlayered rules beat Tailwind's
+ * `@layer base`, which is what keeps a button looking like a button under it.
+ *
+ * `font: inherit` everywhere: the widget takes the page's typeface and size.
+ * Colours are custom properties on `.hp-join`, so a page re-themes it by
+ * setting `--hp-join-accent` and friends instead of overriding selectors.
+ */
+export declare const JOIN_WIDGET_STYLE_ID = "hp-join-style";
+export declare const JOIN_WIDGET_CSS = "\n.hp-join {\n  --hp-join-fg: #18181b;\n  --hp-join-muted: #52525b;\n  --hp-join-border: #d4d4d8;\n  --hp-join-bg: #ffffff;\n  --hp-join-accent: #1d4ed8;\n  --hp-join-accent-fg: #ffffff;\n  --hp-join-danger: #b91c1c;\n  --hp-join-note-bg: #eff6ff;\n  --hp-join-alert-bg: #fee2e2;\n  --hp-join-live: #15803d;\n  display: flex;\n  flex-direction: column;\n  gap: .6rem;\n  font: inherit;\n  color: var(--hp-join-fg);\n}\n.hp-join p { margin: 0; }\n.hp-join [hidden] { display: none !important; }\n.hp-join-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }\n.hp-join-phase { font-weight: 600; }\n.hp-join-phase::before {\n  content: \"\"; display: inline-block; width: .55em; height: .55em; border-radius: 50%;\n  margin-right: .45em; vertical-align: .08em; background: var(--hp-join-muted);\n}\n.hp-join[data-phase=\"live\"] .hp-join-phase::before { background: var(--hp-join-live); }\n.hp-join[data-phase=\"blocked\"] .hp-join-phase::before,\n.hp-join[data-phase=\"failed\"] .hp-join-phase::before { background: var(--hp-join-danger); }\n.hp-join-peer {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;\n  color: var(--hp-join-muted); word-break: break-all;\n}\n.hp-join-message, .hp-join-error {\n  padding: .6rem .8rem; border-radius: 6px; white-space: pre-wrap; font-size: .95em;\n}\n.hp-join-message { background: var(--hp-join-note-bg); }\n.hp-join-message[role=\"alert\"], .hp-join-error { background: var(--hp-join-alert-bg); }\n.hp-join-form { display: flex; flex-direction: column; gap: .4rem; margin: 0; }\n.hp-join-label { font-weight: 500; }\n.hp-join-input {\n  font: inherit; font-size: .9em; width: 100%; box-sizing: border-box; padding: .45rem .55rem;\n  border: 1px solid var(--hp-join-border); border-radius: 6px; resize: vertical;\n  background: var(--hp-join-bg); color: var(--hp-join-fg);\n}\n.hp-join-input:focus-visible, .hp-join-button:focus-visible, .hp-join-file:focus-within,\n.hp-join-menu-toggle:focus-visible {\n  outline: 2px solid var(--hp-join-accent); outline-offset: 2px;\n}\n.hp-join-actions, .hp-join-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }\n.hp-join-button {\n  font: inherit; font-size: .95em; line-height: 1.3; padding: .4rem .8rem; cursor: pointer;\n  border: 1px solid var(--hp-join-border); border-radius: 6px;\n  background: var(--hp-join-bg); color: var(--hp-join-fg);\n}\n.hp-join-button:disabled { opacity: .5; cursor: default; }\n.hp-join-primary {\n  background: var(--hp-join-accent); border-color: var(--hp-join-accent); color: var(--hp-join-accent-fg);\n}\n.hp-join-danger { color: var(--hp-join-danger); }\n.hp-join-file { display: inline-block; position: relative; }\n.hp-join-visually-hidden {\n  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;\n  clip: rect(0 0 0 0); white-space: nowrap; border: 0;\n}\n.hp-join-viewfinder {\n  width: 100%; max-width: 22rem; min-height: 10rem; border-radius: 6px; overflow: hidden;\n  background: #000;\n}\n.hp-join-viewfinder video { width: 100% !important; display: block; }\n.hp-join-camera-stop { align-self: flex-start; }\n.hp-join-compact { flex-direction: row; align-items: center; gap: .5rem; font-size: .8rem; }\n.hp-join-compact .hp-join-phase::before { width: .5em; height: .5em; }\n.hp-join-compact .hp-join-phase { font-weight: 500; color: var(--hp-join-muted); }\n.hp-join-menu { position: relative; }\n.hp-join-menu-toggle {\n  cursor: pointer; list-style: none; padding: .1rem .45rem; border-radius: 6px;\n  border: 1px solid var(--hp-join-border); color: var(--hp-join-muted);\n}\n.hp-join-menu-toggle::-webkit-details-marker { display: none; }\n.hp-join-menu-panel {\n  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; width: max-content;\n  max-width: min(22rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 5rem); overflow-y: auto;\n  display: flex; flex-direction: column; gap: .5rem; padding: .6rem;\n  background: var(--hp-join-bg); border: 1px solid var(--hp-join-border); border-radius: 8px;\n  box-shadow: 0 6px 20px rgb(0 0 0 / .12);\n}\n.hp-invite {\n  border-top: 1px solid var(--hp-join-border); padding-top: .5rem;\n  --hp-invite-warn-bg: #fef3c7; --hp-invite-warn-fg: #78350f;\n}\n.hp-join-compact .hp-invite { font-size: .9rem; }\n.hp-invite-toggle { cursor: pointer; font-weight: 600; padding: .35rem 0; }\n.hp-invite-body { display: flex; flex-direction: column; gap: .55rem; padding-top: .4rem; }\n.hp-invite-roles { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }\n.hp-invite-legend { font-weight: 500; padding: 0; margin-bottom: .2rem; }\n.hp-invite-role { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; cursor: pointer; }\n.hp-invite-role-input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--hp-join-accent); }\n.hp-invite-warning {\n  padding: .55rem .75rem; border-radius: 6px; font-size: .9em;\n  background: var(--hp-invite-warn-bg); color: var(--hp-invite-warn-fg);\n  border-left: 3px solid var(--hp-join-danger);\n}\n.hp-invite-expiry {\n  font: inherit; font-size: .95em; padding: .4rem .5rem; border-radius: 6px;\n  border: 1px solid var(--hp-join-border); background: var(--hp-join-bg); color: var(--hp-join-fg);\n}\n.hp-invite-create-admin { background: var(--hp-join-danger); border-color: var(--hp-join-danger); }\n.hp-invite-result { display: flex; flex-direction: column; gap: .45rem; }\n.hp-invite-note { font-size: .9em; color: var(--hp-join-muted); }\n.hp-invite-qr { width: 100%; max-width: 15rem; align-self: center; }\n.hp-invite-qr svg { display: block; width: 100%; height: auto; }\n.hp-invite-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em; }\n.hp-invite-copied { font-size: .85em; color: var(--hp-join-live); }\n.hp-invite-pending { display: flex; flex-direction: column; gap: .3rem; font-size: .9em; }\n.hp-invite-pending-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }\n.hp-invite-pending-title { font-weight: 500; }\n.hp-invite-refresh { font-size: .85em; padding: .2rem .55rem; }\n.hp-invite-pending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }\n.hp-invite-pending-empty { color: var(--hp-join-muted); }\n.hp-invite-tag {\n  display: inline-block; padding: 0 .4rem; border-radius: 999px; font-size: .85em;\n  border: 1px solid var(--hp-join-border);\n}\n.hp-invite-tag-admin { color: var(--hp-join-danger); border-color: var(--hp-join-danger); }\n.hp-invite-when { color: var(--hp-join-muted); }\n@media (max-width: 30rem) {\n  /* On a phone the header's menu may sit mid-row; anchored to its button it\n     would run off the screen's left edge. It becomes a sheet along the bottom\n     instead, short enough to leave the header -- and the toggle that closes\n     it -- in view. */\n  .hp-join-menu-panel {\n    position: fixed; left: .5rem; right: .5rem; top: auto; bottom: .5rem; width: auto;\n    max-width: none; max-height: 70vh; box-shadow: 0 -4px 24px rgb(0 0 0 / .18);\n  }\n  .hp-join-button, .hp-invite-expiry { min-height: 2.5rem; }\n  .hp-invite-share, .hp-invite-copy, .hp-invite-create { flex: 1 1 auto; }\n}\n";
+/** Add the stylesheet to `doc` unless it is already there. */
+export declare function injectJoinWidgetStyles(doc: Document): void;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AAEpD,eAAO,MAAM,eAAe,0mOA0I3B,CAAC;AAEF,8DAA8D;AAC9D,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAM1D"}

package/dist/styles.js

@@ -0,0 +1,163 @@
+/**
+ * The widget's own stylesheet, injected once per document.
+ *
+ * OWN CSS, NOT THE PAGE'S. The two pages that use it style in opposite ways:
+ * the demos with a few plain element rules, llm-chat with Tailwind, whose
+ * preflight strips every button of its border and background. Every rule here
+ * is on an `hp-join-` or `hp-invite-` class, so it neither leaks into the page nor depends on
+ * it, and it is NOT in a cascade layer -- unlayered rules beat Tailwind's
+ * `@layer base`, which is what keeps a button looking like a button under it.
+ *
+ * `font: inherit` everywhere: the widget takes the page's typeface and size.
+ * Colours are custom properties on `.hp-join`, so a page re-themes it by
+ * setting `--hp-join-accent` and friends instead of overriding selectors.
+ */
+export const JOIN_WIDGET_STYLE_ID = "hp-join-style";
+export const JOIN_WIDGET_CSS = `
+.hp-join {
+  --hp-join-fg: #18181b;
+  --hp-join-muted: #52525b;
+  --hp-join-border: #d4d4d8;
+  --hp-join-bg: #ffffff;
+  --hp-join-accent: #1d4ed8;
+  --hp-join-accent-fg: #ffffff;
+  --hp-join-danger: #b91c1c;
+  --hp-join-note-bg: #eff6ff;
+  --hp-join-alert-bg: #fee2e2;
+  --hp-join-live: #15803d;
+  display: flex;
+  flex-direction: column;
+  gap: .6rem;
+  font: inherit;
+  color: var(--hp-join-fg);
+}
+.hp-join p { margin: 0; }
+.hp-join [hidden] { display: none !important; }
+.hp-join-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
+.hp-join-phase { font-weight: 600; }
+.hp-join-phase::before {
+  content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%;
+  margin-right: .45em; vertical-align: .08em; background: var(--hp-join-muted);
+}
+.hp-join[data-phase="live"] .hp-join-phase::before { background: var(--hp-join-live); }
+.hp-join[data-phase="blocked"] .hp-join-phase::before,
+.hp-join[data-phase="failed"] .hp-join-phase::before { background: var(--hp-join-danger); }
+.hp-join-peer {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
+  color: var(--hp-join-muted); word-break: break-all;
+}
+.hp-join-message, .hp-join-error {
+  padding: .6rem .8rem; border-radius: 6px; white-space: pre-wrap; font-size: .95em;
+}
+.hp-join-message { background: var(--hp-join-note-bg); }
+.hp-join-message[role="alert"], .hp-join-error { background: var(--hp-join-alert-bg); }
+.hp-join-form { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
+.hp-join-label { font-weight: 500; }
+.hp-join-input {
+  font: inherit; font-size: .9em; width: 100%; box-sizing: border-box; padding: .45rem .55rem;
+  border: 1px solid var(--hp-join-border); border-radius: 6px; resize: vertical;
+  background: var(--hp-join-bg); color: var(--hp-join-fg);
+}
+.hp-join-input:focus-visible, .hp-join-button:focus-visible, .hp-join-file:focus-within,
+.hp-join-menu-toggle:focus-visible {
+  outline: 2px solid var(--hp-join-accent); outline-offset: 2px;
+}
+.hp-join-actions, .hp-join-controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.hp-join-button {
+  font: inherit; font-size: .95em; line-height: 1.3; padding: .4rem .8rem; cursor: pointer;
+  border: 1px solid var(--hp-join-border); border-radius: 6px;
+  background: var(--hp-join-bg); color: var(--hp-join-fg);
+}
+.hp-join-button:disabled { opacity: .5; cursor: default; }
+.hp-join-primary {
+  background: var(--hp-join-accent); border-color: var(--hp-join-accent); color: var(--hp-join-accent-fg);
+}
+.hp-join-danger { color: var(--hp-join-danger); }
+.hp-join-file { display: inline-block; position: relative; }
+.hp-join-visually-hidden {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
+  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.hp-join-viewfinder {
+  width: 100%; max-width: 22rem; min-height: 10rem; border-radius: 6px; overflow: hidden;
+  background: #000;
+}
+.hp-join-viewfinder video { width: 100% !important; display: block; }
+.hp-join-camera-stop { align-self: flex-start; }
+.hp-join-compact { flex-direction: row; align-items: center; gap: .5rem; font-size: .8rem; }
+.hp-join-compact .hp-join-phase::before { width: .5em; height: .5em; }
+.hp-join-compact .hp-join-phase { font-weight: 500; color: var(--hp-join-muted); }
+.hp-join-menu { position: relative; }
+.hp-join-menu-toggle {
+  cursor: pointer; list-style: none; padding: .1rem .45rem; border-radius: 6px;
+  border: 1px solid var(--hp-join-border); color: var(--hp-join-muted);
+}
+.hp-join-menu-toggle::-webkit-details-marker { display: none; }
+.hp-join-menu-panel {
+  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; width: max-content;
+  max-width: min(22rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 5rem); overflow-y: auto;
+  display: flex; flex-direction: column; gap: .5rem; padding: .6rem;
+  background: var(--hp-join-bg); border: 1px solid var(--hp-join-border); border-radius: 8px;
+  box-shadow: 0 6px 20px rgb(0 0 0 / .12);
+}
+.hp-invite {
+  border-top: 1px solid var(--hp-join-border); padding-top: .5rem;
+  --hp-invite-warn-bg: #fef3c7; --hp-invite-warn-fg: #78350f;
+}
+.hp-join-compact .hp-invite { font-size: .9rem; }
+.hp-invite-toggle { cursor: pointer; font-weight: 600; padding: .35rem 0; }
+.hp-invite-body { display: flex; flex-direction: column; gap: .55rem; padding-top: .4rem; }
+.hp-invite-roles { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
+.hp-invite-legend { font-weight: 500; padding: 0; margin-bottom: .2rem; }
+.hp-invite-role { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; cursor: pointer; }
+.hp-invite-role-input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--hp-join-accent); }
+.hp-invite-warning {
+  padding: .55rem .75rem; border-radius: 6px; font-size: .9em;
+  background: var(--hp-invite-warn-bg); color: var(--hp-invite-warn-fg);
+  border-left: 3px solid var(--hp-join-danger);
+}
+.hp-invite-expiry {
+  font: inherit; font-size: .95em; padding: .4rem .5rem; border-radius: 6px;
+  border: 1px solid var(--hp-join-border); background: var(--hp-join-bg); color: var(--hp-join-fg);
+}
+.hp-invite-create-admin { background: var(--hp-join-danger); border-color: var(--hp-join-danger); }
+.hp-invite-result { display: flex; flex-direction: column; gap: .45rem; }
+.hp-invite-note { font-size: .9em; color: var(--hp-join-muted); }
+.hp-invite-qr { width: 100%; max-width: 15rem; align-self: center; }
+.hp-invite-qr svg { display: block; width: 100%; height: auto; }
+.hp-invite-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8em; }
+.hp-invite-copied { font-size: .85em; color: var(--hp-join-live); }
+.hp-invite-pending { display: flex; flex-direction: column; gap: .3rem; font-size: .9em; }
+.hp-invite-pending-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
+.hp-invite-pending-title { font-weight: 500; }
+.hp-invite-refresh { font-size: .85em; padding: .2rem .55rem; }
+.hp-invite-pending-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
+.hp-invite-pending-empty { color: var(--hp-join-muted); }
+.hp-invite-tag {
+  display: inline-block; padding: 0 .4rem; border-radius: 999px; font-size: .85em;
+  border: 1px solid var(--hp-join-border);
+}
+.hp-invite-tag-admin { color: var(--hp-join-danger); border-color: var(--hp-join-danger); }
+.hp-invite-when { color: var(--hp-join-muted); }
+@media (max-width: 30rem) {
+  /* On a phone the header's menu may sit mid-row; anchored to its button it
+     would run off the screen's left edge. It becomes a sheet along the bottom
+     instead, short enough to leave the header -- and the toggle that closes
+     it -- in view. */
+  .hp-join-menu-panel {
+    position: fixed; left: .5rem; right: .5rem; top: auto; bottom: .5rem; width: auto;
+    max-width: none; max-height: 70vh; box-shadow: 0 -4px 24px rgb(0 0 0 / .18);
+  }
+  .hp-join-button, .hp-invite-expiry { min-height: 2.5rem; }
+  .hp-invite-share, .hp-invite-copy, .hp-invite-create { flex: 1 1 auto; }
+}
+`;
+/** Add the stylesheet to `doc` unless it is already there. */
+export function injectJoinWidgetStyles(doc) {
+    if (doc.getElementById(JOIN_WIDGET_STYLE_ID) != null)
+        return;
+    const style = doc.createElement("style");
+    style.id = JOIN_WIDGET_STYLE_ID;
+    style.textContent = JOIN_WIDGET_CSS;
+    doc.head.append(style);
+}

package/dist/widget.d.ts

@@ -0,0 +1,83 @@
+/**
+ * The join widget: one small piece of DOM that renders a `SessionState` and
+ * calls the session's four controls.
+ *
+ * IT HOLDS NO SESSION STATE OF ITS OWN. `PeerSession` already decides every
+ * thing worth deciding -- which phase, which message, which controls make
+ * sense (`SessionState.controls`) -- and the widget only shows it. The page
+ * owns the session and hands each new state to `update()`, because the session
+ * reports changes through one `onChange` callback that the page wires up when
+ * it creates it; the widget cannot subscribe on its own.
+ *
+ * What the widget DOES own is what exists only on screen: the text being
+ * typed, a camera that is running, a button that is waiting on its call, and
+ * the complaint left by a call that rejected.
+ *
+ * NOTHING HAPPENS AT IMPORT. No `document`, no `window`, no stylesheet until
+ * `mountJoinWidget` runs -- `tests/import.test.ts` imports the built entry
+ * under plain Node to hold the package to that, because a page's bundle may
+ * import this module long before it has anything to mount.
+ */
+import type { PeerSession, SessionState } from "@statewalker/httpeers-member";
+import type { HubTarget } from "./invite.js";
+import { type InvitePanelOptions } from "./invite-panel.js";
+import { type QrScanner } from "./qr.js";
+/** The four calls the widget makes. `PeerSession` satisfies it; a test passes four spies. */
+export type JoinWidgetSession = Pick<PeerSession, "join" | "disconnect" | "reconnect" | "resetIdentity">;
+/**
+ * The part of `SessionState` the widget reads. A full `SessionState` is one;
+ * so is a hand-built test state with no handle. The handle is read only for
+ * the Invite panel: its hub peer id and edge base URL.
+ */
+export type JoinWidgetState = Pick<SessionState, "phase" | "identity" | "hubLink" | "controls"> & {
+    handle?: HubTarget | null;
+};
+export interface JoinWidgetOptions {
+    session: JoinWidgetSession;
+    /** The state to show at once. Usually `session.state()`; omitted, the widget says it is starting until `update()`. */
+    state?: JoinWidgetState | null;
+    /**
+     * A status line and a small menu with Disconnect and Leave, and no join
+     * form -- for a header that stays on screen while the page does its real
+     * work. The full widget is the default.
+     */
+    compact?: boolean;
+    /**
+     * How QR codes are read. Defaults to `defaultQrScanner()` (html5-qrcode,
+     * loaded on the first scan). `null` hides both QR buttons.
+     */
+    scanner?: QrScanner | null;
+    /** Asked before "Leave this mesh". Defaults to `window.confirm`. May be async, for a page with its own dialog. */
+    confirm?: (message: string) => boolean | Promise<boolean>;
+    /** `false` leaves styling to the page; the class names are the API then. Default `true`. */
+    injectStyles?: boolean;
+    /**
+     * The Invite panel, shown to a mesh admin while live (see `./invite-panel.ts`).
+     * On by default: it asks the hub once per link and stays hidden for anyone
+     * the hub refuses. `false` leaves it out altogether; an object configures it.
+     */
+    invite?: InvitePanelOptions | false;
+}
+export interface JoinWidget {
+    /** The widget's root element, already inside the container. */
+    readonly element: HTMLElement;
+    /** Show a new state. Call it from the session's `onChange`, and on any timer the page already re-reads the state on. */
+    update(state: JoinWidgetState | null): void;
+    /** Stop the camera if it runs and remove the widget. The stylesheet stays: another instance may be using it. */
+    destroy(): void;
+}
+/** What "Leave this mesh" asks before it forgets the identity. */
+export declare const LEAVE_CONFIRMATION: string;
+/** `12D3KooW…a1b2c3`: enough to tell two peers apart on screen. The whole id goes in a tooltip. */
+export declare function shortPeerId(peerId: string): string;
+/** The status line's text for a state, for a page that wants it without the widget. */
+export declare function describePhase(state: JoinWidgetState | null): string;
+/**
+ * Build the widget inside `container` and return its handle.
+ *
+ * Every id is suffixed per instance, so two widgets on one page -- a full one
+ * and a compact one in a header -- never share a label target or a camera
+ * host.
+ */
+export declare function mountJoinWidget(container: HTMLElement, options: JoinWidgetOptions): JoinWidget;
+//# sourceMappingURL=widget.d.ts.map

package/dist/widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget.d.ts","sourceRoot":"","sources":["../src/widget.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAuC,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACjG,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG3D,6FAA6F;AAC7F,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,WAAW,EACX,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,eAAe,CACtD,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IAChG,MAAM,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,sHAAsH;IACtH,KAAK,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,kHAAkH;IAClH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1D,4FAA4F;IAC5F,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,MAAM,CAAC,EAAE,kBAAkB,GAAG,KAAK,CAAC;CACrC;AAED,MAAM,WAAW,UAAU;IACzB,+DAA+D;IAC/D,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,wHAAwH;IACxH,MAAM,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5C,gHAAgH;IAChH,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,kEAAkE;AAClE,eAAO,MAAM,kBAAkB,QAGuC,CAAC;AAEvE,mGAAmG;AACnG,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAElD;AAED,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,MAAM,CAmBnE;AAgCD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,iBAAiB,GAAG,UAAU,CA6S9F"}