@gymmymac/bob-widget 2.0.0 → 3.0.1

package/dist/style.css

@@ -1 +1 @@
-.bob-widget-root{position:relative;display:flex;flex-direction:column;width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:16px;line-height:1.5;color:#1a1a1a;background:transparent;isolation:isolate;contain:layout style;box-sizing:border-box;--border: transparent !important;--border-border: transparent !important}.bob-widget-root *,.bob-widget-root *:before,.bob-widget-root *:after{box-sizing:border-box}.bob-widget-root button,.bob-widget-root [role=button]{min-height:unset!important;min-width:unset!important}.bob-widget-root input,.bob-widget-root textarea{font-size:16px!important}.bob-widget-root *:focus-visible{outline:2px solid #2563eb!important;outline-offset:2px!important}.bob-widget-root a{color:inherit;text-decoration:none}.bob-widget-root svg{display:inline-block;vertical-align:middle}.bob-widget-root img{max-width:100%;height:auto;display:block}.bob-widget-root ul,.bob-widget-root ol{list-style:none;margin:0;padding:0}.bob-widget-root h1,.bob-widget-root h2,.bob-widget-root h3,.bob-widget-root h4,.bob-widget-root h5,.bob-widget-root h6{font-size:inherit;font-weight:inherit;margin:0}.bob-widget-root p{margin:0}.bob-widget-root .bob-flex{display:flex}.bob-widget-root .bob-flex-col{flex-direction:column}.bob-widget-root .bob-items-center{align-items:center}.bob-widget-root .bob-justify-center{justify-content:center}.bob-widget-root .bob-gap-2{gap:.5rem}.bob-widget-root .bob-gap-3{gap:.75rem}@keyframes ptt-pulse{0%,to{box-shadow:0 0 #22c55e80}50%{box-shadow:0 0 0 16px #22c55e00}}@keyframes ptt-wave{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}to{transform:translate(-50%,-50%) scale(2);opacity:0}}@keyframes ptt-dot{0%{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
+.bob-widget-root{position:relative;display:flex;flex-direction:column;width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:16px;line-height:1.5;color:#1a1a1a;background:transparent;isolation:isolate;contain:layout style;box-sizing:border-box;--border: transparent !important;--border-border: transparent !important}.bob-widget-root *,.bob-widget-root *:before,.bob-widget-root *:after{box-sizing:border-box}.bob-widget-root button,.bob-widget-root [role=button]{min-height:unset!important;min-width:unset!important}.bob-widget-root input,.bob-widget-root textarea{font-size:16px!important}.bob-widget-root *:focus-visible{outline:2px solid #2563eb!important;outline-offset:2px!important}.bob-widget-root a{color:inherit;text-decoration:none}.bob-widget-root svg{display:inline-block;vertical-align:middle}.bob-widget-root img{max-width:100%;height:auto;display:block}.bob-widget-root ul,.bob-widget-root ol{list-style:none;margin:0;padding:0}.bob-widget-root h1,.bob-widget-root h2,.bob-widget-root h3,.bob-widget-root h4,.bob-widget-root h5,.bob-widget-root h6{font-size:inherit;font-weight:inherit;margin:0}.bob-widget-root p{margin:0}.bob-widget-root .bob-flex{display:flex}.bob-widget-root .bob-flex-col{flex-direction:column}.bob-widget-root .bob-items-center{align-items:center}.bob-widget-root .bob-justify-center{justify-content:center}.bob-widget-root .bob-gap-2{gap:.5rem}.bob-widget-root .bob-gap-3{gap:.75rem}@keyframes ptt-pulse{0%,to{box-shadow:0 0 #0066cc80}50%{box-shadow:0 0 0 16px #06c0}}@keyframes ptt-wave{0%{transform:translate(-50%,-50%) scale(1);opacity:.6}to{transform:translate(-50%,-50%) scale(2);opacity:0}}@keyframes ptt-dot{0%{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.bob-widget-root .glass-card{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease-out,border-color .3s ease}.bob-widget-root .glass-card:active{transform:scale(.98) translateY(0)!important}.bob-widget-root .glass-button{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease-out,background .2s ease}.bob-widget-root .glass-button:active{transform:scale(.95) translateY(0)!important}.bob-widget-root .product-scroll::-webkit-scrollbar{display:none}.bob-widget-root .product-scroll{scrollbar-width:none;-ms-overflow-style:none}.bob-widget-root .glass-scroll::-webkit-scrollbar{display:none}.bob-widget-root .glass-scroll{scrollbar-width:none;-ms-overflow-style:none}.bob-widget-root .high-contrast-input::placeholder{color:#ffffffb3}.bob-widget-root .high-contrast-input:focus::placeholder{color:#ffffff80}

package/dist/styles/carfix-tokens.d.ts

@@ -0,0 +1,166 @@
+/**
+ * CARFIX Design Tokens for Bob Widget
+ * Matches the CARFIX website styling exactly
+ */
+export declare const CARFIX_COLORS: {
+    readonly primary: "#0052CC";
+    readonly primaryHover: "#0047B3";
+    readonly secondary: "#38BDF8";
+    readonly foreground: "#0F172A";
+    readonly accent: "#FF8C00";
+    readonly success: "#22C55E";
+    readonly destructive: "#EF4444";
+    readonly performanceRed: "#DC2626";
+    readonly mutedForeground: "#64748B";
+    readonly background: "#FAFAFA";
+    readonly card: "#FFFFFF";
+    readonly border: "#E2E8F0";
+    readonly slateEconomy: "#475569";
+};
+export declare const QUALITY_TIER_CONFIG: {
+    readonly Economy: {
+        readonly icon: "DollarSign";
+        readonly emoji: "💰";
+        readonly textColor: "#475569";
+        readonly background: "#F1F5F9";
+        readonly border: "#CBD5E1";
+        readonly description: "Smart savings";
+    };
+    readonly Standard: {
+        readonly icon: "Star";
+        readonly emoji: "⭐";
+        readonly textColor: "#0052CC";
+        readonly background: "rgba(0,82,204,0.1)";
+        readonly border: "rgba(0,82,204,0.3)";
+        readonly description: "Best value";
+        readonly isRecommended: true;
+    };
+    readonly Premium: {
+        readonly icon: "Award";
+        readonly emoji: "🏆";
+        readonly textColor: "#D97706";
+        readonly background: "#FEF3C7";
+        readonly border: "#FCD34D";
+        readonly description: "Superior quality";
+    };
+    readonly Performance: {
+        readonly icon: "Zap";
+        readonly emoji: "⚡";
+        readonly textColor: "#DC2626";
+        readonly background: "#FEE2E2";
+        readonly border: "#FCA5A5";
+        readonly description: "Maximum power";
+    };
+};
+/**
+ * Service Package Descriptions - Problem → Benefit → CFX Pack format
+ */
+export declare const SERVICE_PACKAGE_DESCRIPTIONS: Record<string, string>;
+export declare const DEFAULT_SERVICE_DESCRIPTION = "Keep your vehicle running safely and efficiently with quality parts matched to your specific make and model. Each CFX Service Pack includes everything you need for this essential maintenance.";
+export declare const IMAGE_URLS: {
+    readonly productImage: (sku: string) => string;
+    readonly brandLogo: (brandName: string) => string;
+    readonly carfixImage: (sku: string) => string;
+};
+export declare const BADGE_CONFIG: {
+    readonly fitsVehicle: {
+        readonly background: "rgba(34,197,94,0.1)";
+        readonly text: "#22C55E";
+        readonly border: "rgba(34,197,94,0.2)";
+        readonly icon: "Check";
+        readonly label: "Fits Your Vehicle";
+    };
+    readonly viscosity: {
+        readonly background: "#EFF6FF";
+        readonly text: "#1D4ED8";
+        readonly border: "#BFDBFE";
+        readonly icon: "Gauge";
+    };
+    readonly volume: {
+        readonly background: "#ECFEFF";
+        readonly text: "#0E7490";
+        readonly border: "#A5F3FC";
+        readonly icon: "Droplets";
+    };
+    readonly quantity: {
+        readonly background: "#F1F5F9";
+        readonly text: "#475569";
+        readonly border: "#CBD5E1";
+    };
+    readonly partNumber: {
+        readonly background: "transparent";
+        readonly text: "#64748B";
+        readonly border: "transparent";
+    };
+    readonly carfixValue: {
+        readonly background: "rgba(0,82,204,0.1)";
+        readonly text: "#0052CC";
+        readonly border: "rgba(0,82,204,0.2)";
+        readonly icon: "Sparkles";
+        readonly label: "CARFIX Value";
+    };
+    readonly rotorPair: {
+        readonly background: "#EFF6FF";
+        readonly text: "#1D4ED8";
+        readonly border: "#BFDBFE";
+        readonly label: "Pair";
+    };
+};
+export declare const TYPOGRAPHY: {
+    readonly packageTitle: {
+        readonly fontSize: "20px";
+        readonly fontWeight: 700;
+    };
+    readonly partslotName: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 600;
+    };
+    readonly productName: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 500;
+    };
+    readonly description: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 400;
+    };
+    readonly priceMain: {
+        readonly fontSize: "20px";
+        readonly fontWeight: 700;
+    };
+    readonly priceSecondary: {
+        readonly fontSize: "12px";
+        readonly fontWeight: 400;
+    };
+    readonly tierLabel: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 500;
+    };
+    readonly badgeText: {
+        readonly fontSize: "12px";
+        readonly fontWeight: 500;
+    };
+};
+/**
+ * Check if a product is a rotor (sold in pairs)
+ */
+export declare function isRotorProduct(product: {
+    name?: string;
+    partslotDescription?: string;
+    partslot_description?: string;
+    per_car_qty?: number;
+}): boolean;
+/**
+ * Get display price for a product (handles rotor pair pricing)
+ */
+export declare function getDisplayPrice(unitPrice: number, isRotor: boolean): {
+    displayPrice: number;
+    unitPriceLabel?: string;
+};
+/**
+ * Format price as NZD currency
+ */
+export declare function formatNZD(price: number): string;
+/**
+ * Get service package description with fallback
+ */
+export declare function getServicePackageDescription(title: string): string;

