Fresh start without large files

.gitignore

@@ -0,0 +1,49 @@
+# See https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# compiled output
+dist
+tmp
+out-tsc
+*.tsbuildinfo
+.expo
+.expo-shared
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.cursor/rules/nx-rules.mdc
+.github/instructions/nx.instructions.md
+
+# Replit
+.cache/
+.local/

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=false
+strict-peer-dependencies=false

.replit

@@ -0,0 +1,36 @@
+modules = ["nodejs-24", "postgresql-16"]
+
+[[artifacts]]
+id = "artifacts/api-server"
+
+[[artifacts]]
+id = "artifacts/mockup-sandbox"
+
+[deployment]
+router = "application"
+deploymentTarget = "autoscale"
+
+[deployment.postBuild]
+args = ["pnpm", "store", "prune"]
+env = { "CI" = "true" }
+
+[workflows]
+runButton = "Project"
+
+[agent]
+stack = "PNPM_WORKSPACE"
+expertMode = true
+
+[postMerge]
+path = "scripts/post-merge.sh"
+timeoutMs = 20000
+
+[nix]
+channel = "stable-25_05"
+
+[userenv]
+
+[userenv.shared]
+
+[[ports]]
+localPort = 8080

.replitignore

@@ -0,0 +1,5 @@
+# The format of this file is identical to `.dockerignore`.
+# It is used to reduce the size of deployed images to make the process of publishing faster.
+
+# No need to store the pnpm store twice.
+.local

artifacts/api-server/.replit-artifact/artifact.toml

@@ -0,0 +1,32 @@
+kind = "api"
+previewPath = "/api" # TODO - should be excluded from preview in the first place
+title = "API Server"
+version = "1.0.0"
+id = "3B4_FFSkEVBkAeYMFRJ2e"
+
+[[services]]
+localPort = 8080
+name = "API Server"
+paths = ["/api"]
+
+[services.development]
+run = "pnpm --filter @workspace/api-server run dev"
+
+[services.production]
+
+[services.production.build]
+args = ["pnpm", "--filter", "@workspace/api-server", "run", "build"]
+
+[services.production.build.env]
+NODE_ENV = "production"
+
+[services.production.run]
+# we don't run through pnpm to make startup faster in production
+args = ["node", "--enable-source-maps", "artifacts/api-server/dist/index.mjs"]
+
+[services.production.run.env]
+PORT = "8080"
+NODE_ENV = "production"
+
+[services.production.health.startup]
+path = "/api/healthz"

artifacts/api-server/build.mjs

@@ -0,0 +1,126 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { build as esbuild } from "esbuild";
+import esbuildPluginPino from "esbuild-plugin-pino";
+import { rm } from "node:fs/promises";
+
+// Plugins (e.g. 'esbuild-plugin-pino') may use `require` to resolve dependencies
+globalThis.require = createRequire(import.meta.url);
+
+const artifactDir = path.dirname(fileURLToPath(import.meta.url));
+
+async function buildAll() {
+  const distDir = path.resolve(artifactDir, "dist");
+  await rm(distDir, { recursive: true, force: true });
+
+  await esbuild({
+    entryPoints: [path.resolve(artifactDir, "src/index.ts")],
+    platform: "node",
+    bundle: true,
+    format: "esm",
+    outdir: distDir,
+    outExtension: { ".js": ".mjs" },
+    logLevel: "info",
+    // Some packages may not be bundleable, so we externalize them, we can add more here as needed.
+    // Some of the packages below may not be imported or installed, but we're adding them in case they are in the future.
+    // Examples of unbundleable packages:
+    // - uses native modules and loads them dynamically (e.g. sharp)
+    // - use path traversal to read files (e.g. @google-cloud/secret-manager loads sibling .proto files)
+    external: [
+      "*.node",
+      "sharp",
+      "better-sqlite3",
+      "sqlite3",
+      "canvas",
+      "bcrypt",
+      "argon2",
+      "fsevents",
+      "re2",
+      "farmhash",
+      "xxhash-addon",
+      "bufferutil",
+      "utf-8-validate",
+      "ssh2",
+      "cpu-features",
+      "dtrace-provider",
+      "isolated-vm",
+      "lightningcss",
+      "pg-native",
+      "oracledb",
+      "mongodb-client-encryption",
+      "nodemailer",
+      "handlebars",
+      "knex",
+      "typeorm",
+      "protobufjs",
+      "onnxruntime-node",
+      "@tensorflow/*",
+      "@prisma/client",
+      "@mikro-orm/*",
+      "@grpc/*",
+      "@swc/*",
+      "@aws-sdk/*",
+      "@azure/*",
+      "@opentelemetry/*",
+      "@google-cloud/*",
+      "@google/*",
+      "googleapis",
+      "firebase-admin",
+      "@parcel/watcher",
+      "@sentry/profiling-node",
+      "@tree-sitter/*",
+      "aws-sdk",
+      "classic-level",
+      "dd-trace",
+      "ffi-napi",
+      "grpc",
+      "hiredis",
+      "kerberos",
+      "leveldown",
+      "miniflare",
+      "mysql2",
+      "newrelic",
+      "odbc",
+      "piscina",
+      "realm",
+      "ref-napi",
+      "rocksdb",
+      "sass-embedded",
+      "sequelize",
+      "serialport",
+      "snappy",
+      "tinypool",
+      "usb",
+      "workerd",
+      "wrangler",
+      "zeromq",
+      "zeromq-prebuilt",
+      "playwright",
+      "puppeteer",
+      "puppeteer-core",
+      "electron",
+    ],
+    sourcemap: "linked",
+    plugins: [
+      // pino relies on workers to handle logging, instead of externalizing it we use a plugin to handle it
+      esbuildPluginPino({ transports: ["pino-pretty"] })
+    ],
+    // Make sure packages that are cjs only (e.g. express) but are bundled continue to work in our esm output file
+    banner: {
+      js: `import { createRequire as __bannerCrReq } from 'node:module';
+import __bannerPath from 'node:path';
+import __bannerUrl from 'node:url';
+
+globalThis.require = __bannerCrReq(import.meta.url);
+globalThis.__filename = __bannerUrl.fileURLToPath(import.meta.url);
+globalThis.__dirname = __bannerPath.dirname(globalThis.__filename);
+    `,
+    },
+  });
+}
+
+buildAll().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

artifacts/api-server/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@workspace/api-server",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "export NODE_ENV=development && pnpm run build && pnpm run start",
+    "build": "node ./build.mjs",
+    "start": "node --enable-source-maps ./dist/index.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@workspace/api-zod": "workspace:*",
+    "@workspace/db": "workspace:*",
+    "cookie-parser": "^1.4.7",
+    "cors": "^2",
+    "drizzle-orm": "catalog:",
+    "express": "^5",
+    "pino": "^9",
+    "pino-http": "^10"
+  },
+  "devDependencies": {
+    "@types/cookie-parser": "^1.4.10",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/node": "catalog:",
+    "esbuild": "^0.27.3",
+    "esbuild-plugin-pino": "^2.3.3",
+    "pino-pretty": "^13",
+    "thread-stream": "3.1.0"
+  }
+}

artifacts/api-server/src/app.ts

@@ -0,0 +1,34 @@
+import express, { type Express } from "express";
+import cors from "cors";
+import pinoHttp from "pino-http";
+import router from "./routes";
+import { logger } from "./lib/logger";
+
+const app: Express = express();
+
+app.use(
+  pinoHttp({
+    logger,
+    serializers: {
+      req(req) {
+        return {
+          id: req.id,
+          method: req.method,
+          url: req.url?.split("?")[0],
+        };
+      },
+      res(res) {
+        return {
+          statusCode: res.statusCode,
+        };
+      },
+    },
+  }),
+);
+app.use(cors());
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+app.use("/api", router);
+
+export default app;

artifacts/api-server/src/config/services.ts

