@riverbankcms/sdk 0.1.0

package/dist/server/theme-bridge.js

@@ -0,0 +1,231 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/theme-bridge/ThemeBridgeProvider.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+
+// src/theme-bridge/generateCssVars.ts
+
+
+
+
+
+
+
+var _blocks = require('@riverbankcms/blocks');
+var SCOPE_ID = "sdk";
+var SYSTEM_FONT_STACK = 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
+var SPACING_CONFIG = {
+  comfortable: { mult: 1.15, rhythm: "1.2rem" },
+  standard: { mult: 1, rhythm: "1rem" },
+  dense: { mult: 0.88, rhythm: "0.75rem" }
+};
+var CORNERS_CONFIG = {
+  square: { control: "0px", card: "0px" },
+  soft: { control: "4px", card: "8px" },
+  rounded: { control: "8px", card: "12px" },
+  pill: { control: "9999px", card: "16px" }
+};
+var SHADOWS_CONFIG = {
+  none: {
+    sm: "none",
+    md: "none",
+    lg: "none",
+    elev: "none"
+  },
+  low: {
+    sm: "0 1px 2px rgba(0,0,0,0.04)",
+    md: "0 2px 4px rgba(0,0,0,0.06)",
+    lg: "0 4px 8px rgba(0,0,0,0.08)",
+    elev: "0 1px 3px rgba(0,0,0,0.06)"
+  },
+  medium: {
+    sm: "0 1px 2px rgba(0,0,0,0.06)",
+    md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
+    lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
+    elev: "0 2px 6px rgba(0,0,0,0.08)"
+  },
+  high: {
+    sm: "0 1px 3px rgba(0,0,0,0.08)",
+    md: "0 6px 12px -2px rgba(0,0,0,0.15), 0 3px 6px -3px rgba(0,0,0,0.1)",
+    lg: "0 20px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1)",
+    elev: "0 4px 12px rgba(0,0,0,0.12)"
+  }
+};
+function hexToRgb(hex) {
+  const h = hex.replace(/^#/, "");
+  const m = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  if (m.length !== 6) {
+    console.warn(`[ThemeBridge] Invalid hex color: ${hex}`);
+    return "0 0 0";
+  }
+  const int = parseInt(m, 16);
+  const r = int >> 16 & 255;
+  const g = int >> 8 & 255;
+  const b = int & 255;
+  return `${r} ${g} ${b}`;
+}
+function normalizeTokenValue(value) {
+  if (value.startsWith("var(")) {
+    return value;
+  }
+  if (value.startsWith("#")) {
+    return hexToRgb(value);
+  }
+  return value;
+}
+function generateThemeBridgeCss(config) {
+  if (!config || typeof config !== "object") {
+    throw new Error(
+      '[ThemeBridge] Invalid config: expected an object with a "tokens" property.'
+    );
+  }
+  if (!config.tokens || typeof config.tokens !== "object" || Array.isArray(config.tokens)) {
+    throw new Error(
+      '[ThemeBridge] Missing "tokens" property in config. ThemeBridgeConfig requires a "tokens" object with color definitions. Example: { tokens: { primary: "#6d28d9", background: "#ffffff" } }'
+    );
+  }
+  const cssVars = {};
+  const cssChunks = [];
+  for (const [name, value] of Object.entries(config.tokens)) {
+    cssVars[`--tb-${name}`] = normalizeTokenValue(value);
+  }
+  const typography = _nullishCoalesce(config.typography, () => ( {}));
+  cssVars["--tb-font-heading"] = _nullishCoalesce(typography.headingFamily, () => ( SYSTEM_FONT_STACK));
+  cssVars["--tb-font-body"] = _nullishCoalesce(typography.bodyFamily, () => ( SYSTEM_FONT_STACK));
+  cssVars["--tb-font-weight-heading"] = String(_nullishCoalesce(typography.headingWeight, () => ( 600)));
+  cssVars["--tb-font-weight-body"] = String(_nullishCoalesce(typography.bodyWeight, () => ( 400)));
+  cssVars["--tb-fs-h1"] = "2.5rem";
+  cssVars["--tb-fs-h2"] = "2rem";
+  cssVars["--tb-fs-h3"] = "1.5rem";
+  cssVars["--tb-fs-body"] = "1rem";
+  cssVars["--tb-ls-heading"] = "-0.02em";
+  cssVars["--tb-ls-body"] = "0";
+  cssVars["--tb-lh-heading"] = "1.2";
+  cssVars["--tb-lh-body"] = "1.6";
+  cssVars["--tb-tt-heading"] = "none";
+  cssVars["--tb-fv-heading"] = "normal";
+  const spacingPreset = SPACING_CONFIG[_nullishCoalesce(config.spacing, () => ( "standard"))];
+  cssVars["--tb-space-mult"] = String(spacingPreset.mult);
+  cssVars["--tb-rt-space-y"] = spacingPreset.rhythm;
+  const corners = _nullishCoalesce(config.corners, () => ( "rounded"));
+  const cornersPreset = CORNERS_CONFIG[corners];
+  cssVars["--tb-radius-control"] = cornersPreset.control;
+  cssVars["--tb-radius-card"] = cornersPreset.card;
+  const shadows = _nullishCoalesce(config.shadows, () => ( "medium"));
+  const shadowsPreset = SHADOWS_CONFIG[shadows];
+  cssVars["--tb-shadow-sm"] = shadowsPreset.sm;
+  cssVars["--tb-shadow-md"] = shadowsPreset.md;
+  cssVars["--tb-shadow-lg"] = shadowsPreset.lg;
+  cssVars["--tb-shadow-elev"] = shadowsPreset.elev;
+  cssVars["--tb-motion-duration"] = "180ms";
+  cssVars["--tb-motion-ease"] = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+  const cssLines = Object.entries(cssVars).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+  cssChunks.push(`:where([data-theme-scope="${SCOPE_ID}"]) {
+${cssLines}
+}`);
+  if (_optionalChain([config, 'access', _ => _.components, 'optionalAccess', _2 => _2.buttons])) {
+    const buttonCss = generateButtonsCss(config, corners, shadows);
+    cssChunks.push(buttonCss);
+  }
+  if (_optionalChain([config, 'access', _3 => _3.components, 'optionalAccess', _4 => _4.cards])) {
+    const cardCss = generateCardsCss(config, corners, shadows);
+    cssChunks.push(cardCss);
+  }
+  if (_optionalChain([config, 'access', _5 => _5.components, 'optionalAccess', _6 => _6.inputs])) {
+    const inputCss = generateInputsCss(config, corners, shadows);
+    cssChunks.push(inputCss);
+  }
+  if (config.overrides) {
+    const overrideCss = generateOverrideCss(config.overrides);
+    cssChunks.push(overrideCss);
+  }
+  return {
+    cssVars,
+    css: cssChunks.join("\n\n")
+  };
+}
+function generateButtonsCss(config, corners, shadows) {
+  const buttonConfig = _optionalChain([config, 'access', _7 => _7.components, 'optionalAccess', _8 => _8.buttons]);
+  let variants = _blocks.getDefaultButtonVariants.call(void 0, );
+  if (typeof buttonConfig === "object" && buttonConfig.variants) {
+    const requestedIds = new Set(buttonConfig.variants);
+    variants = variants.filter((v) => requestedIds.has(v.id));
+  }
+  const settings = {
+    corners,
+    shadow: shadows,
+    borderWidth: "thin",
+    fontWeight: 500,
+    textTransform: "none"
+  };
+  return _blocks.generateButtonCoreCss.call(void 0, SCOPE_ID, variants, settings);
+}
+function generateCardsCss(config, corners, shadows) {
+  const cardConfig = _optionalChain([config, 'access', _9 => _9.components, 'optionalAccess', _10 => _10.cards]);
+  let variants = _blocks.getDefaultCardVariants.call(void 0, );
+  if (typeof cardConfig === "object" && cardConfig.variants) {
+    const requestedIds = new Set(cardConfig.variants);
+    variants = variants.filter((v) => requestedIds.has(v.id));
+  }
+  const settings = {
+    corners,
+    shadow: shadows,
+    borderWidth: "thin"
+  };
+  return _blocks.generateCardCoreCss.call(void 0, SCOPE_ID, variants, settings);
+}
+function generateInputsCss(config, corners, shadows) {
+  const settings = _blocks.getDefaultInputSettings.call(void 0, );
+  settings.corners = corners;
+  settings.shadow = shadows === "none" ? "none" : "low";
+  return _blocks.generateInputCoreCss.call(void 0, SCOPE_ID, settings);
+}
+function generateOverrideCss(overrides) {
+  const chunks = [];
+  for (const [selector, rules] of Object.entries(overrides)) {
+    chunks.push(`:where([data-theme-scope="${SCOPE_ID}"]) ${selector} {
+  ${rules}
+}`);
+  }
+  return chunks.join("\n\n");
+}
+
+// src/theme-bridge/ThemeBridgeProvider.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function ThemeBridgeProvider({
+  config,
+  children,
+  className = "",
+  as: Tag = "div"
+}) {
+  const { css, cssVars } = React.useMemo(
+    () => generateThemeBridgeCss(config),
+    [config]
+  );
+  const inlineStyle = React.useMemo(() => {
+    const style = {};
+    for (const [key, value] of Object.entries(cssVars)) {
+      style[key] = value;
+    }
+    return style;
+  }, [cssVars]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "style", { dangerouslySetInnerHTML: { __html: css } }),
+    React.createElement(
+      Tag,
+      {
+        "data-theme-scope": "sdk",
+        className: `theme-scope ${className}`.trim(),
+        style: inlineStyle
+      },
+      children
+    )
+  ] });
+}
+function useThemeBridgeCss(config) {
+  return React.useMemo(() => generateThemeBridgeCss(config), [config]);
+}
+
+
+
+
+exports.ThemeBridgeProvider = ThemeBridgeProvider; exports.generateThemeBridgeCss = generateThemeBridgeCss; exports.useThemeBridgeCss = useThemeBridgeCss;
+//# sourceMappingURL=theme-bridge.js.map

