@wix/agent-skills 1.26.0 → 1.28.0

package/skills/wix-headless-templates/rentals/project/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "wix-astro-blank",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "astro": "astro",
+    "dev": "wix dev",
+    "build": "wix build",
+    "wix": "wix",
+    "preview": "wix preview",
+    "release": "wix release",
+    "generate": "wix generate",
+    "env": "wix env",
+    "skills": "wix skills"
+  },
+  "dependencies": {
+    "@wix/astro": "^3.0.0",
+    "@wix/astro-pages": "^3.0.0",
+    "@wix/dashboard": "^1.3.43",
+    "@wix/essentials": "^1.0.6",
+    "@wix/sdk": "^1.21.5",
+    "astro": "^7.3.2",
+    "typescript": "^5.8.3",
+    "tailwindcss": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.7",
+    "@wix/bookings": "^1.0.1650",
+    "@wix/auto_sdk_ecom_cart-v-2": "^1.0.192",
+    "@wix/redirects": "^1.0.125",
+    "@wix/seo": "^1.0.79"
+  },
+  "devDependencies": {
+    "@astrojs/react": "^6.0.6",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@wix/cli": "^1.1.92",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "@wix/astro-wix-hosting-adapter": "^3.0.0"
+  }
+}

package/skills/wix-headless-templates/rentals/project/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="115" height="48"><path fill="#17191E" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="url(#a)" d="M7.77 36.35C6.4 35.11 6 32.51 6.57 30.62c.99 1.2 2.35 1.57 3.75 1.78 2.18.33 4.31.2 6.33-.78.23-.12.44-.27.7-.42.18.55.23 1.1.17 1.67a4.56 4.56 0 0 1-1.94 3.23c-.43.32-.9.61-1.34.91-1.38.94-1.76 2.03-1.24 3.62l.05.17a3.63 3.63 0 0 1-1.6-1.38 3.87 3.87 0 0 1-.63-2.1c0-.37 0-.74-.05-1.1-.13-.9-.55-1.3-1.33-1.32a1.56 1.56 0 0 0-1.63 1.26c0 .06-.03.12-.05.2Z"/><path fill="#17191E" d="M.02 30.31s4.02-1.95 8.05-1.95l3.04-9.4c.11-.45.44-.76.82-.76.37 0 .7.31.82.76l3.04 9.4c4.77 0 8.05 1.95 8.05 1.95L17 11.71c-.2-.56-.53-.91-.98-.91H7.83c-.44 0-.76.35-.97.9L.02 30.31Zm42.37-5.97c0 1.64-2.05 2.62-4.88 2.62-1.85 0-2.5-.45-2.5-1.41 0-1 .8-1.49 2.65-1.49 1.67 0 3.09.03 4.73.23v.05Zm.03-2.04a21.37 21.37 0 0 0-4.37-.36c-5.32 0-7.82 1.25-7.82 4.18 0 3.04 1.71 4.2 5.68 4.2 3.35 0 5.63-.84 6.46-2.92h.14c-.03.5-.05 1-.05 1.4 0 1.07.18 1.16 1.06 1.16h4.15a16.9 16.9 0 0 1-.36-4c0-1.67.06-2.93.06-4.62 0-3.45-2.07-5.64-8.56-5.64-2.8 0-5.9.48-8.26 1.19.22.93.54 2.83.7 4.06 2.04-.96 4.95-1.37 7.2-1.37 3.11 0 3.97.71 3.97 2.15v.57Zm11.37 3c-.56.07-1.33.07-2.12.07-.83 0-1.6-.03-2.12-.1l-.02.58c0 2.85 1.87 4.52 8.45 4.52 6.2 0 8.2-1.64 8.2-4.55 0-2.74-1.33-4.09-7.2-4.39-4.58-.2-4.99-.7-4.99-1.28 0-.66.59-1 3.65-1 3.18 0 4.03.43 4.03 1.35v.2a46.13 46.13 0 0 1 4.24.03l.02-.55c0-3.36-2.8-4.46-8.2-4.46-6.08 0-8.13 1.49-8.13 4.39 0 2.6 1.64 4.23 7.48 4.48 4.3.14 4.77.62 4.77 1.28 0 .7-.7 1.03-3.71 1.03-3.47 0-4.35-.48-4.35-1.47v-.13Zm19.82-12.05a17.5 17.5 0 0 1-6.24 3.48c.03.84.03 2.4.03 3.24l1.5.02c-.02 1.63-.04 3.6-.04 4.9 0 3.04 1.6 5.32 6.58 5.32 2.1 0 3.5-.23 5.23-.6a43.77 43.77 0 0 1-.46-4.13c-1.03.34-2.34.53-3.78.53-2 0-2.82-.55-2.82-2.13 0-1.37 0-2.65.03-3.84 2.57.02 5.13.07 6.64.11-.02-1.18.03-2.9.1-4.04-2.2.04-4.65.07-6.68.07l.07-2.93h-.16Zm13.46 6.04a767.33 767.33 0 0 1 .07-3.18H82.6c.07 1.96.07 3.98.07 6.92 0 2.95-.03 4.99-.07 6.93h5.18c-.09-1.37-.11-3.68-.11-5.65 0-3.1 1.26-4 4.12-4 1.33 0 2.28.16 3.1.46.03-1.16.26-3.43.4-4.43-.86-.25-1.81-.41-2.96-.41-2.46-.03-4.26.98-5.1 3.38l-.17-.02Zm22.55 3.65c0 2.5-1.8 3.66-4.64 3.66-2.81 0-4.61-1.1-4.61-3.66s1.82-3.52 4.61-3.52c2.82 0 4.64 1.03 4.64 3.52Zm4.71-.11c0-4.96-3.87-7.18-9.35-7.18-5.5 0-9.23 2.22-9.23 7.18 0 4.94 3.49 7.59 9.21 7.59 5.77 0 9.37-2.65 9.37-7.6Z"/><defs><linearGradient id="a" x1="6.33" x2="19.43" y1="40.8" y2="34.6" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient></defs></svg>

