@tanstack/create 0.65.0 → 0.67.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @tanstack/create
 
+## 0.67.0
+
+### Minor Changes
+
+- Auto-generated changeset from semantic commits on main.
+
+  - feat(create): add React PowerSync scaffolding add-on (#407) (8f24af5)
+
+## 0.66.0
+
+### Minor Changes
+
+- feat(cli, create): add Shopify storefront add-on + storefront template ([`814d222`](https://github.com/TanStack/cli/commit/814d222ac04e839eabe56abce5dcbe66d751c5d8))
+
+  Headless Shopify support for TanStack Start apps, scaffold-ready and
+  runtime-portable. The pitch: prove that TanStack Start is a first-class
+  target for Shopify, not just Next.js Commerce or Hydrogen.
+
+  **`shopify` add-on** — additive. `tanstack add shopify` mounts `/shop/*`
+  routes alongside an existing app without touching the home page. Includes:
+
+  - Storefront API client (server-only fetch via `createServerFn`, public
+    token by default + optional private token for higher rate limits and
+    buyer-IP forwarding).
+  - Hand-written GraphQL queries with hydrogen-react types (type-only;
+    zero runtime weight).
+  - httpOnly cookie cart (`tanstack_cart_id`) + React Query single-key
+    cache + optimistic updates with module-level mutation counter to
+    batch invalidations during rapid clicks.
+  - Hydrogen-demo parity routes: shop landing, product detail (with
+    variants + availability), collections, cart, search, Shopify CMS
+    pages, policies.
+  - Hydrogen-stock UI components (ProductCard, VariantSelector,
+    AddToCartButton, CartLineItem, CartSummary, ShopImage with CDN
+    transforms, Money via Intl) themed with six CSS custom properties
+    for easy reskinning.
+  - Header cart-count badge via the `header-user` integration slot.
+  - Shopify-hosted checkout (redirect to `cart.checkoutUrl`).
+  - **Optional Customer Account API** behind a `customerAccount` select
+    option. Hand-rolled OAuth 2.1 PKCE with `.well-known` discovery
+    cached in module memory (no usable npm client exists yet),
+    HMAC-signed httpOnly session cookies (HS256), lazy token refresh,
+    account dashboard / orders / order detail / addresses routes — all
+    EJS-guarded so the files only emit when enabled.
+
+  **`shopify-storefront` template** — storefront-first.
+  `tanstack create my-shop --template shopify-storefront` cascades the
+  `shopify` add-on (which cascades `tanstack-query`) and replaces the
+  home route with a polished landing (hero + featured collections + best
+  sellers grid).
+
+  **Zero-config first run.** Defaults to Shopify's public Hydrogen demo
+  store (`hydrogen-preview.myshopify.com`) so the storefront renders
+  real products immediately. Override the four env vars in `.env.local`
+  (or your deploy target's dashboard) to point at your store. Demo
+  defaults are baked into source as fallbacks, so the experience doesn't
+  break when a runtime doesn't load `.env` files into `process.env`.
+
+  **Portable.** Cookie ops via `@tanstack/react-start/server`; crypto via
+  Web Crypto (`crypto.subtle`); generic `CDN-Cache-Control` for browse
+  (`s-maxage=300, stale-while-revalidate=600`) and `private, no-store`
+  for cart. Works on Node, Cloudflare Workers, Shopify Oxygen (just
+  Workers), Vercel, Netlify, Bun, Deno.
+
+  **Header layout fix.** While the cart-count badge is the new
+  right-aligned action, the base scaffold's `Header` was placing the
+  social icons left-of-center on `sm+`. Reordered the JSX so navigation
+  sits between the logo and the right-side actions in DOM order, with
+  one mobile-only `order-3` to keep `flex-wrap` putting nav on its own
+  row. Result: logo → nav → (auto-spaced) → cart/social/theme on every
+  breakpoint, and a more sensible reading order for screen readers.
+
 ## 0.65.0
 
 ### Minor Changes

package/dist/frameworks/react/add-ons/powersync/README.md.ejs

@@ -0,0 +1,26 @@
+# PowerSync
+
+This project includes the PowerSync Web SDK and React hooks.
+
+## Environment
+
+Set these variables in `.env.local`:
+
+- `VITE_POWERSYNC_URL`
+- `VITE_POWERSYNC_TOKEN` for local development only
+
+## What The Add-on Includes
+
+- `src/lib/powersync/AppSchema.ts`
+- `src/lib/powersync/BackendConnector.ts`
+- `src/integrations/powersync/provider.tsx`
+- `src/routes/demo/powersync.tsx`
+
+## Next Steps
+
+1. Replace the development token flow in `src/lib/powersync/BackendConnector.ts` with your real auth flow.
+2. Update the sample schema in `src/lib/powersync/AppSchema.ts` to match your synced tables.
+3. Implement the upload logic in `uploadData()` so local mutations are written back to your backend.
+
+PowerSync setup guidance:
+https://docs.powersync.com/client-sdk-references/js-web

package/dist/frameworks/react/add-ons/powersync/assets/_dot_env.local.append

@@ -0,0 +1,3 @@
+
+VITE_POWERSYNC_URL=
+VITE_POWERSYNC_TOKEN=

package/dist/frameworks/react/add-ons/powersync/assets/powersync-vite-plugin.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from 'vite'
+
+export default function powersyncVite(): Plugin {
+  return {
+    name: 'powersync-vite',
+    config() {
+      return {
+        optimizeDeps: {
+          exclude: ['@powersync/web'],
+        },
+        worker: {
+          format: 'es',
+        },
+      }
+    },
+  }
+}

package/dist/frameworks/react/add-ons/powersync/assets/src/integrations/powersync/provider.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import { PowerSyncContext } from '@powersync/react'
+import { PowerSyncDatabase, WASQLiteOpenFactory } from '@powersync/web'
+
+import { AppSchema } from '#/lib/powersync/AppSchema'
+import { BackendConnector } from '#/lib/powersync/BackendConnector'
+
+const db = new PowerSyncDatabase({
+  database: new WASQLiteOpenFactory({
+    dbFilename: 'powersync.db',
+  }),
+  schema: AppSchema,
+  flags: {
+    disableSSRWarning: true,
+  },
+})
+
+void db.connect(new BackendConnector())
+
+export default function PowerSyncProvider({
+  children,
+}: {
+  children: ReactNode
+}) {
+  return <PowerSyncContext.Provider value={db}>{children}</PowerSyncContext.Provider>
+}

package/dist/frameworks/react/add-ons/powersync/assets/src/lib/powersync/AppSchema.ts

@@ -0,0 +1,17 @@
+import { Schema, Table, column } from '@powersync/web'
+
+const todos = new Table(
+  {
+    created_at: column.text,
+    description: column.text,
+    completed: column.integer,
+  },
+  { indexes: { created_at: ['created_at'] } },
+)
+
+export const AppSchema = new Schema({
+  todos,
+})
+
+export type Database = (typeof AppSchema)['types']
+export type TodoRecord = Database['todos']

package/dist/frameworks/react/add-ons/powersync/assets/src/lib/powersync/BackendConnector.ts

@@ -0,0 +1,52 @@
+import {
+  type AbstractPowerSyncDatabase,
+  type PowerSyncBackendConnector,
+  UpdateType,
+} from '@powersync/web'
+
+export class BackendConnector implements PowerSyncBackendConnector {
+  private readonly powersyncUrl = import.meta.env.VITE_POWERSYNC_URL
+  private readonly powersyncToken = import.meta.env.VITE_POWERSYNC_TOKEN
+
+  async fetchCredentials() {
+    if (!this.powersyncUrl || !this.powersyncToken) {
+      return null
+    }
+
+    return {
+      endpoint: this.powersyncUrl,
+      token: this.powersyncToken,
+    }
+  }
+
+  async uploadData(database: AbstractPowerSyncDatabase): Promise<void> {
+    const transaction = await database.getNextCrudTransaction()
+
+    if (!transaction) {
+      return
+    }
+
+    try {
+      for (const op of transaction.crud) {
+        const record = { ...op.opData, id: op.id }
+
+        switch (op.op) {
+          case UpdateType.PUT:
+            console.info('TODO: create record remotely', record)
+            break
+          case UpdateType.PATCH:
+            console.info('TODO: patch record remotely', record)
+            break
+          case UpdateType.DELETE:
+            console.info('TODO: delete record remotely', record)
+            break
+        }
+      }
+
+      await transaction.complete()
+    } catch (error) {
+      console.error('PowerSync uploadData failed', error)
+      throw error
+    }
+  }
+}

package/dist/frameworks/react/add-ons/powersync/assets/src/routes/demo/powersync.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { usePowerSync, useQuery, useStatus } from '@powersync/react'
+
+export const Route = createFileRoute('/demo/powersync')({
+  component: PowerSyncDemo,
+})
+
+type TodoRow = {
+  id: string
+  created_at: string
+  description: string
+  completed: number
+}
+
+function PowerSyncDemo() {
+  const powerSync = usePowerSync()
+  const status = useStatus()
+  const { data } = useQuery(
+    'SELECT id, created_at, description, completed FROM todos ORDER BY created_at DESC',
+  )
+  const todos = (data ?? []) as Array<TodoRow>
+  const [description, setDescription] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  async function addTodo(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    const nextDescription = description.trim()
+    if (!nextDescription) {
+      return
+    }
+
+    try {
+      setError(null)
+      await powerSync.execute(
+        'INSERT INTO todos (id, created_at, description, completed) VALUES (?, ?, ?, ?)',
+        [crypto.randomUUID(), new Date().toISOString(), nextDescription, 0],
+      )
+
+      setDescription('')
+    } catch (error) {
+      console.error('Failed to insert PowerSync todo', error)
+      setError('Failed to insert row. Please try again.')
+    }
+  }
+
+  return (
+    <main className="page-wrap py-10">
+      <div className="max-w-3xl space-y-6">
+        <header className="space-y-2">
+          <p className="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--sea-ink-soft)]">
+            Offline Sync
+          </p>
+          <h1 className="text-3xl font-semibold tracking-tight">PowerSync</h1>
+          <p className="text-sm text-[var(--sea-ink-soft)]">
+            This demo writes to the local SQLite database immediately. Replace the sample
+            schema and backend connector with your real PowerSync configuration.
+          </p>
+        </header>
+
+        <section className="rounded-3xl border border-[var(--line)] bg-white/70 p-5 shadow-sm">
+          <h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--sea-ink-soft)]">
+            Connection State
+          </h2>
+          <pre className="mt-3 overflow-auto rounded-2xl bg-[var(--chip-bg)] p-4 text-xs leading-6 text-[var(--sea-ink)]">
+            {JSON.stringify(status, null, 2)}
+          </pre>
+        </section>
+
+        <section className="rounded-3xl border border-[var(--line)] bg-white/70 p-5 shadow-sm">
+          <h2 className="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--sea-ink-soft)]">
+            Local Todos
+          </h2>
+          {error ? (
+            <p className="mt-3 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+              {error}
+            </p>
+          ) : null}
+          <form className="mt-4 flex flex-col gap-3 sm:flex-row" onSubmit={addTodo}>
+            <label className="sr-only" htmlFor="powersync-todo-description">
+              Todo description
+            </label>
+            <input
+              id="powersync-todo-description"
+              className="min-w-0 flex-1 rounded-2xl border border-[var(--line)] bg-white px-4 py-3 text-sm text-[var(--sea-ink)] outline-none"
+              onChange={(event) => setDescription(event.target.value)}
+              placeholder="Write to the local PowerSync database"
+              value={description}
+            />
+            <button
+              className="rounded-2xl bg-[var(--sea-ink)] px-4 py-3 text-sm font-semibold text-white"
+              type="submit"
+            >
+              Insert Local Row
+            </button>
+          </form>
+
+          <ul className="mt-5 space-y-3">
+            {todos.length === 0 ? (
+              <li className="rounded-2xl border border-dashed border-[var(--line)] px-4 py-5 text-sm text-[var(--sea-ink-soft)]">
+                No rows yet. Insert one locally, then wire `uploadData()` to send it upstream.
+              </li>
+            ) : (
+              todos.map((todo) => (
+                <li
+                  className="rounded-2xl border border-[var(--line)] bg-[var(--chip-bg)] px-4 py-4"
+                  key={todo.id}
+                >
+                  <div className="flex items-start justify-between gap-4">
+                    <div>
+                      <p className="font-medium text-[var(--sea-ink)]">{todo.description}</p>
+                      <p className="mt-1 text-xs text-[var(--sea-ink-soft)]">
+                        {todo.created_at}
+                      </p>
+                    </div>
+                    <span className="rounded-full border border-[var(--line)] px-2 py-1 text-xs font-semibold text-[var(--sea-ink-soft)]">
+                      {todo.completed ? 'done' : 'pending'}
+                    </span>
+                  </div>
+                </li>
+              ))
+            )}
+          </ul>
+        </section>
+      </div>
+    </main>
+  )
+}

package/dist/frameworks/react/add-ons/powersync/info.json

@@ -0,0 +1,46 @@
+{
+  "name": "PowerSync",
+  "description": "Add PowerSync offline sync to your application.",
+  "phase": "add-on",
+  "type": "add-on",
+  "category": "database",
+  "color": "#2563EB",
+  "priority": 55,
+  "link": "https://docs.powersync.com/client-sdk-references/js-web",
+  "modes": ["file-router"],
+  "envVars": [
+    {
+      "name": "VITE_POWERSYNC_URL",
+      "description": "PowerSync instance URL",
+      "required": true,
+      "file": ".env.local"
+    },
+    {
+      "name": "VITE_POWERSYNC_TOKEN",
+      "description": "Client-visible development token for local testing; VITE_* env vars are exposed to the browser",
+      "required": false,
+      "file": ".env.local"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "vite-plugin",
+      "path": "powersync-vite-plugin.ts",
+      "jsName": "powersyncVite",
+      "code": "powersyncVite()"
+    },
+    {
+      "type": "provider",
+      "path": "src/integrations/powersync/provider.tsx",
+      "jsName": "PowerSyncProvider"
+    }
+  ],
+  "routes": [
+    {
+      "url": "/demo/powersync",
+      "name": "PowerSync",
+      "path": "src/routes/demo/powersync.tsx",
+      "jsName": "PowerSyncDemo"
+    }
+  ]
+}

package/dist/frameworks/react/add-ons/powersync/package.json.ejs

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@journeyapps/wa-sqlite": "^1.2.6",
+    "@powersync/react": "^1.7.4",
+    "@powersync/web": "^1.26.1"
+  }
+}