package/dist/server/theme-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/will/Projects/Business/cms/builder/packages/sdk/dist/server/theme-bridge.js","../../src/theme-bridge/ThemeBridgeProvider.tsx","../../src/theme-bridge/generateCssVars.ts"],"names":[],"mappings":"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","file":"/Users/will/Projects/Business/cms/builder/packages/sdk/dist/server/theme-bridge.js","sourcesContent":[null,"/**\n * ThemeBridgeProvider\n *\n * A lightweight theme provider for SDK sites that want to style Builder blocks\n * without using the full CMS theme system. Generates CSS variables from a\n * simplified configuration.\n *\n * @example Simple tokens only\n * ```tsx\n * import { ThemeBridgeProvider } from '@riverbankcms/sdk/theme-bridge';\n *\n * export default function RootLayout({ children }) {\n *   return (\n *     <ThemeBridgeProvider\n *       config={{\n *         tokens: {\n *           primary: '#6d28d9',\n *           secondary: '#4c1d95',\n *           background: '#ffffff',\n *           text: '#1e293b',\n *         },\n *       }}\n *     >\n *       {children}\n *     </ThemeBridgeProvider>\n *   );\n * }\n * ```\n *\n * @example With component CSS\n * ```tsx\n * <ThemeBridgeProvider\n *   config={{\n *     tokens: {\n *       primary: '#6d28d9',\n *       secondary: '#4c1d95',\n *       white: '#ffffff',\n *       surface: '#f8fafc',\n *       text: '#1e293b',\n *       border: '#e2e8f0',\n *     },\n *     corners: 'rounded',\n *     shadows: 'medium',\n *     components: {\n *       buttons: true,\n *       cards: true,\n *       inputs: true,\n *     },\n *   }}\n * >\n *   {children}\n * </ThemeBridgeProvider>\n * ```\n *\n * @example Pass-through to existing design system\n * ```tsx\n * <ThemeBridgeProvider\n *   config={{\n *     tokens: {\n *       primary: 'var(--brand-purple)',\n *       secondary: 'var(--brand-navy)',\n *       background: 'var(--ds-bg)',\n *     },\n *     components: { buttons: true },\n *   }}\n * >\n *   {children}\n * </ThemeBridgeProvider>\n * ```\n */\n\nimport * as React from 'react';\nimport { generateThemeBridgeCss } from './generateCssVars';\nimport type { ThemeBridgeConfig } from './types';\n\nexport interface ThemeBridgeProviderProps {\n  /** Theme configuration */\n  config: ThemeBridgeConfig;\n  /** Child elements to wrap */\n  children: React.ReactNode;\n  /** Additional class name for the wrapper */\n  className?: string;\n  /** HTML element to use for wrapper (defaults to 'div') */\n  as?: keyof React.JSX.IntrinsicElements;\n}\n\n/**\n * Wraps content and injects CSS variables for Builder block styling.\n *\n * This component generates CSS variables from a simplified theme config\n * and injects them into a wrapper element. All Builder blocks rendered\n * inside will pick up these variables for colors, typography, spacing, etc.\n *\n * Optionally generates component CSS for buttons, cards, and inputs when\n * `config.components` is specified.\n */\nexport function ThemeBridgeProvider({\n  config,\n  children,\n  className = '',\n  as: Tag = 'div',\n}: ThemeBridgeProviderProps) {\n  // Generate CSS variables and stylesheet\n  const { css, cssVars } = React.useMemo(\n    () => generateThemeBridgeCss(config),\n    [config]\n  );\n\n  // Convert cssVars to inline style format\n  const inlineStyle = React.useMemo(() => {\n    const style: Record<string, string> = {};\n    for (const [key, value] of Object.entries(cssVars)) {\n      style[key] = value;\n    }\n    return style;\n  }, [cssVars]);\n\n  return (\n    <>\n      {/* Inject CSS for theme scope */}\n      <style dangerouslySetInnerHTML={{ __html: css }} />\n\n      {/* Wrapper with theme scope attribute and inline CSS variables */}\n      {React.createElement(\n        Tag,\n        {\n          'data-theme-scope': 'sdk',\n          className: `theme-scope ${className}`.trim(),\n          style: inlineStyle as React.CSSProperties,\n        },\n        children\n      )}\n    </>\n  );\n}\n\n/**\n * Hook to access generated CSS variables from theme config.\n * Useful for custom components that need theme values.\n */\nexport function useThemeBridgeCss(config: ThemeBridgeConfig) {\n  return React.useMemo(() => generateThemeBridgeCss(config), [config]);\n}\n","/**\n * CSS Variable Generator for Theme Bridge\n *\n * Generates the CSS variables that Builder blocks expect,\n * from a simplified ThemeBridgeConfig.\n *\n * Key differences from the full CMS theme system:\n * - No shade generation (SDK sites define their own tokens)\n * - Supports arbitrary token names\n * - Supports pass-through of CSS variable references\n * - Opt-in component CSS generation using core generators from @riverbankcms/blocks\n */\n\nimport {\n  generateButtonCoreCss,\n  getDefaultButtonVariants,\n  generateCardCoreCss,\n  getDefaultCardVariants,\n  generateInputCoreCss,\n  getDefaultInputSettings,\n  type ButtonCoreSettings,\n  type CardCoreSettings,\n} from '@riverbankcms/blocks';\n\nimport type {\n  ThemeBridgeConfig,\n  ThemeBridgeOutput,\n  ThemeBridgeSpacing,\n  ThemeBridgeCorners,\n  ThemeBridgeShadows,\n} from './types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SCOPE_ID = 'sdk';\n\nconst SYSTEM_FONT_STACK = 'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"';\n\nconst SPACING_CONFIG: Record<ThemeBridgeSpacing, { mult: number; rhythm: string }> = {\n  comfortable: { mult: 1.15, rhythm: '1.2rem' },\n  standard: { mult: 1.0, rhythm: '1rem' },\n  dense: { mult: 0.88, rhythm: '0.75rem' },\n};\n\nconst CORNERS_CONFIG: Record<ThemeBridgeCorners, { control: string; card: string }> = {\n  square: { control: '0px', card: '0px' },\n  soft: { control: '4px', card: '8px' },\n  rounded: { control: '8px', card: '12px' },\n  pill: { control: '9999px', card: '16px' },\n};\n\nconst SHADOWS_CONFIG: Record<ThemeBridgeShadows, {\n  sm: string;\n  md: string;\n  lg: string;\n  elev: string;\n}> = {\n  none: {\n    sm: 'none',\n    md: 'none',\n    lg: 'none',\n    elev: 'none',\n  },\n  low: {\n    sm: '0 1px 2px rgba(0,0,0,0.04)',\n    md: '0 2px 4px rgba(0,0,0,0.06)',\n    lg: '0 4px 8px rgba(0,0,0,0.08)',\n    elev: '0 1px 3px rgba(0,0,0,0.06)',\n  },\n  medium: {\n    sm: '0 1px 2px rgba(0,0,0,0.06)',\n    md: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',\n    lg: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',\n    elev: '0 2px 6px rgba(0,0,0,0.08)',\n  },\n  high: {\n    sm: '0 1px 3px rgba(0,0,0,0.08)',\n    md: '0 6px 12px -2px rgba(0,0,0,0.15), 0 3px 6px -3px rgba(0,0,0,0.1)',\n    lg: '0 20px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1)',\n    elev: '0 4px 12px rgba(0,0,0,0.12)',\n  },\n};\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n/**\n * Convert hex color to RGB channel format (e.g., \"109 40 217\")\n */\nfunction hexToRgb(hex: string): string {\n  const h = hex.replace(/^#/, '');\n  const m = h.length === 3 ? h.split('').map(c => c + c).join('') : h;\n  if (m.length !== 6) {\n    console.warn(`[ThemeBridge] Invalid hex color: ${hex}`);\n    return '0 0 0';\n  }\n  const int = parseInt(m, 16);\n  const r = (int >> 16) & 255;\n  const g = (int >> 8) & 255;\n  const b = int & 255;\n  return `${r} ${g} ${b}`;\n}\n\n/**\n * Normalize token value to CSS-ready format.\n *\n * - Hex colors are converted to RGB channels\n * - CSS variable references are passed through\n * - Already-formatted RGB values are passed through\n */\nfunction normalizeTokenValue(value: string): string {\n  // Pass through CSS variable references\n  if (value.startsWith('var(')) {\n    return value;\n  }\n\n  // Convert hex to RGB\n  if (value.startsWith('#')) {\n    return hexToRgb(value);\n  }\n\n  // Already RGB or other format - use directly\n  return value;\n}\n\n// ============================================================================\n// Main Generator\n// ============================================================================\n\n/**\n * Generate CSS variables from a ThemeBridgeConfig.\n */\nexport function generateThemeBridgeCss(config: ThemeBridgeConfig): ThemeBridgeOutput {\n  // Validate required config\n  if (!config || typeof config !== 'object') {\n    throw new Error(\n      '[ThemeBridge] Invalid config: expected an object with a \"tokens\" property.'\n    );\n  }\n\n  if (!config.tokens || typeof config.tokens !== 'object' || Array.isArray(config.tokens)) {\n    throw new Error(\n      '[ThemeBridge] Missing \"tokens\" property in config. ' +\n      'ThemeBridgeConfig requires a \"tokens\" object with color definitions. ' +\n      'Example: { tokens: { primary: \"#6d28d9\", background: \"#ffffff\" } }'\n    );\n  }\n\n  const cssVars: Record<string, string> = {};\n  const cssChunks: string[] = [];\n\n  // -------------------------------------------------------------------------\n  // Color Tokens\n  // -------------------------------------------------------------------------\n\n  for (const [name, value] of Object.entries(config.tokens)) {\n    cssVars[`--tb-${name}`] = normalizeTokenValue(value);\n  }\n\n  // -------------------------------------------------------------------------\n  // Typography\n  // -------------------------------------------------------------------------\n\n  const typography = config.typography ?? {};\n  cssVars['--tb-font-heading'] = typography.headingFamily ?? SYSTEM_FONT_STACK;\n  cssVars['--tb-font-body'] = typography.bodyFamily ?? SYSTEM_FONT_STACK;\n  cssVars['--tb-font-weight-heading'] = String(typography.headingWeight ?? 600);\n  cssVars['--tb-font-weight-body'] = String(typography.bodyWeight ?? 400);\n\n  // Font sizes (standard scale)\n  cssVars['--tb-fs-h1'] = '2.5rem';\n  cssVars['--tb-fs-h2'] = '2rem';\n  cssVars['--tb-fs-h3'] = '1.5rem';\n  cssVars['--tb-fs-body'] = '1rem';\n\n  // Letter spacing and line height\n  cssVars['--tb-ls-heading'] = '-0.02em';\n  cssVars['--tb-ls-body'] = '0';\n  cssVars['--tb-lh-heading'] = '1.2';\n  cssVars['--tb-lh-body'] = '1.6';\n\n  // Text transforms\n  cssVars['--tb-tt-heading'] = 'none';\n  cssVars['--tb-fv-heading'] = 'normal';\n\n  // -------------------------------------------------------------------------\n  // Spacing\n  // -------------------------------------------------------------------------\n\n  const spacingPreset = SPACING_CONFIG[config.spacing ?? 'standard'];\n  cssVars['--tb-space-mult'] = String(spacingPreset.mult);\n  cssVars['--tb-rt-space-y'] = spacingPreset.rhythm;\n\n  // -------------------------------------------------------------------------\n  // Corners\n  // -------------------------------------------------------------------------\n\n  const corners = config.corners ?? 'rounded';\n  const cornersPreset = CORNERS_CONFIG[corners];\n  cssVars['--tb-radius-control'] = cornersPreset.control;\n  cssVars['--tb-radius-card'] = cornersPreset.card;\n\n  // -------------------------------------------------------------------------\n  // Shadows\n  // -------------------------------------------------------------------------\n\n  const shadows = config.shadows ?? 'medium';\n  const shadowsPreset = SHADOWS_CONFIG[shadows];\n  cssVars['--tb-shadow-sm'] = shadowsPreset.sm;\n  cssVars['--tb-shadow-md'] = shadowsPreset.md;\n  cssVars['--tb-shadow-lg'] = shadowsPreset.lg;\n  cssVars['--tb-shadow-elev'] = shadowsPreset.elev;\n\n  // -------------------------------------------------------------------------\n  // Motion\n  // -------------------------------------------------------------------------\n\n  cssVars['--tb-motion-duration'] = '180ms';\n  cssVars['--tb-motion-ease'] = 'cubic-bezier(0.2, 0.8, 0.2, 1)';\n\n  // -------------------------------------------------------------------------\n  // Generate CSS Variables Block\n  // -------------------------------------------------------------------------\n\n  const cssLines = Object.entries(cssVars)\n    .map(([key, value]) => `  ${key}: ${value};`)\n    .join('\\n');\n\n  cssChunks.push(`:where([data-theme-scope=\"${SCOPE_ID}\"]) {\\n${cssLines}\\n}`);\n\n  // -------------------------------------------------------------------------\n  // Component CSS (opt-in)\n  // -------------------------------------------------------------------------\n\n  if (config.components?.buttons) {\n    const buttonCss = generateButtonsCss(config, corners, shadows);\n    cssChunks.push(buttonCss);\n  }\n\n  if (config.components?.cards) {\n    const cardCss = generateCardsCss(config, corners, shadows);\n    cssChunks.push(cardCss);\n  }\n\n  if (config.components?.inputs) {\n    const inputCss = generateInputsCss(config, corners, shadows);\n    cssChunks.push(inputCss);\n  }\n\n  // -------------------------------------------------------------------------\n  // Custom Overrides\n  // -------------------------------------------------------------------------\n\n  if (config.overrides) {\n    const overrideCss = generateOverrideCss(config.overrides);\n    cssChunks.push(overrideCss);\n  }\n\n  return {\n    cssVars,\n    css: cssChunks.join('\\n\\n'),\n  };\n}\n\n// ============================================================================\n// Component CSS Generators\n// ============================================================================\n\nfunction generateButtonsCss(\n  config: ThemeBridgeConfig,\n  corners: ThemeBridgeCorners,\n  shadows: ThemeBridgeShadows\n): string {\n  const buttonConfig = config.components?.buttons;\n\n  // Get variants to generate\n  let variants = getDefaultButtonVariants();\n\n  if (typeof buttonConfig === 'object' && buttonConfig.variants) {\n    // Filter to only requested variants\n    const requestedIds = new Set(buttonConfig.variants);\n    variants = variants.filter(v => requestedIds.has(v.id as any));\n  }\n\n  const settings: ButtonCoreSettings = {\n    corners,\n    shadow: shadows,\n    borderWidth: 'thin',\n    fontWeight: 500,\n    textTransform: 'none',\n  };\n\n  return generateButtonCoreCss(SCOPE_ID, variants, settings);\n}\n\nfunction generateCardsCss(\n  config: ThemeBridgeConfig,\n  corners: ThemeBridgeCorners,\n  shadows: ThemeBridgeShadows\n): string {\n  const cardConfig = config.components?.cards;\n\n  // Get variants to generate\n  let variants = getDefaultCardVariants();\n\n  if (typeof cardConfig === 'object' && cardConfig.variants) {\n    // Filter to only requested variants\n    const requestedIds = new Set(cardConfig.variants);\n    variants = variants.filter(v => requestedIds.has(v.id as any));\n  }\n\n  const settings: CardCoreSettings = {\n    corners,\n    shadow: shadows,\n    borderWidth: 'thin',\n  };\n\n  return generateCardCoreCss(SCOPE_ID, variants, settings);\n}\n\nfunction generateInputsCss(\n  config: ThemeBridgeConfig,\n  corners: ThemeBridgeCorners,\n  shadows: ThemeBridgeShadows\n): string {\n  const settings = getDefaultInputSettings();\n\n  // Override with theme settings\n  settings.corners = corners;\n  settings.shadow = shadows === 'none' ? 'none' : 'low';\n\n  return generateInputCoreCss(SCOPE_ID, settings);\n}\n\nfunction generateOverrideCss(overrides: Record<string, string>): string {\n  const chunks: string[] = [];\n\n  for (const [selector, rules] of Object.entries(overrides)) {\n    chunks.push(`:where([data-theme-scope=\"${SCOPE_ID}\"]) ${selector} {\\n  ${rules}\\n}`);\n  }\n\n  return chunks.join('\\n\\n');\n}\n"]}

package/dist/server/theme-bridge.mjs

@@ -0,0 +1,231 @@
+// src/theme-bridge/ThemeBridgeProvider.tsx
+import * as React from "react";
+
+// src/theme-bridge/generateCssVars.ts
+import {
+  generateButtonCoreCss,
+  getDefaultButtonVariants,
+  generateCardCoreCss,
+  getDefaultCardVariants,
+  generateInputCoreCss,
+  getDefaultInputSettings
+} from "@riverbankcms/blocks";
+var SCOPE_ID = "sdk";
+var SYSTEM_FONT_STACK = 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
+var SPACING_CONFIG = {
+  comfortable: { mult: 1.15, rhythm: "1.2rem" },
+  standard: { mult: 1, rhythm: "1rem" },
+  dense: { mult: 0.88, rhythm: "0.75rem" }
+};
+var CORNERS_CONFIG = {
+  square: { control: "0px", card: "0px" },
+  soft: { control: "4px", card: "8px" },
+  rounded: { control: "8px", card: "12px" },
+  pill: { control: "9999px", card: "16px" }
+};
+var SHADOWS_CONFIG = {
+  none: {
+    sm: "none",
+    md: "none",
+    lg: "none",
+    elev: "none"
+  },
+  low: {
+    sm: "0 1px 2px rgba(0,0,0,0.04)",
+    md: "0 2px 4px rgba(0,0,0,0.06)",
+    lg: "0 4px 8px rgba(0,0,0,0.08)",
+    elev: "0 1px 3px rgba(0,0,0,0.06)"
+  },
+  medium: {
+    sm: "0 1px 2px rgba(0,0,0,0.06)",
+    md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
+    lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
+    elev: "0 2px 6px rgba(0,0,0,0.08)"
+  },
+  high: {
+    sm: "0 1px 3px rgba(0,0,0,0.08)",
+    md: "0 6px 12px -2px rgba(0,0,0,0.15), 0 3px 6px -3px rgba(0,0,0,0.1)",
+    lg: "0 20px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1)",
+    elev: "0 4px 12px rgba(0,0,0,0.12)"
+  }
+};
+function hexToRgb(hex) {
+  const h = hex.replace(/^#/, "");
+  const m = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  if (m.length !== 6) {
+    console.warn(`[ThemeBridge] Invalid hex color: ${hex}`);
+    return "0 0 0";
+  }
+  const int = parseInt(m, 16);
+  const r = int >> 16 & 255;
+  const g = int >> 8 & 255;
+  const b = int & 255;
+  return `${r} ${g} ${b}`;
+}
+function normalizeTokenValue(value) {
+  if (value.startsWith("var(")) {
+    return value;
+  }
+  if (value.startsWith("#")) {
+    return hexToRgb(value);
+  }
+  return value;
+}
+function generateThemeBridgeCss(config) {
+  if (!config || typeof config !== "object") {
+    throw new Error(
+      '[ThemeBridge] Invalid config: expected an object with a "tokens" property.'
+    );
+  }
+  if (!config.tokens || typeof config.tokens !== "object" || Array.isArray(config.tokens)) {
+    throw new Error(
+      '[ThemeBridge] Missing "tokens" property in config. ThemeBridgeConfig requires a "tokens" object with color definitions. Example: { tokens: { primary: "#6d28d9", background: "#ffffff" } }'
+    );
+  }
+  const cssVars = {};
+  const cssChunks = [];
+  for (const [name, value] of Object.entries(config.tokens)) {
+    cssVars[`--tb-${name}`] = normalizeTokenValue(value);
+  }
+  const typography = config.typography ?? {};
+  cssVars["--tb-font-heading"] = typography.headingFamily ?? SYSTEM_FONT_STACK;
+  cssVars["--tb-font-body"] = typography.bodyFamily ?? SYSTEM_FONT_STACK;
+  cssVars["--tb-font-weight-heading"] = String(typography.headingWeight ?? 600);
+  cssVars["--tb-font-weight-body"] = String(typography.bodyWeight ?? 400);
+  cssVars["--tb-fs-h1"] = "2.5rem";
+  cssVars["--tb-fs-h2"] = "2rem";
+  cssVars["--tb-fs-h3"] = "1.5rem";
+  cssVars["--tb-fs-body"] = "1rem";
+  cssVars["--tb-ls-heading"] = "-0.02em";
+  cssVars["--tb-ls-body"] = "0";
+  cssVars["--tb-lh-heading"] = "1.2";
+  cssVars["--tb-lh-body"] = "1.6";
+  cssVars["--tb-tt-heading"] = "none";
+  cssVars["--tb-fv-heading"] = "normal";
+  const spacingPreset = SPACING_CONFIG[config.spacing ?? "standard"];
+  cssVars["--tb-space-mult"] = String(spacingPreset.mult);
+  cssVars["--tb-rt-space-y"] = spacingPreset.rhythm;
+  const corners = config.corners ?? "rounded";
+  const cornersPreset = CORNERS_CONFIG[corners];
+  cssVars["--tb-radius-control"] = cornersPreset.control;
+  cssVars["--tb-radius-card"] = cornersPreset.card;
+  const shadows = config.shadows ?? "medium";
+  const shadowsPreset = SHADOWS_CONFIG[shadows];
+  cssVars["--tb-shadow-sm"] = shadowsPreset.sm;
+  cssVars["--tb-shadow-md"] = shadowsPreset.md;
+  cssVars["--tb-shadow-lg"] = shadowsPreset.lg;
+  cssVars["--tb-shadow-elev"] = shadowsPreset.elev;
+  cssVars["--tb-motion-duration"] = "180ms";
+  cssVars["--tb-motion-ease"] = "cubic-bezier(0.2, 0.8, 0.2, 1)";
+  const cssLines = Object.entries(cssVars).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+  cssChunks.push(`:where([data-theme-scope="${SCOPE_ID}"]) {
+${cssLines}
+}`);
+  if (config.components?.buttons) {
+    const buttonCss = generateButtonsCss(config, corners, shadows);
+    cssChunks.push(buttonCss);
+  }
+  if (config.components?.cards) {
+    const cardCss = generateCardsCss(config, corners, shadows);
+    cssChunks.push(cardCss);
+  }
+  if (config.components?.inputs) {
+    const inputCss = generateInputsCss(config, corners, shadows);
+    cssChunks.push(inputCss);
+  }
+  if (config.overrides) {
+    const overrideCss = generateOverrideCss(config.overrides);
+    cssChunks.push(overrideCss);
+  }
+  return {
+    cssVars,
+    css: cssChunks.join("\n\n")
+  };
+}
+function generateButtonsCss(config, corners, shadows) {
+  const buttonConfig = config.components?.buttons;
+  let variants = getDefaultButtonVariants();
+  if (typeof buttonConfig === "object" && buttonConfig.variants) {
+    const requestedIds = new Set(buttonConfig.variants);
+    variants = variants.filter((v) => requestedIds.has(v.id));
+  }
+  const settings = {
+    corners,
+    shadow: shadows,
+    borderWidth: "thin",
+    fontWeight: 500,
+    textTransform: "none"
+  };
+  return generateButtonCoreCss(SCOPE_ID, variants, settings);
+}
+function generateCardsCss(config, corners, shadows) {
+  const cardConfig = config.components?.cards;
+  let variants = getDefaultCardVariants();
+  if (typeof cardConfig === "object" && cardConfig.variants) {
+    const requestedIds = new Set(cardConfig.variants);
+    variants = variants.filter((v) => requestedIds.has(v.id));
+  }
+  const settings = {
+    corners,
+    shadow: shadows,
+    borderWidth: "thin"
+  };
+  return generateCardCoreCss(SCOPE_ID, variants, settings);
+}
+function generateInputsCss(config, corners, shadows) {
+  const settings = getDefaultInputSettings();
+  settings.corners = corners;
+  settings.shadow = shadows === "none" ? "none" : "low";
+  return generateInputCoreCss(SCOPE_ID, settings);
+}
+function generateOverrideCss(overrides) {
+  const chunks = [];
+  for (const [selector, rules] of Object.entries(overrides)) {
+    chunks.push(`:where([data-theme-scope="${SCOPE_ID}"]) ${selector} {
+  ${rules}
+}`);
+  }
+  return chunks.join("\n\n");
+}
+
+// src/theme-bridge/ThemeBridgeProvider.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ThemeBridgeProvider({
+  config,
+  children,
+  className = "",
+  as: Tag = "div"
+}) {
+  const { css, cssVars } = React.useMemo(
+    () => generateThemeBridgeCss(config),
+    [config]
+  );
+  const inlineStyle = React.useMemo(() => {
+    const style = {};
+    for (const [key, value] of Object.entries(cssVars)) {
+      style[key] = value;
+    }
+    return style;
+  }, [cssVars]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: css } }),
+    React.createElement(
+      Tag,
+      {
+        "data-theme-scope": "sdk",
+        className: `theme-scope ${className}`.trim(),
+        style: inlineStyle
+      },
+      children
+    )
+  ] });
+}
+function useThemeBridgeCss(config) {
+  return React.useMemo(() => generateThemeBridgeCss(config), [config]);
+}
+export {
+  ThemeBridgeProvider,
+  generateThemeBridgeCss,
+  useThemeBridgeCss
+};
+//# sourceMappingURL=theme-bridge.mjs.map

