@camstack/server 1.2.578 → 1.2.580

package/dist/api/oauth2/consent-page.js

@@ -1,37 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderConsentPage = renderConsentPage;
-function escapeHtml(s) {
-    return s.replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
-}
-/** Allow/Deny consent screen. Submitting POSTs to the same path with the
- *  hidden query fields + `consent=allow|deny`. */
+const app_page_shell_js_1 = require("../../auth/app-page-shell.js");
+const app_page_strings_js_1 = require("../../auth/app-page-strings.js");
+/** Allow/Deny consent screen on the hub's shared page shell (the look of the
+ *  app sign-in pages). Submitting POSTs to the same path with the hidden query
+ *  fields + `consent=allow|deny`. */
 function renderConsentPage(input) {
     const hidden = Object.entries(input.hidden)
-        .map(([k, v]) => `<input type="hidden" name="${escapeHtml(k)}" value="${escapeHtml(v)}">`)
-        .join('\n      ');
-    return `<!doctype html>
-<html lang="en"><head><meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>CamStack · Authorize ${escapeHtml(input.displayName)}</title>
-<style>
- body{font-family:system-ui,sans-serif;max-width:480px;margin:4rem auto;padding:0 1rem;color:#1f2937}
- .card{border:1px solid #e5e7eb;border-radius:.5rem;padding:1.5rem}
- .meta{font-size:.85rem;color:#6b7280;margin:.5rem 0}
- button{font-size:1rem;padding:.5rem 1.25rem;border-radius:.375rem;cursor:pointer;border:1px solid transparent}
- .allow{background:#2563eb;color:#fff}.deny{background:#f3f4f6;color:#1f2937;border-color:#d1d5db;margin-left:.5rem}
-</style></head><body>
-  <div class="card">
-    <h1>Authorize ${escapeHtml(input.displayName)}</h1>
-    <p class="meta">Signed in as <strong>${escapeHtml(input.username)}</strong></p>
-    <p class="meta">This will grant: ${escapeHtml(input.scopeSummary)}</p>${input.redirectUri
-        ? `\n    <p class="meta">Sending the authorization to <code>${escapeHtml(input.redirectUri)}</code></p>`
-        : ''}
-    <form method="POST">
-      ${hidden}
-      <button class="allow" name="consent" value="allow" type="submit">Allow</button>
-      <button class="deny" name="consent" value="deny" type="submit">Deny</button>
-    </form>
-  </div>
-</body></html>`;
+        .map(([name, value]) => (0, app_page_shell_js_1.appHiddenField)(name, value))
+        .join('');
+    const t = (0, app_page_strings_js_1.appStrings)(input.lang).consent;
+    const destination = input.redirectUri
+        ? `<p class="hint">${(0, app_page_shell_js_1.escapeHtml)(t.sendingTo)}<code>${(0, app_page_shell_js_1.escapeHtml)(input.redirectUri)}</code></p>`
+        : '';
+    return (0, app_page_shell_js_1.renderAppPage)({
+        lang: input.lang,
+        title: `${t.titlePrefix}${input.displayName}`,
+        heading: `${t.headingPrefix}${input.displayName}`,
+        body: [
+            `<p>${(0, app_page_shell_js_1.escapeHtml)(t.signedInAs)}<strong>${(0, app_page_shell_js_1.escapeHtml)(input.username)}</strong></p>`,
+            (0, app_page_shell_js_1.appHint)(`${t.grantPrefix}${input.scopeSummary}`),
+            destination,
+            `<form method="POST">${hidden}<div class="actions">${(0, app_page_shell_js_1.appSubmitButton)(t.allow, 'consent', 'allow')}${(0, app_page_shell_js_1.appSubmitButton)(t.deny, 'consent', 'deny', true)}</div></form>`,
+        ].join(''),
+    });
 }

package/dist/api/oauth2/oauth2-routes.js

@@ -7,6 +7,7 @@ exports.isRedirectUriAllowed = isRedirectUriAllowed;
 exports.summariseScopes = summariseScopes;
 exports.registerOauth2Routes = registerOauth2Routes;
 const session_cookie_js_1 = require("../../auth/session-cookie.js");
