npm - @tokenoftrust/storefront-runner - Versions diffs - 1.4.1 → 2.0.0 - Mend

@tokenoftrust/storefront-runner 1.4.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (474) hide show

package/apps/storefront/src/pages/admin/review-release.astro ADDED Viewed

@@ -0,0 +1,265 @@
+---
+/**
+ * `/admin/review-release` — the merchant Review-and-Release workspace.
+ *
+ * The two-decision merchant surface (`docs/review-release-ux-contract.md`): a
+ * merchant only ever (1) adds a ready change to the next release, and (2) publishes
+ * the next release live. Everything mechanical — candidate prep, checks, retries,
+ * reconciliation, conflict handling, exact-digest pins — runs UNDERNEATH and is
+ * never a merchant control. This is an ADDITIVE surface; the operator/developer
+ * "Publish" tab (`AdminPublishTab.astro`) keeps the retry/reject/rollback/
+ * domain controls.
+ *
+ * ROUTING / AUTH — mirrors `admin.astro` + `admin/ops-timeline.astro`: middleware
+ * resolves the tenant, injects CSP/security headers, and holds anonymous/non-member
+ * visitors at the sign-in gate. Tenant context is already resolved by the time this
+ * renders. Ship capability is stamped server-side (owner/admin, or an explicit
+ * ship-on-behalf grant) — the SAME model the `/api/changes` + `/api/changes/ship`
+ * endpoints re-authorize on every request; this is UX mirroring only.
+ *
+ * The page renders a static shell (three section containers, a persistent
+ * ARIA-live announcer, an undo toast, and a focus-trapped publish-confirm dialog);
+ * the client controller (`reviewReleaseWorkspace/controller.ts`) fetches
+ * `GET /api/changes`, derives the two-decision view model with the pure
+ * `lib/publish/reviewRelease` seam, and renders it.
+ */
+export const prerender = false;
+import { readViewerSession } from "@/lib/auth/route";
+import { resolveViewerShipCapability } from "@/lib/change";
+import { withBase } from "@/lib/basePath";
+import { isInternalTestTenant } from "@tot/public-runtime";
+const { tenant, basePath, cspNonce } = Astro.locals;
+const adminPath = `${basePath || ""}/admin`;
+const storeName = tenant.displayName || tenant.appDomain || tenant.tenant_id;
+const viewerSession = await readViewerSession(Astro);
+// Ship capability, mirrored from the same session model the API routes gate on.
+// UX-only: the server re-authorizes every action. Owner/admin of THIS tenant, or a
+// signed-in developer holding a LIVE ship-on-behalf grant.
+const sessionCapability =
+  viewerSession?.resource === tenant.appDomain ? viewerSession.capability : undefined;
+const viewerCapability = Astro.locals.viewer?.capability ?? sessionCapability ?? "none";
+let canShip = viewerCapability === "owner" || viewerCapability === "admin";
+if (!canShip && Astro.locals.viewer?.email) {
+  const shipGrant = await resolveViewerShipCapability(Astro.locals.viewer.email, tenant.appDomain);
+  if (shipGrant === "ship-on-behalf") canShip = true;
+}
+const internalTestStore = isInternalTestTenant(tenant);
+const changesEndpoint = withBase(basePath || "", "/api/changes");
+const acceptEndpoint = withBase(basePath || "", "/api/changes/accept");
+const shipEndpoint = withBase(basePath || "", "/api/changes/ship");
+const buildEndpoint = withBase(basePath || "", "/api/preview/build");
+const liveHref = withBase(basePath || "", "/");
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>{storeName} · Review and Release</title>
+    <style is:global nonce={cspNonce}>
+      :root {
+        color-scheme: light;
+        --rr-bg: #f5f7f6;
+        --rr-surface: #ffffff;
+        --rr-surface-soft: #f9fbfa;
+        --rr-ink: #16211f;
+        --rr-muted: #5b6a65;
+        --rr-line: #dce5e2;
+        --rr-teal: #007f79;
+        --rr-green-soft: #e3f5eb;
+        --rr-green: #137a55;
+        --rr-amber-soft: #fff0d5;
+        --rr-amber: #a45d00;
+        --rr-red-soft: #fde7e4;
+        --rr-red: #b42318;
+        --rr-blue-soft: #e7efff;
+        --rr-blue: #2458c7;
+        --rr-radius: 10px;
+        --rr-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+        --rr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      }
+      * { box-sizing: border-box; }
+      body { margin: 0; background: var(--rr-bg); color: var(--rr-ink); font: 15px/1.55 var(--rr-font); }
+      a { color: var(--rr-teal); }
+      code.rr-mono { font-family: var(--rr-mono); font-size: 0.85em; }
+      .rr-wrap { max-width: 860px; margin: 0 auto; padding: 28px 20px 72px; }
+      header.rr-page { margin-bottom: 22px; }
+      header.rr-page h1 { margin: 0; font-size: 24px; font-weight: 780; letter-spacing: -0.01em; }
+      header.rr-page p { margin: 5px 0 0; color: var(--rr-muted); font-size: 13px; }
+      .rr-notice {
+        padding: 14px 16px; border: 1px solid var(--rr-amber); border-radius: var(--rr-radius);
+        background: var(--rr-amber-soft); color: #5c3600; margin-bottom: 18px; font-size: 14px;
+      }
+      .rr-section {
+        background: var(--rr-surface); border: 1px solid var(--rr-line);
+        border-radius: var(--rr-radius); padding: 18px 20px; margin-bottom: 18px;
+      }
+      .rr-section-title { margin: 0 0 4px; font-size: 17px; font-weight: 720; }
+      .rr-note { color: var(--rr-muted); font-size: 13px; margin: 8px 0 0; }
+      .rr-empty { color: var(--rr-muted); font-size: 14px; margin: 12px 0 0; }
+      /* Change list */
+      .rr-change-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
+      .rr-change {
+        display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
+        padding: 12px 14px; border: 1px solid var(--rr-line); border-radius: 8px;
+        background: var(--rr-surface-soft);
+      }
+      .rr-change-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+      .rr-change-title { font-weight: 640; }
+      .rr-subline { margin: 4px 0 0; color: var(--rr-muted); font-size: 13px; }
+      .rr-change-actions { display: flex; gap: 8px; flex: none; }
+      /* Status chips — ALWAYS carry the state WORD (never color alone, a11y §8). */
+      .rr-chip {
+        display: inline-flex; align-items: center; min-height: 20px; padding: 1px 9px;
+        border-radius: 999px; font-size: 11px; font-weight: 720; white-space: nowrap;
+        background: var(--rr-surface); border: 1px solid var(--rr-line); color: #3f4d49;
+      }
+      .rr-chip-preparing { background: var(--rr-blue-soft); color: var(--rr-blue); border-color: transparent; }
+      .rr-chip-ready-to-add { background: var(--rr-green-soft); color: var(--rr-green); border-color: transparent; }
+      .rr-chip-in-next-release { background: var(--rr-surface-soft); color: var(--rr-teal); border-color: var(--rr-teal); }
+      .rr-chip-needs-attention { background: var(--rr-amber-soft); color: var(--rr-amber); border-color: transparent; }
+      .rr-chip-published { background: var(--rr-green-soft); color: var(--rr-green); border-color: transparent; }
+      /* Release panel */
+      .rr-release-body { margin: 2px 0 0; color: var(--rr-muted); font-size: 14px; }
+      .rr-contents { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rr-line); }
+      .rr-contents-title { margin: 0 0 8px; font-size: 13px; font-weight: 720; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rr-muted); }
+      .rr-contents-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
+      .rr-release-action { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
+      .rr-paywall { flex-direction: column; align-items: flex-start; }
+      .rr-success { margin: 12px 0 0; color: var(--rr-green); font-weight: 640; }
+      .rr-live-body { margin: 4px 0 12px; color: var(--rr-muted); font-size: 14px; }
+      /* Buttons */
+      .rr-btn {
+        min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
+        padding: 0 18px; border-radius: 8px; font: inherit; font-weight: 660; font-size: 14px;
+        cursor: pointer; text-decoration: none; border: 1px solid var(--rr-teal);
+        background: var(--rr-surface); color: var(--rr-teal);
+      }
+      .rr-btn-primary { background: var(--rr-teal); color: #fff; }
+      .rr-btn-ghost { border-color: var(--rr-line); color: var(--rr-ink); }
+      .rr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+      .rr-btn:focus-visible { outline: 3px solid var(--rr-blue); outline-offset: 2px; }
+      a.rr-btn:focus-visible { outline: 3px solid var(--rr-blue); outline-offset: 2px; }
+      /* Announcer (SR-only) + undo toast */
+      .rr-announce {
+        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+      }
+      .rr-toast {
+        position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
+        background: var(--rr-ink); color: #fff; padding: 10px 16px; border-radius: 8px;
+        font-size: 13px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); z-index: 40;
+      }
+      /* Publish-confirm dialog */
+      .rr-confirm-backdrop {
+        position: fixed; inset: 0; background: rgba(22, 33, 31, 0.45);
+        display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
+      }
+      /* `display: flex` above beats the UA `[hidden]{display:none}` rule at equal
+         specificity (author styles always win) — without this, toggling the
+         `hidden` attribute in JS has no visual effect and the dialog looks stuck. */
+      .rr-confirm-backdrop[hidden] {
+        display: none;
+      }
+      .rr-confirm-dialog {
+        background: var(--rr-surface); border-radius: var(--rr-radius); padding: 22px 24px;
+        max-width: 440px; width: 100%; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
+      }
+      .rr-confirm-dialog h2 { margin: 0 0 8px; font-size: 19px; font-weight: 740; }
+      .rr-confirm-dialog p { margin: 0 0 20px; color: var(--rr-muted); font-size: 14px; }
+      .rr-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
+      .rr-loading { color: var(--rr-muted); font-size: 14px; padding: 8px 0; }
+      @media (max-width: 560px) {
+        .rr-change { flex-direction: column; }
+        .rr-change-actions { width: 100%; }
+        .rr-btn { width: 100%; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="rr-wrap">
+      <header class="rr-page">
+        <h1>Review and release</h1>
+        <p>{storeName} · review changes and publish your next release · <a href={adminPath}>← Admin</a></p>
+      </header>
+      {!viewerSession && (
+        <div class="rr-notice">
+          Sign in as an owner or admin of {storeName} to review changes and publish releases.
+          <a href="/auth/login">Sign in</a>.
+        </div>
+      )}
+      {viewerSession && (
+        <div
+          data-rr-root
+          data-changes-endpoint={changesEndpoint}
+          data-accept-endpoint={acceptEndpoint}
+          data-ship-endpoint={shipEndpoint}
+          data-build-endpoint={buildEndpoint}
+          data-live-href={liveHref}
+          data-can-ship={canShip ? "true" : "false"}
+          data-internal-test-store={internalTestStore ? "true" : "false"}
+          data-store-name={storeName}
+        >
+          <div class="rr-announce" data-rr-announce role="status" aria-live="polite"></div>
+          <div data-rr-workspace>
+            <p class="rr-loading" data-rr-loading>Loading your changes and next release…</p>
+          </div>
+          <div class="rr-toast" data-rr-toast role="status" aria-live="polite" hidden></div>
+          <!-- Publish-confirm dialog — a single plain-language step (the human go-live
+               gate). role=dialog, focus-trapped, Esc cancels, focus returns to the
+               invoking button. No typed-domain confirm, no digest to verify. -->
+          <div class="rr-confirm-backdrop" data-rr-confirm hidden>
+            <div
+              class="rr-confirm-dialog"
+              data-rr-confirm-dialog
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="rr-confirm-heading"
+              tabindex="-1"
+            >
+              <h2 id="rr-confirm-heading" data-rr-confirm-heading>Publish your next release?</h2>
+              <p data-rr-confirm-body></p>
+              <div class="rr-confirm-actions">
+                <button type="button" class="rr-btn rr-btn-ghost" data-rr-confirm-cancel>Cancel</button>
+                <button type="button" class="rr-btn rr-btn-primary" data-rr-confirm-ok>Publish now</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+    {viewerSession && (
+      <script>
+        import { initReviewReleaseWorkspace } from "@/lib/publish/reviewReleaseWorkspace/controller";
+        initReviewReleaseWorkspace();
+      </script>
+    )}
+  </body>
+</html>

package/apps/storefront/src/pages/admin/select.astro ADDED Viewed

@@ -0,0 +1,96 @@
+---
+/**
+ * /admin/select — the canonical admin tenant picker.
+ *
+ * Reached when an AUTHENTICATED viewer hits the admin of a tenant they are NOT a
+ * member of (a stale/shared deep link, or a host that fell back to the registry
+ * default). The middleware routes them here instead of a sign-in loop or the
+ * wrong tenant's data. This page holds no identity of its own: it reads the
+ * session's tenant memberships and offers each as a link INTO that tenant's own
+ * admin (`/<resource>/admin`, the DNS-free path form).
+ *
+ *   0 memberships → honest "nothing to manage".
+ *   1 membership  → straight into that tenant's admin.
+ *   ≥2            → a picker.
+ */
+export const prerender = false;
+import { readViewerSession } from "@/lib/auth/route";
+import { selectTenant } from "@/lib/dashboard/tenantSelection";
+import { adminUrlForTenant } from "@/lib/auth/adminLanding";
+const cspNonce = Astro.locals.cspNonce;
+const session = await readViewerSession(Astro);
+if (!session) {
+  return Astro.redirect("/auth/login?next=%2Fadmin%2Fselect", 302);
+}
+const selection = selectTenant(session.tenants);
+if (selection.mode === "single") {
+  return Astro.redirect(adminUrlForTenant(selection.tenant.resource), 302);
+}
+const tenants = selection.mode === "picker" ? selection.tenants : [];
+---
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Choose a store — Token of Trust Admin</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light dark; }
+      * { box-sizing: border-box; }
+      body { font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        margin: 0; min-height: 100vh; padding: 2.5rem 1.25rem; background: #f5f4f0; color: #1c1c1c; }
+      @media (prefers-color-scheme: dark) { body { background: #14141a; color: #ececf1; } }
+      main { max-width: 40rem; margin-inline: auto; }
+      .eyebrow { font: 600 .68rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a7f66; margin: 0 0 .5rem; }
+      h1 { font-size: 1.5rem; letter-spacing: -.01em; margin: 0 0 .3rem; }
+      .sub { color: #6a6a6a; margin: 0 0 1.75rem; }
+      @media (prefers-color-scheme: dark) { .sub { color: #a2a2ad; } }
+      ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
+      a.store { display: flex; align-items: center; justify-content: space-between; text-decoration: none;
+        background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1rem 1.25rem; color: inherit; }
+      @media (prefers-color-scheme: dark) { a.store { background: #1e1e28; border-color: #33333f; } }
+      a.store:hover { border-color: #b7d0ff; }
+      .name { font-weight: 600; }
+      .role { font: 600 .68rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em;
+        color: #4a6; border: 1px solid currentColor; border-radius: 999px; padding: .2rem .55rem; }
+      .empty { background: #fff; border: 1px solid #e6e4de; border-radius: 12px; padding: 1.5rem; }
+      @media (prefers-color-scheme: dark) { .empty { background: #1e1e28; border-color: #33333f; } }
+      .who { margin-top: 2rem; font-size: .82rem; color: #8a8a8a; }
+      .linkbtn { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
+      .logout { display: inline; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p class="eyebrow">Token of Trust Admin</p>
+      <h1>Choose a store</h1>
+      {tenants.length ? (
+        <>
+          <p class="sub">You're a member of more than one store. Pick one to open its admin.</p>
+          <ul>
+            {tenants.map((t) => (
+              <li>
+                <a class="store" href={adminUrlForTenant(t.resource)}>
+                  <span class="name">{t.resource}</span>
+                  <span class="role">{t.role}</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        <div class="empty">
+          <p style="margin:0">You're signed in as <strong>{session.email}</strong>, but you don't
+            have admin access to any store yet. Ask a store's owner to invite you.</p>
+        </div>
+      )}
+      <p class="who">Signed in as {session.email} ·
+        <form class="logout" method="post" action="/api/auth/logout"><button type="submit" class="linkbtn">Sign out</button></form></p>
+    </main>
+  </body>
+</html>