@lukoweb/apitogo 0.1.60 → 0.1.61

package/dist/cli/cli.js

@@ -419,6 +419,13 @@ function syncAuthentication(normalized) {
     if (!Array.isArray(auth.providers)) {
       auth.providers = [];
     }
+    const topLevelDemoMode = normalized.demoMode;
+    if (auth.demoMode === void 0) {
+      auth.demoMode = topLevelDemoMode !== false;
+    }
+  }
+  if (normalized.demoMode !== void 0) {
+    auth.demoMode = normalized.demoMode !== false;
   }
   normalized.authentication = auth;
 }
@@ -1600,7 +1607,7 @@ var init_shadcn_registry = __esm({
 import { createRequire } from "node:module";
 import path4 from "node:path";
 import { normalizeTheme } from "shiki";
-var THEME_VARIABLES, uncamelize, processColorValue, generateCss, generateRegistryCss, processCustomCss, MAIN_REPLACE, DEFAULT_THEME_REPLACE, GOOGLE_FONTS, getGoogleFontUrl, processFont, processFontConfig, processFonts, MODULE_SOURCE_PACKAGES, resolveModuleSourceDirs, virtualModuleId, resolvedVirtualModuleId, viteThemePlugin;
+var THEME_VARIABLES, uncamelize, processColorValue, generateCss, generateRegistryCss, processCustomCss, MAIN_REPLACE, DEFAULT_THEME_REPLACE, GOOGLE_FONTS, getGoogleFontUrl, processFont, processFontConfig, DEFAULT_FONT_SANS, DEFAULT_FONT_MONO, DEFAULT_FONT_HEADING, processFonts, MODULE_SOURCE_PACKAGES, resolveModuleSourceDirs, virtualModuleId, resolvedVirtualModuleId, viteThemePlugin;
 var init_plugin_theme = __esm({
   "src/vite/plugin-theme.ts"() {
     init_loader();
@@ -1712,12 +1719,16 @@ var init_plugin_theme = __esm({
         fontFamily: fontConfig.fontFamily
       };
     };
+    DEFAULT_FONT_SANS = '"IBM Plex Sans", system-ui, sans-serif';
+    DEFAULT_FONT_MONO = '"JetBrains Mono", monospace';
+    DEFAULT_FONT_HEADING = '"Space Grotesk", system-ui, sans-serif';
     processFonts = async (themeConfig) => {
       const imports = [];
       const families = {
-        sans: "Geist, sans-serif",
+        sans: DEFAULT_FONT_SANS,
         serif: void 0,
-        mono: '"Geist Mono", monospace'
+        mono: DEFAULT_FONT_MONO,
+        heading: DEFAULT_FONT_HEADING
       };
       const userFonts = {
         sans: processFontConfig(themeConfig?.fonts?.sans),
@@ -1754,18 +1765,16 @@ var init_plugin_theme = __esm({
         } catch {
         }
       }
-      families.sans = userFonts.sans.fontFamily || registryFonts.sans || "Geist, sans-serif";
+      families.sans = userFonts.sans.fontFamily || registryFonts.sans || DEFAULT_FONT_SANS;
       families.serif = userFonts.serif.fontFamily || registryFonts.serif;
-      families.mono = userFonts.mono.fontFamily || registryFonts.mono || '"Geist Mono", monospace';
+      families.mono = userFonts.mono.fontFamily || registryFonts.mono || DEFAULT_FONT_MONO;
       if (!userFonts.sans.fontFamily && !registryFonts.sans) {
-        imports.push(getGoogleFontUrl("Geist"));
-      }
-      if (!userFonts.serif.fontFamily && !registryFonts.serif) {
-        imports.push(getGoogleFontUrl("Playfair Display"));
+        imports.push(getGoogleFontUrl("IBM Plex Sans"));
       }
       if (!userFonts.mono.fontFamily && !registryFonts.mono) {
-        imports.push(getGoogleFontUrl("Geist Mono"));
+        imports.push(getGoogleFontUrl("JetBrains Mono"));
       }
+      imports.push(getGoogleFontUrl("Space Grotesk"));
       return { imports, families };
     };
     MODULE_SOURCE_PACKAGES = [
@@ -1882,7 +1891,8 @@ ${generateCss(themeConfig.dark)}
           }
           const rootVars = [
             `  --font-sans: ${fonts.families.sans};`,
-            `  --font-mono: ${fonts.families.mono};`
+            `  --font-mono: ${fonts.families.mono};`,
+            `  --font-heading: ${fonts.families.heading};`
           ];
           if (fonts.families.serif) {
             rootVars.push(`  --font-serif: ${fonts.families.serif};`);
@@ -4575,6 +4585,7 @@ var init_ZudokuConfig = __esm({
       z9.object({
         type: z9.literal("dev-portal").optional().default("dev-portal"),
         apiBaseUrl: z9.string().optional(),
+        demoMode: z9.boolean().optional(),
         native: z9.object({
           enabled: z9.boolean().optional()
         }).optional(),
@@ -5227,7 +5238,7 @@ import {
 // package.json
 var package_default = {
   name: "@lukoweb/apitogo",
-  version: "0.1.60",
+  version: "0.1.61",
   type: "module",
   sideEffects: [
     "**/*.css",

package/dist/declarations/app/apitogoBrandTheme.d.ts

@@ -0,0 +1,2 @@
+import type { ZudokuConfig } from "../config/validators/ZudokuConfig.js";
+export declare const apitogoBrandTheme: NonNullable<ZudokuConfig["theme"]>;

package/dist/declarations/config/validators/ZudokuConfig.d.ts

@@ -369,6 +369,7 @@ declare const AuthenticationSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
 }, z.core.$strip>, z.ZodObject<{
     type: z.ZodDefault<z.ZodOptional<z.ZodLiteral<"dev-portal">>>;
     apiBaseUrl: z.ZodOptional<z.ZodString>;
+    demoMode: z.ZodOptional<z.ZodBoolean>;
     native: z.ZodOptional<z.ZodObject<{
         enabled: z.ZodOptional<z.ZodBoolean>;
     }, z.core.$strip>>;
@@ -6790,6 +6791,7 @@ export declare const ZudokuConfig: z.ZodObject<{
     }, z.core.$strip>, z.ZodObject<{
         type: z.ZodDefault<z.ZodOptional<z.ZodLiteral<"dev-portal">>>;
         apiBaseUrl: z.ZodOptional<z.ZodString>;
+        demoMode: z.ZodOptional<z.ZodBoolean>;
         native: z.ZodOptional<z.ZodObject<{
             enabled: z.ZodOptional<z.ZodBoolean>;
         }, z.core.$strip>>;

package/dist/declarations/index.d.ts

@@ -17,5 +17,6 @@ export { defaultLanguages } from "./lib/shiki.js";
 export { cn } from "./lib/ui/util.js";
 export { joinUrl } from "./lib/util/joinUrl.js";
 export { type ProblemJson, throwIfProblemJson, } from "./lib/util/problemJson.js";
+export { apitogoBrandTheme } from "./app/apitogoBrandTheme.js";
 export { buildApitogoConfig } from "./config/build-apitogo-config.js";
 export { APITOGO_CONFIG_FILENAME, applyEnvOverrides, extractManifest, extractSiteConfig, normalizeApitogoConfig, resolveProjectDisplayName, } from "./config/apitogo-config-core.js";

package/dist/declarations/lib/authentication/providers/dev-portal-auth-pages.d.ts

@@ -1,5 +1,6 @@
-export declare function DevPortalLoginPage({ apiBaseUrl }: {
+export declare function DevPortalLoginPage({ apiBaseUrl, demoMode, }: {
     apiBaseUrl?: string;
+    demoMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function DevPortalRegisterPage({ apiBaseUrl }: {
     apiBaseUrl?: string;

package/dist/declarations/lib/authentication/providers/dev-portal-demo.d.ts

@@ -0,0 +1,30 @@
+import type { DevPortalAuthenticationConfig } from "../../../config/config.js";
+import type { UserProfile } from "../state.js";
+import type { EndUserMeResponse } from "./dev-portal-constants.js";
+export declare const DEMO_EMAIL = "demo@apitogo.local";
+export declare const DEMO_PASSWORD = "password";
+export declare const DEMO_USER_ID = "00000000-0000-0000-0000-000000000001";
+export declare const DEMO_DISPLAY_NAME = "Demo User";
+export declare const DEMO_SUBSCRIPTION_KEY = "demo-subscription-key";
+export type DemoPlanInput = {
+    sku: string;
+    displayName?: string;
+};
+export declare function resolveDemoMode(config: Pick<DevPortalAuthenticationConfig, "demoMode">): boolean;
+export declare function isDemoCredential(email: string, password: string): boolean;
+export declare function createDemoProfile(): UserProfile;
+export declare function resolveDemoPlanSku(plans: DemoPlanInput[] | undefined): string;
+export declare function createDemoMeResponse(plans?: DemoPlanInput[]): EndUserMeResponse;
+export type DemoCredentialsResponse = {
+    idToken: string;
+    accessToken: string | null;
+    subscriptionKey: string;
+    gatewayBaseUrl: string | null;
+    planSku: string;
+    expiresAt: string | null;
+};
+export declare function createDemoCredentials(plans?: DemoPlanInput[]): DemoCredentialsResponse;
+export declare function readDemoSession(): boolean;
+export declare function writeDemoSession(): void;
+export declare function clearDemoSession(): void;
+export declare function activateDemoSession(apiBaseUrl?: string): void;

package/dist/declarations/lib/authentication/providers/dev-portal.d.ts

@@ -7,6 +7,8 @@ export type DevPortalProviderData = {
     type: "dev-portal";
     apiBaseUrl: string;
     authMode: DevPortalAuthMode;
+    isDemoSession?: boolean;
+    demoMode?: boolean;
 };
 declare module "../state.js" {
     interface ProviderDataRegistry {
@@ -15,6 +17,7 @@ declare module "../state.js" {
 }
 export declare class DevPortalAuthenticationProvider extends CoreAuthenticationPlugin implements AuthenticationPlugin {
     private readonly apiBaseUrl;
+    private readonly demoMode;
     private readonly redirectToAfterSignIn;
     private readonly redirectToAfterSignUp;
     private readonly redirectToAfterSignOut;
@@ -22,7 +25,7 @@ export declare class DevPortalAuthenticationProvider extends CoreAuthenticationP
     private refreshGeneration;
     private refreshInFlight;
     private authConfigNativeEnabled;
-    constructor({ apiBaseUrl, redirectToAfterSignIn, redirectToAfterSignUp, redirectToAfterSignOut, }: DevPortalAuthenticationConfig);
+    constructor({ apiBaseUrl, demoMode, redirectToAfterSignIn, redirectToAfterSignUp, redirectToAfterSignOut, }: DevPortalAuthenticationConfig);
     getRoutes(): {
         path: string;
         element: import("react/jsx-runtime").JSX.Element;
@@ -31,6 +34,7 @@ export declare class DevPortalAuthenticationProvider extends CoreAuthenticationP
     onPageLoad: () => Promise<void>;
     private syncBackendAvailability;
     private setPreviewState;
+    private setDemoAuthenticatedState;
     private ensureConfiguredBackend;
     refreshUserProfile(): Promise<boolean>;
     private refreshUserProfileInternal;
@@ -39,6 +43,7 @@ export declare class DevPortalAuthenticationProvider extends CoreAuthenticationP
     signOut(_: AuthActionContext): Promise<void>;
     hasDistinctSignUpFlow(): boolean;
     signRequest(request: Request): Promise<Request>;
+    completeDemoLogin(): void;
 }
 declare const devPortalAuth: AuthenticationProviderInitializer<DevPortalAuthenticationConfig>;
 export default devPortalAuth;

package/dist/flat-config.d.ts

@@ -322,6 +322,7 @@ export interface FlatZudokuConfig {
   } | {
     type?: "dev-portal"
     apiBaseUrl?: string
+    demoMode?: boolean
     native?: {
       enabled?: boolean
     }

package/docs/configuration/authentication.md

@@ -47,10 +47,22 @@ VITE_APITOGO_AUTHENTICATION_API_BASE_URL=https://your-dev-portal-api.example.com
 You can also set `authentication.apiBaseUrl` in `apitogo.config.json` or
 `APITOGO_CONFIG_authentication__apiBaseUrl` in `.env`.
 
-**Local preview:** When the backend URL is a placeholder or unreachable, the account area shows a
-message that sign-in unlocks after publish. Docs and API reference remain public. Plans on
-`/pricing` load from `apitogo.config.json` (overridable via `.env` — see [Manifest](./manifest.md),
-including `includedActionKeys` per plan). Plan edits hot-reload without restarting the dev server.
+**Local demo mode:** In development (`npm run dev`), `demoMode` is enabled by default when the user
+panel is on. You do not need `VITE_APITOGO_AUTHENTICATION_API_BASE_URL`, OIDC, or a running
+dev-portal backend to explore protected account pages locally. Sign in at `/login` with:
+
+```text
+demo@apitogo.local / password
+```
+
+Disable with `APITOGO_CONFIG_demoMode=false` in `.env` or `"demoMode": false` in
+`apitogo.config.json`. Demo mode is never active in production builds.
+
+**Local preview (demo off):** When the backend URL is a placeholder or unreachable and demo mode is
+disabled, the account area shows a message that sign-in unlocks after publish. Docs and API
+reference remain public. Plans on `/pricing` load from `apitogo.config.json` (overridable via `.env`
+— see [Manifest](./manifest.md), including `includedActionKeys` per plan). Plan edits hot-reload
+without restarting the dev server.
 
 ### Dev portal configuration files
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo",
-  "version": "0.1.60",
+  "version": "0.1.61",
   "type": "module",
   "sideEffects": [
     "**/*.css",

package/src/app/apitogoBrandTheme.ts

@@ -0,0 +1,46 @@
+import type { ZudokuConfig } from "../config/validators/ZudokuConfig.js";
+
+/**
+ * APIToGo brand theme for per-site overrides via apitogo.config.
+ * Keep in sync with defaultTheme.css (full palette including sidebar/chart tokens).
+ */
+export const apitogoBrandTheme: NonNullable<ZudokuConfig["theme"]> = {
+  fonts: {
+    sans: "IBM Plex Sans",
+    mono: "JetBrains Mono",
+  },
+  light: {
+    background: "#F5F6F9",
+    foreground: "#0E1016",
+    card: "#FFFFFF",
+    cardForeground: "#0E1016",
+    primary: "#E11D2A",
+    primaryForeground: "#ffffff",
+    secondary: "#FAFBFC",
+    secondaryForeground: "#0E1016",
+    muted: "#FAFBFC",
+    mutedForeground: "#565E70",
+    accent: "rgba(225, 29, 42, 0.08)",
+    accentForeground: "#E11D2A",
+    border: "#E6E8EF",
+    input: "#D6DAE3",
+    ring: "#E11D2A",
+  },
+  dark: {
+    background: "#0B0D12",
+    foreground: "#EDEFF5",
+    card: "#14171F",
+    cardForeground: "#EDEFF5",
+    primary: "#F23645",
+    primaryForeground: "#ffffff",
+    secondary: "#191D27",
+    secondaryForeground: "#EDEFF5",
+    muted: "#191D27",
+    mutedForeground: "#A6AEBF",
+    accent: "rgba(242, 54, 69, 0.13)",
+    accentForeground: "#F23645",
+    border: "#252B37",
+    input: "#333A48",
+    ring: "#F23645",
+  },
+};

package/src/app/defaultTheme.css

@@ -1,77 +1,77 @@
 /**
- * Default theme for Zudoku. Based on shadcn/ui zinc base colors.
- * See: https://ui.shadcn.com/docs/theming#zinc
+ * Default APIToGo brand theme for scaffolded sites.
+ * Color tokens sourced from webapp-template/APIToGo.dc.html (:root dark + light override).
  */
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
+  --background: #f5f6f9;
+  --foreground: #0e1016;
+  --card: #ffffff;
+  --card-foreground: #0e1016;
+  --popover: #ffffff;
+  --popover-foreground: #0e1016;
+  --primary: #e11d2a;
+  --primary-foreground: #ffffff;
+  --secondary: #fafbfc;
+  --secondary-foreground: #0e1016;
+  --muted: #fafbfc;
+  --muted-foreground: #565e70;
+  --accent: rgba(225, 29, 42, 0.08);
+  --accent-foreground: #e11d2a;
+  --destructive: #e11d2a;
   --warning: oklch(0.84 0.16 84);
   --warning-foreground: oklch(0.47 0.14 46.2);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --border: #e6e8ef;
+  --input: #d6dae3;
+  --ring: #e11d2a;
+  --chart-1: #e11d2a;
+  --chart-2: #0e9e63;
+  --chart-3: #4e5ac0;
+  --chart-4: #8a92a3;
+  --chart-5: #565e70;
+  --sidebar: #ffffff;
+  --sidebar-foreground: #0e1016;
+  --sidebar-primary: #e11d2a;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #fafbfc;
+  --sidebar-accent-foreground: #0e1016;
+  --sidebar-border: #e6e8ef;
+  --sidebar-ring: #e11d2a;
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
+  --background: #0b0d12;
+  --foreground: #edeff5;
+  --card: #14171f;
+  --card-foreground: #edeff5;
+  --popover: #1d222d;
+  --popover-foreground: #edeff5;
+  --primary: #f23645;
+  --primary-foreground: #ffffff;
+  --secondary: #191d27;
+  --secondary-foreground: #edeff5;
+  --muted: #191d27;
+  --muted-foreground: #a6aebf;
+  --accent: rgba(242, 54, 69, 0.13);
+  --accent-foreground: #f23645;
+  --destructive: #f23645;
   --warning: oklch(0.41 0.11 46);
   --warning-foreground: oklch(0.99 0.02 95);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --border: #252b37;
+  --input: #333a48;
+  --ring: #f23645;
+  --chart-1: #f23645;
+  --chart-2: #16c784;
+  --chart-3: #aeb9e8;
+  --chart-4: #6b7385;
+  --chart-5: #a6aebf;
+  --sidebar: #0e1119;
+  --sidebar-foreground: #edeff5;
+  --sidebar-primary: #f23645;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #191d27;
+  --sidebar-accent-foreground: #edeff5;
+  --sidebar-border: #252b37;
+  --sidebar-ring: #f23645;
 }

package/src/app/main.css

@@ -49,6 +49,7 @@
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
   --font-serif: var(--font-serif);
+  --font-heading: var(--font-heading);
 }
 
 @utility prose {
@@ -161,6 +162,15 @@
       "calt" 1;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+  }
+
   ::selection {
     background: var(--color-primary);
     color: var(--color-primary-foreground);

package/src/config/apitogo-config-core.ts

@@ -452,6 +452,15 @@ function syncAuthentication(normalized: ApitogoJsonConfig): void {
     if (!Array.isArray(auth.providers)) {
       auth.providers = [];
     }
+
+    const topLevelDemoMode = normalized.demoMode;
+    if (auth.demoMode === undefined) {
+      auth.demoMode = topLevelDemoMode !== false;
+    }
+  }
+
+  if (normalized.demoMode !== undefined) {
+    auth.demoMode = normalized.demoMode !== false;
   }
 
   normalized.authentication = auth;

package/src/config/validators/ZudokuConfig.ts

@@ -494,6 +494,7 @@ const AuthenticationSchema = z.discriminatedUnion("type", [
   z.object({
     type: z.literal("dev-portal").optional().default("dev-portal"),
     apiBaseUrl: z.string().optional(),
+    demoMode: z.boolean().optional(),
     native: z
       .object({
         enabled: z.boolean().optional(),

package/src/index.ts

@@ -71,6 +71,7 @@ export {
   type ProblemJson,
   throwIfProblemJson,
 } from "./lib/util/problemJson.js";
+export { apitogoBrandTheme } from "./app/apitogoBrandTheme.js";
 export { buildApitogoConfig } from "./config/build-apitogo-config.js";
 export {
   APITOGO_CONFIG_FILENAME,

package/src/lib/authentication/hook.ts

@@ -74,11 +74,20 @@ export const useAuth = () => {
 
   useRefreshUserProfile();
 
+  const providerData = authState.providerData as
+    | { isDemoSession?: boolean; demoMode?: boolean }
+    | null
+    | undefined;
+  const isDemoSession = providerData?.isDemoSession === true;
+  const isDemoMode = providerData?.demoMode === true;
+
   return {
     isAuthEnabled,
     ...authState,
     isBackendAvailable: authState.isBackendAvailable,
     authMode: authState.authMode,
+    isDemoSession,
+    isDemoMode,
     hasDistinctSignUpFlow: authentication?.hasDistinctSignUpFlow?.() ?? true,
 
     login: async (options?: AuthActionOptions) => {

package/src/lib/authentication/providers/dev-portal-auth-pages.tsx

@@ -12,10 +12,17 @@ import { Label } from "@lukoweb/apitogo/ui/Label.js";
 import { useCallback, useEffect, useState } from "react";
 import { Link, useSearchParams } from "react-router";
 import type { DevPortalAuthConfigResponse } from "./dev-portal-constants.js";
+import {
+  DEMO_EMAIL,
+  DEMO_PASSWORD,
+  activateDemoSession,
+  isDemoCredential,
+} from "./dev-portal-demo.js";
 import {
   buildDevPortalOidcChallengeUrl,
   fetchDevPortalAuthConfig,
   isNativeAuthEnabled,
+  isPlaceholderDevPortalApiUrl,
   postDevPortalAuth,
   resolveDevPortalApiBaseUrl,
   toAbsoluteReturnUrl,
@@ -100,20 +107,60 @@ function OidcProviderButtons({
   );
 }
 
-export function DevPortalLoginPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
+function DemoLoginHint() {
+  return (
+    <div className="rounded-lg border border-dashed bg-muted/30 p-3 text-sm text-muted-foreground">
+      <p className="font-medium text-foreground">Local demo sign-in</p>
+      <p className="mt-1">
+        Use <code className="rounded bg-muted px-1 py-0.5">{DEMO_EMAIL}</code>{" "}
+        with password{" "}
+        <code className="rounded bg-muted px-1 py-0.5">{DEMO_PASSWORD}</code> to
+        explore the account area without a dev-portal backend.
+      </p>
+    </div>
+  );
+}
+
+export function DevPortalLoginPage({
+  apiBaseUrl,
+  demoMode = false,
+}: {
+  apiBaseUrl?: string;
+  demoMode?: boolean;
+}) {
   const baseUrl = useApiBaseUrl(apiBaseUrl);
   const returnUrl = useReturnUrl();
   const [config, setConfig] = useState<DevPortalAuthConfigResponse | null>(
     null,
   );
-  const [configLoading, setConfigLoading] = useState(true);
+  const [configLoading, setConfigLoading] = useState(
+    Boolean(baseUrl) && !isPlaceholderDevPortalApiUrl(baseUrl),
+  );
   const [configError, setConfigError] = useState<string | null>(null);
+  const [useDemoFallback, setUseDemoFallback] = useState(
+    demoMode && (!baseUrl || isPlaceholderDevPortalApiUrl(baseUrl)),
+  );
+  const demoAuthAvailable = demoMode && useDemoFallback;
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [pending, setPending] = useState(false);
 
   useEffect(() => {
+    if (!demoMode) {
+      setUseDemoFallback(false);
+    } else if (!baseUrl || isPlaceholderDevPortalApiUrl(baseUrl)) {
+      setUseDemoFallback(true);
+    }
+  }, [baseUrl, demoMode]);
+
+  useEffect(() => {
+    if (demoAuthAvailable) {
+      setConfig({ native: { enabled: true }, email: null, providers: [] });
+      setConfigLoading(false);
+      return;
+    }
+
     if (!baseUrl) return;
     setConfigLoading(true);
     setConfigError(null);
@@ -123,20 +170,41 @@ export function DevPortalLoginPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
         setConfigLoading(false);
       })
       .catch(() => {
+        if (demoMode) {
+          setUseDemoFallback(true);
+          setConfig({ native: { enabled: true }, email: null, providers: [] });
+          setConfigLoading(false);
+          setConfigError(null);
+          return;
+        }
+
         setConfig(null);
         setConfigLoading(false);
         setConfigError(
           `Could not reach the dev portal API at ${baseUrl}. If you use a local HTTPS certificate, open ${baseUrl}/api/v1/auth/status in your browser first to trust it.`,
         );
       });
-  }, [baseUrl]);
+  }, [baseUrl, demoAuthAvailable, demoMode]);
 
   const onSubmit = useCallback(
     async (event: React.FormEvent) => {
       event.preventDefault();
-      if (!baseUrl) return;
       setPending(true);
       setError(null);
+
+      if (demoAuthAvailable) {
+        if (!isDemoCredential(email, password)) {
+          setError("Invalid demo credentials.");
+          setPending(false);
+          return;
+        }
+
+        activateDemoSession(baseUrl);
+        window.location.assign(toAbsoluteReturnUrl(returnUrl));
+        return;
+      }
+
+      if (!baseUrl) return;
       try {
         await postDevPortalAuth(baseUrl, "/api/v1/auth/login", {
           email,
@@ -149,10 +217,10 @@ export function DevPortalLoginPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
         setPending(false);
       }
     },
-    [baseUrl, email, password, returnUrl],
+    [baseUrl, demoAuthAvailable, email, password, returnUrl],
   );
 
-  if (!baseUrl) {
+  if (!baseUrl && !demoAuthAvailable) {
     return (
       <AuthPageShell
         title="Sign in"
@@ -167,7 +235,8 @@ export function DevPortalLoginPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
 
   return (
     <AuthPageShell title="Sign in" description="Access your developer account.">
-      {isNativeAuthEnabled(config) ? (
+      {demoAuthAvailable ? <DemoLoginHint /> : null}
+      {isNativeAuthEnabled(config) || demoAuthAvailable ? (
         <form className="space-y-4" onSubmit={onSubmit}>
           <div className="space-y-2">
             <Label htmlFor="email">Email</Label>
@@ -211,12 +280,14 @@ export function DevPortalLoginPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
           </div>
         </form>
       ) : null}
-      {configError ? <AuthError message={configError} /> : null}
+      {configError && !demoAuthAvailable ? (
+        <AuthError message={configError} />
+      ) : null}
       {configLoading ? (
         <div className="flex justify-center">
           <Spinner />
         </div>
-      ) : config ? (
+      ) : config && !demoAuthAvailable ? (
         <>
           <OidcProviderButtons
             apiBaseUrl={baseUrl}

package/src/lib/authentication/providers/dev-portal-demo.ts

@@ -0,0 +1,153 @@
+import type { DevPortalAuthenticationConfig } from "../../../config/config.js";
+import type { UserProfile } from "../state.js";
+import { useAuthState } from "../state.js";
+import type { EndUserMeResponse } from "./dev-portal-constants.js";
+
+export const DEMO_EMAIL = "demo@apitogo.local";
+export const DEMO_PASSWORD = "password";
+export const DEMO_USER_ID = "00000000-0000-0000-0000-000000000001";
+export const DEMO_DISPLAY_NAME = "Demo User";
+export const DEMO_SUBSCRIPTION_KEY = "demo-subscription-key";
+
+const DEMO_SESSION_STORAGE_KEY = "apitogo-demo-session";
+
+export type DemoPlanInput = {
+  sku: string;
+  displayName?: string;
+};
+
+export function resolveDemoMode(
+  config: Pick<DevPortalAuthenticationConfig, "demoMode">,
+): boolean {
+  if (typeof import.meta !== "undefined" && !import.meta.env.DEV) {
+    return false;
+  }
+
+  return config.demoMode !== false;
+}
+
+export function isDemoCredential(email: string, password: string): boolean {
+  return (
+    email.trim().toLowerCase() === DEMO_EMAIL && password === DEMO_PASSWORD
+  );
+}
+
+export function createDemoProfile(): UserProfile {
+  return {
+    sub: DEMO_USER_ID,
+    email: DEMO_EMAIL,
+    emailVerified: true,
+    name: DEMO_DISPLAY_NAME,
+    pictureUrl: undefined,
+  };
+}
+
+export function resolveDemoPlanSku(plans: DemoPlanInput[] | undefined): string {
+  const first = plans?.[0];
+  return first?.sku ?? "free";
+}
+
+export function createDemoMeResponse(
+  plans?: DemoPlanInput[],
+): EndUserMeResponse {
+  const planSku = resolveDemoPlanSku(plans);
+  const periodEnd = new Date();
+  periodEnd.setMonth(periodEnd.getMonth() + 1);
+
+  return {
+    userId: DEMO_USER_ID,
+    displayName: DEMO_DISPLAY_NAME,
+    email: DEMO_EMAIL,
+    emailVerified: true,
+    subscriptions: [
+      {
+        planSku,
+        status: "Active",
+        entitlementState: "active",
+        currentPeriodEnd: periodEnd.toISOString(),
+      },
+    ],
+  };
+}
+
+export type DemoCredentialsResponse = {
+  idToken: string;
+  accessToken: string | null;
+  subscriptionKey: string;
+  gatewayBaseUrl: string | null;
+  planSku: string;
+  expiresAt: string | null;
+};
+
+export function createDemoCredentials(
+  plans?: DemoPlanInput[],
+): DemoCredentialsResponse {
+  const planSku = resolveDemoPlanSku(plans);
+
+  return {
+    idToken: "demo-id-token",
+    accessToken: null,
+    subscriptionKey: DEMO_SUBSCRIPTION_KEY,
+    gatewayBaseUrl: null,
+    planSku,
+    expiresAt: null,
+  };
+}
+
+export function readDemoSession(): boolean {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  try {
+    return localStorage.getItem(DEMO_SESSION_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+export function writeDemoSession(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    localStorage.setItem(DEMO_SESSION_STORAGE_KEY, "1");
+  } catch {
+    // ignore quota / privacy errors
+  }
+}
+
+export function clearDemoSession(): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    localStorage.removeItem(DEMO_SESSION_STORAGE_KEY);
+  } catch {
+    // ignore
+  }
+}
+
+export function activateDemoSession(apiBaseUrl?: string): void {
+  writeDemoSession();
+
+  const profile = createDemoProfile();
+
+  useAuthState.setState({
+    isAuthenticated: true,
+    isPending: false,
+    sessionChecked: true,
+    profile,
+    providerData: {
+      type: "dev-portal",
+      apiBaseUrl: apiBaseUrl ?? "",
+      authMode: "preview",
+      isDemoSession: true,
+      demoMode: true,
+    },
+    isBackendAvailable: false,
+    authMode: "preview",
+  });
+}

package/src/lib/authentication/providers/dev-portal.tsx

@@ -23,6 +23,12 @@ import type {
   DevPortalAuthMode,
   EndUserMeResponse,
 } from "./dev-portal-constants.js";
+import {
+  clearDemoSession,
+  readDemoSession,
+  resolveDemoMode,
+  activateDemoSession,
+} from "./dev-portal-demo.js";
 import {
   buildDevPortalLogoutUrl,
   isNativeAuthEnabled,
@@ -37,6 +43,8 @@ export type DevPortalProviderData = {
   type: "dev-portal";
   apiBaseUrl: string;
   authMode: DevPortalAuthMode;
+  isDemoSession?: boolean;
+  demoMode?: boolean;
 };
 
 declare module "../state.js" {
@@ -50,6 +58,7 @@ export class DevPortalAuthenticationProvider
   implements AuthenticationPlugin
 {
   private readonly apiBaseUrl: string | undefined;
+  private readonly demoMode: boolean;
   private readonly redirectToAfterSignIn: string | undefined;
   private readonly redirectToAfterSignUp: string | undefined;
   private readonly redirectToAfterSignOut: string;
@@ -61,19 +70,24 @@ export class DevPortalAuthenticationProvider
 
   constructor({
     apiBaseUrl,
+    demoMode,
     redirectToAfterSignIn,
     redirectToAfterSignUp,
     redirectToAfterSignOut = "/",
   }: DevPortalAuthenticationConfig) {
     super();
     this.apiBaseUrl = resolveDevPortalApiBaseUrl({ apiBaseUrl });
+    this.demoMode = resolveDemoMode({ demoMode });
     this.redirectToAfterSignIn = redirectToAfterSignIn;
     this.redirectToAfterSignUp = redirectToAfterSignUp;
     this.redirectToAfterSignOut = redirectToAfterSignOut;
   }
 
   getRoutes() {
-    const pageProps = { apiBaseUrl: this.apiBaseUrl };
+    const pageProps = {
+      apiBaseUrl: this.apiBaseUrl,
+      demoMode: this.demoMode,
+    };
     return [
       ...super.getRoutes(),
       { path: "/login", element: <DevPortalLoginPage {...pageProps} /> },
@@ -112,6 +126,11 @@ export class DevPortalAuthenticationProvider
       }
     }
     if (!this.backendAvailable) {
+      if (this.demoMode && readDemoSession()) {
+        this.setDemoAuthenticatedState();
+        return;
+      }
+
       this.setPreviewState();
       return;
     }
@@ -127,6 +146,11 @@ export class DevPortalAuthenticationProvider
     await waitForAuthStateHydration();
     await this.syncBackendAvailability();
     if (!this.backendAvailable) {
+      if (this.demoMode && readDemoSession()) {
+        this.setDemoAuthenticatedState();
+        return;
+      }
+
       this.setPreviewState();
       return;
     }
@@ -154,15 +178,31 @@ export class DevPortalAuthenticationProvider
             type: "dev-portal",
             apiBaseUrl: this.apiBaseUrl,
             authMode: "preview",
+            demoMode: this.demoMode,
           }
-        : null,
+        : this.demoMode
+          ? {
+              type: "dev-portal",
+              apiBaseUrl: "",
+              authMode: "preview",
+              demoMode: true,
+            }
+          : null,
       isBackendAvailable: false,
       authMode: "preview",
     });
   }
 
+  private setDemoAuthenticatedState(): void {
+    activateDemoSession(this.apiBaseUrl);
+  }
+
   private ensureConfiguredBackend(): string {
     if (!this.apiBaseUrl || isPlaceholderDevPortalApiUrl(this.apiBaseUrl)) {
+      if (this.demoMode) {
+        return "";
+      }
+
       throw new Error("Dev portal authentication is not available in preview.");
     }
 
@@ -182,12 +222,22 @@ export class DevPortalAuthenticationProvider
   }
 
   private async refreshUserProfileInternal(): Promise<boolean> {
+    if (this.demoMode && readDemoSession() && !this.backendAvailable) {
+      this.setDemoAuthenticatedState();
+      return true;
+    }
+
     if (!this.apiBaseUrl) {
       this.setPreviewState();
       return false;
     }
 
     if (isPlaceholderDevPortalApiUrl(this.apiBaseUrl)) {
+      if (this.demoMode && readDemoSession()) {
+        this.setDemoAuthenticatedState();
+        return true;
+      }
+
       this.setPreviewState();
       return false;
     }
@@ -195,6 +245,11 @@ export class DevPortalAuthenticationProvider
     await waitForAuthStateHydration();
     await this.syncBackendAvailability();
     if (!this.backendAvailable) {
+      if (this.demoMode && readDemoSession()) {
+        this.setDemoAuthenticatedState();
+        return true;
+      }
+
       this.setPreviewState();
       return false;
     }
@@ -229,6 +284,7 @@ export class DevPortalAuthenticationProvider
             type: "dev-portal",
             apiBaseUrl: this.apiBaseUrl,
             authMode: "live",
+            demoMode: this.demoMode,
           },
           isBackendAvailable: true,
           authMode: "live",
@@ -257,6 +313,7 @@ export class DevPortalAuthenticationProvider
           type: "dev-portal",
           apiBaseUrl: this.apiBaseUrl,
           authMode: "live",
+          demoMode: this.demoMode,
         },
         isBackendAvailable: true,
         authMode: "live",
@@ -276,6 +333,15 @@ export class DevPortalAuthenticationProvider
     _: AuthActionContext,
     { redirectTo }: AuthActionOptions = {},
   ): Promise<void> {
+    if (!this.backendAvailable && this.demoMode) {
+      const target =
+        redirectTo ?? this.redirectToAfterSignIn ?? window.location.href;
+      const url = new URL("/login", window.location.origin);
+      url.searchParams.set("redirect", toAbsoluteReturnUrl(target));
+      window.location.assign(url.toString());
+      return;
+    }
+
     this.ensureConfiguredBackend();
     const target =
       redirectTo ?? this.redirectToAfterSignIn ?? window.location.href;
@@ -288,6 +354,15 @@ export class DevPortalAuthenticationProvider
     _: AuthActionContext,
     { redirectTo }: AuthActionOptions = {},
   ): Promise<void> {
+    if (!this.backendAvailable && this.demoMode) {
+      const target =
+        redirectTo ?? this.redirectToAfterSignUp ?? window.location.href;
+      const url = new URL("/register", window.location.origin);
+      url.searchParams.set("redirect", toAbsoluteReturnUrl(target));
+      window.location.assign(url.toString());
+      return;
+    }
+
     this.ensureConfiguredBackend();
     const target =
       redirectTo ?? this.redirectToAfterSignUp ?? window.location.href;
@@ -297,6 +372,17 @@ export class DevPortalAuthenticationProvider
   }
 
   async signOut(_: AuthActionContext): Promise<void> {
+    const providerData = useAuthState.getState().providerData as
+      | DevPortalProviderData
+      | null
+      | undefined;
+
+    if (providerData?.isDemoSession || (this.demoMode && readDemoSession())) {
+      clearDemoSession();
+      this.setPreviewState();
+      return;
+    }
+
     const apiBaseUrl = this.ensureConfiguredBackend();
     window.location.assign(
       buildDevPortalLogoutUrl(apiBaseUrl, this.redirectToAfterSignOut),
@@ -304,12 +390,21 @@ export class DevPortalAuthenticationProvider
   }
 
   hasDistinctSignUpFlow(): boolean {
+    if (this.demoMode && !this.backendAvailable) {
+      return true;
+    }
+
     return this.authConfigNativeEnabled !== false;
   }
 
   async signRequest(request: Request): Promise<Request> {
     return request;
   }
+
+  /** Called from the login page after successful demo credential check. */
+  completeDemoLogin(): void {
+    activateDemoSession(this.apiBaseUrl);
+  }
 }
 
 const devPortalAuth: AuthenticationProviderInitializer<

package/src/lib/core/RouteGuard.tsx

@@ -171,13 +171,14 @@ export const RouteGuard = () => {
   const redirectTo = isBlocked
     ? blocker.location.pathname + blocker.location.search
     : location.pathname + location.search;
+  const canPromptForSignIn = auth.isBackendAvailable || auth.isDemoMode;
   const showDialog =
-    auth.isBackendAvailable && needsAuth && auth.hasDistinctSignUpFlow;
+    canPromptForSignIn && needsAuth && auth.hasDistinctSignUpFlow;
   const unifiedRedirectKeyRef = useRef<string | null>(null);
 
   useEffect(() => {
     if (
-      !auth.isBackendAvailable ||
+      !canPromptForSignIn ||
       auth.isPending ||
       !auth.sessionChecked ||
       !needsAuth ||
@@ -195,7 +196,7 @@ export const RouteGuard = () => {
     unifiedRedirectKeyRef.current = redirectTo;
     void auth.login({ redirectTo });
   }, [
-    auth.isBackendAvailable,
+    canPromptForSignIn,
     auth.isPending,
     auth.sessionChecked,
     auth.hasDistinctSignUpFlow,
@@ -238,7 +239,8 @@ export const RouteGuard = () => {
     isProtectedRoute &&
     needsToSignIn &&
     auth.isAuthEnabled &&
-    !auth.isBackendAvailable
+    !auth.isBackendAvailable &&
+    !auth.isDemoSession
   ) {
     return <ProductionUnlockPage />;
   }

package/src/vite/plugin-theme.ts

@@ -125,12 +125,17 @@ const processFontConfig = (fontConfig?: FontConfig) => {
   };
 };
 
+const DEFAULT_FONT_SANS = '"IBM Plex Sans", system-ui, sans-serif';
+const DEFAULT_FONT_MONO = '"JetBrains Mono", monospace';
+const DEFAULT_FONT_HEADING = '"Space Grotesk", system-ui, sans-serif';
+
 const processFonts = async (themeConfig: ZudokuConfig["theme"]) => {
   const imports: string[] = [];
   const families = {
-    sans: "Geist, sans-serif",
+    sans: DEFAULT_FONT_SANS,
     serif: undefined as string | undefined,
-    mono: '"Geist Mono", monospace',
+    mono: DEFAULT_FONT_MONO,
+    heading: DEFAULT_FONT_HEADING,
   };
 
   // Process user fonts
@@ -181,23 +186,19 @@ const processFonts = async (themeConfig: ZudokuConfig["theme"]) => {
 
   // Determine final font families with priority: user > registry > defaults
   families.sans =
-    userFonts.sans.fontFamily || registryFonts.sans || "Geist, sans-serif";
+    userFonts.sans.fontFamily || registryFonts.sans || DEFAULT_FONT_SANS;
   families.serif = userFonts.serif.fontFamily || registryFonts.serif;
   families.mono =
-    userFonts.mono.fontFamily ||
-    registryFonts.mono ||
-    '"Geist Mono", monospace';
+    userFonts.mono.fontFamily || registryFonts.mono || DEFAULT_FONT_MONO;
 
   // Add default font imports if no user or registry fonts
   if (!userFonts.sans.fontFamily && !registryFonts.sans) {
-    imports.push(getGoogleFontUrl("Geist"));
-  }
-  if (!userFonts.serif.fontFamily && !registryFonts.serif) {
-    imports.push(getGoogleFontUrl("Playfair Display"));
+    imports.push(getGoogleFontUrl("IBM Plex Sans"));
   }
   if (!userFonts.mono.fontFamily && !registryFonts.mono) {
-    imports.push(getGoogleFontUrl("Geist Mono"));
+    imports.push(getGoogleFontUrl("JetBrains Mono"));
   }
+  imports.push(getGoogleFontUrl("Space Grotesk"));
 
   return { imports, families };
 };
@@ -347,6 +348,7 @@ export const viteThemePlugin = (): Plugin => {
       const rootVars = [
         `  --font-sans: ${fonts.families.sans};`,
         `  --font-mono: ${fonts.families.mono};`,
+        `  --font-heading: ${fonts.families.heading};`,
       ];
 
       if (fonts.families.serif) {