@wix/agent-skills 1.26.0 → 1.28.0

package/skills/wix-headless-templates/rentals/project/src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import Hero from '../components/Hero.astro';
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout>
+	<Hero />
+</Layout>

package/skills/wix-headless-templates/rentals/project/src/pages/rentals/[slug].astro

@@ -0,0 +1,81 @@
+---
+// Rental detail + booking page.
+//
+// This is a Wix ITEM PAGE: the wixMetadata export + <SEO.Tags> below let the site owner edit
+// this page's title/description/OG in the dashboard and register the route in the sitemap. A
+// rental is a Bookings service, so the Bookings service-page metadata applies. Keep all three SEO
+// pieces and this frontmatter; swap the island import to YOUR rental component. The island is
+// client:only — availability is time-zone/session-specific.
+import SiteLayout from "../../layouts/SiteLayout.astro";
+import RentalBookingView from "../../components/rentals/RentalBookingView";
+import { fetchRentalBySlug } from "../../wix/rentals/rentals";
+import { WIX_APPS } from "@wix/essentials";
+import { SEO } from "@wix/seo/components";
+import { loadSEOTagsServiceConfig } from "@wix/seo/services";
+import { seoTags } from "@wix/seo";
+
+export const wixMetadata = {
+  appDefId: WIX_APPS.bookings.id,
+  pageIdentifier: WIX_APPS.bookings.servicePageMetadata.pageIdentifier,
+  identifiers: {
+    slug: WIX_APPS.bookings.servicePageMetadata.identifiers.slug,
+  },
+};
+
+const slug = Astro.params.slug!;
+
+// Behind Wix's proxy the request URL is internal — the real public page URL arrives on
+// x-wix-forwarded-url; the SEO service needs the public one.
+const forwardedUrl = Astro.request.headers.get("x-wix-forwarded-url");
+const pageUrl =
+  forwardedUrl && URL.canParse(forwardedUrl) && /^https?:$/.test(new URL(forwardedUrl).protocol)
+    ? forwardedUrl
+    : Astro.url.href;
+
+let rental = null;
+let seoTagsServiceConfig = null;
+try {
+  [rental, seoTagsServiceConfig] = await Promise.all([
+    fetchRentalBySlug(slug),
+    loadSEOTagsServiceConfig({
+      pageUrl,
+      itemType: seoTags.ItemType.BOOKINGS_SERVICE,
+      itemData: { slug },
+    }).catch(() => null),
+  ]);
+} catch {
+  // Guarded: an unhandled SSR throw truncates the response mid-stream.
+}
+
+if (!rental) {
+  return new Response(null, { status: 404 });
+}
+---
+
+<SiteLayout title={rental.name}>
+  <SEO.Tags seoTagsServiceConfig={seoTagsServiceConfig} slot="seo-tags" />
+
+  <div class="grid gap-10 md:grid-cols-2">
+    <div>
+      {rental.imageUrl && (
+        <div class="aspect-[4/3] overflow-hidden rounded-xl bg-secondary">
+          <img src={rental.imageUrl} alt={rental.name} class="h-full w-full object-cover" />
+        </div>
+      )}
+      <h1 class="mt-5 text-2xl font-semibold tracking-tight">{rental.name}</h1>
+      {rental.tagLine && <p class="mt-1 text-muted-foreground">{rental.tagLine}</p>}
+      <p class="mt-2 text-sm text-muted-foreground">
+        {rental.rateLabel && <span class="text-foreground">{rental.rateLabel}</span>}
+        {rental.rateLabel && rental.rangeLabel ? " · " : ""}
+        {rental.rangeLabel}
+      </p>
+      {rental.locations.some((l) => l.name) && (
+        <p class="mt-1 text-sm text-muted-foreground">{rental.locations.map((l) => l.name).filter(Boolean).join(" · ")}</p>
+      )}
+      {rental.description && <p class="mt-4 text-sm leading-relaxed text-muted-foreground">{rental.description}</p>}
+    </div>
+    <div>
+      <RentalBookingView client:only="react" rental={rental} />
+    </div>
+  </div>
+</SiteLayout>

