@frontmcp/auth 1.10.16 → 1.11.0-rc.1

package/browser/session/vault-encryption.mjs

@@ -0,0 +1,187 @@
+// libs/auth/src/session/vault-encryption.ts
+import { z } from "@frontmcp/lazy-zod";
+import {
+  base64urlDecode,
+  base64urlEncode,
+  decryptAesGcm,
+  encryptAesGcm,
+  hkdfSha256,
+  randomBytes
+} from "@frontmcp/utils";
+var encryptedDataSchema = z.object({
+  /** Version for future algorithm changes */
+  v: z.literal(1),
+  /** Algorithm identifier */
+  alg: z.literal("aes-256-gcm"),
+  /** Initialization vector (base64) */
+  iv: z.string(),
+  /** Ciphertext (base64) */
+  ct: z.string(),
+  /** Authentication tag (base64) */
+  tag: z.string()
+});
+var VaultEncryption = class {
+  pepper;
+  hkdfInfo;
+  constructor(config = {}) {
+    this.pepper = new TextEncoder().encode(config.pepper ?? "");
+    this.hkdfInfo = config.hkdfInfo ?? "frontmcp-vault-v1";
+  }
+  /**
+   * Derive an encryption key from JWT claims
+   *
+   * The key derivation uses HKDF:
+   * 1. Combine jti + vaultKey + sub + iat + pepper as IKM
+   * 2. Apply HKDF-SHA256 to derive a 256-bit key
+   *
+   * @param claims - JWT claims containing key material
+   * @returns 32-byte encryption key as Uint8Array
+   */
+  async deriveKey(claims) {
+    const ikmParts = [
+      claims.jti,
+      claims.vaultKey ?? "",
+      claims.sub,
+      claims.iat.toString(),
+      new TextDecoder().decode(this.pepper)
+    ];
+    const ikm = new TextEncoder().encode(ikmParts.join(""));
+    const infoBytes = new TextEncoder().encode(this.hkdfInfo);
+    const key = await hkdfSha256(ikm, new Uint8Array(0), infoBytes, 32);
+    return key;
+  }
+  /**
+   * Derive a key directly from the raw JWT token string
+   *
+   * This is useful when you want to derive the key from the token
+   * before or without fully parsing the claims. Uses the token's
+   * signature portion as additional entropy.
+   *
+   * @param token - The raw JWT token string
+   * @param claims - Parsed JWT claims
+   * @returns 32-byte encryption key as Uint8Array
+   */
+  async deriveKeyFromToken(token, claims) {
+    const parts = token.split(".");
+    const signature = parts[2] ?? "";
+    const ikmParts = [
+      claims.jti,
+      claims.vaultKey ?? "",
+      claims.sub,
+      claims.iat.toString(),
+      signature,
+      new TextDecoder().decode(this.pepper)
+    ];
+    const ikm = new TextEncoder().encode(ikmParts.join(""));
+    const infoBytes = new TextEncoder().encode(this.hkdfInfo);
+    const key = await hkdfSha256(ikm, new Uint8Array(0), infoBytes, 32);
+    return key;
+  }
+  /**
+   * Encrypt plaintext data using AES-256-GCM
+   *
+   * @param plaintext - Data to encrypt (typically JSON string)
+   * @param key - 32-byte encryption key from deriveKey()
+   * @returns Encrypted data object (safe to store in Redis)
+   */
+  async encrypt(plaintext, key) {
+    if (key.length !== 32) {
+      throw new Error("Encryption key must be 32 bytes");
+    }
+    const iv = randomBytes(12);
+    const { ciphertext, tag } = await encryptAesGcm(key, new TextEncoder().encode(plaintext), iv);
+    return {
+      v: 1,
+      alg: "aes-256-gcm",
+      iv: base64urlEncode(iv),
+      ct: base64urlEncode(ciphertext),
+      tag: base64urlEncode(tag)
+    };
+  }
+  /**
+   * Decrypt encrypted data using AES-256-GCM
+   *
+   * @param encrypted - Encrypted data object from encrypt()
+   * @param key - 32-byte encryption key from deriveKey()
+   * @returns Decrypted plaintext
+   * @throws Error if decryption fails (wrong key, tampered data, etc.)
+   */
+  async decrypt(encrypted, key) {
+    if (key.length !== 32) {
+      throw new Error("Encryption key must be 32 bytes");
+    }
+    const parsed = encryptedDataSchema.safeParse(encrypted);
+    if (!parsed.success) {
+      throw new Error("Invalid encrypted data format");
+    }
+    const { iv, ct, tag } = parsed.data;
+    const ivBuffer = base64urlDecode(iv);
+    const ciphertext = base64urlDecode(ct);
+    const tagBuffer = base64urlDecode(tag);
+    try {
+      const plaintext = await decryptAesGcm(key, ciphertext, ivBuffer, tagBuffer);
+      return new TextDecoder().decode(plaintext);
+    } catch (_error) {
+      throw new Error("Decryption failed: invalid key or corrupted data");
+    }
+  }
+  /**
+   * Encrypt a JavaScript object (serializes to JSON first)
+   *
+   * @param data - Object to encrypt
+   * @param key - Encryption key
+   * @returns Encrypted data
+   */
+  async encryptObject(data, key) {
+    return this.encrypt(JSON.stringify(data), key);
+  }
+  /**
+   * Decrypt and parse a JavaScript object
+   *
+   * @param encrypted - Encrypted data
+   * @param key - Encryption key
+   * @returns Decrypted and parsed object
+   */
+  async decryptObject(encrypted, key) {
+    const plaintext = await this.decrypt(encrypted, key);
+    return JSON.parse(plaintext);
+  }
+  /**
+   * Check if data is in encrypted format
+   *
+   * @param data - Data to check
+   * @returns True if data appears to be encrypted
+   */
+  isEncrypted(data) {
+    return encryptedDataSchema.safeParse(data).success;
+  }
+};
+var encryptedVaultEntrySchema = z.object({
+  /** Vault ID (maps to JWT jti claim) */
+  id: z.string(),
+  /** User subject identifier */
+  userSub: z.string(),
+  /** User email (unencrypted for display) */
+  userEmail: z.string().optional(),
+  /** User name (unencrypted for display) */
+  userName: z.string().optional(),
+  /** Client ID that created this session */
+  clientId: z.string(),
+  /** Creation timestamp */
+  createdAt: z.number(),
+  /** Last access timestamp */
+  lastAccessAt: z.number(),
+  /** Encrypted sensitive data (provider tokens, credentials, consent) */
+  encryptedData: encryptedDataSchema,
+  /** Apps that are fully authorized (unencrypted for quick lookup) */
+  authorizedAppIds: z.array(z.string()),
+  /** Apps that were skipped (unencrypted for quick lookup) */
+  skippedAppIds: z.array(z.string()),
+  /** Pending auth IDs (unencrypted for lookup, actual URLs encrypted) */
+  pendingAuthIds: z.array(z.string()).default([])
+});
+export {
+  VaultEncryption,
+  encryptedDataSchema,
+  encryptedVaultEntrySchema
+};

