@ticketboothapp/booking 1.2.25 → 1.2.27

package/package.json

@@ -1,44 +1,26 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.25",
+  "version": "1.2.27",
   "private": false,
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.module.css"
+  ],
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "lint": "eslint src --ext .ts,.tsx",
-    "typecheck": "tsc -p tsconfig.json --noEmit"
-  },
   "exports": {
     ".": "./src/index.ts",
-    "./styles/booking-flow.css": "./src/components/booking/booking-flow.css",
-    "./styles/text-style.css": "./src/text-style.css",
-    "./styles/colours.css": "./src/colours.css",
-    "./styles/spacing.css": "./src/spacing.css",
-    "./styles/radius.css": "./src/radius.css"
-  },
-  "dependencies": {
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@react-google-maps/api": "^2.20.7",
-    "@stripe/react-stripe-js": "^3.9.0",
-    "@stripe/stripe-js": "^7.9.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "date-fns-tz": "^3.2.0",
-    "framer-motion": "^12.0.0",
-    "lucide-react": "^0.577.0",
-    "react-international-phone": "^4.6.0",
-    "tailwind-merge": "^3.5.0"
+    "./booking-flow.css": "./src/components/booking/booking-flow.css",
+    "./runtime": "./src/runtime/index.ts",
+    "./contexts/booking-app-context": "./src/contexts/BookingAppContext.tsx",
+    "./providers/booking-dialog-provider": "./src/providers/booking-dialog-provider.tsx",
+    "./hooks/useBookingSourceMetadataFromLocation": "./src/hooks/useBookingSourceMetadataFromLocation.ts",
+    "./hooks/useIsBookingLaunchLive": "./src/hooks/useIsBookingLaunchLive.ts"
   },
   "peerDependencies": {
     "next": "^15.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@types/google.maps": "^3.58.1"
   }
 }

package/src/components/booking/AddOnsSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { formatCurrencyAmount } from '@/lib/currency';
-import type { AddOn } from '@/lib/booking-api';
+import { formatCurrencyAmount } from '../../../../../src/lib/currency';
+import type { AddOn } from '../../../../../src/lib/booking-api';
 import { MealDrinkAddOnSelector, canUseMealDrinkSelector } from './MealDrinkAddOnSelector';
 import type { Currency } from './CurrencySwitcher';
 import styles from './AddOnsSection.module.css';