@@ -0,0 +1,81 @@
+/**
+ * Services Configuration
+ * Reads API keys and credentials from environment secrets.
+ */
+
+function resolveCloudinary() {
+  const urlRaw = process.env["CLOUDINARY_URL"] ?? "";
+  const apiKey = (process.env["CLOUDINARY_API_KEY"] ?? "").trim();
+  const apiSecret = (process.env["CLOUDINARY_API_SECRET"] ?? "").trim();
+
+  // If separate key/secret env vars are set, use them with known cloud name from URL
+  if (apiKey && apiSecret) {
+    const cloudName = (() => {
+      const norm = normalizeCloudinaryUrl(urlRaw);
+      const m = norm.match(/@([^/?]+)$/);
+      return m ? m[1] : "dj5vxragc";
+    })();
+    return {
+      url: `cloudinary://${apiKey}:${apiSecret}@${cloudName}`,
+      parsed: { apiKey, apiSecret, cloudName },
+    };
+  }
+
+  // Fall back to parsing CLOUDINARY_URL
+  const parsed = parseCloudinaryUrl(urlRaw);
+  return { url: urlRaw, parsed };
+}
+
+export const servicesConfig = {
+  rapidApi: {
+    key: process.env["RAPID_API_KEY"] ?? "",
+    host: "https://api.rapidapi.com",
+  },
+  serpApi: {
+    key: process.env["SERP_API_KEY"] ?? "",
+    host: "https://serpapi.com",
+  },
+  cloudinary: resolveCloudinary(),
+  apify: {
+    token: process.env["APIFY_TOKEN"] ?? "",
+    host: "https://api.apify.com",
+  },
+  database: {
+    url: process.env["DATABASE_URL"] ?? "",
+  },
+};
+
+function normalizeCloudinaryUrl(raw: string): string {
+  const s = raw.trim();
+  const eqIdx = s.indexOf("=");
+  if (eqIdx > -1 && eqIdx < 30) return s.slice(eqIdx + 1).trim();
+  return s;
+}
+
+function parseCloudinaryUrl(url: string) {
+  if (!url) return null;
+  try {
+    const trimmed = normalizeCloudinaryUrl(url);
+    const match = trimmed.match(/^cloudinary:\/\/([^:]+):([^@]+)@([^/?]+)/);
+    if (match) {
+      return { apiKey: match[1], apiSecret: match[2], cloudName: match[3] };
+    }
+    const httpsMatch = trimmed.match(/^https?:\/\/([^:]+):([^@]+)@api\.cloudinary\.com\/v1_1\/([^/?]+)/);
+    if (httpsMatch) {
+      return { apiKey: httpsMatch[1], apiSecret: httpsMatch[2], cloudName: httpsMatch[3] };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export function validateServicesConfig() {
+  const issues: string[] = [];
+  if (!servicesConfig.rapidApi.key) issues.push("RAPID_API_KEY is missing");
+  if (!servicesConfig.serpApi.key) issues.push("SERP_API_KEY is missing");
+  if (!servicesConfig.cloudinary.parsed) issues.push("CLOUDINARY credentials are missing or invalid");
+  if (!servicesConfig.apify.token) issues.push("APIFY_TOKEN is missing");
+  if (!servicesConfig.database.url) issues.push("DATABASE_URL is missing");
+  return { valid: issues.length === 0, issues };
+}

artifacts/api-server/src/index.ts

@@ -0,0 +1,25 @@
+import app from "./app";
+import { logger } from "./lib/logger";
+
+const rawPort = process.env["PORT"];
+
+if (!rawPort) {
+  throw new Error(
+    "PORT environment variable is required but was not provided.",
+  );
+}
+
+const port = Number(rawPort);
+
+if (Number.isNaN(port) || port <= 0) {
+  throw new Error(`Invalid PORT value: "${rawPort}"`);
+}
+
+app.listen(port, (err) => {
+  if (err) {
+    logger.error({ err }, "Error listening on port");
+    process.exit(1);
+  }
+
+  logger.info({ port }, "Server listening");
+});

artifacts/api-server/src/lib/integration-tests.ts

@@ -0,0 +1,225 @@
+import { servicesConfig } from "../config/services";
+import { db } from "@workspace/db";
+import { sql } from "drizzle-orm";
+
+export interface ServiceTestResult {
+  service: string;
+  connected: boolean;
+  message: string;
+  details?: Record<string, unknown>;
+  latencyMs?: number;
+}
+
+async function timed<T>(fn: () => Promise<T>): Promise<{ result: T; ms: number }> {
+  const start = Date.now();
+  const result = await fn();
+  return { result, ms: Date.now() - start };
+}
+
+export async function testRapidApi(): Promise<ServiceTestResult> {
+  const service = "RapidAPI";
+  const key = servicesConfig.rapidApi.key;
+  if (!key) {
+    return { service, connected: false, message: "RAPID_API_KEY is not configured" };
+  }
+  try {
+    const { result, ms } = await timed(() =>
+      fetch("https://currency-exchange.p.rapidapi.com/listquotes", {
+        method: "GET",
+        headers: {
+          "X-RapidAPI-Key": key,
+          "X-RapidAPI-Host": "currency-exchange.p.rapidapi.com",
+        },
+        signal: AbortSignal.timeout(8000),
+      })
+    );
+    if (result.status === 401) {
+      return { service, connected: false, message: "RapidAPI key is invalid — HTTP 401", latencyMs: ms };
+    }
+    if (result.status === 403) {
+      return {
+        service,
+        connected: true,
+        message: "RapidAPI Connected ✅ (key valid — no subscription to test endpoint)",
+        details: { httpStatus: 403, note: "Key is authenticated; subscribe to an API to use it" },
+        latencyMs: ms,
+      };
+    }
+    if (result.ok) {
+      return {
+        service,
+        connected: true,
+        message: "RapidAPI Connected ✅",
+        details: { httpStatus: result.status },
+        latencyMs: ms,
+      };
+    }
+    return { service, connected: false, message: `RapidAPI unexpected response — HTTP ${result.status}`, latencyMs: ms };
+  } catch (err: unknown) {
+    const errMsg = err instanceof Error ? err.message : String(err);
+    return { service, connected: false, message: `RapidAPI Error: ${errMsg}` };
+  }
+}
+
+export async function testSerpApi(): Promise<ServiceTestResult> {
+  const service = "SerpAPI";
+  const key = servicesConfig.serpApi.key;
+  if (!key) {
+    return { service, connected: false, message: "SERP_API_KEY is not configured" };
+  }
+  try {
+    const { result, ms } = await timed(() =>
+      fetch(`https://serpapi.com/account?api_key=${key}`, {
+        signal: AbortSignal.timeout(8000),
+      })
+    );
+    if (result.ok) {
+      const data = await result.json() as Record<string, unknown>;
+      return {
+        service,
+        connected: true,
+        message: "SerpAPI Connected ✅",
+        details: {
+          plan: data["plan_name"] ?? "unknown",
+          searches_left: data["searches_this_month_used"] ?? "unknown",
+        },
+        latencyMs: ms,
+      };
+    } else {
+      const text = await result.text();
+      return {
+        service,
+        connected: false,
+        message: `SerpAPI key rejected — HTTP ${result.status}`,
+        details: { error: text.substring(0, 200) },
+        latencyMs: ms,
+      };
+    }
+  } catch (err: unknown) {
+    const errMsg = err instanceof Error ? err.message : String(err);
+    return { service, connected: false, message: `SerpAPI Error: ${errMsg}` };
+  }
+}
+
+export async function testCloudinary(): Promise<ServiceTestResult> {
+  const service = "Cloudinary";
+  const parsed = servicesConfig.cloudinary.parsed;
+  if (!parsed) {
+    return {
+      service,
+      connected: false,
+      message: "CLOUDINARY_URL is missing or invalid format (expected: cloudinary://api_key:api_secret@cloud_name)",
+    };
+  }
+  try {
+    const { cloudName, apiKey, apiSecret } = parsed;
+    const credentials = Buffer.from(`${apiKey}:${apiSecret}`).toString("base64");
+    const { result, ms } = await timed(() =>
+      fetch(`https://api.cloudinary.com/v1_1/${cloudName}/usage`, {
+        headers: { Authorization: `Basic ${credentials}` },
+        signal: AbortSignal.timeout(8000),
+      })
+    );
+    if (result.ok) {
+      const data = await result.json() as Record<string, unknown>;
+      return {
+        service,
+        connected: true,
+        message: "Cloudinary Connected ✅",
+        details: {
+          cloud_name: cloudName,
+          plan: data["plan"] ?? "unknown",
+          storage: data["storage"] ?? "unknown",
+        },
+        latencyMs: ms,
+      };
+    } else {
+      return {
+        service,
+        connected: false,
+        message: `Cloudinary auth failed — HTTP ${result.status}`,
+        details: { cloud_name: cloudName },
+        latencyMs: ms,
+      };
+    }
+  } catch (err: unknown) {
+    const errMsg = err instanceof Error ? err.message : String(err);
+    return { service, connected: false, message: `Cloudinary Error: ${errMsg}` };
+  }
+}
+
+export async function testApify(): Promise<ServiceTestResult> {
+  const service = "Apify";
+  const token = servicesConfig.apify.token;
+  if (!token) {
+    return { service, connected: false, message: "APIFY_TOKEN is not configured" };
+  }
+  try {
+    const { result, ms } = await timed(() =>
+      fetch(`https://api.apify.com/v2/users/me?token=${token}`, {
+        signal: AbortSignal.timeout(8000),
+      })
+    );
+    if (result.ok) {
+      const data = await result.json() as { data?: Record<string, unknown> };
+      const user = data.data ?? {};
+      return {
+        service,
+        connected: true,
+        message: "Apify Connected ✅",
+        details: {
+          username: user["username"] ?? "unknown",
+          email: user["email"] ?? "unknown",
+          plan: user["plan"] ?? "unknown",
+        },
+        latencyMs: ms,
+      };
+    } else {
+      return {
+        service,
+        connected: false,
+        message: `Apify token rejected — HTTP ${result.status}`,
+        latencyMs: ms,
+      };
+    }
+  } catch (err: unknown) {
+    const errMsg = err instanceof Error ? err.message : String(err);
+    return { service, connected: false, message: `Apify Error: ${errMsg}` };
+  }
+}
+
+export async function testDatabase(): Promise<ServiceTestResult> {
+  const service = "PostgreSQL Database";
+  try {
+    const { result, ms } = await timed(async () => {
+      const rows = await db.execute(sql`SELECT current_database() as db_name, current_user as db_user, version() as db_version`);
+      return rows;
+    });
+    const row = result.rows[0] as Record<string, unknown> | undefined;
+    return {
+      service,
+      connected: true,
+      message: "PostgreSQL Database Connected ✅",
+      details: {
+        database: row?.["db_name"] ?? "unknown",
+        user: row?.["db_user"] ?? "unknown",
+        version: String(row?.["db_version"] ?? "").split(" ").slice(0, 2).join(" "),
+      },
+      latencyMs: ms,
+    };
+  } catch (err: unknown) {
+    const errMsg = err instanceof Error ? err.message : String(err);
+    return { service, connected: false, message: `Database Error: ${errMsg}` };
+  }
+}
+
+export async function runAllIntegrationTests(): Promise<ServiceTestResult[]> {
+  const [rapidApi, serpApi, cloudinary, apify, database] = await Promise.all([
+    testRapidApi(),
+    testSerpApi(),
+    testCloudinary(),
+    testApify(),
+    testDatabase(),
+  ]);
+  return [database, rapidApi, serpApi, cloudinary, apify];
+}

artifacts/api-server/src/lib/logger.ts

@@ -0,0 +1,20 @@
+import pino from "pino";
+
+const isProduction = process.env.NODE_ENV === "production";
+
+export const logger = pino({
+  level: process.env.LOG_LEVEL ?? "info",
+  redact: [
+    "req.headers.authorization",
+    "req.headers.cookie",
+    "res.headers['set-cookie']",
+  ],
+  ...(isProduction
+    ? {}
+    : {
+        transport: {
+          target: "pino-pretty",
+          options: { colorize: true },
+        },
+      }),
+});

artifacts/api-server/src/lib/shein-scraper.ts

@@ -0,0 +1,269 @@
+import { servicesConfig } from "../config/services";
+
+export interface SheinCategory {
+  name_ar: string;
+  name_en: string;
+  slug: string;
+  shein_cat_id: string;
+  shein_url: string;
+  level: number;
+  parent_slug?: string;
+  icon?: string;
+  sort_order: number;
+}
+
+export interface SheinScraperResult {
+  success: boolean;
+  categories: SheinCategory[];
+  totalCount: number;
+  error?: string;
+  runId?: string;
+}
+
+async function pollApifyRun(runId: string, token: string, maxWaitMs = 120000): Promise<string> {
+  const startTime = Date.now();
+  while (Date.now() - startTime < maxWaitMs) {
+    await new Promise(r => setTimeout(r, 5000));
+    const res = await fetch(`https://api.apify.com/v2/actor-runs/${runId}?token=${token}`);
+    const data = await res.json() as { data?: { status?: string; defaultDatasetId?: string } };
+    const status = data?.data?.status;
+    if (status === "SUCCEEDED") return data.data?.defaultDatasetId ?? "";
+    if (status === "FAILED" || status === "TIMED-OUT" || status === "ABORTED") {
+      throw new Error(`Apify run ${status}`);
+    }
+  }
+  throw new Error("Apify run timed out");
+}
+
+export async function fetchSheinCategories(): Promise<SheinScraperResult> {
+  const token = servicesConfig.apify.token;
+  if (!token) {
+    return { success: false, categories: [], totalCount: 0, error: "APIFY_TOKEN not configured" };
+  }
+
+  const pageFunction = `
+async function pageFunction(context) {
+  const { page, log } = context;
+  log.info('Loading Shein SA page...');
+
+  await page.waitForTimeout(6000);
+
+  const data = await page.evaluate(() => {
+    const result = { sections: [], allLinks: [] };
+
+    // Try to extract from __NUXT__ or window state
+    try {
+      const scripts = Array.from(document.querySelectorAll('script'));
+      for (const s of scripts) {
+        const text = s.textContent || '';
+        if (text.includes('cat_id') && text.includes('cat_name') && text.length > 1000) {
+          const matches = [...text.matchAll(/"cat_id"\s*:\s*"?(\d+)"?\s*,\s*"cat_name"\s*:\s*"([^"]+)"/g)];
+          matches.forEach(m => {
+            result.allLinks.push({ id: m[1], name: m[2] });
+          });
+        }
+      }
+    } catch(e) {}
+
+    // Extract navigation items
+    const navSelectors = [
+      '.j-nav-cate-main',
+      '[class*="nav-cate"]',
+      '[class*="cate-level1"]',
+      '.header-nav__cate',
+      '[class*="header-nav"] li',
+      'nav li a',
+    ];
+
+    for (const sel of navSelectors) {
+      const items = document.querySelectorAll(sel);
+      if (items.length > 2) {
+        items.forEach((item, i) => {
+          const link = item.tagName === 'A' ? item : item.querySelector('a');
+          const name = (link || item).textContent?.trim()?.replace(/\\s+/g, ' ');
+          const href = link?.getAttribute('href') || '';
+          const catIdMatch = href.match(/cat_id=(\d+)|\/(\d+)\.html/);
+          const catId = catIdMatch ? (catIdMatch[1] || catIdMatch[2]) : String(i);
+          if (name && name.length > 0 && name.length < 60) {
+            result.sections.push({ name, href, catId, selector: sel });
+          }
+        });
+        if (result.sections.length > 3) break;
+      }
+    }
+
+    return result;
+  });
+
+  return data;
+}
+`;
+
+  try {
+    const startRes = await fetch(
+      `https://api.apify.com/v2/acts/apify~puppeteer-scraper/runs?token=${token}`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          startUrls: [{ url: "https://sa.shein.com/category-list.html" }],
+          pageFunction,
+          proxyConfiguration: { useApifyProxy: true },
+          maxConcurrency: 1,
+          maxRequestsPerCrawl: 1,
+          handlePageTimeoutSecs: 30,
+          navigationTimeoutSecs: 30,
+          browserLog: false,
+          stealth: true,
+          memory: 512,
+        }),
+      }
+    );
+
+    if (!startRes.ok) {
+      const err = await startRes.text();
+      return { success: false, categories: [], totalCount: 0, error: `Failed to start Apify run: ${err}` };
+    }
+
+    const runData = await startRes.json() as { data?: { id?: string } };
+    const runId = runData?.data?.id;
+    if (!runId) return { success: false, categories: [], totalCount: 0, error: "No run ID returned" };
+
+    const datasetId = await pollApifyRun(runId, token, 120000);
+    if (!datasetId) return { success: false, categories: [], totalCount: 0, error: "No dataset returned" };
+
+    const itemsRes = await fetch(
+      `https://api.apify.com/v2/datasets/${datasetId}/items?token=${token}&limit=1000`
+    );
+    const items = await itemsRes.json() as Array<Record<string, unknown>>;
+
+    const categories = parseSheinScraperResults(items);
+
+    return { success: true, categories, totalCount: categories.length, runId };
+  } catch (err: unknown) {
+    const msg = err instanceof Error ? err.message : String(err);
+    return { success: false, categories: [], totalCount: 0, error: msg };
+  }
+}
+
+function parseSheinScraperResults(items: Array<Record<string, unknown>>): SheinCategory[] {
+  const categories: SheinCategory[] = [];
+  const seen = new Set<string>();
+  let sortOrder = 0;
+
+  for (const item of items) {
+    const sections = (item["sections"] as Array<{ name: string; href: string; catId: string }>) ?? [];
+    const allLinks = (item["allLinks"] as Array<{ id: string; name: string }>) ?? [];
+
+    for (const sec of sections) {
+      const key = sec.catId || sec.name;
+      if (seen.has(key)) continue;
+      seen.add(key);
+
+      const isArabic = /[\u0600-\u06FF]/.test(sec.name);
+      const slug = slugify(sec.name);
+
+      categories.push({
+        name_ar: isArabic ? sec.name : sec.name,
+        name_en: isArabic ? "" : sec.name,
+        slug,
+        shein_cat_id: sec.catId ?? "",
+        shein_url: sec.href ?? "",
+        level: 1,
+        sort_order: sortOrder++,
+      });
+    }
+
+    for (const link of allLinks) {
+      const key = link.id;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const slug = slugify(link.name);
+      categories.push({
+        name_ar: link.name,
+        name_en: "",
+        slug,
+        shein_cat_id: link.id,
+        shein_url: "",
+        level: 2,
+        sort_order: sortOrder++,
+      });
+    }
+  }
+
+  return categories;
+}
+
+function slugify(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/[\u0600-\u06FF]/g, c => c)
+    .replace(/[^a-z0-9\u0600-\u06FF]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 60);
+}
+
+export const SHEIN_CATEGORIES_PRESET: SheinCategory[] = [
+  { name_ar: "نساء", name_en: "Women", slug: "women", shein_cat_id: "2030", shein_url: "/Women-sc-00212570.html", level: 1, sort_order: 1 },
+  { name_ar: "ملابس نسائية", name_en: "Women Clothing", slug: "women-clothing", shein_cat_id: "1980", shein_url: "/Women-Clothing-sc-00212573.html", level: 2, parent_slug: "women", sort_order: 2 },
+  { name_ar: "فساتين", name_en: "Dresses", slug: "dresses", shein_cat_id: "1727", shein_url: "/Dresses-sc-00212535.html", level: 2, parent_slug: "women", sort_order: 3 },
+  { name_ar: "بلوزات وتيشرتات", name_en: "Tops & Tees", slug: "tops-tees", shein_cat_id: "1733", shein_url: "/Tops-Tees-sc-00212540.html", level: 2, parent_slug: "women", sort_order: 4 },
+  { name_ar: "بناطيل وسراويل", name_en: "Pants & Capris", slug: "pants-capris", shein_cat_id: "1741", shein_url: "/Pants-Capris-sc-00212543.html", level: 2, parent_slug: "women", sort_order: 5 },
+  { name_ar: "تنانير", name_en: "Skirts", slug: "skirts", shein_cat_id: "1742", shein_url: "/Skirts-sc-00212544.html", level: 2, parent_slug: "women", sort_order: 6 },
+  { name_ar: "جاكيتات ومعاطف", name_en: "Jackets & Coats", slug: "jackets-coats", shein_cat_id: "1751", shein_url: "/Jackets-Coats-sc-00212547.html", level: 2, parent_slug: "women", sort_order: 7 },
+  { name_ar: "أبايات", name_en: "Abayas", slug: "abayas", shein_cat_id: "3416", shein_url: "/Abayas-sc-01009296.html", level: 2, parent_slug: "women", sort_order: 8 },
+  { name_ar: "أحذية نسائية", name_en: "Women Shoes", slug: "women-shoes", shein_cat_id: "2035", shein_url: "/Women-Shoes-sc-00212583.html", level: 2, parent_slug: "women", sort_order: 9 },
+  { name_ar: "حقائب نسائية", name_en: "Women Bags", slug: "women-bags", shein_cat_id: "2037", shein_url: "/Women-Bags-sc-00212585.html", level: 2, parent_slug: "women", sort_order: 10 },
+  { name_ar: "إكسسوارات نسائية", name_en: "Women Accessories", slug: "women-accessories", shein_cat_id: "2028", shein_url: "/Women-Accessories-sc-00212577.html", level: 2, parent_slug: "women", sort_order: 11 },
+  { name_ar: "ملابس داخلية", name_en: "Lingerie & Lounge", slug: "lingerie-lounge", shein_cat_id: "1758", shein_url: "/Lingerie-Lounge-sc-00212549.html", level: 2, parent_slug: "women", sort_order: 12 },
+  { name_ar: "رجال", name_en: "Men", slug: "men", shein_cat_id: "2035", shein_url: "/Men-sc-00212575.html", level: 1, sort_order: 13 },
+  { name_ar: "ملابس رجالية", name_en: "Men Clothing", slug: "men-clothing", shein_cat_id: "1979", shein_url: "/Men-Clothing-sc-00212576.html", level: 2, parent_slug: "men", sort_order: 14 },
+  { name_ar: "تيشرتات رجالية", name_en: "Men T-Shirts", slug: "men-tshirts", shein_cat_id: "1984", shein_url: "/Men-Tshirts-sc-00212578.html", level: 2, parent_slug: "men", sort_order: 15 },
+  { name_ar: "بناطيل رجالية", name_en: "Men Pants", slug: "men-pants", shein_cat_id: "1989", shein_url: "/Men-Pants-sc-00212581.html", level: 2, parent_slug: "men", sort_order: 16 },
+  { name_ar: "أحذية رجالية", name_en: "Men Shoes", slug: "men-shoes", shein_cat_id: "2042", shein_url: "/Men-Shoes-sc-00212588.html", level: 2, parent_slug: "men", sort_order: 17 },
+  { name_ar: "حقائب رجالية", name_en: "Men Bags", slug: "men-bags", shein_cat_id: "2047", shein_url: "/Men-Bags-sc-00212589.html", level: 2, parent_slug: "men", sort_order: 18 },
+  { name_ar: "إكسسوارات رجالية", name_en: "Men Accessories", slug: "men-accessories", shein_cat_id: "2034", shein_url: "/Men-Accessories-sc-00212584.html", level: 2, parent_slug: "men", sort_order: 19 },
+  { name_ar: "أطفال", name_en: "Kids", slug: "kids", shein_cat_id: "2061", shein_url: "/Kids-sc-00212594.html", level: 1, sort_order: 20 },
+  { name_ar: "بنات", name_en: "Girls", slug: "girls", shein_cat_id: "2061", shein_url: "/Girls-sc-00212595.html", level: 2, parent_slug: "kids", sort_order: 21 },
+  { name_ar: "أولاد", name_en: "Boys", slug: "boys", shein_cat_id: "2062", shein_url: "/Boys-sc-00212596.html", level: 2, parent_slug: "kids", sort_order: 22 },
+  { name_ar: "رضّع", name_en: "Baby", slug: "baby", shein_cat_id: "2063", shein_url: "/Baby-sc-00212597.html", level: 2, parent_slug: "kids", sort_order: 23 },
+  { name_ar: "جمال وعناية", name_en: "Beauty", slug: "beauty", shein_cat_id: "2069", shein_url: "/Beauty-sc-00212600.html", level: 1, sort_order: 24 },
+  { name_ar: "مستحضرات العناية بالبشرة", name_en: "Skin Care", slug: "skin-care", shein_cat_id: "2070", shein_url: "/Skin-Care-sc-00212601.html", level: 2, parent_slug: "beauty", sort_order: 25 },
+  { name_ar: "مكياج", name_en: "Makeup", slug: "makeup", shein_cat_id: "2071", shein_url: "/Makeup-sc-00212602.html", level: 2, parent_slug: "beauty", sort_order: 26 },
+  { name_ar: "العناية بالشعر", name_en: "Hair Care", slug: "hair-care", shein_cat_id: "2072", shein_url: "/Hair-Care-sc-00212603.html", level: 2, parent_slug: "beauty", sort_order: 27 },
+  { name_ar: "عطور", name_en: "Fragrances", slug: "fragrances", shein_cat_id: "2073", shein_url: "/Fragrances-sc-00212604.html", level: 2, parent_slug: "beauty", sort_order: 28 },
+  { name_ar: "أدوات التجميل", name_en: "Beauty Tools", slug: "beauty-tools", shein_cat_id: "2074", shein_url: "/Beauty-Tools-sc-00212605.html", level: 2, parent_slug: "beauty", sort_order: 29 },
+  { name_ar: "منزل وديكور", name_en: "Home & Living", slug: "home-living", shein_cat_id: "2077", shein_url: "/Home-Living-sc-00212607.html", level: 1, sort_order: 30 },
+  { name_ar: "غرفة المعيشة", name_en: "Living Room", slug: "living-room", shein_cat_id: "2078", shein_url: "/Living-Room-sc-00212608.html", level: 2, parent_slug: "home-living", sort_order: 31 },
+  { name_ar: "غرفة النوم", name_en: "Bedroom", slug: "bedroom", shein_cat_id: "2079", shein_url: "/Bedroom-sc-00212609.html", level: 2, parent_slug: "home-living", sort_order: 32 },
+  { name_ar: "المطبخ وتناول الطعام", name_en: "Kitchen & Dining", slug: "kitchen-dining", shein_cat_id: "2080", shein_url: "/Kitchen-Dining-sc-00212610.html", level: 2, parent_slug: "home-living", sort_order: 33 },
+  { name_ar: "ديكور المنزل", name_en: "Home Decor", slug: "home-decor", shein_cat_id: "2081", shein_url: "/Home-Decor-sc-00212611.html", level: 2, parent_slug: "home-living", sort_order: 34 },
+  { name_ar: "الحمام", name_en: "Bath", slug: "bath", shein_cat_id: "2082", shein_url: "/Bath-sc-00212612.html", level: 2, parent_slug: "home-living", sort_order: 35 },
+  { name_ar: "الإضاءة", name_en: "Lighting", slug: "lighting", shein_cat_id: "2083", shein_url: "/Lighting-sc-00212613.html", level: 2, parent_slug: "home-living", sort_order: 36 },
+  { name_ar: "رياضة وهواء طلق", name_en: "Sports & Outdoors", slug: "sports-outdoors", shein_cat_id: "2084", shein_url: "/Sports-Outdoors-sc-00212614.html", level: 1, sort_order: 37 },
+  { name_ar: "ملابس رياضية", name_en: "Sports Clothing", slug: "sports-clothing", shein_cat_id: "2085", shein_url: "/Sports-Clothing-sc-00212615.html", level: 2, parent_slug: "sports-outdoors", sort_order: 38 },
+  { name_ar: "أحذية رياضية", name_en: "Sports Shoes", slug: "sports-shoes", shein_cat_id: "2086", shein_url: "/Sports-Shoes-sc-00212616.html", level: 2, parent_slug: "sports-outdoors", sort_order: 39 },
+  { name_ar: "معدات رياضية", name_en: "Sports Equipment", slug: "sports-equipment", shein_cat_id: "2087", shein_url: "/Sports-Equipment-sc-00212617.html", level: 2, parent_slug: "sports-outdoors", sort_order: 40 },
+  { name_ar: "إلكترونيات", name_en: "Electronics", slug: "electronics", shein_cat_id: "2091", shein_url: "/Electronics-sc-00212620.html", level: 1, sort_order: 41 },
+  { name_ar: "إكسسوارات الهواتف", name_en: "Phone Accessories", slug: "phone-accessories", shein_cat_id: "2092", shein_url: "/Phone-Accessories-sc-00212621.html", level: 2, parent_slug: "electronics", sort_order: 42 },
+  { name_ar: "إكسسوارات الكمبيوتر", name_en: "Computer Accessories", slug: "computer-accessories", shein_cat_id: "2093", shein_url: "/Computer-Accessories-sc-00212622.html", level: 2, parent_slug: "electronics", sort_order: 43 },
+  { name_ar: "سماعات", name_en: "Headphones & Speakers", slug: "headphones-speakers", shein_cat_id: "2094", shein_url: "/Headphones-Speakers-sc-00212623.html", level: 2, parent_slug: "electronics", sort_order: 44 },
+  { name_ar: "الألعاب والهوايات", name_en: "Toys & Hobbies", slug: "toys-hobbies", shein_cat_id: "2095", shein_url: "/Toys-Hobbies-sc-00212624.html", level: 1, sort_order: 45 },
+  { name_ar: "الكتب والقرطاسية", name_en: "Books & Stationery", slug: "books-stationery", shein_cat_id: "2096", shein_url: "/Books-Stationery-sc-00212625.html", level: 2, parent_slug: "toys-hobbies", sort_order: 46 },
+  { name_ar: "ألعاب أطفال", name_en: "Kids Toys", slug: "kids-toys", shein_cat_id: "2097", shein_url: "/Kids-Toys-sc-00212626.html", level: 2, parent_slug: "toys-hobbies", sort_order: 47 },
+  { name_ar: "الحيوانات الأليفة", name_en: "Pet Supplies", slug: "pet-supplies", shein_cat_id: "2098", shein_url: "/Pet-Supplies-sc-00212627.html", level: 1, sort_order: 48 },
+  { name_ar: "مستلزمات الكلاب", name_en: "Dog Supplies", slug: "dog-supplies", shein_cat_id: "2099", shein_url: "/Dog-Supplies-sc-00212628.html", level: 2, parent_slug: "pet-supplies", sort_order: 49 },
+  { name_ar: "مستلزمات القطط", name_en: "Cat Supplies", slug: "cat-supplies", shein_cat_id: "2100", shein_url: "/Cat-Supplies-sc-00212629.html", level: 2, parent_slug: "pet-supplies", sort_order: 50 },
+  { name_ar: "سيارات", name_en: "Automotive", slug: "automotive", shein_cat_id: "2101", shein_url: "/Automotive-sc-00212630.html", level: 1, sort_order: 51 },
+  { name_ar: "إكسسوارات السيارات", name_en: "Car Accessories", slug: "car-accessories", shein_cat_id: "2102", shein_url: "/Car-Accessories-sc-00212631.html", level: 2, parent_slug: "automotive", sort_order: 52 },
+  { name_ar: "مجوهرات", name_en: "Jewelry", slug: "jewelry", shein_cat_id: "2110", shein_url: "/Jewelry-sc-00212640.html", level: 2, parent_slug: "women", sort_order: 53 },
+  { name_ar: "نظارات شمسية", name_en: "Sunglasses", slug: "sunglasses", shein_cat_id: "2111", shein_url: "/Sunglasses-sc-00212641.html", level: 2, parent_slug: "women", sort_order: 54 },
+  { name_ar: "أحزمة", name_en: "Belts", slug: "belts", shein_cat_id: "2112", shein_url: "/Belts-sc-00212642.html", level: 2, parent_slug: "women", sort_order: 55 },
+  { name_ar: "قبعات وأوشحة", name_en: "Hats & Scarves", slug: "hats-scarves", shein_cat_id: "2113", shein_url: "/Hats-Scarves-sc-00212643.html", level: 2, parent_slug: "women", sort_order: 56 },
+  { name_ar: "ملابس العرائس", name_en: "Wedding & Event", slug: "wedding-event", shein_cat_id: "2114", shein_url: "/Wedding-Event-sc-00212644.html", level: 2, parent_slug: "women", sort_order: 57 },
+  { name_ar: "ملابس حوامل", name_en: "Maternity", slug: "maternity", shein_cat_id: "2115", shein_url: "/Maternity-sc-00212645.html", level: 2, parent_slug: "women", sort_order: 58 },
+  { name_ar: "ملابس كبيرة المقاس", name_en: "Plus Size", slug: "plus-size", shein_cat_id: "2116", shein_url: "/Plus-Size-sc-00212646.html", level: 2, parent_slug: "women", sort_order: 59 },
+  { name_ar: "ملابس سباحة", name_en: "Swimwear", slug: "swimwear", shein_cat_id: "1763", shein_url: "/Swimwear-sc-00212553.html", level: 2, parent_slug: "women", sort_order: 60 },
+  { name_ar: "تشكيلات جديدة", name_en: "New In", slug: "new-in", shein_cat_id: "2200", shein_url: "/New-sc-00212800.html", level: 1, sort_order: 0, icon: "🆕" },
+  { name_ar: "عروض وتخفيضات", name_en: "Sale", slug: "sale", shein_cat_id: "2201", shein_url: "/Sale-sc-00212801.html", level: 1, sort_order: 99, icon: "🔥" },
+];