package/skills/wix-headless-templates/rentals/project/src/assets/background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>

package/skills/wix-headless-templates/rentals/project/src/assets/wix.svg

@@ -0,0 +1,18 @@
+<svg width="166" height="64" viewBox="0 0 166 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_14809_9463)">
+    <path
+      d="M165.304 0H156.173C153.64 0 151.273 1.25433 149.85 3.35199L137.639 21.3662C137.313 21.844 136.608 21.844 136.283 21.3662L124.071 3.35199C122.651 1.25433 120.281 0 117.748 0H108.617L130.371 32.0894L108.737 64H117.868C120.401 64 122.769 62.7457 124.192 60.648L136.283 42.8126C136.608 42.3349 137.313 42.3349 137.639 42.8126L149.73 60.648C151.15 62.7457 153.52 64 156.053 64H165.184L143.551 32.0894L165.304 0Z"
+      fill="black" />
+    <path
+      d="M89.8281 6.54652V64H94.1922C97.8088 64 100.74 61.0697 100.74 57.4535V0H96.3755C92.7588 0 89.8281 2.93032 89.8281 6.54652Z"
+      fill="black" />
+    <path
+      d="M81.8276 0H77.944C73.6681 0 69.9633 2.95701 69.0158 7.12564L60.3278 45.3185L52.7234 9.66632C51.3168 3.0771 44.5559 -1.36641 37.6375 0.544431C33.2307 1.76139 29.9637 5.48434 29.0108 9.95455L21.4839 45.2705L12.8118 7.12831C11.8616 2.95968 8.15687 0 3.88092 0H0L14.5548 63.9973H20.0692C25.0738 63.9973 29.3978 60.4986 30.4415 55.604L39.7461 11.9401C39.8608 11.3984 40.3466 11.006 40.8991 11.006C41.4516 11.006 41.9374 11.3984 42.0522 11.9401L51.3648 55.6067C52.4084 60.5012 56.7324 63.9973 61.7371 63.9973H67.2702L81.8276 0Z"
+      fill="black" />
+  </g>
+  <defs>
+    <clipPath id="clip0_14809_9463">
+      <rect width="165.305" height="64" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

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