package/browser/session/vercel-kv-session.store.mjs

@@ -0,0 +1,230 @@
+// libs/auth/src/session/vercel-kv-session.store.ts
+import { randomUUID, VercelKvStorageAdapter } from "@frontmcp/utils";
+import { SessionIdEmptyError } from "../errors/auth-internal.errors.mjs";
+import { signSession, verifyOrParseSession } from "./session-crypto.mjs";
+import { SessionRateLimiter } from "./session-rate-limiter.mjs";
+import {
+  storedSessionSchema
+} from "./transport-session.types.mjs";
+var VercelKvSessionStore = class {
+  storage;
+  keyPrefix;
+  defaultTtlMs;
+  logger;
+  // Security features
+  security;
+  rateLimiter;
+  constructor(config, logger) {
+    this.keyPrefix = config.keyPrefix ?? "mcp:session:";
+    this.defaultTtlMs = config.defaultTtlMs ?? 36e5;
+    this.logger = logger;
+    this.security = ("security" in config ? config.security : void 0) ?? {};
+    if (this.security.enableRateLimiting) {
+      this.rateLimiter = new SessionRateLimiter({
+        windowMs: this.security.rateLimiting?.windowMs,
+        maxRequests: this.security.rateLimiting?.maxRequests
+      });
+    }
+    this.storage = new VercelKvStorageAdapter({
+      url: config.url,
+      token: config.token,
+      keyPrefix: this.keyPrefix
+    });
+  }
+  /**
+   * Validate session ID
+   * @throws Error if sessionId is empty
+   */
+  validateSessionId(sessionId) {
+    if (!sessionId || sessionId.trim() === "") {
+      throw new SessionIdEmptyError("VercelKvSessionStore");
+    }
+  }
+  /**
+   * Connect to Vercel KV
+   * Thread-safe: concurrent calls will share the same connection via adapter.
+   */
+  async connect() {
+    await this.storage.connect();
+  }
+  /**
+   * Ensure the storage adapter is connected
+   */
+  async ensureConnected() {
+    await this.storage.connect();
+  }
+  /**
+   * Get a stored session by ID
+   *
+   * Note: Vercel KV doesn't support GETEX, so we use GET + EXPIRE separately.
+   * This is slightly less atomic than Redis GETEX but sufficient for most use cases.
+   *
+   * @param sessionId - The session ID to look up
+   * @param options - Optional parameters for rate limiting
+   * @param options.clientIdentifier - Client identifier (e.g., IP address) for rate limiting.
+   *   When provided, rate limiting is applied per-client to prevent session enumeration.
+   *   If not provided, falls back to sessionId which provides DoS protection per-session.
+   */
+  async get(sessionId, options) {
+    this.validateSessionId(sessionId);
+    if (this.rateLimiter) {
+      const rateLimitKey = options?.clientIdentifier || sessionId;
+      const rateLimitResult = this.rateLimiter.check(rateLimitKey);
+      if (!rateLimitResult.allowed) {
+        this.logger?.warn("[VercelKvSessionStore] Rate limit exceeded for session lookup", {
+          sessionId: sessionId.slice(0, 20),
+          clientIdentifier: options?.clientIdentifier ? options.clientIdentifier.slice(0, 20) : void 0,
+          retryAfterMs: rateLimitResult.retryAfterMs
+        });
+        return null;
+      }
+    }
+    await this.ensureConnected();
+    const raw = await this.storage.get(sessionId);
+    if (!raw) return null;
+    const ttlSeconds = Math.ceil(this.defaultTtlMs / 1e3);
+    this.storage.expire(sessionId, ttlSeconds).catch((err) => {
+      this.logger?.warn("[VercelKvSessionStore] TTL extension failed", {
+        sessionId: sessionId.slice(0, 20),
+        error: err.message
+      });
+    });
+    try {
+      let parsed;
+      if (this.security.enableSigning) {
+        parsed = verifyOrParseSession(raw, { secret: this.security.signingSecret });
+        if (!parsed) {
+          this.logger?.warn("[VercelKvSessionStore] Session signature verification failed", {
+            sessionId: sessionId.slice(0, 20)
+          });
+          this.delete(sessionId).catch(() => void 0);
+          return null;
+        }
+      } else {
+        parsed = JSON.parse(raw);
+      }
+      const result = storedSessionSchema.safeParse(parsed);
+      if (!result.success) {
+        this.logger?.warn("[VercelKvSessionStore] Invalid session format", {
+          sessionId: sessionId.slice(0, 20),
+          errors: result.error.issues.slice(0, 3).map((i) => ({ path: i.path, message: i.message }))
+        });
+        this.delete(sessionId).catch(() => void 0);
+        return null;
+      }
+      const session = result.data;
+      if (session.maxLifetimeAt && session.maxLifetimeAt < Date.now()) {
+        this.logger?.info("[VercelKvSessionStore] Session exceeded max lifetime", {
+          sessionId: sessionId.slice(0, 20),
+          maxLifetimeAt: session.maxLifetimeAt
+        });
+        await this.delete(sessionId);
+        return null;
+      }
+      if (session.session.expiresAt && session.session.expiresAt < Date.now()) {
+        await this.delete(sessionId);
+        return null;
+      }
+      if (session.session.expiresAt) {
+        const ttlMs = Math.min(this.defaultTtlMs, session.session.expiresAt - Date.now());
+        if (ttlMs > 0 && ttlMs < this.defaultTtlMs) {
+          const boundedTtlSeconds = Math.ceil(ttlMs / 1e3);
+          this.storage.expire(sessionId, boundedTtlSeconds).catch((err) => {
+            this.logger?.warn("[VercelKvSessionStore] TTL bound extension failed", {
+              sessionId: sessionId.slice(0, 20),
+              error: err.message
+            });
+          });
+        }
+      }
+      const updatedSession = {
+        ...session,
+        lastAccessedAt: Date.now()
+      };
+      return updatedSession;
+    } catch (error) {
+      this.logger?.warn("[VercelKvSessionStore] Failed to parse session", {
+        sessionId: sessionId.slice(0, 20),
+        error: error.message
+      });
+      this.delete(sessionId).catch(() => void 0);
+      return null;
+    }
+  }
+  /**
+   * Store a session with optional TTL
+   */
+  async set(sessionId, session, ttlMs) {
+    this.validateSessionId(sessionId);
+    await this.ensureConnected();
+    let value;
+    if (this.security.enableSigning) {
+      value = signSession(session, { secret: this.security.signingSecret });
+    } else {
+      value = JSON.stringify(session);
+    }
+    if (ttlMs && ttlMs > 0) {
+      const ttlSeconds = Math.ceil(ttlMs / 1e3);
+      await this.storage.set(sessionId, value, { ttlSeconds });
+    } else if (session.session.expiresAt) {
+      const ttl = session.session.expiresAt - Date.now();
+      if (ttl > 0) {
+        const ttlSeconds = Math.ceil(ttl / 1e3);
+        await this.storage.set(sessionId, value, { ttlSeconds });
+      } else {
+        await this.storage.set(sessionId, value);
+      }
+    } else {
+      await this.storage.set(sessionId, value);
+    }
+  }
+  /**
+   * Delete a session
+   */
+  async delete(sessionId) {
+    this.validateSessionId(sessionId);
+    await this.ensureConnected();
+    await this.storage.delete(sessionId);
+  }
+  /**
+   * Check if a session exists
+   */
+  async exists(sessionId) {
+    this.validateSessionId(sessionId);
+    await this.ensureConnected();
+    return this.storage.exists(sessionId);
+  }
+  /**
+   * Allocate a new session ID
+   */
+  allocId() {
+    return randomUUID();
+  }
+  /**
+   * Disconnect from Vercel KV
+   * Vercel KV uses REST API, so this just clears internal state
+   */
+  async disconnect() {
+    await this.storage.disconnect();
+  }
+  /**
+   * Test Vercel KV connection by checking if we can access the API.
+   * Useful for validating connection on startup.
+   *
+   * @returns true if connection is healthy, false otherwise
+   */
+  async ping() {
+    try {
+      await this.ensureConnected();
+      return this.storage.ping();
+    } catch (error) {
+      this.logger?.error("[VercelKvSessionStore] Connection failed", {
+        error: error.message
+      });
+      return false;
+    }
+  }
+};
+export {
+  VercelKvSessionStore
+};