package/skills/wix-headless-templates/rentals/project/src/pages/rentals.astro

@@ -0,0 +1,24 @@
+---
+// Rentals listing — the first page fetched SERVER-SIDE (SEO) and handed to the island as DTO
+// props. Keep this frontmatter; swap the island import to YOUR listing component.
+import SiteLayout from "../layouts/SiteLayout.astro";
+import RentalsView from "../components/rentals/RentalsView";
+import { fetchRentals } from "../wix/rentals/rentals";
+import type { RentalSummary } from "../wix/rentals/types";
+
+let rentals: RentalSummary[] = [];
+let hasMore = false;
+try {
+  const page = await fetchRentals();
+  rentals = page.items;
+  hasMore = page.hasMore;
+} catch {
+  // An unguarded SSR throw truncates the response mid-stream; the island renders the
+  // empty state instead.
+}
+---
+
+<SiteLayout title="Rentals">
+  <h1 class="mb-8 text-2xl font-semibold tracking-tight">Rentals</h1>
+  <RentalsView client:load initialRentals={rentals} initialHasMore={hasMore} />
+</SiteLayout>

package/skills/wix-headless-templates/rentals/project/src/styles/global.css

@@ -0,0 +1,57 @@
+@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700;800&display=swap');
+@import 'tailwindcss';
+
+/* ─── THE design system ─────────────────────────────────────────────────────────────────
+   Theme the entire store by editing THIS @theme block (same token family as the official
+   Wix headless templates). Every shipped component styles itself from these via Tailwind
+   utilities (bg-primary, text-muted-foreground, text-destructive, rounded-lg, …) — change a token, everything
+   follows. A dark theme is just flipped values (dark background/foreground, adjusted
+   secondary/border). Don't restyle shipped component markup; restyle the tokens.
+
+   Choosing values: argue polarity from the business — light is not "cheap" (wellness/food
+   usually read better light); never dark-by-default for "premium". Palette: one dominant +
+   accents from ADJACENT hues (~30° arc), 2-4 colors total. Every background/foreground pair
+   you set must hit WCAG 4.5:1 (3:1 for text ≥24px); body copy never below 16px/1.5. Derive
+   from THIS brand — a look repeated across projects is a failure, not a shortcut. The user's
+   explicit direction beats all of this except the contrast floor. */
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(230 24% 14%);
+  --color-primary: hsl(230 24% 14%);
+  --color-primary-foreground: hsl(0 0% 100%);
+  --color-secondary: hsl(228 24% 96%);
+  --color-secondary-foreground: hsl(230 24% 14%);
+  --color-muted-foreground: hsl(228 8% 46%);
+  --color-border: hsl(220 14% 90%);
+  --color-destructive: hsl(0 72% 51%);
+
+  --radius-lg: 12px;
+  --radius-md: 8px;
+  --radius-sm: 6px;
+  /* Buttons, chips, labels, steppers and the progress bar. Follows --radius-md unless the brand
+     wants otherwise: 9999px is the pill, 0 is square. Genuine circles (swatches, avatars, dots)
+     stay rounded-full and do not read this. */
+  --radius-control: var(--radius-md);
+
+  --font-sans: 'Wix Madefor Text', system-ui, sans-serif;
+}
+
+@layer base {
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  }
+}
+
+@layer utilities {
+  .eyebrow {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-muted-foreground);
+  }
+}

package/skills/wix-headless-templates/rentals/project/src/wix/config.ts