@@ -0,0 +1,77 @@
+<section id="hero">
+	<div id="hero-inner">
+		<h1 id="hero-heading">Keep building with your AI coding agent</h1>
+		<p id="hero-body">
+			Go back to your coding agent and keep prompting. Add pages, content,
+			and design as you go.
+		</p>
+		<a
+			href="https://dev.wix.com/docs/go-headless"
+			target="_blank"
+			rel="noopener noreferrer"
+			id="hero-cta">Learn More About Headless</a
+		>
+	</div>
+</section>
+
+<style>
+	#hero {
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 80px 40px;
+		position: relative;
+		overflow: hidden;
+		background: linear-gradient(135deg, #dde9de 0%, #eaedf4 55%, #e0dced 100%);
+		font-family:
+			Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
+			sans-serif;
+		box-sizing: border-box;
+	}
+
+	#hero-inner {
+		max-width: 800px;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	#hero-heading {
+		font-size: clamp(36px, 5vw, 64px);
+		font-weight: 400;
+		line-height: 1.05;
+		letter-spacing: -0.02em;
+		color: #1a1d2e;
+		margin: 0;
+	}
+
+	#hero-body {
+		margin: 20px 0 0;
+		font-size: 16px;
+		line-height: 1.6;
+		color: #4a4d5e;
+		max-width: 520px;
+	}
+
+	#hero-cta {
+		display: inline-block;
+		margin-top: 36px;
+		border-radius: 24px;
+		padding: 13px 28px;
+		font-size: 14px;
+		font-weight: 500;
+		width: fit-content;
+		background: #1a1d2e;
+		color: #fff;
+		text-decoration: none;
+	}
+
+	@media (max-width: 640px) {
+		#hero {
+			padding: 80px 20px;
+		}
+	}
+</style>

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

@@ -0,0 +1,95 @@
+---
+import astroLogo from "../assets/astro.svg";
+import wixLogo from "../assets/wix.svg";
+import background from "../assets/background.svg";
+---
+
+<div id="container">
+	<img id="background" src={background.src} alt="" fetchpriority="high" />
+	<main>
+		<section id="hero">
+			<div id="logos">
+				<a href="https://dev.wix.com"
+					><img
+						src={wixLogo.src}
+						width="70"
+						alt="Wix Documentation"
+					/></a
+				>
+				<a href="https://astro.build"
+					><img
+						src={astroLogo.src}
+						width="115"
+						alt="Astro Homepage"
+					/></a
+				>
+			</div>
+			<h1>
+				To get started, open the <code><pre>src/pages</pre></code> directory in your
+				project.
+			</h1>
+		</section>
+	</main>
+</div>
+
+<style>
+	#background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		filter: blur(100px);
+	}
+
+	#container {
+		font-family:
+			Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
+			sans-serif;
+		height: 100%;
+	}
+
+	#logos {
+		display: flex;
+		align-items: center;
+		gap: 2rem;
+	}
+
+	main {
+		height: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	#hero {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		padding: 16px;
+	}
+
+	h1 {
+		font-size: 22px;
+		margin-top: 0.25em;
+	}
+
+	pre {
+		font-weight: normal;
+		background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+		margin: 0;
+	}
+
+	code {
+		display: inline-block;
+		background:
+			linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
+			linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
+		border-radius: 8px;
+		border: 1px solid transparent;
+		padding: 6px 8px;
+	}
+</style>

package/skills/wix-headless-templates/rentals/project/src/components/rentals/RentalBookingView.tsx

