# CatalogPilot plan

## Product
CatalogPilot is a bilingual catalog extraction and migration workspace for operators who need to move products from supported ecommerce sites into WooCommerce or portable files.

## Implementation
- React + Tailwind dashboard in `client/src/pages/Home.tsx` with a single workflow: source URL → crawl summary → catalog review → transform → export/import.
- Seed a realistic demo crawl on scan so the UI is immediately testable; keep the API-shaped state model ready for live crawler endpoints.
- Product records include title, description, price, original price, image, SKU, category, variations, source URL, selection state, and generated SEO fields.
- Client-side transforms apply percentage markups and translation previews. Export helpers create JSON/CSV downloads; Excel is represented as an export option ready for a workbook adapter.
- WooCommerce panel captures endpoint/key/secret placeholders and presents the import action with a clear connection state.
- Server/database resources are enabled for later persistence of crawl jobs, catalog records, settings, media, and import outcomes.

## Project structure
- `client/src/pages/Home.tsx`: primary operator workspace and interaction state.
- `client/src/index.css`: visual system, layout, and responsive styling.
- `client/src/App.tsx`: route shell.
- `server/routers.ts`: future crawl/export/import procedures.
- `drizzle/schema.ts`: future persisted crawl/catalog tables alongside users.
- `public/manus-routes.json`: route manifest.

## Design
Three style directions considered: Swiss utility console (0.06), editorial commerce lab (0.08), industrial night-shift terminal (0.04). Chosen: **editorial commerce lab**.

- **Design Movement:** editorial commerce tooling with quiet Swiss alignment, warm paper surfaces, and ink-blue controls.
- **Core Principles:** make progress legible; keep dense data calm; surface the next action; use color only for state and money.
- **Color Philosophy:** parchment and soft cream make the workspace feel tactile; ink navy signals trust; acid lime marks movement and readiness; coral is reserved for attention.
- **Layout Paradigm:** a persistent left rail anchors navigation while the main workspace steps horizontally from source to catalog to delivery; cards are offset rather than centered in a uniform grid.
- **Signature Elements:** lime active rail marker, oversized crawl progress ring, and small category chips with hand-labeled editorial energy.
- **Interaction Philosophy:** every control previews its effect before committing; selected rows feel like physical index cards; actions are optimistic but reversible.
- **Animation:** use short ease-out transitions for tabs, progress, and row selection; no decorative motion that competes with tables.
- **Typography System:** Inter for operational UI and Fraunces for section headings, creating a magazine-meets-console feel.
- **Brand Essence:** “Move a whole catalog without losing the details.” Practical, bilingual, assured.
- **Brand Voice:** direct and quietly confident. Example: “Your source is mapped.” / “Polish the catalog, then send it on.”
- **Wordmark & Logo:** a compact “CP” stamp with a lime extraction notch, paired with the CatalogPilot wordmark.
- **Signature Brand Color:** acid lime `#d8ff4f`.