package/dist/server/theme-bridge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme-bridge/ThemeBridgeProvider.tsx","../../src/theme-bridge/generateCssVars.ts"],"sourcesContent":["/**\n * ThemeBridgeProvider\n *\n * A lightweight theme provider for SDK sites that want to style Builder blocks\n * without using the full CMS theme system. Generates CSS variables from a\n * simplified configuration.\n *\n * @example Simple tokens only\n * ```tsx\n * import { ThemeBridgeProvider } from '@riverbankcms/sdk/theme-bridge';\n *\n * export default function RootLayout({ children }) {\n *   return (\n *     <ThemeBridgeProvider\n *       config={{\n *         tokens: {\n *           primary: '#6d28d9',\n *           secondary: '#4c1d95',\n *           background: '#ffffff',\n *           text: '#1e293b',\n *         },\n *       }}\n *     >\n *       {children}\n *     </ThemeBridgeProvider>\n *   );\n * }\n * ```\n *\n * @example With component CSS\n * ```tsx\n * <ThemeBridgeProvider\n *   config={{\n *     tokens: {\n *       primary: '#6d28d9',\n *       secondary: '#4c1d95',\n *       white: '#ffffff',\n *       surface: '#f8fafc',\n *       text: '#1e293b',\n *       border: '#e2e8f0',\n *     },\n *     corners: 'rounded',\n *     shadows: 'medium',\n *     components: {\n *       buttons: true,\n *       cards: true,\n *       inputs: true,\n *     },\n *   }}\n * >\n *   {children}\n * </ThemeBridgeProvider>\n * ```\n *\n * @example Pass-through to existing design system\n * ```tsx\n * <ThemeBridgeProvider\n *   config={{\n *     tokens: {\n *       primary: 'var(--brand-purple)',\n *       secondary: 'var(--brand-navy)',\n *       background: 'var(--ds-bg)',\n *     },\n *     components: { buttons: true },\n *   }}\n * >\n *   {children}\n * </ThemeBridgeProvider>\n * ```\n */\n\nimport * as React from 'react';\nimport { generateThemeBridgeCss } from './generateCssVars';\nimport type { ThemeBridgeConfig } from './types';\n\nexport interface ThemeBridgeProviderProps {\n  /** Theme configuration */\n  config: ThemeBridgeConfig;\n  /** Child elements to wrap */\n  children: React.ReactNode;\n  /** Additional class name for the wrapper */\n  className?: string;\n  /** HTML element to use for wrapper (defaults to 'div') */\n  as?: keyof React.JSX.IntrinsicElements;\n}\n\n/**\n * Wraps content and injects CSS variables for Builder block styling.\n *\n * This component generates CSS variables from a simplified theme config\n * and injects them into a wrapper element. All Builder blocks rendered\n * inside will pick up these variables for colors, typography, spacing, etc.\n *\n * Optionally generates component CSS for buttons, cards, and inputs when\n * `config.components` is specified.\n */\nexport function ThemeBridgeProvider({\n  config,\n  children,\n  className = '',\n  as: Tag = 'div',\n}: ThemeBridgeProviderProps) {\n  // Generate CSS variables and stylesheet\n  const { css, cssVars } = React.useMemo(\n    () => generateThemeBridgeCss(config),\n    [config]\n  );\n\n  // Convert cssVars to inline style format\n  const inlineStyle = React.useMemo(() => {\n    const style: Record<string, string> = {};\n    for (const [key, value] of Object.entries(cssVars)) {\n      style[key] = value;\n    }\n    return style;\n  }, [cssVars]);\n\n  return (\n    <>\n      {/* Inject CSS for theme scope */}\n      <style dangerouslySetInnerHTML={{ __html: css }} />\n\n      {/* Wrapper with theme scope attribute and inline CSS variables */}\n      {React.createElement(\n        Tag,\n        {\n          'data-theme-scope': 'sdk',\n          className: `theme-scope ${className}`.trim(),\n          style: inlineStyle as React.CSSProperties,\n        },\n        children\n      )}\n    </>\n  );\n}\n\n/**\n * Hook to access generated CSS variables from theme config.\n * Useful for custom components that need theme values.\n */\nexport function useThemeBridgeCss(config: ThemeBridgeConfig) {\n  return React.useMemo(() => generateThemeBridgeCss(config), [config]);\n}\n","/**\n * CSS Variable Generator for Theme Bridge\n *\n * Generates the CSS variables that Builder blocks expect,\n * from a simplified ThemeBridgeConfig.\n *\n * Key differences from the full CMS theme system:\n * - No shade generation (SDK sites define their own tokens)\n * - Supports arbitrary token names\n * - Supports pass-through of CSS variable references\n * - Opt-in component CSS generation using core generators from @riverbankcms/blocks\n */\n\nimport {\n  generateButtonCoreCss,\n  getDefaultButtonVariants,\n  generateCardCoreCss,\n  getDefaultCardVariants,\n  generateInputCoreCss,\n  getDefaultInputSettings,\n  type ButtonCoreSettings,\n  type CardCoreSettings,\n} from '@riverbankcms/blocks';\n\nimport type {\n  ThemeBridgeConfig,\n  ThemeBridgeOutput,\n  ThemeBridgeSpacing,\n  ThemeBridgeCorners,\n  ThemeBridgeShadows,\n} from './types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst SCOPE_ID = 'sdk';\n\nconst SYSTEM_FONT_STACK = 'ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"';\n\nconst SPACING_CONFIG: Record<ThemeBridgeSpacing, { mult: number; rhythm: string }> = {\n  comfortable: { mult: 1.15, rhythm: '1.2rem' },\n  standard: { mult: 1.0, rhythm: '1rem' },\n  dense: { mult: 0.88, rhythm: '0.75rem' },\n};\n\nconst CORNERS_CONFIG: Record<ThemeBridgeCorners, { control: string; card: string }> = {\n  square: { control: '0px', card: '0px' },\n  soft: { control: '4px', card: '8px' },\n  rounded: { control: '8px', card: '12px' },\n  pill: { control: '9999px', card: '16px' },\n};\n\nconst SHADOWS_CONFIG: Record<ThemeBridgeShadows, {\n  sm: string;\n  md: string;\n  lg: string;\n  elev: string;\n}> = {\n  none: {\n    sm: 'none',\n    md: 'none',\n    lg: 'none',\n    elev: 'none',\n  },\n  low: {\n    sm: '0 1px 2px rgba(0,0,0,0.04)',\n    md: '0 2px 4px rgba(0,0,0,0.06)',\n    lg: '0 4px 8px rgba(0,0,0,0.08)',\n    elev: '0 1px 3px rgba(0,0,0,0.06)',\n  },\n  medium: {\n    sm: '0 1px 2px rgba(0,0,0,0.06)',\n    md: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',\n    lg: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',\n    elev: '0 2px 6px rgba(0,0,0,0.08)',\n  },\n  high: {\n    sm: '0 1px 3px rgba(0,0,0,0.08)',\n    md: '0 6px 12px -2px rgba(0,0,0,0.15), 0 3px 6px -3px rgba(0,0,0,0.1)',\n    lg: '0 20px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1)',\n    elev: '0 4px 12px rgba(0,0,0,0.12)',\n  },\n};\n\n// ============================================================================\n// Utility Functions\n// ============================================================================\n\n/**\n * Convert hex color to RGB channel format (e.g., \"109 40 217\")\n */\nfunction hexToRgb(hex: string): string {\n  const h = hex.replace(/^#/, '');\n  const m = h.length === 3 ? h.split('').map(c => c + c).join('') : h;\n  if (m.length !== 6) {\n    console.warn(`[ThemeBridge] Invalid hex color: ${hex}`);\n    return '0 0 0';\n  }\n  const int = parseInt(m, 16);\n  const r = (int >> 16) & 255;\n  const g = (int >> 8) & 255;\n  const b = int & 255;\n  return `${r} ${g} ${b}`;\n}\n\n/**\n * Normalize token value to CSS-ready format.\n *\n * - Hex colors are converted to RGB channels\n * - CSS variable references are passed through\n * - Already-formatted RGB values are passed through\n */\nfunction normalizeTokenValue(value: string): string {\n  // Pass through CSS variable references\n  if (value.startsWith('var(')) {\n    return value;\n  }\n\n  // Convert hex to RGB\n  if (value.startsWith('#')) {\n    return hexToRgb(value);\n  }\n\n  // Already RGB or other format - use directly\n  return value;\n}\n\n// ============================================================================\n// Main Generator\n// ============================================================================\n\n/**\n * Generate CSS variables from a ThemeBridgeConfig.\n */\nexport function generateThemeBridgeCss(config: ThemeBridgeConfig): ThemeBridgeOutput {\n  // Validate required config\n  if (!config || typeof config !== 'object') {\n    throw new Error(\n      '[ThemeBridge] Invalid config: expected an object with a \"tokens\" property.'\n    );\n  }\n\n  if (!config.tokens || typeof config.tokens !== 'object' || Array.isArray(config.tokens)) {\n    throw new Error(\n      '[ThemeBridge] Missing \"tokens\" property in config. ' +\n      'ThemeBridgeConfig requires a \"tokens\" object with color definitions. ' +\n      'Example: { tokens: { primary: \"#6d28d9\", background: \"#ffffff\" } }'\n    );\n  }\n\n  const cssVars: Record<string, string> = {};\n  const cssChunks: string[] = [];\n\n  // -------------------------------------------------------------------------\n  // Color Tokens\n  // -------------------------------------------------------------------------\n\n  for (const [name, value] of Object.entries(config.tokens)) {\n    cssVars[`--tb-${name}`] = normalizeTokenValue(value);\n  }\n\n  // -------------------------------------------------------------------------\n  // Typography\n  // -------------------------------------------------------------------------\n\n  const typography = config.typography ?? {};\n  cssVars['--tb-font-heading'] = typography.headingFamily ?? SYSTEM_FONT_STACK;\n  cssVars['--tb-font-body'] = typography.bodyFamily ?? SYSTEM_FONT_STACK;\n  cssVars['--tb-font-weight-heading'] = String(typography.headingWeight ?? 600);\n  cssVars['--tb-font-weight-body'] = String(typography.bodyWeight ?? 400);\n\n  // Font sizes (standard scale)\n  cssVars['--tb-fs-h1'] = '2.5rem';\n  cssVars['--tb-fs-h2'] = '2rem';\n  cssVars['--tb-fs-h3'] = '1.5rem';\n  cssVars['--tb-fs-body'] = '1rem';\n\n  // Letter spacing and line height\n  cssVars['--tb-ls-heading'] = '-0.02em';\n  cssVars['--tb-ls-body'] = '0';\n  cssVars['--tb-lh-heading'] = '1.2';\n  cssVars['--tb-lh-body'] = '1.6';\n\n  // Text transforms\n  cssVars['--tb-tt-heading'] = 'none';\n  cssVars['--tb-fv-heading'] = 'normal';\n\n  // -------------------------------------------------------------------------\n  // Spacing\n  // -------------------------------------------------------------------------\n\n  const spacingPreset = SPACING_CONFIG[config.spacing ?? 'standard'];\n  cssVars['--tb-space-mult'] = String(spacingPreset.mult);\n  cssVars['--tb-rt-space-y'] = spacingPreset.rhythm;\n\n  // -------------------------------------------------------------------------\n  // Corners\n  // -------------------------------------------------------------------------\n\n  const corners = config.corners ?? 'rounded';\n  const cornersPreset = CORNERS_CONFIG[corners];\n  cssVars['--tb-radius-control'] = cornersPreset.control;\n  cssVars['--tb-radius-card'] = cornersPreset.card;\n\n  // -------------------------------------------------------------------------\n  // Shadows\n  // -------------------------------------------------------------------------\n\n  const shadows = config.shadows ?? 'medium';\n  const shadowsPreset = SHADOWS_CONFIG[shadows];\n  cssVars['--tb-shadow-sm'] = shadowsPreset.sm;\n  cssVars['--tb-shadow-md'] = shadowsPreset.md;\n  cssVars['--tb-shadow-lg'] = shadowsPreset.lg;\n  cssVars['--tb-shadow-elev'] = shadowsPreset.elev;\n\n  // -------------------------------------------------------------------------\n  // Motion\n  // -------------------------------------------------------------------------\n\n  cssVars['--tb-motion-duration'] = '180ms';\n  cssVars['--tb-motion-ease'] = 'cubic-bezier(0.2, 0.8, 0.2, 1)';\n\n  // -------------------------------------------------------------------------\n  // Generate CSS Variables Block\n  // -------------------------------------------------------------------------\n\n  const cssLines = Object.entries(cssVars)\n    .map(([key, value]) => `  ${key}: ${value};`)\n    .join('\\n');\n\n  cssChunks.push(`:where([data-theme-scope=\"${SCOPE_ID}\"]) {\\n${cssLines}\\n}`);\n\n  // -------------------------------------------------------------------------\n  // Component CSS (opt-in)\n  // -------------------------------------------------------------------------\n\n  if (config.components?.buttons) {\n    const buttonCss = generateButtonsCss(config, corners, shadows);\n    cssChunks.push(buttonCss);\n  }\n\n  if (config.components?.cards) {\n    const cardCss = generateCardsCss(config, corners, shadows);\n    cssChunks.push(cardCss);\n  }\n\n  if (config.components?.inputs) {\n    const inputCss = generateInputsCss(config, corners, shadows);\n    cssChunks.push(inputCss);\n  }\n\n  // -------------------------------------------------------------------------\n  // Custom Overrides\n  // -------------------------------------------------------------------------\n\n  if (config.overrides) {\n    const overrideCss = generateOverrideCss(config.overrides);\n    cssChunks.push(overrideCss);\n  }\n\n  return {\n    cssVars,\n    css: cssChunks.join('\\n\\n'),\n  };\n}\n\n// ============================================================================\n// Component CSS Generators\n// ============================================================================\n\nfunction generateButtonsCss(\n  config: ThemeBridgeConfig,\n  corners: ThemeBridgeCorners,\n  shadows: ThemeBridgeShadows\n): string {\n  const buttonConfig = config.components?.buttons;\n\n  // Get variants to generate\n  let variants = getDefaultButtonVariants();\n\n  if (typeof buttonConfig === 'object' && buttonConfig.variants) {\n    // Filter to only requested variants\n    const requestedIds = new Set(buttonConfig.variants);\n    variants = variants.filter(v => requestedIds.has(v.id as any));\n  }\n\n  const settings: ButtonCoreSettings = {\n    corners,\n    shadow: shadows,\n    borderWidth: 'thin',\n    fontWeight: 500,\n    textTransform: 'none',\n  };\n\n  return generateButtonCoreCss(SCOPE_ID, variants, settings);\n}\n\nfunction generateCardsCss(\n  config: ThemeBridgeConfig,\n  corners: ThemeBridgeCorners,\n  shadows: ThemeBridgeShadows\n): string {\n  const cardConfig = config.components?.cards;\n\n  // Get variants to generate\n  let variants = getDefaultCardVariants();\n\n  if (typeof cardConfig === 'object' && cardConfig.variants) {\n    // Filter to only requested variants\n    const requestedIds = new Set(cardConfig.variants);\n    variants = variants.filter(v => requestedIds.has(v.id as any));\n  }\n\n  const settings: CardCoreSettings = {\n    corners,\n    shadow: shadows,\n    borderWidth: 'thin',\n  };\n\n  return generateCardCoreCss(SCOPE_ID, variants, settings);\n}\n\nfunction generateInputsCss(\n  config: ThemeBridgeConfig,\n  corners: ThemeBridgeCorners,\n  shadows: ThemeBridgeShadows\n): string {\n  const settings = getDefaultInputSettings();\n\n  // Override with theme settings\n  settings.corners = corners;\n  settings.shadow = shadows === 'none' ? 'none' : 'low';\n\n  return generateInputCoreCss(SCOPE_ID, settings);\n}\n\nfunction generateOverrideCss(overrides: Record<string, string>): string {\n  const chunks: string[] = [];\n\n  for (const [selector, rules] of Object.entries(overrides)) {\n    chunks.push(`:where([data-theme-scope=\"${SCOPE_ID}\"]) ${selector} {\\n  ${rules}\\n}`);\n  }\n\n  return chunks.join('\\n\\n');\n}\n"],"mappings":"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","names":[]}

package/dist/server/theme.d.mts

@@ -0,0 +1,40 @@
+/**
+ * Theme utilities for Riverbank CMS
+ *
+ * These utilities help you work with Builder themes in your application.
+ */
+/**
+ * Apply a Builder theme to the DOM by injecting CSS variables
+ *
+ * @param theme - The theme object from Riverbank CMS
+ * @param element - The element to apply the theme to (default: document.documentElement)
+ *
+ * @example
+ * ```ts
+ * const site = await client.getSite({ slug: 'my-site' });
+ * applyTheme(site.theme);
+ * ```
+ */
+declare function applyTheme(theme: Record<string, unknown>, element?: HTMLElement): void;
+/**
+ * Create a theme object with type-safe defaults
+ *
+ * @param partial - Partial theme configuration
+ * @returns Complete theme object
+ *
+ * @example
+ * ```ts
+ * const customTheme = createTheme({
+ *   colors: {
+ *     primary: '#007bff',
+ *   },
+ * });
+ * ```
+ */
+declare function createTheme(partial?: Record<string, unknown>): Record<string, unknown>;
+/**
+ * Re-export theme types from @riverbankcms/blocks when available
+ */
+type Theme = Record<string, unknown>;
+
+export { type Theme, applyTheme, createTheme };

package/dist/server/theme.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Theme utilities for Riverbank CMS
+ *
+ * These utilities help you work with Builder themes in your application.
+ */
+/**
+ * Apply a Builder theme to the DOM by injecting CSS variables
+ *
+ * @param theme - The theme object from Riverbank CMS
+ * @param element - The element to apply the theme to (default: document.documentElement)
+ *
+ * @example
+ * ```ts
+ * const site = await client.getSite({ slug: 'my-site' });
+ * applyTheme(site.theme);
+ * ```
+ */
+declare function applyTheme(theme: Record<string, unknown>, element?: HTMLElement): void;
+/**
+ * Create a theme object with type-safe defaults
+ *
+ * @param partial - Partial theme configuration
+ * @returns Complete theme object
+ *
+ * @example
+ * ```ts
+ * const customTheme = createTheme({
+ *   colors: {
+ *     primary: '#007bff',
+ *   },
+ * });
+ * ```
+ */
+declare function createTheme(partial?: Record<string, unknown>): Record<string, unknown>;
+/**
+ * Re-export theme types from @riverbankcms/blocks when available
+ */
+type Theme = Record<string, unknown>;
+
+export { type Theme, applyTheme, createTheme };

package/dist/server/theme.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/theme/index.ts
+function applyTheme(theme, element) {
+  const targetElement = _nullishCoalesce(element, () => ( (typeof document !== "undefined" ? document.documentElement : null)));
+  if (!targetElement) {
+    console.warn("[Builder SDK] Cannot apply theme: no document available");
+    return;
+  }
+  targetElement.setAttribute("data-builder-theme", JSON.stringify(theme));
+}
+function createTheme(partial = {}) {
+  return { ...partial };
+}
+
+
+
+exports.applyTheme = applyTheme; exports.createTheme = createTheme;
+//# sourceMappingURL=theme.js.map