@riverbankcms/sdk 0.4.2 → 0.5.0

package/dist/server/{chunk-TNRADRPH.mjs → chunk-LNOUXALA.mjs}

@@ -39,7 +39,7 @@ import {
   testimonialsHeadingFragment,
   textColorStyle,
   uiTransforms
-} from "./chunk-USQF2XTU.mjs";
+} from "./chunk-BYBJA6SP.mjs";
 
 // ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -75,7 +75,14 @@ function getDirectImageUrl(supabaseUrl, storagePath, storageBucket = "media", op
 
 // ../blocks/src/system/runtime/nodes/media.tsx
 import { jsx } from "react/jsx-runtime";
+var _contextSupabaseUrl;
+function setContextSupabaseUrl(url) {
+  _contextSupabaseUrl = url?.replace(/\/$/, "");
+}
 function getSupabaseUrl() {
+  if (_contextSupabaseUrl) {
+    return _contextSupabaseUrl;
+  }
   const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
   if (!url) {
     throw new Error(
@@ -648,8 +655,8 @@ function getLabWhitePoint() {
 var lab2rgb = (...args) => {
   args = unpack_default(args, "lab");
   const [L, a, b] = args;
-  const [x, y, z5] = lab2xyz(L, a, b);
-  const [r2, g, b_] = xyz2rgb(x, y, z5);
+  const [x, y, z7] = lab2xyz(L, a, b);
+  const [r2, g, b_] = xyz2rgb(x, y, z7);
   return [r2, g, b_, args.length > 3 ? args[3] : 1];
 };
 var lab2xyz = (L, a, b) => {
@@ -664,15 +671,15 @@ var lab2xyz = (L, a, b) => {
   const zr = fz3 > kE ? fz3 : (116 * fz - 16) / kK;
   const x = xr * Xn;
   const y = yr * Yn;
-  const z5 = zr * Zn;
-  return [x, y, z5];
+  const z7 = zr * Zn;
+  return [x, y, z7];
 };
 var compand = (linear) => {
   const sign = Math.sign(linear);
   linear = Math.abs(linear);
   return (linear <= 31308e-7 ? linear * 12.92 : 1.055 * Math.pow(linear, 1 / 2.4) - 0.055) * sign;
 };
-var xyz2rgb = (x, y, z5) => {
+var xyz2rgb = (x, y, z7) => {
   const { MtxAdaptMa, MtxAdaptMaI, MtxXYZ2RGB, RefWhiteRGB, Xn, Yn, Zn } = lab_constants_default;
   const As = Xn * MtxAdaptMa.m00 + Yn * MtxAdaptMa.m10 + Zn * MtxAdaptMa.m20;
   const Bs = Xn * MtxAdaptMa.m01 + Yn * MtxAdaptMa.m11 + Zn * MtxAdaptMa.m21;
@@ -680,9 +687,9 @@ var xyz2rgb = (x, y, z5) => {
   const Ad = RefWhiteRGB.X * MtxAdaptMa.m00 + RefWhiteRGB.Y * MtxAdaptMa.m10 + RefWhiteRGB.Z * MtxAdaptMa.m20;
   const Bd = RefWhiteRGB.X * MtxAdaptMa.m01 + RefWhiteRGB.Y * MtxAdaptMa.m11 + RefWhiteRGB.Z * MtxAdaptMa.m21;
   const Cd = RefWhiteRGB.X * MtxAdaptMa.m02 + RefWhiteRGB.Y * MtxAdaptMa.m12 + RefWhiteRGB.Z * MtxAdaptMa.m22;
-  const X1 = (x * MtxAdaptMa.m00 + y * MtxAdaptMa.m10 + z5 * MtxAdaptMa.m20) * (Ad / As);
-  const Y1 = (x * MtxAdaptMa.m01 + y * MtxAdaptMa.m11 + z5 * MtxAdaptMa.m21) * (Bd / Bs);
-  const Z1 = (x * MtxAdaptMa.m02 + y * MtxAdaptMa.m12 + z5 * MtxAdaptMa.m22) * (Cd / Cs);
+  const X1 = (x * MtxAdaptMa.m00 + y * MtxAdaptMa.m10 + z7 * MtxAdaptMa.m20) * (Ad / As);
+  const Y1 = (x * MtxAdaptMa.m01 + y * MtxAdaptMa.m11 + z7 * MtxAdaptMa.m21) * (Bd / Bs);
+  const Z1 = (x * MtxAdaptMa.m02 + y * MtxAdaptMa.m12 + z7 * MtxAdaptMa.m22) * (Cd / Cs);
   const X2 = X1 * MtxAdaptMaI.m00 + Y1 * MtxAdaptMaI.m10 + Z1 * MtxAdaptMaI.m20;
   const Y2 = X1 * MtxAdaptMaI.m01 + Y1 * MtxAdaptMaI.m11 + Z1 * MtxAdaptMaI.m21;
   const Z2 = X1 * MtxAdaptMaI.m02 + Y1 * MtxAdaptMaI.m12 + Z1 * MtxAdaptMaI.m22;
@@ -702,15 +709,15 @@ var lab2rgb_default = lab2rgb;
 // ../../node_modules/.pnpm/chroma-js@3.1.2/node_modules/chroma-js/src/io/lab/rgb2lab.js
 var rgb2lab = (...args) => {
   const [r2, g, b, ...rest] = unpack_default(args, "rgb");
-  const [x, y, z5] = rgb2xyz(r2, g, b);
-  const [L, a, b_] = xyz2lab(x, y, z5);
+  const [x, y, z7] = rgb2xyz(r2, g, b);
+  const [L, a, b_] = xyz2lab(x, y, z7);
   return [L, a, b_, ...rest.length > 0 && rest[0] < 1 ? [rest[0]] : []];
 };
-function xyz2lab(x, y, z5) {
+function xyz2lab(x, y, z7) {
   const { Xn, Yn, Zn, kE, kK } = lab_constants_default;
   const xr = x / Xn;
   const yr = y / Yn;
-  const zr = z5 / Zn;
+  const zr = z7 / Zn;
   const fx = xr > kE ? Math.pow(xr, 1 / 3) : (kK * xr + 16) / 116;
   const fy = yr > kE ? Math.pow(yr, 1 / 3) : (kK * yr + 16) / 116;
   const fz = zr > kE ? Math.pow(zr, 1 / 3) : (kK * zr + 16) / 116;
@@ -729,20 +736,20 @@ var rgb2xyz = (r2, g, b) => {
   const { MtxRGB2XYZ, MtxAdaptMa, MtxAdaptMaI, Xn, Yn, Zn, As, Bs, Cs } = lab_constants_default;
   let x = r2 * MtxRGB2XYZ.m00 + g * MtxRGB2XYZ.m10 + b * MtxRGB2XYZ.m20;
   let y = r2 * MtxRGB2XYZ.m01 + g * MtxRGB2XYZ.m11 + b * MtxRGB2XYZ.m21;
-  let z5 = r2 * MtxRGB2XYZ.m02 + g * MtxRGB2XYZ.m12 + b * MtxRGB2XYZ.m22;
+  let z7 = r2 * MtxRGB2XYZ.m02 + g * MtxRGB2XYZ.m12 + b * MtxRGB2XYZ.m22;
   const Ad = Xn * MtxAdaptMa.m00 + Yn * MtxAdaptMa.m10 + Zn * MtxAdaptMa.m20;
   const Bd = Xn * MtxAdaptMa.m01 + Yn * MtxAdaptMa.m11 + Zn * MtxAdaptMa.m21;
   const Cd = Xn * MtxAdaptMa.m02 + Yn * MtxAdaptMa.m12 + Zn * MtxAdaptMa.m22;
-  let X = x * MtxAdaptMa.m00 + y * MtxAdaptMa.m10 + z5 * MtxAdaptMa.m20;
-  let Y = x * MtxAdaptMa.m01 + y * MtxAdaptMa.m11 + z5 * MtxAdaptMa.m21;
-  let Z = x * MtxAdaptMa.m02 + y * MtxAdaptMa.m12 + z5 * MtxAdaptMa.m22;
+  let X = x * MtxAdaptMa.m00 + y * MtxAdaptMa.m10 + z7 * MtxAdaptMa.m20;
+  let Y = x * MtxAdaptMa.m01 + y * MtxAdaptMa.m11 + z7 * MtxAdaptMa.m21;
+  let Z = x * MtxAdaptMa.m02 + y * MtxAdaptMa.m12 + z7 * MtxAdaptMa.m22;
   X *= Ad / As;
   Y *= Bd / Bs;
   Z *= Cd / Cs;
   x = X * MtxAdaptMaI.m00 + Y * MtxAdaptMaI.m10 + Z * MtxAdaptMaI.m20;
   y = X * MtxAdaptMaI.m01 + Y * MtxAdaptMaI.m11 + Z * MtxAdaptMaI.m21;
-  z5 = X * MtxAdaptMaI.m02 + Y * MtxAdaptMaI.m12 + Z * MtxAdaptMaI.m22;
-  return [x, y, z5];
+  z7 = X * MtxAdaptMaI.m02 + Y * MtxAdaptMaI.m12 + Z * MtxAdaptMaI.m22;
+  return [x, y, z7];
 };
 var rgb2lab_default = rgb2lab;
 
@@ -3071,7 +3078,7 @@ function generateShades(hexColor, name) {
       900: 0.1,
       950: 0.05
     };
-    const lightness = lightnessMap[shadeNumber];
+    const lightness = lightnessMap[shadeNumber] ?? 0.5;
     const shadeColor = base.luminance(lightness).hex();
     return {
       name: shadeName,
@@ -3142,7 +3149,7 @@ function expandPalette(palette) {
   if (base.text) expanded.body = base.text;
   const isDark = base.background ? isBackgroundDark(base.background) : false;
   const isDarkMode = palette.meta?.mode === "dark" || isDark;
-  expanded.mutedText = isDarkMode ? expanded["neutral-600"] : expanded["neutral-500"];
+  expanded.mutedText = isDarkMode ? expanded["neutral-600"] ?? "#666" : expanded["neutral-500"] ?? "#888";
   return expanded;
 }
 
@@ -3210,6 +3217,83 @@ function generateShadowCssVars(theme) {
   };
 }
 
+// ../blocks/src/theme/tokens/resolver.ts
+var TokenResolver = class {
+  constructor(theme) {
+    this.theme = theme;
+  }
+  /**
+   * Resolve a color token to a CSS variable reference wrapped in rgb()
+   *
+   * @param token - Token name (e.g., 'primary-500', 'white', 'text-900')
+   * @returns CSS rgb() function with var reference (e.g., 'rgb(var(--tb-primary-500))')
+   *
+   * Note: CSS variables are stored as RGB channels (e.g., "37 99 235") following Tailwind convention,
+   * so we must wrap them with rgb() to create a valid color value.
+   *
+   * @example
+   * resolver.getColor('primary-500') // => 'rgb(var(--tb-primary-500))'
+   * resolver.getColor('white') // => 'rgb(var(--tb-white))'
+   */
+  getColor(token) {
+    if (!this.tokenExists(token)) {
+      console.warn(
+        `[TokenResolver] Color token "${token}" not found in theme palette. Button may render incorrectly.`
+      );
+    }
+    return `rgb(var(--tb-${token}))`;
+  }
+  /**
+   * Adjust a color token's shade by a given amount
+   *
+   * @param token - Base token (e.g., 'primary-500')
+   * @param amount - Shade adjustment (+100 = darker, -100 = lighter)
+   * @returns Adjusted token name (e.g., 'primary-600')
+   *
+   * @example
+   * resolver.adjustShade('primary-500', 100) // => 'primary-600' (darker)
+   * resolver.adjustShade('primary-500', -100) // => 'primary-400' (lighter)
+   */
+  adjustShade(token, amount) {
+    const parts = token.split("-");
+    if (parts.length < 2) {
+      const newShade2 = Math.max(100, Math.min(900, 500 + amount));
+      return `${token}-${newShade2}`;
+    }
+    const base = parts.slice(0, -1).join("-");
+    const shade = parseInt(parts[parts.length - 1] ?? "", 10);
+    if (isNaN(shade)) {
+      console.warn(
+        `[TokenResolver] Cannot adjust shade for non-shade token "${token}". Returning original token.`
+      );
+      return token;
+    }
+    const newShade = Math.max(100, Math.min(900, shade + amount));
+    return `${base}-${newShade}`;
+  }
+  /**
+   * Check if a token exists in the theme palette
+   *
+   * @param token - Token name to check
+   * @returns True if token exists in theme
+   */
+  tokenExists(token) {
+    const commonTokens = ["white", "black", "transparent"];
+    if (commonTokens.includes(token)) {
+      return true;
+    }
+    const parts = token.split("-");
+    if (parts.length >= 2) {
+      const lastPart = parts[parts.length - 1] ?? "";
+      const shade = parseInt(lastPart, 10);
+      if (!isNaN(shade) && shade >= 100 && shade <= 900 && shade % 100 === 0) {
+        return true;
+      }
+    }
+    return true;
+  }
+};
+
 // ../blocks/src/theme/buttons/effects/presets/background.ts
 var darkenBackgroundEffect = {
   id: "darken-background",
@@ -3217,6 +3301,7 @@ var darkenBackgroundEffect = {
   description: "Darkens the background color on hover",
   category: "background",
   pseudoElement: "none",
+  applicableTo: ["button"],
   customizableOption: {
     name: "amount",
     type: "number",
@@ -3248,6 +3333,7 @@ var lightenBackgroundEffect = {
   description: "Lightens the background color on hover",
   category: "background",
   pseudoElement: "none",
+  applicableTo: ["button"],
   customizableOption: {
     name: "amount",
     type: "number",
@@ -3279,6 +3365,7 @@ var fadeBackgroundEffect = {
   description: "Reduces background opacity on hover",
   category: "background",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "opacity",
     type: "percentage",
@@ -3301,6 +3388,7 @@ var opacityReduceEffect = {
   description: "Reduces button opacity on hover by a percentage",
   category: "background",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "reduction",
     type: "percentage",
@@ -3324,6 +3412,7 @@ var animatedGradientEffect = {
   description: "Animates gradient position on hover",
   category: "background",
   pseudoElement: "none",
+  applicableTo: ["button"],
   customizableOption: {
     name: "direction",
     type: "select",
@@ -3363,6 +3452,7 @@ var backgroundOnHoverEffect = {
   description: "Adds background color on hover",
   category: "background",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "colorToken",
     type: "select",
@@ -3388,6 +3478,7 @@ var backgroundOnHoverAlphaEffect = {
   description: "Adds semi-transparent background on hover",
   category: "background",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "opacity",
     type: "percentage",
@@ -3409,6 +3500,33 @@ var backgroundOnHoverAlphaEffect = {
   }
 };
 
+// ../blocks/src/theme/buttons/effects/cssUtils.ts
+var STATE_SELECTORS = {
+  hover: ':hover, [data-force-hover="true"]',
+  active: ":active",
+  focus: ":focus-visible",
+  base: ""
+};
+function getStateSelector(themeId, variantId, state) {
+  const stateSelector = STATE_SELECTORS[state];
+  if (state === "base") {
+    return `:where([data-theme-scope="${themeId}"]) .${variantId}`;
+  }
+  if (state === "hover") {
+    return `:where([data-theme-scope="${themeId}"]) .${variantId}:hover,
+      :where([data-theme-scope="${themeId}"]) .${variantId}[data-force-hover="true"]`;
+  }
+  return `:where([data-theme-scope="${themeId}"]) .${variantId}${stateSelector}`;
+}
+function generateStateCSS(themeId, variantId, state, cssProperties) {
+  const selector = getStateSelector(themeId, variantId, state);
+  return `
+    ${selector} {
+      ${cssProperties}
+    }
+  `;
+}
+
 // ../blocks/src/theme/buttons/effects/presets/shadow.ts
 var borderGlowEffect = {
   id: "border-glow",
@@ -3416,6 +3534,7 @@ var borderGlowEffect = {
   description: "Adds a glowing shadow on hover",
   category: "shadow",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "glowColorToken",
     type: "colorToken",
@@ -3426,11 +3545,7 @@ var borderGlowEffect = {
     const { themeId, variantId, options, tokens } = ctx;
     const glowToken = options.glowColorToken || "primary-400";
     const glowColor = tokens.getColor(glowToken);
-    return `
-      :where([data-theme-scope="${themeId}"]) .${variantId}:hover {
-        box-shadow: 0 0 15px ${glowColor};
-      }
-    `;
+    return generateStateCSS(themeId, variantId, "hover", `box-shadow: 0 0 15px ${glowColor};`);
   }
 };
 var dropShadowEffect = {
@@ -3439,6 +3554,7 @@ var dropShadowEffect = {
   description: "Adds an elevated shadow on hover",
   category: "shadow",
   pseudoElement: "none",
+  applicableTo: ["button"],
   customizableOption: {
     name: "intensity",
     type: "select",
@@ -3454,11 +3570,7 @@ var dropShadowEffect = {
       medium: "0 10px 15px rgba(0, 0, 0, 0.15)",
       strong: "0 20px 25px rgba(0, 0, 0, 0.2)"
     };
-    return `
-      :where([data-theme-scope="${themeId}"]) .${variantId}:hover {
-        box-shadow: ${shadows[intensity]};
-      }
-    `;
+    return generateStateCSS(themeId, variantId, "hover", `box-shadow: ${shadows[intensity]};`);
   }
 };
 var innerShadowEffect = {
@@ -3467,6 +3579,7 @@ var innerShadowEffect = {
   description: "Adds an inset shadow for a pressed appearance",
   category: "shadow",
   pseudoElement: "none",
+  applicableTo: ["button"],
   generateCSS: (ctx) => {
     const { themeId, variantId } = ctx;
     return `
@@ -3482,6 +3595,7 @@ var neumorphicShadowEffect = {
   description: "Dual shadows for soft UI design (raised or pressed)",
   category: "shadow",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "mode",
     type: "select",
@@ -3524,6 +3638,7 @@ var outerGlowEffect = {
   description: "Creates an outer glow around the button",
   category: "shadow",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "spread",
     type: "number",
@@ -3558,6 +3673,7 @@ var retro3DShadowEffect = {
   description: "3D pressed shadow with vertical movement (retro style)",
   category: "shadow",
   pseudoElement: "none",
+  applicableTo: ["button"],
   generateCSS: (ctx) => {
     const { themeId, variantId } = ctx;
     return `
@@ -3590,6 +3706,7 @@ var scaleUpEffect = {
   description: "Slightly enlarges the button on hover",
   category: "transform",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "scale",
     type: "select",
@@ -3600,11 +3717,7 @@ var scaleUpEffect = {
   generateCSS: (ctx) => {
     const { themeId, variantId, options } = ctx;
     const scale = options.scale || "1.05";
-    return `
-      :where([data-theme-scope="${themeId}"]) .${variantId}:hover {
-        transform: scale(${scale});
-      }
-    `;
+    return generateStateCSS(themeId, variantId, "hover", `transform: scale(${scale});`);
   }
 };
 var scaleDownEffect = {
@@ -3613,6 +3726,7 @@ var scaleDownEffect = {
   description: "Slightly shrinks the button when clicked",
   category: "transform",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "scale",
     type: "select",
@@ -3636,6 +3750,7 @@ var liftEffect = {
   description: "Lifts the button upward on hover",
   category: "transform",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "amount",
     type: "select",
@@ -3646,11 +3761,7 @@ var liftEffect = {
   generateCSS: (ctx) => {
     const { themeId, variantId, options } = ctx;
     const amount = options.amount || "0.5";
-    return `
-      :where([data-theme-scope="${themeId}"]) .${variantId}:hover {
-        transform: translateY(-${amount}rem);
-      }
-    `;
+    return generateStateCSS(themeId, variantId, "hover", `transform: translateY(-${amount}rem);`);
   }
 };
 var pressDownEffect = {
@@ -3659,6 +3770,7 @@ var pressDownEffect = {
   description: "Translates button to shadow position and removes shadow on hover",
   category: "transform",
   pseudoElement: "none",
+  applicableTo: ["button"],
   generateCSS: (ctx) => {
     const { themeId, variantId, theme } = ctx;
     const shadowConfig = theme.shadow;
@@ -3671,12 +3783,12 @@ var pressDownEffect = {
     const offset = elevationOffsets[shadowConfig.elevation];
     const xOffset = (shadowConfig.position || "bottom") === "bottom-right" ? offset : 0;
     const yOffset = offset;
-    return `
-      :where([data-theme-scope="${themeId}"]) .${variantId}:hover {
-        transform: translate(${xOffset}px, ${yOffset}px);
-        box-shadow: none;
-      }
-    `;
+    return generateStateCSS(
+      themeId,
+      variantId,
+      "hover",
+      `transform: translate(${xOffset}px, ${yOffset}px); box-shadow: none;`
+    );
   }
 };
 var popEffect = {
@@ -3685,6 +3797,7 @@ var popEffect = {
   description: "Scales up and tilts the button on hover for a playful pop effect",
   category: "transform",
   pseudoElement: "none",
+  applicableTo: ["button"],
   customizableOption: {
     name: "intensity",
     type: "select",
@@ -3701,11 +3814,12 @@ var popEffect = {
       dramatic: { scale: 1.08, rotate: 3 }
     };
     const config = intensityConfig[intensity] || intensityConfig.medium;
-    return `
-      :where([data-theme-scope="${themeId}"]) .${variantId}:hover {
-        transform: scale(${config.scale}) rotate(${config.rotate}deg);
-      }
-    `;
+    return generateStateCSS(
+      themeId,
+      variantId,
+      "hover",
+      `transform: scale(${config.scale}) rotate(${config.rotate}deg);`
+    );
   }
 };
 
@@ -3716,6 +3830,7 @@ var auroraGlowEffect = {
   description: "Blurred gradient glow that appears on hover",
   category: "overlay",
   pseudoElement: "before",
+  applicableTo: ["button"],
   customizableOption: {
     name: "intensity",
     type: "percentage",
@@ -3728,8 +3843,8 @@ var auroraGlowEffect = {
     let toColor;
     if (buttonConfig.background.type === "gradient") {
       const stops = buttonConfig.background.stops;
-      fromColor = tokens.getColor(stops[0]);
-      toColor = tokens.getColor(stops[stops.length - 1]);
+      fromColor = tokens.getColor(stops[0] ?? "primary-500");
+      toColor = tokens.getColor(stops[stops.length - 1] ?? "primary-300");
     } else if (buttonConfig.background.type === "solid") {
       fromColor = tokens.getColor(buttonConfig.background.colorToken);
       const lighterToken = tokens.adjustShade(buttonConfig.background.colorToken, -200);
@@ -3772,6 +3887,7 @@ var cosmicStardustEffect = {
   description: "Rotating rainbow gradient glow (always visible, intensifies on hover)",
   category: "overlay",
   pseudoElement: "before",
+  applicableTo: ["button"],
   customizableOption: {
     name: "speed",
     type: "select",
@@ -3834,6 +3950,7 @@ var gradientBorderFillEffect = {
   description: "Gradient border that fills on hover using ::before pseudo-element",
   category: "overlay",
   pseudoElement: "before",
+  applicableTo: ["button"],
   customizableOption: {
     name: "borderWidth",
     type: "number",
@@ -3890,6 +4007,7 @@ var animatedGradientBorderFillEffect = {
   description: "Rotating gradient border that fills on hover",
   category: "overlay",
   pseudoElement: "before",
+  applicableTo: ["button"],
   customizableOption: {
     name: "speed",
     type: "select",
@@ -3965,6 +4083,7 @@ var borderBottomGrowEffect = {
   description: "Animated underline that grows on hover",
   category: "overlay",
   pseudoElement: "after",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "height",
     type: "number",
@@ -4012,6 +4131,7 @@ var gradientTextEffect = {
   description: "Gradient text using background-clip",
   category: "text",
   pseudoElement: "none",
+  applicableTo: ["button"],
   customizableOption: {
     name: "solidOnHover",
     type: "select",
@@ -4063,6 +4183,7 @@ var textColorChangeEffect = {
   description: "Changes text color on hover",
   category: "text",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "hoverColorToken",
     type: "select",
@@ -4090,6 +4211,7 @@ var borderColorChangeEffect = {
   description: "Changes border color on hover",
   category: "border",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "hoverColorToken",
     type: "select",
@@ -4115,6 +4237,7 @@ var sketchyBorderEffect = {
   description: "Hand-drawn style with imperfect edges",
   category: "border",
   pseudoElement: "none",
+  applicableTo: ["button"],
   customizableOption: {
     name: "intensity",
     type: "select",
@@ -4162,6 +4285,7 @@ var pulseAnimationEffect = {
   description: "Continuous pulse animation (opacity fade)",
   category: "animation",
   pseudoElement: "none",
+  applicableTo: ["button", "nav-link"],
   customizableOption: {
     name: "speed",
     type: "select",
@@ -4190,6 +4314,138 @@ var pulseAnimationEffect = {
   }
 };
 
+// ../blocks/src/theme/interactive/effects/nav-underline.ts
+var navUnderlineEffect = {
+  id: "nav-underline",
+  name: "Nav Underline",
+  description: "Underline that appears or grows on hover",
+  category: "overlay",
+  pseudoElement: "after",
+  applicableTo: ["nav-link"],
+  customizableOption: {
+    name: "style",
+    type: "select",
+    label: "Underline Style",
+    default: "static",
+    options: ["static", "grow"]
+  },
+  generateCSS: (ctx) => {
+    const { themeId, variantId, options, tokens } = ctx;
+    const style = options.style || "static";
+    const colorToken = options.colorToken || "primary";
+    const color = tokens.getColor(colorToken);
+    const height = options.height || 2;
+    if (style === "grow") {
+      return `
+        /* Setup nav link for pseudo-element */
+        :where([data-theme-scope="${themeId}"]) .${variantId} {
+          position: relative;
+        }
+
+        /* Underline using ::after - starts at 0 width */
+        :where([data-theme-scope="${themeId}"]) .${variantId}::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: 0;
+          height: ${height}px;
+          background: ${color};
+          transform: translateX(-50%);
+          transition: width 200ms ease-in-out;
+        }
+
+        /* Grow underline on hover */
+        :where([data-theme-scope="${themeId}"]) .${variantId}:hover::after {
+          width: 100%;
+        }
+      `;
+    }
+    return `
+      /* Setup nav link for pseudo-element */
+      :where([data-theme-scope="${themeId}"]) .${variantId} {
+        position: relative;
+      }
+
+      /* Hidden underline using ::after */
+      :where([data-theme-scope="${themeId}"]) .${variantId}::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: ${height}px;
+        background: ${color};
+        opacity: 0;
+        transition: opacity 150ms ease-in-out;
+      }
+
+      /* Show underline on hover */
+      :where([data-theme-scope="${themeId}"]) .${variantId}:hover::after {
+        opacity: 1;
+      }
+    `;
+  }
+};
+
+// ../blocks/src/theme/interactive/effects/nav-frosted.ts
+var navFrostedBaseEffect = {
+  id: "nav-frosted-base",
+  name: "Nav Frosted Base",
+  description: "Base frosted glass styling for nav links",
+  category: "background",
+  pseudoElement: "none",
+  applicableTo: ["nav-link"],
+  generateCSS: (ctx) => {
+    const { themeId, variantId } = ctx;
+    return `
+      /* Frosted glass base state */
+      :where([data-theme-scope="${themeId}"]) .${variantId} {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+        transition: background 150ms ease, backdrop-filter 150ms ease;
+      }
+    `;
+  }
+};
+var navFrostedHoverEffect = {
+  id: "nav-frosted-hover",
+  name: "Nav Frosted Hover",
+  description: "Enhanced frosted glass on hover",
+  category: "background",
+  pseudoElement: "none",
+  applicableTo: ["nav-link"],
+  generateCSS: (ctx) => {
+    const { themeId, variantId } = ctx;
+    return `
+      /* Frosted glass hover state */
+      :where([data-theme-scope="${themeId}"]) .${variantId}:hover {
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+      }
+    `;
+  }
+};
+var navFrostedActiveEffect = {
+  id: "nav-frosted-active",
+  name: "Nav Frosted Active",
+  description: "Frosted glass active/pressed state",
+  category: "background",
+  pseudoElement: "none",
+  applicableTo: ["nav-link"],
+  generateCSS: (ctx) => {
+    const { themeId, variantId } = ctx;
+    return `
+      /* Frosted glass active state */
+      :where([data-theme-scope="${themeId}"]) .${variantId}:active {
+        background: rgba(255, 255, 255, 0.15);
+      }
+    `;
+  }
+};
+
 // ../blocks/src/theme/buttons/effects/registry.ts
 var EFFECT_PRESETS = [
   // Background effects
@@ -4226,88 +4482,65 @@ var EFFECT_PRESETS = [
   borderColorChangeEffect,
   sketchyBorderEffect,
   // Animation effects
-  pulseAnimationEffect
+  pulseAnimationEffect,
+  // Nav-link specific effects
+  navUnderlineEffect,
+  navFrostedBaseEffect,
+  navFrostedHoverEffect,
+  navFrostedActiveEffect
 ];
 function getEffectPreset(id) {
   return EFFECT_PRESETS.find((preset) => preset.id === id);
 }
 
-// ../blocks/src/theme/tokens/resolver.ts
-var TokenResolver = class {
-  constructor(theme) {
-    this.theme = theme;
-  }
-  /**
-   * Resolve a color token to a CSS variable reference wrapped in rgb()
-   *
-   * @param token - Token name (e.g., 'primary-500', 'white', 'text-900')
-   * @returns CSS rgb() function with var reference (e.g., 'rgb(var(--tb-primary-500))')
-   *
-   * Note: CSS variables are stored as RGB channels (e.g., "37 99 235") following Tailwind convention,
-   * so we must wrap them with rgb() to create a valid color value.
-   *
-   * @example
-   * resolver.getColor('primary-500') // => 'rgb(var(--tb-primary-500))'
-   * resolver.getColor('white') // => 'rgb(var(--tb-white))'
-   */
-  getColor(token) {
-    if (!this.tokenExists(token)) {
-      console.warn(
-        `[TokenResolver] Color token "${token}" not found in theme palette. Button may render incorrectly.`
+// ../blocks/src/theme/interactive/generateEffectsCSS.ts
+function generateEffectsCSS(options) {
+  const { themeId, variantId, effects, elementConfig, tokens, theme } = options;
+  if (!effects) return "";
+  const cssChunks = [];
+  const stateGroups = [
+    ["base", effects.base],
+    ["hover", effects.hover],
+    ["active", effects.active],
+    ["focus", effects.focus]
+  ];
+  for (const [stateGroup, effectApps] of stateGroups) {
+    if (!effectApps || effectApps.length === 0) continue;
+    for (const effectApp of effectApps) {
+      const css2 = generateSingleEffectCSS(
+        themeId,
+        variantId,
+        stateGroup,
+        effectApp,
+        elementConfig,
+        tokens,
+        theme
       );
+      if (css2) {
+        cssChunks.push(css2);
+      }
     }
-    return `rgb(var(--tb-${token}))`;
   }
-  /**
-   * Adjust a color token's shade by a given amount
-   *
-   * @param token - Base token (e.g., 'primary-500')
-   * @param amount - Shade adjustment (+100 = darker, -100 = lighter)
-   * @returns Adjusted token name (e.g., 'primary-600')
-   *
-   * @example
-   * resolver.adjustShade('primary-500', 100) // => 'primary-600' (darker)
-   * resolver.adjustShade('primary-500', -100) // => 'primary-400' (lighter)
-   */
-  adjustShade(token, amount) {
-    const parts = token.split("-");
-    if (parts.length < 2) {
-      const newShade2 = Math.max(100, Math.min(900, 500 + amount));
-      return `${token}-${newShade2}`;
-    }
-    const base = parts.slice(0, -1).join("-");
-    const shade = parseInt(parts[parts.length - 1], 10);
-    if (isNaN(shade)) {
-      console.warn(
-        `[TokenResolver] Cannot adjust shade for non-shade token "${token}". Returning original token.`
-      );
-      return token;
-    }
-    const newShade = Math.max(100, Math.min(900, shade + amount));
-    return `${base}-${newShade}`;
+  return cssChunks.join("\n\n");
+}
+function generateSingleEffectCSS(themeId, variantId, stateGroup, effectApp, elementConfig, tokens, theme) {
+  const effectPreset = getEffectPreset(effectApp.effectId);
+  if (!effectPreset) {
+    console.warn(`[generateEffectsCSS] Unknown effect: ${effectApp.effectId}`);
+    return "";
   }
-  /**
-   * Check if a token exists in the theme palette
-   *
-   * @param token - Token name to check
-   * @returns True if token exists in theme
-   */
-  tokenExists(token) {
-    const commonTokens = ["white", "black", "transparent"];
-    if (commonTokens.includes(token)) {
-      return true;
-    }
-    const parts = token.split("-");
-    if (parts.length >= 2) {
-      const lastPart = parts[parts.length - 1];
-      const shade = parseInt(lastPart, 10);
-      if (!isNaN(shade) && shade >= 100 && shade <= 900 && shade % 100 === 0) {
-        return true;
-      }
-    }
-    return true;
-  }
-};
+  const ctx = {
+    themeId,
+    variantId,
+    stateGroup,
+    options: effectApp.options || {},
+    buttonConfig: elementConfig,
+    // Effects access .background, .textColorToken, .border
+    tokens,
+    theme
+  };
+  return effectPreset.generateCSS(ctx);
+}
 
 // ../blocks/src/theme/buttons/constants.ts
 var GRADIENT_DIRECTION_MAP = {
@@ -4366,6 +4599,11 @@ var FONT_SIZE_MAP = {
   "text-xl": "1.25rem",
   "text-2xl": "1.5rem"
 };
+var BUTTON_PADDING_PRESETS = {
+  compact: "0.375rem 0.75rem",
+  default: "0.5rem 1rem",
+  spacious: "0.75rem 1.5rem"
+};
 
 // ../blocks/src/theme/buttons/utils/contrast.ts
 function getContrastingTextColorToken(backgroundToken, theme) {
@@ -4375,7 +4613,7 @@ function getContrastingTextColorToken(backgroundToken, theme) {
   }
   if (backgroundToken.startsWith("neutral-")) {
     const match = backgroundToken.match(/neutral-(\d+)/);
-    if (match) {
+    if (match?.[1]) {
       const shade = parseInt(match[1], 10);
       return shade >= 500 ? "neutral-50" : "neutral-950";
     }
@@ -4384,16 +4622,6 @@ function getContrastingTextColorToken(backgroundToken, theme) {
 }
 
 // ../blocks/src/theme/buttons/generateDefaultButtonSystem.ts
-var CORNERS_TO_RADIUS_MAP = {
-  square: "rounded-none",
-  // 0px - sharp corners
-  soft: "rounded-md",
-  // 6px - subtle rounding
-  rounded: "rounded-md",
-  // 6px - standard rounded (same as soft for buttons)
-  pill: "rounded-full"
-  // 9999px - full pill shape
-};
 var BORDER_WIDTH_TO_CLASS_MAP = {
   none: "border-0",
   // 0px
@@ -4405,7 +4633,6 @@ var BORDER_WIDTH_TO_CLASS_MAP = {
   // 4px - clearly thick
 };
 function generateDefaultButtonSystem(theme) {
-  const borderRadius = CORNERS_TO_RADIUS_MAP[theme.corners] || "rounded-lg";
   const borderWidthClass = BORDER_WIDTH_TO_CLASS_MAP[theme.border.width] || "border-2";
   const variants = [];
   const primaryVariant = {
@@ -4415,10 +4642,11 @@ function generateDefaultButtonSystem(theme) {
     priority: 1,
     background: {
       type: "solid",
-      colorToken: "primary-500"
+      colorToken: "primary"
     },
-    textColorToken: getContrastingTextColorToken("primary-500", theme),
-    borderRadius,
+    textColorToken: getContrastingTextColorToken("primary", theme),
+    borderRadius: "",
+    // Empty string = inherit from global.cornerStyle
     // Inherits shadow from theme
     effects: {
       hover: [
@@ -4440,7 +4668,8 @@ function generateDefaultButtonSystem(theme) {
       colorToken: "neutral-700"
     },
     textColorToken: getContrastingTextColorToken("neutral-700", theme),
-    borderRadius,
+    borderRadius: "",
+    // Empty string = inherit from global.cornerStyle
     // Inherits shadow from theme
     effects: {
       hover: [
@@ -4460,12 +4689,13 @@ function generateDefaultButtonSystem(theme) {
     background: {
       type: "transparent"
     },
-    textColorToken: "primary-600",
-    borderRadius,
+    textColorToken: "primary",
+    borderRadius: "",
+    // Empty string = inherit from global.cornerStyle
     shadow: { elevation: "none", softness: null, position: "bottom" },
     // Outline buttons typically don't have shadows
     border: {
-      colorToken: "primary-500",
+      colorToken: "primary",
       widthClass: borderWidthClass
     },
     effects: {
@@ -4486,8 +4716,9 @@ function generateDefaultButtonSystem(theme) {
     background: {
       type: "transparent"
     },
-    textColorToken: "primary-600",
-    borderRadius,
+    textColorToken: "primary",
+    borderRadius: "",
+    // Empty string = inherit from global.cornerStyle
     shadow: { elevation: "none", softness: null, position: "bottom" },
     // Ghost buttons have no shadow
     // No border for ghost buttons
@@ -4553,6 +4784,10 @@ function generateButtonCss(options) {
     if (!variant.enabled) continue;
     const baseCSS = generateVariantBaseCSS(variant, buttonSystem.global, themeId, tokens, theme);
     cssChunks.push(baseCSS);
+    const hoverBgCSS = generateHoverBackgroundCSS(variant, buttonSystem.global, themeId, tokens);
+    if (hoverBgCSS) {
+      cssChunks.push(hoverBgCSS);
+    }
     const effectCSS = generateVariantEffectCSS(variant, themeId, tokens, theme);
     if (effectCSS) {
       cssChunks.push(effectCSS);
@@ -4571,7 +4806,7 @@ function generateVariantBaseCSS(variant, global, themeId, tokens, theme) {
   const rules = [];
   const borderWidth = variant.border ? BORDER_WIDTH_MAP[variant.border.widthClass] || "1px" : "0px";
   const hasBorder = borderWidth !== "0px";
-  const padding = variant.padding || STRUCTURAL_BASE_STYLES.padding;
+  const padding = variant.padding || (global.paddingPreset ? BUTTON_PADDING_PRESETS[global.paddingPreset] : null) || STRUCTURAL_BASE_STYLES.padding;
   const paddingParts = padding.split(" ");
   const verticalPadding = paddingParts[0] || "0.5rem";
   const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
@@ -4584,6 +4819,15 @@ function generateVariantBaseCSS(variant, global, themeId, tokens, theme) {
     rules.push(`padding: ${padding};`);
   }
   rules.push(`font-weight: ${global.fontWeight};`);
+  if (global.typography === "heading") {
+    rules.push(`font-family: var(--font-heading);`);
+    rules.push(`letter-spacing: var(--ls-heading);`);
+  } else {
+    rules.push(`font-family: var(--font-body);`);
+  }
+  if (global.italic) {
+    rules.push(`font-style: italic;`);
+  }
   if (variant.fontSize) {
     const fontSize = FONT_SIZE_MAP[variant.fontSize] || "1rem";
     rules.push(`font-size: ${fontSize};`);
@@ -4597,16 +4841,16 @@ function generateVariantBaseCSS(variant, global, themeId, tokens, theme) {
   rules.push(`align-items: ${STRUCTURAL_BASE_STYLES.alignItems};`);
   rules.push(`justify-content: ${STRUCTURAL_BASE_STYLES.justifyContent};`);
   let borderRadius;
-  if (variant.borderRadius) {
-    borderRadius = BORDER_RADIUS_MAP[variant.borderRadius] || BORDER_RADIUS_MAP["rounded"];
+  if (variant.borderRadius && variant.borderRadius !== "") {
+    borderRadius = BORDER_RADIUS_MAP[variant.borderRadius] ?? BORDER_RADIUS_MAP["rounded"] ?? "0.375rem";
   } else {
     const cornerStyleMap = {
       "square": "rounded-none",
       "rounded": "rounded-md",
       "pill": "rounded-full"
     };
-    const fallbackRadius = cornerStyleMap[global.cornerStyle] || "rounded-md";
-    borderRadius = BORDER_RADIUS_MAP[fallbackRadius] || BORDER_RADIUS_MAP["rounded"];
+    const fallbackRadius = cornerStyleMap[global.cornerStyle] ?? "rounded-md";
+    borderRadius = BORDER_RADIUS_MAP[fallbackRadius] ?? BORDER_RADIUS_MAP["rounded"] ?? "0.375rem";
   }
   rules.push(`border-radius: ${borderRadius};`);
   const shadowConfig = variant.shadow || shadowSizeToShadow(global.shadow, theme) || theme.shadow;
@@ -4642,31 +4886,33 @@ ${selector} {
 }
 function generateVariantEffectCSS(variant, themeId, tokens, theme) {
   if (!variant.effects) return "";
-  const cssChunks = [];
-  for (const [stateGroup, effectApps] of Object.entries(variant.effects)) {
-    if (!effectApps || effectApps.length === 0) continue;
-    for (const effectApp of effectApps) {
-      const effectPreset = getEffectPreset(effectApp.effectId);
-      if (!effectPreset) {
-        console.warn(`[generateVariantEffectCSS] Unknown effect: ${effectApp.effectId}`);
-        continue;
-      }
-      const ctx = {
-        themeId,
-        variantId: variant.id,
-        stateGroup,
-        options: effectApp.options || {},
-        buttonConfig: variant,
-        tokens,
-        theme
-      };
-      const css2 = effectPreset.generateCSS(ctx);
-      if (css2) {
-        cssChunks.push(css2);
-      }
-    }
+  const elementConfig = {
+    background: variant.background,
+    textColorToken: variant.textColorToken,
+    border: variant.border ? { colorToken: variant.border.colorToken } : void 0
+  };
+  return generateEffectsCSS({
+    themeId,
+    variantId: variant.id,
+    effects: variant.effects,
+    elementConfig,
+    tokens,
+    theme
+  });
+}
+function generateHoverBackgroundCSS(variant, global, themeId, tokens) {
+  let hoverToken = variant.hoverBackgroundToken;
+  if (!hoverToken && global.hoverColor === "token" && global.hoverColorToken) {
+    hoverToken = global.hoverColorToken;
   }
-  return cssChunks.join("\n\n");
+  if (!hoverToken) return null;
+  const selector = `:where([data-theme-scope="${themeId}"]) .${variant.id}:hover`;
+  const hoverBgColor = tokens.getColor(hoverToken);
+  return `
+${selector} {
+  background-color: ${hoverBgColor};
+}
+  `.trim();
 }
 function generateDisabledCSS(variant, themeId) {
   const selector = `:where([data-theme-scope="${themeId}"]) .${variant.id}:disabled`;
@@ -5559,6 +5805,345 @@ function generateDefaultInputSystem(theme) {
   };
 }
 
+// ../blocks/src/theme/navigation/types.ts
+import { z as z4 } from "zod";
+
+// ../blocks/src/theme/interactive/baseSchema.ts
+import { z as z3 } from "zod";
+var interactiveTypographySchema = z3.object({
+  /** Font family source */
+  typography: z3.enum(["body", "heading"]).default("body"),
+  /** Font weight */
+  fontWeight: z3.enum(["regular", "medium", "semibold", "bold"]).default("medium"),
+  /** Text transform */
+  textTransform: z3.enum(["none", "uppercase", "capitalize"]).default("none"),
+  /** Italic style */
+  italic: z3.boolean().default(false)
+});
+var effectApplicationSchema = z3.object({
+  /** Effect preset ID */
+  effectId: z3.string(),
+  /** User-provided customization options */
+  options: z3.record(z3.string(), z3.any()).optional()
+});
+var effectCompositionSchema = z3.object({
+  /** Effects always applied */
+  base: z3.array(effectApplicationSchema).optional(),
+  /** Effects applied on hover */
+  hover: z3.array(effectApplicationSchema).optional(),
+  /** Effects applied on active/pressed */
+  active: z3.array(effectApplicationSchema).optional(),
+  /** Effects applied on focus */
+  focus: z3.array(effectApplicationSchema).optional()
+});
+
+// ../blocks/src/theme/navigation/types.ts
+var navLinkPaddingSchema = z4.enum(["none", "compact", "default"]);
+var navLinkBorderRadiusSchema = z4.enum(["none", "sm", "md", "full"]);
+var navLinkStyleSchema = z4.object({
+  /** Display name for the style */
+  name: z4.string().min(1).max(30).optional(),
+  /** Typography settings (inherited from interactive base) */
+  ...interactiveTypographySchema.shape,
+  /** Text color token */
+  colorToken: z4.string().default("text"),
+  /** Hover/active color token (for color-change effects) */
+  hoverColorToken: z4.string().nullable().optional(),
+  /** Padding preset */
+  padding: navLinkPaddingSchema.default("compact"),
+  /** Border radius (for capsule/pill styles) */
+  borderRadius: navLinkBorderRadiusSchema.default("none"),
+  /** Composable effects */
+  effects: effectCompositionSchema.optional()
+});
+var NAV_LINK_PADDING_MAP = {
+  none: "0",
+  compact: "0.5rem 1rem",
+  default: "0.75rem 1.25rem"
+};
+var NAV_LINK_BORDER_RADIUS_MAP = {
+  none: "0",
+  sm: "0.25rem",
+  md: "0.5rem",
+  full: "9999px"
+};
+
+// ../blocks/src/theme/interactive/generateBaseCSS.ts
+var FONT_WEIGHT_MAP2 = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+function generateBaseInteractiveCSS(options) {
+  const {
+    typography,
+    padding,
+    borderRadius,
+    includeTransition = true,
+    includeFlexCenter = false,
+    borderWidth
+  } = options;
+  const rules = [];
+  if (typography.fontWeight !== void 0) {
+    const weight = typeof typography.fontWeight === "number" ? typography.fontWeight : FONT_WEIGHT_MAP2[typography.fontWeight];
+    rules.push(`font-weight: ${weight};`);
+  }
+  if (typography.typography === "heading") {
+    rules.push(`font-family: var(--font-heading);`);
+    rules.push(`letter-spacing: var(--ls-heading);`);
+  } else if (typography.typography === "body") {
+    rules.push(`font-family: var(--font-body);`);
+  }
+  if (typography.italic) {
+    rules.push(`font-style: italic;`);
+  }
+  if (typography.textTransform && typography.textTransform !== "none") {
+    rules.push(`text-transform: ${typography.textTransform};`);
+  }
+  if (padding) {
+    if (borderWidth && borderWidth !== "0px") {
+      const paddingParts = padding.split(" ");
+      const verticalPadding = paddingParts[0] || "0.5rem";
+      const horizontalPadding = paddingParts[1] || paddingParts[0] || "1rem";
+      rules.push(`padding-top: calc(${verticalPadding} - ${borderWidth} - 1px);`);
+      rules.push(`padding-bottom: calc(${verticalPadding} - ${borderWidth} - 1px);`);
+      rules.push(`padding-left: calc(${horizontalPadding} - ${borderWidth});`);
+      rules.push(`padding-right: calc(${horizontalPadding} - ${borderWidth});`);
+    } else {
+      rules.push(`padding: ${padding};`);
+    }
+  }
+  if (borderRadius) {
+    rules.push(`border-radius: ${borderRadius};`);
+  }
+  if (includeTransition) {
+    rules.push(`transition: all 200ms ease;`);
+  }
+  if (includeFlexCenter) {
+    rules.push(`display: inline-flex;`);
+    rules.push(`align-items: center;`);
+    rules.push(`justify-content: center;`);
+    rules.push(`cursor: pointer;`);
+  }
+  return rules;
+}
+
+// ../blocks/src/theme/navigation/generateNavLinkCSS.ts
+function generateNavLinkCSS(options) {
+  const { themeId, tokens, theme, style, className } = options;
+  const selector = `:where([data-theme-scope="${themeId}"]) .${className}`;
+  const hoverSelector = `${selector}:hover`;
+  const activeSelector = `${selector}:active, ${selector}[data-active="true"]`;
+  const cssChunks = [];
+  const hoverRules = [];
+  const activeRules = [];
+  const baseRules = generateBaseInteractiveCSS({
+    typography: {
+      typography: style.typography,
+      fontWeight: style.fontWeight,
+      textTransform: style.textTransform,
+      italic: style.italic
+    },
+    padding: style.padding ? NAV_LINK_PADDING_MAP[style.padding] : void 0,
+    borderRadius: style.borderRadius ? NAV_LINK_BORDER_RADIUS_MAP[style.borderRadius] : void 0,
+    includeTransition: true,
+    includeFlexCenter: false
+  });
+  if (style.colorToken) {
+    baseRules.push(`color: ${tokens.getColor(style.colorToken)};`);
+  }
+  if (style.hoverColorToken && !style.effects?.hover?.length) {
+    hoverRules.push(`color: ${tokens.getColor(style.hoverColorToken)};`);
+  }
+  const elementConfig = {
+    background: { type: "transparent" },
+    textColorToken: style.colorToken || "text"
+  };
+  if (style.effects) {
+    const effectsCss = generateEffectsCSS({
+      themeId,
+      variantId: className,
+      effects: style.effects,
+      elementConfig,
+      tokens,
+      theme
+    });
+    if (effectsCss) {
+      cssChunks.push(effectsCss);
+    }
+  }
+  if (baseRules.length > 0) {
+    cssChunks.unshift(`
+${selector} {
+  ${baseRules.join("\n  ")}
+}
+`);
+  }
+  if (hoverRules.length > 0) {
+    cssChunks.push(`
+${hoverSelector} {
+  ${hoverRules.join("\n  ")}
+}
+`);
+  }
+  if (activeRules.length > 0) {
+    cssChunks.push(`
+${activeSelector} {
+  ${activeRules.join("\n  ")}
+}
+`);
+  }
+  return cssChunks.join("");
+}
+
+// ../blocks/src/theme/navigation/presets.ts
+var NAV_LINK_PRESETS = {
+  /**
+   * Minimal - subtle color change on hover
+   */
+  minimal: {
+    name: "Minimal",
+    typography: "body",
+    fontWeight: "medium",
+    textTransform: "none",
+    italic: false,
+    colorToken: "text",
+    hoverColorToken: "primary",
+    padding: "none",
+    borderRadius: "none",
+    effects: {
+      hover: [
+        { effectId: "text-color-change", options: { colorToken: "primary" } }
+      ]
+    }
+  },
+  /**
+   * Underline - static underline appears on hover
+   */
+  underline: {
+    name: "Underline",
+    typography: "body",
+    fontWeight: "medium",
+    textTransform: "none",
+    italic: false,
+    colorToken: "text",
+    padding: "none",
+    borderRadius: "none",
+    effects: {
+      hover: [
+        { effectId: "nav-underline", options: { style: "static" } }
+      ]
+    }
+  },
+  /**
+   * Underline Grow - animated underline grows from center on hover
+   */
+  "underline-grow": {
+    name: "Underline Grow",
+    typography: "body",
+    fontWeight: "medium",
+    textTransform: "none",
+    italic: false,
+    colorToken: "text",
+    padding: "none",
+    borderRadius: "none",
+    effects: {
+      hover: [
+        { effectId: "nav-underline", options: { style: "grow" } }
+      ]
+    }
+  },
+  /**
+   * Capsule - pill-shaped background on hover
+   */
+  capsule: {
+    name: "Capsule",
+    typography: "body",
+    fontWeight: "medium",
+    textTransform: "none",
+    italic: false,
+    colorToken: "text",
+    padding: "compact",
+    borderRadius: "full",
+    effects: {
+      hover: [
+        { effectId: "background-on-hover-alpha", options: { colorToken: "primary", opacity: 0.1 } }
+      ],
+      active: [
+        { effectId: "background-on-hover-alpha", options: { colorToken: "primary", opacity: 0.15 } }
+      ]
+    }
+  },
+  /**
+   * Solid - solid background color on hover
+   */
+  solid: {
+    name: "Solid",
+    typography: "body",
+    fontWeight: "medium",
+    textTransform: "none",
+    italic: false,
+    colorToken: "text",
+    padding: "compact",
+    borderRadius: "none",
+    effects: {
+      hover: [
+        { effectId: "background-on-hover", options: { colorToken: "primary" } }
+      ],
+      active: [
+        { effectId: "background-on-hover", options: { colorToken: "primary" } }
+      ]
+    }
+  },
+  /**
+   * Scale - gentle scale-up on hover
+   */
+  scale: {
+    name: "Scale",
+    typography: "body",
+    fontWeight: "medium",
+    textTransform: "none",
+    italic: false,
+    colorToken: "text",
+    padding: "none",
+    borderRadius: "none",
+    effects: {
+      hover: [
+        { effectId: "scale-up", options: { scale: 1.05 } }
+      ]
+    }
+  },
+  /**
+   * Frosted - semi-transparent glass-like background
+   */
+  frosted: {
+    name: "Frosted",
+    typography: "body",
+    fontWeight: "medium",
+    textTransform: "none",
+    italic: false,
+    colorToken: "text",
+    padding: "compact",
+    borderRadius: "md",
+    effects: {
+      base: [
+        { effectId: "nav-frosted-base" }
+      ],
+      hover: [
+        { effectId: "nav-frosted-hover" }
+      ],
+      active: [
+        { effectId: "nav-frosted-active" }
+      ]
+    }
+  }
+};
+function getNavLinkPreset(presetId) {
+  return NAV_LINK_PRESETS[presetId];
+}
+var NAV_LINK_PRESET_IDS = Object.keys(NAV_LINK_PRESETS);
+
 // ../blocks/src/theme/header/generateHeaderCss.ts
 function generateHeaderCss(options) {
   const { themeId, theme } = options;
@@ -5566,10 +6151,8 @@ function generateHeaderCss(options) {
   const header = theme.header;
   const cssChunks = [];
   cssChunks.push(generateHeaderRootStyles(header, themeId, tokens, theme));
-  if (header.logo) {
-    cssChunks.push(generateLogoStyles(header.logo, themeId, tokens));
-  }
-  cssChunks.push(generateNavLinkStyles(header, themeId, tokens));
+  cssChunks.push(generateLogoStyles(header.logo, themeId, tokens, header.textColor));
+  cssChunks.push(generateNavLinkStyles(header, themeId, tokens, theme));
   if (header.variant === "floating" && header.container) {
     cssChunks.push(generateFloatingContainerStyles(header.container, themeId, tokens));
   }
@@ -5625,32 +6208,36 @@ ${selector} {
 }
 `;
 }
-function generateLogoStyles(logo, themeId, tokens) {
-  if (!logo) return "";
+function generateLogoStyles(logo, themeId, tokens, textColor) {
   const selector = `:where([data-theme-scope="${themeId}"]) .header-logo-text`;
   const rules = [];
   const primaryColor = tokens.getColor("primary");
   const accentColor = tokens.getColor("accent");
-  if (logo.fontFamily === "mono") {
-    rules.push(`font-family: ui-monospace, monospace;`);
-  } else if (logo.fontFamily === "serif") {
-    rules.push(`font-family: ui-serif, serif;`);
-  }
-  if (logo.letterSpacing && logo.letterSpacing !== "normal") {
-    const spacingMap = {
-      "normal": "0em",
-      "wide": "0.05em",
-      "wider": "0.1em",
-      "widest": "0.15em"
-    };
-    rules.push(`letter-spacing: ${spacingMap[logo.letterSpacing]};`);
-  }
-  if (logo.gradient) {
-    rules.push(`background: linear-gradient(to right, ${primaryColor}, ${accentColor});`);
-    rules.push(`-webkit-background-clip: text;`);
-    rules.push(`-webkit-text-fill-color: transparent;`);
-    rules.push(`background-clip: text;`);
-    rules.push(`color: transparent;`);
+  if (textColor && !logo?.gradient) {
+    rules.push(`color: ${tokens.getColor(textColor)};`);
+  }
+  if (logo) {
+    if (logo.fontFamily === "mono") {
+      rules.push(`font-family: ui-monospace, monospace;`);
+    } else if (logo.fontFamily === "serif") {
+      rules.push(`font-family: ui-serif, serif;`);
+    }
+    if (logo.letterSpacing && logo.letterSpacing !== "normal") {
+      const spacingMap = {
+        "normal": "0em",
+        "wide": "0.05em",
+        "wider": "0.1em",
+        "widest": "0.15em"
+      };
+      rules.push(`letter-spacing: ${spacingMap[logo.letterSpacing]};`);
+    }
+    if (logo.gradient) {
+      rules.push(`background: linear-gradient(to right, ${primaryColor}, ${accentColor});`);
+      rules.push(`-webkit-background-clip: text;`);
+      rules.push(`-webkit-text-fill-color: transparent;`);
+      rules.push(`background-clip: text;`);
+      rules.push(`color: transparent;`);
+    }
   }
   if (rules.length === 0) return "";
   return `
@@ -5659,129 +6246,82 @@ ${selector} {
 }
 `;
 }
-function generateNavLinkStyles(header, themeId, tokens) {
-  const selector = `:where([data-theme-scope="${themeId}"]) .header-nav-link`;
-  const hoverSelector = `${selector}:hover`;
-  const activeSelector = `${selector}[data-active="true"]`;
-  const cssChunks = [];
-  const baseRules = [];
-  const hoverRules = [];
-  const activeRules = [];
-  const navContainerType = header.navContainer?.type ?? "none";
-  const usesGlassNavContainer = navContainerType === "glass";
-  const navColorToken = header.navColor?.trim();
-  const primaryColor = tokens.getColor("primary");
-  const navWeight = header.navWeight ?? "medium";
-  const navWeightMap = {
-    regular: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700
-  };
-  if (navColorToken) {
-    baseRules.push(`color: ${tokens.getColor(navColorToken)};`);
-  }
-  if (navWeight) {
-    baseRules.push(`font-weight: ${navWeightMap[navWeight]};`);
-  }
-  if (navWeight === "bold" && header.navStyle === "solid") {
-    baseRules.push(`text-transform: uppercase;`);
-  }
-  switch (header.navStyle) {
-    case "minimal":
-      baseRules.push(`transition: color 200ms ease;`);
-      hoverRules.push(`color: ${primaryColor};`);
-      activeRules.push(`color: ${primaryColor};`);
-      break;
-    case "underline":
-      baseRules.push(`transition: all 200ms ease;`);
-      hoverRules.push(`text-decoration: underline;`);
-      hoverRules.push(`text-underline-offset: 4px;`);
-      activeRules.push(`text-decoration: underline;`);
-      activeRules.push(`text-underline-offset: 4px;`);
-      break;
-    case "underline-grow":
-      baseRules.push(`position: relative;`);
-      baseRules.push(`transition: color 200ms ease;`);
-      hoverRules.push(`color: ${primaryColor};`);
-      activeRules.push(`color: ${primaryColor};`);
-      cssChunks.push(generateUnderlineGrowCSS(themeId));
-      break;
-    case "capsule":
-      baseRules.push(`border-radius: 9999px;`);
-      baseRules.push(`transition: background-color 200ms ease;`);
-      hoverRules.push(`background-color: color-mix(in srgb, ${primaryColor} 10%, transparent);`);
-      activeRules.push(`background-color: color-mix(in srgb, ${primaryColor} 15%, transparent);`);
-      break;
-    case "solid":
-      baseRules.push(`border-radius: 0;`);
-      baseRules.push(`transition: background-color 200ms ease, color 200ms ease;`);
-      hoverRules.push(`background-color: ${primaryColor};`);
-      if (navColorToken) {
-        hoverRules.push(`color: ${tokens.getColor(navColorToken)};`);
-      }
-      activeRules.push(`background-color: ${primaryColor};`);
-      if (navColorToken) {
-        activeRules.push(`color: ${tokens.getColor(navColorToken)};`);
-      }
-      break;
-    case "scale":
-      baseRules.push(`transition: all 200ms ease;`);
-      hoverRules.push(`transform: scale(1.05);`);
-      break;
-    case "frosted":
-      baseRules.push(`border-radius: 0.5rem;`);
-      baseRules.push(`background-color: rgb(255 255 255 / 0.1);`);
-      baseRules.push(`backdrop-filter: blur(8px);`);
-      baseRules.push(`transition: background-color 200ms ease;`);
-      hoverRules.push(`background-color: rgb(255 255 255 / 0.2);`);
-      activeRules.push(`background-color: rgb(255 255 255 / 0.25);`);
-      break;
+function generateNavLinkStyles(header, themeId, tokens, theme) {
+  if (header.navLinkStyle) {
+    return generateNavLinkCSS({
+      themeId,
+      tokens,
+      theme,
+      style: header.navLinkStyle,
+      className: "header-nav-link"
+    });
   }
-  if (usesGlassNavContainer && header.navStyle === "minimal") {
-    baseRules.push(`border-radius: 9999px;`);
-    hoverRules.push(`background-color: rgba(255, 255, 255, 0.1);`);
-    activeRules.push(`background-color: rgba(255, 255, 255, 0.18);`);
-    hoverRules.push(`color: #fff;`);
-    activeRules.push(`color: #fff;`);
+  const navStyle = header.navStyle ?? "minimal";
+  const basePreset = getNavLinkPreset(navStyle);
+  if (!basePreset) {
+    console.warn(`[generateHeaderCss] Nav link preset not found: ${navStyle}`);
+    return "";
+  }
+  const mergedStyle = {
+    ...basePreset,
+    // Override with legacy settings
+    fontWeight: header.navWeight ?? basePreset.fontWeight,
+    colorToken: (header.navColor ?? header.textColor)?.trim() || basePreset.colorToken
+  };
+  if (header.navWeight === "bold" && navStyle === "solid") {
+    mergedStyle.textTransform = "uppercase";
   }
   if (header.navEffects) {
+    mergedStyle.effects = {
+      ...mergedStyle.effects,
+      hover: [...mergedStyle.effects?.hover || []],
+      active: [...mergedStyle.effects?.active || []]
+    };
     if (header.navEffects.glow) {
-      hoverRules.push(`filter: drop-shadow(0 0 5px currentColor);`);
+      mergedStyle.effects.hover.push({
+        effectId: "outer-glow",
+        options: { spread: 5 }
+      });
     }
     if (header.navEffects.neumorphic) {
-      console.log("[generateHeaderCss] Generating neumorphic styles for theme:", themeId);
-      baseRules.push(`transition: all 200ms ease;`);
-      baseRules.push(`border-radius: 0.5rem;`);
-      hoverRules.push(`box-shadow: inset 4px 4px 8px #c7c7c7, inset -4px -4px 8px #ffffff;`);
-      hoverRules.push(`color: ${primaryColor};`);
+      mergedStyle.effects.hover.push({
+        effectId: "neumorphic-shadow",
+        options: { mode: "pressed" }
+      });
+      mergedStyle.effects.hover.push({
+        effectId: "text-color-change",
+        options: { hoverColorToken: "primary" }
+      });
     }
     if (header.navEffects.underlineGradient) {
-      cssChunks.push(generateGradientUnderlineCSS(themeId, tokens));
+      mergedStyle.effects.hover.push({
+        effectId: "border-bottom-grow",
+        options: { origin: "center" }
+      });
     }
   }
-  if (baseRules.length > 0) {
-    cssChunks.push(`
-${selector} {
-  ${baseRules.join("\n  ")}
-}
-`);
-  }
-  if (hoverRules.length > 0) {
-    cssChunks.push(`
-${hoverSelector} {
-  ${hoverRules.join("\n  ")}
-}
-`);
-  }
-  if (activeRules.length > 0) {
-    cssChunks.push(`
-${activeSelector} {
-  ${activeRules.join("\n  ")}
-}
-`);
+  const navContainerType = header.navContainer?.type ?? "none";
+  if (navContainerType === "glass" && navStyle === "minimal") {
+    mergedStyle.borderRadius = "full";
+    mergedStyle.effects = {
+      ...mergedStyle.effects,
+      hover: [
+        { effectId: "background-on-hover-alpha", options: { colorToken: "neutral-50", opacity: 10 } },
+        { effectId: "text-color-change", options: { hoverColorToken: "neutral-50" } }
+      ],
+      active: [
+        { effectId: "background-on-hover-alpha", options: { colorToken: "neutral-50", opacity: 18 } },
+        { effectId: "text-color-change", options: { hoverColorToken: "neutral-50" } }
+      ]
+    };
   }
-  return cssChunks.join("");
+  return generateNavLinkCSS({
+    themeId,
+    tokens,
+    theme,
+    style: mergedStyle,
+    className: "header-nav-link"
+  });
 }
 function generateNavContainerStyles(header, themeId, tokens) {
   const navContainer = header.navContainer;
@@ -5818,52 +6358,6 @@ function generateNavContainerStyles(header, themeId, tokens) {
   }
   return "";
 }
-function generateGradientUnderlineCSS(themeId, tokens) {
-  const selector = `:where([data-theme-scope="${themeId}"]) .header-nav-link`;
-  const primaryColor = tokens.getColor("primary");
-  const accentColor = tokens.getColor("accent");
-  return `
-${selector}::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(to right, ${primaryColor}, ${accentColor});
-  transform: scaleX(0);
-  transform-origin: center;
-  transition: transform 0.3s ease;
-}
-
-${selector}:hover::after,
-${selector}[data-active="true"]::after {
-  transform: scaleX(1);
-}
-  `.trim();
-}
-function generateUnderlineGrowCSS(themeId) {
-  const selector = `:where([data-theme-scope="${themeId}"]) .header-nav-link`;
-  return `
-${selector}::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: currentColor;
-  transform: scaleX(0);
-  transform-origin: center;
-  transition: transform 0.3s ease;
-}
-
-${selector}:hover::after,
-${selector}[data-active="true"]::after {
-  transform: scaleX(1);
-}
-  `.trim();
-}
 function generateFloatingContainerStyles(container, themeId, tokens) {
   if (!container) return "";
   const selector = `:where([data-theme-scope="${themeId}"]) .header-floating-container`;
@@ -5920,12 +6414,52 @@ function applyAlpha(color, opacity) {
   const clamped = clampOpacity(opacity, 1);
   if (color.startsWith("rgb(") && color.endsWith(")")) {
     const inner = color.slice(4, -1).trim();
-    const channels = inner.includes("/") ? inner.split("/")[0].trim() : inner;
+    const channels = inner.includes("/") ? (inner.split("/")[0] ?? inner).trim() : inner;
     return `rgb(${channels} / ${clamped})`;
   }
   return color;
 }
 
+// ../blocks/src/theme/footer/generateFooterCss.ts
+function generateFooterCss(options) {
+  const { themeId, theme } = options;
+  const tokens = new TokenResolver(theme);
+  const footer = theme.footer;
+  const cssChunks = [];
+  cssChunks.push(generateFooterNavLinkStyles(footer, themeId, tokens, theme));
+  return cssChunks.filter(Boolean).join("\n\n");
+}
+function generateFooterNavLinkStyles(footer, themeId, tokens, theme) {
+  if (footer.navLinkStyle) {
+    return generateNavLinkCSS({
+      themeId,
+      tokens,
+      theme,
+      style: footer.navLinkStyle,
+      className: "footer-nav-link"
+    });
+  }
+  const navStyle = footer.navStyle ?? "minimal";
+  const basePreset = getNavLinkPreset(navStyle);
+  if (!basePreset) {
+    console.warn(`[generateFooterCss] Nav link preset not found: ${navStyle}`);
+    return "";
+  }
+  const mergedStyle = {
+    ...basePreset,
+    // Override with legacy settings
+    fontWeight: footer.navWeight ?? basePreset.fontWeight,
+    colorToken: footer.navColor?.trim() || basePreset.colorToken
+  };
+  return generateNavLinkCSS({
+    themeId,
+    tokens,
+    theme,
+    style: mergedStyle,
+    className: "footer-nav-link"
+  });
+}
+
 // ../blocks/src/theme/layout/generateLayoutCss.ts
 function generateLayoutCss(options) {
   const { themeId } = options;
@@ -6079,6 +6613,105 @@ ${root} .step-connector {
   return cssBlocks.join("\n\n");
 }
 
+// ../blocks/src/theme/typography/generateTypographyCss.ts
+function generateTypographyCss({ themeId }) {
+  const root = `:where([data-theme-scope="${themeId}"])`;
+  const cssBlocks = [];
+  cssBlocks.push(`/* Base heading styles */
+${root} :where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--font-heading);
+  font-style: var(--fi-heading, normal);
+  text-transform: var(--tt-heading, none);
+  font-variant: var(--fv-heading, normal);
+  margin: 0;
+}`);
+  cssBlocks.push(`/* Heading level styles with fluid typography */
+${root} :where(h1) {
+  font-size: var(--fs-h1-fluid, var(--fs-h1));
+  font-weight: var(--fw-h1, var(--font-weight-heading));
+  font-style: var(--fi-h1, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h1, var(--ls-heading));
+  line-height: var(--lh-h1, var(--lh-heading));
+}
+
+${root} :where(h2) {
+  font-size: var(--fs-h2-fluid, var(--fs-h2));
+  font-weight: var(--fw-h2, var(--font-weight-heading));
+  font-style: var(--fi-h2, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h2, var(--ls-heading));
+  line-height: var(--lh-h2, var(--lh-heading));
+}
+
+${root} :where(h3) {
+  font-size: var(--fs-h3-fluid, var(--fs-h3));
+  font-weight: var(--fw-h3, var(--font-weight-heading));
+  font-style: var(--fi-h3, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h3, var(--ls-heading));
+  line-height: var(--lh-h3, var(--lh-heading));
+}
+
+${root} :where(h4) {
+  font-size: var(--fs-h4-fluid, var(--fs-h4, var(--fs-h3)));
+  font-weight: var(--fw-h4, var(--font-weight-heading));
+  font-style: var(--fi-h4, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h4, var(--ls-heading));
+  line-height: var(--lh-h4, var(--lh-heading));
+}
+
+${root} :where(h5) {
+  font-size: var(--fs-h5-fluid, var(--fs-h5, var(--fs-body)));
+  font-weight: var(--fw-h5, var(--font-weight-heading));
+  font-style: var(--fi-h5, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h5, var(--ls-heading));
+  line-height: var(--lh-h5, var(--lh-heading));
+}
+
+${root} :where(h6) {
+  font-size: var(--fs-h6-fluid, var(--fs-h6, var(--fs-body)));
+  font-weight: var(--fw-h6, var(--font-weight-heading));
+  font-style: var(--fi-h6, var(--fi-heading, normal));
+  letter-spacing: var(--ls-h6, var(--ls-heading));
+  line-height: var(--lh-h6, var(--lh-heading));
+}`);
+  cssBlocks.push(`/* Display variant for hero/splash headings */
+${root} :where(.heading-display) {
+  font-size: var(--fs-display-fluid, var(--fs-display));
+}
+
+${root} :where(h1.heading-display) {
+  font-size: var(--fs-h1-display-fluid, var(--fs-h1-display, calc(var(--fs-h1) * 1.5)));
+}
+
+${root} :where(h2.heading-display) {
+  font-size: var(--fs-h2-display-fluid, var(--fs-h2-display, calc(var(--fs-h2) * 1.35)));
+}`);
+  cssBlocks.push(`/* Compact variant for cards/sidebars */
+${root} :where(.heading-compact) {
+  font-size: var(--fs-compact);
+}
+
+${root} :where(h1.heading-compact) {
+  font-size: calc(var(--fs-h1) * 0.75);
+}
+
+${root} :where(h2.heading-compact) {
+  font-size: calc(var(--fs-h2) * 0.8);
+}
+
+${root} :where(h3.heading-compact) {
+  font-size: calc(var(--fs-h3) * 0.85);
+}`);
+  cssBlocks.push(`/* Body text base styles */
+${root} :where(p, li, td, th, label, span) {
+  font-family: var(--font-body);
+  font-weight: var(--font-weight-body);
+  font-size: var(--fs-body);
+  letter-spacing: var(--ls-body);
+  line-height: var(--lh-body);
+}`);
+  return cssBlocks.join("\n\n");
+}
+
 // ../blocks/src/system/theme/tokens.ts
 var defaultThemeTokens = {
   color: {
@@ -6163,6 +6796,10 @@ function buildThemeRuntime(theme, options) {
     themeId,
     theme
   });
+  const footerCss = generateFooterCss({
+    themeId,
+    theme
+  });
   const cardCss = generateCardCss({
     themeId,
     theme,
@@ -6192,8 +6829,12 @@ function buildThemeRuntime(theme, options) {
     themeId,
     theme
   });
+  const typographyCss = generateTypographyCss({
+    themeId,
+    theme
+  });
   const tokens = buildThemeTokens(hydrated, theme);
-  return { hydrated, cssVars, tokens, paletteTokens: hydrated.palette, buttonCss, headerCss, cardCss, accordionCss, inputCss, layoutCss, statusCss, progressCss };
+  return { hydrated, cssVars, tokens, paletteTokens: hydrated.palette, buttonCss, headerCss, footerCss, cardCss, accordionCss, inputCss, layoutCss, statusCss, progressCss, typographyCss };
 }
 function hydrateTheme(theme) {
   return {
@@ -6223,17 +6864,39 @@ function buildThemeCssVars(theme) {
     ...typography.headings.h1.letterSpacing ? { ["--ls-h1"]: mapLetterSpacing(typography.headings.h1.letterSpacing) } : {},
     ...typography.headings.h2.letterSpacing ? { ["--ls-h2"]: mapLetterSpacing(typography.headings.h2.letterSpacing) } : {},
     ...typography.headings.h3.letterSpacing ? { ["--ls-h3"]: mapLetterSpacing(typography.headings.h3.letterSpacing) } : {},
+    ...typography.headings.h4?.letterSpacing ? { ["--ls-h4"]: mapLetterSpacing(typography.headings.h4.letterSpacing) } : {},
+    ...typography.headings.h5?.letterSpacing ? { ["--ls-h5"]: mapLetterSpacing(typography.headings.h5.letterSpacing) } : {},
+    ...typography.headings.h6?.letterSpacing ? { ["--ls-h6"]: mapLetterSpacing(typography.headings.h6.letterSpacing) } : {},
     ["--lh-heading"]: mapLineHeight(typography.headings.default.lineHeight),
     ["--lh-body"]: mapLineHeight(typography.body.lineHeight),
     ...typography.headings.h1.lineHeight ? { ["--lh-h1"]: mapLineHeight(typography.headings.h1.lineHeight) } : {},
     ...typography.headings.h2.lineHeight ? { ["--lh-h2"]: mapLineHeight(typography.headings.h2.lineHeight) } : {},
     ...typography.headings.h3.lineHeight ? { ["--lh-h3"]: mapLineHeight(typography.headings.h3.lineHeight) } : {},
+    ...typography.headings.h4?.lineHeight ? { ["--lh-h4"]: mapLineHeight(typography.headings.h4.lineHeight) } : {},
+    ...typography.headings.h5?.lineHeight ? { ["--lh-h5"]: mapLineHeight(typography.headings.h5.lineHeight) } : {},
+    ...typography.headings.h6?.lineHeight ? { ["--lh-h6"]: mapLineHeight(typography.headings.h6.lineHeight) } : {},
     ["--tt-heading"]: mapTextTransform(typography.headings.default.case),
     ["--fv-heading"]: mapFontVariant(typography.headings.default.case),
+    ["--fi-heading"]: mapFontStyle(typography.headings.default.italic),
+    // Per-level italic overrides
+    ...typography.headings.h1.italic != null ? { ["--fi-h1"]: mapFontStyle(typography.headings.h1.italic) } : {},
+    ...typography.headings.h2.italic != null ? { ["--fi-h2"]: mapFontStyle(typography.headings.h2.italic) } : {},
+    ...typography.headings.h3.italic != null ? { ["--fi-h3"]: mapFontStyle(typography.headings.h3.italic) } : {},
+    ...typography.headings.h4?.italic != null ? { ["--fi-h4"]: mapFontStyle(typography.headings.h4.italic) } : {},
+    ...typography.headings.h5?.italic != null ? { ["--fi-h5"]: mapFontStyle(typography.headings.h5.italic) } : {},
+    ...typography.headings.h6?.italic != null ? { ["--fi-h6"]: mapFontStyle(typography.headings.h6.italic) } : {},
+    // Static font sizes (fallback)
     ["--fs-body"]: sized.body,
     ["--fs-h3"]: sized.h3,
     ["--fs-h2"]: sized.h2,
     ["--fs-h1"]: sized.h1,
+    // Fluid font sizes (responsive with clamp)
+    ["--fs-h1-fluid"]: sized.h1Fluid,
+    ["--fs-h2-fluid"]: sized.h2Fluid,
+    ["--fs-h3-fluid"]: sized.h3Fluid,
+    // Display variant (for hero/splash headings)
+    ["--fs-h1-display"]: sized.h1Display,
+    ["--fs-h1-display-fluid"]: sized.h1DisplayFluid,
     ["--shadow-elev"]: mapShadow(shadow.elevation, shadow.softness, shadow.position || "bottom"),
     ["--space-mult"]: mapSpaceMult(space),
     ["--motion-duration"]: mapMotionDuration(motion.level),
@@ -6339,33 +7002,81 @@ function mapMotionEasing(e) {
     gentle: "cubic-bezier(.15,.85,.15,1)"
   }[e];
 }
+function normalizeScaleName(scale) {
+  const aliasMap = {
+    minorThird: "compact",
+    majorThird: "balanced",
+    perfectFourth: "spacious",
+    compact: "compact",
+    balanced: "balanced",
+    spacious: "spacious"
+  };
+  return aliasMap[scale] ?? "balanced";
+}
 function computeTypeScale(scale, bodySize) {
   const base = { md: 16, lg: 17, xl: 18 }[bodySize];
-  const ratio = { minorThird: 1.2, majorThird: 1.25, perfectFourth: 1.333 }[scale];
+  const normalizedScale = normalizeScaleName(scale);
+  const ratio = { compact: 1.2, balanced: 1.25, spacious: 1.333 }[normalizedScale];
   const h3 = Math.round(base * ratio);
   const h2 = Math.round(h3 * ratio);
   const h1 = Math.round(h2 * ratio);
+  const fluidMin = 0.7;
+  const fluidMax = 1.3;
   return {
+    // Static sizes (fallback)
     ["--fs-body"]: `${base}px`,
     ["--fs-h3"]: `${h3}px`,
     ["--fs-h2"]: `${h2}px`,
-    ["--fs-h1"]: `${h1}px`
+    ["--fs-h1"]: `${h1}px`,
+    // Fluid typography min/max values
+    ["--fs-h1-min"]: `${Math.round(h1 * fluidMin)}px`,
+    ["--fs-h1-max"]: `${Math.round(h1 * fluidMax)}px`,
+    ["--fs-h2-min"]: `${Math.round(h2 * fluidMin)}px`,
+    ["--fs-h2-max"]: `${Math.round(h2 * fluidMax)}px`,
+    ["--fs-h3-min"]: `${Math.round(h3 * fluidMin)}px`,
+    ["--fs-h3-max"]: `${Math.round(h3 * fluidMax)}px`,
+    // Fluid clamp values (320px to 1200px viewport range = 880px)
+    ["--fs-h1-fluid"]: `clamp(${Math.round(h1 * fluidMin)}px, calc(${Math.round(h1 * fluidMin)}px + ${Math.round(h1 * (fluidMax - fluidMin))} * ((100vw - 320px) / 880)), ${Math.round(h1 * fluidMax)}px)`,
+    ["--fs-h2-fluid"]: `clamp(${Math.round(h2 * fluidMin)}px, calc(${Math.round(h2 * fluidMin)}px + ${Math.round(h2 * (fluidMax - fluidMin))} * ((100vw - 320px) / 880)), ${Math.round(h2 * fluidMax)}px)`,
+    ["--fs-h3-fluid"]: `clamp(${Math.round(h3 * fluidMin)}px, calc(${Math.round(h3 * fluidMin)}px + ${Math.round(h3 * (fluidMax - fluidMin))} * ((100vw - 320px) / 880)), ${Math.round(h3 * fluidMax)}px)`,
+    // Display variant sizes (1.5x for hero headings)
+    ["--fs-h1-display"]: `${Math.round(h1 * 1.5)}px`,
+    ["--fs-h1-display-fluid"]: `clamp(${Math.round(h1 * fluidMin * 1.5)}px, calc(${Math.round(h1 * fluidMin * 1.5)}px + ${Math.round(h1 * (fluidMax - fluidMin) * 1.5)} * ((100vw - 320px) / 880)), ${Math.round(h1 * fluidMax * 1.5)}px)`
   };
 }
+var SIZE_SCALE_MAP = {
+  xs: 0.85,
+  sm: 0.925,
+  md: 1,
+  lg: 1.1,
+  xl: 1.2,
+  "2xl": 1.35
+};
 function applyHeadingSizeOverrides(base, typography) {
   const body = base["--fs-body"];
   const h1Base = parseFloat(base["--fs-h1"].replace("px", ""));
   const h2Base = parseFloat(base["--fs-h2"].replace("px", ""));
   const h3Base = parseFloat(base["--fs-h3"].replace("px", ""));
-  const scaleMap = { md: 1, lg: 1.1, xl: 1.2 };
-  const h1Scale = typography.headings.h1.size ? scaleMap[typography.headings.h1.size] : 1;
-  const h2Scale = typography.headings.h2.size ? scaleMap[typography.headings.h2.size] : 1;
-  const h3Scale = typography.headings.h3.size ? scaleMap[typography.headings.h3.size] : 1;
+  const h1Scale = typography.headings.h1.size ? SIZE_SCALE_MAP[typography.headings.h1.size] : 1;
+  const h2Scale = typography.headings.h2.size ? SIZE_SCALE_MAP[typography.headings.h2.size] : 1;
+  const h3Scale = typography.headings.h3.size ? SIZE_SCALE_MAP[typography.headings.h3.size] : 1;
+  const h1 = Math.round(h1Base * h1Scale);
+  const h2 = Math.round(h2Base * h2Scale);
+  const h3 = Math.round(h3Base * h3Scale);
+  const fluidMin = 0.7;
+  const fluidMax = 1.3;
   return {
     body,
-    h1: `${Math.round(h1Base * h1Scale)}px`,
-    h2: `${Math.round(h2Base * h2Scale)}px`,
-    h3: `${Math.round(h3Base * h3Scale)}px`
+    h1: `${h1}px`,
+    h2: `${h2}px`,
+    h3: `${h3}px`,
+    // Fluid versions with size overrides applied
+    h1Fluid: `clamp(${Math.round(h1 * fluidMin)}px, calc(${Math.round(h1 * fluidMin)}px + ${Math.round(h1 * (fluidMax - fluidMin))} * ((100vw - 320px) / 880)), ${Math.round(h1 * fluidMax)}px)`,
+    h2Fluid: `clamp(${Math.round(h2 * fluidMin)}px, calc(${Math.round(h2 * fluidMin)}px + ${Math.round(h2 * (fluidMax - fluidMin))} * ((100vw - 320px) / 880)), ${Math.round(h2 * fluidMax)}px)`,
+    h3Fluid: `clamp(${Math.round(h3 * fluidMin)}px, calc(${Math.round(h3 * fluidMin)}px + ${Math.round(h3 * (fluidMax - fluidMin))} * ((100vw - 320px) / 880)), ${Math.round(h3 * fluidMax)}px)`,
+    // Display variant (1.5x scale for hero headings)
+    h1Display: `${Math.round(h1 * 1.5)}px`,
+    h1DisplayFluid: `clamp(${Math.round(h1 * 1.5 * fluidMin)}px, calc(${Math.round(h1 * 1.5 * fluidMin)}px + ${Math.round(h1 * 1.5 * (fluidMax - fluidMin))} * ((100vw - 320px) / 880)), ${Math.round(h1 * 1.5 * fluidMax)}px)`
   };
 }
 function mapLetterSpacing(s) {
@@ -6382,29 +7093,32 @@ function mapFontVariant(c) {
   if (c === "smallCaps") return "small-caps";
   return "normal";
 }
+function mapFontStyle(italic) {
+  return italic ? "italic" : "normal";
+}
 
 // ../blocks/src/PageRenderer.tsx
 import * as React5 from "react";
 
 // ../blocks/src/system/manifest/validation.ts
-import { z as z4 } from "zod";
+import { z as z6 } from "zod";
 
 // ../blocks/src/system/manifest/richTextSchema.ts
-import { z as z3 } from "zod";
-var TipTapNodeSchema = z3.lazy(
-  () => z3.object({
-    type: z3.string(),
-    content: z3.array(TipTapNodeSchema).optional(),
-    text: z3.string().optional(),
-    attrs: z3.record(z3.string(), z3.any()).optional(),
-    marks: z3.array(z3.any()).optional()
+import { z as z5 } from "zod";
+var TipTapNodeSchema = z5.lazy(
+  () => z5.object({
+    type: z5.string(),
+    content: z5.array(TipTapNodeSchema).optional(),
+    text: z5.string().optional(),
+    attrs: z5.record(z5.string(), z5.any()).optional(),
+    marks: z5.array(z5.any()).optional()
   })
 );
-var RichTextValueSchema = z3.union([
+var RichTextValueSchema = z5.union([
   // New format: TipTap document directly
   TipTapNodeSchema,
   // Legacy format: wrapped in { doc: {...} }
-  z3.object({
+  z5.object({
     doc: TipTapNodeSchema
   })
 ]);
@@ -6439,7 +7153,7 @@ function createManifestValidator(manifestOrFields, options = {}) {
   for (const field of fields) {
     shape[field.id] = buildFieldSchema(field, allowNull, allowIncomplete);
   }
-  return z4.object(shape).catchall(z4.unknown()).passthrough();
+  return z6.object(shape).catchall(z6.unknown()).passthrough();
 }
 function buildFieldSchema(field, allowNull, allowIncomplete = false) {
   const required = Boolean(field.required);
@@ -6452,13 +7166,13 @@ function buildFieldSchema(field, allowNull, allowIncomplete = false) {
       schema = buildRichTextSchema2();
       break;
     case "media": {
-      const baseMediaSchema = z4.record(z4.string(), z4.unknown());
+      const baseMediaSchema = z6.record(z6.string(), z6.unknown());
       const isRequired = Boolean(field.required);
       schema = isRequired ? baseMediaSchema : baseMediaSchema.nullable();
       break;
     }
     case "boolean":
-      schema = z4.boolean();
+      schema = z6.boolean();
       break;
     case "slug":
       schema = buildSlugSchema(field);
@@ -6482,7 +7196,7 @@ function buildFieldSchema(field, allowNull, allowIncomplete = false) {
       schema = buildGroupSchema(field, allowNull, allowIncomplete);
       break;
     default:
-      schema = z4.unknown();
+      schema = z6.unknown();
       break;
   }
   return finalizeSchema(schema, required, allowNull, allowIncomplete);
@@ -6492,11 +7206,11 @@ function buildTextSchema(field) {
   const inputType = ui?.inputType;
   let schema;
   if (inputType === "number") {
-    schema = z4.coerce.number();
+    schema = z6.coerce.number();
     if (typeof ui?.min === "number") schema = schema.min(ui.min);
     if (typeof ui?.max === "number") schema = schema.max(ui.max);
   } else {
-    schema = z4.string();
+    schema = z6.string();
     if (inputType === "email") {
       schema = schema.email(`${field.label} must be a valid email`);
     }
@@ -6526,7 +7240,7 @@ function buildRichTextSchema2() {
 var SLUG_PATTERN = /^(?:[a-z0-9]+(?:-[a-z0-9]+)*)(?:\/(?:[a-z0-9]+(?:-[a-z0-9]+)*))*$/;
 function buildSlugSchema(field) {
   const message = `${field.label} must contain lowercase letters, numbers, and dashes`;
-  let schema = z4.string().regex(SLUG_PATTERN, message);
+  let schema = z6.string().regex(SLUG_PATTERN, message);
   if (field.maxLength) {
     schema = schema.max(field.maxLength, `${field.label} must be at most ${field.maxLength} characters`);
   }
@@ -6552,19 +7266,19 @@ function buildUrlSchema(field) {
       return false;
     }
   };
-  let schema = z4.string().trim().refine(validate, message);
+  let schema = z6.string().trim().refine(validate, message);
   if (field.required) {
     schema = schema.min(1, `${field.label} is required`);
   }
   return schema;
 }
 function buildLinkSchema() {
-  const nullableString = z4.union([z4.string().min(1), z4.null()]);
-  const internal = z4.object({
-    kind: z4.literal("internal"),
-    routeId: z4.string().min(1),
-    entityId: z4.string().min(1).optional(),
-    entityType: z4.enum(["page", "content"]).optional(),
+  const nullableString = z6.union([z6.string().min(1), z6.null()]);
+  const internal = z6.object({
+    kind: z6.literal("internal"),
+    routeId: z6.string().min(1),
+    entityId: z6.string().min(1).optional(),
+    entityType: z6.enum(["page", "content"]).optional(),
     href: nullableString.optional(),
     title: nullableString.optional(),
     typeLabel: nullableString.optional(),
@@ -6572,36 +7286,36 @@ function buildLinkSchema() {
     contentTypeName: nullableString.optional(),
     updatedAt: nullableString.optional()
   }).passthrough();
-  const external = z4.object({
-    kind: z4.literal("external"),
-    href: z4.string().min(1)
+  const external = z6.object({
+    kind: z6.literal("external"),
+    href: z6.string().min(1)
   }).passthrough();
-  const custom = z4.object({
-    kind: z4.literal("url"),
-    href: z4.string().min(1)
+  const custom = z6.object({
+    kind: z6.literal("url"),
+    href: z6.string().min(1)
   }).passthrough();
-  return z4.union([internal, external, custom]);
+  return z6.union([internal, external, custom]);
 }
 function buildSelectSchema(field) {
   const ui = field.ui;
   if (ui?.widget === "sdkSelect") {
-    const anyStringSchema = z4.string();
+    const anyStringSchema = z6.string();
     if (field.multiple) {
-      const arraySchema = z4.array(anyStringSchema);
+      const arraySchema = z6.array(anyStringSchema);
       return field.required ? arraySchema : arraySchema.nullable();
     }
     return field.required ? anyStringSchema : anyStringSchema.nullable();
   }
   const values = field.options.map((option) => option.value);
-  const valueSchema = z4.string().refine((value) => values.includes(value), `${field.label} must be one of: ${values.join(", ")}`);
+  const valueSchema = z6.string().refine((value) => values.includes(value), `${field.label} must be one of: ${values.join(", ")}`);
   if (field.multiple) {
-    const arraySchema = z4.array(valueSchema);
+    const arraySchema = z6.array(valueSchema);
     return field.required ? arraySchema : arraySchema.nullable();
   }
   return field.required ? valueSchema : valueSchema.nullable();
 }
 function buildReferenceSchema(field) {
-  let schema = z4.string();
+  let schema = z6.string();
   if (field.required) {
     schema = schema.min(1, `${field.label} is required`);
   }
@@ -6620,8 +7334,8 @@ function buildRepeaterSchema(field, allowNull, allowIncomplete) {
       childShape[child.id] = buildFieldSchema(child, allowNull, allowIncomplete);
     }
   }
-  let schema = z4.object(childShape).catchall(z4.unknown()).passthrough();
-  let arraySchema = z4.array(schema);
+  let schema = z6.object(childShape).catchall(z6.unknown()).passthrough();
+  let arraySchema = z6.array(schema);
   if (typeof field.minItems === "number") {
     arraySchema = arraySchema.min(field.minItems);
   }
@@ -6636,14 +7350,14 @@ function buildGroupSchema(field, allowNull, allowIncomplete) {
   for (const child of parsed) {
     childShape[child.id] = buildFieldSchema(child, allowNull, allowIncomplete);
   }
-  return z4.object(childShape).catchall(z4.unknown()).passthrough();
+  return z6.object(childShape).catchall(z6.unknown()).passthrough();
 }
 function finalizeSchema(schema, required, allowNull, allowIncomplete = false) {
   if (required) {
     if (allowIncomplete) {
-      return allowNull ? schema.or(z4.null()).optional() : schema.optional();
+      return allowNull ? schema.or(z6.null()).optional() : schema.optional();
     }
-    return allowNull ? schema.or(z4.null()) : schema;
+    return allowNull ? schema.or(z6.null()) : schema;
   }
   return allowNull ? schema.optional().nullable() : schema.optional();
 }
@@ -6987,6 +7701,10 @@ var resolveLinkTransform = {
       const href = link.href.trim();
       return href.length > 0 ? href : null;
     }
+    if (!kind && typeof link.href === "string") {
+      const href = link.href.trim();
+      return href.length > 0 ? href : null;
+    }
     return null;
   }
 };
@@ -7698,7 +8416,7 @@ var COLUMN_CLASSES = {
   "4": "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
 };
 function formatDateForUrl(isoTimestamp) {
-  return isoTimestamp.split("T")[0];
+  return isoTimestamp.split("T")[0] ?? "";
 }
 function buildEventUrl(basePath, slug, startsAt) {
   const date = formatDateForUrl(startsAt);
@@ -7883,7 +8601,7 @@ function getContainerClass(layout, columns) {
   return `grid gap-6 ${COLUMN_CLASSES2[columns] || COLUMN_CLASSES2["3"]}`;
 }
 function formatDateForUrl2(isoTimestamp) {
-  return isoTimestamp.split("T")[0];
+  return isoTimestamp.split("T")[0] ?? "";
 }
 function buildEventUrl2(basePath, slug, startsAt) {
   const date = formatDateForUrl2(startsAt);
@@ -8102,7 +8820,7 @@ function extractSegmentsFromPart(part) {
   if (!part) return [];
   const segments = [];
   const baseMatch = part.match(/^([^\[]+)/);
-  if (baseMatch) {
+  if (baseMatch && baseMatch[1]) {
     segments.push(baseMatch[1]);
   }
   const bracketMatches = Array.from(part.matchAll(BRACKET_ACCESS_REGEX));
@@ -8732,6 +9450,7 @@ function PageRenderer({
   blockOverrides,
   sdkConfig
 }) {
+  setContextSupabaseUrl(dataContext?.supabaseUrl);
   if (!page || page.blocks.length === 0) {
     return /* @__PURE__ */ jsx21("div", { className: "p-6 text-sm", style: textColorStyle("mutedText"), children: "No blocks found." });
   }
@@ -9499,7 +10218,6 @@ function getDefaultInputSettings() {
 }
 
 export {
-  buildRichTextSchema,
   resolveImageUrl,
   getDefaultComponentRegistry,
   makeDefaultBlockComponent,
@@ -9533,4 +10251,4 @@ chroma-js/src/utils/contrastAPCA.js:
    * https://readtech.org/ARC/
    *)
 */
-//# sourceMappingURL=chunk-TNRADRPH.mjs.map
+//# sourceMappingURL=chunk-LNOUXALA.mjs.map