ecommerce 1/3

2026-02-18 14:23:49 +01:00 · 2026-02-18 14:23:49 +01:00 · 152bd98533
commit 152bd98533
parent 4d1eade6c0
42 changed files with 23500 additions and 0 deletions
--- a/packages/ecommerce/.gitignore
+++ b/packages/ecommerce/.gitignore
@ -0,0 +1,28 @@
+# Logs
+logs
+systems
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+ref
+
+*.local
+playwright-report
+test-results
+dist
+dist-in
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/packages/ecommerce/dist-lib/cart/CartItem.d.ts
+++ b/packages/ecommerce/dist-lib/cart/CartItem.d.ts
@ -0,0 +1,8 @@
+import { CartItem as CartItemType } from './types';
+export interface CartItemProps {
+    item: CartItemType;
+    /** Optional extra class names for the root element. */
+    className?: string;
+}
+/** A single cart row — thumbnail, title, quantity stepper, line total, remove. */
+export declare function CartItemRow({ item, className }: CartItemProps): import("react/jsx-runtime").JSX.Element;
--- a/packages/ecommerce/dist-lib/cart/CartPage.d.ts
+++ b/packages/ecommerce/dist-lib/cart/CartPage.d.ts
@ -0,0 +1,11 @@
+export interface CartPageProps {
+    /** Called when user clicks "Proceed to Checkout". */
+    onCheckout?: () => void;
+    /** Optional extra class names. */
+    className?: string;
+}
+/**
+ * Full cart page — shows items, subtotal, and a checkout CTA.
+ * Renders an empty-state when the cart has no items.
+ */
+export declare function CartPage({ onCheckout, className }: CartPageProps): import("react/jsx-runtime").JSX.Element;
--- a/packages/ecommerce/dist-lib/cart/useCartStore.d.ts
+++ b/packages/ecommerce/dist-lib/cart/useCartStore.d.ts
@ -0,0 +1,10 @@
+import { CartState } from './types';
+/**
+ * Global cart store.
+ *
+ * Usage:
+ * ```tsx
+ * const { items, addItem, subtotal } = useCartStore();
+ * ```
+ */
+export declare const useCartStore: import('zustand').UseBoundStore<import('zustand').StoreApi<CartState>>;
--- a/packages/ecommerce/dist-lib/checkout/CheckoutPage.d.ts
+++ b/packages/ecommerce/dist-lib/checkout/CheckoutPage.d.ts
@ -0,0 +1,30 @@
+/** Shipping address fields collected at checkout. */
+export interface ShippingAddress {
+    fullName: string;
+    email: string;
+    address: string;
+    city: string;
+    zip: string;
+    country: string;
+}
+export type PaymentMethod = "shopify" | "crypto";
+export interface CheckoutPageProps {
+    /** Called when user submits the checkout form. */
+    onPlaceOrder?: (data: {
+        shipping: ShippingAddress;
+        paymentMethod: PaymentMethod;
+    }) => void;
+    /** Called when user clicks "Back to Cart". */
+    onBackToCart?: () => void;
+    /** Pre-filled tax amount, if known. */
+    tax?: number;
+    /** Pre-filled shipping cost. */
+    shipping?: number;
+    /** Optional extra class names. */
+    className?: string;
+}
+/**
+ * Checkout page — two-column layout with shipping form + payment selector on
+ * the left and an OrderSummary on the right.
+ */
+export declare function CheckoutPage({ onPlaceOrder, onBackToCart, tax, shipping, className, }: CheckoutPageProps): import("react/jsx-runtime").JSX.Element;
--- a/packages/ecommerce/dist-lib/checkout/OrderSummary.d.ts
+++ b/packages/ecommerce/dist-lib/checkout/OrderSummary.d.ts
@ -0,0 +1,12 @@
+export interface OrderSummaryProps {
+    /** Tax amount (pass 0 or leave undefined to show "Calculated at next step"). */
+    tax?: number;
+    /** Shipping cost (pass 0 or leave undefined to show "Free" / "TBD"). */
+    shipping?: number;
+    /** Optional extra class names. */
+    className?: string;
+}
+/**
+ * Read-only order breakdown: line items, subtotal, tax, shipping, total.
+ */
+export declare function OrderSummary({ tax, shipping, className }: OrderSummaryProps): import("react/jsx-runtime").JSX.Element;
--- a/packages/ecommerce/dist-lib/components/ui/button.d.ts
+++ b/packages/ecommerce/dist-lib/components/ui/button.d.ts
@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    size?: "default" | "sm" | "lg" | "icon";
+} & import('class-variance-authority/types').ClassProp) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };
--- a/packages/ecommerce/dist-lib/components/ui/card.d.ts
+++ b/packages/ecommerce/dist-lib/components/ui/card.d.ts
@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
--- a/packages/ecommerce/dist-lib/components/ui/input.d.ts
+++ b/packages/ecommerce/dist-lib/components/ui/input.d.ts
@ -0,0 +1,3 @@
+import * as React from "react";
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input };
--- a/packages/ecommerce/dist-lib/components/ui/label.d.ts
+++ b/packages/ecommerce/dist-lib/components/ui/label.d.ts
@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import('class-variance-authority/types').ClassProp) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };
--- a/packages/ecommerce/dist-lib/components/ui/separator.d.ts
+++ b/packages/ecommerce/dist-lib/components/ui/separator.d.ts
@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };
--- a/packages/ecommerce/dist-lib/lib-export.d.ts
+++ b/packages/ecommerce/dist-lib/lib-export.d.ts
@ -0,0 +1,10 @@
+export { CartItemRow } from './cart/CartItem';
+export type { CartItemProps } from './cart/CartItem';
+export { CartPage } from './cart/CartPage';
+export type { CartPageProps } from './cart/CartPage';
+export { useCartStore } from './cart/useCartStore';
+export type { CartItem, CartActions, CartState } from './cart/types';
+export { OrderSummary } from './checkout/OrderSummary';
+export type { OrderSummaryProps } from './checkout/OrderSummary';
+export { CheckoutPage } from './checkout/CheckoutPage';
+export type { CheckoutPageProps, ShippingAddress, PaymentMethod, } from './checkout/CheckoutPage';
--- a/packages/ecommerce/dist-lib/lib/utils.d.ts
+++ b/packages/ecommerce/dist-lib/lib/utils.d.ts
@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
--- a/packages/ecommerce/dist-lib/pm-ecommerce.d.ts
+++ b/packages/ecommerce/dist-lib/pm-ecommerce.d.ts
@ -0,0 +1,2 @@
+export * from './lib-export'
+export {}
--- a/packages/ecommerce/dist-lib/pm-ecommerce.es.js
+++ b/packages/ecommerce/dist-lib/pm-ecommerce.es.js
--- a/packages/ecommerce/dist-lib/pm-ecommerce.es.js.map
+++ b/packages/ecommerce/dist-lib/pm-ecommerce.es.js.map
--- a/packages/ecommerce/package-lock.json
+++ b/packages/ecommerce/package-lock.json
--- a/packages/ecommerce/package.json
+++ b/packages/ecommerce/package.json
@ -0,0 +1,151 @@
+{
+  "name": "@polymech/ecommerce",
+  "version": "0.0.1",
+  "type": "module",
+  "module": "./dist-lib/pm-ecommerce.es.js",
+  "types": "./dist-lib/pm-ecommerce.d.ts",
+  "files": [
+    "dist-lib"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist-lib/pm-ecommerce.es.js",
+      "types": "./dist-lib/lib-export.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build -c vite.config.lib.ts",
+    "build:dev": "vite build --mode development",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "server": "cd server && npm run dev",
+    "test": "playwright test --project=chromium",
+    "test:all": "playwright test",
+    "test:home": "playwright test tests/home.spec.ts --project=chromium",
+    "test:post": "playwright test tests/post.spec.ts --project=chromium",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed --project=chromium",
+    "test:debug": "playwright test --debug",
+    "test:report": "playwright show-report",
+    "test:verify-env": "node tests/verify-env.js",
+    "screenshots": "playwright test tests/example.spec.ts"
+  },
+  "dependencies": {
+    "@google/genai": "^1.34.0",
+    "@google/generative-ai": "^0.24.1",
+    "@hookform/resolvers": "^3.10.0",
+    "@mdxeditor/editor": "^3.47.0",
+    "@milkdown/core": "^7.16.0",
+    "@milkdown/crepe": "^7.16.0",
+    "@milkdown/utils": "^7.16.0",
+    "@playwright/test": "^1.55.1",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@supabase-cache-helpers/postgrest-swr": "^2.0.3",
+    "@supabase/supabase-js": "^2.58.0",
+    "@tanstack/react-query": "^5.83.0",
+    "@types/dompurify": "^3.2.0",
+    "@types/file-saver": "^2.0.7",
+    "@uppy/tus": "^5.0.2",
+    "@vidstack/react": "^1.12.13",
+    "@xyflow/react": "^12.8.6",
+    "axios": "^1.12.2",
+    "buffer": "^6.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "dompurify": "^3.2.7",
+    "dotenv": "^17.2.3",
+    "embla-carousel-react": "^8.6.0",
+    "exifreader": "^4.33.1",
+    "file-saver": "^2.0.5",
+    "hls.js": "^1.6.13",
+    "idb-keyval": "^6.2.2",
+    "input-otp": "^1.4.2",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.462.0",
+    "marked": "^16.3.0",
+    "next-themes": "^0.3.0",
+    "openai": "^6.0.0",
+    "playwright": "^1.55.1",
+    "prismjs": "^1.30.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.61.1",
+    "react-intersection-observer": "^10.0.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^2.1.9",
+    "react-router-dom": "^6.30.1",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "recharts": "^2.15.4",
+    "replicate": "^1.2.0",
+    "rollup-plugin-visualizer": "^6.0.5",
+    "sonner": "^1.7.4",
+    "stream-browserify": "^3.0.0",
+    "swr": "^2.3.7",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.9",
+    "vite-bundle-analyzer": "^1.3.1",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-pwa": "^1.0.3",
+    "vue": "^3.5.22",
+    "workbox-core": "^7.4.0",
+    "zod": "^3.25.76",
+    "zod-to-json-schema": "^3.24.6",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "^22.16.5",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^15.15.0",
+    "lovable-tagger": "^1.1.10",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.4",
+    "workbox-precaching": "^7.4.0",
+    "workbox-routing": "^7.4.0",
+    "workbox-window": "^7.4.0"
+  }
+}
--- a/packages/ecommerce/postcss.config.js
+++ b/packages/ecommerce/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/packages/ecommerce/readme.md
+++ b/packages/ecommerce/readme.md
@ -0,0 +1,114 @@
+# Todo List: React + Hono + Shopify + Google Merchant + Crypto Backup + Refund Flow
+
+## 1. Frontend - React Components / Pages
+
+### Product & Catalog
+- [ ] `ProductsPage` - Display all products from Shopify Storefront API.
+- [ ] `ProductDetail` - Show single product details, include JSON-LD schema for Google.
+- [ ] `ProductCard` - Reusable card component for product grid.
+- [ ] `ProductGrid` - Grid layout component for listing products.
+
+### Cart & Checkout
+- [ ] `CartPage` - Show cart items, quantities, subtotal.
+- [ ] `CartItem` - Individual item component in cart.
+- [ ] `CheckoutPage` - Handle checkout selection (Shopify or crypto).
+- [ ] `OrderSummary` - Display order totals, taxes, shipping.
+
+### Policies / Info Pages
+- [ ] `ShippingPage` - Public page with shipping info and rates.
+- [ ] `ReturnsPage` - Public page with refund/return policy.
+- [ ] `PrivacyPolicyPage` - Public page with privacy/cookie info.
+- [ ] `TermsPage` - Optional terms of service page.
+
+### Payment / Backup
+- [ ] `CryptoPayButton` - Button to trigger crypto payment backup flow.
+- [ ] `GoogleFeedButton` (optional) - Trigger feed refresh manually.
+
+### Admin / Sync
+- [ ] `ProductSyncPage` - Admin page to sync products to Google Merchant (optional).
+- [ ] `ReportsPage` - Show feed errors or Merchant API warnings (optional).
+- [ ] `RefundRequestPage` - Admin/customer page to view/refund orders.
+
+---
+
+## 2. Backend - Hono Endpoints
+
+### Shopify / Orders
+- [ ] `/api/checkout-session` - Create Shopify checkout session.
+- [ ] `/api/order-webhook` - Receive Shopify order updates, update stock.
+- [ ] `/api/refund-order` - Trigger Shopify refund (full/partial).
+
+### Payment
+- [ ] `/api/create-payment-intent` - Stripe PaymentIntent for card payments.
+- [ ] `/api/create-crypto-session` - Create crypto invoice/session (Coinbase / BitPay).
+- [ ] `/api/crypto-webhook` - Receive crypto payment confirmations.
+- [ ] `/api/refund-crypto-payment` - Refund crypto payment via provider API.
+
+### Google Merchant
+- [ ] `/api/google-feed` - Generate product feed (JSON/XML) for Google Merchant.
+- [ ] `/api/product-sync` - Optional: push product updates to Google Merchant Content API.
+
+---
+
+## 3. Product Feed / Google Merchant
+
+- [ ] Ensure each product includes:
+  - `id`, `title`, `description`
+  - `link` (product detail URL)
+  - `image_link` (high-res images)
+  - `price` (match checkout)
+  - `availability` (`in_stock`, `out_of_stock`, `preorder`)
+  - `brand`, `gtin` or `mpn` (if available)
+- [ ] Set up scheduled feed update (daily) via Hono cron / scheduler.
+- [ ] Validate feed with Google Merchant Center tools.
+
+---
+
+## 4. Crypto Payment Integration
+
+- [ ] Choose crypto provider: Coinbase Commerce / BitPay / CoinPayments.
+- [ ] Implement backend API to generate invoice / checkout session.
+- [ ] Implement webhook verification for crypto payments.
+- [ ] Update Shopify order or draft order once crypto payment confirmed.
+- [ ] Implement refund endpoint for crypto payments.
+- [ ] Track refunded crypto payments in order history.
+
+---
+
+## 5. Refund Flow
+
+### Frontend
+- [ ] `RefundRequestPage` - Customer/admin can request refund.
+- [ ] `RefundStatusComponent` - Display refund progress (pending, completed, failed).
+
+### Backend (Hono)
+- [ ] `/api/refund-order` - Trigger Shopify refund (full/partial) via Admin API.
+- [ ] `/api/refund-crypto-payment` - Refund crypto payment through provider API (Coinbase/BitPay).
+- [ ] Update order status in database / Shopify once refund is processed.
+- [ ] Send email/notification to customer about refund status.
+
+### Notes
+- Refunds must adjust inventory and availability.
+- Partial refunds must recalc totals correctly.
+- Refund webhooks (if supported) should be verified for crypto payments.
+
+---
+
+## 6. SEO / Compliance
+
+- [ ] Ensure all pages are HTTPS.
+- [ ] Structured data for products (`Product` JSON-LD).
+- [ ] Meta tags for title, description, OG tags.
+- [ ] Accurate shipping, returns, privacy policies.
+- [ ] Validate Google Merchant feed compliance.
+
+---
+
+## 7. Optional / Advanced
+
+- [ ] Support multiple currencies in Shopify and crypto backup.
+- [ ] Admin page to monitor crypto payments and refunds.
+- [ ] Retry / error handling for failed webhook calls.
+- [ ] Analytics tracking (Google Analytics / server-side events).
+- [ ] Scheduled feed validation to catch product/price issues.
+
--- a/packages/ecommerce/src/cart/CartItem.tsx
+++ b/packages/ecommerce/src/cart/CartItem.tsx
@ -0,0 +1,94 @@
+import React from "react";
+import { Minus, Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useCartStore } from "./useCartStore";
+import type { CartItem as CartItemType } from "./types";
+
+export interface CartItemProps {
+    item: CartItemType;
+    /** Optional extra class names for the root element. */
+    className?: string;
+}
+
+/** A single cart row — thumbnail, title, quantity stepper, line total, remove. */
+export function CartItemRow({ item, className }: CartItemProps) {
+    const updateQuantity = useCartStore((s) => s.updateQuantity);
+    const removeItem = useCartStore((s) => s.removeItem);
+
+    const lineTotal = item.price * item.quantity;
+
+    return (
+        <div
+            className={cn(
+                "flex items-center gap-4 rounded-lg border border-border/50 bg-card p-4 transition-colors hover:bg-accent/5",
+                className,
+            )}
+        >
+            {/* Thumbnail */}
+            {item.image ? (
+                <img
+                    src={item.image}
+                    alt={item.title}
+                    className="h-20 w-20 shrink-0 rounded-md object-cover"
+                />
+            ) : (
+                <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
+                    No img
+                </div>
+            )}
+
+            {/* Info */}
+            <div className="flex flex-1 flex-col gap-1 min-w-0">
+                <span className="truncate font-medium">{item.title}</span>
+                {item.variant && (
+                    <span className="text-xs text-muted-foreground">{item.variant}</span>
+                )}
+                <span className="text-sm text-muted-foreground">
+                    ${item.price.toFixed(2)} each
+                </span>
+            </div>
+
+            {/* Quantity stepper */}
+            <div className="flex items-center gap-1">
+                <Button
+                    variant="outline"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                    aria-label="Decrease quantity"
+                >
+                    <Minus className="h-3 w-3" />
+                </Button>
+                <span className="w-8 text-center text-sm font-medium tabular-nums">
+                    {item.quantity}
+                </span>
+                <Button
+                    variant="outline"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                    aria-label="Increase quantity"
+                >
+                    <Plus className="h-3 w-3" />
+                </Button>
+            </div>
+
+            {/* Line total */}
+            <span className="w-20 text-right font-semibold tabular-nums">
+                ${lineTotal.toFixed(2)}
+            </span>
+
+            {/* Remove */}
+            <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive hover:text-destructive"
+                onClick={() => removeItem(item.id)}
+                aria-label={`Remove ${item.title}`}
+            >
+                <Trash2 className="h-4 w-4" />
+            </Button>
+        </div>
+    );
+}
--- a/packages/ecommerce/src/cart/CartPage.tsx
+++ b/packages/ecommerce/src/cart/CartPage.tsx
@ -0,0 +1,86 @@
+import React from "react";
+import { ShoppingCart, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { useCartStore } from "./useCartStore";
+import { CartItemRow } from "./CartItem";
+
+export interface CartPageProps {
+    /** Called when user clicks "Proceed to Checkout". */
+    onCheckout?: () => void;
+    /** Optional extra class names. */
+    className?: string;
+}
+
+/**
+ * Full cart page — shows items, subtotal, and a checkout CTA.
+ * Renders an empty-state when the cart has no items.
+ */
+export function CartPage({ onCheckout, className }: CartPageProps) {
+    const items = useCartStore((s) => s.items);
+    const subtotal = useCartStore((s) => s.subtotal);
+    const itemCount = useCartStore((s) => s.itemCount);
+    const clearCart = useCartStore((s) => s.clearCart);
+
+    /* ---------- Empty state ---------- */
+    if (items.length === 0) {
+        return (
+            <div className={cn("flex flex-col items-center justify-center gap-6 py-24", className)}>
+                <div className="flex h-24 w-24 items-center justify-center rounded-full bg-muted">
+                    <ShoppingCart className="h-10 w-10 text-muted-foreground" />
+                </div>
+                <div className="text-center">
+                    <h2 className="text-xl font-semibold">Your cart is empty</h2>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                        Add some products to get started.
+                    </p>
+                </div>
+            </div>
+        );
+    }
+
+    /* ---------- Cart with items ---------- */
+    return (
+        <div className={cn("mx-auto max-w-3xl space-y-6", className)}>
+            <Card>
+                <CardHeader className="flex-row items-center justify-between space-y-0">
+                    <CardTitle className="flex items-center gap-2 text-xl">
+                        <ShoppingCart className="h-5 w-5" />
+                        Cart
+                        <span className="text-sm font-normal text-muted-foreground">
+                            ({itemCount} {itemCount === 1 ? "item" : "items"})
+                        </span>
+                    </CardTitle>
+
+                    <Button variant="ghost" size="sm" className="text-destructive" onClick={clearCart}>
+                        <Trash2 className="mr-1 h-4 w-4" />
+                        Clear
+                    </Button>
+                </CardHeader>
+
+                <CardContent className="space-y-3">
+                    {items.map((item) => (
+                        <CartItemRow key={item.id} item={item} />
+                    ))}
+                </CardContent>
+
+                <Separator />
+
+                <CardFooter className="flex-col items-stretch gap-4 pt-6">
+                    <div className="flex items-center justify-between text-lg font-semibold">
+                        <span>Subtotal</span>
+                        <span className="tabular-nums">${subtotal.toFixed(2)}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                        Shipping and taxes calculated at checkout.
+                    </p>
+                    <Button size="lg" className="w-full" onClick={onCheckout}>
+                        Proceed to Checkout
+                    </Button>
+                </CardFooter>
+            </Card>
+        </div>
+    );
+}
--- a/packages/ecommerce/src/cart/types.ts
+++ b/packages/ecommerce/src/cart/types.ts
@ -0,0 +1,36 @@
+/** Represents a single item in the shopping cart. */
+export interface CartItem {
+    /** Unique product identifier (e.g. Shopify product id). */
+    id: string;
+    /** Product display title. */
+    title: string;
+    /** Absolute URL to product thumbnail image. */
+    image?: string;
+    /** Unit price in the store's base currency. */
+    price: number;
+    /** Quantity in cart (≥ 1). */
+    quantity: number;
+    /** Optional variant label (e.g. "Red / XL"). */
+    variant?: string;
+}
+
+/** Actions exposed by the cart store. */
+export interface CartActions {
+    /** Add an item or increment its quantity if already present. */
+    addItem: (item: Omit<CartItem, "quantity"> & { quantity?: number }) => void;
+    /** Remove an item entirely by id. */
+    removeItem: (id: string) => void;
+    /** Set exact quantity for an item. Removes if qty ≤ 0. */
+    updateQuantity: (id: string, quantity: number) => void;
+    /** Empty the cart. */
+    clearCart: () => void;
+}
+
+/** Full cart state shape. */
+export interface CartState extends CartActions {
+    items: CartItem[];
+    /** Derived: sum of price × quantity for every item. */
+    subtotal: number;
+    /** Derived: total number of units in cart. */
+    itemCount: number;
+}
--- a/packages/ecommerce/src/cart/useCartStore.ts
+++ b/packages/ecommerce/src/cart/useCartStore.ts
@ -0,0 +1,60 @@
+import { create } from "zustand";
+import type { CartItem, CartState } from "./types";
+
+/** Recompute derived totals from items array. */
+function computeTotals(items: CartItem[]) {
+    return {
+        subtotal: items.reduce((sum, i) => sum + i.price * i.quantity, 0),
+        itemCount: items.reduce((sum, i) => sum + i.quantity, 0),
+    };
+}
+
+/**
+ * Global cart store.
+ *
+ * Usage:
+ * ```tsx
+ * const { items, addItem, subtotal } = useCartStore();
+ * ```
+ */
+export const useCartStore = create<CartState>((set) => ({
+    items: [],
+    subtotal: 0,
+    itemCount: 0,
+
+    addItem: (incoming) =>
+        set((state) => {
+            const existing = state.items.find((i) => i.id === incoming.id);
+            let items: CartItem[];
+            if (existing) {
+                items = state.items.map((i) =>
+                    i.id === incoming.id
+                        ? { ...i, quantity: i.quantity + (incoming.quantity ?? 1) }
+                        : i,
+                );
+            } else {
+                items = [...state.items, { ...incoming, quantity: incoming.quantity ?? 1 }];
+            }
+            return { items, ...computeTotals(items) };
+        }),
+
+    removeItem: (id) =>
+        set((state) => {
+            const items = state.items.filter((i) => i.id !== id);
+            return { items, ...computeTotals(items) };
+        }),
+
+    updateQuantity: (id, quantity) =>
+        set((state) => {
+            if (quantity <= 0) {
+                const items = state.items.filter((i) => i.id !== id);
+                return { items, ...computeTotals(items) };
+            }
+            const items = state.items.map((i) =>
+                i.id === id ? { ...i, quantity } : i,
+            );
+            return { items, ...computeTotals(items) };
+        }),
+
+    clearCart: () => set({ items: [], subtotal: 0, itemCount: 0 }),
+}));
--- a/packages/ecommerce/src/checkout/CheckoutPage.tsx
+++ b/packages/ecommerce/src/checkout/CheckoutPage.tsx
@ -0,0 +1,238 @@
+import React, { useState } from "react";
+import { CreditCard, Bitcoin, ShoppingBag } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { useCartStore } from "@/cart/useCartStore";
+import { OrderSummary } from "./OrderSummary";
+
+/** Shipping address fields collected at checkout. */
+export interface ShippingAddress {
+    fullName: string;
+    email: string;
+    address: string;
+    city: string;
+    zip: string;
+    country: string;
+}
+
+export type PaymentMethod = "shopify" | "crypto";
+
+export interface CheckoutPageProps {
+    /** Called when user submits the checkout form. */
+    onPlaceOrder?: (data: {
+        shipping: ShippingAddress;
+        paymentMethod: PaymentMethod;
+    }) => void;
+    /** Called when user clicks "Back to Cart". */
+    onBackToCart?: () => void;
+    /** Pre-filled tax amount, if known. */
+    tax?: number;
+    /** Pre-filled shipping cost. */
+    shipping?: number;
+    /** Optional extra class names. */
+    className?: string;
+}
+
+/**
+ * Checkout page — two-column layout with shipping form + payment selector on
+ * the left and an OrderSummary on the right.
+ */
+export function CheckoutPage({
+    onPlaceOrder,
+    onBackToCart,
+    tax,
+    shipping,
+    className,
+}: CheckoutPageProps) {
+    const itemCount = useCartStore((s) => s.itemCount);
+
+    const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>("shopify");
+    const [form, setForm] = useState<ShippingAddress>({
+        fullName: "",
+        email: "",
+        address: "",
+        city: "",
+        zip: "",
+        country: "",
+    });
+
+    const field = (key: keyof ShippingAddress, value: string) =>
+        setForm((prev) => ({ ...prev, [key]: value }));
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onPlaceOrder?.({ shipping: form, paymentMethod });
+    };
+
+    /* ---- Empty cart guard ---- */
+    if (itemCount === 0) {
+        return (
+            <div className={cn("flex flex-col items-center justify-center gap-6 py-24", className)}>
+                <ShoppingBag className="h-12 w-12 text-muted-foreground" />
+                <p className="text-muted-foreground">Your cart is empty — nothing to check out.</p>
+                {onBackToCart && (
+                    <Button variant="outline" onClick={onBackToCart}>
+                        Back to Cart
+                    </Button>
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <form
+            onSubmit={handleSubmit}
+            className={cn("mx-auto grid max-w-5xl gap-8 lg:grid-cols-[1fr_380px]", className)}
+        >
+            {/* ---- Left: Shipping + Payment ---- */}
+            <div className="space-y-6">
+                {/* Shipping */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="text-lg">Shipping Information</CardTitle>
+                    </CardHeader>
+                    <CardContent className="grid gap-4 sm:grid-cols-2">
+                        <div className="sm:col-span-2 space-y-1.5">
+                            <Label htmlFor="ck-name">Full Name</Label>
+                            <Input
+                                id="ck-name"
+                                required
+                                placeholder="Jane Doe"
+                                value={form.fullName}
+                                onChange={(e) => field("fullName", e.target.value)}
+                            />
+                        </div>
+
+                        <div className="sm:col-span-2 space-y-1.5">
+                            <Label htmlFor="ck-email">Email</Label>
+                            <Input
+                                id="ck-email"
+                                type="email"
+                                required
+                                placeholder="jane@example.com"
+                                value={form.email}
+                                onChange={(e) => field("email", e.target.value)}
+                            />
+                        </div>
+
+                        <div className="sm:col-span-2 space-y-1.5">
+                            <Label htmlFor="ck-address">Address</Label>
+                            <Input
+                                id="ck-address"
+                                required
+                                placeholder="123 Main St"
+                                value={form.address}
+                                onChange={(e) => field("address", e.target.value)}
+                            />
+                        </div>
+
+                        <div className="space-y-1.5">
+                            <Label htmlFor="ck-city">City</Label>
+                            <Input
+                                id="ck-city"
+                                required
+                                placeholder="New York"
+                                value={form.city}
+                                onChange={(e) => field("city", e.target.value)}
+                            />
+                        </div>
+
+                        <div className="space-y-1.5">
+                            <Label htmlFor="ck-zip">ZIP / Postal Code</Label>
+                            <Input
+                                id="ck-zip"
+                                required
+                                placeholder="10001"
+                                value={form.zip}
+                                onChange={(e) => field("zip", e.target.value)}
+                            />
+                        </div>
+
+                        <div className="sm:col-span-2 space-y-1.5">
+                            <Label htmlFor="ck-country">Country</Label>
+                            <Input
+                                id="ck-country"
+                                required
+                                placeholder="United States"
+                                value={form.country}
+                                onChange={(e) => field("country", e.target.value)}
+                            />
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {/* Payment Method */}
+                <Card>
+                    <CardHeader>
+                        <CardTitle className="text-lg">Payment Method</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-3">
+                        <button
+                            type="button"
+                            onClick={() => setPaymentMethod("shopify")}
+                            className={cn(
+                                "flex w-full items-center gap-3 rounded-lg border p-4 text-left transition-colors",
+                                paymentMethod === "shopify"
+                                    ? "border-primary bg-primary/5"
+                                    : "border-border hover:bg-accent/5",
+                            )}
+                        >
+                            <CreditCard className="h-5 w-5 shrink-0" />
+                            <div>
+                                <p className="font-medium">Shopify Checkout</p>
+                                <p className="text-xs text-muted-foreground">
+                                    Credit / debit card via Shopify
+                                </p>
+                            </div>
+                        </button>
+
+                        <button
+                            type="button"
+                            onClick={() => setPaymentMethod("crypto")}
+                            className={cn(
+                                "flex w-full items-center gap-3 rounded-lg border p-4 text-left transition-colors",
+                                paymentMethod === "crypto"
+                                    ? "border-primary bg-primary/5"
+                                    : "border-border hover:bg-accent/5",
+                            )}
+                        >
+                            <Bitcoin className="h-5 w-5 shrink-0" />
+                            <div>
+                                <p className="font-medium">Crypto Payment</p>
+                                <p className="text-xs text-muted-foreground">
+                                    Bitcoin, Ethereum, and more
+                                </p>
+                            </div>
+                        </button>
+                    </CardContent>
+                </Card>
+            </div>
+
+            {/* ---- Right: Summary + CTA ---- */}
+            <div className="space-y-4">
+                <OrderSummary tax={tax} shipping={shipping} />
+
+                <Separator />
+
+                <Button type="submit" size="lg" className="w-full">
+                    Place Order
+                </Button>
+
+                {onBackToCart && (
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        className="w-full"
+                        onClick={onBackToCart}
+                    >
+                        ← Back to Cart
+                    </Button>
+                )}
+            </div>
+        </form>
+    );
+}
--- a/packages/ecommerce/src/checkout/OrderSummary.tsx
+++ b/packages/ecommerce/src/checkout/OrderSummary.tsx
@ -0,0 +1,86 @@
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { useCartStore } from "@/cart/useCartStore";
+
+export interface OrderSummaryProps {
+    /** Tax amount (pass 0 or leave undefined to show "Calculated at next step"). */
+    tax?: number;
+    /** Shipping cost (pass 0 or leave undefined to show "Free" / "TBD"). */
+    shipping?: number;
+    /** Optional extra class names. */
+    className?: string;
+}
+
+/**
+ * Read-only order breakdown: line items, subtotal, tax, shipping, total.
+ */
+export function OrderSummary({ tax, shipping, className }: OrderSummaryProps) {
+    const items = useCartStore((s) => s.items);
+    const subtotal = useCartStore((s) => s.subtotal);
+
+    const taxAmount = tax ?? 0;
+    const shippingAmount = shipping ?? 0;
+    const total = subtotal + taxAmount + shippingAmount;
+
+    return (
+        <Card className={cn("", className)}>
+            <CardHeader>
+                <CardTitle className="text-lg">Order Summary</CardTitle>
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+                {/* Line items */}
+                <ul className="space-y-2 text-sm">
+                    {items.map((item) => (
+                        <li key={item.id} className="flex justify-between gap-2">
+                            <span className="truncate text-muted-foreground">
+                                {item.title} × {item.quantity}
+                            </span>
+                            <span className="shrink-0 tabular-nums">
+                                ${(item.price * item.quantity).toFixed(2)}
+                            </span>
+                        </li>
+                    ))}
+                </ul>
+
+                <Separator />
+
+                {/* Subtotal */}
+                <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Subtotal</span>
+                    <span className="tabular-nums">${subtotal.toFixed(2)}</span>
+                </div>
+
+                {/* Tax */}
+                <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Tax</span>
+                    <span className="tabular-nums">
+                        {tax !== undefined ? `$${taxAmount.toFixed(2)}` : "Calculated at next step"}
+                    </span>
+                </div>
+
+                {/* Shipping */}
+                <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">Shipping</span>
+                    <span className="tabular-nums">
+                        {shipping !== undefined
+                            ? shippingAmount === 0
+                                ? "Free"
+                                : `$${shippingAmount.toFixed(2)}`
+                            : "TBD"}
+                    </span>
+                </div>
+
+                <Separator />
+
+                {/* Total */}
+                <div className="flex justify-between text-base font-semibold">
+                    <span>Total</span>
+                    <span className="tabular-nums">${total.toFixed(2)}</span>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
--- a/packages/ecommerce/src/components/ui/badge.tsx
+++ b/packages/ecommerce/src/components/ui/badge.tsx
@ -0,0 +1,29 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+    "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    {
+        variants: {
+            variant: {
+                default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+                secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+                outline: "text-foreground",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> { }
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+    return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
--- a/packages/ecommerce/src/components/ui/button.tsx
+++ b/packages/ecommerce/src/components/ui/button.tsx
@ -0,0 +1,47 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    {
+        variants: {
+            variant: {
+                default: "bg-primary text-primary-foreground hover:bg-primary/90",
+                destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+                outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+                secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+                ghost: "hover:bg-accent hover:text-accent-foreground",
+                link: "text-primary underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-10 px-4 py-2",
+                sm: "h-9 rounded-md px-2",
+                lg: "h-11 rounded-md px-4",
+                icon: "h-10 w-10",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
+    },
+);
+
+export interface ButtonProps
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : "button";
+        return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/packages/ecommerce/src/components/ui/card.tsx
+++ b/packages/ecommerce/src/components/ui/card.tsx
@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+    ({ className, ...props }, ref) => (
+        <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+    ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+    ({ className, ...props }, ref) => (
+        <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+    ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+    ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
--- a/packages/ecommerce/src/components/ui/input.tsx
+++ b/packages/ecommerce/src/components/ui/input.tsx
@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(
+                    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                    className,
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    },
+);
+Input.displayName = "Input";
+
+export { Input };
--- a/packages/ecommerce/src/components/ui/label.tsx
+++ b/packages/ecommerce/src/components/ui/label.tsx
@ -0,0 +1,19 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+    "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/packages/ecommerce/src/components/ui/separator.tsx
+++ b/packages/ecommerce/src/components/ui/separator.tsx
@ -0,0 +1,20 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+    React.ElementRef<typeof SeparatorPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+    <SeparatorPrimitive.Root
+        ref={ref}
+        decorative={decorative}
+        orientation={orientation}
+        className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+        {...props}
+    />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
--- a/packages/ecommerce/src/lib-export.ts
+++ b/packages/ecommerce/src/lib-export.ts
@ -0,0 +1,21 @@
+// === Cart ===
+export { CartItemRow } from "./cart/CartItem";
+export type { CartItemProps } from "./cart/CartItem";
+
+export { CartPage } from "./cart/CartPage";
+export type { CartPageProps } from "./cart/CartPage";
+
+export { useCartStore } from "./cart/useCartStore";
+
+export type { CartItem, CartActions, CartState } from "./cart/types";
+
+// === Checkout ===
+export { OrderSummary } from "./checkout/OrderSummary";
+export type { OrderSummaryProps } from "./checkout/OrderSummary";
+
+export { CheckoutPage } from "./checkout/CheckoutPage";
+export type {
+    CheckoutPageProps,
+    ShippingAddress,
+    PaymentMethod,
+} from "./checkout/CheckoutPage";
--- a/packages/ecommerce/src/lib/utils.ts
+++ b/packages/ecommerce/src/lib/utils.ts
@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
--- a/packages/ecommerce/tailwind.config.ts
+++ b/packages/ecommerce/tailwind.config.ts
@ -0,0 +1,128 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: ["class"],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        'tiktok-red': '#EE1D52',
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+          glow: "hsl(var(--primary-glow))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+          glow: "hsl(var(--accent-glow))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+          glass: "hsl(var(--card-glass))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+        // Material Design elevation surfaces for dark theme
+        surface: {
+          "1dp": "hsl(var(--surface-1dp))",
+          "2dp": "hsl(var(--surface-2dp))",
+          "3dp": "hsl(var(--surface-3dp))",
+          "4dp": "hsl(var(--surface-4dp))",
+          "6dp": "hsl(var(--surface-6dp))",
+          "8dp": "hsl(var(--surface-8dp))",
+          "12dp": "hsl(var(--surface-12dp))",
+          "16dp": "hsl(var(--surface-16dp))",
+          "24dp": "hsl(var(--surface-24dp))",
+        },
+      },
+      backgroundImage: {
+        'gradient-primary': 'var(--gradient-primary)',
+        'gradient-secondary': 'var(--gradient-secondary)',
+        'gradient-hero': 'var(--gradient-hero)',
+      },
+      backgroundColor: {
+        'glass': 'var(--glass-bg)',
+      },
+      borderColor: {
+        'glass': 'var(--glass-border)',
+      },
+      boxShadow: {
+        'photo': 'var(--photo-shadow)',
+        'glow': 'var(--glow-shadow)',
+      },
+      backdropBlur: {
+        'glass': '12px',
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/typography"),
+  ],
+} satisfies Config;
--- a/packages/ecommerce/tsconfig.app.json
+++ b/packages/ecommerce/tsconfig.app.json
@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "noFallthroughCasesInSwitch": false,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/packages/ecommerce/tsconfig.json
+++ b/packages/ecommerce/tsconfig.json
@ -0,0 +1,16 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "noImplicitAny": false,
+    "noUnusedParameters": false,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": false
+  }
+}
--- a/packages/ecommerce/tsconfig.lib.json
+++ b/packages/ecommerce/tsconfig.lib.json
@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.app.json",
+    "compilerOptions": {
+        "composite": false,
+        "noEmit": false
+    },
+    "include": [
+        "src/lib-export.ts"
+    ]
+}
--- a/packages/ecommerce/tsconfig.node.json
+++ b/packages/ecommerce/tsconfig.node.json
@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/packages/ecommerce/vite.config.embed.ts
+++ b/packages/ecommerce/vite.config.embed.ts
@ -0,0 +1,34 @@
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import path from "path";
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd(), '');
+    // Default to production for embed build usually, or respect mode
+
+    return {
+        root: '.',
+        base: '/embed_assets/',
+        plugins: [
+            react(),
+        ],
+        build: {
+            outDir: 'dist/client/embed', // Output into a subfolder of dist/client or separate dist
+            emptyOutDir: true,
+            assetsDir: '', // Don't use subfolder for assets to keep usage simple with base
+            rollupOptions: {
+                input: {
+                    main: path.resolve(__dirname, 'embed.html'),
+                },
+            },
+        },
+        resolve: {
+            alias: {
+                "@": path.resolve(__dirname, "./src"),
+            },
+        },
+        define: {
+            'process.env.VITE_IS_EMBED': JSON.stringify('true'),
+        }
+    };
+});
--- a/packages/ecommerce/vite.config.lib.ts
+++ b/packages/ecommerce/vite.config.lib.ts
@ -0,0 +1,43 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+    plugins: [
+        react(),
+        dts({
+            include: ['src'],
+            exclude: ['src/**/*.spec.ts', 'src/**/*.test.ts', 'src/setupTests.ts'],
+            insertTypesEntry: true,
+            tsconfigPath: './tsconfig.lib.json',
+        }),
+    ],
+    build: {
+        lib: {
+            entry: path.resolve(__dirname, 'src/lib-export.ts'),
+            name: 'PmEcommerce',
+            formats: ['es'],
+            fileName: () => `pm-ecommerce.es.js`,
+        },
+        rollupOptions: {
+            external: [
+                'react',
+                'react-dom',
+                'react-router-dom',
+                '@tanstack/react-query',
+                '@supabase/supabase-js',
+                'lucide-react', // Icons
+                'sonner' // Toast
+            ],
+        },
+        outDir: 'dist-lib',
+        emptyOutDir: true,
+        sourcemap: true,
+    },
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+        },
+    },
+});
--- a/packages/ecommerce/vite.config.ts
+++ b/packages/ecommerce/vite.config.ts
@ -0,0 +1,84 @@
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { VitePWA } from 'vite-plugin-pwa';
+import path from "path";
+import { componentTagger } from "lovable-tagger";
+//import { analyzer } from 'vite-bundle-analyzer';
+/*
+import { visualizer } from "rollup-plugin-visualizer";
+import viteCompression from 'vite-plugin-compression';
+
+const rollupOptions = {
+  output: {
+    entryFileNames: 'assets/[name].js',
+    chunkFileNames: 'assets/[name].js',
+    assetFileNames: 'assets/[name].[ext]',
+    manualChunks(id: string) {
+      if (id.includes('node_modules')) {
+        if (id.includes('recharts')) {
+          return 'recharts';
+        }
+        return 'vendor';
+      }
+    },
+  },
+}
+*/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
+  const proxyTarget = env.VITE_SERVER_IMAGE_API_URL || 'http://localhost:3333';
+
+  return {
+    server: {
+      host: "::",
+      port: 8080,
+      proxy: {
+        '/api': {
+          target: proxyTarget,
+          changeOrigin: true,
+        }
+      }
+    },
+    plugins: [
+      react(),
+      mode === "development" && componentTagger(),
+      //analyzer({ openAnalyzer: false}),
+      // viteCompression({ algorithm: 'gzip' }),
+      VitePWA({
+        strategies: 'injectManifest',
+        srcDir: 'src',
+        filename: 'sw.ts',
+        registerType: 'autoUpdate',
+        workbox: {
+          maximumFileSizeToCacheInBytes: 3000000
+        },
+        injectManifest: {
+          maximumFileSizeToCacheInBytes: 3000000
+        },
+        includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
+        manifest: false,
+        devOptions: {
+          enabled: true,
+        },
+      }),
+      {
+        name: 'async-css',
+        enforce: 'post',
+        transformIndexHtml(html: string) {
+          return html.replace(
+            /<link rel="stylesheet"([^>]*?)>/g,
+            '<link rel="stylesheet"$1 media="print" onload="this.media=\'all\'">'
+          );
+        }
+      }
+    ].filter(Boolean),
+    build: {
+      sourcemap: true
+    },
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
+    },
+  };
+});