package/browser/shared-server/index.mjs

@@ -0,0 +1,17 @@
+// libs/auth/src/shared-server/index.ts
+import {
+  createSharedServerNonce,
+  createSharedServerSecret,
+  deriveSharedServerKeys,
+  isSharedServerNonce,
+  proveSharedServerIdentity,
+  verifySharedServerIdentity
+} from "./shared-server-identity.mjs";
+export {
+  createSharedServerNonce,
+  createSharedServerSecret,
+  deriveSharedServerKeys,
+  isSharedServerNonce,
+  proveSharedServerIdentity,
+  verifySharedServerIdentity
+};

package/browser/shared-server/shared-server-identity.mjs

@@ -0,0 +1,55 @@
+// libs/auth/src/shared-server/shared-server-identity.ts
+import {
+  base64urlDecode,
+  base64urlEncode,
+  hkdfSha256,
+  hmacSha256,
+  randomBytes,
+  timingSafeEqual
+} from "@frontmcp/utils";
+var SECRET_BYTES = 32;
+var BASE64URL_32_BYTES = /^[A-Za-z0-9_-]{43}$/;
+var KEY_SALT = "frontmcp shared server";
+var PROOF_LABEL = "frontmcp shared server identity v1";
+var encoder = new TextEncoder();
+function createSharedServerSecret() {
+  return base64urlEncode(randomBytes(SECRET_BYTES));
+}
+function createSharedServerNonce() {
+  return base64urlEncode(randomBytes(SECRET_BYTES));
+}
+function isBase64url32Bytes(value) {
+  return typeof value === "string" && BASE64URL_32_BYTES.test(value);
+}
+function isSharedServerNonce(value) {
+  return isBase64url32Bytes(value);
+}
+function deriveSharedServerKeys(secret) {
+  if (!isBase64url32Bytes(secret)) throw new TypeError("a shared server secret is 32 bytes of base64url");
+  const bytes = base64urlDecode(secret);
+  const salt = encoder.encode(KEY_SALT);
+  return {
+    proofKey: hkdfSha256(bytes, salt, encoder.encode("proof"), 32),
+    token: base64urlEncode(hkdfSha256(bytes, salt, encoder.encode("token"), 32))
+  };
+}
+function proofBytes(proofKey, { endpoint, nonce, version }) {
+  return hmacSha256(proofKey, encoder.encode(JSON.stringify([PROOF_LABEL, endpoint, nonce, version])));
+}
+function proveSharedServerIdentity(proofKey, statement) {
+  return base64urlEncode(proofBytes(proofKey, statement));
+}
+function verifySharedServerIdentity(proofKey, statement, proof) {
+  if (!isBase64url32Bytes(proof)) return false;
+  const expected = proofBytes(proofKey, statement);
+  const presented = base64urlDecode(proof);
+  return presented.length === expected.length && timingSafeEqual(presented, expected);
+}
+export {
+  createSharedServerNonce,
+  createSharedServerSecret,
+  deriveSharedServerKeys,
+  isSharedServerNonce,
+  proveSharedServerIdentity,
+  verifySharedServerIdentity
+};

