@code-collective/booking-widget 1.0.12 → 1.0.13

package/package.json

@@ -1,58 +1,58 @@
-{
-  "name": "@code-collective/booking-widget",
-  "version": "1.0.12",
-  "type": "module",
-  "main": "dist/booking-widget.umd.cjs",
-  "module": "dist/booking-widget.js",
-  "svelte": "src/lib/index.ts",
-  "exports": {
-    ".": {
-      "svelte": "./src/lib/index.ts",
-      "import": "./dist/booking-widget.js",
-      "require": "./dist/booking-widget.umd.cjs"
-    },
-    "./style.css": "./dist/booking-widget.css",
-    "./elements": "./dist/booking-widget.min.js"
-  },
-  "files": [
-    "dist",
-    "src/lib",
-    "!src/lib/**/*.test.ts",
-    "!src/lib/test",
-    "CHANGELOG.md"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "prepublishOnly": "npm run build && npm run build:elements",
-    "build:elements": "vite build --mode elements",
-    "postbuild:elements": "node -e \"const{readFileSync:r}=require('fs'),{createHash:h}=require('crypto');['dist/booking-widget.min.js','dist/booking-widget.min.css'].forEach(f=>{const d=h('sha384').update(r(f)).digest('base64');console.log(f+' -> sha384-'+d)})\"",
-    "build:demo": "vite build --mode demo",
-    "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "test": "vitest run",
-    "release": "node scripts/publish.cjs"
-  },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@testing-library/svelte": "^5.4.2",
-    "@tsconfig/svelte": "^5.0.0",
-    "jsdom": "^30.0.1",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "typescript": "^5.5.0",
-    "vite": "^8.2.2",
-    "vitest": "^5.0.0"
-  },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "svelte": {
-      "optional": true
-    }
-  },
-  "dependencies": {
-    "openapi-fetch": "^0.17.0"
-  }
-}
+{
+  "name": "@code-collective/booking-widget",
+  "version": "1.0.13",
+  "type": "module",
+  "main": "dist/booking-widget.umd.cjs",
+  "module": "dist/booking-widget.js",
+  "svelte": "src/lib/index.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/lib/index.ts",
+      "import": "./dist/booking-widget.js",
+      "require": "./dist/booking-widget.umd.cjs"
+    },
+    "./style.css": "./dist/booking-widget.css",
+    "./elements": "./dist/booking-widget.min.js"
+  },
+  "files": [
+    "dist",
+    "src/lib",
+    "!src/lib/**/*.test.ts",
+    "!src/lib/test",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "prepublishOnly": "npm run build && npm run build:elements",
+    "build:elements": "vite build --mode elements",
+    "postbuild:elements": "node -e \"const{readFileSync:r}=require('fs'),{createHash:h}=require('crypto');['dist/booking-widget.min.js','dist/booking-widget.min.css'].forEach(f=>{const d=h('sha384').update(r(f)).digest('base64');console.log(f+' -> sha384-'+d)})\"",
+    "build:demo": "vite build --mode demo",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "release": "node scripts/publish.cjs"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@testing-library/svelte": "^5.4.2",
+    "@tsconfig/svelte": "^5.0.0",
+    "jsdom": "^30.0.1",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.5.0",
+    "vite": "^8.2.2",
+    "vitest": "^5.0.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "openapi-fetch": "^0.17.0"
+  }
+}

