@cartbase/storefront 0.4.0 → 0.6.0

package/README.md

@@ -43,7 +43,7 @@ NEXT_PUBLIC_CARTBASE_PUBLISHABLE_KEY=  # optional, channel-scoped catalogs
 | `@cartbase/storefront/store` | Listing pages: pagination, sorting, collection/category/search templates |
 | `@cartbase/storefront/order` | Order confirmation surfaces |
 | `@cartbase/storefront/tracking` | Consent banner + consent-gated Meta Pixel / GA4 / analytics |
-| `@cartbase/storefront/tailwind-preset` | The design tokens (Tailwind 3 preset) |
+| `@cartbase/storefront/theme` | The design system: token names plus a filled default set of values (Tailwind 4, CSS-first) |
 
 ## Documentation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cartbase/storefront",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Storefront SDK + UI component library for Cartbase stores: typed API client, checkout orchestration, cart drawer, product/catalog components, tracking. Source-shipped TypeScript — add it to transpilePackages.",
   "license": "MIT",
   "repository": {
@@ -12,8 +12,8 @@
   "sideEffects": false,
   "files": [
     "src",
-    "README.md",
-    "tailwind-preset.cjs"
+    "theme",
+    "README.md"
   ],
   "exports": {
     ".": "./src/index.ts",
@@ -38,7 +38,9 @@
     "./api/integrations": "./src/api/integrations.ts",
     "./api/consent": "./src/api/consent.ts",
     "./api/redirects": "./src/api/redirects.ts",
-    "./tailwind-preset": "./tailwind-preset.cjs",
+    "./theme": "./theme/index.css",
+    "./theme/tokens.css": "./theme/tokens.css",
+    "./theme/theme.css": "./theme/theme.css",
     "./lib/utils": "./src/lib/utils.ts",
     "./lib/money": "./src/lib/money.ts",
     "./lib/cart-helpers": "./src/lib/cart-helpers.ts",

package/src/api/checkout.ts

@@ -488,3 +488,39 @@ export async function refreshPaymentIfTerminal(
 ): Promise<RefreshPaymentResult> {
   return client.post(`/api/store/carts/${cartId}/refresh-payment-if-terminal`)
 }
+
+// ---------------------------------------------------------------------------
+// Browser-side error reporting
+// ---------------------------------------------------------------------------
+
+/** Body of POST /api/store/checkout-errors (`.strict()`). */
+export interface ReportCheckoutErrorInput {
+  /** The orchestration hook's errorType, e.g. "place_order_error". */
+  error_type: string
+  message: string
+  cart_id?: string
+  /** Redacted context — ids, codes, flags. Never card data, never addresses. */
+  context?: Record<string, unknown>
+}
+
+/**
+ * Report a browser-side checkout failure into the platform's
+ * checkout_error_logs (step `browser`) so the merchant sees WHY a checkout
+ * died in the customer's browser — Stripe.js confirm errors, a 3DS return
+ * that came back not-succeeded, a place-order rejection after payment.
+ * `useCheckoutOrchestration` calls this BY DEFAULT when no `logError`
+ * override is given. Fire-and-forget by contract: swallows every failure —
+ * reporting an error must never break a checkout. Rate-limited server-side.
+ *
+ * Auth: anon `x-client-id`.
+ */
+export async function reportCheckoutError(
+  client: StorefrontClient,
+  input: ReportCheckoutErrorInput
+): Promise<void> {
+  try {
+    await client.post(`/api/store/checkout-errors`, input)
+  } catch {
+    // Swallowed by contract — the sink must never take the checkout down.
+  }
+}

package/src/api/products.ts

@@ -116,6 +116,13 @@ export interface StoreProductVariant {
    * context. Varies by customer group — never cache shared.
    */
   calculated_price: CalculatedPrice | null
+  /**
+   * THE availability predicate, computed server-side (untracked or
+   * backorderable ⇒ true; otherwise kit-aware available stock > 0).
+   * Optional only for wire back-compat with platforms that predate it —
+   * when absent, components fall back to the optimistic legacy behavior.
+   */
+  in_stock?: boolean
 }
 
 export interface StoreProduct {

package/src/api/search.ts

@@ -71,6 +71,17 @@ export interface RelatedProductsQuery extends PricingContextQuery {
   limit?: number
 }
 
+/**
+ * Complementary products — the merchant's "goes with this" picks, for the
+ * slot ABOVE the product rather than the carousel below it.
+ *
+ * It has no fallback and never will: "similar to this" can be computed from
+ * collections and tags, "buy this with it" is a merchant judgement, and a
+ * guessed upsell beside the buy button is worse than an empty slot. An empty
+ * response means the merchant has not chosen — render nothing.
+ */
+export type ComplementaryProductsQuery = RelatedProductsQuery
+
 export interface RelatedProductsResponse {
   products: StoreProduct[]
   count: number
@@ -131,3 +142,22 @@ export async function listRelatedProducts(
     query: { ...query },
   })
 }
+
+/**
+ * Complementary products for a PDP: the merchant's manual picks, in their
+ * order, and nothing else — `auto_filled` is always false.
+ *
+ * Same endpoint as related, discriminated by `kind`, because the two lists
+ * are one table and one code path apart only by meaning. Auth, errors and
+ * channel scoping are identical to `listRelatedProducts`.
+ * Settings: Admin → Product → Complementary products.
+ */
+export async function listComplementaryProducts(
+  client: StorefrontClient,
+  idOrHandle: string,
+  query?: ComplementaryProductsQuery
+): Promise<RelatedProductsResponse> {
+  return client.get(`/api/store/products/${encodeURIComponent(idOrHandle)}/related`, {
+    query: { ...query, kind: "complementary" },
+  })
+}

package/src/checkout/use-checkout-orchestration.ts

@@ -22,6 +22,7 @@ import {
   calculateShippingOption,
   prepareCheckout,
   refreshPaymentIfTerminal as refreshPaymentIfTerminalApi,
+  reportCheckoutError,
   syncPaymentAmount as syncPaymentAmountApi,
   isMethodEntry,
   type PrepareCheckoutInput,
@@ -152,11 +153,21 @@ export type UseCheckoutOrchestrationOptions = {
    */
   resolveTrackingMetadata?: () => Record<string, unknown> | undefined
   /**
-   * Operational-visibility sink (successor of @1click's logCheckoutError /
-   * logEvent Supabase writers — Cartbase has no store-side log endpoint).
-   * Called with (errorType, message, context). Optional; defaults to no-op.
+   * Operational-visibility sink. Called with (errorType, message, context).
+   * DEFAULTS to reporting into the platform's checkout error log
+   * (POST /api/store/checkout-errors, step `browser`) so browser-side money
+   * failures reach the merchant without any wiring — a platform guarantee,
+   * not a merchant chore (money-chain-hardening, 2026-08-24). Override to
+   * add your own sink; fire-and-forget either way.
    */
   logError?: CheckoutLogError
+  /**
+   * Verbose [buy-click] console output for local debugging. OFF by default:
+   * the unguarded dumps used to print the full prepare-checkout payload —
+   * customer name, phone, email, address — into every customer's browser
+   * console. Redacted sink events fire regardless of this flag.
+   */
+  debug?: boolean
 }
 
 /**
@@ -253,8 +264,35 @@ export function useCheckoutOrchestration({
   orderConfirmedPath: orderConfirmedPathProp,
   onOrderPlaced,
   resolveTrackingMetadata,
-  logError,
+  logError: logErrorProp,
+  debug = false,
 }: UseCheckoutOrchestrationOptions) {
+  // The default sink: the platform's own checkout error log. Browser money
+  // failures (Stripe confirm errors, failed 3DS returns, place-order
+  // rejections) land in checkout_error_logs step `browser` with no merchant
+  // wiring. The two per-click debug snapshots are gated behind `debug` and
+  // never sent by default — the sink is for FAILURES, not telemetry.
+  const logError: CheckoutLogError = useCallback(
+    (errorType, message, context) => {
+      if (logErrorProp) {
+        logErrorProp(errorType, message, context)
+        return
+      }
+      void reportCheckoutError(client, {
+        error_type: errorType,
+        message,
+        cart_id: cart?.id,
+        context,
+      })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [logErrorProp, client, cart?.id]
+  )
+  // Debug-gated console output — see the `debug` option's doc.
+  const dbg = debug
+    ? // eslint-disable-next-line no-console
+      (...args: unknown[]) => console.log(...args)
+    : () => {}
   // Resolve the order-confirmed path. Prop wins; otherwise fall back to
   // the value provided by CheckoutProvider context.
   const contextOrderConfirmedPath = useOrderConfirmedPath()
@@ -1247,9 +1285,10 @@ export function useCheckoutOrchestration({
           : null,
         hasStripeBundle: !!stripeBundle,
       }
-      // eslint-disable-next-line no-console
-      console.log("[buy-click] STATE", stateSnapshot)
-      logError?.("other", "buy_click_state", stateSnapshot)
+      dbg("[buy-click] STATE", stateSnapshot)
+      // Per-click telemetry goes only to a merchant-wired sink, never to the
+      // default platform error log — the sink is for failures.
+      logErrorProp?.("other", "buy_click_state", stateSnapshot)
 
       await flushAddressSave()
 
@@ -1259,8 +1298,7 @@ export function useCheckoutOrchestration({
           console.error("[buy-click] card path but no stripe bundle")
           throw new Error("Stripe not ready")
         }
-        // eslint-disable-next-line no-console
-        console.log("[buy-click] elements.submit() …")
+        dbg("[buy-click] elements.submit() …")
         const { error: submitError } = await stripeBundle.submit()
         if (submitError) {
           // eslint-disable-next-line no-console
@@ -1270,9 +1308,10 @@ export function useCheckoutOrchestration({
       }
 
       const payload = buildPrepareCheckoutPayload()
-      // eslint-disable-next-line no-console
-      console.log("[buy-click] PAYLOAD →", payload)
-      logError?.("other", "buy_click_payload", {
+      // debug-only: the full payload carries the customer's name, phone,
+      // email and address — it must never print in a customer's console.
+      dbg("[buy-click] PAYLOAD →", payload)
+      logErrorProp?.("other", "buy_click_payload", {
         provider_id: payload.payment_provider ?? null,
         payment_method_id: payload.payment_method_id ?? null,
         shipping_method_id: payload.shipping_method_id,
@@ -1287,8 +1326,7 @@ export function useCheckoutOrchestration({
           throw e
         }
       )
-      // eslint-disable-next-line no-console
-      console.log("[buy-click] prepareCheckout response", {
+      dbg("[buy-click] prepareCheckout response", {
         has_client_secret: !!prep.client_secret,
         provider_id: prep.provider_id,
       })
@@ -1348,8 +1386,7 @@ export function useCheckoutOrchestration({
           },
         }
 
-        // eslint-disable-next-line no-console
-        console.log("[buy-click] stripe.confirmPayment() …", {
+        dbg("[buy-click] stripe.confirmPayment() …", {
           has_country: !!billingDetails.address.country,
         })
         const { error } = await (stripeBundle.stripe as unknown as {
@@ -1395,23 +1432,20 @@ export function useCheckoutOrchestration({
         // confirmPayment succeeded synchronously (no redirect needed,
         // e.g. non-3DS card flow). The PaymentIntent is now in
         // requires_capture or succeeded — complete will pass authorize.
-        // eslint-disable-next-line no-console
-        console.log("[buy-click] stripe.confirmPayment SUCCESS (no redirect)")
-        logError?.("stripe_confirm_succeeded", "ok", {
+        dbg("[buy-click] stripe.confirmPayment SUCCESS (no redirect)")
+        logErrorProp?.("stripe_confirm_succeeded", "ok", {
           cart_id: cart.id,
           client_secret_prefix: prep.client_secret.slice(0, 8),
         })
       } else if (zeroRemainderGiftPath) {
-        // eslint-disable-next-line no-console
-        console.log(
+        dbg(
           "[buy-click] zero-remainder gift path — skipping Stripe, completing on the gift session"
         )
-        logError?.("other", "zero_remainder_gift_path", { cart_id: cart.id })
+        logErrorProp?.("other", "zero_remainder_gift_path", { cart_id: cart.id })
       }
 
-      // eslint-disable-next-line no-console
-      console.log("[buy-click] placeOrder() …")
-      logError?.("order_placed", "called", {
+      dbg("[buy-click] placeOrder() …")
+      logErrorProp?.("order_placed", "called", {
         cart_id: cart.id,
         path: paymentTab,
       })

package/src/products/product-actions.tsx

@@ -14,13 +14,12 @@
  * - `countryCode` (Medusa region routing) is dropped — Cartbase pricing
  *   context travels with the product fetch, and the host's `addToCart`
  *   closes over whatever routing it needs.
- * - Stock: Cartbase's store surface does NOT expose `inventory_quantity`
- *   (availability is a search facet; the server enforces stock at add with
- *   400 `insufficient_inventory`). Managed-inventory variants without an
- *   exposed quantity are treated as in stock optimistically; a thrown
- *   `insufficient_inventory` flips the button to the out-of-stock state.
- *   Richer DTOs that DO carry `inventory_quantity` keep the original
- *   quantity check.
+ * - Stock: the variant DTO carries `in_stock`, computed server-side by THE
+ *   availability predicate — this component only reads it. The server still
+ *   enforces stock at add (400 `insufficient_inventory` flips the button to
+ *   the out-of-stock state). On a legacy wire without the field, managed
+ *   variants fall back to the old optimistic behavior; richer DTOs carrying
+ *   `inventory_quantity` keep the original quantity check.
  *
  * Variant matching is the extracted pure module `./variant-matching`
  * (handles Cartbase's option-value link shape).
@@ -121,10 +120,17 @@ export function ProductActions({
 
   const inStock = useMemo(() => {
     if (!selectedVariant) return false
+    // The server computes THE availability predicate and emits it as
+    // `in_stock` on the variant DTO — read it, never re-derive it here
+    // (the hand-copied clauses this replaced could not see stock levels and
+    // showed an enabled Add to cart on sold-out variants until a 400).
+    if (typeof selectedVariant.in_stock === "boolean") {
+      return selectedVariant.in_stock && !stockExhausted
+    }
+    // Legacy wire (platform predates the field): optimistic fallback — the
+    // server still enforces stock on add.
     if (!selectedVariant.manage_inventory) return true
     if (selectedVariant.allow_backorder) return true
-    // Cartbase wire shape carries no inventory_quantity — optimistic; the
-    // server enforces stock on add. Richer DTOs keep the original check.
     const qty = (selectedVariant as { inventory_quantity?: number })
       .inventory_quantity
     if (qty === undefined) return !stockExhausted

package/theme/index.css

@@ -0,0 +1,25 @@
+/*
+ * Cartbase storefront theme — the one line a storefront imports.
+ *
+ *   @import "tailwindcss";
+ *   @import "@cartbase/storefront/theme";
+ *
+ * That is the whole setup. There is no Tailwind config file, no preset to
+ * register, and no list of token names to copy: Tailwind 4 reads the theme
+ * from CSS, and this ships filled, so a fresh install renders as a designed
+ * store rather than grey boxes.
+ *
+ * To retheme, override the values from tokens.css in your own stylesheet
+ * AFTER this import. Never edit the vocabulary — components reference those
+ * names, and changing one moves every storefront at once.
+ */
+@import "./tokens.css";
+@import "./theme.css";
+
+/* The page's own ground. Without this the body inherits the browser default
+   and every surface token above renders against white regardless of theme. */
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-body-family);
+}

package/theme/theme.css

@@ -0,0 +1,150 @@
+/*
+ * Cartbase storefront — the VOCABULARY.
+ *
+ * Every line maps a value from tokens.css into a Tailwind namespace, which is
+ * what turns it into a utility class. Registering `--color-primary` is what
+ * makes `bg-primary`, `text-primary`, `border-primary` and `ring-primary`
+ * exist. Registering `--text-h2` is what makes `text-h2` exist.
+ *
+ * THIS FILE HOLDS NO VALUES, and a theme never edits it. A theme swaps
+ * tokens.css and the whole library repaints, because components only ever
+ * reference names from here.
+ *
+ * Every namespace below is Tailwind's own. We invented none of them and we
+ * add none of our own, because the requirement is that a developer or a
+ * coding agent reads `text-h2` or `bg-primary` and needs no documentation to
+ * know what it is or how to change it.
+ */
+
+@theme {
+  /* ── Colour ───────────────────────────────────────────────────────────── */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* ── Typefaces ────────────────────────────────────────────────────────── */
+  --font-body: var(--font-body-family);
+  --font-display: var(--font-display-family);
+  --font-mono: var(--font-mono-family);
+
+  /*
+   * ── Type scale ──────────────────────────────────────────────────────────
+   * Generated at a 1.2 ratio from a 16px base and rounded to 4px steps, the
+   * major-third scale Polaris uses. Named h1 to h6 because that is what every
+   * web developer reads without translation.
+   *
+   * The name is a STYLE, never a tag. Put `text-h2` on an <h1> when the page
+   * needs a smaller heading: the tag stays correct for search engines and
+   * screen readers, the style is a separate decision. This is exactly how
+   * Webflow's Client-First `heading-style-h*` classes work.
+   */
+  --text-h1: 2.5rem;
+  --text-h1--line-height: 1.1;
+  --text-h1--letter-spacing: -0.02em;
+  --text-h1--font-weight: 600;
+
+  --text-h2: 2rem;
+  --text-h2--line-height: 1.15;
+  --text-h2--letter-spacing: -0.015em;
+  --text-h2--font-weight: 600;
+
+  --text-h3: 1.75rem;
+  --text-h3--line-height: 1.2;
+  --text-h3--letter-spacing: -0.01em;
+  --text-h3--font-weight: 600;
+
+  --text-h4: 1.5rem;
+  --text-h4--line-height: 1.25;
+  --text-h4--font-weight: 600;
+
+  --text-h5: 1.25rem;
+  --text-h5--line-height: 1.3;
+  --text-h5--font-weight: 600;
+
+  --text-h6: 1rem;
+  --text-h6--line-height: 1.4;
+  --text-h6--font-weight: 600;
+
+  --text-body-large: 1.125rem;
+  --text-body-large--line-height: 1.6;
+
+  --text-body: 1rem;
+  --text-body--line-height: 1.6;
+
+  --text-body-small: 0.875rem;
+  --text-body-small--line-height: 1.5;
+
+  /* Buttons, form labels, badges — short, never a sentence. */
+  --text-label: 0.875rem;
+  --text-label--line-height: 1.2;
+  --text-label--font-weight: 500;
+
+  /* Fine print, metadata, timestamps. */
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 1.4;
+
+  /*
+   * ── Weight ──────────────────────────────────────────────────────────────
+   * Three, not four. Bold and semibold were doing the same job in different
+   * places, which is how a scale rots.
+   */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
+  /*
+   * ── Spacing ─────────────────────────────────────────────────────────────
+   * Tailwind's own 4px step, stated rather than assumed so a theme can widen
+   * the whole rhythm with one number.
+   */
+  --spacing: 0.25rem;
+
+  /* ── Shape ────────────────────────────────────────────────────────────── */
+  --radius-sm: calc(var(--radius-base) - 4px);
+  --radius-md: calc(var(--radius-base) - 2px);
+  --radius-lg: var(--radius-base);
+  --radius-xl: calc(var(--radius-base) + 4px);
+  --radius-2xl: calc(var(--radius-base) + 12px);
+
+  /*
+   * ── Elevation ───────────────────────────────────────────────────────────
+   * Named for what is raised, not for how big the blur is. `shadow-card` says
+   * what it is for; `shadow-md` says nothing and cannot be retuned per theme.
+   */
+  --shadow-card: var(--elevation-card);
+  --shadow-card-hover: var(--elevation-card-hover);
+  --shadow-popover: var(--elevation-popover);
+  --shadow-drawer: var(--elevation-drawer);
+
+  /* ── Motion ───────────────────────────────────────────────────────────── */
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* ── Layout ───────────────────────────────────────────────────────────── */
+  --container-page: var(--layout-page-width);
+  --container-prose: var(--layout-prose-width);
+}

package/theme/tokens.css

@@ -0,0 +1,106 @@
+/*
+ * Cartbase storefront — the DEFAULT THEME's values.
+ *
+ * This file is one half of the two-layer token model. It holds VALUES and
+ * nothing else. The other half (theme.css) holds the NAMES and never holds a
+ * value. A theme replaces this file; it never touches the other one.
+ *
+ * Naming follows shadcn/ui exactly, because that is the vocabulary every
+ * developer and every coding agent already knows without reading a document:
+ * a semantic role (`primary`, `muted`, `destructive`) always paired with its
+ * `-foreground`, so text on a surface is never a guess.
+ *
+ * Colours are oklch. Opacity modifiers (`bg-primary/50`) work on full colour
+ * values in Tailwind 4, so unlike the old preset these are complete colours
+ * rather than bare channels waiting for a wrapper.
+ */
+
+:root {
+  color-scheme: light;
+
+  /* ── Surfaces ─────────────────────────────────────────────────────────── */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  /* ── Roles ────────────────────────────────────────────────────────────── */
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  /* ── Feedback ─────────────────────────────────────────────────────────── */
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.648 0.15 160);
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.828 0.189 84.429);
+  --warning-foreground: oklch(0.279 0.077 45.635);
+
+  /* ── Lines and focus ──────────────────────────────────────────────────── */
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* ── Typefaces ────────────────────────────────────────────────────────── */
+  --font-body-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-display-family: ui-serif, Georgia, serif;
+  --font-mono-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* ── Shape ────────────────────────────────────────────────────────────── */
+  --radius-base: 0.5rem;
+
+  /* ── Elevation ────────────────────────────────────────────────────────── */
+  --elevation-card: 0 1px 2px 0 oklch(0 0 0 / 5%);
+  --elevation-card-hover: 0 4px 12px -2px oklch(0 0 0 / 10%), 0 2px 4px -2px oklch(0 0 0 / 6%);
+  --elevation-popover: 0 8px 24px -4px oklch(0 0 0 / 12%), 0 2px 6px -2px oklch(0 0 0 / 8%);
+  --elevation-drawer: -8px 0 32px -8px oklch(0 0 0 / 16%);
+
+  /* ── Layout ───────────────────────────────────────────────────────────── */
+  --layout-page-width: 80rem;
+  --layout-prose-width: 42rem;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success: oklch(0.696 0.17 162.48);
+  --success-foreground: oklch(0.145 0 0);
+  --warning: oklch(0.828 0.189 84.429);
+  --warning-foreground: oklch(0.279 0.077 45.635);
+
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 18%);
+  --ring: oklch(0.556 0 0);
+
+  /* Shadows have to be heavier on a dark ground or they vanish entirely. */
+  --elevation-card: 0 1px 2px 0 oklch(0 0 0 / 40%);
+  --elevation-card-hover: 0 4px 12px -2px oklch(0 0 0 / 55%), 0 2px 4px -2px oklch(0 0 0 / 40%);
+  --elevation-popover: 0 8px 24px -4px oklch(0 0 0 / 60%), 0 2px 6px -2px oklch(0 0 0 / 45%);
+  --elevation-drawer: -8px 0 32px -8px oklch(0 0 0 / 65%);
+}

