@startup-api/cloudflare 0.2.0 → 0.3.1

package/public/users/style.css

@@ -1,3 +1,89 @@
+/* Color tokens. Every color below is keyed off these variables so the whole
+   page can be re-themed by flipping a single set of values — matching how the
+   landing page (index.html) and the <power-strip> component theme themselves.
+   The light palette is the default; the dark overrides are driven by the
+   user's OS color-scheme preference, with a [data-theme] escape hatch so a
+   page (or the power strip) can force a theme at runtime. */
+:root {
+  --bg: #f9f9f9;
+  --surface: #fff;
+  --surface-muted: #f8f9fa;
+  --surface-alt: #f1f3f4;
+  --hover-bg: #f0f0f0;
+  --text: #333;
+  --text-secondary: #555;
+  --text-faint: #666;
+  --text-muted: #717171;
+  --border: #ddd;
+  --border-light: #eee;
+  --accent: #ffcc00;
+  --accent-hover: #e6b800;
+  --accent-text: #826700;
+  --accent-soft-bg: #fff7d6;
+  --on-accent: #202124;
+  --muted-badge-text: #5f6368;
+  --danger: #d93025;
+  --danger-hover: #ea4335;
+  --danger-soft-bg: #fce8e6;
+  --disabled-bg: #ccc;
+  --avatar-remove-bg: #727579;
+  --avatar-remove-icon: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --bg: #1a1a1a;
+    --surface: #2d2d2d;
+    --surface-muted: #333;
+    --surface-alt: #3c4043;
+    --hover-bg: #3c4043;
+    --text: #e0e0e0;
+    --text-secondary: #c0c0c0;
+    --text-faint: #bdc1c6;
+    --text-muted: #9aa0a6;
+    --border: #5f6368;
+    --border-light: #444;
+    --accent: #ffcc00;
+    --accent-hover: #e6b800;
+    --accent-text: #ffcc00;
+    --accent-soft-bg: #3a3320;
+    --on-accent: #202124;
+    --muted-badge-text: #a8adb2;
+    --danger: #f28b82;
+    --danger-hover: #ee675c;
+    --danger-soft-bg: #3c2a28;
+    --disabled-bg: #5f6368;
+    --avatar-remove-bg: #5f6368;
+    --avatar-remove-icon: #e0e0e0;
+  }
+}
+
+[data-theme='dark'] {
+  --bg: #1a1a1a;
+  --surface: #2d2d2d;
+  --surface-muted: #333;
+  --surface-alt: #3c4043;
+  --hover-bg: #3c4043;
+  --text: #e0e0e0;
+  --text-secondary: #c0c0c0;
+  --text-faint: #bdc1c6;
+  --text-muted: #9aa0a6;
+  --border: #5f6368;
+  --border-light: #444;
+  --accent: #ffcc00;
+  --accent-hover: #e6b800;
+  --accent-text: #ffcc00;
+  --accent-soft-bg: #3a3320;
+  --on-accent: #202124;
+  --muted-badge-text: #a8adb2;
+  --danger: #f28b82;
+  --danger-hover: #ee675c;
+  --danger-soft-bg: #3c2a28;
+  --disabled-bg: #5f6368;
+  --avatar-remove-bg: #5f6368;
+  --avatar-remove-icon: #e0e0e0;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -9,7 +95,8 @@ body {
     sans-serif;
   padding: 2rem;
   margin: 0 auto;
-  background: #f9f9f9;
+  background: var(--bg);
+  color: var(--text);
 }
 
 .main-layout,