package/src/lib/BookingProvider.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-  // Puts a host in context for everything beneath it. The host itself is still built by the consumer -
-  // createBookingHost() works anywhere, including a module shared across several Astro islands, and this
-  // only decides which components can see it.
-  import type { Snippet } from 'svelte';
-  import type { BookingHost } from './host.svelte';
-  import { setBookingHostContext } from './booking-context';
-
-  interface Props {
-    host: BookingHost;
-    children: Snippet;
-  }
-  let { host, children }: Props = $props();
-
-  // Read once, deliberately: context is set at initialisation and a provider serves one host for its
-  // lifetime. Swapping hosts mid-flight would strand every component already reading the old one.
-  // svelte-ignore state_referenced_locally
-  setBookingHostContext(host);
-</script>
-
-{@render children()}
+<script lang="ts">
+  // Puts a host in context for everything beneath it. The host itself is still built by the consumer -
+  // createBookingHost() works anywhere, including a module shared across several Astro islands, and this
+  // only decides which components can see it.
+  import type { Snippet } from 'svelte';
+  import type { BookingHost } from './host.svelte';
+  import { setBookingHostContext } from './booking-context';
+
+  interface Props {
+    host: BookingHost;
+    children: Snippet;
+  }
+  let { host, children }: Props = $props();
+
+  // Read once, deliberately: context is set at initialisation and a provider serves one host for its
+  // lifetime. Swapping hosts mid-flight would strand every component already reading the old one.
+  // svelte-ignore state_referenced_locally
+  setBookingHostContext(host);
+</script>
+
+{@render children()}

package/src/lib/CartBar.svelte

@@ -1,26 +1,26 @@
-<script lang="ts">
-  import type { BookingApi } from './api';
-  import type { CartOverviewState } from './config';
-  import { CartManager } from './cart-manager';
-  import { createCartOverview } from './cart-overview.svelte';
-  import CartBarView from './CartBarView.svelte';
-  import { getBookingHostContext, requireBookingService } from './booking-context';
-
-  interface Props {
-    api?: BookingApi;
-    cartManager?: CartManager;
-    // Lets a host render its own summary against the same state the bar is in, rather than inferring it from
-    // an empty DOM - see cart-overview.svelte.ts.
-    onStateChange?: (state: CartOverviewState) => void;
-  }
-  let { api, cartManager, onStateChange }: Props = $props();
-
-  const bookingHost = getBookingHostContext();
-  const overview = createCartOverview(
-    () => requireBookingService(api ?? bookingHost?.api, 'CartBar', 'api'),
-    () => requireBookingService(cartManager ?? bookingHost?.cartManager, 'CartBar', 'cartManager'),
-    (s) => onStateChange?.(s),
-  );
-</script>
-
-<CartBarView cart={overview.cart} state={overview.state} onRetry={overview.reload} />
+<script lang="ts">
+  import type { BookingApi } from './api';
+  import type { CartOverviewState } from './config';
+  import { CartManager } from './cart-manager';
+  import { createCartOverview } from './cart-overview.svelte';
+  import CartBarView from './CartBarView.svelte';
+  import { getBookingHostContext, requireBookingService } from './booking-context';
+
+  interface Props {
+    api?: BookingApi;
+    cartManager?: CartManager;
+    // Lets a host render its own summary against the same state the bar is in, rather than inferring it from
+    // an empty DOM - see cart-overview.svelte.ts.
+    onStateChange?: (state: CartOverviewState) => void;
+  }
+  let { api, cartManager, onStateChange }: Props = $props();
+
+  const bookingHost = getBookingHostContext();
+  const overview = createCartOverview(
+    () => requireBookingService(api ?? bookingHost?.api, 'CartBar', 'api'),
+    () => requireBookingService(cartManager ?? bookingHost?.cartManager, 'CartBar', 'cartManager'),
+    (s) => onStateChange?.(s),
+  );
+</script>
+
+<CartBarView cart={overview.cart} state={overview.state} onRetry={overview.reload} />

package/src/lib/CartBarView.svelte

