@nuitee/booking-widget 1.0.2 → 1.0.4

package/dist/booking-widget.js

@@ -1,4 +1,4 @@
-(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_live_51T0SdzEj1UJpIPAMQQUH55w3Dj1E07CihP3iTOVO1IM4mMVAJvE86BiUmzGQKuNPPl05btyY39lRca8PSzRzZ9K700CncmOGQ0';})();
+(function(){'use strict';window.__BOOKING_WIDGET_API_BASE_URL__='https://ai.thehotelplanet.com';window.__BOOKING_WIDGET_STRIPE_KEY__='pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';window.__BOOKING_WIDGET_DEFAULT_COLORS__={"background":"#022c32","text":"#ffffff","primary":"#f59e0b","primaryText":"#ffffff","card":"#395b60"};})();
 // ===== Icons (Lucide/shadcn) =====
 const icons = {
   calendar: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`,
@@ -51,6 +51,54 @@ function escapeHTML(value) {
     .replace(/'/g, '&#39;');
 }
 
+function deriveWidgetStyles(c) {
+  if (!c || (!c.background && !c.text && !c.primary && !c.primaryText)) return {};
+  var expandHex = function (hex) {
+    if (!hex || typeof hex !== 'string') return null;
+    var h = hex.replace(/^#/, '').trim();
+    if (h.length === 3) return '#' + h.split('').map(function (x) { return x + x; }).join('');
+    return h.length === 6 ? '#' + h : null;
+  };
+  var hexToRgb = function (hex) {
+    var x = expandHex(hex);
+    if (!x) return null;
+    return [parseInt(x.slice(1, 3), 16), parseInt(x.slice(3, 5), 16), parseInt(x.slice(5, 7), 16)];
+  };
+  var hexToHsl = function (hex) {
+    var x = expandHex(hex);
+    if (!x) return null;
+    var r = parseInt(x.slice(1, 3), 16) / 255, g = parseInt(x.slice(3, 5), 16) / 255, b = parseInt(x.slice(5, 7), 16) / 255;
+    var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, l = (max + min) / 2;
+    if (max === min) h = s = 0;
+    else {
+      var d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+      else if (max === g) h = ((b - r) / d + 2) / 6;
+      else h = ((r - g) / d + 4) / 6;
+    }
+    return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+  };
+  var bg = c.background || '#1a1a1a', fg = c.text || '#e0e0e0', primary = c.primary || '#3b82f6', primaryFg = c.primaryText || '#ffffff';
+  var primaryRgb = hexToRgb(primary), bgHsl = hexToHsl(bg), fgHsl = hexToHsl(fg);
+  var styles = { '--primary': primary, '--primary-fg': primaryFg, '--bg': bg, '--fg': fg, '--card-fg': fg };
+  if (primaryRgb) styles['--primary-rgb'] = primaryRgb[0] + ', ' + primaryRgb[1] + ', ' + primaryRgb[2];
+  styles['--card'] = c.card || (bgHsl ? 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 2) + '%)' : bg);
+  if (bgHsl) {
+    styles['--secondary'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 10) + '%)';
+    styles['--border'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 14) + '%)';
+    styles['--input-bg'] = 'hsl(' + bgHsl[0] + ', ' + bgHsl[1] + '%, ' + Math.min(95, bgHsl[2] + 6) + '%)';
+  }
+  if (fgHsl) {
+    styles['--secondary-fg'] = 'hsl(' + fgHsl[0] + ', ' + fgHsl[1] + '%, ' + Math.max(20, fgHsl[2] - 10) + '%)';
+    styles['--muted'] = 'hsl(' + fgHsl[0] + ', ' + fgHsl[1] + '%, ' + Math.max(30, fgHsl[2] - 25) + '%)';
+  }
+  styles['--font-serif'] = "'Playfair Display', Georgia, serif";
+  styles['--font-sans'] = "'Inter', system-ui, sans-serif";
+  styles['--radius'] = '0.75rem';
+  return styles;
+}
+
 function getDefaultRooms() {
   return [];
 }
@@ -59,6 +107,9 @@ function getDefaultRates() {
   return [];
 }
 
+// In-memory cache shared across all widget instances (keyed by propertyKey).
+var __bwConfigCache = {};
+
 // ===== Core Widget Class =====
 class BookingWidget {
   constructor(options = {}) {
@@ -108,14 +159,20 @@ class BookingWidget {
       s3BaseUrl: options.s3BaseUrl || null,
       /** Base URL for confirmation status polling (same as API_BASE_URL). Default https://ai.thehotelplanet.com */
       confirmationBaseUrl: options.confirmationBaseUrl || 'https://ai.thehotelplanet.com',
-      // Color customization options
-      colors: {
-        background: options.colors?.background || null,
-        text: options.colors?.text || null,
-        primary: options.colors?.primary || null,
-        primaryText: options.colors?.primaryText || null,
-        ...options.colors
-      },
+      // Color customization: CONFIG defaults from load-config, installer colors override
+      colors: (function () {
+        const dc = (typeof window !== 'undefined' && window.__BOOKING_WIDGET_DEFAULT_COLORS__) ? window.__BOOKING_WIDGET_DEFAULT_COLORS__ : {};
+        const inst = options.colors && typeof options.colors === 'object' ? options.colors : {};
+        return {
+          background: inst.background ?? dc.background ?? null,
+          text: inst.text ?? dc.text ?? null,
+          primary: inst.primary ?? dc.primary ?? null,
+          primaryText: inst.primaryText ?? dc.primaryText ?? null,
+          // When card omitted, use installer's background for consistency
+          card: inst.card ?? inst.background ?? dc.card ?? dc.background ?? null,
+          ...inst
+        };
+      })(),
       ...options
     };
 
@@ -166,6 +223,16 @@ class BookingWidget {
     this.stripeInstance = null;
     this.elementsInstance = null;
 
+    // Store raw installer colors so they can be re-merged with API-fetched colors.
+    this._rawInstallerColors = options.colors && typeof options.colors === 'object'
+      ? Object.assign({}, options.colors)
+      : {};
+
+    // Config fetch state: 'idle' | 'loading' | 'loaded' | 'error'
+    this._configState = 'idle';
+    this._configError = null;
+    this._configPromise = null;
+
     this.calendarMonth = null;
     this.calendarYear = null;
     this.pickState = 0;
@@ -229,8 +296,13 @@ class BookingWidget {
   // ===== Widget Open/Close =====
   open() {
     if (!this.container) this.init();
+    if (!this.overlay || !this.widget) return; // container element not found
     this.overlay.classList.add('active');
     this.widget.classList.add('active');
+    // Only fetch config when propertyKey is present; missing-key is rendered inside the modal.
+    if (this.options.propertyKey && String(this.options.propertyKey).trim() && this._configState === 'idle') {
+      this._fetchRuntimeConfig();
+    }
     this.render();
     if (this.options.onOpen) this.options.onOpen();
   }
@@ -266,6 +338,15 @@ class BookingWidget {
   }
 
   goToStep(step) {
+    // Block room/rate navigation until runtime config (colors + styles) has loaded.
+    if ((step === 'rooms' || step === 'rates') && this._configState !== 'loaded') {
+      if (this._configState === 'loading' && this._configPromise) {
+        this._configPromise.then(() => {
+          if (this._configState === 'loaded') this.goToStep(step);
+        });
+      }
+      return;
+    }
     const doRender = () => {
       if (step !== 'summary' && step !== 'payment') {
         this.checkoutShowPaymentForm = false;
@@ -326,20 +407,19 @@ class BookingWidget {
     }
 
     this.container = container;
-    
-    // Create overlay
+
+    // Always create the overlay and modal so the error is shown inside the dialog,
+    // consistent with the React and Vue behaviour.
     this.overlay = document.createElement('div');
     this.overlay.className = 'booking-widget-overlay';
     this.overlay.addEventListener('click', () => this.close());
     container.appendChild(this.overlay);
 
-    // Create widget modal
     this.widget = document.createElement('div');
     this.widget.className = 'booking-widget-modal';
     this.widget.innerHTML = `
       <button class="booking-widget-close">${iconHTML('x', '1.5em')}</button>
       <div class="booking-widget-step-indicator"></div>
-      <div class="booking-widget-property-key-message" role="alert" style="display:none;margin:0 1.5em 1em;padding:0.75em 1em;background:var(--destructive,#ef4444);color:#fff;border-radius:8px;font-size:0.9em;"></div>
       <div class="booking-widget-step-content"></div>
     `;
     this.widget.querySelector('.booking-widget-close').addEventListener('click', () => this.close());
@@ -349,35 +429,85 @@ class BookingWidget {
     });
     container.appendChild(this.widget);
 
-    // Apply custom colors
     this.applyColors();
-
-    // Inject CSS if not already present
     this.injectCSS();
   }
 
   applyColors() {
     if (!this.widget) return;
-    
     const colors = this.options.colors;
     if (!colors) return;
-    
-    const style = this.widget.style;
-    
-    if (colors.background) {
-      style.setProperty('--bg', colors.background);
-      style.setProperty('--card', colors.background);
-    }
-    if (colors.text) {
-      style.setProperty('--fg', colors.text);
-      style.setProperty('--card-fg', colors.text);
-    }
-    if (colors.primary) {
-      style.setProperty('--primary', colors.primary);
-    }
-    if (colors.primaryText) {
-      style.setProperty('--primary-fg', colors.primaryText);
+    const styles = deriveWidgetStyles(colors);
+    const el = this.widget.style;
+    for (var k in styles) if (styles[k] != null && styles[k] !== '') el.setProperty(k, styles[k]);
+  }
+
+  /**
+   * Merge API-fetched colors with installer-provided raw colors and update
+   * this.options.colors so applyColors() uses the runtime values.
+   */
+  _applyApiColors(apiColors) {
+    const inst = this._rawInstallerColors || {};
+    this.options.colors = {
+      background:  inst.background  != null ? inst.background  : (apiColors.background  || null),
+      text:        inst.text        != null ? inst.text        : (apiColors.text        || null),
+      primary:     inst.primary     != null ? inst.primary     : (apiColors.primary     || null),
+      primaryText: inst.primaryText != null ? inst.primaryText : (apiColors.primaryText || null),
+      card:        inst.card        != null ? inst.card        : (inst.background != null ? inst.background : (apiColors.card || null)),
+    };
+  }
+
+  /**
+   * Fetch runtime styling config from /load-config.
+   * Caches result in __bwConfigCache (module-level, shared across instances).
+   * On success: merges colors, applies them, and re-renders.
+   * On error: sets _configState to 'error' and re-renders to show the error banner.
+   */
+  _fetchRuntimeConfig() {
+    const self = this;
+    const propertyKey = this.options.propertyKey;
+    const key = String(propertyKey).trim();
+    const isSandbox = this.options.mode === 'sandbox';
+    // Cache key is mode-aware so sandbox and live configs are stored separately.
+    const cacheKey = isSandbox ? key + ':sandbox' : key;
+
+    if (__bwConfigCache[cacheKey]) {
+      this._applyApiColors(__bwConfigCache[cacheKey]);
+      this._configState = 'loaded';
+      this.applyColors();
+      return Promise.resolve(__bwConfigCache[cacheKey]);
     }
+
+    this._configState = 'loading';
+    this.render();
+
+    const url = 'https://ai.thehotelplanet.com/load-config?apikey=' + encodeURIComponent(key) + (isSandbox ? '&mode=sandbox' : '');
+    this._configPromise = fetch(url)
+      .then(function (res) {
+        if (!res.ok) throw new Error('Failed to load widget configuration (HTTP ' + res.status + ').');
+        return res.json();
+      })
+      .then(function (data) {
+        const apiColors = {};
+        if (data.widgetBackground) apiColors.background  = data.widgetBackground;
+        if (data.widgetTextColor)  apiColors.text        = data.widgetTextColor;
+        if (data.primaryColor)     apiColors.primary     = data.primaryColor;
+        if (data.buttonTextColor)  apiColors.primaryText = data.buttonTextColor;
+        if (data.widgetCardColor)  apiColors.card        = data.widgetCardColor;
+        __bwConfigCache[cacheKey] = apiColors;
+        self._applyApiColors(apiColors);
+        self._configState = 'loaded';
+        self.applyColors();
+        self.render();
+        return apiColors;
+      })
+      .catch(function (err) {
+        self._configError = err.message || 'Failed to load widget configuration.';
+        self._configState = 'error';
+        self.render();
+      });
+
+    return this._configPromise;
   }
 
   injectCSS() {
@@ -411,7 +541,7 @@ class BookingWidget {
     if (!el) return;
     const key = this.options.propertyKey;
     const hasPropertyKey = key != null && key !== '' && (typeof key !== 'string' || key.trim() !== '');
-    if (!hasPropertyKey || this.state.step === 'confirmation') {
+    if (!hasPropertyKey || this._configState !== 'loaded' || this.state.step === 'confirmation') {
       el.innerHTML = '';
       return;
     }
@@ -434,23 +564,73 @@ class BookingWidget {
   renderPropertyKeyMessage() {
     const el = this.widget.querySelector('.booking-widget-property-key-message');
     if (!el) return;
-    const key = this.options.propertyKey;
-    const missing = !key || (typeof key === 'string' && !key.trim());
-    if (missing) {
-      el.style.display = 'block';
-      el.innerHTML = 'The propertyKey is missing. Please provide it as a prop to load rooms from the API.';
-    } else {
-      el.style.display = 'none';
-    }
+    // Config errors are now rendered inside renderStepContent via the full error card.
+    el.style.display = 'none';
+  }
+
+  _retryConfigFetch() {
+    this._configState = 'idle';
+    this._configError = null;
+    this._configPromise = null;
+    this._fetchRuntimeConfig();
+  }
+
+  _configErrorHTML(type, title, body, hint) {
+    const lockIcon = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>`;
+    const warnIcon = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>`;
+    const retryIcon = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`;
+    const icon = type === 'missing' ? lockIcon : warnIcon;
+    const badgeLabel = type === 'missing'
+      ? `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg> Missing Configuration`
+      : 'Configuration Error';
+    const retryBtn = type === 'fetch'
+      ? `<button class="booking-widget-config-error__retry" onclick="window.bookingWidgetInstance && window.bookingWidgetInstance._retryConfigFetch()">${retryIcon} Try Again</button>`
+      : '';
+    return `<div class="booking-widget-config-error" role="alert">
+      <div class="booking-widget-config-error__icon-wrap">${icon}</div>
+      <span class="booking-widget-config-error__badge">${badgeLabel}</span>
+      <h3 class="booking-widget-config-error__title">${escapeHTML(title)}</h3>
+      <p class="booking-widget-config-error__desc">${body}</p>
+      <div class="booking-widget-config-error__divider"></div>
+      <p class="booking-widget-config-error__hint">${escapeHTML(hint)}</p>
+      ${retryBtn}
+    </div>`;
   }
 
   // ===== Step Renderers =====
   renderStepContent() {
     const el = this.widget.querySelector('.booking-widget-step-content');
     if (!el) return;
+
+    // Missing propertyKey — show error card inside the modal, same as React/Vue.
     const key = this.options.propertyKey;
-    const hasPropertyKey = key != null && key !== '' && (typeof key !== 'string' || key.trim() !== '');
-    if (!hasPropertyKey) {
+    if (!key || !String(key).trim()) {
+      el.innerHTML = this._configErrorHTML(
+        'missing',
+        'Widget Not Configured',
+        'A <code>propertyKey</code> option is required to initialize this booking widget. Please provide it to load rooms and availability.',
+        'Contact the site administrator to configure this widget.'
+      );
+      return;
+    }
+
+    if (this._configState === 'loading') {
+      el.innerHTML = `<div class="booking-widget-config-loading">
+        <div class="booking-widget-config-loading__spinner"></div>
+        <span class="booking-widget-config-loading__text">Loading configuration\u2026</span>
+      </div>`;
+      return;
+    }
+    if (this._configState === 'error') {
+      el.innerHTML = this._configErrorHTML(
+        'fetch',
+        'Could Not Load Config',
+        escapeHTML(this._configError || 'An unexpected error occurred.'),
+        'Please try again or contact support.'
+      );
+      return;
+    }
+    if (this._configState !== 'loaded') {
       el.innerHTML = '';
       return;
     }

package/dist/core/booking-api.js

@@ -618,6 +618,16 @@ function buildCheckoutPayload(state, options = {}) {
  * @param {Object} [options] - { propertyKey: string, sandbox?: boolean }
  * @returns {{ rate_identifier: string, key: string, metadata: Object, sandbox?: boolean }}
  */
+function generateUUID() {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+  });
+}
+
 function buildPaymentIntentPayload(state, options = {}) {
   const rawKey = options.propertyKey != null && options.propertyKey !== '' ? String(options.propertyKey).trim() : '';
   const propertyKey = rawKey && rawKey.startsWith('book_engine_') ? rawKey : '';
@@ -657,6 +667,7 @@ function buildPaymentIntentPayload(state, options = {}) {
       email: g.email ?? '',
       occupancies: occupanciesForPayload,
       source_transaction: 'booking engine',
+      booking_code: generateUUID(),
     },
   };
   if (sandbox) out.sandbox = true;

package/dist/core/color-utils.js

@@ -0,0 +1,103 @@
+/**
+ * Color utilities for widget theming. Installers pass 4 base colors (background, text, primary, primaryText);
+ * we derive --card, --secondary, --muted, --border, --input-bg for a coherent theme.
+ */
+
+function expandHex(hex) {
+  if (!hex || typeof hex !== 'string') return null;
+  const h = hex.replace(/^#/, '').trim();
+  if (h.length === 3) return '#' + h.split('').map((c) => c + c).join('');
+  return h.length === 6 ? '#' + h : null;
+}
+
+function hexToRgb(hex) {
+  const expanded = expandHex(hex);
+  if (!expanded) return null;
+  return [
+    parseInt(expanded.slice(1, 3), 16),
+    parseInt(expanded.slice(3, 5), 16),
+    parseInt(expanded.slice(5, 7), 16),
+  ];
+}
+
+function hexToHsl(hex) {
+  const expanded = expandHex(hex);
+  if (!expanded) return null;
+  let r = parseInt(expanded.slice(1, 3), 16) / 255;
+  let g = parseInt(expanded.slice(3, 5), 16) / 255;
+  let b = parseInt(expanded.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h, s;
+  const l = (max + min) / 2;
+  if (max === min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+      default: h = 0;
+    }
+  }
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+
+/**
+ * Derive full widget CSS variables from 4 base colors.
+ * @param {Object} c - { background, text, primary, primaryText, card? }
+ * @returns {Object} CSS variable names to values, e.g. { '--bg': '#1a1a1a', ... }
+ */
+export function deriveWidgetStyles(c) {
+  if (!c || (!c.background && !c.text && !c.primary && !c.primaryText)) return {};
+  const bg = c.background || '#1a1a1a';
+  const fg = c.text || '#e0e0e0';
+  const primary = c.primary || '#3b82f6';
+  const primaryFg = c.primaryText || '#ffffff';
+  const cardExplicit = c.card;
+
+  const primaryRgb = hexToRgb(primary);
+  const bgHsl = hexToHsl(bg);
+  const fgHsl = hexToHsl(fg);
+
+  const styles = {
+    '--primary': primary,
+    '--primary-fg': primaryFg,
+    '--bg': bg,
+    '--fg': fg,
+    '--card-fg': fg,
+  };
+
+  if (primaryRgb) styles['--primary-rgb'] = `${primaryRgb[0]}, ${primaryRgb[1]}, ${primaryRgb[2]}`;
+
+  if (cardExplicit) {
+    styles['--card'] = cardExplicit + "40";
+    styles['--card-solid'] = cardExplicit;
+  } else if (bgHsl) {
+    const cardVal = `hsl(${bgHsl[0]}, ${bgHsl[1]}%, ${Math.min(95, bgHsl[2] + 2)}%)`;
+    styles['--card'] = cardVal;
+    styles['--card-solid'] = cardVal;
+  } else {
+    styles['--card'] = bg;
+    styles['--card-solid'] = bg;
+  }
+
+  if (bgHsl) {
+    styles['--secondary'] = `hsl(${bgHsl[0]}, ${bgHsl[1]}%, ${Math.min(95, bgHsl[2] + 10)}%)`;
+    styles['--border'] = `hsl(${bgHsl[0]}, ${bgHsl[1]}%, ${Math.min(95, bgHsl[2] + 14)}%)`;
+    styles['--input-bg'] = `hsl(${bgHsl[0]}, ${bgHsl[1]}%, ${Math.min(95, bgHsl[2] + 6)}%)`;
+  }
+
+  if (fgHsl) {
+    styles['--secondary-fg'] = `hsl(${fgHsl[0]}, ${fgHsl[1]}%, ${Math.max(20, fgHsl[2] - 10)}%)`;
+    styles['--muted'] = `hsl(${fgHsl[0]}, ${fgHsl[1]}%, ${Math.max(30, fgHsl[2] - 25)}%)`;
+  }
+
+  styles['--font-serif'] = "'Playfair Display', Georgia, serif";
+  styles['--font-sans'] = "'Inter', system-ui, sans-serif";
+  styles['--radius'] = '0.75rem';
+
+  return styles;
+}

package/dist/core/stripe-config.js

@@ -1,8 +1,10 @@
 /**
  * Config from CONFIG_URL (default https://ai.thehotelplanet.com/load-config). No .env used.
  * Property key is NOT from load-config; installers must set it (VITE_PROPERTY_KEY in app .env or propertyKey option).
+ * DEFAULT_COLORS from load-config CONFIG; installers can override via colors prop.
  */
-export const STRIPE_PUBLISHABLE_KEY = 'pk_live_51T0SdzEj1UJpIPAMQQUH55w3Dj1E07CihP3iTOVO1IM4mMVAJvE86BiUmzGQKuNPPl05btyY39lRca8PSzRzZ9K700CncmOGQ0';
+export const STRIPE_PUBLISHABLE_KEY = 'pk_test_51T0Se5EvQaQIixshRA8gbsI40NubMGwHlSWZmQM2LAx3jpVO0ThzVifqdTiMeGOyBfLNe8V9G8POGu8SjkvWOStM00H0i1U3uz';
 export const API_BASE_URL = 'https://ai.thehotelplanet.com';
 export const VITE_CONFIG_BASE_URL = 'https://ai.thehotelplanet.com/api';
 export const VITE_AWS_S3_PATH = 'https://nuitee-s3-temp.s3.us-west-1.amazonaws.com';
+export const DEFAULT_COLORS = {"background":"#022c32","text":"#ffffff","primary":"#f59e0b","primaryText":"#ffffff","card":"#395b60"};

package/dist/core/styles.css

@@ -81,6 +81,7 @@
   --bg: hsl(30, 10%, 8%);
   --fg: hsl(40, 20%, 90%);
   --card: hsl(30, 8%, 12%);
+  --card-solid: hsl(30, 8%, 12%);
   --card-fg: hsl(40, 20%, 90%);
   --primary: hsl(38, 60%, 55%);
   --primary-fg: hsl(30, 10%, 8%);
@@ -106,6 +107,145 @@
   font-weight: 500;
 }
 
+/* ===== Config Error State ===== */
+.booking-widget-config-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.1em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-error__icon-wrap {
+  width: 5em;
+  height: 5em;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.04) 100%);
+  border: 1.5px solid rgba(239, 68, 68, 0.22);
+  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #f87171;
+  flex-shrink: 0;
+  margin-bottom: 0.25em;
+}
+
+.booking-widget-config-error__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: 0.7em;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #f87171;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.18);
+  border-radius: 99em;
+  padding: 0.3em 0.85em;
+}
+
+.booking-widget-config-error__title {
+  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
+  font-size: 1.35em;
+  font-weight: 600;
+  color: var(--fg, #e8e0d5);
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.booking-widget-config-error__desc {
+  font-size: 0.875em;
+  color: var(--secondary-fg, #a09080);
+  max-width: 25em;
+  line-height: 1.7;
+  margin: 0;
+}
+
+.booking-widget-config-error__desc code {
+  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, monospace;
+  font-size: 0.88em;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--primary, #f59e0b);
+  padding: 0.12em 0.45em;
+  border-radius: 0.3em;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.booking-widget-config-error__divider {
+  width: 2.5em;
+  height: 1.5px;
+  background: var(--border, rgba(255,255,255,0.1));
+  border-radius: 1px;
+}
+
+.booking-widget-config-error__hint {
+  font-size: 0.78em;
+  color: var(--muted, #6b5f50);
+  max-width: 21em;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.booking-widget-config-error__retry {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  padding: 0.55em 1.4em;
+  background: transparent;
+  color: var(--secondary-fg, #a09080);
+  border: 1.5px solid var(--border, rgba(255,255,255,0.13));
+  border-radius: 99em;
+  font-size: 0.8em;
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-weight: 500;
+  cursor: pointer;
+  letter-spacing: 0.02em;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
+  margin-top: 0.25em;
+}
+
+.booking-widget-config-error__retry:hover {
+  border-color: var(--primary, #f59e0b);
+  color: var(--primary, #f59e0b);
+  background: rgba(245, 158, 11, 0.06);
+}
+
+/* ===== Config Loading State ===== */
+.booking-widget-config-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25em;
+  padding: 4em 2em;
+  text-align: center;
+  min-height: 300px;
+}
+
+.booking-widget-config-loading__spinner {
+  width: 2.75em;
+  height: 2.75em;
+  border: 2px solid var(--border, rgba(255,255,255,0.1));
+  border-top-color: var(--primary, hsl(38,60%,55%));
+  border-radius: 50%;
+  animation: bw-spin 0.75s linear infinite;
+}
+
+@keyframes bw-spin {
+  to { transform: rotate(360deg); }
+}
+
+.booking-widget-config-loading__text {
+  font-size: 0.875em;
+  color: var(--muted, #888);
+  letter-spacing: 0.01em;
+}
+
 /* ===== Step Indicator ===== */
 .booking-widget-step-indicator {
   display: flex;
@@ -448,7 +588,7 @@
 }
 
 .booking-widget-modal .date-trigger:hover {
-  border-color: hsl(38, 60%, 55%, 0.5);
+  border-color: var(--primary);
 }
 
 .booking-widget-modal .date-trigger .placeholder {
@@ -472,7 +612,7 @@
   max-width: calc(100vw - 2em);
   box-sizing: border-box;
   z-index: 10;
-  background: var(--card);
+  background: var(--card-solid);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1em;