+const app_page_strings_js_1 = require("../../auth/app-page-strings.js");
 const consent_page_js_1 = require("./consent-page.js");
 const private_host_js_1 = require("./private-host.js");
 /**
@@ -341,6 +342,10 @@ function registerOauth2Routes(fastify, deps) {
                 .send({ error: 'invalid_request — redirect_uri not allowed for this integration' });
         }
         const html = (0, consent_page_js_1.renderConsentPage)({
+            lang: (0, app_page_strings_js_1.resolveAppPageLang)({
+                lang: request.query['lang'],
+                acceptLanguage: request.headers['accept-language'],
+            }),
             displayName: descriptor.displayName,
             username: tokenInfo.username ?? '',
             scopeSummary: summariseScopes(descriptor.requestedScopes),

package/dist/api/trpc/trpc.context.js

@@ -320,9 +320,8 @@ function makeDeviceScopeLookup(addonRegistry) {
  * `principal` names WHO is calling (D802): `mesh` for the hub's own runners
  * (they reach the bridge over UDS, inside the hub's trust boundary), and
  * `node:<nodeId>` for another node — whose id the hub's mesh gate has bound
- * to a challenge–response proof before the call got here
- * (`createMeshAccessMiddleware`; in `transition` mode an unauthenticated node
- * is tolerated and its id is only what it claims).
+ * to its CERTIFICATE before the call got here (`createMeshAccessMiddleware`:
+ * the TLS handshake chained to the mesh CA, the leaf CN is that id, D857).
  *
  * Both principals are still admins: that keeps every `adminProcedure` an
  * agent's addons call working. What is NOT reachable from another node is
@@ -365,6 +364,7 @@ async function createWsTrpcContext(opts, authService, addonRegistry, shareTokens
     return {
         user,
         req: opts.req,
+        ...(user === null && token !== null && token !== '' ? { credentialRejected: true } : {}),
         ...(user !== null && sessionId !== undefined
             ? {
                 sessionLive: () => authService.checkSession({

package/dist/api/trpc/trpc.router.js

@@ -41,6 +41,7 @@ exports.wrapWebrtcSessionProviderWithRelay = wrapWebrtcSessionProviderWithRelay;
 exports.buildAppRouter = buildAppRouter;
 const path = __importStar(require("node:path"));
 const addon_settings_router_js_1 = require("../core/addon-settings.router.js");
+const session_connections_js_1 = require("../../auth/session-connections.js");
 const agent_pairing_router_js_1 = require("../core/agent-pairing.router.js");
 const certificates_router_js_1 = require("../core/certificates.router.js");
 const node_certificates_client_js_1 = require("../../core/agent/node-certificates-client.js");
@@ -199,10 +200,36 @@ function enrichHintsWithClientClass(input, _clientClass) {
 function wrapWebrtcSessionProviderWithRelay(provider, ctx) {
     const userAgent = (0, client_ip_js_1.extractUserAgent)(ctx.req);
     const clientClass = (0, client_ip_js_1.classifyClientRequest)(ctx.req);
+    // The login session this request runs under: media opened here dies with it
+    // (`session-connections.ts`). A principal with no `sid` has nothing to tie to.
+    const authSessionId = ctx.user?.sessionId;
+    const hold = (deviceId, mediaSessionId) => {
+        if (authSessionId === undefined)
+            return;
+        (0, session_connections_js_1.getSessionConnections)().trackMedia(authSessionId, {
+            deviceId,
+            mediaSessionId,
+            close: () => provider.closeSession({ deviceId, sessionId: mediaSessionId }),
+        });
+    };
     return {
         ...provider,
-        createSession: (input) => provider.createSession(enrichHintsWithClientClass(enrichInputWithRelayClass(enrichInputWithUserAgent(input, userAgent), clientClass), clientClass)),
-        handleOffer: (input) => provider.handleOffer(enrichHintsWithClientClass(enrichInputWithRelayClass(enrichInputWithUserAgent(stripTalkbackFromRequest(input, clientClass), userAgent), clientClass), clientClass)),
+        createSession: async (input) => {
+            const created = await provider.createSession(enrichHintsWithClientClass(enrichInputWithRelayClass(enrichInputWithUserAgent(input, userAgent), clientClass), clientClass));
+            hold(input.deviceId, created.sessionId);
+            return created;
+        },
+        handleOffer: async (input) => {
+            const answered = await provider.handleOffer(enrichHintsWithClientClass(enrichInputWithRelayClass(enrichInputWithUserAgent(stripTalkbackFromRequest(input, clientClass), userAgent), clientClass), clientClass));
+            hold(input.deviceId, answered.sessionId);
+            return answered;
+        },
+        closeSession: (input) => {
+            if (authSessionId !== undefined) {
+                (0, session_connections_js_1.getSessionConnections)().forgetMedia(authSessionId, input.sessionId);
+            }
+            return provider.closeSession(input);
+        },
     };
 }
 /**

package/dist/auth/app-confirm-page.js

@@ -7,18 +7,21 @@ exports.appConfirmRefusalPage = appConfirmRefusalPage;
  * The hub-rendered confirmation page of a native app sign-in (D858):
  * "Sign in the CamStack app as <username>?".
  *
- * Same discipline as the passkey page (`app-passkey-page.ts`): plain HTML, one
- * inline script and one style pinned by SHA-256 in the CSP, same-origin
- * requests only, no framing, no third-party asset. The page carries the
+ * Same discipline as the passkey page (`app-passkey-page.ts`): plain HTML on the
+ * shared shell (`app-page-shell.ts`, which owns the look and the style hash),
+ * one inline script pinned by SHA-256 in the CSP, same-origin requests only, no
+ * framing, no third-party asset. The page carries the
  * one-shot token in a `data-` attribute (never in the script), so the script
  * hash is a constant. Continue POSTs the token and navigates to the
  * `location` the hub answers; Cancel is a plain link to the app with
  * `error=cancelled`.
  */