@@ -1,78 +1,78 @@
-<script lang="ts">
-  import type { CheckoutCartDetailDto } from './client-types';
-  import type { CartOverviewState } from './config';
-  import { formatCurrency } from './currency';
-  import { postMessage } from './messages';
-  import CountdownTimer from './CountdownTimer.svelte';
-  import { cartDeadline } from './cart-expiry';
-
-  interface Props {
-    cart: CheckoutCartDetailDto | null;
-    state?: CartOverviewState;
-    onRetry?: () => void;
-  }
-  let { cart, state = 'ready', onRetry }: Props = $props();
-
-  let itemCount = $derived(cart?.items.length ?? 0);
-
-  let totalLabel = $derived(() => {
-    if (!cart || cart.items.length === 0) return '';
-    const currency = cart.items[0].currencyCode;
-    const total = cart.items.reduce((sum, i) => sum + i.amount, 0);
-    return formatCurrency(total, currency, 2, 2);
-  });
-
-  let expiresAt = $derived(() => cart ? cartDeadline(cart) : new Date());
-</script>
-
-{#if state === 'error'}
-  <!-- An empty cart and a cart that could not be read used to render identically (as nothing), which left a
-       shopper on a narrow layout with no route to checkout and no sign that anything had gone wrong. -->
-  <div class="cart-bar bw-widget" role="alert">
-    <div class="cart-info">
-      <span class="item-count">Cart unavailable</span>
-      <span class="error-detail">We could not load your cart just now.</span>
-    </div>
-    <button class="btn btn-primary" onclick={() => onRetry?.()}>Retry</button>
-  </div>
-{:else if cart && cart.items.length > 0}
-  <div class="cart-bar bw-widget">
-    <div class="cart-info">
-      <span class="item-count">{itemCount === 1 ? '1 item' : `${itemCount} items`} <CountdownTimer expiresAt={expiresAt()} /></span>
-      <span class="total">{totalLabel()}</span>
-    </div>
-    <button class="btn btn-primary" onclick={() => postMessage({ type: 'modal:open' })}>
-      Checkout
-    </button>
-  </div>
-{/if}
-
-<style>
-  .cart-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    background: white;
-    border-top: 1px solid var(--bw-color-border);
-    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
-    width: 100%;
-  }
-  .cart-info {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .item-count {
-    font-size: 12px;
-    color: var(--bw-color-text-secondary);
-  }
-  .error-detail {
-    font-size: 14px;
-    font-weight: 600;
-  }
-  .total {
-    font-size: 16px;
-    font-weight: 700;
-  }
-</style>
+<script lang="ts">
+  import type { CheckoutCartDetailDto } from './client-types';
+  import type { CartOverviewState } from './config';
+  import { formatCurrency } from './currency';
+  import { postMessage } from './messages';
+  import CountdownTimer from './CountdownTimer.svelte';
+  import { cartDeadline } from './cart-expiry';
+
+  interface Props {
+    cart: CheckoutCartDetailDto | null;
+    state?: CartOverviewState;
+    onRetry?: () => void;
+  }
+  let { cart, state = 'ready', onRetry }: Props = $props();
+
+  let itemCount = $derived(cart?.items.length ?? 0);
+
+  let totalLabel = $derived(() => {
+    if (!cart || cart.items.length === 0) return '';
+    const currency = cart.items[0].currencyCode;
+    const total = cart.items.reduce((sum, i) => sum + i.amount, 0);
+    return formatCurrency(total, currency, 2, 2);
+  });
+
+  let expiresAt = $derived(() => cart ? cartDeadline(cart) : new Date());
+</script>
+
+{#if state === 'error'}
+  <!-- An empty cart and a cart that could not be read used to render identically (as nothing), which left a
+       shopper on a narrow layout with no route to checkout and no sign that anything had gone wrong. -->
+  <div class="cart-bar bw-widget" role="alert">
+    <div class="cart-info">
+      <span class="item-count">Cart unavailable</span>
+      <span class="error-detail">We could not load your cart just now.</span>
+    </div>
+    <button class="btn btn-primary" onclick={() => onRetry?.()}>Retry</button>
+  </div>
+{:else if cart && cart.items.length > 0}
+  <div class="cart-bar bw-widget">
+    <div class="cart-info">
+      <span class="item-count">{itemCount === 1 ? '1 item' : `${itemCount} items`} <CountdownTimer expiresAt={expiresAt()} /></span>
+      <span class="total">{totalLabel()}</span>
+    </div>
+    <button class="btn btn-primary" onclick={() => postMessage({ type: 'modal:open' })}>
+      Checkout
+    </button>
+  </div>
+{/if}
+
+<style>
+  .cart-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    background: white;
+    border-top: 1px solid var(--bw-color-border);
+    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
+    width: 100%;
+  }
+  .cart-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .item-count {
+    font-size: 12px;
+    color: var(--bw-color-text-secondary);
+  }
+  .error-detail {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .total {
+    font-size: 16px;
+    font-weight: 700;
+  }
+</style>