@@ -0,0 +1,16 @@
+// Wix connection config — written by the skill's deploy step (install/deploy.mjs).
+//
+// WIX_CLIENT_ID = null  → ambient auth (a Wix-managed Astro project: `@wix/astro` authenticates
+//                         every SDK call automatically; there is no client and nothing to set).
+// WIX_CLIENT_ID = "..." → manual visitor client (any other React setup): the public OAuth client id.
+//                         It is NOT a secret — it only mints anonymous visitor tokens — so
+//                         hardcoding and committing it is fine. deploy.mjs copies it from `.env.local`
+//                         (`WIX_CLIENT_ID`, what `wix env pull` writes): the CONTENT site's app — on a
+//                         migration preview the site being migrated, while wix.config.json names
+//                         only the deploy target.
+export const WIX_CLIENT_ID: string | null = null;
+
+// Kept for projects deployed before the Members vertical moved onto the shared seam; the shipped
+// members code no longer reads it (ambient Astro uses the built-in /api/auth routes, manual mode
+// uses the shared client above). deploy.mjs still fills it so older code keeps compiling.
+export const WIX_MEMBERS_CLIENT_ID: string | null = null;

package/skills/wix-headless-templates/rentals/project/src/wix/media.ts

@@ -0,0 +1,106 @@
+// Wix media resolution — define once, use on EVERY image render path. Copy as-is.
+//
+// SDK media fields come back either as an already-absolute https URL, or as a
+// `wix:image://v1/<hash>/<file>#originWidth=…` identifier that a browser cannot load
+// (ERR_UNKNOWN_URL_SCHEME). The wix:image:// form must go through the SDK media module;
+// never hand-build a static.wixstatic.com URL (wrong format → 403).
+// docs: https://dev.wix.com/docs/sdk/core-modules/sdk/media.md
+import { media } from "@wix/sdk";
+
+type MediaLike =
+  | string
+  | null
+  | undefined
+  | { image?: unknown; url?: string | null; id?: string | null };
+
+/** A bare Wix media file id (`e6a89e_06cf…~mv2.png`): what REST-shaped media objects carry as `url` and `id`. */
+const BARE_FILE_ID = /^[\w-]+~mv2\.[a-z0-9]+$/i;
+
+function rawOf(value: MediaLike): string {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (value.image != null && typeof value.image === "object") return rawOf(value.image as MediaLike); // { image: { id, url } }
+  return (typeof value.image === "string" ? value.image : null) ?? value.url ?? value.id ?? "";
+}
+
+/** Resolve any Wix media value to a browser-loadable URL ("" when absent). */
+export function imgSrc(value: MediaLike, width = 600, height = 600): string {
+  const v = rawOf(value);
+  if (!v) return "";
+  if (v.startsWith("wix:image://")) {
+    return media.getScaledToFillImageUrl(v, width, height, {});
+  }
+  // A bare file id (what REST-shaped media objects carry) or an absolute Wix media URL (bare, or
+  // already carrying a /v1/fill/ segment at some other size): re-issue it through the scaler at the
+  // requested size, so every image path lands on one shape.
+  const file = BARE_FILE_ID.test(v) ? v : v.match(/^https:\/\/static\.wixstatic\.com\/media\/([^/?#]+)/)?.[1];
+  if (file) return `https://static.wixstatic.com/media/${file}/v1/fill/w_${width},h_${height},al_c,q_90/${file}`;
+  return v;
+}
+
+/**
+ * Responsive candidates for `srcset`: the same image at several widths through Wix's scaler, so a
+ * card never downloads a hero-sized file. Pair with `sizes`:
+ *   <img src={imgSrc(m, 640, 640)} srcSet={imgSrcSet(m)} sizes="(min-width: 1024px) 25vw, 50vw"
+ *        width={640} height={640} loading="lazy" alt={…} />
+ * Accepts every form an image reaches you in: a raw `wix:image://` id, an ALREADY-RESOLVED Wix URL
+ * (what the DTOs carry — `imageUrl`, `gallery[]`; its `/v1/fill/w_…,h_…` segment is rewritten per
+ * width), or any other https URL (returned as the single candidate). `ratio` is height/width
+ * (1 = square). "" only when there is no image at all — still set `src` as well.
+ */
+export function imgSrcSet(value: MediaLike, widths: number[] = [320, 480, 640, 960], ratio = 1): string {
+  const raw = rawOf(value);
+  if (!raw) return "";
+  if (raw.startsWith("wix:image://") || BARE_FILE_ID.test(raw)) {
+    return widths.map((w) => `${imgSrc(value, w, Math.round(w * ratio))} ${w}w`).join(", ");
+  }
+  // A resolved Wix URL: …/v1/fill/w_800,h_800,al_c,… — swap the size for each width.
+  const FILL = /\/v1\/fill\/w_\d+,h_\d+/;
+  if (/static\.wixstatic\.com\//.test(raw) && FILL.test(raw)) {
+    return widths.map((w) => `${raw.replace(FILL, `/v1/fill/w_${w},h_${Math.round(w * ratio)}`)} ${w}w`).join(", ");
+  }
+  return raw; // one candidate, never an empty srcset for a real image
+}
+
+/**
+ * Everything an <img> needs for one Wix image, so a tile can never ship `srcSet` without `src`:
+ *   <img {...imgAttrs(p.imageUrl, "(min-width: 1024px) 25vw, 50vw")} alt={p.name} />
+ * `sizes` is the width the image renders at (a CSS length or media-query list); `ratio` is
+ * height/width. Returns an empty object when there is no image — render your placeholder then.
+ */
+export function imgAttrs(value: MediaLike, sizes: string, ratio = 1): { src: string; srcSet: string; sizes: string; loading: "lazy"; decoding: "async" } | Record<string, never> {
+  const src = imgSrc(value, 640, Math.round(640 * ratio));
+  if (!src) return {};
+  return { src, srcSet: imgSrcSet(value, undefined, ratio), sizes, loading: "lazy", decoding: "async" };
+}
+
+/**
+ * Height/width of a Wix image when the value carries its size: a raw
+ * `wix:image://…#originWidth=W&originHeight=H` id (the natural size) or a resolved `/v1/fill/w_W,h_H/`
+ * URL (the size it was scaled to). null when neither is present. Pass it as `ratio` to keep a
+ * srcset at the image's own aspect instead of the square default:
+ *   <img {...imgAttrs(item.photo, "33vw", imgRatio(item.photo) ?? 1)} alt={…} />
+ */
+export function imgRatio(value: MediaLike): number | null {
+  const v = rawOf(value);
+  if (typeof v !== "string" || !v) return null;
+  const size = v.startsWith("wix:image://")
+    ? [v.match(/[#&]originWidth=(\d+)/)?.[1], v.match(/[#&]originHeight=(\d+)/)?.[1]]
+    : (v.match(/\/v1\/fill\/w_(\d+),h_(\d+)/)?.slice(1) ?? []);
+  const w = Number(size[0]);
+  const h = Number(size[1]);
+  return w > 0 && h > 0 ? h / w : null;
+}
+
+/**
+ * The identity of a media value BEFORE scaling — de-duplicate galleries on this, never on a
+ * resolved URL (two scaled URLs of one photo differ in their size parameters).
+ */
+export function mediaKey(value: MediaLike): string {
+  const v = rawOf(value);
+  if (!v) return "";
+  // The file id, whichever form the value takes — a raw id and a resolved URL of one photo share it.
+  if (v.startsWith("wix:image://")) return v.slice("wix:image://v1/".length).split("/")[0].split("#")[0];
+  const m = v.match(/^https:\/\/static\.wixstatic\.com\/media\/([^/?#]+)/);
+  return m ? m[1] : v;
+}

package/skills/wix-headless-templates/rentals/project/src/wix/money.ts

@@ -0,0 +1,24 @@
+// Money formatting for API amounts that carry no formatted string. Copy as-is.
+//
+// Catalog prices come with a ready `formattedAmount` — use that directly. But eCom Cart V2
+// amounts are ConvertedMoney `{ amount, convertedAmount }` with NO formatted string, and the
+// currency lives on the cart, not on the money object. Never hardcode "$" or assume USD.
+export interface ConvertedMoneyLike {
+  amount?: string | null;
+  convertedAmount?: string | null;
+}
+
+/** Format a ConvertedMoney in the given currency, using the visitor's locale. */
+export function formatMoney(
+  money: ConvertedMoneyLike | null | undefined,
+  currencyCode: string | null | undefined,
+): string {
+  const value = money?.convertedAmount ?? money?.amount;
+  if (value == null || value === "") return "";
+  const currency = currencyCode || "USD";
+  try {
+    return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(Number(value));
+  } catch {
+    return `${value} ${currency}`;
+  }
+}

package/skills/wix-headless-templates/rentals/project/src/wix/rentals/rental-flow-store.ts

@@ -0,0 +1,283 @@
+// The whole rental state machine for one rental as a framework-free store — the logic behind
+// useRentalFlow, usable from React (useRentalFlow wraps it), from a static page's rental surface,
+// from Vue/Svelte, or as the specification for a port: the availability window (starts grouped by
+// day, week paging), the chosen start, the lengths that start allows (hourly: the server's end
+// options; daily: the consecutive-day walk), the chosen length and its server-priced quote, the
+// schema-driven form, the CTA state, and rent(). All correctness (the rental's resource, the
+// customer's end date, the price preview's three fields, the Rentals app id on the cart,
+// checkout-or-place) lives in the data layer; this store orchestrates. A late response from a
+// superseded window is dropped. One store per rental surface: createRentalFlowStore(rental).
+//
+// Time zone: every request runs in the BUSINESS zone (none is sent; the response names it), which
+// daily rentals require and hourly ones tolerate; the label tells the visitor which zone applies.
+import { fetchEndOptions, fetchQuote, fetchRentalForm, fetchStarts, rentResource } from "./rentals";
+import { dayLabel, startOfDay } from "./rentals-core";
+import type { EndOption, RentalDetail, RentalFormField, RentalQuote, RentalResult, StartOption } from "./types";
+
+/** Starts grouped by day, in order. For a DAILY rental every day holds exactly one start (midnight). */
+export interface RentalDay {
+  dayKey: string;
+  dayLabel: string;
+  starts: StartOption[];
+}
+
+const HOURLY_WINDOW_DAYS = 7;
+const DAILY_WINDOW_DAYS = 14;
+
+/** Everything a rental surface renders from. Read it with getState() or through a subscription. */
+export interface RentalFlowState {
+  /** Starts grouped by day within the window; null while loading; [] when the window has none. */
+  days: RentalDay[] | null;
+  /** The window start (a day boundary); page with nextWindow/prevWindow (prev clamps to today). Hourly windows are 7 days, daily 14. */
+  windowStart: Date;
+  windowDays: number;
+  /** The IANA zone the shown times are in (the business zone, from the response); null until known. */
+  timeZone: string | null;
+  selectedStart: StartOption | null;
+  /** The lengths the chosen start allows; null while loading (or before a start is chosen); [] when the start allows none. */
+  endOptions: EndOption[] | null;
+  selectedEnd: EndOption | null;
+  /** The server's price for start + length; null until both are chosen and the preview returns. */
+  quote: RentalQuote | null;
+  /** Schema-driven form fields (never empty — contact basics fallback). */
+  formFields: RentalFormField[];
+  values: Record<string, string>;
+  /** rent / requestToRent — the CTA's label and the confirmed copy follow it. */
+  ctaState: "rent" | "requestToRent";
+  /** True when a start and a length are chosen and every required field has a value. */
+  canRent: boolean;
+  renting: boolean;
+  /** Set after a free/offline rental completes — the only REAL success signal. */
+  confirmed: RentalResult | null;
+  error: string | null;
+}
+
+export interface RentalFlowStore {
+  getState(): RentalFlowState;
+  subscribe(listener: () => void): () => void;
+  /** Load the first window and the form. Call once when mounted (a browser). */
+  start(): void;
+  /** Stop reacting; drop late responses. */
+  stop(): void;
+  nextWindow(): void;
+  prevWindow(): void;
+  /** Move the window to the one holding this day ("YYYY-MM-DD"). */
+  jumpTo(dayKey: string): void;
+  /** Ignored for a non-bookable start. Clears the length and the quote; loads the new start's lengths. */
+  setSelectedStart(start: StartOption | null): void;
+  /** Requests the quote for start + length. */
+  setSelectedEnd(end: EndOption | null): void;
+  setValue(target: string, value: string): void;
+  /** Rents the chosen start for the chosen length. On "redirect" the browser is already navigating; otherwise `confirmed` is set. Rejects with the refusal (also in .error). */
+  rent(): Promise<RentalResult>;
+}
+
+function groupByDay(starts: StartOption[]): RentalDay[] {
+  const map = new Map<string, StartOption[]>();
+  for (const s of starts) {
+    const list = map.get(s.dayKey) ?? [];
+    list.push(s);
+    map.set(s.dayKey, list);
+  }
+  return [...map.entries()].sort(([a], [b]) => a.localeCompare(b)).map(([dayKey, list]) => ({ dayKey, dayLabel: dayLabel(dayKey), starts: list }));
+}
+
+export function createRentalFlowStore(rental: RentalDetail): RentalFlowStore {
+  const daily = rental.unit === "DAY";
+  const windowDays = daily ? DAILY_WINDOW_DAYS : HOURLY_WINDOW_DAYS;
+  let windowStart = startOfDay(new Date());
+  let starts: StartOption[] | null = null; // the window's starts
+  let availableDayKeys: string[] = []; // DAILY: the window's days plus the run-off the walk needs
+  let timeZone: string | null = null;
+  let selectedStart: StartOption | null = null;
+  let endOptions: EndOption[] | null = null;
+  let selectedEnd: EndOption | null = null;
+  let quote: RentalQuote | null = null;
+  let formFields: RentalFormField[] = [];
+  let values: Record<string, string> = {};
+  let renting = false;
+  let confirmed: RentalResult | null = null;
+  let error: string | null = null;
+  let started = false;
+  let generation = 0;
+  let endGeneration = 0;
+  const listeners = new Set<() => void>();
+  let snapshot: RentalFlowState | null = null;
+  const emit = () => {
+    snapshot = null;
+    for (const fn of listeners) fn();
+  };
+
+  const ctaState = (): RentalFlowState["ctaState"] => (rental.requiresManualApproval ? "requestToRent" : "rent");
+  const formComplete = () => formFields.every((f) => !f.required || (values[f.target] ?? "").trim().length > 0);
+
+  function getState(): RentalFlowState {
+    if (snapshot) return snapshot;
+    snapshot = {
+      days: starts === null ? null : groupByDay(starts),
+      windowStart,
+      windowDays,
+      timeZone,
+      selectedStart,
+      endOptions,
+      selectedEnd,
+      quote,
+      formFields,
+      values,
+      ctaState: ctaState(),
+      canRent: !!selectedStart?.bookable && !!selectedEnd && formComplete() && !renting,
+      renting,
+      confirmed,
+      error,
+    };
+    return snapshot;
+  }
+
+  // The window changed: clear the picker and load the starts. A DAILY rental fetches the window plus
+  // its maximum length beyond it, so a start near the window's end still sees every day it can run into.
+  function loadStarts(): void {
+    if (!started) return;
+    const id = ++generation;
+    starts = null;
+    selectedStart = null;
+    endOptions = null;
+    selectedEnd = null;
+    quote = null;
+    emit();
+    const runOff = daily ? Math.max(0, Math.floor(rental.maxUnits)) : 0;
+    fetchStarts(rental, { from: windowStart, days: windowDays + runOff })
+      .then((page) => {
+        if (!started || generation !== id) return; // superseded — drop it
+        const windowEnd = new Date(windowStart.getFullYear(), windowStart.getMonth(), windowStart.getDate() + windowDays);
+        const endKey = `${windowEnd.getFullYear()}-${String(windowEnd.getMonth() + 1).padStart(2, "0")}-${String(windowEnd.getDate()).padStart(2, "0")}`;
+        starts = page.options.filter((s) => s.dayKey < endKey);
+        availableDayKeys = [...new Set(page.options.filter((s) => s.bookable).map((s) => s.dayKey))];
+        timeZone = page.timeZone;
+        emit();
+      })
+      .catch((e) => {
+        if (!started || generation !== id) return;
+        starts = [];
+        error = e instanceof Error ? e.message : String(e);
+        emit();
+      });
+  }
+
+  function loadEndOptions(start: StartOption): void {
+    const id = ++endGeneration;
+    const gen = generation;
+    endOptions = null;
+    emit();
+    fetchEndOptions(rental, start, { timeZone, availableDayKeys })
+      .then((options) => {
+        if (!started || endGeneration !== id || generation !== gen) return;
+        endOptions = options;
+        emit();
+      })
+      .catch((e) => {
+        if (!started || endGeneration !== id || generation !== gen) return;
+        endOptions = [];
+        error = e instanceof Error ? e.message : String(e);
+        emit();
+      });
+  }
+
+  function loadQuote(start: StartOption, end: EndOption): void {
+    const id = endGeneration;
+    const gen = generation;
+    quote = null;
+    emit();
+    fetchQuote(rental, start, end, timeZone ?? undefined).then((q) => {
+      if (!started || endGeneration !== id || generation !== gen || selectedEnd !== end) return;
+      quote = q;
+      emit();
+    });
+  }
+
+  const shiftWindow = (days: number) => {
+    const today = startOfDay(new Date());
+    const next = new Date(windowStart.getFullYear(), windowStart.getMonth(), windowStart.getDate() + days);
+    windowStart = next < today ? today : next;
+    loadStarts();
+  };
+
+  return {
+    getState,
+    subscribe(fn) {
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    },
+    start() {
+      if (started) return;
+      started = true;
+      loadStarts();
+      fetchRentalForm(rental.formId).then((f) => {
+        if (!started) return;
+        formFields = f;
+        emit();
+      });
+    },
+    stop() {
+      started = false;
+      generation++;
+      endGeneration++;
+    },
+    nextWindow() {
+      shiftWindow(windowDays);
+    },
+    prevWindow() {
+      shiftWindow(-windowDays);
+    },
+    jumpTo(dayKey) {
+      const day = new Date(`${dayKey}T12:00:00`);
+      if (Number.isNaN(day.getTime())) return;
+      const today = startOfDay(new Date());
+      const target = startOfDay(day);
+      windowStart = target < today ? today : target;
+      loadStarts();
+    },
+    setSelectedStart(start) {
+      if (start && !start.bookable) return;
+      selectedStart = start;
+      selectedEnd = null;
+      quote = null;
+      error = null;
+      endGeneration++;
+      if (start) loadEndOptions(start);
+      else endOptions = null;
+      emit();
+    },
+    setSelectedEnd(end) {
+      selectedEnd = end;
+      quote = null;
+      if (selectedStart && end) loadQuote(selectedStart, end);
+      else emit();
+    },
+    setValue(target, value) {
+      values = { ...values, [target]: value };
+      emit();
+    },
+    async rent() {
+      if (!selectedStart) throw new Error("Pick a start first.");
+      if (!selectedEnd) throw new Error("Pick how long first.");
+      renting = true;
+      error = null;
+      emit();
+      try {
+        const result = await rentResource(rental, selectedStart, selectedEnd, values, timeZone ?? undefined);
+        if (result.kind === "redirect") {
+          window.location.href = result.url;
+        } else {
+          confirmed = result;
+        }
+        return result;
+      } catch (e) {
+        error = e instanceof Error ? e.message : String(e);
+        throw e;
+      } finally {
+        renting = false;
+        emit();
+      }
+    },
+  };
+}