@gymmymac/bob-widget 3.2.20 → 3.2.21

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to the `@gymmymac/bob-widget` package will be documented in
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [v3.2.21] - 2026-04-01
+
+### Changed
+
+- **Product tile visual refinements** — Inverted product tiles to dark navy theme (`#0F172A`) with light text, distinguishing individual parts from white service package cards. Hero image zone uses a white background so product image edges blend seamlessly. Price font increased to 28px bold for prominence. Brand fallback text enlarged to 22px for better readability when no product image is available.
+- **Heart/wishlist button on product tiles** — Added a red heart (♡) icon button alongside the green "Add" button, allowing customers to save individual products to their wishlist, matching the service package tier card pattern.
+- **Green gradient Add button** — Product tile CTA now uses a vibrant green gradient (`#22C55E → #16A34A`) with drop shadow for high visibility on the dark card background.
+
+---
+
 ## [v3.2.20] - 2026-03-30
 
 ### Fixed

package/dist/components/ProductTile.d.ts

@@ -7,13 +7,5 @@ interface ProductTileProps {
     onProductClick?: (product: Product) => void;
     onAddToCart?: (product: Product) => void;
 }
-/**
- * ProductTile - Premium Glassmorphism Product Cards
- *
- * Image fallback chain:
- * 1. product.image_url (product photo)
- * 2. product.brandImageUrl (brand logo)
- * 3. "No Image" placeholder
- */
 export declare const ProductTile: React.FC<ProductTileProps>;
 export {};

package/dist/components/mobile/ContainedMobileBobLayout.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { VariantCard } from './MobileProductColumn';
+import { VariantCard } from '../shelf';
 import { Message, HighlightedProduct } from '../../types/message';
 import { Product, ServicePackage } from '../../types';
 import { Vehicle } from '../../types/vehicle';

package/dist/components/mobile/MobileBobLayout.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { VariantCard } from './MobileProductColumn';
+import { VariantCard } from '../shelf';
 import { Message, HighlightedProduct } from '../../types/message';
 import { Product, ServicePackage } from '../../types';
 import { Vehicle } from '../../types/vehicle';

package/dist/components/mobile/MobileBobLayoutCore.d.ts

@@ -1,23 +1,11 @@
 import { default as React } from 'react';
 import { BobPosition } from './MobileBobCharacter';
+import { VariantCard } from '../shelf';
 import { Product, ServicePackage } from '../../types';
 import { HighlightedProduct } from '../../types/message';
 import { Vehicle } from '../../types/vehicle';
 
