@segmentstream-cloud/app 0.16.3 → 0.16.4

package/dist/oauth-completion.js

@@ -8,6 +8,52 @@ function escape(value) {
         "'": "'",
     })[character]);
 }
+// The shadcn/ui tokens and Card, Input and Button styles of the workspace app template, inlined so
+// the page needs no external stylesheet under its strict CSP.
+const STYLE = `
+:root{color-scheme:light;--radius:0.625rem;--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);
+--card:oklch(1 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);
+--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);
+--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--field:transparent;
+--outline:var(--background);--outline-hover:var(--accent);--logo:none}
+@media (prefers-color-scheme:dark){:root{color-scheme:dark;--background:oklch(0.145 0 0);
+--foreground:oklch(0.985 0 0);--card:oklch(0.205 0 0);--primary:oklch(0.922 0 0);
+--primary-foreground:oklch(0.205 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);
+--accent:oklch(0.269 0 0);--border:oklch(1 0 0 / 10%);--input:oklch(1 0 0 / 15%);
+--ring:oklch(0.556 0 0);--field:oklch(1 0 0 / 4.5%);--outline:oklch(1 0 0 / 4.5%);
+--outline-hover:oklch(1 0 0 / 7.5%);--logo:invert(1)}}
+*{box-sizing:border-box}
+body{margin:0;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+color:var(--foreground);background:color-mix(in oklab,var(--muted) 40%,var(--background));
+-webkit-font-smoothing:antialiased}
+main{min-height:100svh;max-width:calc(28rem + 3rem);margin:0 auto;padding:1.5rem;display:flex;
+flex-direction:column;align-items:center;justify-content:center;gap:1.5rem}
+main>img{filter:var(--logo);height:auto;max-width:100%}
+.card{width:100%;display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;
+background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);
+box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1)}
+header,.content{display:grid;gap:0.5rem}
+h1{margin:0;font-size:1.25rem;line-height:1.75rem;font-weight:600;letter-spacing:-0.025em}
+p{margin:0}.muted{color:var(--muted-foreground);font-size:0.875rem;line-height:1.25rem}
+.status:empty{display:none}.secured{font-size:0.75rem;line-height:1rem;text-align:center}
+.field{display:flex;gap:0.5rem}
+input{flex:1;min-width:0;height:2.25rem;padding:0 0.75rem;border:1px solid var(--input);
+border-radius:calc(var(--radius) - 2px);background:var(--field);color:inherit;
+font:0.875rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0.025em;
+box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);outline:none}
+.button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:2.25rem;
+padding:0 1rem;border:1px solid transparent;border-radius:calc(var(--radius) - 2px);
+background:var(--primary);color:var(--primary-foreground);font-family:inherit;font-size:0.875rem;
+font-weight:500;line-height:1.25rem;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;
+transition:background-color .15s,box-shadow .15s}
+.button:hover{background:color-mix(in oklab,var(--primary) 90%,transparent)}
+.outline{background:var(--outline);color:var(--foreground);border-color:var(--input);
+box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}.outline:hover{background:var(--outline-hover)}
+input:focus-visible,.button:focus-visible{border-color:var(--ring);
+box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
+footer{display:flex;justify-content:flex-end}
+@media (max-width:30rem){.field{flex-direction:column}input{flex:none}.button{width:100%}}
+`;
 /** Keep a copyable PKCE-bound code visible while trying the client's loopback callback. */
 export function oauthCompletion(options) {
     // Web Crypto keeps this module bundleable for client components (no node: imports).
@@ -16,12 +62,14 @@ export function oauthCompletion(options) {
     const code = redirect === undefined ? null : new URL(redirect).searchParams.get("code");
     const title = options.approved === false ? "Request denied" : "Authorization complete";
     const manual = code === null
-        ? "<p>You can return to your terminal.</p>"
-        : `
-    <p>Return to your terminal. If it is still waiting, copy and paste this code:</p>
+        ? `<header><h1>${title}</h1><p class="muted">You can return to your terminal.</p></header>`
+        : `<header><h1>${title}</h1>
+    <p class="muted">Return to your terminal. If it is still waiting, copy and paste this code:</p></header>
+    <div class="content"><div class="field">
     <input id="code" aria-label="Authorization code" readonly value="${escape(code)}">
-    <button id="copy" type="button">Copy code</button><p id="status" role="status"></p>
-    <p><a href="${escape(redirect)}">Continue to the client</a></p>`;
+    <button id="copy" class="button" type="button">Copy code</button></div>
+    <p id="status" class="muted status" role="status"></p></div>
+    <footer><a class="button outline" href="${escape(redirect)}">Continue to the client</a></footer>`;
     const script = code === null
         ? ""
         : `
@@ -36,10 +84,11 @@ export function oauthCompletion(options) {
     frame.src = ${JSON.stringify(redirect).replace(/</g, "\\u003c")}; document.body.appendChild(frame);`;
     return new Response(`<!doctype html><html lang="en"><meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1"><title>${title}</title>
-    <style nonce="${nonce}">body{font:16px system-ui;background:#fafafa;color:#18181b;margin:10vh auto;
-    max-width:480px;padding:24px}input,button{font:inherit;padding:12px;margin:8px 0}input{width:95%}</style>
-    <img src="${escape(SEGMENTSTREAM_LOGO_URI)}" alt="SegmentStream" width="210" height="45">
-    <h1>${title}</h1>${manual}<script nonce="${nonce}">${script}</script></html>`, {
+    <style nonce="${nonce}">${STYLE}</style>
+    <main><img src="${escape(SEGMENTSTREAM_LOGO_URI)}" alt="SegmentStream" width="210" height="45">
+    <section class="card">${manual}</section>
+    <p class="muted secured">Secured by SegmentStream</p></main>
+    <script nonce="${nonce}">${script}</script></html>`, {
         headers: {
             "content-type": "text/html; charset=utf-8",
             "cache-control": "no-store",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@segmentstream-cloud/app",
-  "version": "0.16.3",
+  "version": "0.16.4",
   "description": "Sign-in, users, permissions, the ontology client and warehouse data access for SegmentStream workspace apps built with Next.js.",
   "license": "Apache-2.0",
   "author": "SegmentStream",