package/dist/frameworks/react/add-ons/powersync/small-logo.svg

@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="64" height="64" rx="16" fill="#2563EB"/>
+  <path d="M20 21C20 18.7909 21.7909 17 24 17H39.5C45.299 17 50 21.701 50 27.5C50 33.299 45.299 38 39.5 38H29V47H20V21Z" fill="white"/>
+  <path d="M29 29H38.5C40.9853 29 43 26.9853 43 24.5C43 22.0147 40.9853 20 38.5 20H29V29Z" fill="#2563EB"/>
+  <circle cx="43" cy="44" r="7" fill="#93C5FD"/>
+</svg>

package/dist/frameworks/react/add-ons/shopify/README.md

@@ -0,0 +1,86 @@
+# Shopify
+
+Headless Shopify storefront for TanStack Start. Mounts `/shop/*` routes
+alongside your existing app — your home page stays untouched.
+
+The default `.env.local` points at Shopify's public Hydrogen demo store, so the
+storefront renders real products on first run with zero setup.
+
+## Routes
+
+| Route                          | What it does                                |
+|--------------------------------|---------------------------------------------|
+| `/shop`                        | Shop landing — featured products + collections |
+| `/shop/products/$handle`       | Product detail (variants, images, options)  |
+| `/shop/collections/$handle`    | Collection grid with sort + pagination      |
+| `/shop/cart`                   | Cart line items, discount codes, checkout   |
+| `/shop/search`                 | Product search                              |
+| `/shop/pages/$handle`          | Shopify CMS pages (about, etc.)             |
+| `/shop/policies/$handle`       | Privacy, refund, terms, shipping            |
+
+If you opted into customer accounts during scaffold:
+
+| Route                                | What it does                       |
+|--------------------------------------|------------------------------------|
+| `/shop/account/login`                | Kick off Shopify OAuth             |
+| `/shop/account/callback`             | OAuth callback handler             |
+| `/shop/account/logout`               | End the customer session           |
+| `/shop/account`                      | Dashboard                          |
+| `/shop/account/orders`               | Order history                      |
+| `/shop/account/orders/$id`           | Order detail                       |
+| `/shop/account/addresses`            | Manage saved addresses             |
+
+## Connect your store
+
+1. In Shopify admin, go to **Settings > Apps and sales channels > Develop apps**.
+2. Create a new app, enable the **Storefront API**, and copy the public access token.
+3. Set in `.env.local`:
+   ```
+   SHOPIFY_STORE_DOMAIN=your-store.myshopify.com
+   SHOPIFY_PUBLIC_STOREFRONT_TOKEN=...
+   ```
+4. (Optional) For higher rate limits + buyer-IP forwarding, also create a private
+   token and set `SHOPIFY_PRIVATE_STOREFRONT_TOKEN`.
+
+## Enable customer accounts
+
+If `customerAccount=enabled` was selected during scaffold:
+
+1. In Shopify admin, go to **Settings > Customer accounts > Headless**.
+2. Register a public client. Add `http://localhost:3000/shop/account/callback`
+   *and* your production callback URL to the redirect URIs.
+3. Copy the Client ID and Shop ID into `.env.local`:
+   ```
+   SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID=...
+   SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID=...
+   SHOPIFY_SESSION_SECRET=$(openssl rand -hex 32)
+   ```
+
+The Hydrogen demo store doesn't have customer accounts configured, so the
+default demo creds won't work for `/shop/account/*` — you'll need a real store.
+
+## Architecture
+
+- **Storefront API client** — server-only fetch in `src/server/shopify/storefront-client.ts`.
+  All product/cart reads go through the server (private token never reaches the browser).
+- **Cart state** — Cart ID stored in an httpOnly cookie (`tanstack_cart_id`). React
+  Query owns the cache (single key `['shopify', 'cart']`); optimistic updates with
+  a module-level mutation counter to batch invalidations.
+- **GraphQL queries** — hand-written strings in `src/lib/shopify/queries.ts`, types
+  sliced from `@shopify/hydrogen-react/storefront-api-types` (type-only import; zero runtime).
+- **Customer accounts** — hand-rolled OAuth 2.1 PKCE with `.well-known` discovery
+  (no usable npm client exists yet). Tokens in a signed httpOnly cookie.
+- **Checkout** — redirects to `cart.checkoutUrl` (Shopify-hosted).
+
+## Deployment
+
+Works anywhere TanStack Start runs:
+
+- **Node** — `npm run build && npm start`
+- **Cloudflare Workers / Shopify Oxygen** — Oxygen is just Workers under the hood;
+  build with the Workers preset and deploy to either platform.
+- **Vercel / Netlify** — set the env vars in the dashboard.
+- **Bun, Deno** — supported via Start's adapters.
+
+For the customer-account flow, register both your local *and* production
+callback URLs in the Shopify admin's headless app config.