-export interface VariantCard {
-    vehicle_id: number;
-    optionNumber: number;
-    displayTitle: string;
-    displaySubtitle: string;
-    characterization: string;
-    kw?: number | null;
-    cc?: number | null;
-    ccDisplay?: string | null;
-    fuelType?: string | null;
-    engineCode?: string | null;
-    make: string;
-    model: string;
-}
+export type { VariantCard };
 interface MobileBobLayoutCoreProps {
     currentImage: string;
     animationState: string;
@@ -54,4 +42,3 @@ interface MobileBobLayoutCoreProps {
  * - hidden: User swiped, full product view
  */
 export declare const MobileBobLayoutCore: React.FC<MobileBobLayoutCoreProps>;
-export {};

package/dist/components/mobile/MobileProductColumn.d.ts

@@ -1,41 +1,5 @@
-import { default as React } from 'react';
-import { Product, ServicePackage } from '../../types';
-import { HighlightedProduct } from '../../types/message';
-
-export interface VariantCard {
-    vehicle_id: number;
-    optionNumber: number;
-    displayTitle: string;
-    displaySubtitle: string;
-    characterization: string;
-    kw?: number | null;
-    cc?: number | null;
-    ccDisplay?: string | null;
-    fuelType?: string | null;
-    engineCode?: string | null;
-    make: string;
-    model: string;
-}
-interface MobileProductColumnProps {
-    products: Product[];
-    servicePackages: ServicePackage[];
-    highlightedPartType?: string | null;
-    highlightedProduct?: HighlightedProduct | null;
-    scrollToCategory?: string | null;
-    onScrollToCategoryComplete?: () => void;
-    onProductClick?: (product: Product) => void;
-    onPackageSelect?: (pkg: ServicePackage) => void;
-    isResearching?: boolean;
-    visible?: boolean;
-    counterHeightPercent?: number;
-    hasVehicle?: boolean;
-    onAddToCart?: (product: Product | Product[]) => void;
-    /** Vehicle make and model for header display */
-    vehicleMakeModel?: string;
-    pendingVariants?: VariantCard[];
-    pendingVariantMake?: string;
-    pendingVariantModel?: string;
-    onVariantSelect?: (variant: VariantCard) => void;
-}
-export declare const MobileProductColumn: React.FC<MobileProductColumnProps>;
-export {};
+/**
+ * Legacy re-export — MobileProductColumn is now ShelfColumn.
+ * Kept for backward-compatible imports.
+ */
+export { ShelfColumn as MobileProductColumn } from '../shelf/ShelfColumn';

package/dist/components/mobile/index.d.ts

@@ -1,7 +1,8 @@
 export { MobileBobCharacter } from './MobileBobCharacter';
 export { MobileBobLayoutCore } from './MobileBobLayoutCore';
 export { MobileChatDrawer } from './MobileChatDrawer';
-export { MobileProductColumn } from './MobileProductColumn';
+export { ShelfColumn as MobileProductColumn } from '../shelf';
+export type { VariantCard } from '../shelf';
 export { MobileBobLayout } from './MobileBobLayout';
 export { ContainedMobileBobLayout } from './ContainedMobileBobLayout';
 export { ContainedChatDrawer } from './ContainedChatDrawer';

package/dist/components/shelf/HorizontalRow.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { ViewportSize } from '../../hooks/useViewportSize';
+
+interface HorizontalRowProps {
+    children: React.ReactNode;
+    viewportSize: ViewportSize;
+    /** Extra className for the scroll track */
+    className?: string;
+    /** Extra style for the scroll track */
+    style?: React.CSSProperties;
+}
+/**
+ * HorizontalRow — The single scroll primitive for all horizontal rows.
+ *
+ * Mobile/Tablet: snap-x mandatory, touch-action: pan-x, overscroll-behavior: contain, hidden scrollbar
+ * Desktop: no snap, orange arrow buttons, thin scrollbar, fade masks
+ */
+export declare const HorizontalRow: React.FC<HorizontalRowProps>;
+export {};

package/dist/components/shelf/PartslotSection.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { Product } from '../../types';
+import { HighlightedProduct } from '../../types/message';
+import { ViewportSize } from '../../hooks/useViewportSize';
+
+interface PartslotSectionProps {
+    name: string;
+    products: Product[];
+    viewportSize: ViewportSize;
+    isHighlighted: boolean;
+    highlightedProduct?: HighlightedProduct | null;
+    onProductClick?: (product: Product) => void;
+    onAddToCart?: (product: Product) => void;
+}
+export declare const PartslotSection: React.FC<PartslotSectionProps>;
+export {};

package/dist/components/shelf/ServicePackageCard.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ServicePackage, Product } from '../../types';
+import { ViewportSize } from '../../hooks/useViewportSize';
+
+interface ServicePackageCardProps {
+    pkg: ServicePackage;
+    viewportSize: ViewportSize;
+    onAddToCart?: (products: Product | Product[]) => void;
+}
+export declare const ServicePackageCard: React.FC<ServicePackageCardProps>;
+export {};

package/dist/components/shelf/ShelfColumn.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { Product, ServicePackage } from '../../types';
+import { HighlightedProduct } from '../../types/message';
+
+export interface VariantCard {
+    vehicle_id: number;
+    optionNumber: number;
+    displayTitle: string;
+    displaySubtitle: string;
+    characterization: string;
+    kw?: number | null;
+    cc?: number | null;
+    ccDisplay?: string | null;
+    fuelType?: string | null;
+    engineCode?: string | null;
+    make: string;
+    model: string;
+}
+interface ShelfColumnProps {
+    products: Product[];
+    servicePackages: ServicePackage[];
+    highlightedPartType?: string | null;
+    highlightedProduct?: HighlightedProduct | null;
+    scrollToCategory?: string | null;
+    onScrollToCategoryComplete?: () => void;
+    onProductClick?: (product: Product) => void;
+    onPackageSelect?: (pkg: ServicePackage) => void;
+    isResearching?: boolean;
+    visible?: boolean;
+    counterHeightPercent?: number;
+    hasVehicle?: boolean;
+    onAddToCart?: (product: Product | Product[]) => void;
+    vehicleMakeModel?: string;
+    pendingVariants?: VariantCard[];
+    pendingVariantMake?: string;
+    pendingVariantModel?: string;
+    onVariantSelect?: (variant: VariantCard) => void;
+}
+export declare const ShelfColumn: React.FC<ShelfColumnProps>;
+export {};

package/dist/components/shelf/ShelfHeader.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface ShelfHeaderProps {
+    vehicleDisplayName: string;
+    itemCount: number;
+    isUpdating: boolean;
+}
+export declare const ShelfHeader: React.FC<ShelfHeaderProps>;
+export {};

package/dist/components/shelf/ShelfLoadingState.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+export declare const ShelfLoading: React.FC;
+export declare const ShelfEmpty: React.FC<{
+    productCount: number;
+    packageCount: number;
+}>;

package/dist/components/shelf/TierCard.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { PreparedTier, Product } from '../../types';
+import { ViewportSize } from '../../hooks/useViewportSize';
+
+interface TierCardProps {
+    tier: PreparedTier;
+    isSelected: boolean;
+    viewportSize: ViewportSize;
+    packageTitle: string;
+    packageId: string;
+    onSelect: () => void;
+    onAddToCart?: (products: Product[]) => void;
+}
+export declare const TierCard: React.FC<TierCardProps>;
+export {};

package/dist/components/shelf/TierProductList.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { PreparedTier } from '../../types';
+
+interface TierProductListProps {
+    tier: PreparedTier;
+}
+export declare const TierProductList: React.FC<TierProductListProps>;
+export {};

package/dist/components/shelf/VariantSelector.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { VariantCard } from './ShelfColumn';
+
+interface VariantSelectorProps {
+    variants: VariantCard[];
+    make?: string;
+    model?: string;
+    onSelect: (variant: VariantCard) => void;
+}
+export declare const VariantSelector: React.FC<VariantSelectorProps>;
+export {};

package/dist/components/shelf/index.d.ts

@@ -0,0 +1,10 @@
+export { ShelfColumn } from './ShelfColumn';
+export type { VariantCard } from './ShelfColumn';
+export { HorizontalRow } from './HorizontalRow';
+export { ShelfHeader } from './ShelfHeader';
+export { ShelfLoading, ShelfEmpty } from './ShelfLoadingState';
+export { VariantSelector } from './VariantSelector';
+export { ServicePackageCard } from './ServicePackageCard';
+export { TierCard } from './TierCard';
+export { TierProductList } from './TierProductList';
+export { PartslotSection } from './PartslotSection';

package/dist/hooks/useBobChat.d.ts

@@ -1,5 +1,5 @@
 import { Vehicle } from '../types/vehicle';
-import { VariantCard } from '../components/mobile/MobileProductColumn';
+import { VariantCard } from '../components/shelf';
 import { Message, HighlightedProduct } from '../types/message';
 
 export type AnimationState = string;
@@ -25,7 +25,7 @@ interface UseBobChatProps {
     /** When backend requires user to pick a vehicle variant, provide UI-ready cards for the shelf */
     onVariantSelectionRequired?: (variants: VariantCard[], make: string, model: string) => void;
     /** Ref containing current shelf category names for post-stream scroll matching */
-    shelfCategoriesRef?: React.RefObject<Set<string>>;
+    shelfCategoriesRef?: React.RefObject<Map<string, 'package' | 'partslot'>>;
     /** Optional pre-identified vehicle — skips REGO lookup when no session exists */
     initialVehicle?: {
         vehicle_id: string | number;
@@ -53,5 +53,6 @@ export declare const useBobChat: ({ setAnimationState, manualMode, talkingState,
     clearVehicle: () => void;
     sendDirectMessage: (content: string) => void;
     stopAllAudio: () => void;
+    refetchPartsForVehicle: () => Promise<void>;
 };
 export {};