package/browser/ui/base-layout.mjs

@@ -0,0 +1,184 @@
+// libs/auth/src/ui/base-layout.ts
+import { escapeHtml } from "@frontmcp/utils";
+import { escapeHtml as escapeHtml2 } from "@frontmcp/utils";
+var CDN = {
+  /** Tailwind CSS v4 Browser CDN - generates styles on-the-fly with @theme support */
+  tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
+  /** Google Fonts - Inter for modern UI */
+  fonts: {
+    preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
+    stylesheet: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  }
+};
+var BUILT_IN_AUTH_PAGE_CSP = [
+  "default-src 'self'",
+  "script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net",
+  "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
+  "font-src 'self' https://fonts.gstatic.com",
+  "img-src 'self' data: https:",
+  "connect-src 'self'",
+  "object-src 'none'",
+  "base-uri 'none'",
+  "frame-ancestors 'none'"
+].join("; ");
+function builtInAuthPageHeaders(options = {}) {
+  return {
+    ...options.csp === false ? {} : { "Content-Security-Policy": BUILT_IN_AUTH_PAGE_CSP },
+    "X-Frame-Options": "DENY",
+    "X-Content-Type-Options": "nosniff",
+    "Referrer-Policy": "same-origin",
+    "Cache-Control": "no-store"
+  };
+}
+var DEFAULT_THEME = {
+  colors: {
+    primary: "#3b82f6",
+    // blue-500
+    "primary-dark": "#2563eb",
+    // blue-600
+    secondary: "#8b5cf6",
+    // violet-500
+    accent: "#06b6d4",
+    // cyan-500
+    success: "#22c55e",
+    // green-500
+    warning: "#f59e0b",
+    // amber-500
+    danger: "#ef4444"
+    // red-500
+  },
+  fonts: {
+    sans: 'Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  }
+};
+function buildThemeCss(theme) {
+  const lines = [];
+  if (theme.colors) {
+    for (const [key, value] of Object.entries(theme.colors)) {
+      if (value) {
+        lines.push(`--color-${key}: ${value};`);
+      }
+    }
+  }
+  if (theme.fonts) {
+    for (const [key, value] of Object.entries(theme.fonts)) {
+      if (value) {
+        lines.push(`--font-${key}: ${value};`);
+      }
+    }
+  }
+  if (theme.customVars) {
+    lines.push(theme.customVars);
+  }
+  return lines.join("\n        ");
+}
+function baseLayout(content, options) {
+  const {
+    title,
+    description,
+    includeTailwind = true,
+    includeFonts = true,
+    headExtra = "",
+    bodyClass = "bg-gray-50 min-h-screen font-sans antialiased",
+    theme
+  } = options;
+  const mergedTheme = {
+    colors: { ...DEFAULT_THEME.colors, ...theme?.colors },
+    fonts: { ...DEFAULT_THEME.fonts, ...theme?.fonts },
+    customVars: theme?.customVars,
+    customCss: theme?.customCss
+  };
+  const fontPreconnect = includeFonts ? CDN.fonts.preconnect.map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? " crossorigin" : ""}>`).join("\n  ") : "";
+  const fontStylesheet = includeFonts ? `<link href="${CDN.fonts.stylesheet}" rel="stylesheet">` : "";
+  const themeCss = buildThemeCss(mergedTheme);
+  const customCss = mergedTheme.customCss || "";
+  const tailwindBlock = includeTailwind ? `<script src="${CDN.tailwind}"></script>
+  <style type="text/tailwindcss">
+    @theme {
+      ${themeCss}
+    }
+    ${customCss}
+  </style>` : "";
+  const metaDescription = description ? `<meta name="description" content="${escapeHtml(description)}">` : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)} - FrontMCP</title>
+  ${metaDescription}
+
+  <!-- Google Fonts CDN - Inter (modern UI font) -->
+  ${fontPreconnect}
+  ${fontStylesheet}
+
+  <!-- Tailwind CSS v4 Browser CDN with @theme support -->
+  ${tailwindBlock}
+  ${headExtra}
+</head>
+<body class="${escapeHtml(bodyClass)}">
+  ${content}
+</body>
+</html>`;
+}
+function createLayout(defaultOptions) {
+  return (content, options) => {
+    const mergedTheme = defaultOptions.theme || options.theme ? {
+      colors: { ...defaultOptions.theme?.colors, ...options.theme?.colors },
+      fonts: { ...defaultOptions.theme?.fonts, ...options.theme?.fonts },
+      customVars: options.theme?.customVars ?? defaultOptions.theme?.customVars,
+      customCss: options.theme?.customCss ?? defaultOptions.theme?.customCss
+    } : void 0;
+    return baseLayout(content, {
+      ...defaultOptions,
+      ...options,
+      theme: mergedTheme
+    });
+  };
+}
+var authLayout = createLayout({
+  bodyClass: "bg-gray-50 min-h-screen font-sans antialiased"
+});
+function centeredCardLayout(content, options) {
+  const wrappedContent = `
+  <div class="min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-md">
+      ${content}
+    </div>
+  </div>`;
+  return baseLayout(wrappedContent, {
+    ...options,
+    bodyClass: "bg-gradient-to-br from-primary to-secondary min-h-screen font-sans antialiased"
+  });
+}
+function wideLayout(content, options) {
+  const wrappedContent = `
+  <div class="min-h-screen py-8 px-4">
+    <div class="max-w-2xl mx-auto">
+      ${content}
+    </div>
+  </div>`;
+  return baseLayout(wrappedContent, options);
+}
+function extraWideLayout(content, options) {
+  const wrappedContent = `
+  <div class="min-h-screen py-8 px-4">
+    <div class="max-w-3xl mx-auto">
+      ${content}
+    </div>
+  </div>`;
+  return baseLayout(wrappedContent, options);
+}
+export {
+  BUILT_IN_AUTH_PAGE_CSP,
+  CDN,
+  DEFAULT_THEME,
+  authLayout,
+  baseLayout,
+  builtInAuthPageHeaders,
+  centeredCardLayout,
+  createLayout,
+  escapeHtml2 as escapeHtml,
+  extraWideLayout,
+  wideLayout
+};