package/tailwind-preset.cjs

@@ -1,72 +0,0 @@
-/**
- * @cartbase/storefront Tailwind preset — shadcn/ui standard token structure
- * (ported verbatim from @1click/ui tailwind-preset.cjs v2.3.1)
- *
- * Uses oklch color space (modern CSS standard, matches shadcn/ui Create output).
- * CSS variables store raw oklch channels so Tailwind's opacity modifiers work:
- *   --primary: 0.553 0.195 38.402;
- *   → bg-primary    = oklch(0.553 0.195 38.402)
- *   → bg-primary/50 = oklch(0.553 0.195 38.402 / 50%)
- */
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        background: "oklch(var(--background) / <alpha-value>)",
-        foreground: "oklch(var(--foreground) / <alpha-value>)",
-        card: {
-          DEFAULT: "oklch(var(--card) / <alpha-value>)",
-          foreground: "oklch(var(--card-foreground) / <alpha-value>)",
-        },
-        popover: {
-          DEFAULT: "oklch(var(--popover) / <alpha-value>)",
-          foreground: "oklch(var(--popover-foreground) / <alpha-value>)",
-        },
-        primary: {
-          DEFAULT: "oklch(var(--primary) / <alpha-value>)",
-          foreground: "oklch(var(--primary-foreground) / <alpha-value>)",
-        },
-        secondary: {
-          DEFAULT: "oklch(var(--secondary) / <alpha-value>)",
-          foreground: "oklch(var(--secondary-foreground) / <alpha-value>)",
-        },
-        muted: {
-          DEFAULT: "oklch(var(--muted) / <alpha-value>)",
-          foreground: "oklch(var(--muted-foreground) / <alpha-value>)",
-        },
-        accent: {
-          DEFAULT: "oklch(var(--accent) / <alpha-value>)",
-          foreground: "oklch(var(--accent-foreground) / <alpha-value>)",
-        },
-        destructive: {
-          DEFAULT: "oklch(var(--destructive) / <alpha-value>)",
-          foreground: "oklch(var(--destructive-foreground) / <alpha-value>)",
-        },
-        border: "oklch(var(--border) / <alpha-value>)",
-        input: "oklch(var(--input) / <alpha-value>)",
-        ring: "oklch(var(--ring) / <alpha-value>)",
-        success: {
-          DEFAULT: "oklch(var(--success) / <alpha-value>)",
-          foreground: "oklch(var(--success-foreground) / <alpha-value>)",
-        },
-        warning: {
-          DEFAULT: "oklch(var(--warning) / <alpha-value>)",
-          foreground: "oklch(var(--warning-foreground) / <alpha-value>)",
-        },
-      },
-      fontFamily: {
-        display: ["var(--font-display)", "serif"],
-        body: ["var(--font-body)", "system-ui", "sans-serif"],
-        mono: ["var(--font-mono)", "ui-monospace", "monospace"],
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-    },
-  },
-  plugins: [],
-}