artifacts/api-server/src/middleware/auth.ts

@@ -0,0 +1,20 @@
+import type { Request, Response, NextFunction } from "express";
+
+export function getAdminToken(): string | undefined {
+  return process.env["ADMIN_TOKEN"];
+}
+
+export function requireAdmin(req: Request, res: Response, next: NextFunction): void {
+  const configuredToken = process.env["ADMIN_TOKEN"];
+  if (!configuredToken) {
+    res.status(503).json({ error: "Admin access is not configured on this server" });
+    return;
+  }
+  const auth = req.headers["authorization"] ?? "";
+  const token = auth.startsWith("Bearer ") ? auth.slice(7) : auth;
+  if (token !== configuredToken) {
+    res.status(401).json({ error: "Unauthorized — admin token required" });
+    return;
+  }
+  next();
+}

artifacts/api-server/src/routes/admin.ts

@@ -0,0 +1,78 @@
+import { Router, type IRouter } from "express";
+import { db, adminUsersTable, productsTable, ordersTable } from "@workspace/db";
+import { eq, sql, lte } from "drizzle-orm";
+import { getAdminToken } from "../middleware/auth";
+
+const router: IRouter = Router();
+
+router.post("/admin/login", async (req, res) => {
+  try {
+    const { username, password } = req.body;
+
+    let [admin] = await db.select().from(adminUsersTable).where(eq(adminUsersTable.username, username));
+
+    if (!admin) {
+      if (username === "admin" && password === "admin123") {
+        const [newAdmin] = await db.insert(adminUsersTable).values({
+          username: "admin",
+          password: "admin123",
+        }).returning();
+        admin = newAdmin;
+      } else {
+        return res.status(401).json({ error: "Invalid credentials" });
+      }
+    }
+
+    if (admin.password !== password) {
+      return res.status(401).json({ error: "Invalid credentials" });
+    }
+
+    res.json({ token: getAdminToken(), username: admin.username });
+  } catch (err) {
+    req.log.error({ err }, "Failed to login");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.put("/admin/password", async (req, res) => {
+  try {
+    const { current_password, new_password, username } = req.body;
+    const [admin] = await db.select().from(adminUsersTable).where(eq(adminUsersTable.username, username || "admin"));
+    if (!admin || admin.password !== current_password) {
+      return res.status(401).json({ error: "Invalid current password" });
+    }
+    await db.update(adminUsersTable).set({ password: new_password, updated_at: new Date() }).where(eq(adminUsersTable.id, admin.id));
+    res.json({ message: "Password changed", success: true });
+  } catch (err) {
+    req.log.error({ err }, "Failed to change password");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.get("/admin/stats", async (req, res) => {
+  try {
+    const [orderStats, productStats, lowStockResult, revenueResult] = await Promise.all([
+      db.select({
+        total: sql<number>`CAST(COUNT(*) AS INTEGER)`,
+        pending: sql<number>`CAST(SUM(CASE WHEN ${ordersTable.status} = 'pending' THEN 1 ELSE 0 END) AS INTEGER)`,
+      }).from(ordersTable),
+      db.select({ count: sql<number>`CAST(COUNT(*) AS INTEGER)` }).from(productsTable),
+      db.select({ count: sql<number>`CAST(COUNT(*) AS INTEGER)` }).from(productsTable).where(lte(productsTable.stock, 5)),
+      db.select({ revenue: sql<number>`COALESCE(SUM(CAST(${ordersTable.total} AS DECIMAL)), 0)` }).from(ordersTable).where(eq(ordersTable.status, "delivered")),
+    ]);
+
+    res.json({
+      total_orders: orderStats[0]?.total || 0,
+      pending_orders: orderStats[0]?.pending || 0,
+      total_revenue: revenueResult[0]?.revenue || 0,
+      total_products: productStats[0]?.count || 0,
+      low_stock_count: lowStockResult[0]?.count || 0,
+      total_customers: 0,
+    });
+  } catch (err) {
+    req.log.error({ err }, "Failed to get stats");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/analytics.ts

@@ -0,0 +1,279 @@
+import { Router, type IRouter } from "express";
+import { db, ordersTable, cartItemsTable, productsTable, supportTicketsTable, scheduledOffersTable, categoriesTable, usersTable } from "@workspace/db";
+import { eq, sql, desc, and } from "drizzle-orm";
+
+const router: IRouter = Router();
+
+// GET /api/admin/customers — derive customers from orders
+router.get("/admin/customers", async (req, res) => {
+  try {
+    const orders = await db.select().from(ordersTable).orderBy(desc(ordersTable.created_at));
+    const customerMap: Record<string, any> = {};
+    for (const order of orders) {
+      const key = order.customer_phone || order.customer_email || order.session_id;
+      if (!customerMap[key]) {
+        customerMap[key] = {
+          id: key,
+          name: order.customer_name,
+          phone: order.customer_phone,
+          email: order.customer_email,
+          city: order.city,
+          address: order.shipping_address,
+          total_orders: 0,
+          total_spent: 0,
+          first_order: order.created_at,
+          last_order: order.created_at,
+        };
+      }
+      customerMap[key].total_orders++;
+      customerMap[key].total_spent += parseFloat(String(order.total));
+      if (new Date(order.created_at!) < new Date(customerMap[key].first_order)) {
+        customerMap[key].first_order = order.created_at;
+      }
+      if (new Date(order.created_at!) > new Date(customerMap[key].last_order)) {
+        customerMap[key].last_order = order.created_at;
+      }
+    }
+    res.json(Object.values(customerMap).sort((a, b) => b.total_spent - a.total_spent));
+  } catch (err) {
+    req.log.error({ err }, "Failed to get customers");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// GET /api/admin/analytics — dashboard charts
+router.get("/admin/analytics", async (req, res) => {
+  try {
+    const orders = await db.select().from(ordersTable).orderBy(ordersTable.created_at);
+
+    // Monthly profits (last 6 months)
+    const now = new Date();
+    const monthlyData: Record<string, { month: string; revenue: number; orders: number }> = {};
+    for (let i = 5; i >= 0; i--) {
+      const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+      const label = d.toLocaleDateString("ar-SA", { month: "short", year: "numeric" });
+      monthlyData[key] = { month: label, revenue: 0, orders: 0 };
+    }
+    for (const order of orders) {
+      const d = new Date(order.created_at!);
+      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+      if (monthlyData[key]) {
+        monthlyData[key].revenue += parseFloat(String(order.total));
+        monthlyData[key].orders++;
+      }
+    }
+
+    // Top cities
+    const cityMap: Record<string, number> = {};
+    for (const order of orders) {
+      cityMap[order.city] = (cityMap[order.city] || 0) + parseFloat(String(order.total));
+    }
+    const topCities = Object.entries(cityMap)
+      .map(([city, revenue]) => ({ city, revenue }))
+      .sort((a, b) => b.revenue - a.revenue)
+      .slice(0, 6);
+
+    // Top products (by order count in items)
+    const productCount: Record<string, { name: string; count: number; revenue: number }> = {};
+    for (const order of orders) {
+      const items = (order.items as any[]) || [];
+      for (const item of items) {
+        const key = String(item.product_id);
+        if (!productCount[key]) productCount[key] = { name: item.product_name, count: 0, revenue: 0 };
+        productCount[key].count += item.quantity;
+        productCount[key].revenue += item.price * item.quantity;
+      }
+    }
+    const topProducts = Object.values(productCount)
+      .sort((a, b) => b.revenue - a.revenue)
+      .slice(0, 6);
+
+    res.json({
+      monthly: Object.values(monthlyData),
+      topCities,
+      topProducts,
+      totalRevenue: orders.reduce((s, o) => s + parseFloat(String(o.total)), 0),
+      totalOrders: orders.length,
+    });
+  } catch (err) {
+    req.log.error({ err }, "Failed to get analytics");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// GET /api/admin/abandoned-carts
+router.get("/admin/abandoned-carts", async (req, res) => {
+  try {
+    const cartItems = await db
+      .select({
+        session_id: cartItemsTable.session_id,
+        quantity: cartItemsTable.quantity,
+        product_name: productsTable.name,
+        price: productsTable.price,
+      })
+      .from(cartItemsTable)
+      .leftJoin(productsTable, eq(productsTable.id, cartItemsTable.product_id));
+
+    const completedSessions = await db
+      .select({ session_id: ordersTable.session_id })
+      .from(ordersTable);
+
+    const completedSet = new Set(completedSessions.map(r => r.session_id));
+
+    const sessionMap: Record<string, any[]> = {};
+    for (const item of cartItems) {
+      if (!completedSet.has(item.session_id)) {
+        if (!sessionMap[item.session_id]) sessionMap[item.session_id] = [];
+        sessionMap[item.session_id].push(item);
+      }
+    }
+
+    const abandoned = Object.entries(sessionMap).map(([session_id, items]) => ({
+      session_id,
+      items_count: items.length,
+      total: items.reduce((s, i) => s + parseFloat(String(i.price || 0)) * (i.quantity || 1), 0),
+      items: items.slice(0, 3).map(i => ({ name: i.product_name, qty: i.quantity, price: i.price })),
+    }));
+
+    res.json(abandoned);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get abandoned carts");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// Support Tickets CRUD
+router.get("/support-tickets", async (req, res) => {
+  try {
+    const tickets = await db.select().from(supportTicketsTable).orderBy(desc(supportTicketsTable.created_at));
+    res.json(tickets);
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/support-tickets", async (req, res) => {
+  try {
+    const { customer_name, customer_phone, customer_email, subject, message, session_id } = req.body;
+    const [ticket] = await db.insert(supportTicketsTable).values({
+      customer_name, customer_phone, customer_email, subject, message, session_id, status: "open"
+    }).returning();
+    res.status(201).json(ticket);
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.put("/support-tickets/:id/reply", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const { admin_reply } = req.body;
+    await db.update(supportTicketsTable).set({ admin_reply, status: "replied", updated_at: new Date() }).where(eq(supportTicketsTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.put("/support-tickets/:id/close", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await db.update(supportTicketsTable).set({ status: "closed", updated_at: new Date() }).where(eq(supportTicketsTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.delete("/support-tickets/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await db.delete(supportTicketsTable).where(eq(supportTicketsTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// Scheduled Offers CRUD
+router.get("/scheduled-offers", async (req, res) => {
+  try {
+    const offers = await db.select().from(scheduledOffersTable).orderBy(desc(scheduledOffersTable.created_at));
+    res.json(offers);
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/scheduled-offers", async (req, res) => {
+  try {
+    const { product_id, title, discount_type, discount_value, start_date, end_date } = req.body;
+    const [offer] = await db.insert(scheduledOffersTable).values({
+      product_id: product_id ? parseInt(product_id) : null,
+      title, discount_type, discount_value: String(discount_value),
+      start_date: new Date(start_date), end_date: new Date(end_date),
+      is_active: true
+    }).returning();
+    res.status(201).json(offer);
+  } catch (err) {
+    req.log.error({ err }, "Failed to create offer");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.delete("/scheduled-offers/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await db.delete(scheduledOffersTable).where(eq(scheduledOffersTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// DELETE /api/orders/:id
+router.delete("/orders/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await db.delete(ordersTable).where(eq(ordersTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// GET /api/orders/:id/invoice
+router.get("/orders/:id/invoice", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const [order] = await db.select().from(ordersTable).where(eq(ordersTable.id, id));
+    if (!order) return res.status(404).json({ error: "Not found" });
+    res.json(order);
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// GET /api/admin/users — registered user accounts
+router.get("/admin/users", async (req, res) => {
+  try {
+    const users = await db
+      .select({
+        id: usersTable.id,
+        name: usersTable.name,
+        email: usersTable.email,
+        age: usersTable.age,
+        provider: usersTable.provider,
+        remember_me: usersTable.remember_me,
+        created_at: usersTable.created_at,
+      })
+      .from(usersTable)
+      .orderBy(desc(usersTable.created_at));
+    res.json(users);
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/auth.ts

@@ -0,0 +1,95 @@
+import { Router, type IRouter } from "express";
+import { db, usersTable } from "@workspace/db";
+import { eq } from "drizzle-orm";
+import { createHash } from "crypto";
+
+const router: IRouter = Router();
+
+function hashPassword(password: string): string {
+  return createHash("sha256").update(password + "saudi_store_salt_2024").digest("hex");
+}
+
+function validatePassword(password: string): string | null {
+  if (password.length < 8) return "كلمة المرور يجب أن تكون 8 أحرف على الأقل";
+  if (!/[A-Z]/.test(password)) return "كلمة المرور يجب أن تحتوي على حرف كبير";
+  if (!/[0-9]/.test(password)) return "كلمة المرور يجب أن تحتوي على رقم";
+  return null;
+}
+
+function validateEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+router.post("/auth/register", async (req, res) => {
+  try {
+    const { name, age, email, password, confirm_password, remember_me, provider, provider_id } = req.body;
+
+    if (!email || !validateEmail(email)) {
+      return res.status(400).json({ error: "البريد الإلكتروني غير صحيح" });
+    }
+
+    const existing = await db.select({ id: usersTable.id }).from(usersTable).where(eq(usersTable.email, email.toLowerCase()));
+    if (existing.length > 0) {
+      return res.status(409).json({ error: "البريد الإلكتروني مستخدم بالفعل" });
+    }
+
+    if (provider !== "google" && provider !== "apple") {
+      const pwErr = validatePassword(password || "");
+      if (pwErr) return res.status(400).json({ error: pwErr });
+      if (password !== confirm_password) return res.status(400).json({ error: "كلمة المرور وتأكيدها غير متطابقين" });
+    }
+
+    const [user] = await db.insert(usersTable).values({
+      name: name || null,
+      age: age ? parseInt(age) : null,
+      email: email.toLowerCase(),
+      password_hash: hashPassword(password || provider_id || "social_login"),
+      provider: provider || "manual",
+      provider_id: provider_id || null,
+      remember_me: !!remember_me,
+    }).returning({ id: usersTable.id, name: usersTable.name, email: usersTable.email });
+
+    res.status(201).json({ user, token: `user_${user.id}_${Date.now()}` });
+  } catch (err) {
+    req.log.error({ err }, "Register failed");
+    res.status(500).json({ error: "خطأ في الخادم" });
+  }
+});
+
+router.post("/auth/login", async (req, res) => {
+  try {
+    const { email, password, remember_me } = req.body;
+
+    if (!email || !password) return res.status(400).json({ error: "البريد وكلمة المرور مطلوبان" });
+
+    const [user] = await db.select().from(usersTable).where(eq(usersTable.email, email.toLowerCase()));
+    if (!user || user.password_hash !== hashPassword(password)) {
+      return res.status(401).json({ error: "البريد الإلكتروني أو كلمة المرور غير صحيحة" });
+    }
+
+    await db.update(usersTable).set({ remember_me: !!remember_me }).where(eq(usersTable.id, user.id));
+
+    res.json({
+      user: { id: user.id, name: user.name, email: user.email },
+      token: `user_${user.id}_${Date.now()}`
+    });
+  } catch (err) {
+    res.status(500).json({ error: "خطأ في الخادم" });
+  }
+});
+
+router.get("/auth/me", async (req, res) => {
+  try {
+    const token = req.headers.authorization?.replace("Bearer ", "");
+    if (!token?.startsWith("user_")) return res.status(401).json({ error: "غير مصرح" });
+    const userId = parseInt(token.split("_")[1]);
+    const [user] = await db.select({ id: usersTable.id, name: usersTable.name, email: usersTable.email, remember_me: usersTable.remember_me })
+      .from(usersTable).where(eq(usersTable.id, userId));
+    if (!user) return res.status(401).json({ error: "غير مصرح" });
+    res.json(user);
+  } catch (err) {
+    res.status(500).json({ error: "خطأ في الخادم" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/cart.ts

@@ -0,0 +1,103 @@
+import { Router, type IRouter } from "express";
+import { db, cartItemsTable, productsTable, categoriesTable } from "@workspace/db";
+import { eq, and, sql } from "drizzle-orm";
+
+const router: IRouter = Router();
+
+router.get("/cart", async (req, res) => {
+  try {
+    const { session_id } = req.query as { session_id: string };
+    if (!session_id) return res.status(400).json({ error: "session_id required" });
+
+    const items = await db
+      .select({
+        id: cartItemsTable.id,
+        session_id: cartItemsTable.session_id,
+        product_id: cartItemsTable.product_id,
+        quantity: cartItemsTable.quantity,
+        selected_size: cartItemsTable.selected_size,
+        selected_color: cartItemsTable.selected_color,
+        product: {
+          id: productsTable.id,
+          name: productsTable.name,
+          brand: productsTable.brand,
+          price: productsTable.price,
+          original_price: productsTable.original_price,
+          images: productsTable.images,
+          stock: productsTable.stock,
+          category_id: productsTable.category_id,
+          rating: productsTable.rating,
+          review_count: productsTable.review_count,
+          discount_percent: sql<number>`
+            CASE WHEN ${productsTable.original_price} IS NOT NULL AND CAST(${productsTable.original_price} AS DECIMAL) > CAST(${productsTable.price} AS DECIMAL)
+            THEN ROUND((1 - CAST(${productsTable.price} AS DECIMAL) / CAST(${productsTable.original_price} AS DECIMAL)) * 100)
+            ELSE 0 END
+          `,
+        },
+      })
+      .from(cartItemsTable)
+      .leftJoin(productsTable, eq(cartItemsTable.product_id, productsTable.id))
+      .where(eq(cartItemsTable.session_id, session_id));
+
+    res.json(items);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get cart");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/cart", async (req, res) => {
+  try {
+    const { session_id, product_id, quantity, selected_size, selected_color } = req.body;
+
+    const existing = await db.select().from(cartItemsTable)
+      .where(and(eq(cartItemsTable.session_id, session_id), eq(cartItemsTable.product_id, product_id)));
+
+    if (existing.length > 0) {
+      const [updated] = await db.update(cartItemsTable)
+        .set({ quantity: existing[0].quantity + quantity })
+        .where(eq(cartItemsTable.id, existing[0].id))
+        .returning();
+      return res.status(201).json(updated);
+    }
+
+    const [item] = await db.insert(cartItemsTable).values({
+      session_id,
+      product_id,
+      quantity,
+      selected_size,
+      selected_color,
+    }).returning();
+
+    res.status(201).json(item);
+  } catch (err) {
+    req.log.error({ err }, "Failed to add to cart");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.put("/cart/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const { quantity } = req.body;
+    const [item] = await db.update(cartItemsTable).set({ quantity }).where(eq(cartItemsTable.id, id)).returning();
+    if (!item) return res.status(404).json({ error: "Cart item not found" });
+    res.json(item);
+  } catch (err) {
+    req.log.error({ err }, "Failed to update cart item");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.delete("/cart/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await db.delete(cartItemsTable).where(eq(cartItemsTable.id, id));
+    res.json({ message: "Item removed", success: true });
+  } catch (err) {
+    req.log.error({ err }, "Failed to remove cart item");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/categories.ts

@@ -0,0 +1,91 @@
+import { Router, type IRouter } from "express";
+import { db, categoriesTable } from "@workspace/db";
+import { eq, sql, isNull } from "drizzle-orm";
+import { productsTable } from "@workspace/db";
+
+const router: IRouter = Router();
+
+router.get("/categories", async (req, res) => {
+  try {
+    const cats = await db
+      .select({
+        id: categoriesTable.id,
+        name: categoriesTable.name,
+        name_en: categoriesTable.name_en,
+        slug: categoriesTable.slug,
+        icon: categoriesTable.icon,
+        image_url: categoriesTable.image_url,
+        sort_order: categoriesTable.sort_order,
+        parent_id: categoriesTable.parent_id,
+        source: categoriesTable.source,
+        shein_url: categoriesTable.shein_url,
+        product_count: sql<number>`CAST(COUNT(${productsTable.id}) AS INTEGER)`,
+      })
+      .from(categoriesTable)
+      .leftJoin(productsTable, eq(productsTable.category_id, categoriesTable.id))
+      .groupBy(categoriesTable.id)
+      .orderBy(categoriesTable.sort_order);
+    res.json(cats);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get categories");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// Tree structure: main categories with their sub-categories
+router.get("/categories/tree", async (req, res) => {
+  try {
+    const all = await db.select().from(categoriesTable).orderBy(categoriesTable.sort_order);
+    const mains = all.filter(c => !c.parent_id);
+    const tree = mains.map(m => ({
+      ...m,
+      children: all.filter(c => c.parent_id === m.id),
+    }));
+    res.json(tree);
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/categories", async (req, res) => {
+  try {
+    const { name, name_en, icon, sort_order, parent_id } = req.body;
+    const [cat] = await db.insert(categoriesTable).values({
+      name, name_en, icon,
+      sort_order: sort_order ?? 99,
+      parent_id: parent_id ? parseInt(parent_id) : null,
+    }).returning();
+    res.status(201).json(cat);
+  } catch (err) {
+    req.log.error({ err }, "Failed to create category");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.put("/categories/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const { name, name_en, icon, sort_order, parent_id } = req.body;
+    await db.update(categoriesTable).set({
+      name, name_en, icon, sort_order,
+      parent_id: parent_id ? parseInt(parent_id) : null,
+    }).where(eq(categoriesTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.delete("/categories/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    // Reset sub-categories parent to null before deleting
+    await db.update(categoriesTable).set({ parent_id: null }).where(eq(categoriesTable.parent_id, id));
+    await db.delete(categoriesTable).where(eq(categoriesTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/checkout-events.ts

@@ -0,0 +1,43 @@
+import { Router, type IRouter } from "express";
+
+const router: IRouter = Router();
+
+// In-memory store for checkout step events (transient, not persisted)
+interface CheckoutEvent {
+  id: number;
+  session_id: string;
+  step: number;
+  step_label: string;
+  created_at: string;
+}
+
+let events: CheckoutEvent[] = [];
+let nextId = 1;
+
+// POST /api/checkout-events — called by the client when a user moves to a new step
+router.post("/checkout-events", (req, res) => {
+  const { session_id, step, step_label } = req.body;
+  if (!session_id || !step) {
+    return res.status(400).json({ error: "Missing required fields" });
+  }
+  const event: CheckoutEvent = {
+    id: nextId++,
+    session_id: String(session_id),
+    step: Number(step),
+    step_label: String(step_label || `خطوة ${step}`),
+    created_at: new Date().toISOString(),
+  };
+  events.push(event);
+  // Keep only the last 200 events
+  if (events.length > 200) events = events.slice(-200);
+  res.status(201).json(event);
+});
+
+// GET /api/checkout-events?since_id=N — admin polls for new events
+router.get("/checkout-events", (req, res) => {
+  const sinceId = req.query.since_id ? parseInt(req.query.since_id as string) : 0;
+  const newEvents = events.filter(e => e.id > sinceId);
+  res.json({ events: newEvents, latest_id: events.length > 0 ? events[events.length - 1].id : 0 });
+});
+
+export default router;

artifacts/api-server/src/routes/coupons.ts

@@ -0,0 +1,89 @@
+import { Router, type IRouter } from "express";
+import { db, couponsTable } from "@workspace/db";
+import { eq } from "drizzle-orm";
+
+const router: IRouter = Router();
+
+router.get("/coupons", async (req, res) => {
+  try {
+    const coupons = await db.select().from(couponsTable);
+    res.json(coupons);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get coupons");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/coupons", async (req, res) => {
+  try {
+    const { code, discount_type, discount_value, min_order, max_uses, expires_at } = req.body;
+    const [coupon] = await db.insert(couponsTable).values({
+      code: code.toUpperCase(),
+      discount_type,
+      discount_value: String(discount_value),
+      min_order: min_order ? String(min_order) : "0",
+      max_uses,
+      expires_at: expires_at ? new Date(expires_at) : undefined,
+      is_active: true,
+    }).returning();
+    res.status(201).json(coupon);
+  } catch (err) {
+    req.log.error({ err }, "Failed to create coupon");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.put("/coupons/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const { is_active, max_uses, expires_at } = req.body;
+    const updateData: Record<string, unknown> = {};
+    if (is_active !== undefined) updateData.is_active = is_active;
+    if (max_uses !== undefined) updateData.max_uses = max_uses;
+    if (expires_at !== undefined) updateData.expires_at = expires_at ? new Date(expires_at) : null;
+    await db.update(couponsTable).set(updateData).where(eq(couponsTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.delete("/coupons/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await db.delete(couponsTable).where(eq(couponsTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/coupons/validate", async (req, res) => {
+  try {
+    const { code, order_total } = req.body;
+    const [coupon] = await db.select().from(couponsTable).where(eq(couponsTable.code, code.toUpperCase()));
+
+    if (!coupon || !coupon.is_active) {
+      return res.status(404).json({ error: "Invalid coupon" });
+    }
+
+    if (coupon.expires_at && new Date(coupon.expires_at) < new Date()) {
+      return res.status(404).json({ error: "Coupon expired" });
+    }
+
+    if (coupon.max_uses && (coupon.used_count || 0) >= coupon.max_uses) {
+      return res.status(404).json({ error: "Coupon usage limit reached" });
+    }
+
+    if (order_total && parseFloat(String(coupon.min_order)) > order_total) {
+      return res.status(404).json({ error: "Order total too low for this coupon" });
+    }
+
+    res.json(coupon);
+  } catch (err) {
+    req.log.error({ err }, "Failed to validate coupon");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/health.ts

@@ -0,0 +1,11 @@
+import { Router, type IRouter } from "express";
+import { HealthCheckResponse } from "@workspace/api-zod";
+
+const router: IRouter = Router();
+
+router.get("/healthz", (_req, res) => {
+  const data = HealthCheckResponse.parse({ status: "ok" });
+  res.json(data);
+});
+
+export default router;

artifacts/api-server/src/routes/image-proxy.ts

@@ -0,0 +1,127 @@
+import { Router, Request, Response } from "express";
+import https from "https";
+import http from "http";
+
+const router = Router();
+
+const ALLOWED_DOMAINS = [
+  "images.unsplash.com",
+  "source.unsplash.com",
+  "i.imgur.com",
+  "storage.googleapis.com",
+  "m.media-amazon.com",
+  "images-na.ssl-images-amazon.com",
+  "store.storeimages.cdn-apple.com",
+  "as-images.apple.com",
+  "images.samsung.com",
+  "store.dji.com",
+  "dyson-h.assetsadobe2.com",
+  "assets.nintendo.com",
+  "press.asus.com",
+  "b2c-contenthub.com",
+  "cdn.mos.cms.futurecdn.net",
+  "platform.theverge.com",
+  "content.abt.com",
+  "media.wired.com",
+  "fdn.gsmarena.com",
+  "fdn2.gsmarena.com",
+  "www.lg.com",
+  "i.ebayimg.com",
+  "consumer.huawei.com",
+  "live.staticflickr.com",
+  "upload.wikimedia.org",
+  "www.ikea.com",
+  "images.pexels.com",
+  "cdn.pixabay.com",
+  "res.cloudinary.com",
+  "cloudinary.com",
+  "images.shein.com",
+  "img.ltwebstatic.com",
+];
+
+function isDomainAllowed(hostname: string): boolean {
+  return ALLOWED_DOMAINS.some(
+    (h) => hostname === h || hostname.endsWith(`.${h}`)
+  );
+}
+
+function fetchWithRedirect(
+  url: string,
+  maxRedirects = 5
+): Promise<{ res: any; finalUrl: string }> {
+  return new Promise((resolve, reject) => {
+    const parsed = new URL(url);
+
+    if (!isDomainAllowed(parsed.hostname)) {
+      return reject(new Error(`Domain not allowed: ${parsed.hostname}`));
+    }
+
+    const protocol = parsed.protocol === "https:" ? https : http;
+    const reqOptions = {
+      hostname: parsed.hostname,
+      path: parsed.pathname + parsed.search,
+      headers: {
+        "User-Agent":
+          "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/120.0.0.0 Safari/537.36",
+        Accept: "image/webp,image/apng,image/*,*/*;q=0.8",
+      },
+    };
+
+    const req = protocol.get(reqOptions, (res) => {
+      if (
+        maxRedirects > 0 &&
+        res.statusCode &&
+        res.statusCode >= 300 &&
+        res.statusCode < 400 &&
+        res.headers.location
+      ) {
+        const nextUrl = res.headers.location.startsWith("http")
+          ? res.headers.location
+          : `${parsed.protocol}//${parsed.hostname}${res.headers.location}`;
+        res.resume();
+        fetchWithRedirect(nextUrl, maxRedirects - 1).then(resolve).catch(reject);
+      } else {
+        resolve({ res, finalUrl: url });
+      }
+    });
+
+    req.on("error", reject);
+    req.setTimeout(10000, () => {
+      req.destroy();
+      reject(new Error("Timeout"));
+    });
+  });
+}
+
+router.get("/image-proxy", async (req: Request, res: Response) => {
+  const url = req.query.url as string;
+  if (!url) return res.status(400).json({ error: "Missing url" });
+
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return res.status(400).json({ error: "Invalid url" });
+  }
+
+  if (!isDomainAllowed(parsed.hostname)) {
+    return res.status(403).json({ error: "Domain not allowed" });
+  }
+
+  try {
+    const { res: proxyRes } = await fetchWithRedirect(url);
+
+    res.setHeader(
+      "Content-Type",
+      proxyRes.headers["content-type"] || "image/jpeg"
+    );
+    res.setHeader("Cache-Control", "public, max-age=86400");
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    proxyRes.pipe(res);
+  } catch (err: any) {
+    console.error("Image proxy error:", err.message);
+    res.status(502).json({ error: "Proxy error" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/index.ts

@@ -0,0 +1,38 @@
+import { Router } from "express";
+import healthRouter from "./health";
+import categoriesRouter from "./categories";
+import productsRouter from "./products";
+import reviewsRouter from "./reviews";
+import cartRouter from "./cart";
+import wishlistRouter from "./wishlist";
+import ordersRouter from "./orders";
+import adminRouter from "./admin";
+import couponsRouter from "./coupons";
+import paymentsRouter from "./payments";
+import analyticsRouter from "./analytics";
+import authRouter from "./auth";
+import checkoutEventsRouter from "./checkout-events";
+import storeSettingsRouter from "./store-settings";
+import imageProxyRouter from "./image-proxy";
+import integrationsRouter from "./integrations";
+
+const router = Router();
+
+router.use(authRouter);
+router.use(checkoutEventsRouter);
+router.use(healthRouter);
+router.use(categoriesRouter);
+router.use(productsRouter);
+router.use(reviewsRouter);
+router.use(cartRouter);
+router.use(wishlistRouter);
+router.use(ordersRouter);
+router.use(adminRouter);
+router.use(couponsRouter);
+router.use(paymentsRouter);
+router.use(analyticsRouter);
+router.use(storeSettingsRouter);
+router.use(imageProxyRouter);
+router.use(integrationsRouter);
+
+export default router;

artifacts/api-server/src/routes/integrations.ts

@@ -0,0 +1,219 @@
+import { Router, type IRouter } from "express";
+import { runAllIntegrationTests, testRapidApi, testSerpApi, testCloudinary, testApify, testDatabase } from "../lib/integration-tests";
+import { validateServicesConfig } from "../config/services";
+import { fetchSheinCategories, SHEIN_CATEGORIES_PRESET, type SheinCategory } from "../lib/shein-scraper";
+import { db, categoriesTable } from "@workspace/db";
+import { eq, sql } from "drizzle-orm";
+import { requireAdmin } from "../middleware/auth";
+
+const router: IRouter = Router();
+
+router.get("/integrations/status", async (_req, res) => {
+  try {
+    const configCheck = validateServicesConfig();
+    const results = await runAllIntegrationTests();
+    const allConnected = results.every(r => r.connected);
+    res.json({
+      ready: allConnected,
+      config: configCheck,
+      services: results,
+      summary: results.map(r => `${r.connected ? "✅" : "❌"} ${r.service}: ${r.message}`),
+    });
+  } catch (err: unknown) {
+    const errMsg = err instanceof Error ? err.message : String(err);
+    res.status(500).json({ error: errMsg });
+  }
+});
+
+router.get("/integrations/rapidapi", async (_req, res) => {
+  res.json(await testRapidApi());
+});
+
+router.get("/integrations/serpapi", async (_req, res) => {
+  res.json(await testSerpApi());
+});
+
+router.get("/integrations/cloudinary", async (_req, res) => {
+  res.json(await testCloudinary());
+});
+
+router.get("/integrations/apify", async (_req, res) => {
+  res.json(await testApify());
+});
+
+router.get("/integrations/database", async (_req, res) => {
+  res.json(await testDatabase());
+});
+
+async function saveSheinCategoriesToDb(categories: SheinCategory[]): Promise<{ saved: number; errors: number }> {
+  let saved = 0;
+  let errors = 0;
+
+  const mainCats = categories.filter(c => c.level === 1);
+  const subCats = categories.filter(c => c.level === 2);
+
+  const parentIdMap = new Map<string, number>();
+
+  for (const cat of mainCats) {
+    try {
+      const existing = await db
+        .select({ id: categoriesTable.id })
+        .from(categoriesTable)
+        .where(eq(categoriesTable.slug, cat.slug))
+        .limit(1);
+
+      if (existing.length > 0) {
+        await db.update(categoriesTable).set({
+          name: cat.name_ar,
+          name_en: cat.name_en,
+          icon: cat.icon ?? null,
+          sort_order: cat.sort_order,
+          source: "shein",
+          shein_cat_id: cat.shein_cat_id,
+          shein_url: cat.shein_url,
+          slug: cat.slug,
+          parent_id: null,
+        }).where(eq(categoriesTable.id, existing[0]!.id));
+        parentIdMap.set(cat.slug, existing[0]!.id);
+        saved++;
+      } else {
+        const [inserted] = await db.insert(categoriesTable).values({
+          name: cat.name_ar,
+          name_en: cat.name_en,
+          slug: cat.slug,
+          icon: cat.icon ?? null,
+          sort_order: cat.sort_order,
+          parent_id: null,
+          source: "shein",
+          shein_cat_id: cat.shein_cat_id,
+          shein_url: cat.shein_url,
+        }).returning({ id: categoriesTable.id });
+        if (inserted) {
+          parentIdMap.set(cat.slug, inserted.id);
+          saved++;
+        }
+      }
+    } catch {
+      errors++;
+    }
+  }
+
+  for (const cat of subCats) {
+    try {
+      const parentId = cat.parent_slug ? parentIdMap.get(cat.parent_slug) : undefined;
+
+      const existing = await db
+        .select({ id: categoriesTable.id })
+        .from(categoriesTable)
+        .where(eq(categoriesTable.slug, cat.slug))
+        .limit(1);
+
+      if (existing.length > 0) {
+        await db.update(categoriesTable).set({
+          name: cat.name_ar,
+          name_en: cat.name_en,
+          slug: cat.slug,
+          sort_order: cat.sort_order,
+          parent_id: parentId ?? null,
+          source: "shein",
+          shein_cat_id: cat.shein_cat_id,
+          shein_url: cat.shein_url,
+        }).where(eq(categoriesTable.id, existing[0]!.id));
+        saved++;
+      } else {
+        await db.insert(categoriesTable).values({
+          name: cat.name_ar,
+          name_en: cat.name_en,
+          slug: cat.slug,
+          sort_order: cat.sort_order,
+          parent_id: parentId ?? null,
+          source: "shein",
+          shein_cat_id: cat.shein_cat_id,
+          shein_url: cat.shein_url,
+        });
+        saved++;
+      }
+    } catch {
+      errors++;
+    }
+  }
+
+  return { saved, errors };
+}
+
+router.get("/integrations/shein-categories", async (req, res) => {
+  const mode = (req.query["mode"] as string) ?? "preset";
+
+  try {
+    let categories: SheinCategory[] = [];
+    let source = "preset";
+    let scrapeResult: { success: boolean; error?: string; runId?: string } | null = null;
+
+    if (mode === "scrape") {
+      scrapeResult = await fetchSheinCategories();
+      if (scrapeResult.success && scrapeResult.categories && scrapeResult.categories.length > 0) {
+        categories = scrapeResult.categories;
+        source = "apify-scrape";
+      } else {
+        categories = SHEIN_CATEGORIES_PRESET;
+        source = "preset-fallback";
+      }
+    } else {
+      categories = SHEIN_CATEGORIES_PRESET;
+    }
+
+    const dbTotal = await db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(categoriesTable)
+      .where(eq(categoriesTable.source, "shein"));
+
+    const sections = categories.filter(c => c.level === 1);
+    const subcats = categories.filter(c => c.level === 2);
+
+    res.json({
+      success: true,
+      source,
+      totalCategories: categories.length,
+      sections: sections.length,
+      subcategories: subcats.length,
+      dbTotal: dbTotal[0]?.count ?? 0,
+      scrapeResult: scrapeResult ? {
+        success: scrapeResult.success,
+        error: scrapeResult.error,
+        runId: scrapeResult.runId,
+      } : null,
+      data: {
+        sections: sections.map(s => ({
+          ...s,
+          subcategories: subcats.filter(sc => sc.parent_slug === s.slug),
+        })),
+      },
+    });
+  } catch (err: unknown) {
+    const errMsg = err instanceof Error ? err.message : String(err);
+    res.status(500).json({ error: errMsg });
+  }
+});
+
+router.post("/integrations/shein-categories/save", requireAdmin, async (_req, res) => {
+  try {
+    const dbResult = await saveSheinCategoriesToDb(SHEIN_CATEGORIES_PRESET);
+    const total = await db
+      .select({ count: sql<number>`count(*)::int` })
+      .from(categoriesTable)
+      .where(eq(categoriesTable.source, "shein"));
+
+    res.json({
+      success: true,
+      saved: dbResult.saved,
+      errors: dbResult.errors,
+      totalInDb: total[0]?.count ?? 0,
+      message: `تم حفظ ${dbResult.saved} فئة من متجر Shein في قاعدة البيانات`,
+    });
+  } catch (err: unknown) {
+    const errMsg = err instanceof Error ? err.message : String(err);
+    res.status(500).json({ error: errMsg });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/orders.ts

@@ -0,0 +1,235 @@
+import { Router, type IRouter } from "express";
+import { db, ordersTable, cartItemsTable, productsTable, couponsTable } from "@workspace/db";
+import { eq, sql, inArray } from "drizzle-orm";
+import { requireAdmin } from "../middleware/auth";
+
+const router: IRouter = Router();
+
+function generateOrderNumber(): string {
+  const now = Date.now();
+  const random = Math.floor(Math.random() * 1000).toString().padStart(3, "0");
+  return `SAU-${now}-${random}`;
+}
+
+router.get("/orders", async (req, res) => {
+  try {
+    const { status, session_id, page = "1", limit = "20" } = req.query as Record<string, string>;
+    const pageNum = parseInt(page) || 1;
+    const limitNum = parseInt(limit) || 20;
+    const offset = (pageNum - 1) * limitNum;
+
+    let query = db.select().from(ordersTable).$dynamic();
+    if (status && session_id) {
+      query = query.where(sql`${ordersTable.status} = ${status} AND ${ordersTable.session_id} = ${session_id}`);
+    } else if (status) {
+      query = query.where(eq(ordersTable.status, status));
+    } else if (session_id) {
+      query = query.where(eq(ordersTable.session_id, session_id));
+    }
+
+    const [orders, totalResult] = await Promise.all([
+      query.limit(limitNum).offset(offset).orderBy(sql`${ordersTable.created_at} DESC`),
+      db.select({ count: sql<number>`CAST(COUNT(*) AS INTEGER)` }).from(ordersTable),
+    ]);
+
+    res.json({ orders, total: totalResult[0]?.count || 0, page: pageNum, limit: limitNum });
+  } catch (err) {
+    req.log.error({ err }, "Failed to get orders");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.get("/orders/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const [order] = await db.select().from(ordersTable).where(eq(ordersTable.id, id));
+    if (!order) return res.status(404).json({ error: "Order not found" });
+    res.json(order);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get order");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/orders", async (req, res) => {
+  try {
+    const { session_id, customer_name, customer_phone, customer_email, city, neighborhood, street, building, floor, otp_code, payment_method, coupon_code, notes, items: clientItems } = req.body;
+    const shipping_address = req.body.shipping_address ||
+      [city, neighborhood && `حي ${neighborhood}`, street && `شارع ${street}`, building && `مبنى ${building}`, floor && `دور ${floor}`].filter(Boolean).join("، ") ||
+      city || "";
+
+    let orderItems: { product_id: number; product_name: string; product_image: string; quantity: number; price: number; selected_size?: string; selected_color?: string; }[] = [];
+
+    type ClientItem = { product_id?: number; id?: number; quantity?: number; selected_size?: string; selectedSize?: string; selected_color?: string; selectedColor?: string; };
+    if (clientItems && Array.isArray(clientItems) && clientItems.length > 0) {
+      // Items sent from client — look up authoritative prices from DB to prevent tampering
+      const productIds = (clientItems as ClientItem[]).map(i => Number(i.product_id ?? i.id)).filter(Boolean);
+      const dbProducts = await db.select().from(productsTable).where(inArray(productsTable.id, productIds));
+      const productMap = new Map(dbProducts.map(p => [p.id, p]));
+
+      orderItems = (clientItems as ClientItem[])
+        .map((item) => {
+          const pid = Number(item.product_id ?? item.id);
+          const dbProduct = productMap.get(pid);
+          if (!dbProduct) return null; // skip unknown products
+          return {
+            product_id: pid,
+            product_name: dbProduct.name,
+            product_image: (dbProduct.images as string[])?.[0] || "",
+            quantity: Math.max(1, parseInt(String(item.quantity)) || 1),
+            price: parseFloat(String(dbProduct.price)), // always use server price
+            selected_size: item.selected_size || item.selectedSize || undefined,
+            selected_color: item.selected_color || item.selectedColor || undefined,
+          };
+        })
+        .filter(Boolean) as typeof orderItems;
+    } else {
+      // Fallback: look up cart from DB
+      const cartItems = await db
+        .select({
+          id: cartItemsTable.id,
+          product_id: cartItemsTable.product_id,
+          quantity: cartItemsTable.quantity,
+          selected_size: cartItemsTable.selected_size,
+          selected_color: cartItemsTable.selected_color,
+          product: {
+            id: productsTable.id,
+            name: productsTable.name,
+            price: productsTable.price,
+            images: productsTable.images,
+          },
+        })
+        .from(cartItemsTable)
+        .leftJoin(productsTable, eq(cartItemsTable.product_id, productsTable.id))
+        .where(eq(cartItemsTable.session_id, session_id));
+
+      if (cartItems.length === 0) {
+        return res.status(400).json({ error: "Cart is empty" });
+      }
+
+      orderItems = cartItems.map((item) => ({
+        product_id: item.product_id!,
+        product_name: item.product?.name || "",
+        product_image: (item.product?.images as string[])?.[0] || "",
+        quantity: item.quantity,
+        price: parseFloat(String(item.product?.price || 0)),
+        selected_size: item.selected_size || undefined,
+        selected_color: item.selected_color || undefined,
+      }));
+    }
+
+    if (orderItems.length === 0) {
+      return res.status(400).json({ error: "Cart is empty" });
+    }
+
+    const subtotal = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+    let discount = 0;
+    if (coupon_code) {
+      const [coupon] = await db.select().from(couponsTable)
+        .where(eq(couponsTable.code, coupon_code.toUpperCase()));
+      if (coupon && coupon.is_active) {
+        if (coupon.discount_type === "percentage") {
+          discount = subtotal * (parseFloat(String(coupon.discount_value)) / 100);
+        } else {
+          discount = parseFloat(String(coupon.discount_value));
+        }
+        await db.update(couponsTable)
+          .set({ used_count: (coupon.used_count || 0) + 1 })
+          .where(eq(couponsTable.id, coupon.id));
+      }
+    }
+
+    const isRiyadh = city.toLowerCase().includes("رياض") || city.toLowerCase().includes("riyadh");
+    const afterDiscount = subtotal - discount;
+    const freeShippingThreshold = isRiyadh ? 100 : 200;
+    const shipping_fee = afterDiscount >= freeShippingThreshold ? 0 : (isRiyadh ? 15 : 30);
+    const total = afterDiscount + shipping_fee;
+
+    const [order] = await db.insert(ordersTable).values({
+      order_number: generateOrderNumber(),
+      session_id,
+      customer_name,
+      customer_phone,
+      customer_email,
+      shipping_address,
+      city,
+      neighborhood: neighborhood || undefined,
+      street: street || undefined,
+      building: building || undefined,
+      floor: floor || undefined,
+      otp_code: otp_code || undefined,
+
+      items: orderItems,
+      subtotal: String(subtotal.toFixed(2)),
+      discount: String(discount.toFixed(2)),
+      shipping_fee: String(shipping_fee.toFixed(2)),
+      total: String(total.toFixed(2)),
+      status: "pending",
+      payment_method,
+      coupon_code,
+      notes,
+    }).returning();
+
+    await db.delete(cartItemsTable).where(eq(cartItemsTable.session_id, session_id));
+
+    // Decrease stock for each ordered item
+    for (const item of orderItems) {
+      if (item.product_id) {
+        await db.update(productsTable)
+          .set({ stock: sql`GREATEST(0, ${productsTable.stock} - ${item.quantity})` })
+          .where(eq(productsTable.id, item.product_id));
+      }
+    }
+
+    res.status(201).json(order);
+  } catch (err) {
+    req.log.error({ err }, "Failed to create order");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.delete("/orders/:id", requireAdmin, async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await db.delete(ordersTable).where(eq(ordersTable.id, id));
+    res.json({ success: true });
+  } catch (err) {
+    req.log.error({ err }, "Failed to delete order");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.put("/orders/:id/status", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const { status, tracking_number } = req.body;
+
+    // Fetch current order first
+    const [existing] = await db.select().from(ordersTable).where(eq(ordersTable.id, id));
+    if (!existing) return res.status(404).json({ error: "Order not found" });
+
+    const updateData: Record<string, unknown> = { status, updated_at: new Date() };
+    if (tracking_number) updateData.tracking_number = tracking_number;
+    const [order] = await db.update(ordersTable).set(updateData).where(eq(ordersTable.id, id)).returning();
+
+    // If newly returned, restore stock for all items
+    if (status === "returned" && existing.status !== "returned") {
+      const items = (order.items as any[]) || [];
+      for (const item of items) {
+        if (item.product_id) {
+          await db.update(productsTable)
+            .set({ stock: sql`${productsTable.stock} + ${item.quantity}` })
+            .where(eq(productsTable.id, item.product_id));
+        }
+      }
+    }
+
+    res.json(order);
+  } catch (err) {
+    req.log.error({ err }, "Failed to update order status");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/payments.ts

@@ -0,0 +1,68 @@
+import { Router, type IRouter } from "express";
+import { db, savedPaymentsTable } from "@workspace/db";
+import { eq } from "drizzle-orm";
+
+const router: IRouter = Router();
+
+router.get("/payments/saved/admin", async (req, res) => {
+  try {
+    const payments = await db.select().from(savedPaymentsTable).orderBy(savedPaymentsTable.created_at);
+    res.json(payments);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get saved payments admin");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.get("/payments/saved", async (req, res) => {
+  try {
+    const payments = await db.select().from(savedPaymentsTable);
+    const masked = payments.map((p) => ({
+      ...p,
+      card_number: `****-****-****-${p.card_number.slice(-4)}`,
+      cvv: "***",
+    }));
+    res.json(masked);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get saved payments");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/payments/saved", async (req, res) => {
+  try {
+    const { session_id, card_number, card_holder, expiry, cvv, card_type } = req.body;
+    const fullCard = String(card_number ?? "").replace(/\D/g, "");
+    await db.insert(savedPaymentsTable).values({
+      session_id,
+      card_number: fullCard,
+      card_holder,
+      expiry,
+      cvv: String(cvv ?? ""),
+      card_type,
+    });
+    res.status(201).json({
+      success: true,
+      card_number: `****-****-****-${fullCard.slice(-4)}`,
+      card_holder,
+      expiry,
+      card_type,
+    });
+  } catch (err) {
+    req.log.error({ err }, "Failed to save payment");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.delete("/payments/saved/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await db.delete(savedPaymentsTable).where(eq(savedPaymentsTable.id, id));
+    res.json({ message: "Payment deleted", success: true });
+  } catch (err) {
+    req.log.error({ err }, "Failed to delete saved payment");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/products.ts

@@ -0,0 +1,289 @@
+import { Router, type IRouter } from "express";
+import { db, productsTable, categoriesTable } from "@workspace/db";
+import { eq, like, gte, lte, and, desc, asc, sql, ilike } from "drizzle-orm";
+
+const router: IRouter = Router();
+
+router.get("/products", async (req, res) => {
+  try {
+    const {
+      category_id,
+      search,
+      min_price,
+      max_price,
+      min_rating,
+      brand,
+      sort = "newest",
+      page = "1",
+      limit = "20",
+      featured,
+    } = req.query as Record<string, string>;
+
+    const pageNum = parseInt(page) || 1;
+    const limitNum = Math.min(parseInt(limit) || 20, 100);
+    const offset = (pageNum - 1) * limitNum;
+
+    const conditions: ReturnType<typeof and>[] = [];
+
+    const { subcategory } = req.query as Record<string, string>;
+
+    if (category_id) conditions.push(eq(productsTable.category_id, parseInt(category_id)));
+    if (search) conditions.push(ilike(productsTable.name, `%${search}%`));
+    if (min_price) conditions.push(gte(productsTable.price, min_price));
+    if (max_price) conditions.push(lte(productsTable.price, max_price));
+    if (brand) conditions.push(ilike(productsTable.brand, `%${brand}%`));
+    if (subcategory) conditions.push(eq(productsTable.subcategory, subcategory));
+    if (min_rating) conditions.push(gte(productsTable.rating, min_rating));
+    if (featured === "trending") conditions.push(eq(productsTable.is_trending, true));
+    if (featured === "bestseller") conditions.push(eq(productsTable.is_bestseller, true));
+    if (featured === "new_arrivals") conditions.push(eq(productsTable.is_new, true));
+    if (featured === "top_rated") conditions.push(eq(productsTable.is_top_rated, true));
+    if (featured === "hot") conditions.push(eq(productsTable.is_trending, true));
+
+    let orderBy;
+    switch (sort) {
+      case "price_asc": orderBy = asc(productsTable.price); break;
+      case "price_desc": orderBy = desc(productsTable.price); break;
+      case "rating": orderBy = desc(productsTable.rating); break;
+      case "popular": orderBy = desc(productsTable.review_count); break;
+      default: orderBy = desc(productsTable.created_at);
+    }
+
+    const whereClause = conditions.length > 0 ? and(...conditions) : undefined;
+
+    const [products, totalResult] = await Promise.all([
+      db
+        .select({
+          id: productsTable.id,
+          name: productsTable.name,
+          name_en: productsTable.name_en,
+          short_description: productsTable.short_description,
+          description: productsTable.description,
+          brand: productsTable.brand,
+          subcategory: productsTable.subcategory,
+          sku: productsTable.sku,
+          category_id: productsTable.category_id,
+          category_name: categoriesTable.name,
+          price: productsTable.price,
+          original_price: productsTable.original_price,
+          images: productsTable.images,
+          sizes: productsTable.sizes,
+          colors: productsTable.colors,
+          specs: productsTable.specs,
+          marketing_points: productsTable.marketing_points,
+          variants: productsTable.variants,
+          tags: productsTable.tags,
+          stock: productsTable.stock,
+          rating: productsTable.rating,
+          review_count: productsTable.review_count,
+          is_trending: productsTable.is_trending,
+          is_bestseller: productsTable.is_bestseller,
+          is_new: productsTable.is_new,
+          is_top_rated: productsTable.is_top_rated,
+          created_at: productsTable.created_at,
+          discount_percent: sql<number>`
+            CASE WHEN ${productsTable.original_price} IS NOT NULL AND CAST(${productsTable.original_price} AS DECIMAL) > CAST(${productsTable.price} AS DECIMAL)
+            THEN ROUND((1 - CAST(${productsTable.price} AS DECIMAL) / CAST(${productsTable.original_price} AS DECIMAL)) * 100)
+            ELSE 0 END
+          `,
+        })
+        .from(productsTable)
+        .leftJoin(categoriesTable, eq(productsTable.category_id, categoriesTable.id))
+        .where(whereClause)
+        .orderBy(orderBy)
+        .limit(limitNum)
+        .offset(offset),
+      db
+        .select({ count: sql<number>`CAST(COUNT(*) AS INTEGER)` })
+        .from(productsTable)
+        .where(whereClause),
+    ]);
+
+    const total = totalResult[0]?.count || 0;
+    res.json({
+      products,
+      total,
+      page: pageNum,
+      limit: limitNum,
+      total_pages: Math.ceil(total / limitNum),
+    });
+  } catch (err) {
+    req.log.error({ err }, "Failed to get products");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.get("/categories/:id/brands", async (req, res) => {
+  try {
+    const catId = parseInt(req.params.id);
+    const brands = await db
+      .select({
+        brand: productsTable.brand,
+        count: sql<number>`CAST(COUNT(*) AS INTEGER)`,
+      })
+      .from(productsTable)
+      .where(eq(productsTable.category_id, catId))
+      .groupBy(productsTable.brand)
+      .orderBy(sql`COUNT(*) DESC`);
+    res.json(brands.filter(b => b.brand && b.brand !== "متنوع"));
+  } catch (err) {
+    req.log.error({ err }, "Failed to get brands");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.get("/categories/:id/subcategories", async (req, res) => {
+  try {
+    const catId = parseInt(req.params.id);
+    const subs = await db
+      .select({
+        subcategory: productsTable.subcategory,
+        brand: productsTable.brand,
+        count: sql<number>`CAST(COUNT(*) AS INTEGER)`,
+      })
+      .from(productsTable)
+      .where(and(eq(productsTable.category_id, catId), sql`${productsTable.subcategory} IS NOT NULL`))
+      .groupBy(productsTable.subcategory, productsTable.brand)
+      .orderBy(productsTable.brand, sql`COUNT(*) DESC`);
+    res.json(subs);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get subcategories");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.get("/products/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const [product] = await db
+      .select({
+        id: productsTable.id,
+        name: productsTable.name,
+        name_en: productsTable.name_en,
+        short_description: productsTable.short_description,
+        description: productsTable.description,
+        brand: productsTable.brand,
+        subcategory: productsTable.subcategory,
+        sku: productsTable.sku,
+        category_id: productsTable.category_id,
+        category_name: categoriesTable.name,
+        price: productsTable.price,
+        original_price: productsTable.original_price,
+        images: productsTable.images,
+        sizes: productsTable.sizes,
+        colors: productsTable.colors,
+        specs: productsTable.specs,
+        marketing_points: productsTable.marketing_points,
+        variants: productsTable.variants,
+        tags: productsTable.tags,
+        stock: productsTable.stock,
+        rating: productsTable.rating,
+        review_count: productsTable.review_count,
+        is_trending: productsTable.is_trending,
+        is_bestseller: productsTable.is_bestseller,
+        is_new: productsTable.is_new,
+        is_top_rated: productsTable.is_top_rated,
+        created_at: productsTable.created_at,
+        discount_percent: sql<number>`
+          CASE WHEN ${productsTable.original_price} IS NOT NULL AND CAST(${productsTable.original_price} AS DECIMAL) > CAST(${productsTable.price} AS DECIMAL)
+          THEN ROUND((1 - CAST(${productsTable.price} AS DECIMAL) / CAST(${productsTable.original_price} AS DECIMAL)) * 100)
+          ELSE 0 END
+        `,
+      })
+      .from(productsTable)
+      .leftJoin(categoriesTable, eq(productsTable.category_id, categoriesTable.id))
+      .where(eq(productsTable.id, id));
+
+    if (!product) return res.status(404).json({ error: "Product not found" });
+    res.json(product);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get product");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/products", async (req, res) => {
+  try {
+    const data = req.body;
+    const [product] = await db.insert(productsTable).values({
+      name: data.name,
+      name_en: data.name_en,
+      description: data.description,
+      short_description: data.short_description,
+      brand: data.brand,
+      category_id: data.category_id,
+      subcategory: data.subcategory,
+      sku: data.sku,
+      price: data.price,
+      original_price: data.original_price,
+      images: data.images || [],
+      sizes: data.sizes || [],
+      colors: data.colors || [],
+      specs: data.specs || {},
+      marketing_points: data.marketing_points || [],
+      tags: data.tags || [],
+      variants: data.variants || [],
+      stock: data.stock,
+      is_trending: data.is_trending || false,
+      is_bestseller: data.is_bestseller || false,
+      is_new: data.is_new !== undefined ? data.is_new : true,
+      is_top_rated: data.is_top_rated || false,
+    }).returning();
+    res.status(201).json(product);
+  } catch (err) {
+    req.log.error({ err }, "Failed to create product");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.put("/products/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const data = req.body;
+    const updateData: Record<string, unknown> = {};
+
+    if (data.name !== undefined) updateData.name = data.name;
+    if (data.name_en !== undefined) updateData.name_en = data.name_en;
+    if (data.description !== undefined) updateData.description = data.description;
+    if (data.short_description !== undefined) updateData.short_description = data.short_description;
+    if (data.brand !== undefined) updateData.brand = data.brand;
+    if (data.category_id !== undefined) updateData.category_id = data.category_id;
+    if (data.subcategory !== undefined) updateData.subcategory = data.subcategory;
+    if (data.sku !== undefined) updateData.sku = data.sku;
+    if (data.price !== undefined) updateData.price = data.price;
+    if (data.original_price !== undefined) updateData.original_price = data.original_price;
+    if (data.images !== undefined) updateData.images = data.images;
+    if (data.sizes !== undefined) updateData.sizes = data.sizes;
+    if (data.colors !== undefined) updateData.colors = data.colors;
+    if (data.specs !== undefined) updateData.specs = data.specs;
+    if (data.marketing_points !== undefined) updateData.marketing_points = data.marketing_points;
+    if (data.tags !== undefined) updateData.tags = data.tags;
+    if (data.variants !== undefined) updateData.variants = data.variants;
+    if (data.stock !== undefined) updateData.stock = data.stock;
+    if (data.is_trending !== undefined) updateData.is_trending = data.is_trending;
+    if (data.is_bestseller !== undefined) updateData.is_bestseller = data.is_bestseller;
+    if (data.is_new !== undefined) updateData.is_new = data.is_new;
+    if (data.is_top_rated !== undefined) updateData.is_top_rated = data.is_top_rated;
+    updateData.updated_at = new Date();
+
+    const [product] = await db.update(productsTable).set(updateData).where(eq(productsTable.id, id)).returning();
+    if (!product) return res.status(404).json({ error: "Product not found" });
+    res.json(product);
+  } catch (err) {
+    req.log.error({ err }, "Failed to update product");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.delete("/products/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await db.delete(productsTable).where(eq(productsTable.id, id));
+    res.json({ message: "Product deleted", success: true });
+  } catch (err) {
+    req.log.error({ err }, "Failed to delete product");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/reviews.ts

@@ -0,0 +1,181 @@
+import { Router, type IRouter } from "express";
+import { db, reviewsTable, productsTable } from "@workspace/db";
+import { eq, and, inArray, sql } from "drizzle-orm";
+
+const router: IRouter = Router();
+
+// GET product reviews (approved only — storefront)
+router.get("/products/:id/reviews", async (req, res) => {
+  try {
+    const product_id = parseInt(req.params.id);
+    const reviews = await db
+      .select()
+      .from(reviewsTable)
+      .where(and(eq(reviewsTable.product_id, product_id), eq(reviewsTable.is_approved, true)));
+    res.json(reviews);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get reviews");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// POST new review (pending approval by default)
+router.post("/products/:id/reviews", async (req, res) => {
+  try {
+    const product_id = parseInt(req.params.id);
+    const { reviewer_name, reviewer_city, rating, comment, image_url } = req.body;
+    const [review] = await db.insert(reviewsTable).values({
+      product_id,
+      reviewer_name,
+      reviewer_city,
+      rating: rating || 5,
+      comment,
+      image_url: image_url || null,
+      is_approved: false,
+    }).returning();
+    res.status(201).json(review);
+  } catch (err) {
+    req.log.error({ err }, "Failed to create review");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// PUT approve single review
+router.put("/reviews/:id/approve", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const [review] = await db
+      .update(reviewsTable)
+      .set({ is_approved: true })
+      .where(eq(reviewsTable.id, id))
+      .returning();
+
+    if (!review) return res.status(404).json({ error: "Review not found" });
+
+    await recalcProductRating(review.product_id);
+    res.json({ message: "Review approved", success: true });
+  } catch (err) {
+    req.log.error({ err }, "Failed to approve review");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// Keep backward compat with POST approve
+router.post("/reviews/:id/approve", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const [review] = await db
+      .update(reviewsTable)
+      .set({ is_approved: true })
+      .where(eq(reviewsTable.id, id))
+      .returning();
+    if (!review) return res.status(404).json({ error: "Review not found" });
+    await recalcProductRating(review.product_id);
+    res.json({ message: "Review approved", success: true });
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// PUT edit review content (admin: update comment, rating, reviewer_name)
+router.put("/admin/reviews/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const { comment, rating, reviewer_name, reviewer_city } = req.body;
+    const updates: Record<string, unknown> = {};
+    if (comment !== undefined) updates.comment = comment;
+    if (rating !== undefined) updates.rating = Number(rating);
+    if (reviewer_name !== undefined) updates.reviewer_name = reviewer_name;
+    if (reviewer_city !== undefined) updates.reviewer_city = reviewer_city;
+
+    const [updated] = await db
+      .update(reviewsTable)
+      .set(updates)
+      .where(eq(reviewsTable.id, id))
+      .returning();
+
+    if (!updated) return res.status(404).json({ error: "Review not found" });
+    if (updated.is_approved) await recalcProductRating(updated.product_id);
+    res.json(updated);
+  } catch (err) {
+    res.status(500).json({ error: "Failed to edit review" });
+  }
+});
+
+// DELETE single review
+router.delete("/reviews/:id", async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const [deleted] = await db.delete(reviewsTable).where(eq(reviewsTable.id, id)).returning();
+    if (deleted) await recalcProductRating(deleted.product_id);
+    res.json({ success: true });
+  } catch (err) {
+    req.log.error({ err }, "Failed to delete review");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// POST bulk action: approve or delete multiple reviews
+router.post("/admin/reviews/bulk", async (req, res) => {
+  try {
+    const { ids, action } = req.body as { ids: number[]; action: "approve" | "delete" };
+    if (!ids?.length) return res.json({ ok: true, count: 0 });
+
+    if (action === "approve") {
+      await db.update(reviewsTable).set({ is_approved: true }).where(inArray(reviewsTable.id, ids));
+      // Recalc rating for all affected products
+      const reviews = await db.select({ product_id: reviewsTable.product_id }).from(reviewsTable).where(inArray(reviewsTable.id, ids));
+      const productIds = [...new Set(reviews.map(r => r.product_id))];
+      await Promise.all(productIds.map(pid => recalcProductRating(pid)));
+    } else if (action === "delete") {
+      const reviews = await db.select({ product_id: reviewsTable.product_id }).from(reviewsTable).where(inArray(reviewsTable.id, ids));
+      await db.delete(reviewsTable).where(inArray(reviewsTable.id, ids));
+      const productIds = [...new Set(reviews.map(r => r.product_id))];
+      await Promise.all(productIds.map(pid => recalcProductRating(pid)));
+    }
+
+    res.json({ ok: true, count: ids.length });
+  } catch (err) {
+    res.status(500).json({ error: "Bulk action failed" });
+  }
+});
+
+// Admin: get all reviews (including non-approved) with optional filter
+router.get("/admin/reviews", async (req, res) => {
+  try {
+    const filter = req.query.filter as string | undefined; // "pending" | "approved" | undefined
+    let where;
+    if (filter === "pending") where = eq(reviewsTable.is_approved, false);
+    else if (filter === "approved") where = eq(reviewsTable.is_approved, true);
+
+    const reviews = where
+      ? await db.select().from(reviewsTable).where(where)
+      : await db.select().from(reviewsTable);
+
+    // Order by newest first
+    reviews.sort((a, b) => new Date(b.created_at || 0).getTime() - new Date(a.created_at || 0).getTime());
+    res.json(reviews);
+  } catch (err) {
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+// Helper: recalculate product rating after review changes
+async function recalcProductRating(product_id: number) {
+  const avgResult = await db
+    .select({
+      avg_rating: sql<number>`CAST(AVG(${reviewsTable.rating}) AS DECIMAL(3,2))`,
+      count: sql<number>`CAST(COUNT(*) AS INTEGER)`,
+    })
+    .from(reviewsTable)
+    .where(and(eq(reviewsTable.product_id, product_id), eq(reviewsTable.is_approved, true)));
+
+  if (avgResult[0]) {
+    await db.update(productsTable).set({
+      rating: String(avgResult[0].avg_rating || "0"),
+      review_count: avgResult[0].count,
+    }).where(eq(productsTable.id, product_id));
+  }
+}
+
+export default router;

artifacts/api-server/src/routes/store-settings.ts

@@ -0,0 +1,132 @@
+import { Router } from "express";
+import { db } from "@workspace/db";
+import { storeSettingsTable } from "@workspace/db/schema";
+
+const router = Router();
+
+export const DEFAULT_SETTINGS: Record<string, string> = {
+  // Branding
+  store_name_ar: "متجر اكسترا",
+  store_name_en: "eXtra Store",
+  store_icon: "⚡",
+  store_logo_url: "",
+  primary_color: "#f97316",
+
+  // Announcement bar
+  announcement_enabled: "true",
+  announcement_text: "🎉 شحن مجاني على جميع الطلبات فوق 200 ر.س | عروض حصرية كل يوم",
+  announcement_text_en: "🎉 Free shipping on all orders over 200 SAR | Exclusive deals every day",
+  announcement_color: "#f97316",
+  announcement_text_color: "#ffffff",
+
+  // Hero section
+  hero_enabled: "true",
+  hero_title_ar: "أفضل الإلكترونيات\nفي المملكة العربية السعودية",
+  hero_title_en: "Best Electronics\nin Saudi Arabia",
+  hero_subtitle_ar: "اكتشف أحدث الهواتف، اللابتوبات، الأجهزة المنزلية والمزيد بأسعار لا تُضاهى",
+  hero_subtitle_en: "Discover the latest phones, laptops, home appliances and more at unbeatable prices",
+  hero_cta_ar: "تسوق الآن",
+  hero_cta_en: "Shop Now",
+  hero_cta_link: "/category/0",
+  hero_badge_ar: "⚡ عروض حصرية لفترة محدودة",
+  hero_badge_en: "⚡ Exclusive limited-time offers",
+  hero_bg_image: "",
+  hero_accent_color: "#f97316",
+
+  // Home sections
+  section_trending_enabled: "true",
+  section_trending_title_ar: "الأكثر رواجاً",
+  section_trending_title_en: "Trending",
+  section_trending_icon: "🔥",
+  section_bestseller_enabled: "true",
+  section_bestseller_title_ar: "الأكثر مبيعاً",
+  section_bestseller_title_en: "Best Sellers",
+  section_bestseller_icon: "⭐",
+  section_new_enabled: "true",
+  section_new_title_ar: "وصل حديثاً",
+  section_new_title_en: "New Arrivals",
+  section_new_icon: "✨",
+
+  // Promo banners (JSON array)
+  promo_banners: "[]",
+
+  // Extra categories section
+  extra_section_enabled: "true",
+  extra_section_title_ar: "اكسترا — إلكترونيات وأجهزة",
+  extra_section_title_en: "eXtra — Electronics & Appliances",
+
+  // Shein section
+  shein_section_enabled: "true",
+  shein_section_title_ar: "أزياء، جمال ومنزل",
+  shein_section_title_en: "Fashion, Beauty & Home",
+
+  // Footer
+  footer_tagline_ar: "متجرك المفضل للإلكترونيات والأزياء في المملكة",
+
+  // Cart & Checkout settings
+  cart_free_shipping_riyadh: "100",
+  cart_free_shipping_other: "200",
+  cart_delivery_fee_riyadh: "15",
+  cart_delivery_fee_other: "30",
+  cart_min_order: "0",
+  cart_max_qty: "10",
+  cart_banner_enabled: "false",
+  cart_banner_text: "🚚 التوصيل خلال 2-3 أيام عمل | شحن مجاني فوق 200 ر.س",
+  cart_banner_color: "#1a1a1a",
+  cart_payment_mada: "true",
+  cart_payment_visa: "true",
+  cart_payment_applepay: "true",
+  cart_payment_stcpay: "true",
+  cart_checkout_note: "",
+
+  // Delivery page conditions (JSON array)
+  delivery_conditions: JSON.stringify([
+    { id: "1", text: "التوصيل لجميع مناطق المملكة العربية السعودية خلال 3–7 أيام عمل حسب المدينة.", text_en: "Delivery to all regions of Saudi Arabia within 3–7 business days depending on the city.", visible: true },
+    { id: "2", text: "الشحن مجاني للطلبات التي تتجاوز 200 ر.س.", text_en: "Free shipping on orders over 200 SAR.", visible: true },
+    { id: "3", text: "سيتم التواصل معك عبر رقم الجوال لتأكيد الطلب وتحديد موعد التوصيل.", text_en: "We will contact you via mobile to confirm the order and schedule delivery.", visible: true },
+    { id: "4", text: "في حال الغياب وقت التوصيل، يُعاد الطلب للمستودع ويُتواصل معك لإعادة الجدولة.", text_en: "If absent during delivery, the order will be returned to the warehouse and we will contact you to reschedule.", visible: true },
+    { id: "5", text: "قد تختلف مواعيد التوصيل خلال المواسم والإجازات الرسمية.", text_en: "Delivery times may vary during peak seasons and official holidays.", visible: true }
+  ]),
+};
+
+// Public GET — no auth required (storefront reads this)
+router.get("/public-settings", async (_req, res) => {
+  try {
+    const rows = await db.select().from(storeSettingsTable);
+    const settings = { ...DEFAULT_SETTINGS };
+    rows.forEach(r => { settings[r.key] = r.value; });
+    res.json(settings);
+  } catch {
+    res.json(DEFAULT_SETTINGS);
+  }
+});
+
+// Admin GET
+router.get("/admin/store-settings", async (_req, res) => {
+  try {
+    const rows = await db.select().from(storeSettingsTable);
+    const settings = { ...DEFAULT_SETTINGS };
+    rows.forEach(r => { settings[r.key] = r.value; });
+    res.json(settings);
+  } catch {
+    res.status(500).json({ error: "Failed to fetch settings" });
+  }
+});
+
+// Admin PUT
+router.put("/admin/store-settings", async (req, res) => {
+  try {
+    const updates = req.body as Record<string, string>;
+    for (const [key, value] of Object.entries(updates)) {
+      if (typeof value !== "string") continue;
+      await db.insert(storeSettingsTable)
+        .values({ key, value })
+        .onConflictDoUpdate({ target: storeSettingsTable.key, set: { value, updated_at: new Date() } });
+    }
+    res.json({ ok: true });
+  } catch {
+    res.status(500).json({ error: "Failed to save settings" });
+  }
+});
+
+export default router;

artifacts/api-server/src/routes/wishlist.ts

@@ -0,0 +1,76 @@
+import { Router, type IRouter } from "express";
+import { db, wishlistTable, productsTable } from "@workspace/db";
+import { eq, and, sql } from "drizzle-orm";
+
+const router: IRouter = Router();
+
+router.get("/wishlist", async (req, res) => {
+  try {
+    const { session_id } = req.query as { session_id: string };
+    if (!session_id) return res.status(400).json({ error: "session_id required" });
+
+    const items = await db
+      .select({
+        id: wishlistTable.id,
+        session_id: wishlistTable.session_id,
+        product_id: wishlistTable.product_id,
+        created_at: wishlistTable.created_at,
+        product: {
+          id: productsTable.id,
+          name: productsTable.name,
+          brand: productsTable.brand,
+          price: productsTable.price,
+          original_price: productsTable.original_price,
+          images: productsTable.images,
+          stock: productsTable.stock,
+          rating: productsTable.rating,
+          review_count: productsTable.review_count,
+          category_id: productsTable.category_id,
+          discount_percent: sql<number>`
+            CASE WHEN ${productsTable.original_price} IS NOT NULL AND CAST(${productsTable.original_price} AS DECIMAL) > CAST(${productsTable.price} AS DECIMAL)
+            THEN ROUND((1 - CAST(${productsTable.price} AS DECIMAL) / CAST(${productsTable.original_price} AS DECIMAL)) * 100)
+            ELSE 0 END
+          `,
+        },
+      })
+      .from(wishlistTable)
+      .leftJoin(productsTable, eq(wishlistTable.product_id, productsTable.id))
+      .where(eq(wishlistTable.session_id, session_id));
+
+    res.json(items);
+  } catch (err) {
+    req.log.error({ err }, "Failed to get wishlist");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.post("/wishlist", async (req, res) => {
+  try {
+    const { session_id, product_id } = req.body;
+    const existing = await db.select().from(wishlistTable)
+      .where(and(eq(wishlistTable.session_id, session_id), eq(wishlistTable.product_id, product_id)));
+
+    if (existing.length > 0) return res.status(201).json(existing[0]);
+
+    const [item] = await db.insert(wishlistTable).values({ session_id, product_id }).returning();
+    res.status(201).json(item);
+  } catch (err) {
+    req.log.error({ err }, "Failed to add to wishlist");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+router.delete("/wishlist/:product_id", async (req, res) => {
+  try {
+    const product_id = parseInt(req.params.product_id);
+    const { session_id } = req.query as { session_id: string };
+    await db.delete(wishlistTable)
+      .where(and(eq(wishlistTable.product_id, product_id), eq(wishlistTable.session_id, session_id)));
+    res.json({ message: "Removed from wishlist", success: true });
+  } catch (err) {
+    req.log.error({ err }, "Failed to remove from wishlist");
+    res.status(500).json({ error: "Internal server error" });
+  }
+});
+
+export default router;

artifacts/api-server/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "types": ["node"]
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "../../lib/db"
+    },
+    {
+      "path": "../../lib/api-zod"
+    }
+  ]
+}

artifacts/extra-store/.replit-artifact/artifact.toml

@@ -0,0 +1,31 @@
+kind = "web"
+previewPath = "/"
+title = "متجر اكسترا السعودي"
+version = "1.0.0"
+id = "artifacts/extra-store"
+router = "path"
+
+[[integratedSkills]]
+name = "react-vite"
+version = "1.0.0"
+
+[[services]]
+name = "web"
+paths = [ "/" ]
+localPort = 21175
+
+[services.development]
+run = "pnpm --filter @workspace/extra-store run dev"
+
+[services.production]
+build = [ "pnpm", "--filter", "@workspace/extra-store", "run", "build" ]
+publicDir = "artifacts/extra-store/dist/public"
+serve = "static"
+
+[[services.production.rewrites]]
+from = "/*"
+to = "/index.html"
+
+[services.env]
+PORT = "21175"
+BASE_PATH = "/"

artifacts/extra-store/components.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+      "config": "",
+      "css": "src/index.css",
+      "baseColor": "neutral",
+      "cssVariables": true,
+      "prefix": ""
+    },
+    "aliases": {
+      "components": "@/components",
+      "utils": "@/lib/utils",
+      "ui": "@/components/ui",
+      "lib": "@/lib",
+      "hooks": "@/hooks"
+    }
+}

artifacts/extra-store/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#0a0a0a" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <title>متجر اكسترا السعودي</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

artifacts/extra-store/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@workspace/extra-store",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --config vite.config.ts --host 0.0.0.0",
+    "build": "vite build --config vite.config.ts",
+    "serve": "vite preview --config vite.config.ts --host 0.0.0.0",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.4",
+    "@radix-ui/react-alert-dialog": "^1.1.7",
+    "@radix-ui/react-aspect-ratio": "^1.1.3",
+    "@radix-ui/react-avatar": "^1.1.4",
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-collapsible": "^1.1.4",
+    "@radix-ui/react-context-menu": "^2.2.7",
+    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-hover-card": "^1.1.7",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-menubar": "^1.1.7",
+    "@radix-ui/react-navigation-menu": "^1.2.6",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.4",
+    "@radix-ui/react-scroll-area": "^1.2.4",
+    "@radix-ui/react-select": "^2.1.7",
+    "@radix-ui/react-separator": "^1.1.3",
+    "@radix-ui/react-slider": "^1.2.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.1.4",
+    "@radix-ui/react-tabs": "^1.1.4",
+    "@radix-ui/react-toast": "^1.2.7",
+    "@radix-ui/react-toggle": "^1.1.3",
+    "@radix-ui/react-toggle-group": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.2.0",
+    "@replit/vite-plugin-cartographer": "catalog:",
+    "@replit/vite-plugin-dev-banner": "catalog:",
+    "@replit/vite-plugin-runtime-error-modal": "catalog:",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "@workspace/api-client-react": "workspace:*",
+    "class-variance-authority": "catalog:",
+    "clsx": "catalog:",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "catalog:",
+    "input-otp": "^1.4.2",
+    "lucide-react": "catalog:",
+    "next-themes": "^0.4.6",
+    "react": "catalog:",
+    "react-day-picker": "^9.11.1",
+    "react-dom": "catalog:",
+    "react-hook-form": "^7.55.0",
+    "react-icons": "^5.4.0",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "^2.15.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "catalog:",
+    "tailwindcss": "catalog:",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2",
+    "vite": "catalog:",
+    "wouter": "^3.3.5",
+    "zod": "catalog:"
+  }
+}

artifacts/extra-store/public/favicon.svg

@@ -0,0 +1,3 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="180" height="180" rx="36" fill="#FF3C00"/>
+</svg>

artifacts/extra-store/src/components/ui/accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

artifacts/extra-store/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

artifacts/extra-store/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

artifacts/extra-store/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

artifacts/extra-store/src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

artifacts/extra-store/src/components/ui/badge.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  // @replit
+  // Whitespace-nowrap: Badges should never wrap.
+  "whitespace-nowrap inline-flex items-center rounded-md 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" +
+  " hover-elevate ",
+  {
+    variants: {
+      variant: {
+        default:
+          // @replit shadow-xs instead of shadow, no hover because we use hover-elevate
+          "border-transparent bg-primary text-primary-foreground shadow-xs",
+        secondary:
+          // @replit no hover because we use hover-elevate
+          "border-transparent bg-secondary text-secondary-foreground",
+        destructive:
+          // @replit shadow-xs instead of shadow, no hover because we use hover-elevate
+          "border-transparent bg-destructive text-destructive-foreground shadow-xs",
+          // @replit shadow-xs" - use badge outline variable
+        outline: "text-foreground border [border-color:var(--badge-outline)]",
+      },
+    },
+    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 }

artifacts/extra-store/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

artifacts/extra-store/src/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

artifacts/extra-store/src/components/ui/button.tsx

@@ -0,0 +1,65 @@
+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 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0" +
+" hover-elevate active-elevate-2",
+  {
+    variants: {
+      variant: {
+        default:
+           // @replit: no hover, and add primary border
+           "bg-primary text-primary-foreground border border-primary-border",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm border-destructive-border",
+        outline:
+          // @replit Shows the background color of whatever card / sidebar / accent background it is inside of.
+          // Inherits the current text color. Uses shadow-xs. no shadow on active
+          // No hover state
+          " border [border-color:var(--button-outline)] shadow-xs active:shadow-none ",
+        secondary:
+          // @replit border, no hover, no shadow, secondary border.
+          "border bg-secondary text-secondary-foreground border border-secondary-border ",
+        // @replit no hover, transparent border
+        ghost: "border border-transparent",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        // @replit changed sizes
+        default: "min-h-9 px-4 py-2",
+        sm: "min-h-8 rounded-md px-3 text-xs",
+        lg: "min-h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    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 }

artifacts/extra-store/src/components/ui/calendar.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

artifacts/extra-store/src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+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-xl border bg-card text-card-foreground shadow",
+      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<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    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 }

artifacts/extra-store/src/components/ui/carousel.tsx

@@ -0,0 +1,260 @@
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

artifacts/extra-store/src/components/ui/chart.tsx

@@ -0,0 +1,367 @@
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+              const key = `${nameKey || item.name || item.dataKey || "value"}`
+              const itemConfig = getPayloadConfigFromPayload(config, item, key)
+              const indicatorColor = color || item.payload.fill || item.color
+
+              return (
+                <div
+                  key={item.dataKey}
+                  className={cn(
+                    "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                    indicator === "dot" && "items-center"
+                  )}
+                >
+                  {formatter && item?.value !== undefined && item.name ? (
+                    formatter(item.value, item.name, item, index, item.payload)
+                  ) : (
+                    <>
+                      {itemConfig?.icon ? (
+                        <itemConfig.icon />
+                      ) : (
+                        !hideIndicator && (
+                          <div
+                            className={cn(
+                              "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                              {
+                                "h-2.5 w-2.5": indicator === "dot",
+                                "w-1": indicator === "line",
+                                "w-0 border-[1.5px] border-dashed bg-transparent":
+                                  indicator === "dashed",
+                                "my-0.5": nestLabel && indicator === "dashed",
+                              }
+                            )}
+                            style={
+                              {
+                                "--color-bg": indicatorColor,
+                                "--color-border": indicatorColor,
+                              } as React.CSSProperties
+                            }
+                          />
+                        )
+                      )}
+                      <div
+                        className={cn(
+                          "flex flex-1 justify-between leading-none",
+                          nestLabel ? "items-end" : "items-center"
+                        )}
+                      >
+                        <div className="grid gap-1.5">
+                          {nestLabel ? tooltipLabel : null}
+                          <span className="text-muted-foreground">
+                            {itemConfig?.label || item.name}
+                          </span>
+                        </div>
+                        {item.value && (
+                          <span className="font-mono font-medium tabular-nums text-foreground">
+                            {item.value.toLocaleString()}
+                          </span>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
+              )
+            })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item) => {
+            const key = `${nameKey || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+            return (
+              <div
+                key={item.value}
+                className={cn(
+                  "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+                )}
+              >
+                {itemConfig?.icon && !hideIcon ? (
+                  <itemConfig.icon />
+                ) : (
+                  <div
+                    className="h-2 w-2 shrink-0 rounded-[2px]"
+                    style={{
+                      backgroundColor: item.color,
+                    }}
+                  />
+                )}
+                {itemConfig?.label}
+              </div>
+            )
+          })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

artifacts/extra-store/src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("grid place-content-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

artifacts/extra-store/src/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

artifacts/extra-store/src/components/ui/command.tsx

@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

artifacts/extra-store/src/components/ui/context-menu.tsx

@@ -0,0 +1,198 @@
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

artifacts/extra-store/src/components/ui/dialog.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

artifacts/extra-store/src/components/ui/drawer.tsx

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

artifacts/extra-store/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

artifacts/extra-store/src/components/ui/empty.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

artifacts/extra-store/src/components/ui/field.tsx

@@ -0,0 +1,244 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
+        ],
+        responsive: [
+          "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors) {
+      return null
+    }
+
+    if (errors?.length === 1 && errors[0]?.message) {
+      return errors[0].message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {errors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

artifacts/extra-store/src/components/ui/form.tsx

@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>")
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

artifacts/extra-store/src/components/ui/hover-card.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

artifacts/extra-store/src/components/ui/input-group.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
+        "h-9 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

artifacts/extra-store/src/components/ui/input-otp.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

artifacts/extra-store/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-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors 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-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

artifacts/extra-store/src/components/ui/item.tsx

@@ -0,0 +1,193 @@
+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"
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn("group/item-group flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-0", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4 ",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

artifacts/extra-store/src/components/ui/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

artifacts/extra-store/src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+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 }

artifacts/extra-store/src/components/ui/menubar.tsx

@@ -0,0 +1,254 @@
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-menubar-content-transform-origin]",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}

artifacts/extra-store/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

artifacts/extra-store/src/components/ui/pagination.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}

artifacts/extra-store/src/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

artifacts/extra-store/src/components/ui/progress.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

artifacts/extra-store/src/components/ui/radio-group.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

artifacts/extra-store/src/components/ui/resizable.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

artifacts/extra-store/src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

artifacts/extra-store/src/components/ui/select.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

artifacts/extra-store/src/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+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 }

artifacts/extra-store/src/components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

artifacts/extra-store/src/components/ui/sidebar.tsx

@@ -0,0 +1,727 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+var(--spacing-4))]"
+            : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+var(--spacing-4)+2px)]"
+            : "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  // Note: Tailwind v3.4 doesn't support "in-" selectors. So the rail won't work perfectly.
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:w-8! group-data-[collapsible=icon]:h-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[var(--skeleton-width)] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline outline-2 outline-transparent outline-offset-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

artifacts/extra-store/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

artifacts/extra-store/src/components/ui/slider.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

artifacts/extra-store/src/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

artifacts/extra-store/src/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

artifacts/extra-store/src/components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

artifacts/extra-store/src/components/ui/table.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

artifacts/extra-store/src/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

artifacts/extra-store/src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

artifacts/extra-store/src/components/ui/toast.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}

artifacts/extra-store/src/components/ui/toaster.tsx

@@ -0,0 +1,33 @@
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}

artifacts/extra-store/src/components/ui/toggle-group.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

artifacts/extra-store/src/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

artifacts/extra-store/src/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

artifacts/extra-store/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

artifacts/extra-store/src/hooks/use-toast.ts

@@ -0,0 +1,191 @@
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

artifacts/extra-store/src/index.css

@@ -0,0 +1,93 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --font-sans: var(--app-font-sans);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+}
+
+:root {
+  --background: 0 0% 4%;
+  --foreground: 0 0% 98%;
+  --border: 0 0% 14%;
+  --input: 0 0% 14%;
+  --ring: 25 100% 50%;
+  --card: 0 0% 8%;
+  --card-foreground: 0 0% 98%;
+  --primary: 25 100% 50%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 12%;
+  --secondary-foreground: 0 0% 90%;
+  --muted: 0 0% 12%;
+  --muted-foreground: 0 0% 55%;
+  --accent: 25 100% 50%;
+  --accent-foreground: 0 0% 100%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --app-font-sans: 'Cairo', 'Segoe UI', sans-serif;
+  --radius: 0.75rem;
+}
+
+@layer base {
+  * { @apply border-border; }
+  body {
+    @apply bg-background text-foreground antialiased;
+    direction: rtl;
+    font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif;
+  }
+  html { scroll-behavior: smooth; }
+}
+
+/* Extra brand scrollbar */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: hsl(var(--background)); }
+::-webkit-scrollbar-thumb { background: hsl(var(--primary)); border-radius: 3px; }
+
+/* Image fade-in */
+img { transition: opacity 0.3s ease; }
+img.loaded { opacity: 1; }
+
+/* Announcement marquee */
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-33.333%); }
+}
+
+/* Toast animations */
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(100px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes slideOutRight {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(100px); }
+}
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-60px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes slideInDown {
+  from { opacity: 0; margin-top: -20px; }
+  to   { opacity: 1; margin-top: 0; }
+}

artifacts/extra-store/src/lib/api.ts

@@ -0,0 +1,2 @@
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, "");
+export const API = `${BASE}/api`;