@@ -0,0 +1,195 @@
+// REFERENCE rental surface: the start picker ONE DAY AT A TIME (a strip of the days that have
+// availability, then that day's times bucketed into morning / afternoon / evening; a daily rental
+// shows the strip alone, since a day IS the start), window paging at the ends of the strip, the
+// time-zone line, the length picker for the chosen start, the server-priced quote, the schema-driven
+// form, and the CTA labelled from ctaState — on the @theme tokens. A rental's resources are usually
+// bookable around the clock, so a week of starts is over three hundred chips; listing them all
+// buries the form and reads as a wall of numbers. Correct and complete; per the skill's model you
+// design and build your own on useRentalFlow. Mount client:only — availability is time-zone-specific.
+import { useEffect, useState } from "react";
+import { useRentalFlow } from "../../hooks/rentals/useRentalFlow";
+import type { RentalDetail, StartOption } from "../../wix/rentals/types";
+
+const chip = (selected: boolean, disabled = false) =>
+  `rounded-control border px-4 py-1.5 text-sm transition-colors ${
+    disabled ? "cursor-not-allowed border-border text-muted-foreground line-through opacity-60" : selected ? "border-primary bg-primary text-primary-foreground" : "border-border text-foreground hover:bg-secondary"
+  }`;
+const dayTile = (selected: boolean, disabled = false) =>
+  `w-[68px] shrink-0 rounded-md border px-1 py-2 text-center transition-colors ${
+    disabled ? "cursor-not-allowed border-border text-muted-foreground opacity-60" : selected ? "border-primary bg-primary text-primary-foreground" : "border-border text-foreground hover:bg-secondary"
+  }`;
+const pager = "w-[68px] shrink-0 rounded-md border border-border px-1 py-2 text-center text-xs leading-tight text-foreground transition-colors hover:bg-secondary";
+
+const input = "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition-shadow focus:ring-2 focus:ring-primary";
+const heading = "mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground";
+
+// startLocal is "YYYY-MM-DDThh:mm:ss" (no zone): chars 11–13 are the local hour, no Date parsing needed.
+const hourOf = (s: StartOption): number => Number(s.startLocal.slice(11, 13));
+const BUCKETS: { label: string; test: (h: number) => boolean }[] = [
+  { label: "Morning", test: (h) => h < 12 },
+  { label: "Afternoon", test: (h) => h >= 12 && h < 17 },
+  { label: "Evening", test: (h) => h >= 17 },
+];
+const fmtDay = (dayKey: string, opts: Intl.DateTimeFormatOptions): string => {
+  try {
+    return new Date(`${dayKey}T12:00:00`).toLocaleDateString(undefined, opts);
+  } catch {
+    return dayKey;
+  }
+};
+
+export default function RentalBookingView({ rental }: { rental: RentalDetail }) {
+  const { days, windowDays, nextWindow, prevWindow, timeZone, selectedStart, setSelectedStart, endOptions, selectedEnd, setSelectedEnd, quote, formFields, values, setValue, ctaState, canRent, rent, renting, confirmed, error } =
+    useRentalFlow(rental);
+  const [activeDay, setActiveDay] = useState<string | null>(null);
+
+  // Follow the data: land on the first day with availability, and don't strand the view on a day
+  // that left when the window moved.
+  useEffect(() => {
+    if (days && days.length && !days.some((d) => d.dayKey === activeDay)) setActiveDay(days[0].dayKey);
+  }, [days, activeDay]);
+
+  const daily = rental.unit === "DAY";
+  const verb = ctaState === "requestToRent" ? "Request to rent" : "Rent";
+
+  if (confirmed) {
+    return (
+      <div className="rounded-lg border border-border bg-secondary p-8 text-center">
+        <p className="text-lg font-semibold">{ctaState === "requestToRent" ? "Request sent" : "You're all set!"}</p>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {rental.name}
+          {selectedStart && selectedEnd ? ` — ${selectedStart.label}, ${selectedEnd.label}` : ""}.{" "}
+          {ctaState === "requestToRent" ? "You'll hear back once the request is approved." : "A confirmation email is on its way."}
+        </p>
+      </div>
+    );
+  }
+
+  const current = days?.find((d) => d.dayKey === activeDay) ?? days?.[0] ?? null;
+  const buckets = current ? BUCKETS.map((b) => ({ label: b.label, starts: current.starts.filter((s) => b.test(hourOf(s))) })).filter((b) => b.starts.length) : [];
+
+  // Switching day drops a start chosen on another day — otherwise the CTA names a time that isn't on screen.
+  const pickDay = (dayKey: string) => {
+    setActiveDay(dayKey);
+    if (selectedStart && selectedStart.dayKey !== dayKey) setSelectedStart(null);
+  };
+
+  return (
+    <div>
+      <p className={heading}>{daily ? "Pick a start day" : "Pick a day"}</p>
+      {days === null ? (
+        <div className="flex gap-2" aria-busy="true">
+          {Array.from({ length: 5 }, (_, i) => (
+            <div key={i} className="h-14 w-[68px] animate-pulse rounded-md bg-secondary" />
+          ))}
+        </div>
+      ) : (
+        <div className="flex gap-2 overflow-x-auto pb-1" role="group" aria-label={daily ? "Choose a start day" : "Choose a day"}>
+          <button type="button" onClick={prevWindow} className={pager} aria-label={`Previous ${windowDays} days`}>
+            Earlier
+          </button>
+          {days.length === 0 && <p className="self-center text-sm text-muted-foreground">Nothing available in these {windowDays} days.</p>}
+          {days.map((day) => {
+            const start = daily ? day.starts[0] : null; // a daily rental's day is its start
+            const active = daily ? selectedStart?.key === start?.key : day.dayKey === current?.dayKey;
+            return (
+              <button key={day.dayKey} type="button" aria-pressed={active} disabled={daily && !start?.bookable} className={dayTile(active, daily && !start?.bookable)} onClick={() => (daily && start ? setSelectedStart(start) : pickDay(day.dayKey))}>
+                <span className="block text-[10px] uppercase tracking-wide opacity-70">{fmtDay(day.dayKey, { weekday: "short" })}</span>
+                <span className="block text-lg font-semibold leading-tight">{fmtDay(day.dayKey, { day: "numeric" })}</span>
+              </button>
+            );
+          })}
+          <button type="button" onClick={nextWindow} className={pager} aria-label={`Next ${windowDays} days`}>
+            More
+            <br />
+            dates
+          </button>
+        </div>
+      )}
+
+      {!daily && current && (
+        <div className="mt-5">
+          <div className="mb-3 flex flex-wrap items-baseline justify-between gap-2">
+            <p className="text-sm font-medium">{fmtDay(current.dayKey, { weekday: "long", month: "short", day: "numeric" })}</p>
+            <span className="text-xs text-muted-foreground">
+              {current.starts.length} {current.starts.length === 1 ? "start" : "starts"}
+              {timeZone ? ` · times in ${timeZone.replace(/_/g, " ")}` : ""}
+            </span>
+          </div>
+          <div className="space-y-4">
+            {buckets.map((b) => (
+              <div key={b.label}>
+                <p className="mb-2 text-[11px] uppercase tracking-[0.12em] text-muted-foreground">{b.label}</p>
+                <div className="flex flex-wrap gap-2">
+                  {b.starts.map((s) => (
+                    <button key={s.key} type="button" disabled={!s.bookable} title={s.location?.name || undefined} className={chip(selectedStart?.key === s.key, !s.bookable)} onClick={() => setSelectedStart(s)}>
+                      {s.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {selectedStart && (
+        <div className="mt-6">
+          <p className={heading}>How long{daily ? ` from ${selectedStart.label}` : ""}</p>
+          {endOptions === null ? (
+            <div className="h-10 animate-pulse rounded-md bg-secondary" aria-busy="true" />
+          ) : endOptions.length === 0 ? (
+            <p className="rounded-md border border-border p-4 text-sm text-muted-foreground">This start can't be rented for the minimum length. Pick another start.</p>
+          ) : (
+            <div className="flex flex-wrap gap-2">
+              {endOptions.map((o) => (
+                <button key={o.endLocal} type="button" className={chip(selectedEnd?.endLocal === o.endLocal)} onClick={() => setSelectedEnd(o)}>
+                  {o.label}
+                </button>
+              ))}
+            </div>
+          )}
+          {selectedEnd && (
+            <p className="mt-3 text-sm text-muted-foreground">
+              {quote === null ? "Calculating the price…" : quote.total ? <>Total <span className="font-medium text-foreground">{quote.total}</span></> : rental.free ? "Free" : ""}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="mt-6 grid max-w-md gap-3">
+        {formFields.map((f) => (
+          <label key={f.target} className="block">
+            <span className={heading}>
+              {f.label}
+              {f.required ? " *" : ""}
+            </span>
+            {f.options?.length ? (
+              <select value={values[f.target] ?? ""} onChange={(e) => setValue(f.target, e.target.value)} className={input}>
+                <option value="">Choose…</option>
+                {f.options.map((o) => (
+                  <option key={o} value={o}>
+                    {o}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <input
+                type={f.type === "EMAIL" ? "email" : f.type === "PHONE" ? "tel" : f.type === "NUMBER" ? "number" : f.type === "URL" ? "url" : "text"}
+                value={values[f.target] ?? ""}
+                required={f.required}
+                onChange={(e) => setValue(f.target, e.target.value)}
+                className={input}
+              />
+            )}
+          </label>
+        ))}
+      </div>
+
+      {error && <p className="mt-3 text-sm text-destructive">{error}</p>}
+      <button type="button" disabled={!canRent || renting} onClick={() => rent().catch(() => {})} className="mt-5 rounded-control bg-primary px-8 py-3 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-50">
+        {renting ? "Reserving…" : rental.free ? `${verb} — free` : quote?.total ? `${verb} · ${quote.total}` : rental.rateLabel ? `${verb} · ${rental.rateLabel}` : verb}
+      </button>
+    </div>
+  );
+}

package/skills/wix-headless-templates/rentals/project/src/components/rentals/RentalsView.tsx

@@ -0,0 +1,89 @@
+// REFERENCE listing surface: rentals grid with the rate and range per tile, skeletons, an honest
+// empty state, and load-more, on the @theme tokens. Correct and complete; per the skill's model you
+// design and build your own on useRentals.
+import type { ComponentType, ReactNode } from "react";
+import { useRentals } from "../../hooks/rentals/useRentals";
+import type { RentalSummary } from "../../wix/rentals/types";
+
+export interface LinkLikeProps {
+  href: string;
+  className?: string;
+  children?: ReactNode;
+}
+
+const PlainLink = ({ href, className, children }: LinkLikeProps) => (
+  <a href={href} className={className}>
+    {children}
+  </a>
+);
+
+export interface RentalCardProps {
+  rental: RentalSummary;
+  rentalHref?: (slug: string) => string;
+  LinkComponent?: ComponentType<LinkLikeProps>;
+}
+
+export function RentalCard({ rental, rentalHref = (slug) => `/rentals/${slug}`, LinkComponent = PlainLink }: RentalCardProps) {
+  return (
+    <LinkComponent href={rentalHref(rental.slug)} className="group block no-underline">
+      <div className="relative aspect-[4/3] overflow-hidden rounded-lg bg-secondary">
+        {rental.imageUrl && <img src={rental.imageUrl} alt={rental.name} loading="lazy" className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]" />}
+        <span className="absolute left-3 top-3 rounded-control bg-background/90 px-3 py-1 text-xs font-semibold text-foreground backdrop-blur">{rental.unit === "DAY" ? "By the day" : "By the hour"}</span>
+      </div>
+      <p className="mt-3 text-sm font-medium text-foreground">{rental.name}</p>
+      {rental.tagLine && <p className="mt-0.5 text-xs text-muted-foreground">{rental.tagLine}</p>}
+      <p className="mt-1 text-sm text-muted-foreground">
+        {rental.rateLabel && <span className="text-foreground">{rental.rateLabel}</span>}
+        {rental.rateLabel && rental.rangeLabel ? " · " : ""}
+        {rental.rangeLabel}
+      </p>
+      {rental.locations.length > 0 && rental.locations[0].name && <p className="mt-0.5 text-xs text-muted-foreground">{rental.locations.map((l) => l.name).filter(Boolean).join(" · ")}</p>}
+    </LinkComponent>
+  );
+}
+
+export interface RentalsViewProps {
+  initialRentals?: RentalSummary[];
+  initialHasMore?: boolean;
+  emptyMessage?: string;
+  rentalHref?: RentalCardProps["rentalHref"];
+  LinkComponent?: ComponentType<LinkLikeProps>;
+  CardComponent?: ComponentType<RentalCardProps>;
+}
+
+export default function RentalsView({ initialRentals, initialHasMore, emptyMessage = "Nothing to rent yet — check back soon.", rentalHref, LinkComponent, CardComponent = RentalCard }: RentalsViewProps) {
+  const { rentals, hasMore, loadingMore, loadMore, error } = useRentals({ initialRentals, initialHasMore });
+
+  return (
+    <div>
+      {error && <p className="mb-4 text-sm text-destructive">{error}</p>}
+      {rentals === null ? (
+        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3" aria-busy="true">
+          {Array.from({ length: 6 }, (_, i) => (
+            <div key={i}>
+              <div className="aspect-[4/3] animate-pulse rounded-lg bg-secondary" />
+              <div className="mt-3 h-3.5 w-2/3 animate-pulse rounded bg-secondary" />
+            </div>
+          ))}
+        </div>
+      ) : rentals.length === 0 ? (
+        <p className="py-16 text-center text-muted-foreground">{emptyMessage}</p>
+      ) : (
+        <>
+          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {rentals.map((r) => (
+              <CardComponent key={r.id} rental={r} rentalHref={rentalHref} LinkComponent={LinkComponent} />
+            ))}
+          </div>
+          {hasMore && (
+            <div className="mt-10 text-center">
+              <button type="button" disabled={loadingMore} onClick={() => void loadMore()} className="rounded-control border border-border px-6 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:opacity-50">
+                {loadingMore ? "Loading…" : "Load more"}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,31 @@
+// React binding of the rental-flow store (wix/rentals/rental-flow-store.ts) — the whole rental
+// state machine for one rental lives there, framework-free: the availability window (starts grouped
+// by day, paging), the chosen start, the lengths it allows, the chosen length and its quote, the
+// schema-driven form, the CTA state, and rent(). All correctness lives in the data layer; you own
+// how it looks. Mount the surface client-only: availability is time-zone/session-specific.
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { createRentalFlowStore, type RentalFlowState, type RentalFlowStore } from "../../wix/rentals/rental-flow-store";
+import type { RentalDetail } from "../../wix/rentals/types";
+
+export type UseRentalFlow = RentalFlowState & Pick<RentalFlowStore, "nextWindow" | "prevWindow" | "jumpTo" | "setSelectedStart" | "setSelectedEnd" | "setValue" | "rent">;
+
+export function useRentalFlow(rental: RentalDetail): UseRentalFlow {
+  const ref = useRef<{ rentalId: string; store: RentalFlowStore } | null>(null);
+  if (!ref.current || ref.current.rentalId !== rental.id) ref.current = { rentalId: rental.id, store: createRentalFlowStore(rental) };
+  const store = ref.current.store;
+  useEffect(() => {
+    store.start();
+    return () => store.stop();
+  }, [store]);
+  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+  return {
+    ...state,
+    nextWindow: store.nextWindow,
+    prevWindow: store.prevWindow,
+    jumpTo: store.jumpTo,
+    setSelectedStart: store.setSelectedStart,
+    setSelectedEnd: store.setSelectedEnd,
+    setValue: store.setValue,
+    rent: store.rent,
+  };
+}

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

@@ -0,0 +1,23 @@
+// React binding of the rentals store (wix/rentals/rentals-store.ts) — the listing state lives
+// there, framework-free; this hook subscribes to one instance per mounted listing and exposes its
+// state and actions under one name. SSR-friendly: pass server-fetched data as `initial*` (Astro
+// frontmatter / server component) and no client fetch happens for the first paint; a SPA passes
+// nothing. Astro islands and React SPAs use this; a static page, Vue, or Svelte uses the store directly.
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { createRentalsStore, type RentalsState, type RentalsStore, type RentalsStoreOptions } from "../../wix/rentals/rentals-store";
+
+export type UseRentalsOptions = RentalsStoreOptions;
+
+export type UseRentals = RentalsState & Pick<RentalsStore, "loadMore">;
+
+export function useRentals(options: UseRentalsOptions = {}): UseRentals {
+  const ref = useRef<RentalsStore | null>(null);
+  if (!ref.current) ref.current = createRentalsStore(options);
+  const store = ref.current;
+  useEffect(() => {
+    store.start();
+    return () => store.stop();
+  }, [store]);
+  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
+  return { ...state, loadMore: store.loadMore };
+}

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

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Wix Astro Basics</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+
+<style>
+	html,
+	body {
+		margin: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,40 @@
+---
+// The site chrome for every rentals page — THIS file (header/footer/nav) plus the @theme
+// token block in src/styles/global.css are what you brand. Keep the <slot name="seo-tags" />
+// in <head> and the global.css import. (If another vertical is also deployed, its SiteLayout
+// won; merge nav links there instead.)
+import "../styles/global.css";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+const { title, description } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    <slot name="seo-tags" />
+  </head>
+  <body>
+    <header class="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur">
+      <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+        <a href="/" class="text-base font-bold tracking-tight text-foreground no-underline">Brand Name</a>
+        <nav class="flex items-center gap-6 text-sm">
+          <a href="/rentals" class="text-foreground no-underline transition-colors hover:text-muted-foreground">Rentals</a>
+        </nav>
+      </div>
+    </header>
+    <main class="mx-auto max-w-6xl px-6 pb-24 pt-10">
+      <slot />
+    </main>
+    <footer class="border-t border-border px-6 py-10 text-center text-sm text-muted-foreground">
+      © Brand Name
+    </footer>
+  </body>
+</html>