astro-tractstack 2.3.5 → 2.4.1

package/bin/create-tractstack.js

@@ -7,14 +7,33 @@ import {
   writeFileSync,
   existsSync,
 } from 'fs';
-import { resolve } from 'path';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
 import { homedir } from 'os';
 import { execSync } from 'child_process';
 import prompts from 'prompts';
 import kleur from 'kleur';
 
-// Keep in sync with package.json pnpm.overrides["@internationalized/date"]
-const INTL_DATE_VERSION = '3.10.1';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+function loadInstallManifest() {
+  const pkg = JSON.parse(
+    readFileSync(resolve(__dirname, '../package.json'), 'utf-8')
+  );
+  const manifest = pkg.tractstackInstall;
+  if (!manifest?.dependencies) {
+    throw new Error(
+      'astro-tractstack package.json is missing tractstackInstall.dependencies'
+    );
+  }
+  return manifest;
+}
+
+function formatPackageSpecs(deps) {
+  return Object.entries(deps)
+    .map(([name, version]) => (version ? `${name}@${version}` : name))
+    .join(' ');
+}
 
 // Detect package manager
 function detectPackageManager() {
@@ -332,67 +351,27 @@ PUBLIC_ENABLE_BUNNY="${finalResponses.enableBunny ? 'true' : 'false'}"
     packageManager === 'pnpm' ? 'pnpm add' : `${packageManager} add`;
 
   console.log(kleur.cyan('\nInstalling dependencies...'));
-  try {
-    // Install React and Node adapter
-    execSync(
-      `${addCommand} react@^19.0.0 react-dom@^19.0.0 astro@^5.16.6 @astrojs/react@^4.4.2 @astrojs/node@^9.4.3`,
-      { stdio: 'inherit' }
-    );
-    console.log(kleur.green('✅ React and Node adapter installed'));
-
-    // Install core dependencies
-    execSync(
-      `${addCommand} @nanostores/react@^1.0.0 nanostores@^1.0.1 @nanostores/persistent ulid@^3.0.1`,
-      {
-        stdio: 'inherit',
-      }
-    );
-    console.log(kleur.green('✅ State management installed'));
-
-    // Install UI components
-    execSync(
-      `${addCommand} @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@${INTL_DATE_VERSION}`,
-      {
-        stdio: 'inherit',
-      }
-    );
-    console.log(kleur.green('✅ UI components installed'));
-
-    // Install visualization dependencies
-    execSync(
-      `${addCommand} d3@^7.9.0 d3-sankey@^0.12.3 recharts@^3.1.2 player.js@^0.1.0 tinycolor2@^1.6.0 html-to-image@^1.11.13`,
-      {
-        stdio: 'inherit',
-      }
-    );
-    console.log(kleur.green('✅ Visualization dependencies installed'));
+  const installManifest = loadInstallManifest();
+  const dependencySpecs = formatPackageSpecs(installManifest.dependencies);
+  const devDependencySpecs = formatPackageSpecs(
+    installManifest.devDependencies || {}
+  );
 
-    // Install additional dependencies
-    execSync(
-      `${addCommand} path-to-regexp@^8.0.0 postcss postcss-selector-parser`,
-      { stdio: 'inherit' }
-    );
-    console.log(kleur.green('✅ Additional dependencies installed'));
+  try {
+    execSync(`${addCommand} ${dependencySpecs}`, { stdio: 'inherit' });
+    console.log(kleur.green('✅ TractStack dependencies installed'));
 
-    // Install dev dependencies
-    execSync(
-      `${addCommand} -D @types/node@^22.18.0 @types/react@^19.0.0 @types/react-dom@^19.0.0 @types/d3@^7.4.3 @types/d3-sankey@^0.12.3 prettier@^3.7.4 prettier-plugin-astro@^0.14.1 prettier-plugin-tailwindcss@^0.7.2 typescript@^5.9.3 @types/tinycolor2@^1.4.6 @mhsdesign/jit-browser-tailwindcss@^0.4.2`,
-      { stdio: 'inherit' }
-    );
-    console.log(kleur.green('✅ Dev dependencies installed'));
+    if (devDependencySpecs) {
+      execSync(`${addCommand} -D ${devDependencySpecs}`, { stdio: 'inherit' });
+      console.log(kleur.green('✅ Dev dependencies installed'));
+    }
   } catch (error) {
     console.log(kleur.red('❌ Failed to install dependencies'));
     console.log('Please run manually:');
-    console.log(
-      kleur.cyan(
-        `${addCommand} react@^19.0.0 react-dom@^19.0.0 astro@^5.16.6 @astrojs/react@^4.4.2 @astrojs/node@^9.4.3 @nanostores/react@^1.0.0 nanostores@^1.0.1 @nanostores/persistent ulid@^3.0.1 @ark-ui/react@^5.30.0 @heroicons/react@^2.1.1 @internationalized/date@${INTL_DATE_VERSION} d3@^7.9.0 d3-sankey@^0.12.3 recharts@^3.1.2 player.js@^0.1.0 tinycolor2@1.6.0 html-to-image@^1.11.13 path-to-regexp@^8.0.0 postcss postcss-selector-parser`
-      )
-    );
-    console.log(
-      kleur.cyan(
-        `${addCommand} -D @types/node@^22.18.0 @types/react@^19.0.0 @types/react-dom@^19.0.0 @types/d3@^7.4.3 @types/d3-sankey@^0.12.3 prettier@^3.7.4 prettier-plugin-astro@^0.14.1 prettier-plugin-tailwindcss@^0.7.2 typescript@^5.9.3 @types/tinycolor2@^1.4.6 @mhsdesign/jit-browser-tailwindcss@^0.4.2`
-      )
-    );
+    console.log(kleur.cyan(`${addCommand} ${dependencySpecs}`));
+    if (devDependencySpecs) {
+      console.log(kleur.cyan(`${addCommand} -D ${devDependencySpecs}`));
+    }
     process.exit(1);
   }
 

package/dist/index.js

@@ -1,6 +1,6 @@
 import { fileURLToPath as d } from "node:url";
 import { dirname as i, resolve as l } from "node:path";
-import { existsSync as n, mkdirSync as x, copyFileSync as k, writeFileSync as u } from "node:fs";
+import { existsSync as n, mkdirSync as k, copyFileSync as x, writeFileSync as u } from "node:fs";
 import { resolve as a } from "path";
 function g(t) {
   const e = i(d(t));
@@ -891,6 +891,14 @@ async function y(t, e, c) {
       src: t("../templates/custom/shopify/cart.astro"),
       dest: "src/pages/cart.astro"
     },
+    {
+      src: t("../templates/custom/shopify/cart-reset.astro"),
+      dest: "src/pages/cart/reset.astro"
+    },
+    {
+      src: t("../templates/custom/shopify/CartReset.tsx"),
+      dest: "src/custom/shopify/CartReset.tsx"
+    },
     {
       src: t("../templates/src/pages/privacy.astro"),
       dest: "src/pages/privacy.astro"
@@ -1497,18 +1505,6 @@ async function y(t, e, c) {
       ),
       dest: "src/components/codehooks/ListContentSetup.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/codehooks/ProductCardSetup.tsx"
-      ),
-      dest: "src/components/codehooks/ProductCardSetup.tsx"
-    },
-    {
-      src: t(
-        "../templates/src/components/codehooks/ProductGridSetup.tsx"
-      ),
-      dest: "src/components/codehooks/ProductGridSetup.tsx"
-    },
     {
       src: t(
         "../templates/src/components/codehooks/BunnyVideoWrapper.astro"
@@ -1519,6 +1515,31 @@ async function y(t, e, c) {
       src: t("../templates/src/components/codehooks/BunnyVideoSetup.tsx"),
       dest: "src/components/codehooks/BunnyVideoSetup.tsx"
     },
+    // CodeHook Blades (partial routes; core hooks overwritable)
+    {
+      src: t("../templates/src/pages/codehooks/featured-article.astro"),
+      dest: "src/pages/codehooks/featured-article.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/list-content.astro"),
+      dest: "src/pages/codehooks/list-content.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/search-widget.astro"),
+      dest: "src/pages/codehooks/search-widget.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/bunny-video.astro"),
+      dest: "src/pages/codehooks/bunny-video.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/epinet.astro"),
+      dest: "src/pages/codehooks/epinet.astro"
+    },
+    {
+      src: t("../templates/src/pages/codehooks/[...hookId].astro"),
+      dest: "src/pages/codehooks/[...hookId].astro"
+    },
     // Widget Components
     {
       src: t("../templates/src/components/widgets/Impression.tsx"),
@@ -1545,6 +1566,10 @@ async function y(t, e, c) {
       src: t("../templates/src/lib/resources.ts"),
       dest: "src/lib/resources.ts"
     },
+    {
+      src: t("../templates/src/lib/codeHookHelper.ts"),
+      dest: "src/lib/codeHookHelper.ts"
+    },
     // Client Scripts
     {
       src: t("../templates/src/client/htmx.min.js"),
@@ -2319,13 +2344,6 @@ async function y(t, e, c) {
       dest: "src/pages/storykeep/init.astro"
     },
     // Custom Components (Conditional)
-    {
-      src: t(
-        c?.includeExamples ? "../templates/custom/with-examples/CodeHook.astro" : "../templates/custom/minimal/CodeHook.astro"
-      ),
-      dest: "src/custom/CodeHook.astro",
-      protected: !0
-    },
     {
       src: t(
         c?.includeExamples ? "../templates/custom/with-examples/CustomRoutes.astro" : "../templates/custom/minimal/CustomRoutes.astro"
@@ -2334,9 +2352,7 @@ async function y(t, e, c) {
       protected: !0
     },
     {
-      src: t(
-        c?.includeExamples ? "../templates/custom/with-examples/HeaderWidget.astro" : "../templates/custom/minimal/HeaderWidget.astro"
-      ),
+      src: t("../templates/custom/minimal/HeaderWidget.astro"),
       dest: "src/custom/HeaderWidget.astro",
       protected: !0
     },
@@ -2405,6 +2421,29 @@ async function y(t, e, c) {
       dest: "src/custom/shopify/NativeBookingCalendar.tsx",
       protected: !0
     },
+    // CodeHook manifest (frontend capability list; hand-maintained, protected)
+    {
+      src: t(
+        c?.includeExamples ? "../templates/custom/with-examples/codehooks.ts" : "../templates/custom/minimal/codehooks.ts"
+      ),
+      dest: "src/custom/codehooks.ts",
+      protected: !0
+    },
+    // CodeHook Blades (userland hooks; protected once installed)
+    {
+      src: t(
+        "../templates/src/pages/codehooks/shopify-product-grid.astro"
+      ),
+      dest: "src/pages/codehooks/shopify-product-grid.astro",
+      protected: !0
+    },
+    {
+      src: t(
+        "../templates/src/pages/codehooks/shopify-service-list.astro"
+      ),
+      dest: "src/pages/codehooks/shopify-service-list.astro",
+      protected: !0
+    },
     // Example Components (Conditional)
     ...c?.includeExamples ? [
       {
@@ -2420,20 +2459,13 @@ async function y(t, e, c) {
         protected: !0
       },
       {
-        src: t("../templates/custom/with-examples/ProductGrid.astro"),
-        dest: "src/custom/ProductGrid.astro",
-        protected: !0
-      },
-      {
-        src: t(
-          "../templates/custom/with-examples/ProductCardWrapper.astro"
-        ),
-        dest: "src/custom/ProductCardWrapper.astro",
+        src: t("../templates/src/pages/codehooks/custom-hero.astro"),
+        dest: "src/pages/codehooks/custom-hero.astro",
         protected: !0
       },
       {
-        src: t("../templates/custom/with-examples/ProductCard.astro"),
-        dest: "src/custom/ProductCard.astro",
+        src: t("../templates/src/pages/codehooks/get-crafting.astro"),
+        dest: "src/pages/codehooks/get-crafting.astro",
         protected: !0
       },
       {
@@ -2453,11 +2485,11 @@ async function y(t, e, c) {
   for (const s of o)
     try {
       const p = i(s.dest);
-      n(p) || x(p, { recursive: !0 });
+      n(p) || k(p, { recursive: !0 });
       const r = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
       if (!n(s.dest) || r)
         if (n(s.src))
-          k(s.src, s.dest), e.info(`Updated ${s.dest}`);
+          x(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
           const m = f(s.dest);
           u(s.dest, m), e.info(`Created placeholder ${s.dest}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.3.5",
+  "version": "2.4.1",
   "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",
@@ -50,19 +50,57 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "tractstackInstall": {
+    "dependencies": {
+      "react": "^19.0.0",
+      "react-dom": "^19.0.0",
+      "astro": "^5.16.6",
+      "@astrojs/react": "^4.4.2",
+      "@astrojs/node": "^9.4.3",
+      "@nanostores/react": "^1.1.0",
+      "nanostores": "^1.3.0",
+      "@nanostores/persistent": "^1.3.4",
+      "ulid": "^3.0.2",
+      "@ark-ui/react": "^5.37.2",
+      "@internationalized/date": "^3.12.0",
+      "@heroicons/react": "^2.2.0",
+      "d3": "^7.9.0",
+      "d3-sankey": "^0.12.3",
+      "recharts": "^3.8.1",
+      "player.js": "^0.1.0",
+      "tinycolor2": "^1.6.0",
+      "html-to-image": "^1.11.13",
+      "path-to-regexp": "^8.4.2",
+      "postcss": "^8.5.15",
+      "postcss-selector-parser": "^7.1.4"
+    },
+    "devDependencies": {
+      "@types/node": "^22.20.0",
+      "@types/react": "^19.2.17",
+      "@types/react-dom": "^19.2.3",
+      "@types/d3": "^7.4.3",
+      "@types/d3-sankey": "^0.12.5",
+      "prettier": "^3.8.4",
+      "prettier-plugin-astro": "^0.14.1",
+      "prettier-plugin-tailwindcss": "^0.7.4",
+      "typescript": "^5.9.3",
+      "@types/tinycolor2": "^1.4.6",
+      "@mhsdesign/jit-browser-tailwindcss": "^0.4.2"
+    }
+  },
   "dependencies": {
     "@calcom/embed-react": "^1.5.3",
     "kleur": "^4.1.5",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@ark-ui/react": "^5.30.0",
+    "@ark-ui/react": "^5.37.2",
     "@astrojs/react": "^4.4.2",
-    "@heroicons/react": "^2.1.1",
-    "@internationalized/date": "^3.10.1",
+    "@heroicons/react": "^2.2.0",
+    "@internationalized/date": "^3.12.0",
     "@mhsdesign/jit-browser-tailwindcss": "^0.4.2",
-    "@nanostores/persistent": "^1.3.3",
-    "@nanostores/react": "^1.0.0",
+    "@nanostores/persistent": "^1.3.4",
+    "@nanostores/react": "^1.1.0",
     "@types/d3": "^7.4.3",
     "@types/d3-sankey": "^0.12.5",
     "@types/node": "^22.18.0",
@@ -74,7 +112,7 @@
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
     "html-to-image": "^1.11.13",
-    "nanostores": "^1.1.0",
+    "nanostores": "^1.3.0",
     "player.js": "^0.1.0",
     "postcss": "^8.5.6",
     "postcss-selector-parser": "^7.1.1",
@@ -96,8 +134,7 @@
   "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
   "pnpm": {
     "overrides": {
-      "esbuild@<=0.24.2": ">=0.25.0",
-      "@internationalized/date": "3.10.1"
+      "esbuild@<=0.24.2": ">=0.25.0"
     }
   }
 }

package/templates/custom/minimal/codehooks.ts

@@ -0,0 +1,13 @@
+// Static, hand-maintained per-install manifest of available codehook ids.
+// The backend never sees this; it is a frontend build capability list only.
+// To add/remove a hook, edit this array AND add/remove the matching blade at
+// src/pages/codehooks/{id}.astro. Not regenerated automatically.
+export const availableCodeHookIds: string[] = [
+  'featured-article',
+  'list-content',
+  'search-widget',
+  'bunny-video',
+  'epinet',
+  'shopify-product-grid',
+  'shopify-service-list',
+];

package/templates/custom/shopify/CartModal.tsx

@@ -2,6 +2,7 @@ import { useStore } from '@nanostores/react';
 import { Dialog } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import { modalState } from '@/stores/shopify';
+import { classNames } from '@/utils/helpers';
 
 export default function CartModal() {
   const state = useStore(modalState);
@@ -20,15 +21,24 @@ export default function CartModal() {
   const isCartPage =
     typeof window !== 'undefined' && window.location.pathname === '/cart';
 
+  const isMaxDurationRestriction =
+    state.type === 'restriction' && state.restrictionReason === 'maxDuration';
+
   return (
     <Dialog.Root
       open={state.isOpen}
+      closeOnInteractOutside={false}
       onOpenChange={(e) => !e.open && handleClose()}
     >
       <Portal>
         <Dialog.Backdrop className="fixed inset-0 z-50 bg-black bg-opacity-75 backdrop-blur-sm" />
         <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <Dialog.Content className="w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl">
+          <Dialog.Content
+            className={classNames(
+              `w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl`,
+              isMaxDurationRestriction ? 'border-4 border-brand-3' : ''
+            )}
+          >
             <div className="p-6">
               <Dialog.Title className="text-xl font-bold text-gray-900">
                 {state.title}

package/templates/custom/shopify/CartReset.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import {
+  resetShopifyCommerceState,
+  transactionTraceId,
+} from '@/stores/shopify';
+import { bookingHelpers } from '@/utils/api/bookingHelpers';
+
+export default function CartReset() {
+  useEffect(() => {
+    let cancelled = false;
+
+    const run = async () => {
+      const traceId = transactionTraceId.get();
+      if (traceId) {
+        try {
+          await bookingHelpers.releaseHold(traceId);
+        } catch (err) {
+          console.error('Failed to release hold during cart reset:', err);
+        }
+      }
+
+      if (cancelled) {
+        return;
+      }
+
+      resetShopifyCommerceState();
+      window.location.replace('/cart');
+    };
+
+    void run();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return <p className="text-center text-sm text-gray-600">Resetting cart…</p>;
+}

package/templates/custom/shopify/ShopifyCartManager.tsx

@@ -182,6 +182,7 @@ export default function ShopifyCartManager({
             type: 'restriction',
             title: 'Incompatible Booking Modes',
             message: RESTRICTION_MESSAGES.INCOMPATIBLE_REMOTE,
+            restrictionReason: 'incompatibleRemote',
           });
         } else {
           const rawDuration = calculateCartDuration(nextCart, resources);
@@ -196,6 +197,7 @@ export default function ShopifyCartManager({
               type: 'restriction',
               title: 'Appointment Length Limit Reached',
               message: RESTRICTION_MESSAGES.MAX_DURATION(dynamicMax),
+              restrictionReason: 'maxDuration',
             });
           } else {
             cartStore.set(nextCart);

package/templates/custom/shopify/ShopifyProductGrid.tsx

@@ -6,7 +6,7 @@ import { getShopifyImage } from '@/utils/helpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
-  resources: Record<string, ResourceNode[]>;
+  resources: ResourceNode[];
   options?: {
     params?: {
       options?: string;
@@ -218,9 +218,9 @@ function ProductCard({ resource, allServices }: ProductCardProps) {
 
 const HEX_BG_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 
-export default function ShopifyProductGrid({ resources = {}, options }: Props) {
-  let products = resources['product'] || [];
-  const services = resources['service'] || [];
+export default function ShopifyProductGrid({ resources = [], options }: Props) {
+  let products = resources.filter((r) => r.categorySlug === 'product');
+  const services = resources.filter((r) => r.categorySlug === 'service');
 
   let group = '';
   let title = '';

package/templates/custom/shopify/ShopifyServiceList.tsx

@@ -1,14 +1,16 @@
 import { useStore } from '@nanostores/react';
+import { Switch } from '@ark-ui/react/switch';
 import { cartStore, addQueue, type CartAction } from '@/stores/shopify';
 import {
   getCartItemKey,
   getServiceVariantIdFromCanonicalProduct,
   isSharedFeeService,
 } from '@/custom/shopify/shopifyHelpers';
+import { classNames } from '@/utils/helpers';
 import type { ResourceNode } from '@/types/compositorTypes';
 
 interface Props {
-  resources: Record<string, ResourceNode[]>;
+  resources: ResourceNode[];
   options?: {
     params?: {
       options?: string;
@@ -18,11 +20,11 @@ interface Props {
 
 const HEX_BG_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 
-export default function ShopifyServiceList({ resources = {}, options }: Props) {
+export default function ShopifyServiceList({ resources = [], options }: Props) {
   const cart = useStore(cartStore);
 
-  const products = resources['product'] || [];
-  let services = resources['service'] || [];
+  const products = resources.filter((r) => r.categorySlug === 'product');
+  let services = resources.filter((r) => r.categorySlug === 'service');
 
   let group = '';
   let title = '';
@@ -51,12 +53,12 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
       .filter((s): s is string => !!s)
   );
 
-  const displayServices = services.filter(
-    (s) => !boundServiceSlugs.has(s.slug)
-  );
+  const displayServices = services
+    .filter((s) => !boundServiceSlugs.has(s.slug))
+    .sort((a, b) => a.title.localeCompare(b.title));
 
-  const handleToggle = (resource: ResourceNode, currentQuantity: number) => {
-    const actionType = currentQuantity > 0 ? 'remove' : 'add';
+  const handleCheckedChange = (resource: ResourceNode, checked: boolean) => {
+    const actionType = checked ? 'add' : 'remove';
     const gid =
       typeof resource.optionsPayload?.gid === 'string'
         ? resource.optionsPayload.gid
@@ -116,47 +118,58 @@ export default function ShopifyServiceList({ resources = {}, options }: Props) {
               const duration = resource.optionsPayload?.bookingLengthMinutes;
 
               return (
-                <div
+                <Switch.Root
                   key={resource.id}
-                  className={`flex items-center justify-between rounded-lg border p-4 transition-colors ${
-                    isSelected
-                      ? 'border-black bg-gray-50'
-                      : 'border-gray-200 bg-white hover:border-gray-300'
-                  }`}
+                  checked={isSelected}
+                  onCheckedChange={(details) =>
+                    handleCheckedChange(resource, details.checked)
+                  }
+                  className="block w-full"
                 >
-                  <div className="flex-grow">
-                    <div className="flex items-center gap-2">
-                      <h3 className="font-bold text-gray-900">
-                        {resource.title}
-                      </h3>
-                      {duration && (
-                        <span className="inline-flex items-center rounded-sm bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
-                          {duration} mins
-                        </span>
+                  <div
+                    className={`flex cursor-pointer items-center justify-between rounded-lg border p-4 transition-colors ${
+                      isSelected
+                        ? 'border-black bg-gray-50'
+                        : 'border-gray-200 bg-white hover:border-gray-300'
+                    }`}
+                  >
+                    <Switch.Label className="min-w-0 flex-grow cursor-pointer">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <h3 className="font-bold text-gray-900">
+                          {resource.title}
+                        </h3>
+                        {duration ? (
+                          <span className="inline-flex items-center rounded-sm bg-blue-50 px-2 py-0.5 text-xs font-bold text-blue-700">
+                            {duration} mins
+                          </span>
+                        ) : null}
+                        {isSelected ? (
+                          <span className="inline-flex items-center rounded-sm bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800">
+                            In Cart
+                          </span>
+                        ) : null}
+                      </div>
+                      <p className="mt-1 text-sm text-gray-500">
+                        {resource.oneliner}
+                      </p>
+                    </Switch.Label>
+
+                    <Switch.Control
+                      className={classNames(
+                        `relative ml-4 inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none`,
+                        isSelected ? 'bg-brand-5' : 'bg-gray-200'
                       )}
-                    </div>
-                    <p className="mt-1 text-sm text-gray-500">
-                      {resource.oneliner}
-                    </p>
-                  </div>
-
-                  <div className="ml-4 flex-shrink-0">
-                    <button
-                      onClick={() => handleToggle(resource, selectedQuantity)}
-                      className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
-                        isSelected ? 'bg-black' : 'bg-gray-200'
-                      }`}
-                      role="switch"
-                      aria-checked={isSelected}
                     >
-                      <span
-                        className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                      <Switch.Thumb
+                        className={classNames(
+                          `pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out`,
                           isSelected ? 'translate-x-5' : 'translate-x-0'
-                        }`}
+                        )}
                       />
-                    </button>
+                    </Switch.Control>
+                    <Switch.HiddenInput />
                   </div>
-                </div>
+                </Switch.Root>
               );
             })}
           </div>