@@ -68,7 +155,7 @@ body {
 .nav-link {
   display: block;
   padding: 0.75rem 1rem;
-  color: #555;
+  color: var(--text-secondary);
   text-decoration: none;
   border-radius: 6px;
   transition: all 0.2s;
@@ -77,20 +164,20 @@ body {
 }
 
 .nav-link:hover {
-  background: #f0f0f0;
-  color: #1a73e8;
+  background: var(--hover-bg);
+  color: var(--accent-text);
 }
 
 .nav-link.active {
-  color: #1a73e8;
+  color: var(--accent-text);
   font-weight: 600;
-  border-left: 3px solid #1a73e8;
+  border-left: 3px solid var(--accent-text);
   border-radius: 0;
   padding-left: calc(1rem - 3px);
 }
 
 h1.page-subtitle {
-  color: #666;
+  color: var(--text-faint);
   margin-bottom: 0.25rem;
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -101,7 +188,7 @@ h1.page-subtitle {
 .page-title {
   font-size: 2.5rem;
   font-weight: bold;
-  color: #333;
+  color: var(--text);
   margin-bottom: 0.5rem;
   white-space: nowrap;
   overflow: hidden;
@@ -111,7 +198,7 @@ h1.page-subtitle {
 
 .subtitle {
   font-size: 0.75rem;
-  color: #888;
+  color: var(--text-muted);
   margin-bottom: 2rem;
   font-family: monospace;
   display: flex;
@@ -121,7 +208,7 @@ h1.page-subtitle {
 }
 
 section {
-  background: white;
+  background: var(--surface);
   padding: 1.5rem;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -136,28 +223,30 @@ section {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
-  color: #555;
+  color: var(--text-secondary);
 }
 
 .form-group input,
 .form-group select {
   width: 100%;
   padding: 0.75rem;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 1rem;
+  background: var(--surface);
+  color: var(--text);
 }
 
 .form-group input:disabled {
-  background: #f0f0f0;
-  color: #888;
+  background: var(--surface-muted);
+  color: var(--text-muted);
 }
 
 button {
   padding: 0.75rem 1.5rem;
-  background: #1a73e8;
-  color: white;
+  background: var(--accent);
+  color: var(--on-accent);
   border: none;
   border-radius: 4px;
   cursor: pointer;
@@ -166,21 +255,21 @@ button {
 }
 
 button:hover {
-  background: #1557b0;
+  background: var(--accent-hover);
 }
 
 button.secondary-btn {
-  background: #fff;
-  color: #1a73e8;
-  border: 1px solid #1a73e8;
+  background: var(--surface);
+  color: var(--accent-text);
+  border: 1px solid var(--accent-text);
 }
 
 button.secondary-btn:hover {
-  background: #f8f9fa;
+  background: var(--surface-muted);
 }
 
 button:disabled {
-  background: #ccc;
+  background: var(--disabled-bg);
   cursor: not-allowed;
 }
 
@@ -200,7 +289,7 @@ button:disabled {
 .back-link {
   display: inline-block;
   margin-bottom: 1rem;
-  color: #1a73e8;
+  color: var(--accent-text);
   text-decoration: none;
 }
 
@@ -210,29 +299,29 @@ button:disabled {
 
 .remove-btn {
   background: transparent;
-  color: #d93025;
-  border: 1px solid #d93025;
+  color: var(--danger);
+  border: 1px solid var(--danger);
   padding: 0.4rem 0.8rem;
   font-size: 0.85rem;
 }
 
 .remove-btn:hover {
-  background: #fce8e6;
+  background: var(--danger-soft-bg);
 }
 
 .remove-btn:disabled {
-  background: #fafafa;
-  border-color: #eee;
-  color: #999;
+  background: var(--surface-muted);
+  border-color: var(--border-light);
+  color: var(--text-muted);
   cursor: not-allowed;
 }
 
 .btn-link {
   display: inline-block;
   padding: 0.75rem 1rem;
-  background: white;
-  color: #1a73e8;
-  border: 1px solid #1a73e8;
+  background: var(--surface);
+  color: var(--accent-text);
+  border: 1px solid var(--accent-text);
   border-radius: 4px;
   text-decoration: none;
   font-weight: 500;
@@ -241,7 +330,7 @@ button:disabled {
 }
 
 .btn-link:hover {
-  background: #f8f9fa;
+  background: var(--surface-muted);
 }
 
 .remove-image-btn {
@@ -251,9 +340,9 @@ button:disabled {
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background: #bdc1c6;
-  color: white;
-  border: 2px solid white;
+  background: var(--avatar-remove-bg);
+  color: var(--avatar-remove-icon);
+  border: 2px solid var(--surface);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -284,7 +373,7 @@ button:disabled {
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
-  border: 3px solid white;
+  border: 3px solid var(--surface);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
@@ -293,7 +382,7 @@ button:disabled {
   height: 100px;
   border-radius: 8px;
   object-fit: cover;
-  border: 3px solid white;
+  border: 3px solid var(--surface);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
@@ -302,20 +391,20 @@ button:disabled {
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  border: 1px solid #eee;
+  border: 1px solid var(--border-light);
   border-radius: 8px;
   margin-bottom: 0.75rem;
 }
 
 .credential-item.active {
-  border-color: #1a73e8;
-  background-color: #e8f0fe;
+  border-color: var(--accent-text);
+  background-color: var(--accent-soft-bg);
 }
 
 .current-badge {
   font-size: 0.75rem;
-  background: #1a73e8;
-  color: white;
+  background: var(--accent);
+  color: var(--on-accent);
   padding: 0.125rem 0.375rem;
   border-radius: 0.75rem;
   margin-left: 0.5rem;
@@ -349,13 +438,13 @@ button:disabled {
   text-decoration: none;
   font-weight: 500;
   font-size: 0.875rem;
-  border: 1px solid #ddd;
-  color: #333;
+  border: 1px solid var(--border);
+  color: var(--text);
   transition: background 0.2s;
 }
 
 .link-account-btn.google:hover {
-  background: #f8f9fa;
+  background: var(--surface-muted);
 }
 
 .link-account-btn.twitch {
@@ -378,7 +467,7 @@ button:disabled {
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid var(--border-light);
 }
 
 .member-item:last-child {
@@ -398,11 +487,11 @@ button:disabled {
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
-  background: #f1f3f4;
+  background: var(--surface-alt);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #5f6368;
+  color: var(--muted-badge-text);
 }
 
 .member-avatar svg {
@@ -436,27 +525,28 @@ button:disabled {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
   border-radius: 1rem;
-  background: #f1f3f4;
-  color: #5f6368;
+  background: var(--surface-alt);
+  color: var(--muted-badge-text);
   font-weight: 500;
 }
 
 .role-badge.admin {
-  background: #e8f0fe;
-  color: #1a73e8;
+  background: var(--accent-soft-bg);
+  color: var(--accent-text);
 }
 
 .role-select {
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--border);
   font-size: 0.85rem;
-  background: #fff;
+  background: var(--surface);
+  color: var(--text);
 }
 
 .role-select:disabled {
-  background: #f1f3f4;
-  color: #5f6368;
+  background: var(--surface-alt);
+  color: var(--muted-badge-text);
   border-color: transparent;
   appearance: none;
   -webkit-appearance: none;
@@ -475,7 +565,7 @@ button:disabled {
   border: none;
   padding: 0.25rem;
   cursor: pointer;
-  color: #1a73e8;
+  color: var(--accent-text);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -484,7 +574,7 @@ button:disabled {
 }
 
 .copy-btn:hover {
-  background: #f0f0f0;
+  background: var(--hover-bg);
 }
 
 .copy-btn svg {

package/src/PowerStrip.ts

@@ -31,7 +31,7 @@ export async function injectPowerStrip(response: Response, usersPath: string, pr
           element.onEndTag((end) => {
             if (!hasUserPowerStrip) {
               end.before(
-                `<power-strip providers="${providersAttr}" style="position: absolute; top: 0; right: 0; z-index: 9999; padding: 0.1rem; border-radius: 0 0 0 0.3rem;">` +
+                `<power-strip providers="${providersAttr}" style="position: absolute; top: 0; right: 0; z-index: 9999; border-radius: 0 0 0 0.3rem;">` +
                   '<svg viewBox="0 0 24 24" style="width: 1rem; height: 1rem;"><path d="M7 2v11h3v9l7-12h-4l4-8z"/></svg>' +
                   '</power-strip>',
                 { html: true },

package/src/createStartupAPI.ts

@@ -24,7 +24,7 @@ import { handleSSR } from './handlers/ssr';
 import type { StartupAPIEnv } from './StartupAPIEnv';
 import { StartupAPIConfigSchema } from './schemas/config';
 import type { StartupAPIConfig, ProviderOptions, ResolvedFreshness } from './schemas/config';
-import type { AccessPolicyConfig } from './schemas/policy';
+import type { AccessPolicyConfig, PageSource } from './schemas/policy';
 import { AccessPolicy, evaluateAccess } from './policy/accessPolicy';
 import type { PolicyDecision } from './policy/accessPolicy';
 import { loadEntitlements, entitlementHeaders } from './entitlements/service';
@@ -67,11 +67,46 @@ function resolveAccessPolicy(configPolicy: AccessPolicyConfig | undefined): Acce
   return configPolicy ?? { default: { mode: 'public' } };
 }
 
-/** Build a deny response (login redirect / 403 / upgrade redirect) for an unmet access requirement. */
+/**
+ * Serve a gate page body in place (no redirect), sourced from either the ASSETS binding (a local file)
+ * or a path proxied from ORIGIN_URL. The configured status is re-stamped onto the response so e.g. a
+ * 200 asset can be served as a 403 gate.
+ */
+async function serveGatePage(
+  source: PageSource,
+  status: number,
+  request: Request,
+  env: StartupAPIEnv,
+  reqUrl: URL,
+): Promise<Response> {
+  let res: Response;
+  if ('asset' in source) {
+    // Serve a local file from ASSETS, mirroring the existing user-asset path.
+    const assetReq = new Request(new URL(source.asset, reqUrl).toString(), { method: 'GET' });
+    assetReq.headers.set('x-skip-worker', 'true');
+    res = await env.ASSETS.fetch(assetReq);
+  } else {
+    // Proxy a path from ORIGIN_URL (swap host, set Host), like the main origin proxy.
+    const target = new URL(source.origin, new URL(env.ORIGIN_URL));
+    const proxied = new Request(target.toString(), request);
+    proxied.headers.set('Host', target.host);
+    res = await originFetch(proxied);
+  }
+  // Re-stamp the status (e.g. a 200 asset can be served as the configured gate status).
+  return new Response(res.body, { status, headers: res.headers });
+}
+
+/** Build a deny response (login redirect / 403 / upgrade redirect / in-place gate page) for an unmet access requirement. */
 function denyResponse(
   decision: Extract<PolicyDecision, { allow: false }>,
-  ctx: { usersPath: string; returnUrl: string; activeProviders: string[] },
-): Response {
+  ctx: { usersPath: string; returnUrl: string; activeProviders: string[]; authenticated: boolean; request: Request; env: StartupAPIEnv; url: URL },
+): Response | Promise<Response> {
+  if (decision.action === 'gate' && decision.gate) {
+    // Serve an explainer page in place: anonymous variant for logged-out visitors, unentitled variant
+    // (falling back to anonymous) for logged-in visitors who fail the requirement. No redirect.
+    const source = ctx.authenticated ? (decision.gate.unentitled ?? decision.gate.anonymous) : decision.gate.anonymous;
+    return serveGatePage(source, decision.gate.status ?? 200, ctx.request, ctx.env, ctx.url);
+  }
   if (decision.action === 'forbidden') {
     return new Response('Forbidden', { status: 403 });
   }
@@ -298,7 +333,15 @@ export function createStartupAPI(config: StartupAPIConfig = {}) {
       // Enforce the requirement. Admins bypass the gate (identity/headers above still apply).
       const decision = evaluateAccess(rule, { authenticated, entitlements, isAdmin: userIsAdmin });
       if (!decision.allow) {
-        return denyResponse(decision, { usersPath, returnUrl, activeProviders: getActiveProviders(env) });
+        return denyResponse(decision, {
+          usersPath,
+          returnUrl,
+          activeProviders: getActiveProviders(env),
+          authenticated,
+          request,
+          env,
+          url,
+        });
       }
 
       const response = await originFetch(newRequest);

package/src/policy/accessPolicy.ts

@@ -1,5 +1,5 @@
 import { AccessPolicySchema } from '../schemas/policy';
-import type { AccessPolicyConfig, AccessPolicyResolved, AccessRule, Requirement, UnauthorizedAction } from '../schemas/policy';
+import type { AccessPolicyConfig, AccessPolicyResolved, AccessRule, Gate, Requirement, UnauthorizedAction } from '../schemas/policy';
 import type { Entitlements } from '../entitlements/types';
 import { providerEntitlementCheckers, providerSupportsEntitlements } from './entitlementCheckers';
 
@@ -20,10 +20,10 @@ export function matchPattern(pattern: string, path: string): boolean {
 
 export type PolicyDecision =
   | { allow: true }
-  | { allow: false; reason: 'unauthenticated' | 'not_entitled'; action: UnauthorizedAction; upgrade_url?: string };
+  | { allow: false; reason: 'unauthenticated' | 'not_entitled'; action: UnauthorizedAction; upgrade_url?: string; gate?: Gate };
 
 function deny(reason: 'unauthenticated' | 'not_entitled', rule: AccessRule): PolicyDecision {
-  return { allow: false, reason, action: rule.on_unauthorized, upgrade_url: rule.upgrade_url };
+  return { allow: false, reason, action: rule.on_unauthorized, upgrade_url: rule.upgrade_url, gate: rule.gate };
 }
 
 /**
@@ -101,6 +101,7 @@ export class AccessPolicy {
       requirement: cfg.default ?? { mode: 'authenticated' },
       on_unauthorized: cfg.default_on_unauthorized,
       upgrade_url: cfg.default_upgrade_url,
+      gate: cfg.default_gate,
     };
   }
 }

package/src/schemas/policy.ts

@@ -34,7 +34,27 @@ export const RequirementSchema = z.discriminatedUnion('mode', [
   }),
 ]);
 
-export const UnauthorizedActionSchema = z.enum(['login', 'forbidden', 'upgrade']);
+/** Where a gate page body comes from. Exactly one of asset/origin. */
+export const PageSourceSchema = z.union([
+  // Served from the ASSETS binding; path is resolved like other assets (`/foo` -> foo.html).
+  z.object({ asset: z.string() }),
+  // Proxied from this path on ORIGIN_URL.
+  z.object({ origin: z.string() }),
+]);
+export type PageSource = z.infer<typeof PageSourceSchema>;
+
+/** Page(s) served in place when a requirement is not met (on_unauthorized: 'gate'). */
+export const GateSchema = z.object({
+  /** Shown to visitors who are NOT logged in. Required. */
+  anonymous: PageSourceSchema,
+  /** Shown to logged-in visitors who fail the requirement. Falls back to `anonymous` if omitted. */
+  unentitled: PageSourceSchema.optional(),
+  /** HTTP status for the served page. Default 200 (preserves typical explainer-page UX). */
+  status: z.number().int().optional(),
+});
+export type Gate = z.infer<typeof GateSchema>;
+
+export const UnauthorizedActionSchema = z.enum(['login', 'forbidden', 'upgrade', 'gate']);
 
 export const RuleSchema = z.object({
   /** Path pattern: exact (`/special`), prefix (`/special/*`), or `/` for the homepage only. */
@@ -44,6 +64,8 @@ export const RuleSchema = z.object({
   on_unauthorized: UnauthorizedActionSchema.default('login'),
   /** Redirect target for the 'upgrade' action (e.g. a Patreon join page). */
   upgrade_url: z.string().optional(),
+  /** Page(s) served in place for the 'gate' action. */
+  gate: GateSchema.optional(),
 });
 
 export const AccessPolicySchema = z.object({
@@ -52,6 +74,8 @@ export const AccessPolicySchema = z.object({
   default: RequirementSchema.optional(),
   default_on_unauthorized: UnauthorizedActionSchema.default('login'),
   default_upgrade_url: z.string().optional(),
+  /** Page(s) served in place for the 'gate' action on paths that match no rule. */
+  default_gate: GateSchema.optional(),
 });
 
 export type EntitlementCondition = z.infer<typeof EntitlementConditionSchema>;