package/src/components/booking/AdminPaymentChoiceModal.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { createPortal } from 'react-dom';
-import { formatCurrencyAmount } from '@/lib/currency';
+import { formatCurrencyAmount } from '../../../../../src/lib/currency';
 import type { Currency } from './CurrencySwitcher';
 
 interface AdminPaymentChoiceModalProps {

package/src/components/booking/BookingDialog.tsx

@@ -1,20 +1,26 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { useBookingSourceMetadataFromLocation } from '@/hooks/useBookingSourceMetadataFromLocation';
-import { useBookingDialog } from '@/providers/booking-dialog-provider';
-import { getProductByIdOrSlug, buildMinimalProductFromConfig } from '@/lib/products-config';
-import { getProduct, type Product } from '@/lib/booking-api';
-import { ENV } from '@/lib/env';
-import defaultStrings from '@/strings';
+import { useBookingSourceMetadataFromLocation } from '../../hooks/useBookingSourceMetadataFromLocation';
+import { useBookingDialog } from '../../providers/booking-dialog-provider';
+import { useBookingHost } from '../../runtime';
+import { getProduct, type Product } from '../../../../../src/lib/booking-api';
 import './booking-flow.css';
 import BookingProductGrid from './BookingProductGrid';
 import { BookingFlow } from './BookingFlow';
 import { PrivateShuttleBookingFlow } from './PrivateShuttleBookingFlow';
 import { BookingFlowPreview } from './BookingFlowPreview';
-import { useIsBookingLaunchLive } from '@/hooks/useIsBookingLaunchLive';
+import { useIsBookingLaunchLive } from '../../hooks/useIsBookingLaunchLive';
 import styles from './BookingDialog.module.css';
 
+/** Strings shape Via Via passes via `ViaViaBookingHost` (subset used by this dialog). */
+type HostedBookingStrings = {
+  common: {
+    chooseYourExperience: string;
+    book: string;
+  };
+};
+
 function BookFlowScreen({
   productId,
   onBack,
@@ -30,23 +36,29 @@ function BookFlowScreen({
   contentRef?: React.RefObject<HTMLDivElement | null>;
   isPartialLaunch: boolean;
 }) {
+  const { env, strings, catalog } = useBookingHost();
+  const defaultStrings = strings as HostedBookingStrings;
   const bookingSourceAttribution = useBookingSourceMetadataFromLocation();
   const [product, setProduct] = useState<Product | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const config = getProductByIdOrSlug(productId);
+  const config = catalog.getProductByIdOrSlug(productId) as {
+    productId?: string;
+    display?: { shortName?: string; slug?: string };
+  } | null;
   const apiProductId = config?.productId ?? productId;
 
   // Build minimal product from config for immediate availability fetch (no /products wait)
-  const minimalProduct = config
-    ? buildMinimalProductFromConfig(config, ENV.COMPANY_ID)
-    : null;
+  const minimalProduct =
+    config && catalog.buildMinimalProductFromConfig
+      ? (catalog.buildMinimalProductFromConfig(config, env.COMPANY_ID) as Product)
+      : null;
 
   useEffect(() => {
     if (isPartialLaunch) return; // No API needed for partial launch
     let cancelled = false;
     setError(null);
-    getProduct(apiProductId, ENV.COMPANY_ID)
+    getProduct(apiProductId, env.COMPANY_ID)
       .then((p) => {
         if (!cancelled && p) setProduct(p);
         else if (!cancelled && !p && !config) setError('Product not found');
@@ -155,6 +167,8 @@ function getFocusableElements(container: HTMLElement): HTMLElement[] {
 }
 
 export default function BookingDialog() {
+  const { catalog, strings } = useBookingHost();
+  const defaultStrings = strings as HostedBookingStrings;
   const {
     isOpen,
     close,
@@ -173,7 +187,11 @@ export default function BookingDialog() {
   // Use products-config for instant header title (no API wait)
   const displayNameFromConfig =
     currentScreen?.type === 'book-flow'
-      ? getProductByIdOrSlug(currentScreen.productId)?.display?.shortName ?? null
+      ? (
+          catalog.getProductByIdOrSlug(currentScreen.productId) as {
+            display?: { shortName?: string };
+          } | null
+        )?.display?.shortName ?? null
       : null;
   const contentRef = useRef<HTMLDivElement>(null);
 

package/src/components/booking/BookingFlow.tsx

@@ -25,13 +25,13 @@ import {
   isInsufficientCapacityReserveError,
   describeStandardTourCapacityConflictMessage,
   reportReserveCapacityConflictClientContext,
-} from '@/lib/booking-api';
+} from '../../../../../src/lib/booking-api';
 import {
   EARLIEST_AVAILABILITY_DATE,
   LATEST_AVAILABILITY_DATE,
   INITIAL_FETCH_WEEKS,
-} from '@/lib/booking-constants';
-import { getSundayOfWeek } from '@/lib/booking/sunday-week';
+} from '../../../../../src/lib/booking-constants';
+import { getSundayOfWeek } from '../../../../../src/lib/booking/sunday-week';
 import { Calendar } from './Calendar';
 import { AdminPaymentChoiceModal } from './AdminPaymentChoiceModal';
 import { ItineraryBox } from './ItineraryBox';
@@ -43,44 +43,40 @@ import { TicketSelector } from './TicketSelector';
 import { AddOnsSection } from './AddOnsSection';
 import { CheckoutForm } from './CheckoutForm';
 import { PromoCodeInput } from './PromoCodeInput';
-import { useTranslations, useLocale } from '@/lib/booking/i18n';
+import { useTranslations, useLocale } from '../../../../../src/lib/booking/i18n';
 import { type Currency } from './CurrencySwitcher';
-import { formatBookingRefForDisplay } from '@/lib/booking-ref';
+import { formatBookingRefForDisplay } from '../../../../../src/lib/booking-ref';
 import {
   formatCurrencyAmount,
   reconcileChangeBookingProposedTotal,
-} from '@/lib/currency';
-import { buildCheckoutBreakdown } from '@/lib/booking/checkout-breakdown';
-import type { PricingConfig, PrecomputedPricesByCategory, ItineraryDisplayStep } from '@/lib/booking-api';
-import { ItineraryStepType as StepType } from '@/lib/booking-api';
+} from '../../../../../src/lib/currency';
+import { buildCheckoutBreakdown } from '../../../../../src/lib/booking/checkout-breakdown';
+import type { PricingConfig, PrecomputedPricesByCategory, ItineraryDisplayStep } from '../../../../../src/lib/booking-api';
+import { ItineraryStepType as StepType } from '../../../../../src/lib/booking-api';
 import {
   getDisplayPriceFromBaseInDisplayCurrency,
   computePriceBreakdown,
   computeOrderSummary,
   type PriceBreakdown as PriceBreakdownData,
   type OrderSummary,
-} from '@/lib/booking/pricing';
-import { useCompanyTimezone } from '@/contexts/CompanyContext';
-import { useBookingApp } from '@/contexts/BookingAppContext';
-import { useAvailabilitiesCache, buildAvailabilitiesCacheKey } from '@/contexts/AvailabilitiesCacheContext';
+} from '../../../../../src/lib/booking/pricing';
+import { useCompanyTimezone } from '../../../../../src/contexts/CompanyContext';
+import { useBookingApp } from '../../contexts/BookingAppContext';
+import { useAvailabilitiesCache, buildAvailabilitiesCacheKey } from '../../../../../src/contexts/AvailabilitiesCacheContext';
 import { type PriceSummaryLine } from './PriceSummary';
 import { CheckoutModal, type CheckoutModalLineItem } from './CheckoutModal';
 import { BookingFlowCollage } from './BookingFlowCollage';
 import { TourDescription } from './TourDescription';
-import { getProductByIdOrSlug } from '@/lib/products-config';
-import { getProducts } from '@/constants/products';
-import defaultStrings from '@/strings';
-import { trackViewItem } from '@/lib/analytics';
 import {
   buildBookingSourceContext,
   inferClientBookingSourceFromProductIds,
   type BookingSourceMetadata,
-} from '@/lib/booking/source-metadata';
-import { getItineraryStepLabel } from '@/lib/booking/itinerary-display';
-import { MANAGE_BOOKING_FROM_CHANGE_PAYMENT, MANAGE_BOOKING_QUERY_FROM } from '@/lib/manage-booking-post-checkout';
-import { ENV } from '@/lib/env';
+} from '../../../../../src/lib/booking/source-metadata';
+import { getItineraryStepLabel } from '../../../../../src/lib/booking/itinerary-display';
+import { MANAGE_BOOKING_FROM_CHANGE_PAYMENT, MANAGE_BOOKING_QUERY_FROM } from '../../../../../src/lib/manage-booking-post-checkout';
+import { useBookingHost } from '../../runtime';
 import type { BookingFlowUiOptions } from './booking-flow-ui';
-import { BOOKING_FLOW_ABANDON_EVENT } from '@/providers/booking-dialog-provider';
+import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
 
 /** Live selection snapshot for change-booking compare UI (parent dialog). */
 export interface ChangeFlowSelectionPreview {
@@ -607,6 +603,7 @@ export function BookingFlow({
   availabilityPricingProfileId,
   availabilityCancellationPolicyProfileId,
 }: BookingFlowProps) {
+  const { env, strings: defaultStrings, analytics, catalog } = useBookingHost();
   const { t } = useTranslations();
   const { locale } = useLocale();
   const companyTimezone = useCompanyTimezone(); // Get timezone from context
@@ -836,7 +833,7 @@ export function BookingFlow({
       hasFiredViewItem.current = true;
       const id = productId || product.productId;
       const price = product.minPriceByCurrency?.[currency] ?? 0;
-      trackViewItem(id, product.name, price, currency);
+      analytics.trackViewItem(id, product.name, price, currency);
     }
   }, [product, productId, currency]);
 
@@ -2383,7 +2380,7 @@ export function BookingFlow({
 
   const promoDiscountFetchKey = useMemo(() => {
     if (!appliedPromoCode || !selectedAvailability || totalQuantity === 0) return '';
-    const companyId = product.companyId ?? ENV.COMPANY_ID;
+    const companyId = product.companyId ?? env.COMPANY_ID;
     if (!companyId) return '';
     const optionId = selectedAvailability.productOptionId;
     if (!optionId || !quantitiesSignature) return '';
@@ -2437,7 +2434,7 @@ export function BookingFlow({
         appliedPromoCode: code,
       } = promoDiscountParamsRef.current;
       if (!code || !sel) return;
-      const companyId = product.companyId ?? ENV.COMPANY_ID;
+      const companyId = product.companyId ?? env.COMPANY_ID;
       const optionId = sel.productOptionId;
       if (!companyId || !optionId) return;
       const items = lines.map((l) => ({ category: l.category, qty: l.qty }));
@@ -4031,8 +4028,16 @@ export function BookingFlow({
       )}
       {/* Image/video collage - vertical video on left, image grid on right */}
       {productId && !isChangeFlow && flowUi?.showCollage !== false && (() => {
-        const config = getProductByIdOrSlug(productId);
-        const displayProducts = getProducts(defaultStrings);
+        const config = catalog.getProductByIdOrSlug(productId) as {
+          display?: {
+            collageImageIds?: string[];
+            imageIds?: string[];
+          };
+        } | null;
+        const displayProducts = catalog.getProducts(defaultStrings) as Record<
+          string,
+          { id: string; videoUrl?: import('../../../../../src/constants/products').VideoSources }
+        >;
         const displayProduct = Object.values(displayProducts).find((p) => p.id === productId);
         const collageImageIds = config?.display?.collageImageIds ?? config?.display?.imageIds ?? [];
         const hasVideo = !!displayProduct?.videoUrl;

package/src/components/booking/BookingFlowCollage.tsx

@@ -1,12 +1,10 @@
 'use client';
 
 import { useState, useRef, useEffect, useCallback } from 'react';
-import ViaViaImage from '@/components/image';
-import { getImageUrl } from '@/constants/images';
 import BackgroundPlayer from 'next-video/background-player';
-import type { VideoSources } from '@/constants/products';
-import ImageModal from '@/components/product-theme-pages/image-modal';
-import { useTranslations } from '@/lib/booking/i18n';
+import type { VideoSources } from '../../../../../src/constants/products';
+import { useBookingHost } from '../../runtime';
+import { useTranslations } from '../../../../../src/lib/booking/i18n';
 import styles from './BookingFlowCollage.module.css';
 
 export interface BookingFlowCollageProps {
@@ -31,12 +29,18 @@ export function BookingFlowCollage({
   imageIds,
   altPrefix = 'Tour',
 }: BookingFlowCollageProps) {
+  const { catalog, slots } = useBookingHost();
+  const ViaViaImage = slots.Image;
+  const ImageModal = slots.ImageModal;
   const videoSrc = video ?? DEFAULT_VIDEO;
   // Use long version in BookingFlow when available; fall back to short
   const videoForCollage = (videoSrc.longSrc && videoSrc.longWebm)
     ? { src: videoSrc.longSrc, webm: videoSrc.longWebm }
     : { src: videoSrc.src, webm: videoSrc.webm };
-  const posterUrl = videoPosterImageId ? getImageUrl(videoPosterImageId) : undefined;
+  const posterUrl =
+    videoPosterImageId && catalog.getImageUrl
+      ? String(catalog.getImageUrl(videoPosterImageId))
+      : undefined;
   const gridImages = imageIds.slice(0, 4);
   // Pad with first image if fewer than 4
   while (gridImages.length < 4 && gridImages.length > 0) {

package/src/components/booking/BookingFlowPlaceholder.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ProductConfig } from '@/lib/booking-types';
+import type { ProductConfig } from '../../../../../src/lib/booking-types';
 import styles from './BookingFlowPlaceholder.module.css';
 
 interface BookingFlowPlaceholderProps {

package/src/components/booking/BookingFlowPreview.tsx

@@ -1,10 +1,8 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
-import { getProductByIdOrSlug } from '@/lib/products-config';
-import { getProducts } from '@/constants/products';
-import defaultStrings from '@/strings';
-import { trackViewItem } from '@/lib/analytics';
+import { useBookingHost } from '../../runtime';
+import type { VideoSources } from '../../../../../src/constants/products';
 import { BookingFlowCollage } from './BookingFlowCollage';
 import { TourDescription } from './TourDescription';
 
@@ -13,20 +11,31 @@ import { TourDescription } from './TourDescription';
  * No API call required - shows immediately.
  */
 export function BookingFlowPreview({ productId, defaultExpanded = true }: { productId: string; defaultExpanded?: boolean }) {
-  const config = getProductByIdOrSlug(productId);
+  const { catalog, strings: defaultStrings, analytics } = useBookingHost();
+  const config = catalog.getProductByIdOrSlug(productId) as {
+    display?: { shortName?: string; collageImageIds?: string[]; imageIds?: string[] };
+    productId?: string;
+  } | null;
   const hasFiredViewItem = useRef(false);
 
   useEffect(() => {
     if (!hasFiredViewItem.current && productId && config) {
       hasFiredViewItem.current = true;
-      const displayProducts = getProducts(defaultStrings);
+      const displayProducts = catalog.getProducts(defaultStrings) as Record<
+        string,
+        { id: string; name: string; avgPrice: number }
+      >;
       const displayProduct = Object.values(displayProducts).find((p) => p.id === productId);
       const productName = displayProduct?.name ?? config.display?.shortName ?? productId;
       const price = displayProduct?.avgPrice ?? 0;
-      trackViewItem(productId, productName, price, 'CAD');
+      analytics.trackViewItem(productId, productName, price, 'CAD');
     }
-  }, [productId, config]);
-  const displayProducts = getProducts(defaultStrings);
+  }, [productId, config, catalog, defaultStrings, analytics]);
+
+  const displayProducts = catalog.getProducts(defaultStrings) as Record<
+    string,
+    { id: string; videoUrl?: VideoSources }
+  >;
   const displayProduct = Object.values(displayProducts).find((p) => p.id === productId);
   const collageImageIds = config?.display?.collageImageIds ?? config?.display?.imageIds ?? [];
   const hasVideo = !!displayProduct?.videoUrl;

package/src/components/booking/BookingProductGrid.tsx

@@ -5,21 +5,20 @@ import { motion, AnimatePresence } from 'framer-motion';
 import {
   useBookingDialog,
   type ProductGridRestoreState,
-} from '@/providers/booking-dialog-provider';
-import { useLocale, useTranslations } from '@/lib/booking/i18n';
-import { getProducts } from '@/constants/products';
-import { getProductByIdOrSlug } from '@/lib/products-config';
-import { getProductDescription } from '@/lib/product-descriptions';
-import ViaViaImage from '@/components/image';
-import ValuePill from '@/components/value-pill';
-import ProductTag from '@/components/product-tag';
-import { PillVariant } from '@/components/value-pill';
-import type { Product } from '@/constants/products';
-import defaultStrings from '@/strings';
-import { getImageUrl } from '@/constants/images';
+} from '../../providers/booking-dialog-provider';
+import { useBookingHost } from '../../runtime';
+import { useLocale, useTranslations } from '../../../../../src/lib/booking/i18n';
+import type { Product } from '../../../../../src/constants/products';
 import BackgroundPlayer from 'next-video/background-player';
 import styles from './BookingProductGrid.module.css';
-import Button, { ButtonHoverColor } from '@/components/button';
+
+/** Locale strings needed by the product grid tiles (Via Via host). */
+type HostedProductGridStrings = {
+  common: {
+    moreInfo: string;
+    bookNow: string;
+  };
+};
 
 const DEFAULT_VIDEO = {
   src: '/videos/via-via-moraine-lake-tour-video.mp4',
@@ -63,6 +62,15 @@ function BookingProductTileCollapsed({
   useLayoutId: boolean;
   suppressLayoutAnimation?: boolean;
 }) {
+  const { slots } = useBookingHost();
+  const ViaViaImage = slots.Image;
+  const ProductTag = slots.ProductTag;
+  const ValuePill = slots.ValuePill;
+  const PillVariant = slots.PillVariant as {
+    overlay: string;
+    solid: string;
+  };
+
   return (
     <motion.div
       layout={!suppressLayoutAnimation}
@@ -127,7 +135,25 @@ function BookingProductTileExpanded({
 }) {
   const [isClosing, setIsClosing] = useState(false);
   const { locale } = useLocale();
-  const productDesc = getProductDescription(product.id, locale);
+  const { slots, catalog, strings } = useBookingHost();
+  const defaultStrings = strings as HostedProductGridStrings;
+  const ViaViaImage = slots.Image;
+  const ProductTag = slots.ProductTag;
+  const ValuePill = slots.ValuePill;
+  const Button = slots.Button;
+  const ButtonHoverColor = slots.ButtonHoverColor as {
+    Turquoise: string;
+    White: string;
+    Orange: string;
+  };
+  const PillVariant = slots.PillVariant as {
+    overlay: string;
+    solid: string;
+  };
+
+  const productDesc = catalog.getProductDescription(product.id, locale) as {
+    shortDescription?: string;
+  } | null;
   const displayDescription = productDesc?.shortDescription ?? product.description;
 
   const handleCollapseClick = () => {
@@ -185,7 +211,11 @@ function BookingProductTileExpanded({
             muted
             loop
             playsInline
-            poster={getImageUrl(product.images[0].id)}
+            poster={
+              catalog.getImageUrl
+                ? String(catalog.getImageUrl(product.images[0].id))
+                : ''
+            }
             className={styles.expandedVideo}
           />
           {product.tags && product.tags.length > 0 && (
@@ -258,6 +288,7 @@ export default function BookingProductGrid({
   onBookProduct,
   bookOnTileClick = false,
 }: BookingProductGridProps = {}) {
+  const { catalog, strings: defaultStrings } = useBookingHost();
   const { push } = useBookingDialog();
   const { t } = useTranslations();
   const hasAppliedRestore = useRef(false);
@@ -289,8 +320,11 @@ export default function BookingProductGrid({
   }, [isRestoring, restoreState, contentRef, onRestoreApplied]);
 
   const allProducts = useMemo(
-    () => Object.values(getProducts(defaultStrings)),
-    []
+    () =>
+      Object.values(
+        catalog.getProducts(defaultStrings) as Record<string, Product>
+      ),
+    [catalog, defaultStrings]
   );
 
   const products = useMemo(
@@ -397,8 +431,10 @@ export default function BookingProductGrid({
   );
 
   const handleBook = (product: Product) => {
-    const config = getProductByIdOrSlug(product.id);
-    const productSlugOrId = config?.display.slug ?? product.id;
+    const config = catalog.getProductByIdOrSlug(product.id) as {
+      display?: { slug?: string };
+    } | null;
+    const productSlugOrId = config?.display?.slug ?? product.id;
 
     if (onBookProduct) {
       onBookProduct(productSlugOrId);

package/src/components/booking/Calendar.module.css

@@ -361,13 +361,20 @@
 .calendarDaysGrid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  align-items: stretch;
+}
+
+/* Desktop: don't stretch every cell to the tallest day in the row (was huge empty space). */
+@media (min-width: 640px) {
+  .calendarDaysGrid {
+    align-items: start;
+  }
 }
 
 /* Mobile: rows size to content to eliminate bottom gap */
 @media (max-width: 639px) {
   .calendarDaysGrid {
     grid-auto-rows: minmax(min-content, max-content);
+    align-items: stretch;
   }
 }
 
@@ -381,17 +388,17 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-height: 5.5rem; /* Desktop: enough room for time pills */
+  min-height: 4.75rem; /* Desktop: room for date row + time pills without oversized cells */
   cursor: pointer;
 }
 
 /* Admin (showCapacity): extra line under each time pill — taller cells on sm+ only */
 @media (min-width: 640px) {
   .calendar .calendarDayCell.calendarDayCellWithAdminCapacity {
-    min-height: 7.5rem;
+    min-height: 6.5rem;
   }
   .calendar .calendarDayCell.calendarDayCellWithAdminCapacity.calendarDayCellWithAdminCapacityTall {
-    min-height: 9rem;
+    min-height: 7.5rem;
   }
 }
 
@@ -404,6 +411,14 @@
   justify-content: center;
   width: 100%;
 }
+
+/* Desktop: pin time pills to bottom of cell; centering left a tall empty band under the date. */
+@media (min-width: 640px) {
+  .calendarDayCellInner:not(.calendarDayCellInnerMobile) {
+    justify-content: flex-end;
+    padding-bottom: 0.125rem;
+  }
+}
 .calendar .calendarDayCell.calendarDayCellMobile .calendarDayCellInnerMobile,
 .calendar .calendarDayCell.calendarDayCellMobileTall .calendarDayCellInnerMobile {
   justify-content: flex-start !important;

package/src/components/booking/Calendar.tsx

@@ -5,15 +5,15 @@ import { createPortal } from 'react-dom';
 import { startOfWeek, addDays, addWeeks, subWeeks, isSameDay, parseISO, startOfMonth, endOfMonth, eachDayOfInterval, addMonths, subMonths } from 'date-fns';
 import { formatInTimeZone, fromZonedTime } from 'date-fns-tz';
 import { enUS, fr } from 'date-fns/locale';
-import type { Availability } from '@/lib/booking-api';
-import { useTranslations, useLocale } from '@/lib/booking/i18n';
+import type { Availability } from '../../../../../src/lib/booking-api';
+import { useTranslations, useLocale } from '../../../../../src/lib/booking/i18n';
 import {
   MINI_CALENDAR_START_MONTH,
   MINI_CALENDAR_END_MONTH,
   VISIBLE_RANGE_BUFFER_WEEKS,
-} from '@/lib/booking-constants';
-import { getSundayOfWeek } from '@/lib/booking/sunday-week';
-import { cn } from '@/lib/booking/utils';
+} from '../../../../../src/lib/booking-constants';
+import { getSundayOfWeek } from '../../../../../src/lib/booking/sunday-week';
+import { cn } from '../../../../../src/lib/booking/utils';
 import styles from './Calendar.module.css';
 
 // ============ Types ============
@@ -207,8 +207,8 @@ const DateCell = memo(function DateCell({
           ? cn('min-w-0', styles.calendarDayCellWithAdminCapacity, styles.calendarDayCellWithAdminCapacityTall)
           : styles.calendarDayCellWithAdminCapacity
         : needsTallerCell
-          ? 'min-w-0 min-h-[7rem]'
-          : 'min-h-[6rem]'
+          ? 'min-w-0 min-h-[5.75rem]'
+          : 'min-h-[5rem]'
     ),
     isDisabled
       ? styles.calendarDayCellDisabled
@@ -250,7 +250,12 @@ const DateCell = memo(function DateCell({
 
         {/* Availability Indicators - Centered */}
         {availability && (
-          <div className="flex flex-col items-center justify-center space-y-0 w-full px-0.5">
+          <div
+            className={cn(
+              'flex flex-col items-center space-y-0 w-full px-0.5',
+              isMobile ? 'justify-start' : 'justify-end'
+            )}
+          >
             {/* Sold Out Badge - Centered */}
             {availability.isSoldOut ? (
               <div className={styles.calendarSoldOutBadge}>

package/src/components/booking/CancellationPolicySelector.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { Check } from 'lucide-react';
-import { formatCurrencyAmount } from '@/lib/currency';
-import type { CancellationPolicyOption, RefundTierOption } from '@/lib/booking-api';
+import { formatCurrencyAmount } from '../../../../../src/lib/currency';
+import type { CancellationPolicyOption, RefundTierOption } from '../../../../../src/lib/booking-api';
 import type { Currency } from './CurrencySwitcher';
 import styles from './CancellationPolicySelector.module.css';