package/dist/frameworks/react/add-ons/shopify/assets/_dot_env.local.append

@@ -0,0 +1,19 @@
+# ─── Shopify ─────────────────────────────────────────────────────────────────
+# These defaults point to Shopify's public Hydrogen demo store so the storefront
+# works on first run with zero config. Replace with your store's values to go live.
+# Get tokens at: Shopify admin > Settings > Apps and sales channels > Develop apps.
+SHOPIFY_STORE_DOMAIN=hydrogen-preview.myshopify.com
+SHOPIFY_STOREFRONT_API_VERSION=2026-01
+SHOPIFY_PUBLIC_STOREFRONT_TOKEN=3b580e70970c4528da70c98e097c2fa0
+# Optional — set to a private storefront token for higher rate limits + buyer-IP forwarding.
+SHOPIFY_PRIVATE_STOREFRONT_TOKEN=
+
+# ─── Shopify Customer Account API ────────────────────────────────────────────
+# Required only if you opted into customer accounts during scaffold.
+# Register a public client in Shopify admin > Settings > Customer accounts > Headless,
+# then paste the client ID and your numeric shop ID below.
+SHOPIFY_CUSTOMER_ACCOUNT_CLIENT_ID=
+SHOPIFY_CUSTOMER_ACCOUNT_SHOP_ID=
+SHOPIFY_CUSTOMER_ACCOUNT_REDIRECT_URI=http://localhost:3000/shop/account/callback
+# 32+ random chars, e.g. `openssl rand -hex 32`. Used to sign customer session cookies.
+SHOPIFY_SESSION_SECRET=