package/dist/styles/glass.d.ts

@@ -0,0 +1,49 @@
+import { CSSProperties } from 'react';
+
+/** Base glass panel (cards, tiles) - Dark variant for text visibility
+ * NOTE: Removed backdrop-filter to prevent GPU rendering artifacts on scroll with many items
+ */
+export declare const glassCard: CSSProperties;
+/** Premium/Spotlighted card variant
+ * NOTE: Using solid gradient instead of backdrop-filter for scroll performance
+ */
+export declare const glassCardPremium: CSSProperties;
+/** Glass button base */
+export declare const glassButton: CSSProperties;
+/** Primary CTA button - CARFIX Orange accent */
+export declare const glassButtonPrimary: CSSProperties;
+/** CARFIX Blue primary button */
+export declare const glassButtonBlue: CSSProperties;
+/** Glass input field */
+export declare const glassInput: CSSProperties;
+/** High-contrast glass input - CARFIX blue for readability */
+export declare const glassInputHighContrast: CSSProperties;
+/** Glass panel/container */
+export declare const glassPanel: CSSProperties;
+/** Hover transform styles - apply on :hover state */
+export declare const glassHoverTransform: {
+    scale: number;
+    translateY: number;
+    boxShadow: string;
+};
+/** Text styles for glass surfaces - High contrast for readability */
+export declare const glassText: {
+    primary: {
+        color: string;
+        textShadow: string;
+    };
+    secondary: {
+        color: string;
+        textShadow: string;
+    };
+    price: {
+        color: string;
+        textShadow: string;
+    };
+};
+/** Image container on glass surface - Solid background for performance */
+export declare const glassImageContainer: CSSProperties;
+/** Badge on glass surface */
+export declare const glassBadge: CSSProperties;
+/** Scroll indicator dot */
+export declare const glassScrollDot: CSSProperties;