-const node_crypto_1 = require("node:crypto");
+const app_page_shell_js_1 = require("./app-page-shell.js");
+const app_page_strings_js_1 = require("./app-page-strings.js");
 const PAGE_SCRIPT = `(function () {
   var btn = document.getElementById('go');
   var msg = document.getElementById('msg');
+  var S = function (k) { return document.body.getAttribute('data-s-' + k) || ''; };
   var APP_CALLBACK = /^camstack(\\.dev)?:\\/\\/auth-callback(\\?|$)/;
   btn.addEventListener('click', function () {
     btn.disabled = true;
@@ -31,34 +34,45 @@ const PAGE_SCRIPT = `(function () {
       cache: 'no-store'
     }).then(function (r) { return r.json(); }).then(function (body) {
       if (typeof body.location !== 'string' || !APP_CALLBACK.test(body.location)) {
-        throw new Error(body.error || 'Sign-in failed.');
+        throw new Error('bad-location');
       }
       location.assign(body.location);
     }).catch(function () {
-      msg.textContent = 'This confirmation expired. Start the sign-in again from the app.';
+      msg.textContent = S('confirm-expired');
     });
   });
 })();`;
-const PAGE_STYLE = `body{font-family:system-ui,sans-serif;max-width:26rem;margin:4rem auto;padding:0 1rem;text-align:center}button{font:inherit;padding:.75rem 1.25rem;border-radius:.5rem;border:1px solid #888;cursor:pointer}p#msg{color:#b00020;min-height:1.5em}a{display:inline-block;margin-top:1rem}`;
-const sha256 = (text) => `'sha256-${(0, node_crypto_1.createHash)('sha256').update(text).digest('base64')}'`;
-/** The CSP: the one script and style by hash, same-origin requests, no framing, no form posts. */
-exports.APP_CONFIRM_CSP = [
-    "default-src 'none'",
-    `script-src ${sha256(PAGE_SCRIPT)}`,
-    `style-src ${sha256(PAGE_STYLE)}`,
-    "connect-src 'self'",
-    "base-uri 'none'",
-    "form-action 'none'",
-    "frame-ancestors 'none'",
-].join('; ');
-/** CSP of the refusal page: nothing runs, nothing loads. */
-exports.APP_CONFIRM_REFUSAL_CSP = "default-src 'none'; frame-ancestors 'none'";
-const escapeHtml = (text) => text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+/** The CSP: the shell's style and this page's one script by hash, same-origin requests, no framing, no form posts. */
+exports.APP_CONFIRM_CSP = (0, app_page_shell_js_1.appPageCsp)({ script: PAGE_SCRIPT });
+/** CSP of the refusal page: the shell's style only, nothing runs. */
+exports.APP_CONFIRM_REFUSAL_CSP = (0, app_page_shell_js_1.appPageCsp)();
 /** The confirmation page for `username`; `cancelHref` is the app callback carrying `error=cancelled`. */
 function appConfirmPage(input) {
-    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="referrer" content="no-referrer"><title>Sign in the CamStack app</title><style>${PAGE_STYLE}</style></head><body><h1>Sign in the CamStack app?</h1><p>The CamStack app on this device will be signed in as <strong>${escapeHtml(input.username)}</strong>.</p><p>Continue only if you just started this from the CamStack app.</p><button id="go" type="button" data-confirm="${escapeHtml(input.token)}">Continue</button><p id="msg" role="alert"></p><a href="${escapeHtml(input.cancelHref)}">Cancel</a><noscript><p>JavaScript is required to continue.</p></noscript><script>${PAGE_SCRIPT}</script></body></html>`;
+    const t = (0, app_page_strings_js_1.appStrings)(input.lang);
+    return (0, app_page_shell_js_1.renderAppPage)({
+        lang: input.lang,
+        title: t.confirm.title,
+        heading: t.confirm.heading,
+        noReferrer: true,
+        script: PAGE_SCRIPT,
+        scriptStrings: { 'confirm-expired': t.script.confirmExpired },
+        body: [
+            `<p>${(0, app_page_shell_js_1.escapeHtml)(t.confirm.signedInAsBefore)}<strong>${(0, app_page_shell_js_1.escapeHtml)(input.username)}</strong>${(0, app_page_shell_js_1.escapeHtml)(t.confirm.signedInAsAfter)}</p>`,
+            (0, app_page_shell_js_1.appHint)(t.confirm.hint),
+            (0, app_page_shell_js_1.appButton)(t.confirm.continueLabel, `id="go" data-confirm="${(0, app_page_shell_js_1.escapeHtml)(input.token)}"`),
+            (0, app_page_shell_js_1.appErrorLine)('msg'),
+            (0, app_page_shell_js_1.appCancelLink)(input.cancelHref, t.confirm.cancel),
+            `<noscript><p class="error">${(0, app_page_shell_js_1.escapeHtml)(t.confirm.noscript)}</p></noscript>`,
+        ].join(''),
+    });
 }
 /** A confirmation that is gone (expired, used, or opened in another browser): a sentence, nothing runs. */
-function appConfirmRefusalPage() {
-    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Confirmation expired</title></head><body><h1>Confirmation expired</h1><p>This sign-in confirmation is no longer valid.</p><p>Close this window and start the sign-in again from the app.</p></body></html>`;
+function appConfirmRefusalPage(lang) {
+    const t = (0, app_page_strings_js_1.appStrings)(lang).confirmExpired;
+    return (0, app_page_shell_js_1.renderAppPage)({
+        lang,
+        title: t.title,
+        heading: t.title,
+        body: (0, app_page_shell_js_1.appParagraph)(t.body) + (0, app_page_shell_js_1.appHint)(t.hint),
+    });
 }

package/dist/auth/app-confirm-routes.js

@@ -17,6 +17,7 @@ const types_1 = require("@camstack/types");
 const zod_1 = require("zod");
 const app_confirmations_js_1 = require("./app-confirmations.js");
 const app_confirm_page_js_1 = require("./app-confirm-page.js");
+const app_page_strings_js_1 = require("./app-page-strings.js");
 const auth_rate_limit_js_1 = require("./auth-rate-limit.js");
 const sso_finish_deps_js_1 = require("./sso-finish-deps.js");
 exports.APP_CONFIRM_PATH = '/auth/app/confirm';
@@ -75,10 +76,16 @@ function registerAppConfirmRoutes(fastify, deps) {
                 meta: { reason: 'unknown-expired-or-other-browser' },
             });
             reply.header('Content-Security-Policy', app_confirm_page_js_1.APP_CONFIRM_REFUSAL_CSP);
-            return reply.status(400).send((0, app_confirm_page_js_1.appConfirmRefusalPage)());
+            return reply
+                .status(400)
+                .send((0, app_confirm_page_js_1.appConfirmRefusalPage)((0, app_page_strings_js_1.resolveAppPageLang)({ acceptLanguage: request.headers['accept-language'] })));
         }
         reply.header('Content-Security-Policy', app_confirm_page_js_1.APP_CONFIRM_CSP);
         return reply.send((0, app_confirm_page_js_1.appConfirmPage)({
+            lang: (0, app_page_strings_js_1.resolveAppPageLang)({
+                lang: confirmation.app.lang,
+                acceptLanguage: request.headers['accept-language'],
+            }),
             username: confirmation.username,
             token,
             cancelHref: (0, types_1.appFlowLocation)(confirmation.app.redirect, { error: 'cancelled' }, confirmation.app.state),

package/dist/auth/app-page-shell.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.appCancelLink = exports.appHiddenField = exports.appSubmitButton = exports.appErrorLine = exports.appButton = exports.appHint = exports.appParagraph = exports.APP_PAGE_STYLE = exports.APP_PAGE_LOGOS = void 0;
+exports.appPageCsp = appPageCsp;
+exports.escapeHtml = escapeHtml;
+exports.renderAppPage = renderAppPage;
+/**
+ * The one shell of every standalone page the hub renders for a native app
+ * sign-in (D858): the passkey page, the confirmation page, the refusal pages.
+ *
+ * These pages are server-rendered HTML with no admin-ui bundle and a strict
+ * CSP, so they cannot borrow the admin login's React components - but they must
+ * not look like a different product either. Everything visual lives HERE and
+ * nowhere else:
+ *
+ *  - the colours, radii, spacing and font stack are GENERATED from the theme
+ *    the admin UI is built on (`@camstack/ui-library/theme/tokens`) - no hex is
+ *    typed in this file, so a theme change reaches these pages by itself;
+ *  - the card, primary button, cancel link, error line and muted hint repeat the
+ *    admin login page's look (`Login.tsx`: `rounded-xl border bg-surface p-6`,
+ *    `bg-primary rounded-lg` button, `bg-danger/10` error);
+ *  - the stylesheet is ONE inline `<style>` and the CSP pins it by the SHA-256
+ *    of the very string that is served, computed at module load - there is no
+ *    hand-pasted hash that can fall out of step with the CSS.
+ */
+const node_crypto_1 = require("node:crypto");
+const tokens_1 = require("@camstack/ui-library/theme/tokens");
+/** The brand mark and wordmark, one per colour scheme (the files under `addon-admin-ui/public/brand`). */
+const LOGO_DARK = '<svg class="logo logo-dark" role="img" aria-label="CamStack" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 48" fill="none"><g transform="translate(4, 2) scale(0.68)"><rect x="8" y="28" width="48" height="28" rx="6" fill="#292524"/><rect x="12" y="16" width="40" height="28" rx="6" fill="#44403c"/><rect x="16" y="4" width="32" height="28" rx="6" fill="#f59e42"/><circle cx="32" cy="18" r="8" fill="#0c0a09" opacity="0.3"/><circle cx="32" cy="18" r="5" fill="#0c0a09" opacity="0.2"/><circle cx="32" cy="18" r="2.5" fill="#fafaf9" opacity="0.8"/></g><text x="52" y="31" font-family="system-ui, -apple-system, sans-serif" font-size="26" font-weight="700" letter-spacing="-0.5" fill="#fafaf9">Cam<tspan fill="#f59e42">Stack</tspan></text></svg>';
+const LOGO_LIGHT = '<svg class="logo logo-light" role="img" aria-label="CamStack" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 48" fill="none"><g transform="translate(4, 2) scale(0.68)"><rect x="8" y="28" width="48" height="28" rx="6" fill="#d6d3d1"/><rect x="12" y="16" width="40" height="28" rx="6" fill="#a8a29e"/><rect x="16" y="4" width="32" height="28" rx="6" fill="#e67e22"/><circle cx="32" cy="18" r="8" fill="#fafaf9" opacity="0.3"/><circle cx="32" cy="18" r="5" fill="#fafaf9" opacity="0.2"/><circle cx="32" cy="18" r="2.5" fill="#1c1917" opacity="0.7"/></g><text x="52" y="31" font-family="system-ui, -apple-system, sans-serif" font-size="26" font-weight="700" letter-spacing="-0.5" fill="#1c1917">Cam<tspan fill="#e67e22">Stack</tspan></text></svg>';
+/** The logo markup, exposed so a spec can hold it against the brand files. */
+exports.APP_PAGE_LOGOS = {
+    dark: LOGO_DARK,
+    light: LOGO_LIGHT,
+};
+/**
+ * Component rules, written against the token variables. Sizes mirror the admin
+ * login page (Tailwind `text-sm`/`text-xs`, `rounded-xl`, `p-6`, `py-2.5`),
+ * with a 44 px touch target for the phone this opens on.
+ */
+const COMPONENT_CSS = [
+    '*,*::before,*::after{box-sizing:border-box}',
+    `html{background:var(--color-background)}`,
+    `body{margin:0;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:max(var(--spacing-xl),env(safe-area-inset-top)) max(var(--spacing-xl),env(safe-area-inset-right)) max(var(--spacing-xl),env(safe-area-inset-bottom)) max(var(--spacing-xl),env(safe-area-inset-left));background:var(--color-background);color:var(--color-foreground);font-family:var(--font-family);font-size:14px;line-height:20px;-webkit-text-size-adjust:100%}`,
+    `main{width:100%;max-width:24rem}`,
+    `.brand{display:flex;justify-content:center;margin-bottom:var(--spacing-3xl)}`,
+    `.logo{height:3rem;width:auto}`,
+    `.logo-dark{display:none}`,
+    `@media (prefers-color-scheme:dark){.logo-dark{display:block}.logo-light{display:none}}`,
+    `.card{display:flex;flex-direction:column;gap:var(--spacing-xl);padding:var(--spacing-2xl);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1)}`,
+    `.card h1{margin:0;font-size:16px;line-height:22px;font-weight:600;text-align:center;color:var(--color-foreground)}`,
+    `.card p{margin:0;color:var(--color-foreground-muted)}`,
+    `.card strong{color:var(--color-foreground);font-weight:600;overflow-wrap:anywhere}`,
+    `.card .hint{font-size:12px;line-height:16px;color:var(--color-foreground-subtle)}`,
+    `.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:10px 16px;border:1px solid transparent;border-radius:var(--radius-lg);background:var(--color-primary);color:var(--color-primary-foreground);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:0 4px 6px -1px color-mix(in srgb,var(--color-primary) 20%,transparent)}`,
+    `.btn:hover{background:color-mix(in srgb,var(--color-primary) 90%,transparent)}`,
+    `.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}`,
+    `.btn.secondary{background:var(--color-background);color:var(--color-foreground);border-color:var(--color-border);box-shadow:none}`,
+    `.btn.secondary:hover{background:var(--color-surface-hover)}`,
+    `.link{display:block;text-align:center;padding:var(--spacing-md);font-size:12px;line-height:16px;color:var(--color-foreground-subtle);text-decoration:none}`,
+    `.link:hover{color:var(--color-foreground)}`,
+    `.error{padding:8px 12px;border:1px solid color-mix(in srgb,var(--color-danger) 20%,transparent);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-danger) 10%,transparent);color:var(--color-danger);font-size:12px;line-height:16px}`,
+    `.card p.error{color:var(--color-danger)}`,
+    `.error:empty{display:none}`,
+    `.btn:focus-visible,.link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}`,
+    `code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow-wrap:anywhere}`,
+    `form{display:contents}`,
+    `.actions{display:flex;flex-direction:column;gap:var(--spacing-md)}`,
+].join('');
+/** The one stylesheet, as served: the generated tokens followed by the component rules. */
+exports.APP_PAGE_STYLE = `${(0, tokens_1.themeToRootCss)(tokens_1.defaultTheme)}${COMPONENT_CSS}`;
+const sha256Source = (text) => `'sha256-${(0, node_crypto_1.createHash)('sha256').update(text).digest('base64')}'`;
+/**
+ * The CSP for a page rendered by {@link renderAppPage}: the inline style and
+ * (when there is one) the inline script by hash, same-origin requests only, no
+ * framing, no base rewrite. The hashes are computed from the strings the page
+ * is built from, so they cannot disagree with it.
+ */
+function appPageCsp(options = {}) {
+    return [
+        "default-src 'none'",
+        ...(options.script === undefined ? [] : [`script-src ${sha256Source(options.script)}`]),
+        `style-src ${sha256Source(exports.APP_PAGE_STYLE)}`,
+        ...(options.script === undefined ? [] : ["connect-src 'self'"]),
+        "base-uri 'none'",
+        `form-action ${options.formToSelf === true ? "'self'" : "'none'"}`,
+        "frame-ancestors 'none'",
+    ].join('; ');
+}
+/** Escapes text for an HTML text node or a double-quoted attribute. */
+function escapeHtml(text) {
+    return text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+}
+/** A full page: doctype, viewport (with safe-area fit), tokens, logo, a card holding `body`. */
+function renderAppPage(input) {
+    const referrer = input.noReferrer === true ? '<meta name="referrer" content="no-referrer">' : '';
+    const script = input.script === undefined ? '' : `<script>${input.script}</script>`;
+    const strings = Object.entries(input.scriptStrings ?? {})
+        .map(([key, value]) => ` data-s-${key}="${escapeHtml(value)}"`)
+        .join('');
+    return `<!doctype html><html lang="${input.lang}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name="color-scheme" content="light dark">${referrer}<title>${escapeHtml(input.title)}</title><style>${exports.APP_PAGE_STYLE}</style></head><body${strings}><main><div class="brand">${LOGO_DARK}${LOGO_LIGHT}</div><div class="card"><h1>${escapeHtml(input.heading)}</h1>${input.body}</div></main>${script}</body></html>`;
+}
+/** A paragraph of the card (`text` is escaped). */
+const appParagraph = (text) => `<p>${escapeHtml(text)}</p>`;
+exports.appParagraph = appParagraph;
+/** A smaller, muted paragraph (`text` is escaped). */
+const appHint = (text) => `<p class="hint">${escapeHtml(text)}</p>`;
+exports.appHint = appHint;
+/** The primary button; `attributes` is trusted markup (already escaped), `label` is escaped. */
+const appButton = (label, attributes) => `<button class="btn" type="button" ${attributes}>${escapeHtml(label)}</button>`;
+exports.appButton = appButton;
+/** The error line a script fills in; empty it renders nothing. */
+const appErrorLine = (id) => `<p class="error" id="${id}" role="alert"></p>`;
+exports.appErrorLine = appErrorLine;
+/** A submit button of a form (`name`/`value` are escaped); `secondary` is the outlined, non-default choice. */
+const appSubmitButton = (label, name, value, secondary = false) => `<button class="${secondary ? 'btn secondary' : 'btn'}" type="submit" name="${escapeHtml(name)}" value="${escapeHtml(value)}">${escapeHtml(label)}</button>`;
+exports.appSubmitButton = appSubmitButton;
+/** A hidden form field (`name`/`value` are escaped). */
+const appHiddenField = (name, value) => `<input type="hidden" name="${escapeHtml(name)}" value="${escapeHtml(value)}">`;
+exports.appHiddenField = appHiddenField;
+/** The quiet link under the actions (Cancel); `href` is escaped here. */
+const appCancelLink = (href, label) => `<a class="link" href="${escapeHtml(href)}">${escapeHtml(label)}</a>`;
+exports.appCancelLink = appCancelLink;

package/dist/auth/app-page-strings.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.APP_PAGE_STRINGS = exports.APP_PAGE_DEFAULT_LANG = void 0;
+exports.appStrings = appStrings;
+exports.langFromAcceptLanguage = langFromAcceptLanguage;
+exports.resolveAppPageLang = resolveAppPageLang;
+/**
+ * Every word the hub's app landing pages show (D858), in both languages, and
+ * the one rule that picks the language.
+ *
+ * The pages (`app-confirm-page.ts`, `app-passkey-page.ts`, `app-refused-route.ts`,
+ * the OAuth2 consent page) hold NO prose of their own: they ask {@link appStrings}.
+ * A key present in one locale and not the other is a compile error AND a spec
+ * failure; a page that renders an English literal is a spec failure
+ * (`app-page-strings.spec.ts`).
+ *
+ * Language choice ({@link resolveAppPageLang}): the `lang` the app sent
+ * (allow-listed) wins; else the first supported tag of `Accept-Language`
+ * (`it*` -> `it`); else English. Neither input is ever reflected into a page.
+ */
+const types_1 = require("@camstack/types");
+exports.APP_PAGE_DEFAULT_LANG = 'en';
+const EN = {
+    confirm: {
+        title: 'Sign in the CamStack app',
+        heading: 'Sign in the CamStack app?',
+        signedInAsBefore: 'The CamStack app on this device will be signed in as ',
+        signedInAsAfter: '.',
+        hint: 'Continue only if you just started this from the CamStack app.',
+        continueLabel: 'Continue',
+        cancel: 'Cancel',
+        noscript: 'JavaScript is required to continue.',
+    },
+    confirmExpired: {
+        title: 'Confirmation expired',
+        body: 'This sign-in confirmation is no longer valid.',
+        hint: 'Close this window and start the sign-in again from the app.',
+    },
+    passkey: {
+        title: 'Sign in with a passkey',
+        heading: 'Sign in to CamStack',
+        body: 'Use a passkey saved on this device to sign in to the CamStack app.',
+        button: 'Sign in with a passkey',
+        cancel: 'Cancel',
+        noscript: 'JavaScript is required to use a passkey.',
+    },
+    refused: {
+        title: 'Sign-in request refused',
+        hint: 'Close this window and try again from the app.',
+        generic: 'The sign-in request was refused.',
+        reasons: types_1.APP_START_REFUSAL_MESSAGES,
+    },
+    consent: {
+        titlePrefix: 'CamStack · Authorize ',
+        headingPrefix: 'Authorize ',
+        signedInAs: 'Signed in as ',
+        grantPrefix: 'This will grant: ',
+        sendingTo: 'Sending the authorization to ',
+        allow: 'Allow',
+        deny: 'Deny',
+    },
+    script: {
+        confirmExpired: 'This confirmation expired. Start the sign-in again from the app.',
+        passkeyUnsupported: 'This browser cannot use passkeys.',
+        passkeyUnavailable: 'Passkeys are not available.',
+        passkeyCancelled: 'The passkey request was cancelled.',
+        signInFailed: 'Sign-in failed. Try again.',
+    },
+};
+const IT = {
+    confirm: {
+        title: "Accedi all'app CamStack",
+        heading: "Accedere all'app CamStack?",
+        signedInAsBefore: "L'app CamStack su questo dispositivo accederà come ",
+        signedInAsAfter: '.',
+        hint: "Continua solo se hai appena avviato l'operazione dall'app CamStack.",
+        continueLabel: 'Continua',
+        cancel: 'Annulla',
+        noscript: 'Per continuare serve JavaScript.',
+    },
+    confirmExpired: {
+        title: 'Conferma scaduta',
+        body: 'Questa conferma di accesso non è più valida.',
+        hint: "Chiudi questa finestra e riavvia l'accesso dall'app.",
+    },
+    passkey: {
+        title: 'Accedi con una passkey',
+        heading: 'Accedi a CamStack',
+        body: "Usa una passkey salvata su questo dispositivo per accedere all'app CamStack.",
+        button: 'Accedi con una passkey',
+        cancel: 'Annulla',
+        noscript: 'Per usare una passkey serve JavaScript.',
+    },
+    refused: {
+        title: 'Richiesta di accesso rifiutata',
+        hint: "Chiudi questa finestra e riprova dall'app.",
+        generic: 'La richiesta di accesso è stata rifiutata.',
+        reasons: {
+            'bad-challenge': 'La richiesta di accesso non ha una sfida PKCE valida (S256).',
+            'bad-challenge-method': 'È supportato solo il metodo PKCE S256.',
+            'bad-state': 'La richiesta di accesso non ha uno state valido.',
+            'bad-purpose': 'La richiesta di accesso indica uno scopo sconosciuto.',
+            'bad-redirect': 'La richiesta di accesso indica un indirizzo di ritorno che questo hub non accetta.',
+            'combined-flow': "L'accesso dell'app non può essere combinato con il collegamento o con un popup.",
+        },
+    },
+    consent: {
+        titlePrefix: 'CamStack · Autorizza ',
+        headingPrefix: 'Autorizza ',
+        signedInAs: 'Accesso eseguito come ',
+        grantPrefix: 'Concederà: ',
+        sendingTo: "Invio dell'autorizzazione a ",
+        allow: 'Consenti',
+        deny: 'Nega',
+    },
+    script: {
+        confirmExpired: "Questa conferma è scaduta. Riavvia l'accesso dall'app.",
+        passkeyUnsupported: 'Questo browser non supporta le passkey.',
+        passkeyUnavailable: 'Le passkey non sono disponibili.',
+        passkeyCancelled: 'La richiesta della passkey è stata annullata.',
+        signInFailed: 'Accesso non riuscito. Riprova.',
+    },
+};
+exports.APP_PAGE_STRINGS = { en: EN, it: IT };
+function appStrings(lang) {
+    return exports.APP_PAGE_STRINGS[lang];
+}
+/** The first supported language of an `Accept-Language` value (by q, then order), or `undefined`. */
+function langFromAcceptLanguage(header) {
+    const value = typeof header === 'string' ? header : header?.join(',');
+    if (value === undefined || value.length > 512)
+        return undefined;
+    const ranked = value
+        .split(',')
+        .map((part, index) => {
+        const [tag = '', ...params] = part.trim().split(';');
+        const q = params
+            .map((p) => /^\s*q\s*=\s*([0-9.]+)\s*$/i.exec(p)?.[1])
+            .find((m) => m !== undefined);
+        const weight = q === undefined ? 1 : Number.parseFloat(q);
+        return { primary: tag.trim().toLowerCase().split('-')[0] ?? '', weight, index };
+    })
+        .filter((t) => Number.isFinite(t.weight) && t.weight > 0)
+        .sort((a, b) => b.weight - a.weight || a.index - b.index);
+    for (const { primary } of ranked) {
+        const lang = (0, types_1.parseAppPageLang)(primary);
+        if (lang !== undefined)
+            return lang;
+    }
+    return undefined;
+}
+/** The page language: the app's `lang` (allow-listed), else `Accept-Language`, else English. */
+function resolveAppPageLang(input) {
+    return ((0, types_1.parseAppPageLang)(input.lang) ??
+        langFromAcceptLanguage(input.acceptLanguage) ??
+        exports.APP_PAGE_DEFAULT_LANG);
+}