package/dist/frameworks/react/add-ons/shopify/assets/src/components/shop/account-nav.tsx.ejs

@@ -0,0 +1,41 @@
+<% if (addOnOption.shopify.customerAccount !== 'enabled') { ignoreFile(); return; } %>
+import { Link } from '@tanstack/react-router'
+
+const ITEMS = [
+  { to: '/shop/account', label: 'Overview', exact: true },
+  { to: '/shop/account/orders', label: 'Orders', exact: false },
+  { to: '/shop/account/addresses', label: 'Addresses', exact: false },
+] as const
+
+export function AccountNav() {
+  return (
+    <nav className="flex flex-col gap-1 text-sm">
+      {ITEMS.map((item) => (
+        <Link
+          key={item.to}
+          to={item.to}
+          activeOptions={{ exact: item.exact }}
+          className="rounded-md px-2 py-1.5 text-[var(--storefront-fg-muted)] hover:bg-[var(--storefront-line)]/40 hover:text-[var(--storefront-fg)]"
+          activeProps={{
+            className:
+              'rounded-md px-2 py-1.5 bg-[var(--storefront-line)]/60 text-[var(--storefront-fg)] font-medium',
+          }}
+        >
+          {item.label}
+        </Link>
+      ))}
+      <form
+        action="/shop/account/logout"
+        method="post"
+        className="mt-4 border-t border-[var(--storefront-line)] pt-4"
+      >
+        <button
+          type="submit"
+          className="rounded-md px-2 py-1.5 text-left text-sm text-[var(--storefront-fg-muted)] hover:text-[var(--storefront-fg)]"
+        >
+          Sign out
+        </button>
+      </form>
+    </nav>
+  )
+}