package/dist/types/index.d.ts

@@ -3,5 +3,5 @@
  */
 export type { HostContext, HostUserContext, HostVehicleContext, HostCartContext, HostHistoryContext, BobConfig, HostApiConfig, BobCallbacks, BobProviderConfig, CartItem as ContextCartItem, SavedItem, PurchaseRecord, Vehicle as ContextVehicle, } from './context';
 export type { Vehicle } from './vehicle';
-export type { Product, APIPart, CartItem, ServicePackage } from './product';
+export type { Product, APIPart, CartItem, ServicePackage, PreparedTier, PreparedTierProduct, PreparedTierBrand } from './product';
 export type { Message, HighlightedProduct } from './message';

package/dist/types/message.d.ts

@@ -1,9 +1,12 @@
-/**
- * Message types for the Bob widget chat
- */
+import { Product } from './product';
+
 export interface Message {
     role: "user" | "assistant";
     content: string;
+    /** Products Bob is specifically recommending in this message */
+    suggestedProducts?: Product[];
+    /** Custom header for suggestions (e.g., "Wipers for your 2018 Toyota Rav 4") */
+    suggestionsTitle?: string;
 }
 export interface HighlightedProduct {
     brand: string;

package/dist/types/product.d.ts

@@ -16,24 +16,34 @@ export interface Product {
     image?: string;
     quantity?: number;
 }
+/**
+ * API response format from CARFIX retrieve-parts endpoint
+ *
+ * CANONICAL FIELDS (preferred):
+ * - sku, brand, partslot_description, part_number, price, image_url
+ *
+ * LEGACY FIELDS (backward compatibility):
+ * - SKU, Brand, Price, Image, "Part Product Type", "Part Number", "Metro Retail Price"
+ */
 export interface APIPart {
-    SKU?: string;
     sku?: string;
-    "Part Product Type"?: string;
-    partslot_description?: string;
-    Brand?: string;
     brand?: string;
-    "Part Number"?: string;
+    partslot_description?: string;
     part_number?: string;
-    "Metro Retail Price"?: number;
     price?: number;
-    "Per Car Qty"?: number;
+    image_url?: string;
     per_car_qty?: number;
     vehicle_id?: number;
     volume?: string | null;
     viscosity?: string | null;
-    image_url?: string;
     web_description?: string | null;
+    SKU?: string;
+    Brand?: string;
+    Price?: number;
+    "Part Product Type"?: string;
+    "Part Number"?: string;
+    "Metro Retail Price"?: number;
+    "Per Car Qty"?: number;
 }
 export interface CartItem {
     product_id: string;
@@ -50,5 +60,82 @@ export interface ServicePackage {
     title: string;
     description: string;
     from_price: number;
-    partslots?: unknown[];
+    estimated_time?: string;
+    difficulty_level?: string;
+    bundle_discount_percentage?: number;
+    carfixValueTier?: string;
+    carfixValueProducts?: string[];
+    partslots?: Partslot[];
+    icon_url?: string;
+    preparedTiers?: PreparedTier[];
+}
+/** Server-prepared tier data - ready to render */
+export interface PreparedTier {
+    tierName: string;
+    displayName: string;
+    description: string;
+    isRecommended: boolean;
+    isHidden: boolean;
+    totalPrice: number;
+    productCount: number;
+    dominantBrand: string | null;
+    brands: PreparedTierBrand[];
+    products: PreparedTierProduct[];
+}
+export interface PreparedTierBrand {
+    name: string;
+    fullName: string;
+    imageUrl: string;
+}
+export interface PreparedTierProduct {
+    partslotId: number;
+    partslotName: string;
+    sku: string;
+    name: string;
+    brand: string;
+    brandFullName: string;
+    brandImageUrl: string;
+    productImageUrl: string;
+    price: number;
+    unitPrice: number;
+    displayPrice: number;
+    isRotor: boolean;
+    isMultiQty: boolean;
+    perCarQty: number;
+    partNumber: string | null;
+    webDescription: string | null;
+    viscosity: string | null;
+    volume: number | null;
+}
+export interface Partslot {
+    id: number;
+    name: string;
+    description?: string;
+    products: {
+        quality_tiers: QualityTiers;
+    };
+}
+export interface QualityTiers {
+    Economy?: Part[];
+    Standard?: Part[];
+    Premium?: Part[];
+    Performance?: Part[];
+}
+export interface Part {
+    sku: string;
+    name: string;
+    brand: string;
+    price: number;
+    is_on_sale?: boolean;
+    sale_price?: number;
+    was_price?: number;
+    discount_percentage?: number;
+    image_url?: string;
+    part_number?: string;
+    web_description?: string;
+    classification?: {
+        primary_tier: string;
+        sub_tier: string;
+        display_name: string;
+    };
 }

package/dist/utils/debug.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Debug utilities for Bob Widget
+ *
+ * Enable debug mode by:
+ * - Setting localStorage: localStorage.setItem('bob_debug', 'true')
+ * - Adding URL param: ?bob_debug=true
+ */
+/**
+ * Log debug messages (only in debug mode)
+ */
+export declare const bobLog: (...args: unknown[]) => void;
+/**
+ * Log warnings (only in debug mode)
+ */
+export declare const bobWarn: (...args: unknown[]) => void;
+/**
+ * Log errors (always logged, not gated by debug mode)
+ */
+export declare const bobError: (...args: unknown[]) => void;
+/**
+ * Check if debug mode is enabled
+ */
+export declare const isBobDebug: () => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gymmymac/bob-widget",
-  "version": "2.0.0",
-  "description": "Bob - AI-powered automotive parts assistant widget with full immersive experience and GA4 analytics",
+  "version": "3.0.1",
+  "description": "Bob - AI-powered automotive parts assistant widget with multi-tenant support, RAF animations, swipeable interactions, and GA4 analytics",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",