package/dist/frameworks/react/add-ons/shopify/assets/src/components/shop/add-to-cart-button.tsx

@@ -0,0 +1,48 @@
+import { useAddToCart } from '#/hooks/use-cart'
+import type { ProductDetail, ProductDetailVariant } from '#/lib/shopify/queries'
+
+type AddToCartButtonProps = {
+  product: ProductDetail
+  variant: ProductDetailVariant | undefined
+  quantity?: number
+}
+
+export function AddToCartButton({
+  product,
+  variant,
+  quantity = 1,
+}: AddToCartButtonProps) {
+  const { mutate, isPending } = useAddToCart()
+  const disabled = !variant || !variant.availableForSale || isPending
+
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={() => {
+        if (!variant) return
+        mutate({
+          variantId: variant.id,
+          quantity,
+          line: {
+            productTitle: product.title,
+            productHandle: product.handle,
+            variantTitle: variant.title,
+            price: variant.price,
+            image: variant.image ?? product.images.nodes[0] ?? null,
+            selectedOptions: variant.selectedOptions,
+          },
+        })
+      }}
+      className="w-full rounded-full bg-[var(--storefront-accent)] px-6 py-3.5 text-sm font-medium text-[var(--storefront-accent-fg)] transition disabled:cursor-not-allowed disabled:opacity-50 hover:opacity-90"
+    >
+      {!variant
+        ? 'Select options'
+        : !variant.availableForSale
+          ? 'Sold out'
+          : isPending
+            ? 'Adding…'
+            : 'Add to cart'}
+    </button>
+  )
+}