diff --git a/specs/SD-0002-products-bulk-csv-import-export.md b/specs/SD-0002-products-bulk-csv-import-export.md
new file mode 100644
index 0000000..b13312b
--- /dev/null
+++ b/specs/SD-0002-products-bulk-csv-import-export.md
@@ -0,0 +1,1429 @@
+# Solution Design: Products — bulk CSV import/export
+
+| | |
+| --- | --- |
+| **Anchor** | [wiggleverse/wiggleverse-ecomm#13](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm/issues/13) (`type/feature`, `priority/P1`) — parent epic [#12](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm/issues/12) |
+| **Author(s)** | Claude (session ecomm-0030), for Ben Stull |
+| **Reviewers / approvers** | Ben Stull |
+| **Status** | `approved` |
+| **Version** | v0.3.1 |
+| **Source artifacts** | BDD corpus: [prototype rfcs 11-05-\* (products import/export)](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm-prototype-content/src/branch/main/rfcs) · [research/shopify/products](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm-prototype-content/src/branch/main/research/shopify/products/products.md) · Prototype: [wiggleverse-ecomm-prototype](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm-prototype) · Reference: Shopify product CSV · Builds on: [SD-0001](./SD-0001-mvp-sign-up-and-single-storefront.md) · Supersedes: — |
+
+**Change log**
+
+| Date | Version | Change | By |
+| --- | --- | --- | --- |
+| 2026-06-11 | v0.1.0 | Initial draft — §1 Business Context (session ecomm-0030) | Claude + Ben |
+| 2026-06-11 | v0.2.0 | Full draft complete, §§1–14, authored section-at-a-time with operator review at each boundary (session ecomm-0030) | Claude + Ben |
+| 2026-06-11 | v0.3.0 | Claude Design hi-fi bundle committed (`ui/designs/SD-0002-…`); §5.1 decision amended to Design → Code (D-14); §5.2 toast refinement adopted | Claude + Ben |
+| 2026-06-11 | v0.3.1 | Status → `approved` at session finalize — every section operator-reviewed at its boundary during authoring (autonomous posture, handbook §6.5) | Claude + Ben |
+
+---
+
+## 1. Business Context
+
+*The business lens — solution-agnostic throughout. No mechanism is proposed until §2.*
+
+### 1.1 Executive Summary
+
+A merchant's catalog already exists before they ever meet this platform — in
+spreadsheets, in their current platform's export, in the working files they
+price and re-price every season. The value at stake is letting that catalog
+*become* their storefront without re-entering it, letting catalog-wide changes
+(a season's prices, a supplier's new costs) land as one gesture instead of
+hundreds, and guaranteeing the catalog can leave whole at any time — so
+adopting the platform never means retyping a business in, and never means
+locking a business up. The beneficiaries are merchants — most acutely those
+migrating from another platform — and the platform itself: every downstream
+capability of an ecomm (browsing, orders, checkout) presupposes a real catalog
+existing, and today none can.
+
+### 1.2 Background
+
+ecomm is Wiggleverse's multi-tenant Shopify alternative. Its first Solution
+Design ([SD-0001](./SD-0001-mvp-sign-up-and-single-storefront.md)) shipped
+sign-up, identity, and single-storefront creation: a merchant can exist and
+their storefront can exist — and that storefront is, by design, an honestly
+empty shell ("There's nothing to manage yet").
+
+The Products MVP epic ([#12](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm/issues/12))
+is the next move: give the storefront a real product catalog. The epic makes a
+deliberate boundary decision: the MVP ships **no per-item editing** — bulk
+ingestion and extraction is the *only* way product data moves. Its sibling
+Features display the catalog
+([#14](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm/issues/14),
+list + read-only detail) and extend it to bundled offerings
+([#15](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm/issues/15),
+kits); **this** Feature is the mechanism they all feed from.
+
+The backdrop that makes bulk-first the right boundary: real merchant catalogs
+are not built one item at a time inside an admin tool. Merchants switching
+platforms hold their entire catalog as an export of their current system —
+hundreds of products, each with variations, images, and prices. Merchants who
+stay maintain their catalogs batch-wise: a seasonal price list, a supplier's
+updated cost sheet, a spreadsheet kept as the working source of truth. The
+catalog's natural lifecycle is bulk in, bulk update, bulk out.
+
+### 1.3 Business Actors / Roles
+
+Real-world roles — they exist whether or not this platform does.
+
+| Role | Responsible for (in the business) |
+| --- | --- |
+| **Merchant** | Owns a storefront's catalog: what is sold, at what price, shown how. Keeps it current as seasons, suppliers, and stock change. |
+| **Migrating merchant** | A merchant switching platforms. Their catalog already lives, complete, in their current system and its export files; they decide whether switching is worth the cost. |
+| **Platform builder** | Builds and validates the capabilities a catalog feeds (browsing, orders, demos). Needs realistic catalogs to exist before those capabilities can be exercised. |
+
+### 1.4 Problem Statement
+
+A storefront can exist but cannot hold anything sellable: there is no way to
+get product data into the platform at all, and the MVP deliberately offers no
+per-item editing to fall back on. For the merchant whose catalog already
+exists elsewhere — the common case — hand re-entry of hundreds of products,
+each with variations, imagery, and prices, is a switching cost that simply
+ends the conversation. The gap recurs after adoption: catalog maintenance is
+batch-shaped (whole-catalog price changes, supplier updates), and one-at-a-time
+upkeep mismatches how merchants actually work their data. And data that goes
+in must come out: a catalog that cannot be extracted whole makes the platform
+a trap, which careful merchants correctly treat as a reason not to enter.
+
+### 1.5 Pain Points
+
+| # | Pain | Who feels it | Cost / frequency today |
+| --- | --- | --- | --- |
+| PP-1 | A created storefront is a dead end — nothing to sell, nothing to manage, nothing to show | Merchant | Total: blocks any real use of the platform; felt by every merchant immediately after sign-up |
+| PP-2 | An existing catalog would have to be re-keyed item by item to move over | Migrating merchant | Hundreds of products × dozens of fields each — a prohibitive switching cost; prospective merchants don't switch |
+| PP-3 | Catalog-wide changes (season prices, supplier costs) have no whole-catalog gesture | Merchant | Recurring — every season, supplier change, or repricing event; effort scales with catalog size |
+| PP-4 | No realistic catalog can be stood up to build, demo, or validate against | Platform builder | Continuous — every product-dependent capability (#14, #15, future orders) is blocked or faked |
+| PP-5 | Whatever goes in cannot be gotten back out — the catalog would be trapped | Merchant | Felt at the adoption decision (a reason to say no) and at every backup/audit/leave moment after |
+
+### 1.6 Targeted Business Outcomes
+
+| # | Outcome | Success metric | Baseline → Target | Guardrail (must not regress) | How / when measured |
+| --- | --- | --- | --- | --- | --- |
+| BO-1 | Merchants with existing catalogs adopt — populating a storefront is hours, not weeks | # storefronts holding a real catalog; effort to first full catalog | 0 storefronts can hold a catalog → a several-hundred-product catalog lands in under an hour of merchant effort | Sign-up → storefront flow (SD-0001) stays intact | Platform records (operationalized §8.1); reviewed monthly |
+| BO-2 | Catalog upkeep happens *in* the platform — merchants refresh in bulk rather than letting data go stale or leaving | # storefronts performing repeat bulk updates | No upkeep possible → catalog-holding storefronts update in bulk as their prices/data change | Existing catalog data never corrupted by an update | Platform records; reviewed monthly |
+| BO-3 | "My data would be trapped" is a non-objection — the catalog is extractable whole, always | Full-catalog extraction available and exercised | No extraction exists → every storefront's complete catalog can be taken out on demand, at any time | Extraction completeness: nothing the merchant supplied is unrecoverable | Platform records; reviewed quarterly |
+| BO-4 | Product-dependent work is unblocked — sibling and downstream capabilities build against real catalogs | #14 / #15 / future order work proceeding against realistic data | Nothing to build against → realistic catalogs standable in minutes | — | Delivery record of #14/#15; per Feature |
+
+### 1.7 Scope (business)
+
+- **In scope:** populating a storefront's catalog in bulk from records the
+  merchant already holds; updating the catalog in bulk; extracting the
+  complete catalog at any time. "Catalog" here means products in full
+  commercial reality: variations (size/color and the like), imagery,
+  organization (vendor, type, tags, category), pricing/cost, stock levels,
+  and publication state.
+- **Out of scope:** per-item create/edit (a later epic — the MVP's deliberate
+  boundary); removing products in bulk (nothing is deleted by this mechanism —
+  see §2); automated or scheduled synchronization with other platforms;
+  movement of non-catalog data (customers, orders — other epics); the meaning
+  and behavior of bundled offerings (kits — Feature #15, which rides this
+  mechanism but defines its own semantics).
+- **Non-goals:** real-time integration with other commerce systems (the
+  supplied file is the boundary, deliberately); making the MVP a catalog
+  *editing* tool of any kind.
+
+### 1.8 Assumptions · Constraints · Dependencies
+
+- **Assumptions:** merchants hold, or can readily produce, their catalog as a
+  structured file (a spreadsheet, their current platform's export). *Risk if
+  wrong:* a merchant with no digital catalog at all has no entry path in this
+  MVP. Catalogs at MVP scale run to a few thousand items. *Risk if wrong:*
+  larger catalogs need heavier machinery (a named seam, §2).
+- **Constraints:** bulk-only is Epic #12's deliberate MVP boundary — this
+  design must not quietly grow per-item editing. One storefront per account
+  (SD-0001 INV-4) — a merchant's catalog context is unambiguous.
+- **Dependencies:** SD-0001's shipped surfaces (identity, storefront, admin
+  shell) — live as of v0.4.0. Sibling #14 displays what this ingests; sibling
+  #15 extends what the records can express — both sequence after this
+  mechanism exists.
+
+### 1.9 Business Use Cases
+
+**BUC-1 — As a migrating merchant, I can bring my existing catalog into my storefront in one bulk gesture, so that switching platforms doesn't mean re-keying my business.**
+
+```gherkin
+Scenario: BUC-1 — An existing catalog comes over whole
+  Given a merchant whose catalog of several hundred products lives in an
+    export from their current platform
+  When they supply that catalog to their storefront in one gesture
+  Then the storefront holds the full catalog — every product with its
+    variations, imagery, organization, and prices
+  And nothing had to be re-entered by hand
+```
+
+- **BUC-1 acceptance criteria:** the catalog the storefront holds matches the
+  records the merchant supplied, completely; the merchant's effort is one
+  supply-and-review gesture, not per-product work.
+
+**BUC-1a — unhappy path: unusable records are reported, not silently dropped.**
+
+```gherkin
+Scenario: BUC-1a — Unusable records come back with actionable feedback
+  Given a merchant supplies catalog records of which some are incomplete,
+    contradictory, or unreadable
+  When the storefront cannot accept some of the records
+  Then the merchant is told exactly which records failed and why, in terms
+    they can act on
+  And they can correct and re-supply the problem records
+  And nothing is silently dropped, guessed at, or invented
+```
+
+- **BUC-1a acceptance criteria:** every rejected record is identified with an
+  actionable reason; accepted vs. rejected is fully accounted for — the
+  merchant is never left wondering what made it in.
+
+**BUC-2 — As a merchant, I can see exactly what a bulk change will do to my catalog before it happens, so that I never damage my own data by accident.**
+
+```gherkin
+Scenario: BUC-2 — A bulk change is reviewed before it takes effect
+  Given a merchant about to apply a bulk change to a catalog their business
+    depends on
+  When they supply the new records
+  Then they see what will be added, what will change (and to what), and what
+    is in error — before anything takes effect
+  And the change happens only when they say so
+```
+
+- **BUC-2 acceptance criteria:** the preview is complete and faithful (what it
+  shows is exactly what applying does); declining costs nothing; nothing
+  changes without the merchant's explicit go-ahead. *(OHM: consent & agency —
+  the merchant authorizes the change knowing what it is.)*
+
+**BUC-3 — As a merchant, I can update my whole catalog at once, so that batch-shaped changes (seasonal prices, supplier costs) cost one gesture instead of hundreds.**
+
+```gherkin
+Scenario: BUC-3 — A catalog-wide change lands as one gesture
+  Given a storefront holding a catalog, and a season's repricing touching
+    most of it
+  When the merchant supplies the updated records
+  Then the affected products are updated to the new values
+  And the unaffected products are untouched
+  And no duplicates are created
+```
+
+- **BUC-3 acceptance criteria:** updates land on the products they target;
+  re-supplying unchanged records changes nothing (supplying the same catalog
+  twice never doubles it); the merchant's effort does not scale with catalog
+  size.
+
+**BUC-4 — As a merchant, I can take my complete catalog out at any time, so that my business data is never trapped in the platform.**
+
+```gherkin
+Scenario: BUC-4 — The catalog leaves whole, on demand
+  Given a storefront holding a catalog the merchant built up over time
+  When the merchant asks for their catalog
+  Then they receive the complete catalog — every product, variation, image,
+    and price — in a form they can use elsewhere
+  And what they receive could rebuild the same catalog faithfully
+```
+
+- **BUC-4 acceptance criteria:** extraction is always available, complete
+  (nothing the merchant supplied is unrecoverable), and round-trips — what
+  comes out can go back in and reproduce the same catalog. *(OHM: agency —
+  leaving is always possible; the platform earns retention, never extorts
+  it.)*
+
+---
+
+## 2. Solution Proposal
+
+**Build software:** CSV file import/export in the storefront admin — a new
+**Products** surface where a merchant uploads a CSV to add and update products
+in bulk, and downloads a CSV of the full catalog at any time.
+
+**The shape of it:**
+
+- **One canonical CSV format**, Shopify-flavored: one row per variant,
+  consecutive rows sharing a `Handle` form one product (with its options,
+  variants, and images). The column set is a deliberate superset of Shopify's
+  product CSV — adding component columns (the kits seam, #15), volume,
+  cost/tax fields — so a Shopify export is structurally familiar and our
+  format never needs to churn when siblings arrive. The full column
+  specification is §6.
+- **Two accepted dialects, auto-detected:** the canonical format, and
+  Shopify's own product-CSV export (mapped onto canonical at the boundary).
+  The header row identifies the dialect; the merchant never picks from a
+  menu. This is the migrating merchant's path (BUC-1): their existing export
+  imports directly.
+- **Import is upsert-only.** A row whose `Handle` is new creates a product; a
+  known `Handle` updates it (variants matched by option-value combination).
+  Nothing is ever deleted by an import — the mechanism is non-destructive by
+  construction, so a partial file can never silently destroy catalog
+  (BUC-2's safety, structurally).
+- **Validate-all → preview → confirm.** The whole file is validated and
+  diffed against the catalog before anything is written. The merchant sees a
+  summary — N products to add, M to update, K rows in error — and can drill
+  into any record to see exactly which fields will change and to what.
+  Nothing applies until they confirm; confirming applies the valid records
+  and leaves the error rows listed, unapplied, and actionable (BUC-1a,
+  BUC-2). Unrecognized columns are warned about in the preview and ignored,
+  never silently dropped.
+- **Synchronous, with a stated capacity** of ~5,000 rows per file. No job
+  queue in the MVP; the design names the async seam for when catalogs
+  outgrow it (§6.9). One deliberate exception rides that seam's first rail:
+  **images**.
+- **Images are fetched and hosted.** `Image Src` URLs are downloaded into
+  platform object storage after the catalog rows commit, with renditions
+  (thumbnail / card / detail) generated at fetch. Images that can't be
+  fetched, aren't images, or fall below the resolution bar are **rejected**
+  (the product shows a placeholder), with the outcome reported per image.
+  The catalog is self-contained: exports reference our hosted copies, and
+  the storefront never depends on a third-party host staying alive.
+- **Imports are first-class records.** Every import run is kept — file name,
+  dialect detected, who ran it, add/update/error counts, image-fetch
+  outcomes — with a detail view the merchant can leave and return to
+  (the post-commit image phase reports there and on the Products page).
+- **Export is one gesture:** the complete catalog (optionally filtered by
+  status) as a canonical CSV. Export → re-import is lossless and idempotent —
+  the acceptance bar from #13 and BUC-4's round-trip guarantee.
+
+**Why this approach.** CSV is the medium merchant catalogs already live in:
+every platform exports it, every spreadsheet tool speaks it, and the
+migrating merchant (the sharpest pain, PP-2) holds one today. Accepting
+Shopify's dialect directly converts the largest migration population's
+existing artifact into a working catalog with zero transformation effort.
+Upsert-only plus preview-confirm makes a powerful bulk mechanism safe to hand
+to a non-technical merchant: the destructive operations simply don't exist,
+and every change is consented to with full knowledge (OHM: consent & agency).
+
+**Alternatives weighed** (detail in §6.7): a per-item editing UI first
+(rejected — Epic #12's explicit boundary, and it does nothing for migration);
+integration APIs / direct platform connectors (rejected — heavy, narrow, and
+premature before the catalog model exists); accepting spreadsheet formats
+(XLSX) (rejected for MVP — CSV covers the actual artifacts merchants hold;
+XLSX is an adapter behind the same boundary later); do-nothing / concierge
+data entry by the operator (rejected — doesn't scale past a demo and builds
+no product capability).
+
+**Solution-specific non-goals:** no deletion semantics of any kind in the
+CSV; no scheduled/automated re-import; no foreign dialects beyond Shopify's
+product CSV in the MVP; no kit *semantics* (the format carries the columns;
+#15 defines their meaning); no image editing/cropping — the platform hosts
+what the merchant's URLs provide, or rejects it.
+
+## 3. Product Personas
+
+| Product persona | In ecomm | Maps to business role(s) |
+| --- | --- | --- |
+| **Merchant** | The authenticated storefront owner (SD-0001 §3), now extended: manages their catalog from the admin's new **Products** section — imports, reviews, confirms, exports. The MVP's only authenticated user type. | Merchant; Migrating merchant |
+
+The **Platform builder** (§1.3) gets no persona of their own: they exercise
+the same Merchant surface with demo data (stand up a storefront, import a
+realistic catalog). The **Operator** persona (SD-0001) is untouched by this
+design.
+
+## 4. Product Use Cases
+
+Corpus grounding: scenario IDs cite the prototype corpus's products
+import/export scenarios
+([rfcs 11-05-0032–0037](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm-prototype-content/src/branch/main/rfcs)).
+Divergences are marked — the load-bearing one: the corpus matches rows to
+products **by SKU** (11-05-0035); this design matches products **by `Handle`**
+and variants **by option-value combination**, with SKU as correctable data
+(rationale in §6.7).
+
+**PUC-1 — The Products section exists, honestly** *(product-only; creates the surface #14 fills in)*
+
+```gherkin
+Scenario: PUC-1 — Products page, before and after a catalog exists
+  Given a Merchant in their storefront admin
+  When they open "Products" in the admin navigation
+  Then with an empty catalog they see an empty state: "No products yet",
+    a primary "Import products" action, and links to the sample CSV and
+    column reference
+  And with a populated catalog they see the product count, "Import products"
+    and "Export" actions, and the import history — with an honest note that
+    the browsable product list arrives with a coming release (#14)
+```
+
+**PUC-2 — Upload a file to import** *(realizes BUC-1; corpus 11-05-0034)*
+
+```gherkin
+Scenario: PUC-2 — A Merchant starts an import
+  Given a Merchant on the Products page
+  When they choose "Import products" and select a .csv file
+  Then the file uploads and a "Validating…" state shows progress
+  And they land on the import preview (PUC-3) when validation completes
+```
+
+**PUC-3 — Preview: see exactly what will happen** *(realizes BUC-2; the consent gate)*
+
+```gherkin
+Scenario: PUC-3 — The preview summarizes and lets the Merchant drill in
+  Given a Merchant whose file has been validated
+  Then they see which dialect was recognized ("Canonical" or "Shopify
+    product CSV — mapped")
+  And a summary: N products to add, M to update, U unchanged, K rows in error
+  And any columns that will not be imported, listed by name
+  And selecting any product in the preview shows its record-level detail:
+    fields to be set (for adds) or a field-by-field before → after diff
+    (for updates)
+  And nothing has been written to the catalog yet
+```
+
+```gherkin
+Scenario: PUC-3a — Declining costs nothing
+  Given a Merchant on the import preview
+  When they choose "Cancel"
+  Then they return to the Products page and the catalog is unchanged
+  And no trace of the canceled import remains in the import history
+```
+
+**PUC-4 — Confirm: the import applies** *(realizes BUC-1, BUC-3)*
+
+```gherkin
+Scenario: PUC-4 — Confirming applies the valid records
+  Given a Merchant on a preview showing additions and updates
+  When they choose "Import N products"
+  Then an "Importing…" state shows progress
+  And they land on the import run's detail page: products added, products
+    updated, rows in error (each listed and unapplied), and the image-fetch
+    phase begins (PUC-7)
+  And the catalog now holds exactly what the preview showed
+```
+
+**PUC-5 — Row errors come back actionable** *(realizes BUC-1a; corpus 11-05-0036)*
+
+```gherkin
+Scenario: PUC-5 — Bad rows are reported, good rows are not blocked
+  Given a Merchant's file where some rows are invalid (e.g. a malformed
+    price, a variant row whose options contradict its product)
+  Then the preview's error table lists each failed row: line number, the
+    column at fault, and what's wrong, in plain language
+  And confirming imports the valid rows and leaves the error rows unapplied
+  And the same error table remains on the import run's detail page
+```
+
+```gherkin
+Scenario: PUC-5a — A file the importer cannot work with is rejected whole
+  Given a Merchant uploads a file that is not parseable CSV, is missing a
+    required column (e.g. "Title"), exceeds the row capacity (§2), or
+    matches no known dialect
+  Then the upload is rejected with one clear message naming the problem
+  And nothing is imported and no import run is recorded
+```
+
+**PUC-6 — A Shopify export imports directly** *(realizes BUC-1; the migration path)*
+
+```gherkin
+Scenario: PUC-6 — A migrating Merchant brings their Shopify export
+  Given a Merchant with the product CSV their Shopify store exported
+  When they upload it unmodified
+  Then the preview shows "Shopify product CSV — mapped" and the standard
+    summary
+  And Shopify columns with no canonical equivalent are listed as not
+    imported (warned, never silent)
+  And confirming lands their catalog: products, variants, options, images,
+    prices, tags, status
+```
+
+**PUC-7 — Image outcomes are reported, not assumed** *(realizes BUC-1a for imagery)*
+
+```gherkin
+Scenario: PUC-7 — The image-fetch phase reports per image
+  Given a confirmed import whose records reference image URLs
+  Then the run detail shows live progress ("Fetching images: 312 of 4,950")
+  And when complete, each image's outcome: fetched, rejected (below the
+    resolution bar / not an image), or failed (unreachable)
+  And products whose images were rejected or failed show a placeholder and
+    are surfaced on the Products page — pre-#14 as an aggregate notice
+    ("N products have image problems") linking to the run detail; per-product
+    badges arrive with #14's list view
+  And the Merchant can re-import corrected URLs to retry (upsert, BUC-3)
+```
+
+**PUC-8 — Import history** *(realizes BUC-2's accountability)*
+
+```gherkin
+Scenario: PUC-8 — Past imports are reviewable
+  Given a Merchant who has run imports before
+  When they open the import history on the Products page
+  Then they see each run: when, file name, dialect, who ran it, and its
+    add / update / error / image-outcome counts
+  And opening a run shows its full detail page (PUC-4, PUC-5, PUC-7),
+    unchanged since the run finished
+```
+
+**PUC-9 — Export the catalog** *(realizes BUC-4; corpus 11-05-0032, 11-05-0033 — diverges: MVP filter is status only, vendor/collection filters deferred)*
+
+```gherkin
+Scenario: PUC-9 — One gesture produces the whole catalog
+  Given a Merchant on the Products page with a populated catalog
+  When they choose "Export" (optionally filtering by status:
+    all / active / draft / archived)
+  Then a canonical-format CSV downloads containing every matching product —
+    all variants, options, tags, prices, and image URLs (pointing at the
+    platform's hosted copies)
+  And with an empty catalog the "Export" action is disabled, with a note
+```
+
+**PUC-10 — The round-trip is visibly lossless** *(realizes BUC-3, BUC-4; the #13 acceptance bar)*
+
+```gherkin
+Scenario: PUC-10 — Re-importing an export is a no-op, and says so
+  Given a Merchant who exports their catalog and re-imports the file
+    unmodified
+  Then the preview shows every product as "unchanged" — nothing to add,
+    nothing to update, no errors
+  And the import action is unavailable, with the note "Nothing to change —
+    your catalog already matches this file"
+  And canceling leaves the catalog identical
+```
+
+**PUC-11 — Learning the format** *(realizes BUC-1 for the cold-start merchant)*
+
+```gherkin
+Scenario: PUC-11 — The sample CSV and column reference teach the shape
+  Given a Merchant who has never seen the canonical format
+  When they download the sample CSV from the Products page or import screen
+  Then it opens in their spreadsheet tool with a handful of example products —
+    including one with variants and one with images
+  And the linked column reference documents every column: name, meaning,
+    required or optional, accepted values
+```
+
+## 5. UX Layout
+
+Text is the source of truth; the committed **Claude Design hi-fi bundle** at
+[`ui/designs/SD-0002-products-bulk-csv-import-export/`](../ui/designs/SD-0002-products-bulk-csv-import-export/)
+renders these descriptions interactively (all four screens + states, built on
+the wiggleverse design-system bundle) and serves as SLICE-5's visual
+bootstrap artifact. Where bundle and prose disagree, this prose governs
+(GUIDE §3.2). All surfaces live inside SD-0001's admin shell (its header:
+storefront name left, signed-in email + sign out right; the bundle's sidebar
+treatment is indicative — the shell remains SD-0001's).
+
+### 5.1 Design tooling decision
+
+- **Decision:** Design → Code, with the Claude Design project scoped to: the
+  Products section (Products page · import upload · preview · run detail).
+  Export bundle committed at `ui/designs/SD-0002-products-bulk-csv-import-export/`;
+  per the rubric's integration note it is a **bootstrap artifact, not a
+  sync** — after SLICE-5 lands it, iteration happens in code, and Claude
+  Design returns only when a new spec independently scores for it.
+- **Rationale:** the rubric scored **−1 → Code directly** as drafted (Q1 +1
+  net-new section, Q2 −1 wireframe-level prose, Q3 0, Q4 +1 no app design
+  system, Q5 −1 solo review, Q6 −1 logic-dominant). The operator then ran
+  the Design step anyway — the shareable-artifact override in effect — and
+  produced the hi-fi bundle from this spec's §§4–5, validating the prose
+  rather than replacing it. Both the score and the actual path are recorded
+  so neither is re-litigated (D-14, §13).
+- **Design notes carried into implementation:** the bundle's thin
+  single-weight geometric icon set is flagged (by the bundle itself) as a
+  **net-new admin icon set**, not yet house brand; the design-system bundle
+  (`_ds/wiggleverse-design-system-…`) is the same one SD-0001's designs use.
+
+### 5.2 Screen: Products (serves PUC-1, PUC-7, PUC-8, PUC-9, PUC-11)
+
+- **Purpose:** the catalog's home in the admin; where imports start, exports
+  download, and past imports are reviewed. Created by this design; #14 fills
+  in the browsable list.
+- **Layout (top → bottom):**
+  - **Header row:** title "Products" + product count (e.g. "Products · 412");
+    actions right-aligned: secondary **"Export"** (opens a small menu: status
+    filter All / Active / Draft / Archived, then downloads — PUC-9; disabled
+    with a note when the catalog is empty), primary **"Import products"**
+    (→ §5.3).
+  - **Notices band (conditional):** image-problems aggregate notice — "N
+    products have image problems" linking to the most recent run's detail
+    (PUC-7); shown while any product's image status is rejected/failed.
+  - **Primary content, empty catalog:** empty state — "No products yet. Bulk
+    import is how product data gets in." with the **"Import products"**
+    action repeated, plus links **"Download sample CSV"** and **"Column
+    reference"** (PUC-11).
+  - **Primary content, populated catalog:** the honest pre-#14 state — the
+    product count and one line: "Your catalog is loaded. The browsable
+    product list arrives with an upcoming release." (replaced by #14's list).
+  - **Import history (section):** table of runs, newest first — date · file
+    name · dialect · added / updated / errors · image outcomes (e.g.
+    "4,938 ✓ · 12 ✗") · status (Importing… / Fetching images… / Complete /
+    Complete with problems). Row click → run detail (§5.5). Empty state: "No
+    imports yet."
+- **States:** loading: skeleton for count + history · error: honest failure
+  banner with retry (INV-9 spirit) · empty/populated per above.
+- **Notifications:** toasts for the two fire-and-forget gestures — export
+  started/completed and sample-CSV downloaded (a design-bundle refinement);
+  import outcomes never toast — they live on durable surfaces (preview, run
+  detail, notices band).
+
+### 5.3 Screen: Import — upload (serves PUC-2, PUC-5a, PUC-11)
+
+- **Purpose:** choose and validate a file.
+- **Layout:**
+  - **Header:** "Import products", back to Products.
+  - **Primary content:** drop zone / file picker ("CSV, up to 5,000 rows");
+    beneath it the format help: "Works with the canonical format or a Shopify
+    product export." + links to sample CSV and column reference (PUC-11).
+  - **Actions:** none beyond the picker — selecting a file starts upload +
+    validation immediately (one fewer click; canceling is free, PUC-3a).
+- **States:** idle · uploading/validating: progress ("Validating… 2,140 of
+  4,950 rows") with cancel · file-level rejection (PUC-5a): error banner
+  naming the one problem ("This file is missing the required column
+  'Title'"), picker remains for retry · success: → preview (§5.4).
+- **Notifications:** none (errors render in place).
+
+### 5.4 Screen: Import — preview (serves PUC-3, PUC-3a, PUC-5, PUC-6, PUC-10)
+
+- **Purpose:** the consent gate — see exactly what will happen, then decide.
+- **Layout:**
+  - **Header:** "Import preview — ⟨file name⟩"; dialect line: "Recognized:
+    Shopify product CSV — mapped to canonical" or "Canonical format" (PUC-6).
+  - **Warnings band (conditional):** columns not imported, listed by name
+    (unknown-column warning); collapsible when long.
+  - **Summary tiles:** **N to add · M to update · U unchanged · K errors** —
+    each tile filters the detail list below.
+  - **Detail list:** one row per product (grouped from its variant rows):
+    handle, title, change kind (add / update / unchanged / error), variant
+    count. Expanding a row drills in (PUC-3): adds show the fields to be
+    set; updates show a field-by-field **before → after** diff (only changed
+    fields, per variant where applicable); errors show the error detail.
+  - **Error table (under the errors filter):** line number · column · plain-
+    language problem ("row 214: 'Variant Price' — '12,50' is not a price").
+  - **Actions (sticky footer):** primary **"Import N products"** (disabled
+    when nothing valid to apply — all-unchanged reads "Nothing to change —
+    your catalog already matches this file", PUC-10); secondary **"Cancel"**
+    (returns to Products, no trace, PUC-3a).
+- **States:** the preview *is* a state machine of its content (mixes of
+  add/update/unchanged/error per above); plus stale-session expiry: a preview
+  left open past its validity window (§6) prompts re-validation rather than
+  applying stale diffs.
+- **Notifications:** none.
+
+### 5.5 Screen: Import run detail (serves PUC-4, PUC-5, PUC-7, PUC-8)
+
+- **Purpose:** the durable record of one confirmed import — what applied, what
+  errored, how the image fetch went. The post-confirm landing page and the
+  import-history destination.
+- **Layout:**
+  - **Header:** file name · imported ⟨relative time⟩ by ⟨email⟩ · dialect.
+  - **Result summary:** added / updated / errors counts (mirrors the preview's
+    final numbers).
+  - **Images section:** while fetching — progress "Fetching images: 312 of
+    4,950" (updates live); when done — outcome summary ("4,938 fetched ·
+    9 rejected · 3 failed") and an outcomes table listing only problems:
+    product handle · variant · image URL · outcome (rejected: below the
+    resolution bar / not an image · failed: unreachable) · what to do
+    ("correct the URL and re-import"). All-clean collapses to one line.
+  - **Error table:** the run's unapplied rows (line · column · problem),
+    exactly as the preview showed them (PUC-5).
+- **States:** applying ("Importing…") · fetching images · complete · complete
+  with problems (errors and/or image problems present).
+- **Notifications:** in-app only (decided: no email summaries in the MVP).
+
+## 6. Technical Design
+
+Builds on SD-0001's shipped architecture (FastAPI backend, layered
+`main → domains → platform` with import-linter enforcement; React/Vite admin
+SPA; PostgreSQL everywhere). Invariant numbering continues from SD-0001
+(INV-1…9) so citations stay unique app-wide.
+
+### 6.1 Invariants
+
+- **INV-10 — Import never deletes.** No code path of the import/export
+  mechanism removes a product, variant, or image record from the catalog.
+  The domain API exposes no bulk-delete; "upsert" is the only mutation.
+  *Enforced:* domain surface (no delete function exists) + tests asserting
+  catalog cardinality never decreases across any import.
+- **INV-11 — Nothing applies without confirmation.** Validation and preview
+  write nothing to catalog tables; only an explicit confirm mutates, and it
+  applies exactly the diff the preview showed — or refuses as stale
+  (BUC-2's faithfulness, mechanically). *Enforced:* the preview path holds
+  no write connection to catalog tables (tests assert zero writes); confirm
+  recomputes the diff and compares its fingerprint to the previewed one
+  (§6.5, PUC-3/4).
+- **INV-12 — Export → import round-trips to a no-op.** Exporting a catalog
+  and re-importing the file unmodified produces an empty diff (PUC-10,
+  issue #13's acceptance bar). The canonical codec is lossless for every
+  field the catalog stores. *Enforced:* property-style test — for arbitrary
+  catalogs: `diff(catalog, import(export(catalog))) = ∅`.
+- **INV-13 — `Handle` is product identity; the option-value combination is
+  variant identity.** Per storefront, one product per handle; per product,
+  one variant per (Option1, Option2, Option3) value combination. SKU is
+  correctable *data*, never identity. *Enforced:* unique indexes
+  (`(storefront_id, handle)`; `(product_id, option1_value, option2_value,
+  option3_value)`).
+- **INV-14 — Every catalog row carries its storefront.** All product-domain
+  tables reference `storefront_id` directly or via their product; every
+  query is storefront-scoped (extends SD-0001 INV-5 to its first real
+  tenant-data domain). *Enforced:* FK constraints + service-layer scoping +
+  tests with two storefronts asserting zero bleed.
+- **INV-15 — Imported HTML is sanitized at the boundary.** `Description`
+  HTML is sanitized against an allowlist (formatting tags; no scripts,
+  event handlers, or embeds) before storage. The catalog never stores HTML
+  we would not render. *Enforced:* sanitizer in the import path + tests
+  with hostile fixtures.
+- **INV-16 — Surfaces serve only hosted images.** No storefront or admin
+  surface ever hotlinks a merchant-supplied URL; an image is
+  fetched-and-hosted (with renditions) or it is a placeholder with a
+  tracked status. The source URL is retained as data (provenance, retry).
+  *Enforced:* render paths take storage keys, not URLs; tests.
+- **INV-17 — Dialects normalize at the boundary.** Every accepted file is
+  mapped to the canonical row model *before* validation and diffing; the
+  products domain knows exactly one model. A new dialect (XLSX, another
+  platform) is a new edge adapter, never a second code path through the
+  domain. *Enforced:* layering — dialect adapters live at the API/codec
+  edge; domain functions accept only canonical rows.
+- **INV-18 — Import work is bounded and fails honestly.** Hard caps,
+  rejected whole-file with a named reason (PUC-5a): ≤ 5,000 data rows,
+  ≤ 10 MB file. Image fetching is bounded per image (≤ 20 MB, 30 s
+  timeout, content-type must be an image format we process). Over a cap is
+  an honest refusal, never a partial silent attempt (SD-0001 INV-9).
+  *Enforced:* checks at the upload/fetch boundaries + tests at the caps.
+
+### 6.2 High-level architecture
+
+```mermaid
+flowchart LR
+  subgraph Browser
+    SPA[Admin SPA<br/>Products section §5]
+  end
+  subgraph "ecomm backend (FastAPI, one process)"
+    BFF[REST BFF<br/>main.py]
+    subgraph domains
+      ACC[accounts]
+      SF[storefronts]
+      PROD[products  ◄ new<br/>catalog · import/export<br/>csv codec · dialects · diff]
+    end
+    subgraph platform
+      DB[db<br/>Postgres + migrations]
+      OBJ[objectstore  ◄ new<br/>port: local / GCS]
+      IMG[images  ◄ new<br/>validate + renditions]
+      DEPS[deps]
+    end
+    BG[image-fetch task<br/>in-process, post-commit  ◄ new]
+  end
+  STORE[(PostgreSQL)]
+  GCS[(Object storage<br/>GCS · dev: local disk)]
+  HOSTS[Merchant image hosts<br/>egress fetch]
+
+  SPA -->|JSON + multipart /api/*| BFF
+  BFF --> PROD
+  BFF --> ACC
+  BFF --> SF
+  PROD --> DB
+  PROD --> OBJ
+  PROD --> IMG
+  DB --> STORE
+  OBJ --> GCS
+  BG --> HOSTS
+  BG --> OBJ
+  BG --> DB
+```
+
+- **`products` domain (new)** — owns the catalog (products, variants,
+  images) and the import/export use cases: the canonical row model, the CSV
+  codec (parse/serialize), dialect detection + the Shopify mapping
+  (INV-17), validation, the diff engine (catalog × canonical rows →
+  add/update/unchanged/error), upsert application (INV-10/11/13), import
+  drafts and runs. Must never mint identity or storefronts; everything it
+  touches is storefront-scoped (INV-14).
+- **`platform/objectstore` (new)** — a small port (`put / get / delete /
+  public_url`) with two adapters per the mailer pattern: local-disk
+  (dev/tests) and GCS (PPE/prod; bucket + credentials from deployment
+  config, SD-0001 INV-8). Owns no semantics.
+- **`platform/images` (new)** — pure image processing: verify the bytes are
+  a decodable image (jpeg/png/webp), check the resolution bar, emit
+  renditions (thumb ~160px / card ~480px / detail ≤ 1600px — downscale
+  only). Model-free, deterministic, no I/O of its own.
+- **Image-fetch task (new)** — the post-commit phase (PUC-7): an in-process
+  asyncio task per run that walks the run's pending images, fetches with
+  INV-18's bounds, runs `platform/images`, stores renditions via
+  `objectstore`, and updates per-image status + run progress. **This is the
+  async seam:** it is the only fire-and-forget work in the app; when
+  catalogs outgrow the in-process model, this task body moves onto a real
+  queue without changing its inputs/outputs (§6.9 covers crash recovery).
+- **REST BFF** — gains the `/api/products/*` endpoints (§6.4); still owns no
+  business logic (SD-0001 INV-6).
+- **Admin SPA** — gains the Products section (§5); renders what the BFF
+  returns; live progress is polling (no websockets in the MVP — deliberate).
+
+### 6.3 Data model & ownership
+
+All owned by the `products` domain; system of record PostgreSQL. Monetary
+values are `NUMERIC`; no currency column — the MVP is single-implicit-currency
+(open question Q-1, §13).
+
+| Entity | Key fields | Notes |
+| --- | --- | --- |
+| `product` | `id`, `storefront_id` (FK, INV-14), `handle` (unique per storefront, INV-13), `title`, `description_html` (sanitized, INV-15), `vendor`, `product_type` (`standalone`; `kit_virtual` / `kit_assembled` reserved for #15), `google_product_category`, `tags` (`text[]`), `status` (`draft \| active \| archived`), `published` (bool), `option1_name`…`option3_name`, timestamps | Option *names* live on the product; a no-option product has all names NULL and exactly one variant. |
+| `variant` | `id`, `product_id` (FK), `position`, `option1_value`…`option3_value` (unique combo per product, INV-13), `sku`, `barcode`, `price`, `cost`, `weight` + `weight_unit`, `volume` + `volume_unit`, `tax_id_1`, `tax_id_2`, `inventory_tracker`, `inventory_qty`, `image_id` (FK → `product_image`, nullable), timestamps | The no-option product's single variant has NULL option values (uniqueness via `NULLS NOT DISTINCT`). SKU is indexed (component references, #15) but not unique — it is data, not identity. |
+| `product_image` | `id`, `product_id` (FK), `position`, `source_url`, `alt_text`, `status` (`pending \| fetched \| rejected_low_res \| rejected_not_image \| failed`), `failure_reason`, storage keys (`original`, `thumb`, `card`, `detail`), `import_run_id` (FK — the run that introduced/last fetched it), `fetched_at` | Identity within a product is `source_url`: re-importing the same URL is "unchanged" — never re-fetched. A **platform-hosted URL** (an export's `Image Src`) resolves to the existing image record by storage key — never fetched (same storefront required, else row error; INV-12/14). A fetch happens only for a genuinely new URL, or as retry of a `failed`/`rejected` one. INV-16 governs serving. |
+| `import_draft` | `id`, `storefront_id`, `account_id`, `file_name`, `dialect`, file blob (objectstore key), diff summary + fingerprint, `unknown_columns`, `expires_at` (~1 h), `created_at` | The preview's server side. Canceled or expired drafts are deleted outright — no trace (PUC-3a). Never appears in history. |
+| `import_run` | `id`, `storefront_id`, `account_id`, `file_name`, `dialect`, counts (`products_added`, `products_updated`, `rows_errored`), `status` (`applying \| fetching_images \| complete \| complete_with_problems`), `created_at`, `completed_at` | Created only at confirm (PUC-4). The durable record (PUC-8). |
+| `import_run_error` | `id`, `run_id` (FK), `line_number`, `column_name`, `message` | One row per rejected CSV row (PUC-5); merchant-language message. |
+
+**Deliberately absent:** any `component` / kit table — the CSV format
+reserves the columns (§6.5 dialect spec), but the entities, validation, and
+meaning are #15's design. In this MVP a non-`standalone` `Type` or a
+non-empty `Component n` column is a row error ("kits arrive in a coming
+release").
+
+#### 6.3.1 Storage: GCP resources, layout & serving
+
+**Catalog data — Cloud SQL for PostgreSQL, no new resource.** The §6.3
+tables are additive forward-only migrations in the existing per-environment
+Cloud SQL instance (PPE: `ecomm-ppe-pg`; prod: its sibling when prod stands
+up). At MVP scale (≤ 5k products × ~30 columns + run/error records) this is
+tens of megabytes. Image *bytes* never enter Postgres (§6.7).
+
+**Image bytes — one GCS bucket per environment**, project
+`wiggleverse-ecomm`, same region as the VM, Standard class, uniform
+bucket-level access, versioning off, **no public access**. Provisioning is a
+flotilla/launch-app gesture (a `provision-bucket` sibling of
+`provision-datastore`), run by the operator when the first slice needing it
+reaches PPE (handbook §8.5); the bucket name reaches the app via deployment
+config (SD-0001 INV-8). The VM's service account gets
+`roles/storage.objectAdmin` scoped to this bucket only. Local dev and tests
+use the `objectstore` port's local-disk adapter under the identical key
+scheme — no GCS, no emulator.
+
+**Key layout** — tenant-scoped, immutable, cache-friendly:
+
+```
+gs://wiggleverse-ecomm-<env>-media/
+  storefronts/{storefront_id}/product-images/{image_id}/original        ← bytes as fetched
+  storefronts/{storefront_id}/product-images/{image_id}/thumb.webp      ← ~160px
+  storefronts/{storefront_id}/product-images/{image_id}/card.webp       ← ~480px
+  storefronts/{storefront_id}/product-images/{image_id}/detail.webp     ← ≤1600px
+  import-drafts/{draft_id}/upload.csv                                   ← preview blobs
+```
+
+- The `storefronts/{storefront_id}/` prefix extends INV-14 into storage.
+- Keys are `image_id`-addressed and **written once, never mutated** — a
+  changed image is a new image id, so every object is immutable and serves
+  with `Cache-Control: public, max-age=31536000, immutable`.
+- Renditions normalize to **WebP**; the `original` keeps its source format
+  (provenance; renditions can be re-derived if the bar or sizes change).
+- `import-drafts/` carries a **GCS lifecycle rule: delete after 1 day** —
+  the deterministic safety net behind app-level draft deletion (PUC-3a), so
+  a crash can never leak a merchant's uploaded file.
+
+**Serving — app-served with a CDN seam (decided, §6.7).** Surfaces load
+images from `GET /api/products/images/{image_id}/{rendition}` (§6.4): the
+app authorizes (image → storefront, INV-14/16), streams from the bucket, and
+sets the immutable cache headers. Exported `Image Src` URLs therefore live
+on the **app's own domain** — they survive the `market.wiggleverse.org`
+rebrand (#23) via ordinary redirects, and hosted-URL recognition (§6.3) is a
+same-origin path parse. **The seam:** when shopper-facing storefronts (#24)
+bring real image traffic, a CDN-fronted bucket (LB + Cloud CDN +
+`images.<domain>`) takes over the same keys; only the URL builder and the
+serving route change.
+
+### 6.4 Interfaces & contracts
+
+All under `/api/products/*`; session cookie + storefront membership required
+(SD-0001's gates); errors share SD-0001's shape
+`{"error": {"code", "message"}}`. Adding fields is free; renaming/removing is
+a spec change.
+
+| Endpoint | In | Out | Errors |
+| --- | --- | --- | --- |
+| `POST /api/products/imports` | multipart CSV file | `201 {draft}` — dialect, summary counts, `unknown_columns`, `expires_at` (draft persisted server-side, INV-11) | `400 not_csv` · `400 missing_required_column` · `400 unknown_dialect` · `400 too_many_rows` · `413 file_too_large` (all PUC-5a — no draft created) |
+| `GET /api/products/imports/drafts/{id}` | — | `200 {draft}` summary (re-fetch for the preview shell) | `404` · `410 draft_expired` |
+| `GET /api/products/imports/drafts/{id}/records` | `?kind=add\|update\|unchanged\|error`, paging | `200 {records: [{handle, title, kind, variant_count, detail}]}` — `detail` carries field-level before → after diffs (PUC-3) or the error rows | `404` · `410 draft_expired` |
+| `POST /api/products/imports/drafts/{id}/confirm` | — | `201 {run_id}` — diff re-computed and fingerprint-checked, applied in one transaction (INV-11), image task started, draft deleted | `404` · `410 draft_expired` · `409 preview_stale` (catalog changed since validation — re-upload) · `409 nothing_to_apply` (PUC-10) |
+| `DELETE /api/products/imports/drafts/{id}` | — | `204` — draft and its blob deleted, no trace (PUC-3a) | `404` (idempotent enough) |
+| `GET /api/products/imports/runs` | paging | `200 {runs: [...]}` — history, newest first (PUC-8) | — |
+| `GET /api/products/imports/runs/{id}` | — | `200 {run}` — counts, status, error rows, image outcomes + `image_progress {done, total}`; the SPA polls this while `status != complete*` (PUC-4/7) | `404` |
+| `GET /api/products/export` | `?status=all\|active\|draft\|archived` | `200 text/csv` (streamed) — canonical format, hosted image URLs (PUC-9, INV-12) | `409 empty_catalog` |
+| `GET /api/products/sample.csv` | — | `200 text/csv` — the documented sample (PUC-11) | — |
+| `GET /api/products/summary` | — | `200 {product_count, image_problem_count, latest_run_id}` — drives the Products page header + notice band (§5.2) | — |
+| `GET /api/products/images/{image_id}/{rendition}` | `rendition ∈ original\|thumb\|card\|detail` | `200 image bytes` — storefront-authorized, streamed from the bucket, `Cache-Control: immutable` (§6.3.1, INV-16) | `404` (incl. wrong storefront) · `409 not_fetched` (status ≠ fetched → SPA shows placeholder) |
+
+### 6.5 Per–Product-Use-Case design
+
+#### 6.5.1 The canonical CSV format (the contract behind every PUC)
+
+UTF-8 (BOM tolerated) · comma-delimited · RFC 4180 quoting · header row
+required · caps per INV-18.
+
+**Row grammar (Shopify-style):** consecutive rows sharing a `Handle` form one
+product. The product's first row carries the product-level fields (`Title`
+required there); each row may carry a variant (its `Option n Value`s +
+`Variant *` fields), an image (`Image Src` + `Image Position`/`Alt Text`),
+or both. Image-only rows (just `Handle` + `Image *`) are valid — that's how
+a product carries more images than variants.
+
+| Column | Level | Required | Notes |
+| --- | --- | --- | --- |
+| `Handle` | product | every row | identity (INV-13): lowercase letters, numbers, dashes |
+| `Title` | product | first row of a product | |
+| `Description` | product | — | HTML allowed; sanitized (INV-15) |
+| `Vendor` | product | — | free text |
+| `Type` | product | — | `standalone` (default); `kit_virtual` / `kit_assembled` reserved — non-`standalone` is a row error until #15 |
+| `Google Product Category` | product | — | taxonomy string |
+| `Tags` | product | — | comma-separated within the cell |
+| `Status` | product | — | `draft \| active \| archived`; default `active` on add |
+| `Published` | product | — | `TRUE \| FALSE`; default `TRUE` on add |
+| `Option1–3 Name` | product | with values | e.g. "Size"; a value without its name is a row error |
+| `Option1–3 Value` | variant | per variant | the variant's identity combo (INV-13) |
+| `Variant SKU`, `Variant Barcode` | variant | — | SKU indexed, not identity |
+| `Variant Price`, `Variant Cost` | variant | — | decimal; no currency (Q-1) |
+| `Variant Weight` + `Unit`, `Variant Volume` + `Unit` | variant | — | decimal + unit string |
+| `Variant Tax ID 1–2` | variant | — | opaque references |
+| `Variant Inventory Tracker`, `Variant Inventory Qty` | variant | — | qty integer ≥ 0 |
+| `Variant Position` | variant | — | display order; defaults to file order |
+| `Image Src`, `Image Position`, `Image Alt Text` | image | — | URL (or platform-hosted URL on re-import — §6.3) |
+| `Variant Image` | variant | — | URL for this variant's specific image |
+| `Component 1–10 SKU` / `Quantity` | variant | — | **reserved for #15** — non-empty is a row error ("kits arrive in a coming release") |
+
+**Update semantics (blank vs absent):** a column *absent from the file* is
+untouched by the import; a cell *present but empty* clears that field (or
+resets it to its default). The preview's diff shows clears explicitly — this
+is previewable, deliberate behavior, not a footgun (INV-11).
+
+**The Shopify dialect** is recognized by its exact header set and mapped at
+the boundary (INV-17): `Body (HTML)` → `Description`, `Product Category` →
+`Google Product Category`, `Cost per item` → `Variant Cost`,
+`Variant Grams`/`Variant Weight Unit` → weight fields; `Handle`, `Title`,
+`Vendor`, `Tags`, `Status`, `Published`, options, SKU/barcode/price,
+inventory and image columns map directly. Shopify columns with no canonical
+home — `Type` (Shopify's free-text type), `Compare At Price`, SEO fields,
+Google Shopping fields, fulfillment/shipping/tax-code flags, `Gift Card` —
+are **warned as not-imported** in the preview (PUC-6); the implementation
+plan pins the exhaustive mapping table as a fixture.
+
+#### 6.5.2 Import: upload → validate → preview (PUC-2, PUC-3, PUC-3a, PUC-5a, PUC-6)
+
+```mermaid
+sequenceDiagram
+  actor M as Merchant
+  participant S as SPA
+  participant A as BFF
+  participant P as products domain
+  participant O as objectstore
+  participant D as Postgres
+  M->>S: select CSV file
+  S->>A: POST /api/products/imports (multipart)
+  A->>P: import_validate(storefront, file)
+  P->>P: parse · detect dialect · map to canonical (INV-17)
+  alt file-level problem (PUC-5a)
+    P-->>A: not_csv / missing_required_column / unknown_dialect / too_many_rows
+    A-->>S: 400 — no draft, no trace
+  else valid file
+    P->>P: validate rows · diff against catalog (read-only, INV-11)
+    P->>O: store file blob (private)
+    P->>D: insert import_draft (summary, fingerprint, expires_at)
+    A-->>S: 201 draft {dialect, counts, unknown_columns}
+    S-->>M: preview (§5.4); records paged via GET …/records
+  end
+  opt cancel (PUC-3a)
+    M->>S: Cancel
+    S->>A: DELETE …/drafts/{id}
+    A->>P: discard(draft) — row + blob deleted, no trace
+  end
+```
+
+The diff engine compares canonical rows to the storefront's catalog
+per-product: field-by-field over product, variants (matched by option combo,
+INV-13), and images (matched by `source_url`, with platform-hosted URLs
+resolved to existing records — §6.3 — so an exported file diffs clean,
+INV-12). Every product classifies as add / update / unchanged / error;
+errors carry line + column + merchant-language message (PUC-5).
+
+#### 6.5.3 Import: confirm → apply (PUC-4, PUC-5, PUC-10)
+
+```mermaid
+sequenceDiagram
+  actor M as Merchant
+  participant S as SPA
+  participant A as BFF
+  participant P as products domain
+  participant D as Postgres
+  participant T as image-fetch task
+  M->>S: "Import N products"
+  S->>A: POST …/drafts/{id}/confirm
+  A->>P: import_apply(draft)
+  P->>P: recompute diff · compare fingerprint (INV-11)
+  alt fingerprint differs
+    P-->>A: 409 preview_stale → re-upload
+  else nothing to apply (PUC-10)
+    P-->>A: 409 nothing_to_apply
+  else applies
+    P->>D: ONE transaction: upsert products/variants/images (INV-10/13),<br/>insert import_run + errors, delete draft
+    P->>T: start(run) — images with status=pending
+    A-->>S: 201 {run_id}
+    S-->>M: run detail (§5.5), polling
+  end
+```
+
+Per-image work in the transaction: new `source_url` → `pending` row;
+unchanged URL → untouched; platform-hosted URL → resolved, untouched;
+prior `failed`/`rejected` URL re-supplied → reset to `pending` (the retry
+path, PUC-7).
+
+#### 6.5.4 The image-fetch phase (PUC-7)
+
+```mermaid
+sequenceDiagram
+  participant T as image-fetch task
+  participant H as merchant image host
+  participant I as platform/images
+  participant O as objectstore
+  participant D as Postgres
+  loop pending images of the run (bounded concurrency ~4)
+    T->>H: GET source_url (INV-18 bounds: 20 MB · 30 s · SSRF guard §6.6)
+    alt unreachable / oversize / wrong type
+      T->>D: status=failed + reason
+    else bytes received
+      T->>I: decode · resolution bar · renditions (thread pool)
+      alt not an image / below the bar
+        T->>D: status=rejected_* + reason
+      else ok
+        T->>O: put original + thumb/card/detail
+        T->>D: status=fetched + storage keys
+      end
+    end
+    T->>D: bump run image_progress
+  end
+  T->>D: run status → complete / complete_with_problems
+```
+
+Idempotent per image (keyed by image id; statuses only move
+`pending → terminal`), so the task can die and resume at any point (§6.9).
+The SPA polls `GET …/runs/{id}` for progress and outcomes.
+
+#### 6.5.5 Export (PUC-9) · the simple PUCs
+
+Export streams the catalog (optionally status-filtered) through the canonical
+serializer — the same codec the importer parses (one codec, two directions;
+INV-12 is a property of that codec plus hosted-URL resolution). `Image Src`
+carries the hosted `detail`-rendition URL (or the original `source_url` for
+never-fetched/`failed` images, so nothing is lost). PUC-1 (Products page) is
+`GET /api/products/summary`; PUC-8 (history) is the runs list/detail
+endpoints; PUC-11 (sample CSV) is a static documented asset served at
+`GET /api/products/sample.csv` and linked from the column reference (DOC-2,
+§11).
+
+### 6.6 Non-functional requirements & cross-cutting concerns
+
+- **Security & privacy:** all endpoints behind SD-0001's session +
+  storefront-membership gates; every query storefront-scoped (INV-14).
+  **SSRF guard on image fetch:** http/https only, public IPs only (resolve
+  and reject private/link-local/metadata ranges), no redirects across the
+  guard, bounded size/time (INV-18). HTML sanitization at the boundary
+  (INV-15). Uploaded file blobs are private objects, deleted with their
+  draft; catalog data is merchant business data (no shopper PII in this
+  feature). Run records and errors are retained indefinitely (they are the
+  merchant's audit trail); drafts expire in ~1 h.
+- **Performance & scale:** validate + diff ≤ 5,000 rows in < 10 s
+  (one catalog read, in-memory diff); apply in one transaction < 5 s;
+  export streams (no whole-catalog buffering); image phase: ~4 concurrent
+  fetches, Pillow in a worker thread pool — a 5,000-image run completes in
+  tens of minutes *in the background* without touching request latency.
+- **Availability & resilience:** the import transaction is short; the image
+  task is resumable across restarts/deploys (§6.9); a dead merchant image
+  host degrades to per-image `failed`, never a hung import.
+- **Observability hooks:** `import_run.id` is the correlation id — the
+  fetch task and all run-scoped log lines carry it (substance in §9).
+- **Accessibility:** preview/summary tiles and tables keyboard-navigable;
+  progress updates `aria-live`; diff colors paired with +/− glyphs (not
+  color-only).
+
+### 6.7 Key decisions & alternatives considered
+
+| Decision | Chosen | Alternatives considered | Why chosen |
+| --- | --- | --- | --- |
+| Matching identity | `Handle` for products, option-combo for variants (INV-13) | SKU as identity (the corpus's 11-05-0035) | Real catalogs have missing/duplicated SKUs; a SKU typo must be *correctable by import*, which identity can't be. Divergence from corpus recorded in §4. |
+| Image handling | Fetch-and-host with renditions; reject low-res | Hotlink merchant URLs; validate-only + hotlink; accept low-res with warning | Hotlinking leaks shopper traffic to third parties, rots, and breaks INV-16; rejected-low-res keeps every hosted image renderable at all surfaces (operator decision). |
+| Image timing | Post-commit background phase | Fetch during import (stalls minutes); fetch at preview (wasted on cancel) | Catalog lands in seconds; images are the async seam's first tenant. |
+| Background model | In-process asyncio task, resumable | Job queue (Cloud Tasks/celery); cron sweep | No queue infra for an MVP with one fire-and-forget job; the task body is queue-portable when scale demands (§6.9 names the seam). |
+| Preview state | Server-side `import_draft` + fingerprint | Client holds the diff and posts it back; re-validate blindly at confirm | The server applying exactly what it previewed is INV-11; a client-posted diff is unverifiable; fingerprint check catches catalog drift honestly (`409 preview_stale`). |
+| Format | Canonical = Shopify-flavored superset | Invent a clean format; exact Shopify schema | Familiarity + migration head start without inheriting Shopify's gaps (no kit seam, no volume/tax fields). |
+| Shopify free-text `Type` | Warned, not imported | Map into `Tags`; map into canonical `Type` | Canonical `Type` is structural (`standalone`/kits, #15); silently folding a category string into it (or tags) invents data the merchant didn't write. |
+| Blank vs absent | Absent column untouched; empty cell clears | Empty cell ignored (Shopify-ish); empty cell always clears including absent | Merchants must be able to clear a field via import; the preview shows every clear (INV-11), making the sharper semantic safe. |
+| Progress delivery | SPA polls run detail | WebSockets/SSE | One poll endpoint, no connection infra; seconds-stale progress is fine for this UX. |
+| Notifications | In-app only | Email summaries via SmtpMailer | Operator decision; revisit if imports go async/long. |
+| Object storage | New `platform/objectstore` port (local/GCS) | Store images as DB blobs; reuse a public bucket directly in domain code | Follows the mailer port pattern (SD-0001); DB blobs bloat backups and can't serve renditions efficiently. |
+| Image serving | App-served route + private bucket, CDN seam named (§6.3.1) | Public bucket with direct GCS URLs; CDN + custom domain now; signed URLs | Exported URLs stay on the app domain (rebrand-safe #23, hosted-URL recognition trivial); bucket stays private; CDN waits for shopper traffic (#24). Signed URLs ruled out — expiry poisons the round-trip (INV-12). |
+| Rendition format | WebP renditions, original kept as-source | Keep source format everywhere; AVIF | WebP: universal browser support + good compression; original retained so renditions can be re-derived (incl. a future AVIF tier). |
+
+### 6.8 Testing strategy
+
+Two-tier per handbook §9: unit/integration locally and in CI; E2E browser
+tests (Playwright) against localhost and PPE as the pipeline gates.
+
+- **Unit — codec & dialects:** parse/serialize round-trip property tests
+  (INV-12: `diff(catalog, import(export(catalog))) = ∅` over generated
+  catalogs); a real Shopify export fixture mapping correctly; unknown-column
+  warning extraction; blank-vs-absent semantics; every §6.5.1 row-error rule
+  has a fixture.
+- **Unit — diff engine:** add/update/unchanged/error classification;
+  option-combo matching incl. the no-option single variant; hosted-URL
+  resolution (no re-fetch); clear-vs-untouched fields; fingerprint stability.
+- **Unit — images:** `platform/images` against fixture bytes (good jpeg/png/
+  webp, tiny image, not-an-image, oversize); rendition dimensions.
+- **Unit — sanitizer:** hostile HTML fixtures (scripts, handlers, embeds).
+- **Integration:** apply transactionality (a mid-apply failure leaves zero
+  catalog change); two-storefront isolation (INV-14); fetch-task resume
+  after a simulated kill; SSRF guard against private-range URLs.
+- **E2E browser scenarios (named):**
+  `e2e_import_preview_confirm` (canonical file → preview counts → drill-in
+  diff → confirm → run detail → summary count updated);
+  `e2e_import_shopify_dialect` (unmodified Shopify fixture, mapped banner +
+  not-imported warnings); `e2e_import_errors_actionable` (bad rows: error
+  table lists line/column/reason; valid rows import);
+  `e2e_import_file_rejected` (missing `Title` column — whole-file message,
+  no run recorded); `e2e_import_cancel_no_trace`;
+  `e2e_roundtrip_noop` (export → re-import → all-unchanged, import action
+  disabled); `e2e_export_download` (status filter respected);
+  `e2e_image_outcomes` (fixture image host serving one good / one 404 / one
+  tiny image → statuses, placeholder, Products-page notice). The E2E suite
+  runs against a local fixture image host (no real egress in tests).
+- **Bootstrap:** SD-0001's INV-1 test extends — fresh DB → sign-up →
+  storefront → import sample CSV → export matches.
+
+### 6.9 Failure modes, rollback & flags
+
+- **Failure mode:** crash mid-apply → **behavior:** transaction rolls back —
+  zero catalog change; draft intact; SPA shows honest error →
+  **rollback:** none needed → **alerted by:** ALR-2 (§9.3).
+- **Failure mode:** process restart (deploy) mid image-fetch →
+  **behavior:** on startup, a recovery scan finds runs in `fetching_images`
+  with `pending` images and resumes the task; per-image idempotency (§6.5.4)
+  makes re-entry safe → **alerted by:** TEL/log line on recovery; ALR-3 if a
+  run stays incomplete past threshold.
+- **Failure mode:** merchant image host down/slow → **behavior:** per-image
+  timeout → `failed` with reason; run completes `complete_with_problems`;
+  retry is a re-import (PUC-7) → no alert (expected operation).
+- **Failure mode:** object storage unavailable → **behavior:** affected
+  images `failed` honestly; uploads (drafts) refuse with a clear error →
+  **alerted by:** ALR-3.
+- **Failure mode:** draft expiry / catalog drift between preview and confirm
+  → **behavior:** `410 draft_expired` / `409 preview_stale`; UI prompts
+  re-upload — never applies stale diffs (INV-11).
+- **Feature flag / kill switch:** none — the Products section ships whole;
+  rollback is redeploying the prior version (pipeline §7.3). Migrations are
+  additive new tables, so the prior version runs unaffected against the
+  migrated schema (SD-0001 INV-7 forward-only).
+- **The async seam, named:** if catalogs outgrow the in-process model
+  (imports > 5k rows, image sets taking hours), the fetch-task body moves
+  onto a real queue (Cloud Tasks or a worker process) with identical
+  inputs/outputs; `import_run`/`product_image` statuses already model the
+  asynchrony, so the UX and API do not change shape.
+
+### 6.10 Migration & compatibility
+
+Greenfield within a live app: no existing catalog data to migrate. New
+additive tables (§6.3) via forward-only migrations (SD-0001 INV-7); the
+admin nav gains "Products"; no existing endpoint or contract changes.
+SD-0001's INV-1 (empty is a working state) holds — an empty catalog is the
+designed Products-page empty state. **Backwards compatibility:** none owed
+yet (no external API consumers). **Cutover:** ships whole behind the
+ordinary release pipeline; no dual-write, no point of no return short of
+merchants having imported real data (which INV-10/12 protect).
+
+## 7. Delivery Plan
+
+Slice numbering continues app-wide from SD-0001 (SLICE-1…4), like the
+invariants: this design owns **SLICE-5…8**.
+
+### 7.1 Approach / strategy
+
+**Spine first, infra second, compatibility last.** The codec + diff engine is
+the design's novel heart and its riskiest logic — it lands first, with the
+full preview/confirm UX, so the consent model (INV-11) is real from day one.
+Export lands second and immediately locks the round-trip property (INV-12)
+while the data model is still images-light — cheaper to fix losslessness bugs
+before the image pipeline complicates identity. Images land third (the
+infra-heaviest slice: first GCS bucket, first background work). The Shopify
+dialect lands last: by then it is a pure mapping at a stable, well-tested
+boundary (INV-17), not a moving target. SLICE-8 can run in parallel with
+SLICE-7 if sessions overlap — it touches only the dialect adapter and docs.
+
+Execution convention per the standard: each slice is its own coding session —
+just-in-time implementation plan → execute → verify → ship through the §9
+pipeline → merge + version bump — in dependency order. The design pass
+happens once, here; if executing a slice proves this spec wrong, amend the
+spec, then replan.
+
+### 7.2 Slicing plan
+
+#### SLICE-5 — Import spine (canonical, no images) → completes PUC-1, PUC-2, PUC-3 (+3a), PUC-4, PUC-5 (+5a), PUC-8, and PUC-11's sample download
+
+- **Depends on:** — (SD-0001 shipped surfaces only)
+- **Ships:** `products` domain + §6.3 tables (images table present;
+  fetch phase stubbed to no-op); canonical parser, validation, diff engine,
+  draft/confirm/run endpoints (§6.4); Products page, upload, preview with
+  drill-in, run detail (no images section), import history; sample CSV.
+- **Definition of done:** BUC-1/1a/2 acceptance criteria met for the
+  canonical path; INV-10/11/13/14/15/18 enforced + unit/integration suites
+  green; E2E green: `e2e_import_preview_confirm`,
+  `e2e_import_errors_actionable`, `e2e_import_file_rejected`,
+  `e2e_import_cancel_no_trace`; TEL-1/2/6 emitting + ALR-2 live (§9);
+  DOC-1 updated; DOC-3 sample shipped.
+
+#### SLICE-6 — Export & the round-trip lock → completes PUC-9, PUC-10
+
+- **Depends on:** SLICE-5
+- **Ships:** canonical serializer (one codec, two directions), streamed
+  export endpoint + status filter UI, `nothing_to_apply` no-op preview
+  behavior, the INV-12 property test over text-field catalogs.
+- **Definition of done:** BUC-3/4 acceptance criteria met; INV-12 property
+  test green in CI; E2E green: `e2e_export_download`, `e2e_roundtrip_noop`;
+  TEL-3 emitting; DOC-1 updated.
+
+#### SLICE-7 — Images pipeline end-to-end → completes PUC-7
+
+- **Depends on:** SLICE-6 (export must exist so hosted-URL round-trip is
+  testable the day hosted URLs exist)
+- **Ships:** `platform/objectstore` (local + GCS adapters) and
+  `platform/images`; **the per-environment media bucket — provisioned via
+  the flotilla `provision-bucket` gesture when this slice reaches PPE
+  (§6.3.1, handbook §8.5)**; fetch task with SSRF guard, bounds, and
+  restart recovery; image-serving endpoint; hosted-URL resolution in diff
+  and export (INV-12 extended over images); run-detail images section,
+  Products-page notice band; INV-16 in force.
+- **Definition of done:** PUC-7 acceptance met; INV-12 property test
+  extended over image URLs; integration: fetch-resume after kill, SSRF
+  fixtures; E2E green: `e2e_image_outcomes` (fixture image host); TEL-4/5 +
+  ALR-3 live; DOC-1 updated (bucket gesture documented in the operator
+  guide).
+
+#### SLICE-8 — Shopify dialect + public format docs → completes PUC-6, PUC-11
+
+- **Depends on:** SLICE-5 (codec boundary); parallelizable with SLICE-7
+- **Ships:** header-set dialect detection, the Shopify→canonical mapping
+  with its exhaustive fixture table (§6.5.1), preview's "mapped" banner +
+  not-imported warnings; the **column reference** public doc + final sample
+  CSV (DOC-2/3 — the §7.3 launch gate for the migration path).
+- **Definition of done:** BUC-1 acceptance met for an unmodified real
+  Shopify export fixture; E2E green: `e2e_import_shopify_dialect`; DOC-2/3
+  published; traceability matrix (§12) audited complete.
+
+### 7.3 Rollout / launch plan
+
+Via the mandatory pipeline (handbook §9), per slice: localhost + E2E → PPE
+(`https://ecomm-ppe.wiggleverse.org`) + E2E → prod. **Prod does not exist
+yet** (SD-0001's prod stand-up under `market.wiggleverse.org` is the cursor's
+next stop): any slice completing before it lands ships to a green PPE and
+rides the prod stand-up when it arrives — the PPE gate is never skipped
+either way. Infra provisioned on demand at the stage that needs it
+(§8.5-handbook): the media bucket at SLICE-7's PPE arrival (and again at its
+prod arrival), operator-run. Prod is a single in-place slot (no blue/green
+yet, per SD-0001). Rollback per slice = redeploy prior version (additive
+migrations keep it safe, §6.10). **Non-code launch gates:** DOC-2/3 (column
+reference + sample) published before SLICE-8 exposes the migration path;
+§9.3 monitoring live with its slice; support path = tracker, pre-v1 (§10.2).
+
+### 7.4 Risks & mitigations
+
+| Risk | Likelihood / impact | Mitigation |
+| --- | --- | --- |
+| Diff-engine edge cases (blank-vs-absent, option matching, no-option variants) breed subtle catalog corruption | M / H | Property tests + per-rule fixtures (§6.8); INV-11 preview faithfulness makes any miss visible before it applies; INV-10 caps the blast radius (nothing deletes) |
+| 5k-row validate+diff misses the < 10 s target on the shared VM | M / M | Measure at SLICE-5 with a 5k fixture; the cap is config, can drop without spec change (INV-18); async seam already named |
+| Shopify export format drifts or has regional variants | M / M | Detection by exact header set fails *honestly* to `unknown_dialect` (never misparses); mapping is fixture-pinned; unknown columns warn rather than fail |
+| Image fetch is an attack surface (SSRF, decompression bombs) | M / H | §6.6 guard (public IPs only, no cross-guard redirects, size/time/type bounds, Pillow decode caps) + integration fixtures |
+| Deploy cadence kills in-process fetch tasks mid-run | M / L | Restart recovery is designed-in (§6.9) and integration-tested; per-image idempotency |
+| Bucket provisioning gesture stalls SLICE-7 at PPE (operator availability) | L / L | Gesture named in the slice DoD; flotilla command handed to operator at session start, not discovery at deploy time |
+| Scope creep toward in-app editing ("just one edit form") | L / M | §1.7 boundary + INV-10; editing is a future epic, not a slice |
+
+## 8. Success Metrics & Measurement
+
+### 8.1 Business success metrics
+
+| Outcome | Measured by (source) | Baseline captured how | Owner | Review cadence |
+| --- | --- | --- | --- | --- |
+| BO-1 (catalog adoption) | # storefronts with `product_count > 0`, and upload→confirmed-run conversion time (TEL-1, TEL-2 + DB) | Trivially zero pre-launch (no mechanism exists) | Ben | Monthly |
+| BO-2 (in-platform upkeep) | # storefronts with ≥ 2 confirmed runs; days between runs (TEL-2) | Zero pre-launch | Ben | Monthly |
+| BO-3 (no lock-in) | Export availability (uptime of the endpoint) + exports performed (TEL-3) | n/a — exists from SLICE-6 | Ben | Quarterly |
+| BO-4 (downstream unblocked) | #14 / #15 delivery proceeding against imported catalogs | Tracker record, not telemetry | Ben | Per Feature |
+
+### 8.2 Product success metrics
+
+| # | Metric (scores PUC-n) | Target | Fed by | Review cadence |
+| --- | --- | --- | --- | --- |
+| PM-1 | Import completion: share of merchants who, having uploaded a file, reach a confirmed run within 24 h (PUC-2→4) | ≥ 80% | TEL-1 + TEL-2 | Monthly |
+| PM-2 | Row-error rate per confirmed run — proxies how learnable the format and how actionable our errors are (PUC-5, PUC-11) | median < 5% | TEL-2 | Monthly |
+| PM-3 | Image fetch success per run (PUC-7) | ≥ 95% fetched | TEL-4 | Monthly |
+| PM-4 | Upload→preview latency, ≤ 5k-row files (PUC-3) | p95 < 10 s | TEL-1 | Monthly |
+
+## 9. Telemetry, Observability & Monitoring
+
+Scaled to the single-VM deployment: structured log events + a handful of
+log-based alerts. Deliberately omitted: metrics stack, tracing, dashboards —
+the runs list (PUC-8) *is* the import dashboard; revisit at shopper-traffic
+scale (#24).
+
+### 9.1 Telemetry
+
+Log-event telemetry (structured JSON, app log). No file names, no URLs, no
+catalog content in events — counts and durations only (file names/URLs stay
+in DB records the merchant owns). No secret bytes ever (hard rule §6.3-handbook).
+
+| # | Event / signal | Trigger | Payload (shape) | Privacy class / retention | Consumed by |
+| --- | --- | --- | --- | --- | --- |
+| TEL-1 | `import_draft_created` | validation completes, draft stored | `storefront_id, dialect, row_count, adds, updates, unchanged, errors, unknown_columns_count, duration_ms` | none / log retention (30 d) | PM-1, PM-4, BO-1 |
+| TEL-2 | `import_run_completed` | apply transaction commits | `run_id, storefront_id, added, updated, errored, duration_ms` | none / 30 d | BO-1, BO-2, PM-1, PM-2 |
+| TEL-3 | `catalog_exported` | export streamed | `storefront_id, status_filter, product_count, duration_ms` | none / 30 d | BO-3 |
+| TEL-4 | `image_phase_completed` | a run's fetch task finishes | `run_id, fetched, rejected, failed, duration_ms` | none / 30 d | PM-3, ALR-3 |
+| TEL-5 | `image_phase_recovered` | startup recovery resumes a run | `run_id, pending_resumed` | none / 30 d | ALR-3, RB-3 |
+| TEL-6 | `import_apply_failed` | apply transaction aborts unexpectedly | `draft_id, storefront_id, error_class` | none / 30 d | ALR-2 |
+
+### 9.2 Observability
+
+- **Logs:** structured JSON to stdout → journald (Cloud Logging where the VM
+  agent ships them); every run-scoped line carries `run_id` (§6.6); 30-day
+  retention.
+- **Metrics / traces:** none beyond TEL events — deliberate at this scale.
+- **Health:** `/healthz` unchanged (process, DB, migrations — SD-0001).
+  Image-task health is *data*, not a health endpoint: runs stuck in
+  `fetching_images` are visible in the runs list and caught by ALR-3.
+- **Dashboards:** none; "is the import healthy?" → the import history
+  (PUC-8); "why did it fail?" → logs filtered by `run_id`.
+
+### 9.3 Monitoring & alerts
+
+SLO/ALR numbering continues app-wide (SLO-1/ALR-1 are SD-0001's health-check
+pair under the deploy contract).
+
+| # | SLO | Window | Protects |
+| --- | --- | --- | --- |
+| SLO-2 | 95% of validations (≤ 5k rows) complete < 10 s | 30 d | PUC-3 responsiveness (PM-4) |
+| SLO-3 | 99% of image phases reach a terminal state < 60 min | 30 d | PUC-7 — outcomes arrive while the merchant still cares |
+
+| # | Alert / monitor | Condition / threshold | Severity | Notifies | Runbook |
+| --- | --- | --- | --- | --- | --- |
+| ALR-2 | Import apply failing | any TEL-6 event | notify (email, log-based alert) | operator (Ben) | RB-2 |
+| ALR-3 | Image phase stuck | run in `fetching_images` > 2 h, or same run recovered (TEL-5) ≥ 3× | notify | operator (Ben) | RB-3 |
+
+Pre-v1 honesty: "notify" is a log-based email alert, no paging.
+
+## 10. Operations
+
+### 10.1 Operational plan
+
+- **Operators / roles:** Ben (operator); no on-call — pre-v1 alerts are
+  notify-only.
+- **Routine tasks:** none daily. Per release: the §7.3 pipeline. Monthly:
+  glance at bucket size/cost against the §10.3 guardrail. One-time per
+  environment: the `provision-bucket` flotilla gesture (SLICE-7).
+- **Runbooks** (RB-1 is SD-0001's health-restore; numbering continues):
+
+| # | Runbook | Answers | Lives at |
+| --- | --- | --- | --- |
+| RB-2 | Import apply failed: locate by `draft_id`/`run_id` in logs; confirm rollback left catalog unchanged (INV-11); advise re-upload; file bug | ALR-2 | operator guide (framework repo), DOC-1 |
+| RB-3 | Image phase stuck: check task log by `run_id`; verify bucket reachability + SA permissions; restart app — startup recovery resumes idempotently (§6.9) | ALR-3 | operator guide, DOC-1 |
+| RB-4 | Provision the media bucket (the flotilla gesture, per environment) | SLICE-7 stand-up | operator guide, DOC-1 |
+
+### 10.2 Support & incident response
+
+Pre-v1, one line: the operator self-supports; problems are filed on the
+tracker (`wiggleverse/wiggleverse-ecomm` issues); affected merchants (when
+they exist) hear back on their issue.
+
+### 10.3 Maintenance & lifecycle
+
+- **Dependency patching:** Patchwatch → remediation pipeline, as app-wide.
+  Note the new patch-sensitive surface: **Pillow** (image decoding of
+  untrusted bytes) and the HTML sanitizer — prioritize their advisories.
+- **Backup / restore:** catalog data rides Cloud SQL automated backups
+  (existing). Image objects: immutable keys + GCS soft delete (7 d) are the
+  MVP story; **no cross-region bucket backup yet** — accepted pre-v1 risk
+  (originals are re-importable only while merchant URLs live), revisit at
+  prod stand-up alongside the restore drill (Q-2, §13).
+- **Capacity & cost:** ~5k images ≈ 10–15 GB ≈ well under $1/mo storage;
+  serving egress rides the VM. Guardrail: the project billing budget alert
+  (scaffold default) flags drift.
+- **Deprecation / sunset:** this mechanism is the MVP's only mutation path;
+  when a future editing epic arrives, import/export persists as the bulk
+  path (no sunset) — only its "only mechanism" status retires.
+
+## 11. Documentation plan
+
+- **Where docs live:** spec — content repo (this file); developer docs +
+  operator guide — framework repo; merchant-facing format docs — served by
+  the app itself (the admin links them, PUC-11).
+
+| # | Document | Audience | Location | New / updated | Owned by slice |
+| --- | --- | --- | --- | --- | --- |
+| DOC-1 | Operator guide: import/export ops — RB-2/3/4, bucket gesture, caps/config surface | operator | framework repo operator guide | updated | every slice (5–8) |
+| DOC-2 | CSV column reference (every column: meaning, required, accepted values; dialect notes) | merchant | app-served page, source in framework repo | new | SLICE-8 |
+| DOC-3 | Sample CSV (worked examples incl. variants + images) | merchant | app-served asset (`sample.csv`) | new SLICE-5; finalized SLICE-8 | SLICE-5 / SLICE-8 |
+| DOC-4 | `products` domain dev notes (canonical model, diff engine, dialect adapters, objectstore/images ports) | developer | framework repo | new | SLICE-5, extended 6–8 |
+
+DOC-2/3 are the §7.3 launch gate for the migration path: published before
+SLICE-8 ships. Docs update in the same PR/slice as the change they describe
+(§4.1-handbook).
+
+## 12. Traceability matrix
+
+| Pain | Business UC | Product UC | Slice | Tests | Measured by |
+| --- | --- | --- | --- | --- | --- |
+| PP-1 dead-end storefront | BUC-1 | PUC-1, PUC-2, PUC-3, PUC-4 | SLICE-5 | `e2e_import_preview_confirm`; bootstrap test (§6.8) | BO-1 / PM-1 ← TEL-1, TEL-2 |
+| PP-2 re-keying to migrate | BUC-1, BUC-1a | PUC-5, PUC-5a, PUC-6, PUC-11 | SLICE-5, SLICE-8 | `e2e_import_shopify_dialect`, `e2e_import_errors_actionable`, `e2e_import_file_rejected` | BO-1 / PM-2 ← TEL-1, TEL-2 |
+| PP-3 no batch gesture | BUC-2, BUC-3 | PUC-3, PUC-3a, PUC-4, PUC-10 | SLICE-5, SLICE-6 | `e2e_import_cancel_no_trace`, `e2e_roundtrip_noop`; INV-12 property test | BO-2 / PM-1 ← TEL-2 |
+| PP-3 (imagery upkeep) | BUC-1a | PUC-7 | SLICE-7 | `e2e_image_outcomes`; fetch-resume + SSRF integration | PM-3 ← TEL-4, TEL-5 |
+| PP-4 builders blocked | BUC-1 | PUC-1…PUC-11 (the mechanism itself) | SLICE-5–8 | bootstrap test end-to-end | BO-4 (tracker record) |
+| PP-5 trapped data | BUC-4 | PUC-9, PUC-10 | SLICE-6 | `e2e_export_download`, `e2e_roundtrip_noop` | BO-3 ← TEL-3 |
+
+Audit: every PUC lands in a slice (PUC-11's sample in SLICE-5, finalized
+SLICE-8); every BUC is realized; every BO has a §8.1 source; every
+TEL event is consumed (§9.1); both alerts have runbooks (§9.3 → §10.1).
+
+## 13. Open Questions & Decisions log
+
+Question/decision numbering is per-spec (SD-0001's D-1…8 and Q-1…3 are its
+own; cite cross-spec as "SD-0002 D-13").
+
+**Open**
+
+| # | Question | Owner | Blocks |
+| --- | --- | --- | --- |
+| Q-1 | Currency: prices are bare decimals with one implicit currency. When does a storefront get a currency setting, and what happens to existing imports then? | Ben | nothing in this MVP; revisit before checkout/orders work |
+| Q-2 | Bucket backup: no cross-region backup of image objects pre-v1 (accepted risk, §10.3). Decide backup + restore drill at prod stand-up. | Ben | prod hardening, not this Feature |
+| Q-3 | The exact image resolution bar (minimum dimensions for `rejected_low_res`) — pinned in SLICE-7's implementation plan against real merchant fixtures. | SLICE-7 session | SLICE-7 only |
+
+**Resolved** (operator decisions, brainstorming session ecomm-0030; technical
+rationale for engineering choices lives in §6.7)
+
+| # | Decision | Resolution | Date |
+| --- | --- | --- | --- |
+| D-1 | Canonical column set | Shopify-flavored superset, operator-specified (§6.5.1): options/variants, images, inventory, cost/weight/volume/tax, kit-seam `Component` columns | 2026-06-11 |
+| D-2 | Foreign dialects | Canonical + Shopify product CSV, auto-detected by header set; merchant never picks | 2026-06-11 |
+| D-3 | Deletion semantics | Upsert-only; the CSV mechanism never deletes (INV-10) | 2026-06-11 |
+| D-4 | Kits scope | Seam only: format reserves `Type` values + `Component` columns; semantics are #15's | 2026-06-11 |
+| D-5 | Import flow | Validate-all → preview with per-record drill-in diffs → confirm; sync now (~5k rows), async seam named | 2026-06-11 |
+| D-6 | Error delivery | On-screen (preview + run detail) only; no email summaries | 2026-06-11 |
+| D-7 | UI home | A Products page created by this design; #14 fills in the list | 2026-06-11 |
+| D-8 | Variant identity | Option-value combination; SKU is correctable data (diverges from corpus 11-05-0035, §6.7) | 2026-06-11 |
+| D-9 | Images | Fetch-and-host with renditions at fetch; post-commit background phase; **reject** low-res (placeholder) rather than accept-with-warning | 2026-06-11 |
+| D-10 | Export shape | Full catalog + status filter; canonical format; hosted image URLs | 2026-06-11 |
+| D-11 | Format learning | Sample CSV + column reference, app-served (DOC-2/3) | 2026-06-11 |
+| D-12 | Re-import of images | Platform-hosted and already-fetched URLs are never re-fetched; fetch only new URLs + retries of failed/rejected (round-trip integrity, INV-12) | 2026-06-11 |
+| D-13 | Storage & serving | Catalog in existing Cloud SQL (additive); images in a per-env private GCS bucket, app-served with immutable caching; CDN named as the #24 seam (§6.3.1) | 2026-06-11 |
+| D-14 | Design artifact | Operator ran the Claude Design step (overriding the rubric's Code-directly score); hi-fi bundle committed at `ui/designs/SD-0002-…/` as SLICE-5's bootstrap artifact; prose (§5) remains the source of truth (§5.1) | 2026-06-11 |
+
+## 14. Glossary & References
+
+- **Handle** — a product's stable identifier in the CSV and the catalog:
+  lowercase letters, numbers, dashes (INV-13).
+- **Variant** — one purchasable form of a product, identified by its
+  option-value combination; every product has ≥ 1 (a no-option product has
+  exactly one).
+- **Option** — a named axis of variation ("Size"); names live on the
+  product, values on the variant.
+- **Canonical row model** — the internal representation every dialect maps
+  to before validation (INV-17).
+- **Dialect** — an accepted CSV header-shape: canonical or Shopify product
+  CSV.
+- **Draft vs run** — a *draft* is an unconfirmed, expiring preview (no
+  trace if canceled); a *run* is the durable record of a confirmed import.
+- **Rendition** — a derived image size (thumb / card / detail), generated at
+  fetch, immutable.
+- **Hosted URL** — an `Image Src` pointing at this platform's image-serving
+  route; resolves to an existing image record, never fetched.
+- **Upsert** — add-or-update by identity; this mechanism's only mutation.
+- **Round-trip** — export → re-import of the unmodified file diffs to
+  nothing (INV-12).
+- **References:** anchor [#13](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm/issues/13) ·
+  epic [#12](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm/issues/12) ·
+  siblings [#14](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm/issues/14),
+  [#15](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm/issues/15) ·
+  [SD-0001](./SD-0001-mvp-sign-up-and-single-storefront.md) ·
+  corpus [rfcs 11-05-0032–0037](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm-prototype-content/src/branch/main/rfcs) ·
+  [research/shopify/products](https://git.wiggleverse.org/wiggleverse/wiggleverse-ecomm-prototype-content/src/branch/main/research/shopify/products/products.md) ·
+  Shopify product-CSV documentation (external; the dialect fixture is the
+  binding artifact, §6.5.1) · handbook §§3.3, 4.3, 8.5, 9.
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/.thumbnail b/ui/designs/SD-0002-products-bulk-csv-import-export/.thumbnail
new file mode 100644
index 0000000..57d5134
Binary files /dev/null and b/ui/designs/SD-0002-products-bulk-csv-import-export/.thumbnail differ
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/Products - Bulk CSV Import.html b/ui/designs/SD-0002-products-bulk-csv-import-export/Products - Bulk CSV Import.html
new file mode 100644
index 0000000..e3ad2f5
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/Products - Bulk CSV Import.html	
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Products — Bulk CSV Import / Export</title>
+
+<!-- Wiggleverse design system: tokens + webfonts (one entry point @imports the rest) -->
+<link rel="stylesheet" href="_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/styles.css" />
+
+<style>
+  /* ---- paper-canvas + status tokens (status hues defined in oklch-adjacent
+         muted tones that harmonize with the violet/ink palette; never color-only) ---- */
+  :root {
+    --paper-line:        rgba(60, 47, 122, .12);
+    --paper-line-strong: rgba(60, 47, 122, .22);
+    --violet-tint:       rgba(124, 111, 224, .10);
+    --violet-line:       rgba(124, 111, 224, .28);
+    --add-tint:          rgba(31, 138, 91, .10);
+
+    --st-add:        #1F8A5B; --st-add-tint:    rgba(31,138,91,.10);  --st-add-line:    rgba(31,138,91,.30);
+    --st-update:     #B5830F; --st-update-tint: rgba(181,131,15,.12); --st-update-line: rgba(181,131,15,.32);
+    --st-error:      #C2513E; --st-error-tint:  rgba(194,81,62,.10);  --st-error-line:  rgba(194,81,62,.30);
+    --st-muted:      #6A5E94; --st-muted-tint:  rgba(106,94,148,.10); --st-muted-line:  rgba(106,94,148,.24);
+  }
+
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    font-family: var(--font-body);
+    background: var(--surface-paper);
+    color: var(--text-on-light);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+  ::selection { background: var(--wv-lilac-32); }
+
+  @keyframes ie-spin { to { transform: rotate(360deg); } }
+  @keyframes ie-toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
+
+  /* hover affordances */
+  .ie-hrow:hover { background: var(--violet-tint); }
+  .ie-samplefile:hover { border-color: var(--violet-line) !important; transform: translateY(-1px); }
+  .ie-prow:hover { background: var(--violet-tint) !important; }
+  .ie-stat[data-active="0"]:hover { transform: translateY(-1px); border-color: var(--paper-line-strong) !important; }
+  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
+    outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px;
+  }
+
+  /* density */
+  [data-density="compact"] td { padding-top: .55rem !important; padding-bottom: .55rem !important; }
+  [data-density="compact"] .ie-prow { padding-top: .6rem !important; padding-bottom: .6rem !important; }
+
+  @media (prefers-reduced-motion: reduce) {
+    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
+  }
+
+  code { font-family: ui-monospace, Menlo, Consolas, monospace; }
+</style>
+</head>
+<body>
+<div id="ie-root"></div>
+
+<script>
+  // Benign, non-actionable browser notification emitted by ResizeObserver-based
+  // layout (the Tweaks panel). Swallow only this exact message.
+  window.addEventListener('error', function (e) {
+    if (e && e.message && e.message.indexOf('ResizeObserver loop') !== -1) {
+      e.stopImmediatePropagation();
+    }
+  });
+</script>
+
+<!-- React + Babel (pinned) -->
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+
+<!-- Wiggleverse component bundle (plain compiled JS — needs window.React) -->
+<script src="_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_ds_bundle.js"></script>
+
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+
+<!-- app (order: data → ui → shell/products/importflow → tweaks → app) -->
+<script type="text/babel" src="app/data.jsx"></script>
+<script type="text/babel" src="app/ui.jsx"></script>
+<script type="text/babel" src="app/shell.jsx"></script>
+<script type="text/babel" src="app/products.jsx"></script>
+<script type="text/babel" src="app/importflow.jsx"></script>
+<script type="text/babel" src="app/tweaks-panel.jsx"></script>
+<script type="text/babel" src="app/app.jsx"></script>
+</body>
+</html>
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_adherence.oxlintrc.json b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_adherence.oxlintrc.json
new file mode 100644
index 0000000..236d2d9
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_adherence.oxlintrc.json
@@ -0,0 +1,378 @@
+{
+  "plugins": [
+    "react",
+    "import"
+  ],
+  "rules": {
+    "react/forbid-elements": [
+      "warn",
+      {
+        "forbid": []
+      }
+    ],
+    "no-restricted-imports": [
+      "warn",
+      {
+        "patterns": [
+          {
+            "group": [
+              "components/brand/**",
+              "components/cards/**",
+              "components/core/**",
+              "components/navigation/**",
+              "ui_kits/wiggleverse-www/**"
+            ],
+            "message": "Import design-system components from 'index.js', not component internals."
+          }
+        ]
+      }
+    ],
+    "no-restricted-syntax": [
+      "warn",
+      {
+        "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
+        "message": "Raw hex color — use a design-system color token via var()."
+      },
+      {
+        "selector": "Literal[value=/\\b\\d+px\\b/]",
+        "message": "Raw px value — use a design-system spacing token via var()."
+      },
+      {
+        "selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Space Grotesk|Inter|Fraunces))/i]",
+        "message": "Font not provided by the design system. Available: Space Grotesk, Inter, Fraunces."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='BrandLockup'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|size|href|showWordmark|assetBase|key|ref|className|style|children)$/]",
+        "message": "<BrandLockup> doesn't accept that prop. Declared props: variant, size, href, showWordmark, assetBase."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='BrandLockup'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|footer|onLight)$/]",
+        "message": "<BrandLockup> variant must be one of 'primary' | 'footer' | 'onLight'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='BuildCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:tag|title|children|key|ref|className|style|children)$/]",
+        "message": "<BuildCard> doesn't accept that prop. Declared props: tag, title, children."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|href|onLight|disabled|type|onClick|key|ref|className|style|children)$/]",
+        "message": "<Button> doesn't accept that prop. Declared props: children, variant, href, onLight, disabled, type, onClick."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|ghost)$/]",
+        "message": "<Button> variant must be one of 'primary' | 'ghost'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit|reset)$/]",
+        "message": "<Button> type must be one of 'button' | 'submit' | 'reset'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Callout'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|onLight|key|ref|className|style|children)$/]",
+        "message": "<Callout> doesn't accept that prop. Declared props: children, onLight."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Eyebrow'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|onLight|as|key|ref|className|style|children)$/]",
+        "message": "<Eyebrow> doesn't accept that prop. Declared props: children, onLight, as."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Notice'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|key|ref|className|style|children)$/]",
+        "message": "<Notice> doesn't accept that prop. Declared props: children."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='PathCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:icon|title|children|href|first|key|ref|className|style|children)$/]",
+        "message": "<PathCard> doesn't accept that prop. Declared props: icon, title, children, href, first."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='FooterColumn'] > JSXAttribute > JSXIdentifier[name!=/^(?:heading|links|key|ref|className|style|children)$/]",
+        "message": "<FooterColumn> doesn't accept that prop. Declared props: heading, links."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='NavLink'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|href|cta|key|ref|className|style|children)$/]",
+        "message": "<NavLink> doesn't accept that prop. Declared props: label, href, cta."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Soul'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|size|tone|onLight|as|key|ref|className|style|children)$/]",
+        "message": "<Soul> doesn't accept that prop. Declared props: children, size, tone, onLight, as."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Soul'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
+        "message": "<Soul> size must be one of 'sm' | 'md' | 'lg'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Soul'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:gold|plain|lilac)$/]",
+        "message": "<Soul> tone must be one of 'gold' | 'plain' | 'lilac'."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|onLight|key|ref|className|style|children)$/]",
+        "message": "<Tag> doesn't accept that prop. Declared props: children, variant, onLight."
+      },
+      {
+        "selector": "JSXOpeningElement[name.name='Tag'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:live|soon)$/]",
+        "message": "<Tag> variant must be one of 'live' | 'soon'."
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": [
+        "**/index.js"
+      ],
+      "rules": {
+        "no-restricted-imports": "off"
+      }
+    }
+  ],
+  "x-omelette": {
+    "components": {
+      "BrandLockup": {
+        "replaces": []
+      },
+      "BuildCard": {
+        "replaces": []
+      },
+      "Button": {
+        "replaces": []
+      },
+      "Callout": {
+        "replaces": []
+      },
+      "Eyebrow": {
+        "replaces": []
+      },
+      "Notice": {
+        "replaces": []
+      },
+      "PathCard": {
+        "replaces": []
+      },
+      "FooterColumn": {
+        "replaces": []
+      },
+      "NavLink": {
+        "replaces": []
+      },
+      "Soul": {
+        "replaces": []
+      },
+      "Tag": {
+        "replaces": []
+      }
+    },
+    "tokens": [
+      "--accent",
+      "--accent-on-light",
+      "--border-card",
+      "--border-card-w",
+      "--border-hair",
+      "--border-soft",
+      "--border-strong",
+      "--btn-border-w",
+      "--cta",
+      "--cta-hover",
+      "--cta-text",
+      "--dur-fast",
+      "--dur-mid",
+      "--ease",
+      "--focus-ring",
+      "--font-body",
+      "--font-display",
+      "--font-soul",
+      "--glass-blur",
+      "--glass-sky",
+      "--leading-body",
+      "--leading-tight",
+      "--lift-1",
+      "--lift-3",
+      "--measure-lead",
+      "--measure-prose",
+      "--page-hero-pad",
+      "--radius-card",
+      "--radius-mark",
+      "--radius-panel",
+      "--radius-pill",
+      "--radius-sm",
+      "--section-pad",
+      "--shadow-none",
+      "--shadow-soft",
+      "--space-0",
+      "--space-1",
+      "--space-10",
+      "--space-12",
+      "--space-2",
+      "--space-3",
+      "--space-4",
+      "--space-5",
+      "--space-6",
+      "--space-8",
+      "--surface-card-light",
+      "--surface-footer",
+      "--surface-paper",
+      "--surface-raised",
+      "--surface-raised-hi",
+      "--surface-sky",
+      "--text-body",
+      "--text-eyebrow",
+      "--text-fine",
+      "--text-h1",
+      "--text-h2",
+      "--text-h3",
+      "--text-lead",
+      "--text-on-dark",
+      "--text-on-dark-mute",
+      "--text-on-dark-soft",
+      "--text-on-light",
+      "--text-on-light-soft",
+      "--text-small",
+      "--text-soul",
+      "--text-tag",
+      "--tracking-display",
+      "--tracking-eyebrow",
+      "--tracking-notice",
+      "--tracking-tag",
+      "--weight-bold",
+      "--weight-medium",
+      "--weight-regular",
+      "--weight-semibold",
+      "--weight-soul",
+      "--wrap-gutter",
+      "--wrap-max",
+      "--wv-font-body",
+      "--wv-font-display",
+      "--wv-font-human",
+      "--wv-gold",
+      "--wv-gold-28",
+      "--wv-gold-40",
+      "--wv-gold-hi",
+      "--wv-gold-ink",
+      "--wv-gold-ink-soft",
+      "--wv-indigo",
+      "--wv-indigo-2",
+      "--wv-ink",
+      "--wv-lilac",
+      "--wv-lilac-08",
+      "--wv-lilac-12",
+      "--wv-lilac-16",
+      "--wv-lilac-18",
+      "--wv-lilac-32",
+      "--wv-midnight",
+      "--wv-night",
+      "--wv-paper",
+      "--wv-starlight",
+      "--wv-starlight-55",
+      "--wv-starlight-60",
+      "--wv-starlight-78",
+      "--wv-starlight-85",
+      "--wv-violet"
+    ],
+    "tokenKinds": {
+      "--wv-midnight": "color",
+      "--wv-indigo": "color",
+      "--wv-indigo-2": "color",
+      "--wv-lilac": "color",
+      "--wv-violet": "color",
+      "--wv-gold": "color",
+      "--wv-gold-hi": "color",
+      "--wv-starlight": "color",
+      "--wv-paper": "color",
+      "--wv-ink": "color",
+      "--wv-night": "color",
+      "--wv-gold-ink": "color",
+      "--wv-gold-ink-soft": "color",
+      "--wv-lilac-08": "color",
+      "--wv-lilac-12": "color",
+      "--wv-lilac-16": "color",
+      "--wv-lilac-18": "color",
+      "--wv-lilac-32": "color",
+      "--wv-gold-28": "color",
+      "--wv-gold-40": "color",
+      "--wv-starlight-85": "color",
+      "--wv-starlight-78": "color",
+      "--wv-starlight-60": "color",
+      "--wv-starlight-55": "color",
+      "--surface-sky": "color",
+      "--surface-raised": "color",
+      "--surface-raised-hi": "color",
+      "--surface-paper": "color",
+      "--surface-card-light": "color",
+      "--surface-footer": "color",
+      "--text-on-dark": "font",
+      "--text-on-dark-soft": "font",
+      "--text-on-dark-mute": "font",
+      "--text-on-light": "font",
+      "--text-on-light-soft": "font",
+      "--accent": "color",
+      "--accent-on-light": "color",
+      "--cta": "color",
+      "--cta-hover": "color",
+      "--cta-text": "font",
+      "--border-soft": "color",
+      "--border-card": "color",
+      "--border-strong": "color",
+      "--focus-ring": "color",
+      "--wv-font-display": "font",
+      "--wv-font-body": "font",
+      "--wv-font-human": "font",
+      "--font-display": "font",
+      "--font-body": "font",
+      "--font-soul": "font",
+      "--weight-regular": "font",
+      "--weight-medium": "font",
+      "--weight-semibold": "font",
+      "--weight-bold": "font",
+      "--weight-soul": "font",
+      "--text-h1": "font",
+      "--text-h2": "font",
+      "--text-h3": "font",
+      "--text-lead": "font",
+      "--text-soul": "font",
+      "--text-body": "font",
+      "--text-small": "font",
+      "--text-fine": "font",
+      "--text-eyebrow": "font",
+      "--text-tag": "font",
+      "--leading-tight": "font",
+      "--leading-body": "font",
+      "--tracking-display": "font",
+      "--tracking-eyebrow": "font",
+      "--tracking-tag": "font",
+      "--tracking-notice": "font",
+      "--measure-lead": "spacing",
+      "--measure-prose": "spacing",
+      "--space-0": "spacing",
+      "--space-1": "spacing",
+      "--space-2": "spacing",
+      "--space-3": "spacing",
+      "--space-4": "spacing",
+      "--space-5": "spacing",
+      "--space-6": "spacing",
+      "--space-8": "spacing",
+      "--space-10": "spacing",
+      "--space-12": "spacing",
+      "--section-pad": "spacing",
+      "--page-hero-pad": "spacing",
+      "--wrap-max": "spacing",
+      "--wrap-gutter": "spacing",
+      "--radius-card": "radius",
+      "--radius-panel": "radius",
+      "--radius-sm": "radius",
+      "--radius-pill": "radius",
+      "--radius-mark": "radius",
+      "--border-hair": "spacing",
+      "--border-card-w": "spacing",
+      "--btn-border-w": "spacing",
+      "--shadow-none": "shadow",
+      "--shadow-soft": "shadow",
+      "--lift-1": "other",
+      "--lift-3": "other",
+      "--glass-sky": "color",
+      "--glass-blur": "spacing",
+      "--ease": "other",
+      "--dur-fast": "other",
+      "--dur-mid": "other"
+    },
+    "fontFamilies": [
+      "Fraunces",
+      "Inter",
+      "Space Grotesk"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_ds_bundle.js b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_ds_bundle.js
new file mode 100644
index 0000000..eeb1b38
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_ds_bundle.js
@@ -0,0 +1,959 @@
+/* @ds-bundle: {"format":3,"namespace":"WiggleverseDesignSystem_94cd80","components":[{"name":"BrandLockup","sourcePath":"components/brand/BrandLockup.jsx"},{"name":"BuildCard","sourcePath":"components/cards/BuildCard.jsx"},{"name":"PathCard","sourcePath":"components/cards/PathCard.jsx"},{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"Callout","sourcePath":"components/core/Callout.jsx"},{"name":"Eyebrow","sourcePath":"components/core/Eyebrow.jsx"},{"name":"Notice","sourcePath":"components/core/Notice.jsx"},{"name":"Soul","sourcePath":"components/core/Soul.jsx"},{"name":"Tag","sourcePath":"components/core/Tag.jsx"},{"name":"SiteFooter","sourcePath":"components/navigation/SiteFooter.jsx"},{"name":"SiteHeader","sourcePath":"components/navigation/SiteHeader.jsx"}],"sourceHashes":{"components/brand/BrandLockup.jsx":"70ef76a92b84","components/cards/BuildCard.jsx":"f4588d77bd79","components/cards/PathCard.jsx":"f8779016b751","components/core/Button.jsx":"58601f356762","components/core/Callout.jsx":"4347df19558c","components/core/Eyebrow.jsx":"38c0374f060f","components/core/Notice.jsx":"471101cf1c07","components/core/Soul.jsx":"d1b2ddeea071","components/core/Tag.jsx":"192ca2a7e57d","components/navigation/SiteFooter.jsx":"61fbdd9cf145","components/navigation/SiteHeader.jsx":"6541bfe8e43a","ui_kits/wiggleverse-www/app.jsx":"f0cea1954d57"},"inlinedExternals":[],"unexposedExports":[]} */
+
+(() => {
+
+const __ds_ns = (window.WiggleverseDesignSystem_94cd80 = window.WiggleverseDesignSystem_94cd80 || {});
+
+const __ds_scope = {};
+
+(__ds_ns.__errors = __ds_ns.__errors || []);
+
+// components/brand/BrandLockup.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Wiggleverse BrandLockup — the mark + "Wiggleverse" wordmark, linked home.
+ * 'primary' uses the gradient mark on dark; 'footer' uses the mono-gold mark;
+ * 'onLight' uses the ink mark for paper. Wordmark is Space Grotesk 700, never italic.
+ */
+function BrandLockup({
+  variant = 'primary',
+  size = 34,
+  href = '/',
+  showWordmark = true,
+  assetBase = '/assets',
+  ...rest
+}) {
+  const marks = {
+    primary: 'wiggleverse-mark.svg',
+    footer: 'mark-mono-gold.svg',
+    onLight: 'mark-on-light.svg'
+  };
+  const wordColor = variant === 'onLight' ? 'var(--wv-ink)' : 'var(--wv-starlight)';
+  // Resolve asset relative to the given base so the lockup works from any depth.
+  const src = `${assetBase}/${marks[variant] || marks.primary}`;
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: href,
+    "aria-label": "Wiggleverse home",
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '.55rem',
+      textDecoration: 'none'
+    }
+  }, rest), /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: "",
+    width: size,
+    height: size,
+    style: {
+      width: size,
+      height: size
+    }
+  }), showWordmark && /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontFamily: 'var(--wv-font-display)',
+      fontWeight: 'var(--weight-bold)',
+      fontSize: `${Math.round(size * 0.0338 * 10) / 10}rem`,
+      letterSpacing: 'var(--tracking-display)',
+      color: wordColor
+    }
+  }, "Wiggleverse"));
+}
+Object.assign(__ds_scope, { BrandLockup });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/brand/BrandLockup.jsx", error: String((e && e.message) || e) }); }
+
+// components/cards/BuildCard.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Wiggleverse BuildCard — a portfolio item on a paper section. White card with
+ * a violet hairline, a status Tag, title, and copy. Built for light backgrounds.
+ */
+function BuildCard({
+  tag,
+  title,
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    style: {
+      padding: '1.4rem',
+      borderRadius: 'var(--radius-card)',
+      border: '1px solid rgba(124,111,224,.3)',
+      background: 'var(--surface-card-light)'
+    }
+  }, rest), tag && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: '.6rem'
+    }
+  }, tag), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontFamily: 'var(--wv-font-display)',
+      fontWeight: 'var(--weight-bold)',
+      fontSize: 'var(--text-h3)',
+      margin: '0 0 .35rem',
+      color: 'var(--wv-ink)',
+      letterSpacing: 'var(--tracking-display)'
+    }
+  }, title), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: 0,
+      fontSize: 'var(--text-small)',
+      lineHeight: 1.55,
+      color: 'var(--text-on-light-soft)'
+    }
+  }, children));
+}
+Object.assign(__ds_scope, { BuildCard });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/cards/BuildCard.jsx", error: String((e && e.message) || e) }); }
+
+// components/cards/PathCard.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Wiggleverse PathCard — the audience-router doorway. A raised indigo card with
+ * a glyph icon, title, and one line of copy. Hover lifts -3px and the border
+ * warms to lilac. 'first' gives it a gold border (the recommended door).
+ */
+function PathCard({
+  icon,
+  title,
+  children,
+  href = '#',
+  first = false,
+  ...rest
+}) {
+  const [hover, setHover] = React.useState(false);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: href,
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    style: {
+      display: 'block',
+      padding: '1.2rem',
+      borderRadius: 'var(--radius-card)',
+      background: hover ? 'var(--surface-raised-hi)' : 'var(--surface-raised)',
+      border: `1px solid ${first ? 'var(--wv-gold)' : hover ? 'var(--wv-lilac)' : 'var(--border-card)'}`,
+      color: 'var(--wv-starlight)',
+      textDecoration: 'none',
+      transform: hover ? 'var(--lift-3)' : 'none',
+      transition: 'transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease)'
+    }
+  }, rest), icon && /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    style: {
+      fontSize: '1.5rem'
+    }
+  }, icon), /*#__PURE__*/React.createElement("h3", {
+    style: {
+      fontFamily: 'var(--wv-font-display)',
+      fontWeight: 'var(--weight-bold)',
+      fontSize: 'var(--text-h3)',
+      margin: '.5rem 0 .25rem',
+      color: 'var(--wv-starlight)',
+      letterSpacing: 'var(--tracking-display)'
+    }
+  }, title), /*#__PURE__*/React.createElement("p", {
+    style: {
+      margin: 0,
+      fontSize: 'var(--text-fine)',
+      lineHeight: 1.5,
+      color: 'var(--wv-starlight-78)'
+    }
+  }, children));
+}
+Object.assign(__ds_scope, { PathCard });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/cards/PathCard.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Button.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Wiggleverse Button — pill action in the machine register (Space Grotesk 500).
+ * Primary = gold horizon CTA; ghost = lilac-outlined. Hover lifts -1px (never a shadow).
+ */
+function Button({
+  children,
+  variant = 'primary',
+  href,
+  onLight = false,
+  disabled = false,
+  type = 'button',
+  onClick,
+  ...rest
+}) {
+  const base = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '.4em',
+    fontFamily: 'var(--wv-font-display)',
+    fontWeight: 'var(--weight-medium)',
+    fontSize: 'var(--text-body)',
+    lineHeight: 1,
+    padding: '.7rem 1.25rem',
+    borderRadius: 'var(--radius-pill)',
+    border: 'var(--btn-border-w) solid transparent',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    textDecoration: 'none',
+    opacity: disabled ? 0.5 : 1,
+    transition: 'transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)'
+  };
+  const variants = {
+    primary: {
+      background: 'var(--cta)',
+      color: 'var(--cta-text)'
+    },
+    ghost: {
+      background: 'transparent',
+      borderColor: onLight ? 'var(--wv-violet)' : 'var(--wv-lilac)',
+      color: onLight ? 'var(--wv-ink)' : 'var(--wv-starlight)'
+    }
+  };
+  const style = {
+    ...base,
+    ...(variants[variant] || variants.primary)
+  };
+  const handleEnter = e => {
+    if (!disabled) e.currentTarget.style.transform = 'var(--lift-1)';
+  };
+  const handleLeave = e => {
+    e.currentTarget.style.transform = 'none';
+  };
+  const common = {
+    style,
+    onMouseEnter: handleEnter,
+    onMouseLeave: handleLeave,
+    ...rest
+  };
+  if (href && !disabled) {
+    return /*#__PURE__*/React.createElement("a", _extends({
+      href: href,
+      onClick: onClick
+    }, common), children);
+  }
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: type,
+    disabled: disabled,
+    onClick: onClick
+  }, common), children);
+}
+Object.assign(__ds_scope, { Button });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Button.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Eyebrow.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Wiggleverse Eyebrow — uppercase, letter-spaced kicker in the machine register
+ * that sits above a section heading. Lilac on dark, violet on paper.
+ */
+function Eyebrow({
+  children,
+  onLight = false,
+  as = 'p',
+  ...rest
+}) {
+  const Tag = as;
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    style: {
+      fontFamily: 'var(--wv-font-display)',
+      fontWeight: 'var(--weight-medium)',
+      fontSize: 'var(--text-eyebrow)',
+      letterSpacing: 'var(--tracking-eyebrow)',
+      textTransform: 'uppercase',
+      color: onLight ? 'var(--wv-violet)' : 'var(--wv-lilac)',
+      margin: '0 0 1rem'
+    }
+  }, rest), children);
+}
+Object.assign(__ds_scope, { Eyebrow });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Eyebrow.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Notice.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Wiggleverse Notice — a hollow gold pill set inline beside a heading to mark
+ * roadmap status ("In build", "Coming"). Quieter than a filled Tag.
+ */
+function Notice({
+  children,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement("span", _extends({
+    style: {
+      display: 'inline-block',
+      fontFamily: 'var(--wv-font-display)',
+      fontSize: '.82rem',
+      fontWeight: 'var(--weight-medium)',
+      letterSpacing: 'var(--tracking-notice)',
+      textTransform: 'uppercase',
+      color: 'var(--wv-gold)',
+      border: '1px solid var(--wv-gold-40)',
+      borderRadius: 'var(--radius-pill)',
+      padding: '.25rem .8rem',
+      verticalAlign: 'middle'
+    }
+  }, rest), children);
+}
+Object.assign(__ds_scope, { Notice });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Notice.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Soul.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Wiggleverse Soul — the human register. Fraunces ITALIC ONLY, used sparingly
+ * for the lines that carry conscience (taglines, pull-quotes). Gold by default
+ * (hero/page-hero) or starlight/ink when 'plain'.
+ */
+function Soul({
+  children,
+  size = 'md',
+  tone = 'gold',
+  onLight = false,
+  as = 'span',
+  ...rest
+}) {
+  const Tag = as;
+  const sizes = {
+    sm: '1.1rem',
+    md: 'var(--text-soul)',
+    /* clamp(1.2rem, 2.4vw, 1.7rem) */
+    lg: 'clamp(1.4rem, 3vw, 2rem)'
+  };
+  const tones = {
+    gold: 'var(--wv-gold)',
+    plain: onLight ? 'var(--wv-ink)' : 'var(--wv-starlight)',
+    lilac: 'var(--wv-lilac)'
+  };
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    style: {
+      fontFamily: 'var(--wv-font-human)',
+      fontStyle: 'italic',
+      fontWeight: 'var(--weight-soul)',
+      fontSize: sizes[size] || sizes.md,
+      lineHeight: 1.3,
+      color: tones[tone] || tones.gold
+    }
+  }, rest), children);
+}
+Object.assign(__ds_scope, { Soul });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Soul.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Callout.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Wiggleverse Callout — a gold left-rule framing a single conscience line.
+ * No box, no fill: just a 3px gold border and a Fraunces italic quote.
+ */
+function Callout({
+  children,
+  onLight = false,
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    style: {
+      borderLeft: '3px solid var(--wv-gold)',
+      padding: '.4rem 0 .4rem 1.1rem',
+      margin: '1.5rem 0'
+    }
+  }, rest), /*#__PURE__*/React.createElement(__ds_scope.Soul, {
+    size: "lg",
+    tone: "plain",
+    onLight: onLight,
+    as: "p",
+    style: {
+      margin: 0
+    }
+  }, children));
+}
+Object.assign(__ds_scope, { Callout });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Callout.jsx", error: String((e && e.message) || e) }); }
+
+// components/core/Tag.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/**
+ * Wiggleverse Tag — small filled pill marking a product's status on cards.
+ * 'live' = lilac tint (first product); 'soon' = gold tint (coming).
+ */
+function Tag({
+  children,
+  variant = 'live',
+  onLight = false,
+  ...rest
+}) {
+  const base = {
+    display: 'inline-block',
+    fontFamily: 'var(--wv-font-display)',
+    fontSize: 'var(--text-tag)',
+    fontWeight: 'var(--weight-medium)',
+    letterSpacing: 'var(--tracking-tag)',
+    textTransform: 'uppercase',
+    padding: '.15rem .55rem',
+    borderRadius: 'var(--radius-pill)'
+  };
+  const variants = {
+    live: {
+      background: 'var(--wv-lilac-16)',
+      color: onLight ? 'var(--wv-ink)' : 'var(--wv-starlight)'
+    },
+    soon: {
+      background: 'var(--wv-gold-28)',
+      color: 'var(--wv-gold-ink-soft)'
+    }
+  };
+  return /*#__PURE__*/React.createElement("span", _extends({
+    style: {
+      ...base,
+      ...(variants[variant] || variants.live)
+    }
+  }, rest), children);
+}
+Object.assign(__ds_scope, { Tag });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/core/Tag.jsx", error: String((e && e.message) || e) }); }
+
+// components/navigation/SiteFooter.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const DEFAULT_COLUMNS = [{
+  heading: 'Explore',
+  links: [{
+    label: 'Build',
+    href: '/building/'
+  }, {
+    label: 'Partner',
+    href: '/partner/'
+  }, {
+    label: 'Learn',
+    href: '/learn/'
+  }]
+}, {
+  heading: 'The org',
+  links: [{
+    label: 'About',
+    href: '/about/'
+  }, {
+    label: 'Give',
+    href: '/give/'
+  }, {
+    label: 'Finances',
+    href: '/finances/'
+  }, {
+    label: 'Code of Conduct',
+    href: '/code-of-conduct/'
+  }]
+}];
+const DEFAULT_LEGAL = "Wiggleverse.org, Inc. — a Washington 501(c)(3) nonprofit creating art and software that supports humanity on the path to world peace. Dedicated to Aaron Swartz, who believed knowledge belongs to everyone.";
+
+/**
+ * Wiggleverse SiteFooter — deepest ground (night). Mono-gold lockup, a lilac
+ * Soul tagline, link columns, and the dedication legal line.
+ */
+function SiteFooter({
+  columns = DEFAULT_COLUMNS,
+  tagline = 'We are verbs, not nouns.',
+  legal = DEFAULT_LEGAL,
+  assetBase = '/assets',
+  ...rest
+}) {
+  const wrap = {
+    width: 'min(var(--wrap-max), 92vw)',
+    margin: '0 auto'
+  };
+  return /*#__PURE__*/React.createElement("footer", _extends({
+    style: {
+      background: 'var(--surface-footer)',
+      borderTop: '1px solid var(--border-soft)',
+      padding: '3rem 0 2.5rem',
+      fontSize: '.92rem'
+    }
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...wrap,
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '2rem 3rem',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: '22rem'
+    }
+  }, /*#__PURE__*/React.createElement(__ds_scope.BrandLockup, {
+    variant: "footer",
+    size: 30,
+    assetBase: assetBase
+  }), /*#__PURE__*/React.createElement(__ds_scope.Soul, {
+    size: "sm",
+    tone: "lilac",
+    as: "span",
+    style: {
+      display: 'block',
+      marginTop: '.6rem'
+    }
+  }, tagline)), columns.map(col => /*#__PURE__*/React.createElement("div", {
+    key: col.heading
+  }, /*#__PURE__*/React.createElement("h4", {
+    style: {
+      fontFamily: 'var(--wv-font-display)',
+      fontSize: '.8rem',
+      letterSpacing: '.1em',
+      textTransform: 'uppercase',
+      color: 'var(--wv-lilac)',
+      margin: '0 0 .7rem'
+    }
+  }, col.heading), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      listStyle: 'none',
+      margin: 0,
+      padding: 0
+    }
+  }, col.links.map(l => /*#__PURE__*/React.createElement("li", {
+    key: l.href,
+    style: {
+      marginBottom: '.45rem'
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: l.href,
+    style: {
+      color: 'var(--wv-starlight-85)',
+      textDecoration: 'none'
+    }
+  }, l.label))))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      ...wrap,
+      marginTop: '2.2rem',
+      paddingTop: '1.3rem',
+      borderTop: '1px solid var(--wv-lilac-12)',
+      color: 'var(--wv-starlight-60)',
+      fontSize: '.85rem'
+    }
+  }, legal));
+}
+Object.assign(__ds_scope, { SiteFooter });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/navigation/SiteFooter.jsx", error: String((e && e.message) || e) }); }
+
+// components/navigation/SiteHeader.jsx
+try { (() => {
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const DEFAULT_LINKS = [{
+  label: 'About',
+  href: '/about/'
+}, {
+  label: 'Build',
+  href: '/building/'
+}, {
+  label: 'Partner',
+  href: '/partner/'
+}, {
+  label: 'Learn',
+  href: '/learn/'
+}, {
+  label: 'Give',
+  href: '/give/'
+}];
+
+/**
+ * Wiggleverse SiteHeader — sticky glass nav: brand lockup + machine-register
+ * links. Translucent midnight with a blur and a lilac hairline underneath.
+ */
+function SiteHeader({
+  links = DEFAULT_LINKS,
+  current,
+  assetBase = '/assets',
+  homeHref = '/',
+  ...rest
+}) {
+  return /*#__PURE__*/React.createElement("header", _extends({
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 50,
+      background: 'var(--glass-sky)',
+      backdropFilter: 'blur(var(--glass-blur))',
+      WebkitBackdropFilter: 'blur(var(--glass-blur))',
+      borderBottom: '1px solid var(--border-soft)'
+    }
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 'min(var(--wrap-max), 92vw)',
+      margin: '0 auto',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '1rem',
+      padding: '.7rem 0'
+    }
+  }, /*#__PURE__*/React.createElement(__ds_scope.BrandLockup, {
+    variant: "primary",
+    assetBase: assetBase,
+    href: homeHref
+  }), /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("ul", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '1.2rem',
+      listStyle: 'none',
+      margin: 0,
+      padding: 0
+    }
+  }, links.map(l => {
+    const isCurrent = current === l.href || current === l.label;
+    return /*#__PURE__*/React.createElement("li", {
+      key: l.href
+    }, /*#__PURE__*/React.createElement("a", {
+      href: l.href,
+      "aria-current": isCurrent ? 'page' : undefined,
+      style: {
+        fontFamily: 'var(--wv-font-display)',
+        fontWeight: 'var(--weight-medium)',
+        fontSize: '.95rem',
+        color: l.cta ? 'var(--wv-gold)' : 'var(--wv-starlight)',
+        textDecoration: isCurrent ? 'underline' : 'none',
+        textUnderlineOffset: '4px',
+        textDecorationColor: 'var(--wv-lilac)'
+      }
+    }, l.label));
+  })))));
+}
+Object.assign(__ds_scope, { SiteHeader });
+})(); } catch (e) { __ds_ns.__errors.push({ path: "components/navigation/SiteHeader.jsx", error: String((e && e.message) || e) }); }
+
+// ui_kits/wiggleverse-www/app.jsx
+try { (() => {
+/* Wiggleverse marketing-site recreation. Composes the DS components and routes
+   between screens by intercepting in-app anchor clicks. */
+const {
+  Button,
+  Tag,
+  Notice,
+  Eyebrow,
+  Soul,
+  Callout,
+  PathCard,
+  BuildCard,
+  SiteHeader,
+  SiteFooter
+} = window.WiggleverseDesignSystem_94cd80;
+const ASSET_BASE = '../../assets';
+const NAV = [{
+  label: 'About',
+  href: '#/about'
+}, {
+  label: 'Build',
+  href: '#/ecomm'
+}, {
+  label: 'Partner',
+  href: '#/about'
+}, {
+  label: 'Learn',
+  href: '#/finances'
+}, {
+  label: 'Give',
+  href: '#/finances',
+  cta: true
+}];
+const FOOTER_COLS = [{
+  heading: 'Explore',
+  links: [{
+    label: 'Build',
+    href: '#/ecomm'
+  }, {
+    label: 'Partner',
+    href: '#/about'
+  }, {
+    label: 'Learn',
+    href: '#/finances'
+  }]
+}, {
+  heading: 'The org',
+  links: [{
+    label: 'About',
+    href: '#/about'
+  }, {
+    label: 'Give',
+    href: '#/finances'
+  }, {
+    label: 'Finances',
+    href: '#/finances'
+  }, {
+    label: 'Code of Conduct',
+    href: '#/about'
+  }]
+}];
+
+/* ---------- Home ---------- */
+function HomeScreen() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
+    className: "hero"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hero__sky",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "hero__mark",
+    src: ASSET_BASE + '/wiggleverse-mark.svg',
+    alt: ""
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "wrap"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "hero__inner"
+  }, /*#__PURE__*/React.createElement(Eyebrow, null, "A 501(c)(3) nonprofit \xB7 art & software for a world at peace"), /*#__PURE__*/React.createElement("h1", null, "Ethical alternatives to the software that connects you to other humans."), /*#__PURE__*/React.createElement(Soul, {
+    size: "md",
+    as: "span",
+    className: "hero__soul"
+  }, "Treat humans as humans \u2014 everything else follows."), /*#__PURE__*/React.createElement("p", {
+    className: "lead"
+  }, "A wise world where people and machines build together on one shared set of ethics. Low-cost commerce for small businesses. Tools for moving toward agreement on shared meaning. A place where, if you're learning, you're succeeding."), /*#__PURE__*/React.createElement("div", {
+    className: "hero__cta"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    href: "#/about"
+  }, "Why Wiggleverse \u2192"), /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    href: "#/ecomm"
+  }, "See what we're building"))))), /*#__PURE__*/React.createElement("section", {
+    className: "section"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrap"
+  }, /*#__PURE__*/React.createElement(Eyebrow, null, "Find your way in"), /*#__PURE__*/React.createElement("h2", null, "I'm here as a\u2026"), /*#__PURE__*/React.createElement("p", {
+    className: "lead"
+  }, "Wiggleverse is an umbrella. Pick the door that fits \u2014 each leads to its own part of the world."), /*#__PURE__*/React.createElement("div", {
+    className: "router__grid"
+  }, /*#__PURE__*/React.createElement(PathCard, {
+    icon: "\u2727",
+    title: "Curious human",
+    href: "#/about",
+    first: true
+  }, "What is this, and why does it matter? Start with the story."), /*#__PURE__*/React.createElement(PathCard, {
+    icon: "\u25C7",
+    title: "Small business",
+    href: "#/ecomm"
+  }, "People and families who join, sell, and contribute. Near-zero-cost commerce."), /*#__PURE__*/React.createElement(PathCard, {
+    icon: "\u25C8",
+    title: "Builder",
+    href: "#/about"
+  }, "A developer who wants to build ethical software? We'd love your help."), /*#__PURE__*/React.createElement(PathCard, {
+    icon: "\u274D",
+    title: "Funder",
+    href: "#/finances"
+  }, "Donors, foundations, and grantmakers supporting a 501(c)(3) at work.")))), /*#__PURE__*/React.createElement("section", {
+    className: "section section--paper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrap"
+  }, /*#__PURE__*/React.createElement(Eyebrow, {
+    onLight: true
+  }, "One set of principles, many alternatives"), /*#__PURE__*/React.createElement("h2", null, "What we're building"), /*#__PURE__*/React.createElement("p", {
+    className: "lead"
+  }, "Ethical alternatives to the platforms people rely on every day \u2014 every one built on the same shared set of principles."), /*#__PURE__*/React.createElement("div", {
+    className: "build__grid"
+  }, /*#__PURE__*/React.createElement(BuildCard, {
+    tag: /*#__PURE__*/React.createElement(Tag, {
+      variant: "live",
+      onLight: true
+    }, "First product"),
+    title: "Ecomm"
+  }, "Shopify-class commerce at near-zero cost, for people and families \u2014 because small businesses are really just people. ", /*#__PURE__*/React.createElement("a", {
+    href: "#/ecomm"
+  }, "Why ecomm first \u2192")), /*#__PURE__*/React.createElement(BuildCard, {
+    tag: /*#__PURE__*/React.createElement(Tag, {
+      variant: "soon"
+    }, "Coming"),
+    title: "Apps"
+  }, "A branded mobile app of their own for every small business \u2014 so they meet their people directly, instead of renting space inside someone else's platform."), /*#__PURE__*/React.createElement(BuildCard, {
+    tag: /*#__PURE__*/React.createElement(Tag, {
+      variant: "soon"
+    }, "Coming"),
+    title: "Learn"
+  }, "A place where anyone \u2014 including small businesses who share our ethics \u2014 can post educational content that's true, right-sized, and actually teaches.")))), /*#__PURE__*/React.createElement("section", {
+    className: "section"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrap"
+  }, /*#__PURE__*/React.createElement(Eyebrow, null, "Open Core \xB7 a partner ecosystem"), /*#__PURE__*/React.createElement("h2", null, "Built on an open core"), /*#__PURE__*/React.createElement("p", {
+    className: "lead"
+  }, "The platform's core is open \u2014 anyone can inspect it, extend it, and build on it. Because no two businesses run the same way, we don't sell one-size-fits-all \u2014 we grow a partner ecosystem that builds software shaped to the work it's actually for."), /*#__PURE__*/React.createElement("div", {
+    className: "router__grid"
+  }, /*#__PURE__*/React.createElement(PathCard, {
+    icon: "\u25D0",
+    title: "Partner",
+    href: "#/about",
+    first: true
+  }, "Build custom software on an open platform \u2014 value flowing to the builders and the served, never extracted by a platform in the middle. Why custom-on-open is the future \u2192")))));
+}
+
+/* ---------- About ---------- */
+function AboutScreen() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
+    className: "page-hero"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrap"
+  }, /*#__PURE__*/React.createElement(Eyebrow, null, "About"), /*#__PURE__*/React.createElement("h1", null, "The era of infinite alternatives"), /*#__PURE__*/React.createElement(Soul, {
+    size: "md",
+    as: "p",
+    className: "page-hero__soul"
+  }, "Welcome to the Wiggleverse."), /*#__PURE__*/React.createElement("p", {
+    className: "lead"
+  }, "We've entered an era of alternatives \u2014 infinite alternatives. Wiggleverse exists to build the humane ones: ethical alternatives to the platforms people use every day, kept low-cost and high-value, in service of human flourishing."))), /*#__PURE__*/React.createElement("section", {
+    className: "section"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrap prose"
+  }, /*#__PURE__*/React.createElement("h2", null, "Now it's the platforms"), /*#__PURE__*/React.createElement("p", null, "With large language models, we've entered the era where the platforms themselves are being commoditized \u2014 and with them comes a world of infinite alternatives for software. One genuinely skilled developer can now do what would have taken ten of them a year ago. The things everyone assumed were permanent fixtures are suddenly open to alternatives."), /*#__PURE__*/React.createElement("h2", null, "The moats are becoming anchors"), /*#__PURE__*/React.createElement("p", null, "The large platforms have thrived on three moats: the manpower and capital to run software at scale, vendor lock-in, and the network effect. My hypothesis is that the first is turning into an anchor, the second is dissolving as custom migration code gets cheap, and the third is already fragmented."), /*#__PURE__*/React.createElement("h2", null, "What Wiggleverse is for"), /*#__PURE__*/React.createElement("p", null, "None of this is about taking anyone's place. Wiggleverse exists to offer ethical alternatives to platforms like Shopify, YouTube, Facebook, and Instagram \u2014 rooted in ethics, built to give people value rather than to extract it."), /*#__PURE__*/React.createElement(Callout, null, "The intention isn't to take as much as we can from people \u2014 it's to give as much value as we can to everyone."), /*#__PURE__*/React.createElement("p", null, "Welcome to the Wiggleverse, and welcome to the era of infinite alternatives \u2014 even to the platforms everyone assumed were permanent."), /*#__PURE__*/React.createElement(Soul, {
+    size: "sm",
+    tone: "plain",
+    as: "p",
+    style: {
+      marginTop: '1.5rem'
+    }
+  }, "\u2014 Ben Stull, Founder"))));
+}
+
+/* ---------- Ecomm ---------- */
+function EcommScreen() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
+    className: "page-hero"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrap"
+  }, /*#__PURE__*/React.createElement(Eyebrow, null, "The portfolio \xB7 first product"), /*#__PURE__*/React.createElement("h1", null, "Ecomm"), /*#__PURE__*/React.createElement(Soul, {
+    size: "md",
+    as: "p",
+    className: "page-hero__soul"
+  }, "We take only what it takes to run."), /*#__PURE__*/React.createElement("p", {
+    className: "lead"
+  }, "Shopify-class commerce at near-zero cost, for people and families \u2014 because small businesses are really just people. It's the first product to move from principle into the world, and there's a reason it's first."))), /*#__PURE__*/React.createElement("section", {
+    className: "section"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrap prose"
+  }, /*#__PURE__*/React.createElement("h2", null, "Why commerce first"), /*#__PURE__*/React.createElement("p", null, "Running an organization \u2014 and the infrastructure under a platform \u2014 takes money. Commerce is where money moves most, so by building close to commerce we reach a sustainable position quickest. Ecomm is first because it's the fastest honest path to standing on our own feet."), /*#__PURE__*/React.createElement(Callout, null, "Enough to keep the lights on, and no more."), /*#__PURE__*/React.createElement("h2", null, "What we commit to"), /*#__PURE__*/React.createElement("p", null, "The mission for Ecomm is to keep transaction fees and retail-media fees as low as they can possibly go. While we're still in beta, here is what we're committing to:"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "Retail media, free."), " Earned through platform engagement rather than paid for."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "Marketplace storefronts: low or no transaction fees."), " Selling in the shared marketplace costs little or nothing."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("b", null, "White-label storefronts: low transaction fees."), " Your own branded storefront stays low-cost to run.")), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    href: "#/finances"
+  }, "See the open book \u2192")))));
+}
+
+/* ---------- Finances (open book) ---------- */
+function FinancesScreen() {
+  const lines = [{
+    item: 'Google Cloud (GCP)',
+    for: 'Servers, databases, and the infrastructure the platform runs on — on startup credits today',
+    current: 32,
+    ant: 75,
+    antFrom: 'July 2026'
+  }, {
+    item: 'Google Workspace',
+    for: 'Email and documents — one seat',
+    current: 7,
+    ant: 14,
+    antFrom: 'Sept 2026'
+  }, {
+    item: 'Anthropic',
+    for: 'Claude — one Max plan, the AI we build alongside every day',
+    current: 100,
+    ant: 100,
+    antFrom: null
+  }];
+  const sumCur = lines.reduce((a, l) => a + l.current, 0);
+  const sumAnt = lines.reduce((a, l) => a + l.ant, 0);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("section", {
+    className: "page-hero"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrap"
+  }, /*#__PURE__*/React.createElement(Eyebrow, null, "Radical transparency \xB7 open book"), /*#__PURE__*/React.createElement("h1", null, "Open book"), /*#__PURE__*/React.createElement(Soul, {
+    size: "md",
+    as: "p",
+    className: "page-hero__soul"
+  }, "We show you the receipts."), /*#__PURE__*/React.createElement("p", {
+    className: "lead"
+  }, "We take only what it takes to run this organization and the platform \u2014 and the only way to mean that is to show our work. Here is what it actually costs to run Wiggleverse, line by line."))), /*#__PURE__*/React.createElement("section", {
+    className: "section"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wrap prose"
+  }, /*#__PURE__*/React.createElement("h2", null, "What it costs to run Wiggleverse"), /*#__PURE__*/React.createElement("p", {
+    className: "ledger-stamp"
+  }, "Last updated 8 June 2026 \xB7 hand-kept estimates, refreshed monthly for now."), /*#__PURE__*/React.createElement("table", {
+    className: "ledger"
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    scope: "col"
+  }, "Line item"), /*#__PURE__*/React.createElement("th", {
+    scope: "col"
+  }, "What it's for"), /*#__PURE__*/React.createElement("th", {
+    scope: "col",
+    className: "num"
+  }, "Current / mo"), /*#__PURE__*/React.createElement("th", {
+    scope: "col",
+    className: "num"
+  }, "Anticipated / mo"))), /*#__PURE__*/React.createElement("tbody", null, lines.map(l => /*#__PURE__*/React.createElement("tr", {
+    key: l.item
+  }, /*#__PURE__*/React.createElement("td", null, l.item), /*#__PURE__*/React.createElement("td", null, l.for), /*#__PURE__*/React.createElement("td", {
+    className: "num"
+  }, "$", l.current), /*#__PURE__*/React.createElement("td", {
+    className: "num"
+  }, "$", l.ant, l.antFrom && /*#__PURE__*/React.createElement("span", {
+    className: "when"
+  }, "from ", l.antFrom))))), /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Total"), /*#__PURE__*/React.createElement("td", null, "per month, plus tax"), /*#__PURE__*/React.createElement("td", {
+    className: "num"
+  }, "$", sumCur), /*#__PURE__*/React.createElement("td", {
+    className: "num"
+  }, "$", sumAnt, /*#__PURE__*/React.createElement("span", {
+    className: "when"
+  }, "by Sept 2026"))))), /*#__PURE__*/React.createElement("p", null, "Revenue today is ", /*#__PURE__*/React.createElement("strong", null, "$0"), " \u2014 we haven't launched commerce yet. Covering these costs ourselves is the whole point of ", /*#__PURE__*/React.createElement("a", {
+    href: "#/ecomm"
+  }, "building commerce first"), "."), /*#__PURE__*/React.createElement(Callout, null, "Ethics that cannot be checked are just claims."))));
+}
+const SCREENS = {
+  '#/': HomeScreen,
+  '#/about': AboutScreen,
+  '#/ecomm': EcommScreen,
+  '#/finances': FinancesScreen
+};
+function App() {
+  const [route, setRoute] = React.useState(window.location.hash || '#/');
+  React.useEffect(() => {
+    const onHash = () => {
+      setRoute(window.location.hash || '#/');
+      window.scrollTo(0, 0);
+    };
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+  }, []);
+  const Screen = SCREENS[route] || HomeScreen;
+  const current = route === '#/about' ? 'About' : route === '#/ecomm' ? 'Build' : route === '#/finances' ? 'Learn' : undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wv-app"
+  }, /*#__PURE__*/React.createElement(SiteHeader, {
+    links: NAV,
+    current: current,
+    assetBase: ASSET_BASE,
+    homeHref: "#/"
+  }), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(Screen, null)), /*#__PURE__*/React.createElement(SiteFooter, {
+    columns: FOOTER_COLS,
+    assetBase: ASSET_BASE
+  }));
+}
+ReactDOM.createRoot(document.getElementById('root')).render(/*#__PURE__*/React.createElement(App, null));
+})(); } catch (e) { __ds_ns.__errors.push({ path: "ui_kits/wiggleverse-www/app.jsx", error: String((e && e.message) || e) }); }
+
+__ds_ns.BrandLockup = __ds_scope.BrandLockup;
+
+__ds_ns.BuildCard = __ds_scope.BuildCard;
+
+__ds_ns.PathCard = __ds_scope.PathCard;
+
+__ds_ns.Button = __ds_scope.Button;
+
+__ds_ns.Callout = __ds_scope.Callout;
+
+__ds_ns.Eyebrow = __ds_scope.Eyebrow;
+
+__ds_ns.Notice = __ds_scope.Notice;
+
+__ds_ns.Soul = __ds_scope.Soul;
+
+__ds_ns.Tag = __ds_scope.Tag;
+
+__ds_ns.SiteFooter = __ds_scope.SiteFooter;
+
+__ds_ns.SiteHeader = __ds_scope.SiteHeader;
+
+})();
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_ds_manifest.json b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_ds_manifest.json
new file mode 100644
index 0000000..7a1b26f
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_ds_manifest.json
@@ -0,0 +1 @@
+{"namespace":"WiggleverseDesignSystem_94cd80","components":[{"name":"BrandLockup","sourcePath":"components/brand/BrandLockup.jsx"},{"name":"BuildCard","sourcePath":"components/cards/BuildCard.jsx"},{"name":"PathCard","sourcePath":"components/cards/PathCard.jsx"},{"name":"Button","sourcePath":"components/core/Button.jsx"},{"name":"Callout","sourcePath":"components/core/Callout.jsx"},{"name":"Eyebrow","sourcePath":"components/core/Eyebrow.jsx"},{"name":"Notice","sourcePath":"components/core/Notice.jsx"},{"name":"Soul","sourcePath":"components/core/Soul.jsx"},{"name":"Tag","sourcePath":"components/core/Tag.jsx"},{"name":"SiteFooter","sourcePath":"components/navigation/SiteFooter.jsx"},{"name":"SiteHeader","sourcePath":"components/navigation/SiteHeader.jsx"}],"startingPoints":[{"name":"BrandLockup","path":"components/brand/BrandLockup.jsx","previewPath":"components/brand/brand.card.html","kind":"component","section":"Brand","subtitle":"Mark + wordmark lockup","viewport":"700x120"},{"name":"PathCard","path":"components/cards/PathCard.jsx","previewPath":"components/cards/cards.card.html","kind":"component","section":"Cards","subtitle":"Audience-router doorway card","viewport":"700x220"},{"name":"Button","path":"components/core/Button.jsx","previewPath":"components/core/core.card.html","kind":"component","section":"Core","subtitle":"Gold & ghost pill buttons","viewport":"700x140"},{"name":"wiggleverse-www","path":"ui_kits/wiggleverse-www/index.html","previewPath":"ui_kits/wiggleverse-www/index.html","kind":"screen","section":"Wiggleverse.org","subtitle":"Full marketing-site recreation","viewport":"1080x760"}],"cards":[{"path":"guidelines/brand-lockup.card.html","group":"Brand","viewport":"700x170","subtitle":"Wordmark pairing + the human-register tagline","name":"Lockup & voice"},{"path":"guidelines/brand-mark.card.html","group":"Brand","viewport":"700x230","subtitle":"One wiggling line, six equal points, no center","name":"The mark — Circle of Equals"},{"path":"guidelines/color-accent.card.html","group":"Colors","viewport":"700x180","subtitle":"Lilac bonds, violet strokes, gold horizon","name":"Accent & CTA"},{"path":"guidelines/color-light.card.html","group":"Colors","viewport":"700x180","subtitle":"Paper for reading, ink & starlight for text","name":"Light & text"},{"path":"guidelines/color-sky.card.html","group":"Colors","viewport":"700x180","subtitle":"Dark grounds — the primary canvas","name":"Sky & surfaces"},{"path":"components/brand/brand.card.html","group":"Components","viewport":"700x200","name":"Brand lockup"},{"path":"components/cards/cards.card.html","group":"Components","viewport":"700x300","name":"Cards — path & build"},{"path":"components/core/core.card.html","group":"Components","viewport":"700x440","name":"Core — buttons, tags, text"},{"path":"components/navigation/navigation.card.html","group":"Components","viewport":"1080x520","name":"Navigation — header & footer"},{"path":"guidelines/spacing-radius.card.html","group":"Spacing","viewport":"700x190","subtitle":"Soft rounding, hairline borders, lift not shadow","name":"Radius & elevation"},{"path":"guidelines/spacing-scale.card.html","group":"Spacing","viewport":"700x160","subtitle":"rem-based rhythm — space-1 → space-12","name":"Spacing scale"},{"path":"guidelines/type-body.card.html","group":"Type","viewport":"700x230","subtitle":"Machine register: UI & prose, 400/500/600","name":"Body & eyebrow — Inter"},{"path":"guidelines/type-display.card.html","group":"Type","viewport":"700x250","subtitle":"Machine register: headings & wordmark, 700/-0.015em","name":"Display — Space Grotesk"},{"path":"guidelines/type-soul.card.html","group":"Type","viewport":"700x210","subtitle":"Human register: pull-quotes only, italic, sparingly","name":"The soul — Fraunces italic"},{"path":"ui_kits/wiggleverse-www/index.html","group":"Wiggleverse.org","viewport":"1080x760","subtitle":"Home · About · Ecomm · Open book — click-through","name":"Marketing site"}],"globalCssPaths":["assets/fonts/fonts.css","tokens/colors.css","tokens/typography.css","tokens/spacing.css","styles.css"],"tokens":[{"name":"--wv-midnight","value":"#0E1230","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-indigo","value":"#1C2150","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-indigo-2","value":"#232A63","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-lilac","value":"#9B8CFF","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-violet","value":"#7C6FE0","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-gold","value":"#F4C76B","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-gold-hi","value":"#F7D488","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-starlight","value":"#EDEAFF","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-paper","value":"#F6F4FB","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-ink","value":"#3B2F7A","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-night","value":"#090C22","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-gold-ink","value":"#2A2003","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-gold-ink-soft","value":"#6B4E10","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-lilac-08","value":"rgba(155, 140, 255, .08)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-lilac-12","value":"rgba(155, 140, 255, .12)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-lilac-16","value":"rgba(155, 140, 255, .16)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-lilac-18","value":"rgba(155, 140, 255, .18)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-lilac-32","value":"rgba(155, 140, 255, .32)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-gold-28","value":"rgba(244, 199, 107, .28)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-gold-40","value":"rgba(244, 199, 107, .40)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-starlight-85","value":"rgba(237, 234, 255, .85)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-starlight-78","value":"rgba(237, 234, 255, .78)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-starlight-60","value":"rgba(237, 234, 255, .60)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-starlight-55","value":"rgba(237, 234, 255, .55)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-sky","value":"var(--wv-midnight)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-raised","value":"var(--wv-indigo)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-raised-hi","value":"var(--wv-indigo-2)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-paper","value":"var(--wv-paper)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-card-light","value":"#FFFFFF","kind":"color","definedIn":"tokens/colors.css"},{"name":"--surface-footer","value":"var(--wv-night)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--text-on-dark","value":"var(--wv-starlight)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-on-dark-soft","value":"var(--wv-starlight-78)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-on-dark-mute","value":"var(--wv-starlight-60)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-on-light","value":"var(--wv-ink)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--text-on-light-soft","value":"#4B4170","kind":"font","definedIn":"tokens/colors.css"},{"name":"--accent","value":"var(--wv-lilac)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--accent-on-light","value":"var(--wv-violet)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--cta","value":"var(--wv-gold)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--cta-hover","value":"var(--wv-gold-hi)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--cta-text","value":"var(--wv-gold-ink)","kind":"font","definedIn":"tokens/colors.css"},{"name":"--border-soft","value":"var(--wv-lilac-16)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--border-card","value":"var(--wv-lilac-18)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--border-strong","value":"var(--wv-lilac-32)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--focus-ring","value":"var(--wv-gold)","kind":"color","definedIn":"tokens/colors.css"},{"name":"--wv-font-display","value":"'Space Grotesk', system-ui, sans-serif","kind":"font","definedIn":"tokens/typography.css"},{"name":"--wv-font-body","value":"'Inter', system-ui, sans-serif","kind":"font","definedIn":"tokens/typography.css"},{"name":"--wv-font-human","value":"'Fraunces', Georgia, serif","kind":"font","definedIn":"tokens/typography.css"},{"name":"--font-display","value":"var(--wv-font-display)","kind":"font","definedIn":"tokens/typography.css"},{"name":"--font-body","value":"var(--wv-font-body)","kind":"font","definedIn":"tokens/typography.css"},{"name":"--font-soul","value":"var(--wv-font-human)","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-regular","value":"400","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-medium","value":"500","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-semibold","value":"600","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-bold","value":"700","kind":"font","definedIn":"tokens/typography.css"},{"name":"--weight-soul","value":"500","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-h1","value":"clamp(2.1rem, 5.2vw, 3.6rem)","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-h2","value":"clamp(1.6rem, 3.4vw, 2.4rem)","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-h3","value":"1.2rem","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-lead","value":"clamp(1.05rem, 1.8vw, 1.3rem)","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-soul","value":"clamp(1.2rem, 2.4vw, 1.7rem)","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-body","value":"1rem","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-small","value":".95rem","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-fine","value":".92rem","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-eyebrow","value":".8rem","kind":"font","definedIn":"tokens/typography.css"},{"name":"--text-tag","value":".72rem","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-tight","value":"1.12","kind":"font","definedIn":"tokens/typography.css"},{"name":"--leading-body","value":"1.6","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-display","value":"-0.015em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-eyebrow","value":"0.12em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-tag","value":"0.08em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--tracking-notice","value":"0.06em","kind":"font","definedIn":"tokens/typography.css"},{"name":"--measure-lead","value":"60ch","kind":"spacing","definedIn":"tokens/typography.css"},{"name":"--measure-prose","value":"68ch","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-0","value":"0","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-1","value":".25rem","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-2","value":".5rem","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-3","value":".7rem","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-4","value":"1rem","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-5","value":"1.2rem","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-6","value":"1.6rem","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-8","value":"2rem","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-10","value":"2.5rem","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--space-12","value":"3rem","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--section-pad","value":"clamp(3rem, 7vw, 5.5rem)","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--page-hero-pad","value":"clamp(2.8rem, 6vw, 4.5rem)","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--wrap-max","value":"1080px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--wrap-gutter","value":"92vw","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--radius-card","value":"14px","kind":"radius","definedIn":"tokens/spacing.css"},{"name":"--radius-panel","value":"12px","kind":"radius","definedIn":"tokens/spacing.css"},{"name":"--radius-sm","value":"4px","kind":"radius","definedIn":"tokens/spacing.css"},{"name":"--radius-pill","value":"999px","kind":"radius","definedIn":"tokens/spacing.css"},{"name":"--radius-mark","value":"26px","kind":"radius","definedIn":"tokens/spacing.css"},{"name":"--border-hair","value":"1px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--border-card-w","value":"1px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--btn-border-w","value":"1.5px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--shadow-none","value":"none","kind":"shadow","definedIn":"tokens/spacing.css"},{"name":"--shadow-soft","value":"0 8px 24px rgba(9, 12, 34, .28)","kind":"shadow","definedIn":"tokens/spacing.css"},{"name":"--lift-1","value":"translateY(-1px)","kind":"other","definedIn":"tokens/spacing.css","annotation":"other"},{"name":"--lift-3","value":"translateY(-3px)","kind":"other","definedIn":"tokens/spacing.css","annotation":"other"},{"name":"--glass-sky","value":"rgba(14, 18, 48, .82)","kind":"color","definedIn":"tokens/spacing.css"},{"name":"--glass-blur","value":"10px","kind":"spacing","definedIn":"tokens/spacing.css"},{"name":"--ease","value":"ease","kind":"other","definedIn":"tokens/spacing.css","annotation":"other"},{"name":"--dur-fast","value":".15s","kind":"other","definedIn":"tokens/spacing.css","annotation":"other"},{"name":"--dur-mid","value":".25s","kind":"other","definedIn":"tokens/spacing.css","annotation":"other"}],"themes":[],"fonts":[{"family":"Space Grotesk","weight":"500","style":"normal","cssPath":"assets/fonts/fonts.css","files":["assets/fonts/space-grotesk-v22-latin-500.woff2"]},{"family":"Space Grotesk","weight":"700","style":"normal","cssPath":"assets/fonts/fonts.css","files":["assets/fonts/space-grotesk-v22-latin-700.woff2"]},{"family":"Inter","weight":"400","style":"normal","cssPath":"assets/fonts/fonts.css","files":["assets/fonts/inter-v20-latin-regular.woff2"]},{"family":"Inter","weight":"500","style":"normal","cssPath":"assets/fonts/fonts.css","files":["assets/fonts/inter-v20-latin-500.woff2"]},{"family":"Inter","weight":"600","style":"normal","cssPath":"assets/fonts/fonts.css","files":["assets/fonts/inter-v20-latin-600.woff2"]},{"family":"Fraunces","weight":"400","style":"italic","cssPath":"assets/fonts/fonts.css","files":["assets/fonts/fraunces-v38-latin-italic.woff2"]},{"family":"Fraunces","weight":"500","style":"italic","cssPath":"assets/fonts/fonts.css","files":["assets/fonts/fraunces-v38-latin-500italic.woff2"]}],"brandFonts":[{"family":"Space Grotesk","status":"ok","tokens":["--wv-font-display"],"path":"assets/fonts/fonts.css"},{"family":"Inter","status":"ok","tokens":["--wv-font-body"],"path":"assets/fonts/fonts.css"},{"family":"Fraunces","status":"ok","tokens":["--wv-font-human"],"path":"assets/fonts/fonts.css"}],"source":"spa"}
\ No newline at end of file
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fonts.css b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fonts.css
new file mode 100644
index 0000000..b96c1d0
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fonts.css
@@ -0,0 +1,10 @@
+/* Space Grotesk — machine register: headings, wordmark */
+@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('./space-grotesk-v22-latin-500.woff2') format('woff2');}
+@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('./space-grotesk-v22-latin-700.woff2') format('woff2');}
+/* Inter — machine register: body / UI */
+@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('./inter-v20-latin-regular.woff2') format('woff2');}
+@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('./inter-v20-latin-500.woff2') format('woff2');}
+@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('./inter-v20-latin-600.woff2') format('woff2');}
+/* Fraunces — human register: pull-quotes (italic only) */
+@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('./fraunces-v38-latin-italic.woff2') format('woff2');}
+@font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url('./fraunces-v38-latin-500italic.woff2') format('woff2');}
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fraunces-v38-latin-500italic.woff2 b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fraunces-v38-latin-500italic.woff2
new file mode 100644
index 0000000..100413d
Binary files /dev/null and b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fraunces-v38-latin-500italic.woff2 differ
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fraunces-v38-latin-italic.woff2 b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fraunces-v38-latin-italic.woff2
new file mode 100644
index 0000000..8b47701
Binary files /dev/null and b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fraunces-v38-latin-italic.woff2 differ
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-500.woff2 b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-500.woff2
new file mode 100644
index 0000000..54f0a59
Binary files /dev/null and b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-500.woff2 differ
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-600.woff2 b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-600.woff2
new file mode 100644
index 0000000..d189794
Binary files /dev/null and b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-600.woff2 differ
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-regular.woff2 b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-regular.woff2
new file mode 100644
index 0000000..f15b025
Binary files /dev/null and b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-regular.woff2 differ
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/space-grotesk-v22-latin-500.woff2 b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/space-grotesk-v22-latin-500.woff2
new file mode 100644
index 0000000..0db251f
Binary files /dev/null and b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/space-grotesk-v22-latin-500.woff2 differ
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/space-grotesk-v22-latin-700.woff2 b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/space-grotesk-v22-latin-700.woff2
new file mode 100644
index 0000000..44604a0
Binary files /dev/null and b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/space-grotesk-v22-latin-700.woff2 differ
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/readme.md b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/readme.md
new file mode 100644
index 0000000..a1363b0
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/readme.md
@@ -0,0 +1,170 @@
+# Wiggleverse Design System
+
+The core design system for **Wiggleverse.org** — a Washington 501(c)(3)
+nonprofit building art and software for a world at peace, on one shared set of
+ethics. Its first product is *Ecomm* (Shopify-class commerce at near-zero cost);
+the portfolio also names *Apps* and *Learn*, all built on an **Open Core**.
+
+> *Treat humans as humans — everything else follows.*
+
+This system captures the brand exactly as it ships on the marketing site so that
+agents and designers can produce on-brand interfaces, decks, and assets.
+
+## Sources
+
+Built from the live marketing-site codebase, the source of truth:
+
+- **Codebase:** `wiggleverse-www/` — static site (plain HTML/CSS/JS, no build
+  step), deployed to Cloudflare Pages. Brand tokens live in
+  `wiggleverse-www/assets/tokens.css`; the design system CSS is
+  `wiggleverse-www/styles.css`.
+- **Brand source of truth (referenced, not attached):** `wiggleverse-org/corp` →
+  `brand/BRAND.md` (§5–10). The site's `assets/` kit is a vendored copy. The
+  site design spec is `corp/docs/superpowers/specs/2026-06-04-wiggleverse-www-design.md`.
+- **Fonts** are the real vendored woff2 files (Space Grotesk, Inter, Fraunces),
+  copied into `assets/fonts/`. No substitutions were made.
+
+---
+
+## Content fundamentals
+
+How Wiggleverse writes. The voice is **two registers passing through one
+review** — the same idea the product is built on.
+
+- **Machine register (default).** Precise, structural, plain-spoken. Most copy
+  lives here: headings, UI, body prose. Calm and declarative, never hypey.
+  *"We take only what it takes to run."*
+- **Human register ("the soul").** Warm, literary, used **sparingly** for the
+  lines that carry conscience — taglines and pull-quotes only. Always set in
+  **Fraunces italic**. *"We are verbs, not nouns." · "Ethics that cannot be
+  checked are just claims."*
+
+Specifics:
+
+- **Person.** Mostly **we / our** (the org speaking plainly and accountably).
+  Slips to **first-person singular** for the founder's voice in the About essay
+  ("I felt that one firsthand… — Ben Stull, Founder"). Addresses the reader as
+  **you** in product/partner copy.
+- **Tone.** Honest, humble, anti-extractive, quietly ambitious. Leads with
+  *what is enough?* rather than *how much can we get?* Admits limits openly
+  ("hand-kept estimates, refreshed monthly for now").
+- **Casing.** Sentence case everywhere — headings, buttons, nav. **Eyebrows**
+  and small labels are UPPERCASE with wide tracking. Product names are casual
+  and lowercase-ish in prose ("ecomm"), Title Case as proper nouns ("Ecomm").
+- **Punctuation.** Em dashes for asides. Arrows (`→`) end calls to action
+  ("Why Wiggleverse →"). Italic emphasis on the load-bearing question
+  (*what is enough?*). Bold for the load-bearing noun phrases in a list.
+- **No emoji.** None, anywhere. Status and emphasis come from type and a small
+  set of geometric glyphs (see Iconography).
+- **Recurring phrases.** "Treat humans as humans." · "We take only what it takes
+  to run." · "Radical transparency / we show you the receipts." · "Build the
+  dictionary first." · "If you're learning, you're succeeding." · "We are verbs,
+  not nouns." · the dedication to Aaron Swartz in every footer.
+- **The vibe.** A standards document (RFC/IETF) with a conscience — exact where
+  it matters, tender where it counts.
+
+---
+
+## Visual foundations
+
+The whole system answers to one motif: a **Circle of Equals** — one living,
+wiggling line through six equal points, closed into a ring, with a **deliberately
+empty center** ("no center, no hub, no sun"). The connecting line *is* the ethic.
+
+- **Ground.** **Dark "sky" is primary** (`--wv-midnight #0E1230`). Long-reading
+  passages flip to **Paper** (`--wv-paper #F6F4FB`) sections. Most of the system
+  lives on dark.
+- **Color.** Indigo (`#1C2150`) for raised surfaces; **lilac** (`#9B8CFF`) is the
+  accent — links, nodes, "the bonds between us"; **violet** (`#7C6FE0`) is its
+  on-paper counterpart; **gold** (`#F4C76B`) is warmth / horizon / the single
+  primary CTA color; **starlight** (`#EDEAFF`) is text on dark; **ink**
+  (`#3B2F7A`) is text on paper. A near-black **night** (`#090C22`) grounds the
+  footer.
+- **Type.** Two machine faces + one human face. **Space Grotesk** 500/700 for
+  display & wordmark (tracked in −0.015em). **Inter** 400/500/600 for body & UI.
+  **Fraunces italic** 400/500 for the soul — *italic only, never upright, never
+  body copy.* Headings use fluid `clamp()` sizes.
+- **Backgrounds.** No photography in the system. The hero uses a **scattered
+  starfield** (faint multi-radial-gradient nodes, intentionally off-center) and a
+  large, very low-opacity (≈0.14) mark bleeding off the right edge. Otherwise:
+  flat color fields. No big gradients as surfaces (the only gradient is *inside*
+  the mark, lilac→gold).
+- **Borders & cards.** Depth is carried by **surface color + hairline borders**,
+  not shadows. Cards are indigo (on dark) or white (on paper) with a 1px
+  lilac/violet hairline at low alpha, **14px** radius. The system is
+  **near-shadowless** — a soft shadow token exists but is rarely used.
+- **Radii.** 14px cards, 12px panels, 4px focus, **999px pills** (buttons, tags,
+  notices), 26px app-tile.
+- **Animation.** Restrained. Transitions ≈ `.15s ease`. Hover = **translateY
+  lift** (−1px buttons, −3px cards), *not* a shadow or scale. Mobile nav reveals
+  via `max-height .25s`. Everything is killed under
+  `prefers-reduced-motion: reduce`. No bounces, no loops, no parallax.
+- **Hover / press.** Links underline (3px offset, lilac). Buttons lift and
+  lighten (gold → `#F7D488`). Cards lift and warm their border to lilac, surface
+  to `#232A63`. No color-darkening press states; no shrink.
+- **Transparency & blur.** The **sticky header** is the one glass surface:
+  `rgba(14,18,48,.82)` + `blur(10px)` + a lilac hairline. Alpha lilac/gold/
+  starlight washes (`.08`–`.40`) do tints, dividers, and focus rings.
+- **Focus.** Always visible: **3px gold outline**, 2px offset, 4px rounding.
+  Accessibility is load-bearing (skip links, `aria-current`, reduced-motion).
+- **Imagery vibe.** Cool, dark, cosmic, calm — starlight on midnight, warmed by a
+  single gold horizon. Never busy, never loud.
+- **Layout.** Content column is `min(1080px, 92vw)`, gutter-aligned (not
+  auto-centered text). Prose blocks cap at a 68ch measure. Sections breathe with
+  fluid `clamp(3rem, 7vw, 5.5rem)` vertical padding.
+
+---
+
+## Iconography
+
+Wiggleverse is **iconography-light by design**. There is **no icon font and no
+icon set** in the codebase.
+
+- **The mark** is the one true graphic: the *Circle of Equals*, shipped as SVG in
+  four cuts — `wiggleverse-mark.svg` (lilac→gold gradient line, starlight nodes),
+  `mark-mono-gold.svg` (footer), `mark-on-light.svg` (ink on paper), and
+  `favicon.svg` (gold line + starlight nodes on a rounded-26px midnight tile).
+  Raster favicons (`favicon-32.png`, `favicon-180.png`) are provided for tabs and
+  iOS. All are in `assets/`.
+- **"Icons" are geometric unicode glyphs.** The audience router uses
+  **✧ ◇ ◈ ❍ ◐** as quiet, abstract door markers — never pictographic icons,
+  never emoji. Treat these as the sanctioned glyph set when a small mark is
+  needed. Arrows are literal `→` characters in link/button text.
+- **No emoji, ever.** (Reconfirmed under Content fundamentals.)
+- **If you need UI icons** (e.g. a richer product surface that the marketing site
+  doesn't cover), there is no house set to match — keep them to a thin,
+  geometric, single-weight line style consistent with the mark, and **flag the
+  addition** so it can be folded into the brand properly. Do not hand-draw new
+  brand illustrations.
+
+---
+
+## Index / manifest
+
+Root files:
+
+- `styles.css` — the global entry point (consumers link this one file). `@import`
+  manifest only.
+- `tokens/colors.css` · `tokens/typography.css` · `tokens/spacing.css` — CSS
+  custom properties (base values + semantic aliases).
+- `assets/` — the Circle-of-Equals marks (4 cuts), favicons, and the three
+  vendored webfont families in `assets/fonts/` (+ `fonts.css` `@font-face`).
+- `guidelines/` — foundation specimen cards (Colors, Type, Spacing, Brand).
+- `SKILL.md` — Agent-Skills-compatible entry point.
+
+Components (`window.WiggleverseDesignSystem_*`):
+
+- **core/** — `Button`, `Tag`, `Notice`, `Eyebrow`, `Soul`, `Callout`
+- **cards/** — `PathCard`, `BuildCard`
+- **brand/** — `BrandLockup`
+- **navigation/** — `SiteHeader`, `SiteFooter`
+
+UI kits:
+
+- **ui_kits/wiggleverse-www/** — high-fidelity recreation of the marketing site
+  (Home, About, Ecomm, Finances/open-book), composing the components above.
+
+Each component directory carries `<Name>.jsx`, `<Name>.d.ts`, `<Name>.prompt.md`,
+and one `@dsCard` HTML thumbnail. Mount components in card/kit HTML via
+`const { X } = window.WiggleverseDesignSystem_94cd80` after loading
+`_ds_bundle.js` (generated automatically — do not edit).
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/styles.css b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/styles.css
new file mode 100644
index 0000000..84693f9
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/styles.css
@@ -0,0 +1,8 @@
+/* Wiggleverse Design System — global entry point.
+   Consumers link THIS one file. It is an @import manifest only — no rules here.
+   Everything reachable from here ships to consumers (tokens + @font-face webfonts). */
+
+@import url("./assets/fonts/fonts.css");   /* Space Grotesk · Inter · Fraunces (@font-face) */
+@import url("./tokens/colors.css");        /* palette + semantic color aliases */
+@import url("./tokens/typography.css");    /* families, scale, weights, tracking */
+@import url("./tokens/spacing.css");       /* spacing, radii, borders, motion, layout */
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/colors.css b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/colors.css
new file mode 100644
index 0000000..57edf8e
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/colors.css
@@ -0,0 +1,60 @@
+/* Wiggleverse — Color tokens
+   Source of truth: wiggleverse-www/assets/tokens.css (brand BRAND.md §8–9).
+   Dark "sky" is the primary ground; Paper is for long reading. No-center motif. */
+
+:root {
+  /* ---- Brand palette (base values) ---- */
+  --wv-midnight: #0E1230;   /* sky / ground — primary dark background */
+  --wv-indigo:   #1C2150;   /* raised surfaces on dark (cards, mobile nav) */
+  --wv-indigo-2: #232A63;   /* hover state for raised surfaces */
+  --wv-lilac:    #9B8CFF;   /* accent — "the bonds between us"; links, nodes */
+  --wv-violet:   #7C6FE0;   /* secondary links / strokes (on light) */
+  --wv-gold:     #F4C76B;   /* warmth / horizon / primary CTAs */
+  --wv-gold-hi:  #F7D488;   /* gold hover */
+  --wv-starlight:#EDEAFF;   /* nodes / text on dark */
+  --wv-paper:    #F6F4FB;   /* light-mode background */
+  --wv-ink:      #3B2F7A;   /* text on light */
+  --wv-night:    #090C22;   /* footer / deepest ground */
+
+  /* CTA text-on-gold (very dark gold-brown, not pure black) */
+  --wv-gold-ink: #2A2003;
+  --wv-gold-ink-soft: #6B4E10; /* "soon" tag text on gold tint */
+
+  /* ---- Alpha derivations (lilac / gold / starlight washes) ---- */
+  --wv-lilac-08:  rgba(155, 140, 255, .08);
+  --wv-lilac-12:  rgba(155, 140, 255, .12);
+  --wv-lilac-16:  rgba(155, 140, 255, .16);
+  --wv-lilac-18:  rgba(155, 140, 255, .18);
+  --wv-lilac-32:  rgba(155, 140, 255, .32);
+  --wv-gold-28:   rgba(244, 199, 107, .28);
+  --wv-gold-40:   rgba(244, 199, 107, .40);
+  --wv-starlight-85: rgba(237, 234, 255, .85);
+  --wv-starlight-78: rgba(237, 234, 255, .78);
+  --wv-starlight-60: rgba(237, 234, 255, .60);
+  --wv-starlight-55: rgba(237, 234, 255, .55);
+
+  /* ---- Semantic aliases ---- */
+  --surface-sky:       var(--wv-midnight);  /* page ground (dark) */
+  --surface-raised:    var(--wv-indigo);    /* cards / panels on dark */
+  --surface-raised-hi: var(--wv-indigo-2);  /* raised hover */
+  --surface-paper:     var(--wv-paper);     /* long-reading light sections */
+  --surface-card-light:#FFFFFF;             /* build-cards on paper */
+  --surface-footer:    var(--wv-night);
+
+  --text-on-dark:      var(--wv-starlight);
+  --text-on-dark-soft: var(--wv-starlight-78);
+  --text-on-dark-mute: var(--wv-starlight-60);
+  --text-on-light:     var(--wv-ink);
+  --text-on-light-soft:#4B4170;
+
+  --accent:            var(--wv-lilac);     /* links + nodes on dark */
+  --accent-on-light:   var(--wv-violet);    /* links + strokes on light */
+  --cta:               var(--wv-gold);      /* primary action / horizon */
+  --cta-hover:         var(--wv-gold-hi);
+  --cta-text:          var(--wv-gold-ink);
+
+  --border-soft:       var(--wv-lilac-16);  /* hairlines on dark */
+  --border-card:       var(--wv-lilac-18);
+  --border-strong:     var(--wv-lilac-32);
+  --focus-ring:        var(--wv-gold);
+}
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/spacing.css b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/spacing.css
new file mode 100644
index 0000000..04a084a
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/spacing.css
@@ -0,0 +1,55 @@
+/* Wiggleverse — Spacing, radius, shadow, layout & motion tokens
+   Derived from the marketing-site CSS. The brand has almost no shadow system —
+   depth is carried by surface color + hairline borders, not drop shadows. */
+
+:root {
+  /* ---- Spacing scale (rem) ---- */
+  --space-0: 0;
+  --space-1: .25rem;
+  --space-2: .5rem;
+  --space-3: .7rem;
+  --space-4: 1rem;
+  --space-5: 1.2rem;
+  --space-6: 1.6rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+
+  /* Section rhythm — fluid vertical padding for page bands */
+  --section-pad: clamp(3rem, 7vw, 5.5rem);
+  --page-hero-pad: clamp(2.8rem, 6vw, 4.5rem);
+
+  /* ---- Layout ---- */
+  --wrap-max: 1080px;     /* content column */
+  --wrap-gutter: 92vw;    /* width: min(--wrap-max, --wrap-gutter) */
+  --measure-prose: 68ch;  /* reading measure for prose blocks */
+
+  /* ---- Radii ---- */
+  --radius-card: 14px;    /* path-cards, build-cards */
+  --radius-panel: 12px;   /* principle tiles */
+  --radius-sm: 4px;       /* focus ring rounding */
+  --radius-pill: 999px;   /* buttons, tags, notices */
+  --radius-mark: 26px;    /* favicon tile rounding */
+
+  /* ---- Borders ---- */
+  --border-hair: 1px;     /* default hairline */
+  --border-card-w: 1px;
+  --btn-border-w: 1.5px;  /* ghost button / focus weight */
+
+  /* ---- Elevation ---- *
+   * The system avoids drop shadows. "Lift" on hover is a -1 to -3px translateY,
+   * not a shadow. These tokens exist for the rare card that needs real elevation. */
+  --shadow-none: none;
+  --shadow-soft: 0 8px 24px rgba(9, 12, 34, .28);
+  --lift-1: translateY(-1px); /* @kind other */ /* buttons */
+  --lift-3: translateY(-3px); /* @kind other */ /* cards */
+
+  /* ---- Glass (sticky header) ---- */
+  --glass-sky: rgba(14, 18, 48, .82);
+  --glass-blur: 10px;
+
+  /* ---- Motion ---- */
+  --ease: ease; /* @kind other */
+  --dur-fast: .15s; /* @kind other */ /* hover / press transitions */
+  --dur-mid: .25s; /* @kind other */ /* mobile nav reveal */
+}
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/typography.css b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/typography.css
new file mode 100644
index 0000000..900a7fe
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/typography.css
@@ -0,0 +1,53 @@
+/* Wiggleverse — Typography tokens
+   Two registers, one meaning (BRAND.md):
+   • Machine register — Space Grotesk (display) + Inter (body/UI): precise, structural.
+   • Human register   — Fraunces, ITALIC ONLY: warm, literary, used sparingly
+                         for the lines that carry conscience ("the soul").
+   @font-face rules live in assets/fonts/fonts.css. */
+
+:root {
+  /* ---- Families ---- */
+  --wv-font-display: 'Space Grotesk', system-ui, sans-serif; /* headings, wordmark */
+  --wv-font-body:    'Inter', system-ui, sans-serif;          /* body / UI */
+  --wv-font-human:   'Fraunces', Georgia, serif;              /* pull-quotes — italic only */
+
+  /* semantic aliases */
+  --font-display: var(--wv-font-display);
+  --font-body:    var(--wv-font-body);
+  --font-soul:    var(--wv-font-human);
+
+  /* ---- Weights ---- */
+  --weight-regular: 400;  /* Inter body */
+  --weight-medium:  500;  /* nav, eyebrows, buttons, Space Grotesk text */
+  --weight-semibold:600;  /* Inter emphasis, ledger totals */
+  --weight-bold:    700;  /* Space Grotesk headings, wordmark */
+  --weight-soul:    500;  /* Fraunces italic pull-quotes */
+
+  /* ---- Fluid display sizes (clamp: min, vw, max) ---- */
+  --text-h1:   clamp(2.1rem, 5.2vw, 3.6rem);
+  --text-h2:   clamp(1.6rem, 3.4vw, 2.4rem);
+  --text-h3:   1.2rem;
+  --text-lead: clamp(1.05rem, 1.8vw, 1.3rem);  /* intro paragraph */
+  --text-soul: clamp(1.2rem, 2.4vw, 1.7rem);   /* hero pull-quote */
+
+  /* ---- Body / UI scale ---- */
+  --text-body:    1rem;     /* 16px base */
+  --text-small:   .95rem;
+  --text-fine:    .92rem;
+  --text-eyebrow: .8rem;    /* uppercase label */
+  --text-tag:     .72rem;   /* pill tags */
+
+  /* ---- Line heights ---- */
+  --leading-tight: 1.12;   /* headings */
+  --leading-body:  1.6;    /* paragraphs */
+
+  /* ---- Letter spacing ---- */
+  --tracking-display: -0.015em; /* headings + wordmark draw in slightly */
+  --tracking-eyebrow:  0.12em;  /* uppercase eyebrows open up */
+  --tracking-tag:      0.08em;
+  --tracking-notice:   0.06em;
+
+  /* ---- Measure ---- */
+  --measure-lead: 60ch;
+  --measure-prose:68ch;
+}
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/app/app.jsx b/ui/designs/SD-0002-products-bulk-csv-import-export/app/app.jsx
new file mode 100644
index 0000000..4849d2d
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/app/app.jsx
@@ -0,0 +1,170 @@
+/* app.jsx — wires the state machine, Tweaks, and mounts. */
+
+/* Pull every cross-file dependency off window with `var` (safe under both the
+   shared-global and isolated babel-script models — no redeclaration error). */
+var { AdminShell, ProductsPage, UploadScreen, PreviewScreen, RunDetailScreen } = window;
+var { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakButton, useTweaks } = window;
+const { useState: _aState, useEffect: _aEffect, useRef: _aRef } = React;
+
+const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+  "catalog": "populated",
+  "density": "comfortable",
+  "scenario": "canonical"
+}/*EDITMODE-END*/;
+
+/* ---- synthesize image problems / errors for historical runs ---- */
+function synthProblems(rejected, failed) {
+  const out = [];
+  const handles = ['oxford-button-down', 'weekender-duffel', 'camp-mug-enamel', 'aspen-knit-sweater', 'lantern-flannel', 'river-stone-belt', 'cedar-beanie', 'driftwood-henley'];
+  for (let i = 0; i < rejected; i++) out.push({ handle: handles[i % handles.length], variant: i % 2 ? 'M / Slate' : '—', url: `https://cdn.northfield.example/${handles[i % handles.length]}-${i}.jpg`, outcome: 'rejected', reason: 'Below the resolution bar — needs at least 800 × 800.' });
+  for (let i = 0; i < failed; i++) out.push({ handle: handles[(i + rejected) % handles.length], variant: '—', url: `https://oldhost.example/${handles[(i + rejected) % handles.length]}.jpg`, outcome: 'failed', reason: 'Unreachable — host timed out.' });
+  return out;
+}
+function synthErrors(n) {
+  const base = [
+    { line: 88, column: 'Type', title: 'Gift Card', message: "Shopify 'Gift Card' products aren't catalog products here — skipped." },
+    { line: 1042, column: 'Type', title: 'Essentials Bundle', message: 'Looks like a bundle — kits arrive in a coming release.' },
+    { line: 1188, column: 'Variant Price', title: 'Trail Mug', message: "'9,00' is not a price — use a dot for decimals." },
+    { line: 1455, column: 'Handle', title: '(row 1455)', message: 'Empty Handle — every row needs one.' },
+  ];
+  return base.slice(0, n);
+}
+
+function buildRunView(run, data) {
+  if (run.id === 'run-0007') {
+    return { scenario: data.SCENARIOS.canonical, images: data.IMAGE_OUTCOMES, run };
+  }
+  const isShopify = run.dialect.includes('Shopify');
+  const scenario = {
+    file: run.file,
+    dialect: run.dialect + (isShopify ? ' — mapped to canonical' : ' format'),
+    dialectKind: isShopify ? 'shopify' : 'canonical',
+    summary: { add: run.added, update: run.updated, unchanged: 0, error: run.errors },
+    records: { error: synthErrors(run.errors), add: [], update: [], unchanged: [] },
+    extra: {},
+    unknownColumns: [],
+  };
+  const total = run.images.fetched + run.images.rejected + run.images.failed;
+  const images = { total, fetched: run.images.fetched, problems: synthProblems(run.images.rejected, run.images.failed) };
+  return { scenario, images, run };
+}
+
+function Toast({ toast }) {
+  if (!toast) return null;
+  const color = toast.kind === 'success' ? 'var(--st-add)' : 'var(--wv-violet)';
+  return (
+    <div style={{
+      position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', zIndex: 9000,
+      display: 'flex', alignItems: 'center', gap: '.55rem', padding: '.7rem 1.2rem',
+      background: 'var(--wv-midnight)', color: 'var(--wv-starlight)', borderRadius: 999,
+      border: '1px solid var(--wv-lilac-32)', boxShadow: '0 10px 30px rgba(9,12,34,.4)',
+      fontSize: '.9rem', fontFamily: 'var(--font-body)', animation: 'ie-toast .25s ease',
+    }}>
+      <span style={{ width: 8, height: 8, borderRadius: 999, background: color }} />
+      {toast.msg}
+    </div>
+  );
+}
+
+function App() {
+  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
+  const [screen, setScreen] = _aState('products');
+  const [view, setView] = _aState(null);
+  const [toast, setToast] = _aState(null);
+  const toastTimer = _aRef(null);
+  const data = window.IEData;
+  const catalogEmpty = t.catalog === 'empty';
+
+  _aEffect(() => { document.documentElement.dataset.density = t.density; }, [t.density]);
+
+  const showToast = (msg, kind) => {
+    setToast({ msg, kind, id: Date.now() });
+    clearTimeout(toastTimer.current);
+    toastTimer.current = setTimeout(() => setToast(null), 2600);
+  };
+
+  const getImages = (scenario) => {
+    const m = {
+      canonical: data.IMAGE_OUTCOMES,
+      shopify: { total: 519, fetched: 511, problems: synthProblems(6, 2) },
+      roundtrip: { total: 0, fetched: 0, problems: [] },
+    };
+    return m[scenario.key] || { total: 0, fetched: 0, problems: [] };
+  };
+
+  const goProducts = () => { setScreen('products'); setView(null); };
+  const goImport = () => setScreen('upload');
+  const onValidated = (key) => { setView({ scenario: data.SCENARIOS[key] }); setScreen('preview'); };
+  const onConfirm = (scenario) => {
+    setView({ scenario, images: getImages(scenario), run: null, live: true });
+    setScreen('rundetail');
+    if (catalogEmpty) setTweak('catalog', 'populated');
+  };
+  const onOpenRun = (runId) => {
+    const run = data.HISTORY.find((r) => r.id === runId);
+    if (!run) return;
+    setView({ ...buildRunView(run, data), live: false });
+    setScreen('rundetail');
+  };
+
+  // tweak jump helpers
+  const jumpPreview = () => { setView({ scenario: data.SCENARIOS[t.scenario] }); setScreen('preview'); };
+  const jumpRun = () => { const sc = data.SCENARIOS[t.scenario === 'roundtrip' ? 'canonical' : t.scenario]; onConfirm(sc); };
+
+  let body;
+  if (screen === 'products') {
+    body = <ProductsPage data={data} catalogEmpty={catalogEmpty} onImport={goImport} onOpenRun={onOpenRun} toast={showToast} />;
+  } else if (screen === 'upload') {
+    body = <UploadScreen onBack={goProducts} onValidated={onValidated} toast={showToast} />;
+  } else if (screen === 'preview' && view) {
+    body = <PreviewScreen scenario={view.scenario} onCancel={goProducts} onConfirm={onConfirm} />;
+  } else if (screen === 'rundetail' && view) {
+    body = <RunDetailScreen run={view.run} scenario={view.scenario} images={view.images} onBack={goProducts} live={view.live} />;
+  } else {
+    body = <ProductsPage data={data} catalogEmpty={catalogEmpty} onImport={goImport} onOpenRun={onOpenRun} toast={showToast} />;
+  }
+
+  return (
+    <React.Fragment>
+      <AdminShell current="products" onNav={() => goProducts()} storefront={data.STOREFRONT}>
+        {body}
+      </AdminShell>
+      <Toast toast={toast} />
+
+      <TweaksPanel>
+        <TweakSection label="Prototype state" />
+        <TweakRadio label="Catalog" value={t.catalog} options={['populated', 'empty']} onChange={(v) => { setTweak('catalog', v); setScreen('products'); setView(null); }} />
+        <TweakRadio label="Density" value={t.density} options={['comfortable', 'compact']} onChange={(v) => setTweak('density', v)} />
+
+        <TweakSection label="Jump to a step" />
+        <TweakSelect label="Import file" value={t.scenario}
+          options={[['canonical', 'Canonical — seasonal pricing'], ['shopify', 'Shopify export — mapped'], ['roundtrip', 'Round-trip — no-op']].map(([v, l]) => ({ value: v, label: l }))}
+          onChange={(v) => setTweak('scenario', v)} />
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '.4rem', marginTop: '.2rem' }}>
+          <TweakButton label="Products" onClick={goProducts} />
+          <TweakButton label="Upload" onClick={goImport} />
+          <TweakButton label="Preview" onClick={jumpPreview} />
+          <TweakButton label="Run detail" onClick={jumpRun} />
+        </div>
+      </TweaksPanel>
+    </React.Fragment>
+  );
+}
+
+/* Mount once everything is on window (guards against script-eval ordering). */
+function ieMount() {
+  const ready = window.AdminShell && window.ProductsPage && window.UploadScreen &&
+    window.PreviewScreen && window.RunDetailScreen && window.TweaksPanel &&
+    window.TweakSection && window.TweakRadio && window.TweakSelect && window.TweakButton &&
+    window.useTweaks && window.IEData;
+  if (!ready) { setTimeout(ieMount, 20); return; }
+  // refresh local bindings in case they were read before the producer ran
+  AdminShell = window.AdminShell; ProductsPage = window.ProductsPage;
+  UploadScreen = window.UploadScreen; PreviewScreen = window.PreviewScreen;
+  RunDetailScreen = window.RunDetailScreen; TweaksPanel = window.TweaksPanel;
+  TweakSection = window.TweakSection; TweakRadio = window.TweakRadio;
+  TweakSelect = window.TweakSelect; TweakButton = window.TweakButton; useTweaks = window.useTweaks;
+  if (!window.__ieRoot) window.__ieRoot = ReactDOM.createRoot(document.getElementById('ie-root'));
+  window.__ieRoot.render(<App />);
+}
+ieMount();
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/app/data.jsx b/ui/designs/SD-0002-products-bulk-csv-import-export/app/data.jsx
new file mode 100644
index 0000000..d586cc0
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/app/data.jsx
@@ -0,0 +1,435 @@
+/* data.jsx — sample catalog + import scenarios for the bulk CSV import/export prototype.
+   A boutique apparel store, "Wander & Wool". Numbers chosen so every count is backed
+   by a concrete row the merchant can drill into. Exported to window.IEData. */
+
+const STOREFRONT = {
+  name: 'Wander & Wool',
+  handle: 'wander-and-wool',
+  email: 'mara@wanderandwool.com',
+  productCount: 412,
+  imageProblemCount: 9,
+  latestRunId: 'run-0007',
+};
+
+/* ---- Import history (newest first). Statuses mirror §5.2 ---- */
+const HISTORY = [
+  {
+    id: 'run-0007', date: '2026-06-11T12:40:00', rel: 'just now',
+    file: 'spring-2026-pricing.csv', dialect: 'Canonical',
+    added: 8, updated: 14, errors: 3,
+    images: { fetched: 18, rejected: 2, failed: 1 },
+    status: 'complete_with_problems',
+  },
+  {
+    id: 'run-0006', date: '2026-05-02T09:12:00', rel: '5 weeks ago',
+    file: 'shopify-store-export.csv', dialect: 'Shopify product CSV',
+    added: 286, updated: 0, errors: 4,
+    images: { fetched: 511, rejected: 6, failed: 2 },
+    status: 'complete_with_problems',
+  },
+  {
+    id: 'run-0005', date: '2026-04-18T16:30:00', rel: '8 weeks ago',
+    file: 'restock-april.csv', dialect: 'Canonical',
+    added: 0, updated: 63, errors: 0,
+    images: { fetched: 0, rejected: 0, failed: 0 },
+    status: 'complete',
+  },
+  {
+    id: 'run-0004', date: '2026-03-30T11:05:00', rel: '10 weeks ago',
+    file: 'initial-catalog.csv', dialect: 'Canonical',
+    added: 118, updated: 0, errors: 0,
+    images: { fetched: 402, rejected: 0, failed: 0 },
+    status: 'complete',
+  },
+];
+
+/* =====================================================================
+   SCENARIO A — canonical seasonal pricing file (the default happy path).
+   8 to add · 14 to update · 26 unchanged · 3 errors.  (48 product rows.)
+   ===================================================================== */
+
+const A_ADDS = [
+  {
+    handle: 'alpine-fleece-pullover', title: 'Alpine Fleece Pullover', kind: 'add', variants: 8,
+    detail: {
+      product: [
+        ['Title', 'Alpine Fleece Pullover'],
+        ['Vendor', 'Wander & Wool'],
+        ['Type', 'standalone'],
+        ['Tags', 'outerwear, fleece, spring-26'],
+        ['Status', 'active'],
+        ['Options', 'Size (S·M·L·XL) × Color (Heather Grey · Forest)'],
+      ],
+      variantsPreview: [
+        ['S / Heather Grey', 'SKU AFP-S-HG', '$88.00'],
+        ['M / Heather Grey', 'SKU AFP-M-HG', '$88.00'],
+        ['L / Forest', 'SKU AFP-L-FO', '$88.00'],
+      ],
+      images: 2,
+    },
+  },
+  {
+    handle: 'coastal-linen-shirt', title: 'Coastal Linen Shirt', kind: 'add', variants: 6,
+    detail: {
+      product: [
+        ['Title', 'Coastal Linen Shirt'],
+        ['Vendor', 'Wander & Wool'],
+        ['Type', 'standalone'],
+        ['Tags', 'shirts, linen, spring-26'],
+        ['Status', 'active'],
+        ['Options', 'Size (S·M·L) × Color (Sand · Sky)'],
+      ],
+      variantsPreview: [
+        ['S / Sand', 'SKU CLS-S-SA', '$72.00'],
+        ['M / Sky', 'SKU CLS-M-SK', '$72.00'],
+      ],
+      images: 3,
+    },
+  },
+  {
+    handle: 'trailhead-cap', title: 'Trailhead Cap', kind: 'add', variants: 3,
+    detail: {
+      product: [
+        ['Title', 'Trailhead Cap'],
+        ['Vendor', 'Wander & Wool'],
+        ['Type', 'standalone'],
+        ['Tags', 'accessories, hats, spring-26'],
+        ['Status', 'active'],
+        ['Options', 'Color (Black · Olive · Rust)'],
+      ],
+      variantsPreview: [
+        ['Black', 'SKU THC-BK', '$34.00'],
+        ['Olive', 'SKU THC-OL', '$34.00'],
+        ['Rust', 'SKU THC-RU', '$34.00'],
+      ],
+      images: 1,
+    },
+  },
+  {
+    handle: 'merino-base-tee', title: 'Merino Base Tee', kind: 'add', variants: 8,
+    detail: {
+      product: [
+        ['Title', 'Merino Base Tee'],
+        ['Vendor', 'Wander & Wool'],
+        ['Type', 'standalone'],
+        ['Tags', 'base-layer, merino, spring-26'],
+        ['Status', 'active'],
+        ['Options', 'Size (XS·S·M·L) × Color (Charcoal · Bone)'],
+      ],
+      variantsPreview: [
+        ['XS / Charcoal', 'SKU MBT-XS-CH', '$58.00'],
+        ['M / Bone', 'SKU MBT-M-BO', '$58.00'],
+      ],
+      images: 2,
+    },
+  },
+  {
+    handle: 'dune-chino-short', title: 'Dune Chino Short', kind: 'add', variants: 5,
+    detail: {
+      product: [
+        ['Title', 'Dune Chino Short'],
+        ['Vendor', 'Wander & Wool'],
+        ['Type', 'standalone'],
+        ['Tags', 'shorts, spring-26'],
+        ['Status', 'draft'],
+        ['Options', 'Size (28·30·32·34·36)'],
+      ],
+      variantsPreview: [
+        ['28', 'SKU DCS-28', '$64.00'],
+        ['34', 'SKU DCS-34', '$64.00'],
+      ],
+      images: 1,
+    },
+  },
+  {
+    handle: 'harbor-tote', title: 'Harbor Canvas Tote', kind: 'add', variants: 1,
+    detail: {
+      product: [
+        ['Title', 'Harbor Canvas Tote'],
+        ['Vendor', 'Wander & Wool'],
+        ['Type', 'standalone'],
+        ['Tags', 'bags, accessories, spring-26'],
+        ['Status', 'active'],
+        ['Options', '— (single variant)'],
+      ],
+      variantsPreview: [
+        ['Default', 'SKU HCT-01', '$48.00'],
+      ],
+      images: 2,
+    },
+  },
+  {
+    handle: 'cirrus-rain-shell', title: 'Cirrus Rain Shell', kind: 'add', variants: 6,
+    detail: {
+      product: [
+        ['Title', 'Cirrus Rain Shell'],
+        ['Vendor', 'Wander & Wool'],
+        ['Type', 'standalone'],
+        ['Tags', 'outerwear, rain, spring-26'],
+        ['Status', 'active'],
+        ['Options', 'Size (S·M·L) × Color (Slate · Marigold)'],
+      ],
+      variantsPreview: [
+        ['S / Slate', 'SKU CRS-S-SL', '$186.00'],
+        ['L / Marigold', 'SKU CRS-L-MA', '$186.00'],
+      ],
+      images: 3,
+    },
+  },
+  {
+    handle: 'wildflower-scarf', title: 'Wildflower Wool Scarf', kind: 'add', variants: 2,
+    detail: {
+      product: [
+        ['Title', 'Wildflower Wool Scarf'],
+        ['Vendor', 'Wander & Wool'],
+        ['Type', 'standalone'],
+        ['Tags', 'accessories, wool, spring-26'],
+        ['Status', 'active'],
+        ['Options', 'Color (Meadow · Dusk)'],
+      ],
+      variantsPreview: [
+        ['Meadow', 'SKU WWS-ME', '$42.00'],
+        ['Dusk', 'SKU WWS-DU', '$42.00'],
+      ],
+      images: 1,
+    },
+  },
+];
+
+const A_UPDATES = [
+  {
+    handle: 'meadow-wrap-dress', title: 'Meadow Wrap Dress', kind: 'update', variants: 6,
+    detail: {
+      changes: [
+        { field: 'Variant Price', scope: 'all 6 variants', before: '$118.00', after: '$98.00' },
+        { field: 'Tags', scope: 'product', before: 'dresses, summer', after: 'dresses, summer, sale' },
+        { field: 'Status', scope: 'product', before: 'active', after: 'active', noop: true },
+      ],
+    },
+  },
+  {
+    handle: 'summit-rain-jacket', title: 'Summit Rain Jacket', kind: 'update', variants: 9,
+    detail: {
+      changes: [
+        { field: 'Variant Price', scope: 'all 9 variants', before: '$240.00', after: '$264.00' },
+        { field: 'Variant Cost', scope: 'all 9 variants', before: '$96.00', after: '$112.00' },
+        { field: 'Variant Inventory Qty', scope: 'S / Slate', before: '4', after: '22' },
+      ],
+    },
+  },
+  {
+    handle: 'field-canvas-pant', title: 'Field Canvas Pant', kind: 'update', variants: 10,
+    detail: {
+      changes: [
+        { field: 'Variant Price', scope: 'all 10 variants', before: '$92.00', after: '$84.00' },
+        { field: 'Description', scope: 'product', before: 'Durable canvas work pant.', after: 'Durable organic-canvas work pant, garment-dyed.' },
+      ],
+    },
+  },
+  {
+    handle: 'aspen-knit-sweater', title: 'Aspen Knit Sweater', kind: 'update', variants: 8,
+    detail: {
+      changes: [
+        { field: 'Variant Price', scope: 'all 8 variants', before: '$134.00', after: '$118.00' },
+        { field: 'Status', scope: 'product', before: 'draft', after: 'active' },
+        { field: 'Tags', scope: 'product', before: 'knitwear, fall', after: 'knitwear, fall, spring-26' },
+      ],
+    },
+  },
+  {
+    handle: 'river-stone-belt', title: 'River Stone Belt', kind: 'update', variants: 4,
+    detail: {
+      changes: [
+        { field: 'Variant Cost', scope: 'all 4 variants', before: '$11.00', after: '$14.50' },
+        { field: 'Variant Barcode', scope: 'M / Tan', before: '— (empty)', after: '7 290 1148 22 901' },
+      ],
+    },
+  },
+  {
+    handle: 'lantern-flannel', title: 'Lantern Flannel', kind: 'update', variants: 12,
+    detail: {
+      changes: [
+        { field: 'Variant Price', scope: 'all 12 variants', before: '$78.00', after: '$68.00' },
+        { field: 'Tags', scope: 'product', before: 'shirts, flannel', after: 'shirts, flannel, sale' },
+      ],
+    },
+  },
+];
+
+const A_UPDATES_EXTRA = 8; // 14 total updates; 6 shown above, 8 more collapsed into the count
+
+const A_UNCHANGED = [
+  { handle: 'sandpiper-sock-3pk', title: 'Sandpiper Sock 3-Pack', kind: 'unchanged', variants: 3 },
+  { handle: 'cedar-beanie', title: 'Cedar Ribbed Beanie', kind: 'unchanged', variants: 4 },
+  { handle: 'driftwood-henley', title: 'Driftwood Henley', kind: 'unchanged', variants: 8 },
+];
+const A_UNCHANGED_EXTRA = 23; // 26 total
+
+const A_ERRORS = [
+  {
+    handle: 'gardenia-sundress', title: 'Gardenia Sundress', kind: 'error', variants: 5,
+    line: 214, column: 'Variant Price',
+    message: "'12,50' is not a price — use a dot for decimals (12.50), no thousands separators.",
+  },
+  {
+    handle: 'pathfinder-vest', title: 'Pathfinder Vest', kind: 'error', variants: 6,
+    line: 327, column: 'Option1 Value',
+    message: "Variant has value 'Medium' but the product never declares 'Option1 Name'. Add the option name, or remove the value.",
+  },
+  {
+    handle: 'trail-kit-starter', title: 'Trail Starter Kit', kind: 'error', variants: 1,
+    line: 402, column: 'Type',
+    message: "'kit_assembled' is reserved — bundled kits arrive in a coming release. Use 'standalone' for now.",
+  },
+];
+
+const SCENARIO_CANONICAL = {
+  key: 'canonical',
+  file: 'spring-2026-pricing.csv',
+  dialect: 'Canonical format',
+  dialectKind: 'canonical',
+  rows: 48,
+  summary: { add: 8, update: 14, unchanged: 26, error: 3 },
+  unknownColumns: ['Season Note', 'Internal Ref'],
+  records: { add: A_ADDS, update: A_UPDATES, unchanged: A_UNCHANGED, error: A_ERRORS },
+  extra: { update: A_UPDATES_EXTRA, unchanged: A_UNCHANGED_EXTRA },
+  noop: false,
+};
+
+/* =====================================================================
+   SCENARIO B — an unmodified Shopify product export (the migration path).
+   Recognized + mapped. Big add, many not-imported columns warned.
+   ===================================================================== */
+
+const B_ADDS = [
+  {
+    handle: 'oxford-button-down', title: 'Oxford Button-Down', kind: 'add', variants: 8, mapped: true,
+    detail: {
+      product: [
+        ['Title', 'Oxford Button-Down'],
+        ['Vendor', 'Northfield Supply'],
+        ['Type', 'standalone', 'mapped from Shopify "Shirts" → warned, see below'],
+        ['Tags', 'shirts, oxford'],
+        ['Status', 'active'],
+        ['Options', 'Size (S·M·L·XL) × Fit (Slim · Classic)'],
+      ],
+      variantsPreview: [
+        ['S / Slim', 'SKU OBD-S-SL', '$74.00'],
+        ['L / Classic', 'SKU OBD-L-CL', '$74.00'],
+      ],
+      images: 4,
+    },
+  },
+  {
+    handle: 'weekender-duffel', title: 'Weekender Duffel', kind: 'add', variants: 2, mapped: true,
+    detail: {
+      product: [
+        ['Title', 'Weekender Duffel'],
+        ['Vendor', 'Northfield Supply'],
+        ['Type', 'standalone'],
+        ['Tags', 'bags, travel'],
+        ['Status', 'active'],
+        ['Options', 'Color (Tan · Charcoal)'],
+      ],
+      variantsPreview: [
+        ['Tan', 'SKU WKD-TN', '$148.00'],
+        ['Charcoal', 'SKU WKD-CH', '$148.00'],
+      ],
+      images: 5,
+    },
+  },
+  {
+    handle: 'camp-mug-enamel', title: 'Enamel Camp Mug', kind: 'add', variants: 3, mapped: true,
+    detail: {
+      product: [
+        ['Title', 'Enamel Camp Mug'],
+        ['Vendor', 'Northfield Supply'],
+        ['Type', 'standalone'],
+        ['Tags', 'home, camp'],
+        ['Status', 'active'],
+        ['Options', 'Color (Red · Navy · Cream)'],
+      ],
+      variantsPreview: [
+        ['Red', 'SKU ECM-RD', '$18.00'],
+        ['Navy', 'SKU ECM-NV', '$18.00'],
+      ],
+      images: 2,
+    },
+  },
+];
+const B_ADDS_EXTRA = 283; // 286 total adds
+
+const B_ERRORS = [
+  {
+    handle: 'gift-card', title: 'Gift Card', kind: 'error', variants: 4,
+    line: 88, column: 'Type',
+    message: "Shopify 'Gift Card' products aren't catalog products here — this row is skipped, not imported.",
+  },
+  {
+    handle: 'bundle-essentials', title: 'Essentials Bundle', kind: 'error', variants: 1,
+    line: 1042, column: 'Type',
+    message: "Looks like a Shopify bundle — bundled kits arrive in a coming release. Skipped for now.",
+  },
+];
+const B_ERRORS_EXTRA = 2; // 4 total
+
+const SCENARIO_SHOPIFY = {
+  key: 'shopify',
+  file: 'shopify-store-export.csv',
+  dialect: 'Shopify product CSV — mapped to canonical',
+  dialectKind: 'shopify',
+  rows: 1894,
+  summary: { add: 286, update: 0, unchanged: 0, error: 4 },
+  unknownColumns: [
+    'Compare At Price', 'SEO Title', 'SEO Description', 'Google Shopping / Condition',
+    'Google Shopping / Gender', 'Variant Fulfillment Service', 'Variant Tax Code', 'Gift Card',
+  ],
+  records: { add: B_ADDS, update: [], unchanged: [], error: B_ERRORS },
+  extra: { add: B_ADDS_EXTRA, error: B_ERRORS_EXTRA },
+  noop: false,
+};
+
+/* =====================================================================
+   SCENARIO C — re-importing our own export (the round-trip no-op).
+   Everything unchanged → the import action is disabled (PUC-10).
+   ===================================================================== */
+
+const C_UNCHANGED = [
+  { handle: 'alpine-fleece-pullover', title: 'Alpine Fleece Pullover', kind: 'unchanged', variants: 8 },
+  { handle: 'meadow-wrap-dress', title: 'Meadow Wrap Dress', kind: 'unchanged', variants: 6 },
+  { handle: 'summit-rain-jacket', title: 'Summit Rain Jacket', kind: 'unchanged', variants: 9 },
+  { handle: 'driftwood-henley', title: 'Driftwood Henley', kind: 'unchanged', variants: 8 },
+];
+const C_UNCHANGED_EXTRA = 408; // 412 total
+
+const SCENARIO_ROUNDTRIP = {
+  key: 'roundtrip',
+  file: 'wander-wool-catalog-export.csv',
+  dialect: 'Canonical format',
+  dialectKind: 'canonical',
+  rows: 1620,
+  summary: { add: 0, update: 0, unchanged: 412, error: 0 },
+  unknownColumns: [],
+  records: { add: [], update: [], unchanged: C_UNCHANGED, error: [] },
+  extra: { unchanged: C_UNCHANGED_EXTRA },
+  noop: true,
+};
+
+/* ---- Image outcomes for the canonical run's post-commit phase (PUC-7) ---- */
+const IMAGE_OUTCOMES = {
+  total: 21,
+  fetched: 18,
+  problems: [
+    { handle: 'cirrus-rain-shell', variant: 'L / Marigold', url: 'https://cdn.northfield.example/cirrus-marigold-detail.jpg', outcome: 'rejected', reason: 'Below the resolution bar (320 × 480) — needs at least 800 × 800.' },
+    { handle: 'coastal-linen-shirt', variant: 'M / Sky', url: 'https://images.example.org/linen/sky.gif', outcome: 'rejected', reason: 'Not an image we can host (animated GIF).' },
+    { handle: 'harbor-tote', variant: '—', url: 'https://oldhost.example/harbor-tote-2.jpg', outcome: 'failed', reason: 'Unreachable — host returned 404.' },
+  ],
+};
+
+const SCENARIOS = {
+  canonical: SCENARIO_CANONICAL,
+  shopify: SCENARIO_SHOPIFY,
+  roundtrip: SCENARIO_ROUNDTRIP,
+};
+
+window.IEData = { STOREFRONT, HISTORY, SCENARIOS, IMAGE_OUTCOMES };
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/app/importflow.jsx b/ui/designs/SD-0002-products-bulk-csv-import-export/app/importflow.jsx
new file mode 100644
index 0000000..3f58b83
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/app/importflow.jsx
@@ -0,0 +1,556 @@
+/* importflow.jsx — the three import screens.
+   UploadScreen (§5.3) · PreviewScreen (§5.4, the consent gate) · RunDetailScreen (§5.5).
+   Exported to window. */
+
+var { Button, Eyebrow } = window.WiggleverseDesignSystem_94cd80 || {};
+
+const { useState: _ifState, useEffect: _ifEffect, useRef: _ifRef } = React;
+
+/* ============================ small shared bits ============================ */
+
+function ScreenHeader({ eyebrow, title, onBack, backLabel = 'Products', right }) {
+  return (
+    <div style={{ marginBottom: '1.6rem' }}>
+      <button onClick={onBack} style={{
+        display: 'inline-flex', alignItems: 'center', gap: '.35em', font: 'inherit',
+        fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '.85rem',
+        color: 'var(--wv-violet)', background: 'transparent', border: 'none', cursor: 'pointer',
+        padding: 0, marginBottom: '.9rem',
+      }}>
+        <Icon name="arrowLeft" size={15} /> Back to {backLabel}
+      </button>
+      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: '1rem', flexWrap: 'wrap' }}>
+        <div style={{ minWidth: 0 }}>
+          {eyebrow && <Eyebrow onLight>{eyebrow}</Eyebrow>}
+          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.9rem', letterSpacing: '-0.015em', color: 'var(--text-on-light)', margin: '.35rem 0 0', overflowWrap: 'anywhere' }}>{title}</h1>
+        </div>
+        {right}
+      </div>
+    </div>
+  );
+}
+
+/* ================================ UPLOAD ================================== */
+
+const SAMPLE_FILES = [
+  { key: 'canonical', name: 'spring-2026-pricing.csv', size: '48 rows · 11 KB', desc: 'Canonical format — a seasonal repricing with new arrivals, updates, and a few bad rows.', icon: 'file' },
+  { key: 'shopify', name: 'shopify-store-export.csv', size: '1,894 rows · 2.1 MB', desc: 'An unmodified Shopify product export — auto-detected and mapped to canonical.', icon: 'file' },
+  { key: 'roundtrip', name: 'wander-wool-catalog-export.csv', size: '1,620 rows · 1.7 MB', desc: 'Your own export, re-imported — the lossless round-trip (nothing to change).', icon: 'refresh' },
+];
+const REJECT_FILE = { key: 'reject', name: 'orders-q1.csv', size: '900 rows · 240 KB', desc: 'A file that is not a product catalog — to see an honest whole-file rejection.', icon: 'alert' };
+
+function UploadScreen({ onBack, onValidated, toast }) {
+  const [phase, setPhase] = _ifState('idle'); // idle | validating | rejected
+  const [progress, setProgress] = _ifState({ done: 0, total: 0, file: '' });
+  const [dragOver, setDragOver] = _ifState(false);
+  const timer = _ifRef(null);
+  const fileInput = _ifRef(null);
+
+  _ifEffect(() => () => clearInterval(timer.current), []);
+
+  const start = (file) => {
+    if (file.key === 'reject') {
+      setPhase('rejected');
+      return;
+    }
+    const total = file.rows;
+    setProgress({ done: 0, total, file: file.name });
+    setPhase('validating');
+    clearInterval(timer.current);
+    const step = Math.max(1, Math.round(total / 22));
+    timer.current = setInterval(() => {
+      setProgress((p) => {
+        const done = Math.min(total, p.done + step);
+        if (done >= total) {
+          clearInterval(timer.current);
+          setTimeout(() => onValidated(file.key), 320);
+        }
+        return { ...p, done };
+      });
+    }, 70);
+  };
+
+  const ROWS = { canonical: 48, shopify: 1894, roundtrip: 1620 };
+  const pick = (key, name) => start({ key, name, rows: ROWS[key] });
+
+  const onDrop = (e) => {
+    e.preventDefault(); setDragOver(false);
+    pick('canonical', 'spring-2026-pricing.csv');
+    toast('Reading dropped file…');
+  };
+
+  return (
+    <div>
+      <ScreenHeader eyebrow="Import" title="Import products" onBack={onBack} />
+
+      {phase === 'validating' ? (
+        <Card style={{ padding: '2.4rem 2rem' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '.6rem', marginBottom: '1rem' }}>
+            <Spinner size={20} />
+            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.1rem', color: 'var(--text-on-light)' }}>Validating…</span>
+          </div>
+          <div style={{ fontSize: '.92rem', color: 'var(--text-on-light-soft)', marginBottom: '.7rem' }}>
+            {progress.file} — {progress.done.toLocaleString()} of {progress.total.toLocaleString()} rows
+          </div>
+          <ProgressBar value={progress.done} max={progress.total} />
+          <div style={{ marginTop: '1.4rem', display: 'flex', alignItems: 'center', gap: '.6rem' }}>
+            <Button variant="ghost" onLight onClick={() => { clearInterval(timer.current); setPhase('idle'); }}>Cancel</Button>
+            <span style={{ fontSize: '.85rem', color: 'var(--text-on-light-soft)' }}>Canceling is free — nothing has been written.</span>
+          </div>
+        </Card>
+      ) : (
+        <>
+          {/* drop zone */}
+          <div
+            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+            onDragLeave={() => setDragOver(false)}
+            onDrop={onDrop}
+            onClick={() => fileInput.current && fileInput.current.click()}
+            style={{
+              border: `2px dashed ${dragOver ? 'var(--wv-violet)' : 'var(--paper-line-strong)'}`,
+              background: dragOver ? 'var(--violet-tint)' : 'var(--surface-card-light)',
+              borderRadius: '16px', padding: '2.6rem 2rem', textAlign: 'center', cursor: 'pointer',
+              transition: 'border-color var(--dur-fast), background var(--dur-fast)',
+            }}>
+            <input ref={fileInput} type="file" accept=".csv" style={{ display: 'none' }}
+              onChange={() => { pick('canonical', 'spring-2026-pricing.csv'); }} />
+            <div style={{ width: 54, height: 54, margin: '0 auto 1rem', borderRadius: 14, background: 'var(--violet-tint)', display: 'grid', placeItems: 'center' }}>
+              <Icon name="upload" size={26} style={{ color: 'var(--wv-violet)' }} />
+            </div>
+            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.15rem', color: 'var(--text-on-light)' }}>Drop a CSV here, or click to choose</div>
+            <div style={{ fontSize: '.92rem', color: 'var(--text-on-light-soft)', marginTop: '.4rem' }}>CSV, up to 5,000 rows · 10 MB. Selecting a file starts validation right away.</div>
+            <div style={{ fontSize: '.9rem', color: 'var(--text-on-light-soft)', marginTop: '1.1rem', borderTop: '1px solid var(--paper-line)', paddingTop: '1.1rem', maxWidth: 460, margin: '1.1rem auto 0' }}>
+              Works with the <strong style={{ color: 'var(--text-on-light)' }}>canonical format</strong> or a <strong style={{ color: 'var(--text-on-light)' }}>Shopify product export</strong> — we detect which.
+            </div>
+            <div style={{ display: 'flex', gap: '1.4rem', justifyContent: 'center', marginTop: '.9rem' }} onClick={(e) => e.stopPropagation()}>
+              <a onClick={(e) => { e.preventDefault(); IE_downloadText('wander-wool-sample.csv', IE_SAMPLE_CSV); toast('Sample CSV downloaded', 'success'); }} href="#" style={linkStyle}><Icon name="download" size={14} /> Sample CSV</a>
+              <a onClick={(e) => e.preventDefault()} href="#" style={linkStyle}><Icon name="link" size={14} /> Column reference</a>
+            </div>
+          </div>
+
+          {/* file-level rejection */}
+          {phase === 'rejected' && (
+            <div style={{ display: 'flex', alignItems: 'flex-start', gap: '.7rem', marginTop: '1.2rem', padding: '1rem 1.2rem', borderRadius: '12px', background: 'var(--st-error-tint)', border: '1px solid var(--st-error-line)' }}>
+              <Icon name="alert" size={19} style={{ color: 'var(--st-error)', marginTop: '.1rem' }} />
+              <div>
+                <div style={{ fontWeight: 600, color: 'var(--text-on-light)' }}>This file can't be imported as a catalog.</div>
+                <div style={{ fontSize: '.92rem', color: 'var(--text-on-light-soft)', marginTop: '.2rem' }}>It's missing the required column <code style={codeStyle}>Title</code> and matches no known dialect. Nothing was imported and no import run was recorded. Fix the file and try again.</div>
+              </div>
+            </div>
+          )}
+
+          {/* sample files */}
+          <div style={{ marginTop: '2rem' }}>
+            <div style={{ fontSize: '.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em', color: 'var(--text-on-light-soft)', marginBottom: '.8rem' }}>Or try a sample file</div>
+            <div style={{ display: 'grid', gap: '.7rem' }}>
+              {[...SAMPLE_FILES, REJECT_FILE].map((f) => (
+                <button key={f.key} onClick={() => start({ ...f, rows: ROWS[f.key] })} className="ie-samplefile" style={{
+                  display: 'flex', alignItems: 'center', gap: '1rem', width: '100%', textAlign: 'left',
+                  background: 'var(--surface-card-light)', border: '1px solid var(--paper-line)',
+                  borderRadius: '12px', padding: '.9rem 1.1rem', cursor: 'pointer', font: 'inherit',
+                  transition: 'border-color var(--dur-fast), transform var(--dur-fast)',
+                }}>
+                  <span style={{ width: 38, height: 38, flexShrink: 0, borderRadius: 10, background: f.key === 'reject' ? 'var(--st-error-tint)' : 'var(--violet-tint)', display: 'grid', placeItems: 'center' }}>
+                    <Icon name={f.icon} size={18} style={{ color: f.key === 'reject' ? 'var(--st-error)' : 'var(--wv-violet)' }} />
+                  </span>
+                  <span style={{ flex: 1, minWidth: 0 }}>
+                    <span style={{ display: 'flex', alignItems: 'baseline', gap: '.6rem', minWidth: 0 }}>
+                      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '.96rem', color: 'var(--text-on-light)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{f.name}</span>
+                      <span style={{ fontSize: '.78rem', color: 'var(--text-on-light-soft)', whiteSpace: 'nowrap', flexShrink: 0 }}>{f.size}</span>
+                    </span>
+                    <span style={{ display: 'block', fontSize: '.88rem', color: 'var(--text-on-light-soft)', marginTop: '.15rem' }}>{f.desc}</span>
+                  </span>
+                  <Icon name="arrowRight" size={16} style={{ color: 'var(--wv-violet)' }} />
+                </button>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ================================ PREVIEW ================================= */
+
+function FieldRow({ label, value, note }) {
+  return (
+    <div style={{ display: 'flex', gap: '1rem', padding: '.4rem 0', borderBottom: '1px solid var(--paper-line)' }}>
+      <div style={{ width: 130, flexShrink: 0, fontSize: '.82rem', color: 'var(--text-on-light-soft)', fontWeight: 500 }}>{label}</div>
+      <div style={{ flex: 1, fontSize: '.9rem', color: 'var(--text-on-light)' }}>
+        {value}
+        {note && <span style={{ display: 'block', fontSize: '.78rem', color: 'var(--st-update)', marginTop: '.2rem' }}>⚠ {note}</span>}
+      </div>
+    </div>
+  );
+}
+
+function RecordDetail({ rec }) {
+  const d = rec.detail || {};
+  if (rec.kind === 'add') {
+    return (
+      <div style={{ padding: '.4rem 0 .2rem' }}>
+        <div style={{ fontSize: '.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--st-add)', marginBottom: '.5rem' }}>New product — fields to be set</div>
+        <div style={{ marginBottom: '1rem' }}>
+          {d.product.map((row, i) => <FieldRow key={i} label={row[0]} value={row[1]} note={row[2]} />)}
+        </div>
+        <div style={{ display: 'flex', gap: '1.4rem', flexWrap: 'wrap' }}>
+          <div style={{ flex: '1 1 280px' }}>
+            <div style={{ fontSize: '.78rem', fontWeight: 600, color: 'var(--text-on-light-soft)', marginBottom: '.4rem' }}>Variants ({rec.variants}) · sample</div>
+            <div style={{ display: 'grid', gap: '.3rem' }}>
+              {d.variantsPreview.map((v, i) => (
+                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '.6rem', fontSize: '.86rem', color: 'var(--text-on-light)' }}>
+                  <span style={{ minWidth: 130, fontWeight: 500 }}>{v[0]}</span>
+                  <span style={{ color: 'var(--text-on-light-soft)', flex: 1 }}>{v[1]}</span>
+                  <span style={{ fontWeight: 600 }}>{v[2]}</span>
+                </div>
+              ))}
+              {rec.variants > d.variantsPreview.length && <div style={{ fontSize: '.82rem', color: 'var(--text-on-light-soft)' }}>+ {rec.variants - d.variantsPreview.length} more variants</div>}
+            </div>
+          </div>
+          <div style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', gap: '.45em', color: 'var(--text-on-light-soft)', fontSize: '.86rem' }}>
+            <Icon name="image" size={15} /> {d.images} image{d.images === 1 ? '' : 's'} to fetch
+          </div>
+        </div>
+      </div>
+    );
+  }
+  if (rec.kind === 'update') {
+    return (
+      <div style={{ padding: '.4rem 0 .2rem' }}>
+        <div style={{ fontSize: '.78rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--st-update)', marginBottom: '.5rem' }}>Changes — before → after</div>
+        <div style={{ display: 'grid', gap: '.1rem' }}>
+          {d.changes.map((c, i) => (
+            <div key={i} style={{ display: 'flex', gap: '1rem', padding: '.55rem 0', borderBottom: '1px solid var(--paper-line)', alignItems: 'baseline', opacity: c.noop ? .6 : 1 }}>
+              <div style={{ width: 170, flexShrink: 0 }}>
+                <div style={{ fontSize: '.88rem', fontWeight: 600, color: 'var(--text-on-light)' }}>{c.field}</div>
+                <div style={{ fontSize: '.76rem', color: 'var(--text-on-light-soft)' }}>{c.scope}</div>
+              </div>
+              <div style={{ flex: 1 }}><DiffPair before={c.before} after={c.after} noop={c.noop} /></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  if (rec.kind === 'error') {
+    return (
+      <div style={{ padding: '.5rem 0 .2rem' }}>
+        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '.6rem', padding: '.8rem 1rem', borderRadius: 10, background: 'var(--st-error-tint)', border: '1px solid var(--st-error-line)' }}>
+          <Icon name="alert" size={17} style={{ color: 'var(--st-error)', marginTop: '.1rem' }} />
+          <div style={{ fontSize: '.9rem', color: 'var(--text-on-light)' }}>
+            <span style={{ fontWeight: 600 }}>Row {rec.line} · {rec.column}</span>
+            <div style={{ color: 'var(--text-on-light-soft)', marginTop: '.2rem' }}>{rec.message}</div>
+            <div style={{ marginTop: '.4rem', fontSize: '.82rem', color: 'var(--text-on-light-soft)' }}>This product will not be imported. Correct the row and re-import — the valid products still go through.</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return <div style={{ padding: '.6rem 0', fontSize: '.88rem', color: 'var(--text-on-light-soft)' }}>This product matches your catalog exactly — nothing to change.</div>;
+}
+
+function PreviewRow({ rec, expanded, onToggle }) {
+  return (
+    <div style={{ borderBottom: '1px solid var(--paper-line)' }}>
+      <button onClick={onToggle} className="ie-prow" style={{
+        display: 'flex', alignItems: 'center', gap: '1rem', width: '100%', textAlign: 'left',
+        padding: '.85rem 1.2rem', background: expanded ? 'var(--violet-tint)' : 'transparent',
+        border: 'none', cursor: 'pointer', font: 'inherit', transition: 'background var(--dur-fast)',
+      }}>
+        <Icon name="chevron" size={15} style={{ color: 'var(--text-on-light-soft)', transform: expanded ? 'rotate(90deg)' : 'none', transition: 'transform var(--dur-fast)' }} />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '.96rem', color: 'var(--text-on-light)' }}>{rec.title}</div>
+          <div style={{ fontSize: '.8rem', color: 'var(--text-on-light-soft)', fontFamily: 'var(--font-body)' }}>{rec.handle}</div>
+        </div>
+        <span style={{ fontSize: '.82rem', color: 'var(--text-on-light-soft)', whiteSpace: 'nowrap' }}>{rec.variants} variant{rec.variants === 1 ? '' : 's'}</span>
+        <KindBadge kind={rec.kind} />
+      </button>
+      {expanded && <div style={{ padding: '0 1.2rem 1.1rem 2.4rem' }}><RecordDetail rec={rec} /></div>}
+    </div>
+  );
+}
+
+function ErrorTable({ errors }) {
+  return (
+    <Card pad="0" style={{ overflow: 'hidden' }}>
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '.88rem' }}>
+        <thead>
+          <tr style={{ textAlign: 'left', color: 'var(--text-on-light-soft)', fontSize: '.72rem', textTransform: 'uppercase', letterSpacing: '.06em' }}>
+            <th style={{ padding: '.75rem 1.2rem', fontWeight: 600, width: 70 }}>Line</th>
+            <th style={{ padding: '.75rem 1.2rem', fontWeight: 600, width: 150 }}>Column</th>
+            <th style={{ padding: '.75rem 1.2rem', fontWeight: 600 }}>What's wrong</th>
+          </tr>
+        </thead>
+        <tbody>
+          {errors.map((e, i) => (
+            <tr key={i} style={{ borderTop: '1px solid var(--paper-line)' }}>
+              <td style={{ padding: '.8rem 1.2rem', fontVariantNumeric: 'tabular-nums', color: 'var(--st-error)', fontWeight: 600 }}>{e.line}</td>
+              <td style={{ padding: '.8rem 1.2rem' }}><code style={codeStyle}>{e.column}</code></td>
+              <td style={{ padding: '.8rem 1.2rem', color: 'var(--text-on-light)' }}>
+                <span style={{ fontWeight: 600 }}>{e.title}</span> — {e.message}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Card>
+  );
+}
+
+function PreviewScreen({ scenario, onCancel, onConfirm }) {
+  const order = ['add', 'update', 'unchanged', 'error'];
+  const firstActive = order.find((k) => scenario.summary[k] > 0) || 'unchanged';
+  const [active, setActive] = _ifState(firstActive);
+  const [expanded, setExpanded] = _ifState(() => new Set());
+  const [warnOpen, setWarnOpen] = _ifState(true);
+
+  const toggle = (h) => setExpanded((s) => { const n = new Set(s); n.has(h) ? n.delete(h) : n.add(h); return n; });
+
+  const applyCount = scenario.summary.add + scenario.summary.update;
+  const records = scenario.records[active] || [];
+  const extra = (scenario.extra && scenario.extra[active]) || 0;
+
+  return (
+    <div style={{ paddingBottom: 90 }}>
+      <ScreenHeader
+        eyebrow="Import preview"
+        title={scenario.file}
+        onBack={onCancel}
+        right={
+          <div style={{ textAlign: 'right' }}>
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '.45em', padding: '.4rem .85rem', borderRadius: 999, background: scenario.dialectKind === 'shopify' ? 'var(--st-update-tint)' : 'var(--violet-tint)', border: `1px solid ${scenario.dialectKind === 'shopify' ? 'var(--st-update-line)' : 'var(--violet-line)'}` }}>
+              <Icon name={scenario.dialectKind === 'shopify' ? 'refresh' : 'check'} size={14} style={{ color: scenario.dialectKind === 'shopify' ? 'var(--st-update)' : 'var(--wv-violet)' }} />
+              <span style={{ fontSize: '.84rem', fontWeight: 600, color: 'var(--text-on-light)' }}>Recognized: {scenario.dialect}</span>
+            </div>
+          </div>
+        }
+      />
+
+      {/* nothing-written reassurance */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '.5em', fontSize: '.86rem', color: 'var(--text-on-light-soft)', marginBottom: '1.3rem', marginTop: '-.6rem' }}>
+        <Icon name="check" size={14} style={{ color: 'var(--st-add)' }} /> Nothing has been written to your catalog yet. This is a preview.
+      </div>
+
+      {/* warnings band */}
+      {scenario.unknownColumns.length > 0 && (
+        <div style={{ marginBottom: '1.3rem', borderRadius: '12px', background: 'var(--st-update-tint)', border: '1px solid var(--st-update-line)', overflow: 'hidden' }}>
+          <button onClick={() => setWarnOpen((o) => !o)} style={{ display: 'flex', alignItems: 'center', gap: '.6rem', width: '100%', padding: '.8rem 1.1rem', background: 'transparent', border: 'none', cursor: 'pointer', font: 'inherit', textAlign: 'left' }}>
+            <Icon name="alert" size={17} style={{ color: 'var(--st-update)' }} />
+            <span style={{ flex: 1, fontSize: '.92rem', color: 'var(--text-on-light)' }}>
+              <strong style={{ fontWeight: 600 }}>{scenario.unknownColumns.length} columns won't be imported.</strong>
+              <span style={{ color: 'var(--text-on-light-soft)' }}> They're recognized but have no home in your catalog — warned, never silently dropped.</span>
+            </span>
+            <Icon name="chevronDown" size={15} style={{ color: 'var(--text-on-light-soft)', transform: warnOpen ? 'none' : 'rotate(-90deg)', transition: 'transform var(--dur-fast)' }} />
+          </button>
+          {warnOpen && (
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '.4rem', padding: '0 1.1rem 1rem 2.7rem' }}>
+              {scenario.unknownColumns.map((c) => (
+                <span key={c} style={{ fontSize: '.8rem', color: 'var(--text-on-light-soft)', background: 'var(--surface-card-light)', border: '1px solid var(--paper-line-strong)', borderRadius: 999, padding: '.18rem .6rem', fontFamily: 'var(--font-body)', whiteSpace: 'nowrap' }}>{c}</span>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* summary tiles */}
+      <div style={{ display: 'flex', gap: '.8rem', marginBottom: '1.6rem', flexWrap: 'wrap' }}>
+        <StatTile n={scenario.summary.add} label="To add" kind="add" active={active === 'add'} onClick={() => setActive('add')} disabled={scenario.summary.add === 0} />
+        <StatTile n={scenario.summary.update} label="To update" kind="update" active={active === 'update'} onClick={() => setActive('update')} disabled={scenario.summary.update === 0} />
+        <StatTile n={scenario.summary.unchanged} label="Unchanged" kind="unchanged" active={active === 'unchanged'} onClick={() => setActive('unchanged')} disabled={scenario.summary.unchanged === 0} />
+        <StatTile n={scenario.summary.error} label="In error" kind="error" active={active === 'error'} onClick={() => setActive('error')} disabled={scenario.summary.error === 0} />
+      </div>
+
+      {/* detail list / error table */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '.5rem', marginBottom: '.7rem' }}>
+        <KindBadge kind={active} size="sm" />
+        <span style={{ fontSize: '.86rem', color: 'var(--text-on-light-soft)' }}>
+          {active === 'error' ? 'These rows are reported, not applied.' : active === 'unchanged' ? 'Re-supplied rows that already match your catalog.' : 'Expand any product to see exactly what will happen.'}
+        </span>
+      </div>
+
+      {active === 'error'
+        ? <ErrorTable errors={records} />
+        : (
+          <Card pad="0" style={{ overflow: 'hidden' }}>
+            {records.length === 0
+              ? <div style={{ padding: '1.6rem', textAlign: 'center', color: 'var(--text-on-light-soft)', fontSize: '.9rem' }}>Nothing in this group.</div>
+              : records.map((rec) => <PreviewRow key={rec.handle} rec={rec} expanded={expanded.has(rec.handle)} onToggle={() => toggle(rec.handle)} />)}
+            {extra > 0 && (
+              <div style={{ padding: '.85rem 1.2rem', fontSize: '.86rem', color: 'var(--text-on-light-soft)', borderTop: '1px solid var(--paper-line)', textAlign: 'center' }}>
+                + {extra.toLocaleString()} more {active} {extra === 1 ? 'product' : 'products'} in this file
+              </div>
+            )}
+          </Card>
+        )}
+
+      {/* sticky footer */}
+      <div style={{
+        position: 'sticky', bottom: 0, marginTop: '1.6rem', marginLeft: -8, marginRight: -8,
+        padding: '1rem 1.2rem', borderRadius: '14px',
+        background: 'rgba(255,255,255,.9)', backdropFilter: 'blur(8px)',
+        border: '1px solid var(--paper-line-strong)', boxShadow: '0 -6px 20px rgba(14,18,48,.06)',
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem', flexWrap: 'wrap',
+      }}>
+        <div style={{ fontSize: '.9rem', color: 'var(--text-on-light-soft)' }}>
+          {scenario.noop
+            ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: '.4em' }}><Icon name="check" size={15} style={{ color: 'var(--st-add)' }} /> Nothing to change — your catalog already matches this file.</span>
+            : <span><strong style={{ color: 'var(--text-on-light)', fontWeight: 600 }}>{applyCount.toLocaleString()} products</strong> will be added or updated{scenario.summary.error ? <span>, <strong style={{ color: 'var(--st-error)' }}>{scenario.summary.error} rows</strong> left in error</span> : ''}.</span>}
+        </div>
+        <div style={{ display: 'flex', gap: '.7rem' }}>
+          <Button variant="ghost" onLight onClick={onCancel}>Cancel</Button>
+          <Button variant="primary" disabled={scenario.noop || applyCount === 0} onClick={() => onConfirm(scenario)}>
+            <Icon name="check" size={16} /> Import {applyCount.toLocaleString()} products
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ============================== RUN DETAIL =============================== */
+
+function RunDetailScreen({ run, scenario, images, onBack, live }) {
+  // live: true → animate applying → fetching → complete. false → show final state.
+  const [phase, setPhase] = _ifState(live ? 'applying' : 'done');
+  const [fetched, setFetched] = _ifState(live ? 0 : images.fetched + images.problems.length);
+  const timer = _ifRef(null);
+  const total = images.total;
+
+  _ifEffect(() => {
+    if (!live) return;
+    const t1 = setTimeout(() => setPhase('fetching'), 1100);
+    return () => clearTimeout(t1);
+  }, [live]);
+
+  _ifEffect(() => {
+    if (phase !== 'fetching') return;
+    if (fetched >= total) { setPhase('done'); return; }
+    const id = setTimeout(() => setFetched((f) => Math.min(total, f + 1)), 120);
+    return () => clearTimeout(id);
+  }, [phase, fetched, total]);
+
+  const counts = run || { added: scenario.summary.add, updated: scenario.summary.update, errors: scenario.summary.error };
+  const hasProblems = images.problems.length > 0 || counts.errors > 0;
+  const statusLabel = phase === 'applying' ? 'Importing…' : phase === 'fetching' ? 'Fetching images…' : (hasProblems ? 'Complete · with problems' : 'Complete');
+  const statusColor = phase === 'done' ? (hasProblems ? 'var(--st-update)' : 'var(--st-add)') : 'var(--wv-violet)';
+
+  return (
+    <div>
+      <ScreenHeader
+        eyebrow="Import run"
+        title={scenario.file}
+        onBack={onBack}
+        right={
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '.5em', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '.95rem', color: statusColor }}>
+            {phase === 'done' ? <span style={{ width: 9, height: 9, borderRadius: 999, background: statusColor }} /> : <Spinner size={15} />}
+            {statusLabel}
+          </span>
+        }
+      />
+      <div style={{ fontSize: '.88rem', color: 'var(--text-on-light-soft)', marginTop: '-.7rem', marginBottom: '1.4rem' }}>
+        Imported {run ? run.rel : 'just now'} by {window.IEData.STOREFRONT.email} · {scenario.dialect}
+      </div>
+
+      {/* result summary */}
+      <div style={{ display: 'flex', gap: '.8rem', marginBottom: '1.8rem', flexWrap: 'wrap' }}>
+        <ResultTile n={counts.added} label="Products added" kind="add" />
+        <ResultTile n={counts.updated} label="Products updated" kind="update" />
+        <ResultTile n={counts.errors} label="Rows in error" kind="error" />
+      </div>
+
+      {/* images section */}
+      <section style={{ marginBottom: '1.8rem' }}>
+        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.2rem', color: 'var(--text-on-light)', margin: '0 0 .9rem' }}>Images</h2>
+        <Card>
+          {phase !== 'done' && phase === 'applying' ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '.6rem', color: 'var(--text-on-light-soft)', fontSize: '.92rem' }}>
+              <Spinner size={16} /> Applying catalog rows — the image fetch begins once products commit.
+            </div>
+          ) : phase === 'fetching' ? (
+            <div>
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '.7rem' }}>
+                <span style={{ display: 'flex', alignItems: 'center', gap: '.5em', fontWeight: 600, color: 'var(--text-on-light)' }}><Spinner size={15} /> Fetching images</span>
+                <span style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--text-on-light-soft)', fontSize: '.9rem' }}>{fetched.toLocaleString()} of {total.toLocaleString()}</span>
+              </div>
+              <ProgressBar value={fetched} max={total} />
+              <div style={{ fontSize: '.84rem', color: 'var(--text-on-light-soft)', marginTop: '.7rem' }}>Running in the background — your catalog is already live. You can leave this page and come back.</div>
+            </div>
+          ) : (
+            <div>
+              <div style={{ display: 'flex', gap: '1.4rem', flexWrap: 'wrap', marginBottom: images.problems.length ? '1.2rem' : 0 }}>
+                <SummaryStat label="Fetched" n={images.fetched} color="var(--st-add)" glyph="check" />
+                <SummaryStat label="Rejected" n={images.problems.filter((p) => p.outcome === 'rejected').length} color="var(--st-error)" glyph="x" />
+                <SummaryStat label="Failed" n={images.problems.filter((p) => p.outcome === 'failed').length} color="var(--st-error)" glyph="alert" />
+              </div>
+              {images.problems.length > 0 ? (
+                <div>
+                  <div style={{ fontSize: '.82rem', fontWeight: 600, color: 'var(--text-on-light-soft)', marginBottom: '.5rem' }}>Only problems are listed — these products show a placeholder until you re-import a corrected URL.</div>
+                  <div style={{ border: '1px solid var(--paper-line)', borderRadius: 10, overflow: 'hidden' }}>
+                    {images.problems.map((p, i) => (
+                      <div key={i} style={{ display: 'flex', gap: '1rem', padding: '.8rem 1rem', borderTop: i ? '1px solid var(--paper-line)' : 'none', alignItems: 'flex-start' }}>
+                        <span style={{ marginTop: '.1rem' }}><KindBadge kind="error" size="sm" /></span>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div style={{ fontSize: '.9rem', color: 'var(--text-on-light)', fontWeight: 600 }}>{p.handle} <span style={{ color: 'var(--text-on-light-soft)', fontWeight: 400 }}>· {p.variant}</span></div>
+                          <div style={{ fontSize: '.8rem', color: 'var(--text-on-light-soft)', fontFamily: 'var(--font-body)', wordBreak: 'break-all', margin: '.1rem 0' }}>{p.url}</div>
+                          <div style={{ fontSize: '.84rem', color: 'var(--st-error)' }}>{p.outcome === 'rejected' ? 'Rejected' : 'Failed'} — {p.reason}</div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : <div style={{ fontSize: '.9rem', color: 'var(--st-add)' }}>All images fetched cleanly.</div>}
+            </div>
+          )}
+        </Card>
+      </section>
+
+      {/* error table */}
+      {scenario.records.error.length > 0 && (
+        <section>
+          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.2rem', color: 'var(--text-on-light)', margin: '0 0 .9rem' }}>Rows in error <span style={{ fontWeight: 500, color: 'var(--text-on-light-soft)', fontSize: '1rem' }}>· unapplied</span></h2>
+          <ErrorTable errors={scenario.records.error} />
+        </section>
+      )}
+    </div>
+  );
+}
+
+function ResultTile({ n, label, kind }) {
+  const m = KIND_META[kind];
+  return (
+    <div style={{ flex: '1 1 0', minWidth: 120, background: 'var(--surface-card-light)', border: '1px solid var(--paper-line)', borderRadius: 12, padding: '1rem 1.2rem' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '.4em', marginBottom: '.3rem' }}>
+        <span style={{ width: 7, height: 7, borderRadius: 999, background: `var(--st-${m.cssvar})` }} />
+        <span style={{ fontSize: '.74rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--text-on-light-soft)' }}>{label}</span>
+      </div>
+      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.8rem', color: kind === 'error' && n === 0 ? 'var(--text-on-light)' : `var(--st-${m.cssvar})` }}>{n.toLocaleString()}</div>
+    </div>
+  );
+}
+
+function SummaryStat({ label, n, color, glyph }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '.55rem' }}>
+      <span style={{ width: 30, height: 30, borderRadius: 8, background: color, opacity: .12, position: 'absolute' }} />
+      <span style={{ width: 30, height: 30, borderRadius: 8, display: 'grid', placeItems: 'center', background: 'color-mix(in srgb, ' + color + ' 12%, transparent)' }}>
+        <Icon name={glyph} size={16} style={{ color }} />
+      </span>
+      <span>
+        <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.2rem', color: 'var(--text-on-light)', lineHeight: 1 }}>{n.toLocaleString()}</span>
+        <span style={{ fontSize: '.78rem', color: 'var(--text-on-light-soft)' }}>{label}</span>
+      </span>
+    </div>
+  );
+}
+
+/* shared inline styles */
+const ghostBtn = {
+  fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '.92rem', color: 'var(--text-on-light)',
+  background: 'transparent', border: '1.5px solid var(--paper-line-strong)', borderRadius: 999,
+  padding: '.6rem 1.25rem', cursor: 'pointer',
+};
+const linkStyle = { display: 'inline-flex', alignItems: 'center', gap: '.35em', color: 'var(--wv-violet)', fontWeight: 500, fontSize: '.88rem', textDecoration: 'none' };
+const codeStyle = { fontFamily: 'ui-monospace, Menlo, monospace', fontSize: '.84em', background: 'var(--violet-tint)', color: 'var(--wv-ink)', padding: '.08rem .35rem', borderRadius: 5 };
+
+Object.assign(window, { UploadScreen, PreviewScreen, RunDetailScreen });
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/app/products.jsx b/ui/designs/SD-0002-products-bulk-csv-import-export/app/products.jsx
new file mode 100644
index 0000000..45a6ecd
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/app/products.jsx
@@ -0,0 +1,257 @@
+/* products.jsx — the Products page (§5.2): catalog home, empty + populated,
+   export menu, notices band, import history. Exported to window as ProductsPage. */
+
+var { Button, Eyebrow, Notice } = window.WiggleverseDesignSystem_94cd80 || {};
+
+const { useState: _pUseState, useRef: _pUseRef, useEffect: _pUseEffect } = React;
+
+/* ---- real file download helpers (makes PUC-11 / PUC-9 tangible) ---- */
+function downloadText(filename, text) {
+  const blob = new Blob([text], { type: 'text/csv;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url; a.download = filename; document.body.appendChild(a); a.click();
+  document.body.removeChild(a); setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+const SAMPLE_CSV = [
+  'Handle,Title,Description,Vendor,Type,Tags,Status,Published,Option1 Name,Option1 Value,Option2 Name,Option2 Value,Variant SKU,Variant Price,Variant Cost,Variant Inventory Qty,Image Src,Image Position,Image Alt Text',
+  'alpine-fleece-pullover,Alpine Fleece Pullover,"<p>Brushed recycled fleece, cut for layering.</p>",Wander & Wool,standalone,"outerwear, fleece",active,TRUE,Size,S,Color,Heather Grey,AFP-S-HG,88.00,34.00,12,https://cdn.example.com/alpine-front.jpg,1,Alpine fleece — front',
+  'alpine-fleece-pullover,,,,,,,,Size,M,Color,Heather Grey,AFP-M-HG,88.00,34.00,9,,,',
+  'alpine-fleece-pullover,,,,,,,,Size,L,Color,Forest,AFP-L-FO,88.00,34.00,7,https://cdn.example.com/alpine-forest.jpg,2,Alpine fleece — forest',
+  'harbor-tote,Harbor Canvas Tote,"<p>Heavyweight organic-canvas tote.</p>",Wander & Wool,standalone,"bags, accessories",active,TRUE,,,,,HCT-01,48.00,18.00,40,https://cdn.example.com/harbor-tote.jpg,1,Harbor tote',
+].join('\n');
+
+function StatusFilterMenu({ onExport, onClose }) {
+  const [status, setStatus] = _pUseState('all');
+  const opts = [['all', 'All products'], ['active', 'Active'], ['draft', 'Draft'], ['archived', 'Archived']];
+  const ref = _pUseRef(null);
+  _pUseEffect(() => {
+    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
+    document.addEventListener('mousedown', h);
+    return () => document.removeEventListener('mousedown', h);
+  }, []);
+  return (
+    <div ref={ref} style={{
+      position: 'absolute', top: 'calc(100% + .5rem)', right: 0, zIndex: 40, width: 246,
+      background: 'var(--surface-card-light)', border: '1px solid var(--paper-line-strong)',
+      borderRadius: '12px', boxShadow: '0 12px 32px rgba(14,18,48,.16)', padding: '.7rem',
+    }}>
+      <div style={{ fontSize: '.72rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--text-on-light-soft)', padding: '.3rem .4rem .5rem' }}>Export — filter by status</div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '.1rem' }}>
+        {opts.map(([v, label]) => (
+          <button key={v} onClick={() => setStatus(v)} style={{
+            display: 'flex', alignItems: 'center', gap: '.6rem', padding: '.5rem .5rem', borderRadius: 8,
+            border: 'none', background: status === v ? 'var(--violet-tint)' : 'transparent', cursor: 'pointer',
+            font: 'inherit', fontSize: '.92rem', color: 'var(--text-on-light)', textAlign: 'left',
+          }}>
+            <span style={{
+              width: 16, height: 16, borderRadius: 999, flexShrink: 0,
+              border: `1.5px solid ${status === v ? 'var(--wv-violet)' : 'var(--paper-line-strong)'}`,
+              display: 'grid', placeItems: 'center',
+            }}>
+              {status === v && <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--wv-violet)' }} />}
+            </span>
+            {label}
+          </button>
+        ))}
+      </div>
+      <div style={{ borderTop: '1px solid var(--paper-line)', marginTop: '.5rem', paddingTop: '.6rem' }}>
+        <button onClick={() => onExport(status)} style={{
+          width: '100%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '.45em',
+          fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '.92rem', color: 'var(--cta-text)',
+          background: 'var(--cta)', border: 'none', borderRadius: 999, padding: '.55rem 1rem', cursor: 'pointer', whiteSpace: 'nowrap',
+        }}>
+          <Icon name="download" size={15} /> Download CSV
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function HistoryStatus({ status }) {
+  const map = {
+    applying: ['Importing…', 'var(--wv-violet)', true],
+    fetching_images: ['Fetching images…', 'var(--wv-violet)', true],
+    complete: ['Complete', 'var(--st-add)', false],
+    complete_with_problems: ['Complete · problems', 'var(--st-update)', false],
+  };
+  const [label, color, spin] = map[status] || map.complete;
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '.4em', fontSize: '.84rem', fontWeight: 600, color }}>
+      {spin ? <Spinner size={13} /> : <span style={{ width: 7, height: 7, borderRadius: 999, background: color }} />}
+      {label}
+    </span>
+  );
+}
+
+function ImportHistory({ runs, onOpenRun }) {
+  return (
+    <section style={{ marginTop: '2.4rem' }}>
+      <div style={{ display: 'flex', alignItems: 'baseline', gap: '.7rem', marginBottom: '.9rem' }}>
+        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.25rem', color: 'var(--text-on-light)', margin: 0 }}>Import history</h2>
+        <span style={{ fontSize: '.88rem', color: 'var(--text-on-light-soft)' }}>{runs.length} runs · newest first</span>
+      </div>
+      <Card pad="0" style={{ overflow: 'hidden' }}>
+        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '.9rem' }}>
+          <thead>
+            <tr style={{ textAlign: 'left', color: 'var(--text-on-light-soft)', fontSize: '.74rem', textTransform: 'uppercase', letterSpacing: '.06em' }}>
+              <th style={{ padding: '.85rem 1.2rem', fontWeight: 600 }}>When</th>
+              <th style={{ padding: '.85rem 1.2rem', fontWeight: 600 }}>File</th>
+              <th style={{ padding: '.85rem 1.2rem', fontWeight: 600 }}>Dialect</th>
+              <th style={{ padding: '.85rem 1.2rem', fontWeight: 600, textAlign: 'right' }}>Added / Updated / Errors</th>
+              <th style={{ padding: '.85rem 1.2rem', fontWeight: 600 }}>Images</th>
+              <th style={{ padding: '.85rem 1.2rem', fontWeight: 600 }}>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {runs.map((r, i) => (
+              <tr key={r.id} onClick={() => onOpenRun(r.id)} className="ie-hrow" style={{
+                borderTop: '1px solid var(--paper-line)', cursor: 'pointer',
+              }}>
+                <td style={{ padding: '.95rem 1.2rem', color: 'var(--text-on-light-soft)', whiteSpace: 'nowrap' }}>{r.rel}</td>
+                <td style={{ padding: '.95rem 1.2rem' }}>
+                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: '.45em', color: 'var(--text-on-light)', fontWeight: 500 }}>
+                    <Icon name="file" size={15} style={{ color: 'var(--wv-violet)' }} /> {r.file}
+                  </span>
+                </td>
+                <td style={{ padding: '.95rem 1.2rem', color: 'var(--text-on-light-soft)' }}>{r.dialect}</td>
+                <td style={{ padding: '.95rem 1.2rem', textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>
+                  <span style={{ color: 'var(--st-add)', fontWeight: 600 }}>+{r.added}</span>
+                  <span style={{ color: 'var(--text-on-light-soft)', margin: '0 .35em' }}>·</span>
+                  <span style={{ color: 'var(--st-update)', fontWeight: 600 }}>±{r.updated}</span>
+                  <span style={{ color: 'var(--text-on-light-soft)', margin: '0 .35em' }}>·</span>
+                  <span style={{ color: r.errors ? 'var(--st-error)' : 'var(--text-on-light-soft)', fontWeight: 600 }}>!{r.errors}</span>
+                </td>
+                <td style={{ padding: '.95rem 1.2rem', color: 'var(--text-on-light-soft)', whiteSpace: 'nowrap' }}>
+                  {(r.images.fetched + r.images.rejected + r.images.failed) > 0
+                    ? <span><span style={{ color: 'var(--st-add)' }}>{r.images.fetched} ✓</span> · <span style={{ color: 'var(--st-error)' }}>{r.images.rejected + r.images.failed} ✗</span></span>
+                    : <span style={{ opacity: .6 }}>—</span>}
+                </td>
+                <td style={{ padding: '.95rem 1.2rem' }}><HistoryStatus status={r.status} /></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Card>
+    </section>
+  );
+}
+
+function ProductsPage({ data, catalogEmpty, onImport, onOpenRun, toast }) {
+  const { STOREFRONT, HISTORY } = data;
+  const [menuOpen, setMenuOpen] = _pUseState(false);
+  const count = catalogEmpty ? 0 : STOREFRONT.productCount;
+  const runs = catalogEmpty ? [] : HISTORY;
+
+  const doExport = (status) => {
+    setMenuOpen(false);
+    toast(`Exporting ${status === 'all' ? 'all' : status} products…`);
+    setTimeout(() => {
+      const header = SAMPLE_CSV.split('\n')[0];
+      downloadText(`wander-wool-catalog-${status}.csv`, header + '\n' + SAMPLE_CSV.split('\n').slice(1).join('\n'));
+      toast(`Exported ${count.toLocaleString()} products → wander-wool-catalog-${status}.csv`, 'success');
+    }, 900);
+  };
+
+  return (
+    <div>
+      {/* header row */}
+      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: '1rem', flexWrap: 'wrap' }}>
+        <div>
+          <Eyebrow onLight>Catalog</Eyebrow>
+          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '2.1rem', letterSpacing: '-0.015em', color: 'var(--text-on-light)', margin: '.35rem 0 0' }}>
+            Products <span style={{ color: 'var(--text-on-light-soft)', fontWeight: 500 }}>· {count.toLocaleString()}</span>
+          </h1>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '.7rem', position: 'relative' }}>
+          <div style={{ position: 'relative' }}>
+            <button onClick={() => !catalogEmpty && setMenuOpen((o) => !o)} disabled={catalogEmpty} title={catalogEmpty ? 'Nothing to export yet' : ''} style={{
+              display: 'inline-flex', alignItems: 'center', gap: '.45em', fontFamily: 'var(--font-display)',
+              fontWeight: 500, fontSize: '.92rem', color: 'var(--text-on-light)', background: 'var(--surface-card-light)',
+              border: '1.5px solid var(--paper-line-strong)', borderRadius: 999, padding: '.55rem 1.1rem',
+              cursor: catalogEmpty ? 'not-allowed' : 'pointer', opacity: catalogEmpty ? .5 : 1,
+            }}>
+              <Icon name="download" size={16} /> Export <Icon name="chevronDown" size={14} />
+            </button>
+            {menuOpen && <StatusFilterMenu onExport={doExport} onClose={() => setMenuOpen(false)} />}
+          </div>
+          <Button variant="primary" onClick={onImport}>
+            <Icon name="upload" size={16} /> Import products
+          </Button>
+        </div>
+      </div>
+
+      {catalogEmpty
+        ? <span style={{ display: 'block', fontSize: '.9rem', color: 'var(--text-on-light-soft)', marginTop: '.5rem' }}>An honest empty shell — nothing to manage yet.</span>
+        : <span style={{ display: 'block', fontSize: '.9rem', color: 'var(--text-on-light-soft)', marginTop: '.5rem' }}>One canonical CSV in, your whole catalog out — any time.</span>}
+
+      {/* notices band */}
+      {!catalogEmpty && STOREFRONT.imageProblemCount > 0 && (
+        <button onClick={() => onOpenRun(STOREFRONT.latestRunId)} style={{
+          display: 'flex', alignItems: 'center', gap: '.7rem', width: '100%', textAlign: 'left',
+          marginTop: '1.5rem', padding: '.85rem 1.1rem', borderRadius: '12px', cursor: 'pointer',
+          background: 'var(--st-update-tint)', border: '1px solid var(--st-update-line)', font: 'inherit',
+        }}>
+          <Icon name="image" size={18} style={{ color: 'var(--st-update)' }} />
+          <span style={{ flex: 1, color: 'var(--text-on-light)', fontSize: '.92rem' }}>
+            <strong style={{ fontWeight: 600 }}>{STOREFRONT.imageProblemCount} products have image problems.</strong>
+            <span style={{ color: 'var(--text-on-light-soft)' }}> Some images were rejected or unreachable in your latest import.</span>
+          </span>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '.3em', color: 'var(--st-update)', fontWeight: 600, fontSize: '.88rem' }}>
+            View run <Icon name="arrowRight" size={14} />
+          </span>
+        </button>
+      )}
+
+      {/* primary content */}
+      {catalogEmpty ? (
+        <Card style={{ marginTop: '1.8rem', padding: '3rem 2rem', textAlign: 'center' }}>
+          <div style={{ width: 56, height: 56, margin: '0 auto 1.1rem', borderRadius: 16, background: 'var(--violet-tint)', display: 'grid', placeItems: 'center' }}>
+            <Icon name="products" size={26} style={{ color: 'var(--wv-violet)' }} />
+          </div>
+          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.4rem', color: 'var(--text-on-light)', margin: '0 0 .4rem' }}>No products yet</h2>
+          <p style={{ fontSize: '1rem', color: 'var(--text-on-light-soft)', maxWidth: '40ch', margin: '0 auto 1.5rem', lineHeight: 1.55 }}>
+            Bulk import is how product data gets in. Bring a CSV — yours, or an export from your old platform — and your catalog becomes your storefront.
+          </p>
+          <Button variant="primary" onClick={onImport}>
+            <Icon name="upload" size={16} /> Import products
+          </Button>
+          <div style={{ display: 'flex', gap: '1.6rem', justifyContent: 'center', marginTop: '1.5rem' }}>
+            <a onClick={(e) => { e.preventDefault(); downloadText('wander-wool-sample.csv', SAMPLE_CSV); toast('Sample CSV downloaded', 'success'); }} href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: '.35em', color: 'var(--wv-violet)', fontWeight: 500, fontSize: '.9rem', textDecoration: 'none' }}>
+              <Icon name="download" size={14} /> Download sample CSV
+            </a>
+            <a onClick={(e) => e.preventDefault()} href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: '.35em', color: 'var(--wv-violet)', fontWeight: 500, fontSize: '.9rem', textDecoration: 'none' }}>
+              <Icon name="link" size={14} /> Column reference
+            </a>
+          </div>
+        </Card>
+      ) : (
+        <Card style={{ marginTop: '1.8rem', display: 'flex', alignItems: 'center', gap: '1.2rem', padding: '1.4rem 1.6rem' }}>
+          <div style={{ width: 46, height: 46, flexShrink: 0, borderRadius: 12, background: 'var(--add-tint)', display: 'grid', placeItems: 'center' }}>
+            <Icon name="check" size={22} style={{ color: 'var(--st-add)' }} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '1.05rem', color: 'var(--text-on-light)' }}>Your catalog is loaded — {count.toLocaleString()} products.</div>
+            <div style={{ fontSize: '.92rem', color: 'var(--text-on-light-soft)', marginTop: '.15rem' }}>The browsable product list arrives with an upcoming release. For now, manage it in bulk: import to change it, export to take it.</div>
+          </div>
+          <span style={{ whiteSpace: 'nowrap' }}><Notice>List · soon</Notice></span>
+        </Card>
+      )}
+
+      {/* history */}
+      {runs.length > 0
+        ? <ImportHistory runs={runs} onOpenRun={onOpenRun} />
+        : !catalogEmpty ? null : (
+          <section style={{ marginTop: '2.4rem' }}>
+            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.25rem', color: 'var(--text-on-light)', margin: '0 0 .9rem' }}>Import history</h2>
+            <Card style={{ textAlign: 'center', padding: '2rem', color: 'var(--text-on-light-soft)' }}>No imports yet.</Card>
+          </section>
+        )}
+    </div>
+  );
+}
+
+window.ProductsPage = ProductsPage;
+window.IE_downloadText = downloadText;
+window.IE_SAMPLE_CSV = SAMPLE_CSV;
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/app/shell.jsx b/ui/designs/SD-0002-products-bulk-csv-import-export/app/shell.jsx
new file mode 100644
index 0000000..dd164ca
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/app/shell.jsx
@@ -0,0 +1,117 @@
+/* shell.jsx — SD-0001 admin shell: dark cosmic sidebar nav + top header
+   (storefront name left, signed-in email + sign out right), light paper canvas.
+   Exported to window as AdminShell. */
+
+var { Notice, Soul } = window.WiggleverseDesignSystem_94cd80 || {};
+
+const NAV_ITEMS = [
+  { id: 'home', label: 'Home', icon: 'home' },
+  { id: 'products', label: 'Products', icon: 'products' },
+  { id: 'orders', label: 'Orders', icon: 'cart', soon: true },
+  { id: 'customers', label: 'Customers', icon: 'tag', soon: true },
+  { id: 'analytics', label: 'Analytics', icon: 'gauge', soon: true },
+  { id: 'settings', label: 'Settings', icon: 'gauge', soon: true },
+];
+
+function SidebarItem({ item, active, onClick }) {
+  const [hover, setHover] = _shUseState(false);
+  return (
+    <button
+      onClick={() => !item.soon && onClick(item.id)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      disabled={item.soon}
+      style={{
+        display: 'flex', alignItems: 'center', gap: '.7rem', width: '100%',
+        padding: '.6rem .8rem', borderRadius: '10px', border: '1px solid transparent',
+        font: 'inherit', textAlign: 'left', cursor: item.soon ? 'default' : 'pointer',
+        fontFamily: 'var(--font-body)', fontSize: '.95rem', fontWeight: active ? 600 : 500,
+        color: active ? 'var(--wv-starlight)' : item.soon ? 'var(--wv-starlight-55)' : 'var(--wv-starlight-78)',
+        background: active ? 'var(--wv-lilac-16)' : hover && !item.soon ? 'var(--wv-lilac-08)' : 'transparent',
+        borderColor: active ? 'var(--wv-lilac-32)' : 'transparent',
+        transition: 'background var(--dur-fast), color var(--dur-fast)',
+      }}>
+      <Icon name={item.icon} size={18} stroke={active ? 1.9 : 1.6}
+        style={{ color: active ? 'var(--wv-lilac)' : 'inherit' }} />
+      <span style={{ flex: 1 }}>{item.label}</span>
+      {item.soon && <Notice>Soon</Notice>}
+    </button>
+  );
+}
+
+function AdminShell({ current, onNav, storefront, children }) {
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh', background: 'var(--surface-paper)' }}>
+      {/* ---- Sidebar ---- */}
+      <aside style={{
+        width: 248, flexShrink: 0, position: 'sticky', top: 0, alignSelf: 'flex-start',
+        height: '100vh', display: 'flex', flexDirection: 'column',
+        background: 'var(--wv-midnight)',
+        backgroundImage:
+          'radial-gradient(1px 1px at 38px 60px, rgba(237,234,255,.5), transparent),' +
+          'radial-gradient(1px 1px at 180px 130px, rgba(237,234,255,.35), transparent),' +
+          'radial-gradient(1.4px 1.4px at 90px 320px, rgba(244,199,107,.45), transparent),' +
+          'radial-gradient(1px 1px at 200px 460px, rgba(237,234,255,.4), transparent),' +
+          'radial-gradient(1px 1px at 50px 540px, rgba(155,140,255,.5), transparent)',
+        borderRight: '1px solid var(--wv-lilac-16)',
+      }}>
+        {/* brand lockup */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '.6rem', padding: '1.25rem 1.25rem 1.1rem' }}>
+          <CircleMark size={30} />
+          <div style={{ lineHeight: 1.15 }}>
+            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '.98rem', color: 'var(--wv-starlight)', letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{storefront.name}</div>
+            <div style={{ fontFamily: 'var(--font-display)', fontSize: '.6rem', fontWeight: 500, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--wv-starlight-55)', marginTop: '.12rem' }}>ecomm · admin</div>
+          </div>
+        </div>
+
+        <nav style={{ display: 'flex', flexDirection: 'column', gap: '.2rem', padding: '0 .7rem', marginTop: '.3rem' }}>
+          {NAV_ITEMS.map((it) => (
+            <SidebarItem key={it.id} item={it} active={current === it.id} onClick={onNav} />
+          ))}
+        </nav>
+
+        <div style={{ marginTop: 'auto', padding: '1.1rem 1.25rem 1.25rem', borderTop: '1px solid var(--wv-lilac-12)' }}>
+          <Soul size="sm">Your catalog is yours — it can leave whole, any time.</Soul>
+        </div>
+      </aside>
+
+      {/* ---- Main column ---- */}
+      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+        {/* top header */}
+        <header style={{
+          position: 'sticky', top: 0, zIndex: 20,
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          padding: '.85rem 2rem', background: 'rgba(246,244,251,.86)', backdropFilter: 'blur(10px)',
+          borderBottom: '1px solid var(--paper-line)',
+        }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '.6rem', minWidth: 0 }}>
+            <span style={{ width: 9, height: 9, borderRadius: 999, background: 'var(--st-add)', boxShadow: '0 0 0 3px rgba(31,138,91,.15)' }} />
+            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '.98rem', color: 'var(--text-on-light)', whiteSpace: 'nowrap' }}>{storefront.name}</span>
+            <span style={{ fontSize: '.85rem', color: 'var(--text-on-light-soft)', whiteSpace: 'nowrap' }}>· live storefront</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <span style={{ fontSize: '.88rem', color: 'var(--text-on-light-soft)' }}>{storefront.email}</span>
+            <button style={{
+              display: 'inline-flex', alignItems: 'center', gap: '.4em', font: 'inherit',
+              fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '.85rem',
+              color: 'var(--text-on-light)', background: 'transparent',
+              border: '1.5px solid var(--paper-line-strong)', borderRadius: 999,
+              padding: '.4rem .9rem', cursor: 'pointer',
+            }}>
+              <Icon name="signout" size={15} /> Sign out
+            </button>
+          </div>
+        </header>
+
+        <main style={{ flex: 1, padding: '2.2rem 2rem 4rem' }}>
+          <div style={{ maxWidth: 1080, margin: '0 auto' }}>
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+const { useState: _shUseState } = React;
+window.AdminShell = AdminShell;
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/app/tweaks-panel.jsx b/ui/designs/SD-0002-products-bulk-csv-import-export/app/tweaks-panel.jsx
new file mode 100644
index 0000000..ba6eaf9
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/app/tweaks-panel.jsx
@@ -0,0 +1,541 @@
+// @ds-adherence-ignore -- omelette starter scaffold (raw elements/hex/px by design)
+
+/* BEGIN USAGE */
+// tweaks-panel.jsx
+// Reusable Tweaks shell + form-control helpers.
+// Exports (to window): useTweaks, TweaksPanel, TweakSection, TweakRow, TweakSlider,
+//   TweakToggle, TweakRadio, TweakSelect, TweakText, TweakNumber, TweakColor, TweakButton.
+//
+// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,
+// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so
+// individual prototypes don't re-roll it. Ships a consistent set of controls so you
+// don't hand-draw <input type="range">, segmented radios, steppers, etc.
+//
+// Usage (in an HTML file that loads React + Babel):
+//
+//   const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+//     "primaryColor": "#D97757",
+//     "palette": ["#D97757", "#29261b", "#f6f4ef"],
+//     "fontSize": 16,
+//     "density": "regular",
+//     "dark": false
+//   }/*EDITMODE-END*/;
+//
+//   function App() {
+//     const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
+//     return (
+//       <div style={{ fontSize: t.fontSize, color: t.primaryColor }}>
+//         Hello
+//         <TweaksPanel>
+//           <TweakSection label="Typography" />
+//           <TweakSlider label="Font size" value={t.fontSize} min={10} max={32} unit="px"
+//                        onChange={(v) => setTweak('fontSize', v)} />
+//           <TweakRadio  label="Density" value={t.density}
+//                        options={['compact', 'regular', 'comfy']}
+//                        onChange={(v) => setTweak('density', v)} />
+//           <TweakSection label="Theme" />
+//           <TweakColor  label="Primary" value={t.primaryColor}
+//                        options={['#D97757', '#2A6FDB', '#1F8A5B', '#7A5AE0']}
+//                        onChange={(v) => setTweak('primaryColor', v)} />
+//           <TweakColor  label="Palette" value={t.palette}
+//                        options={[['#D97757', '#29261b', '#f6f4ef'],
+//                                  ['#475569', '#0f172a', '#f1f5f9']]}
+//                        onChange={(v) => setTweak('palette', v)} />
+//           <TweakToggle label="Dark mode" value={t.dark}
+//                        onChange={(v) => setTweak('dark', v)} />
+//         </TweaksPanel>
+//       </div>
+//     );
+//   }
+//
+// TweakRadio is the segmented control for 2–3 short options (auto-falls-back to
+// TweakSelect past ~16/~10 chars per label); reach for TweakSelect directly when
+// options are many or long. For color tweaks always curate 3-4 options rather than
+// a free picker; an option can also be a whole 2–5 color palette (the stored value
+// is the array). The Tweak* controls are a floor, not a ceiling — build custom
+// controls inside the panel if a tweak calls for UI they don't cover.
+/* END USAGE */
+// ─────────────────────────────────────────────────────────────────────────────
+
+const __TWEAKS_STYLE = `
+  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
+    max-height:calc(100vh - 32px);display:flex;flex-direction:column;
+    transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom right;
+    background:rgba(250,249,247,.78);color:#29261b;
+    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
+    border:.5px solid rgba(255,255,255,.6);border-radius:14px;
+    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
+    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
+  .twk-hd{display:flex;align-items:center;justify-content:space-between;
+    padding:10px 8px 10px 14px;cursor:move;user-select:none}
+  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
+  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
+    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
+  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
+  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
+    overflow-y:auto;overflow-x:hidden;min-height:0;
+    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
+  .twk-body::-webkit-scrollbar{width:8px}
+  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
+  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
+    border:2px solid transparent;background-clip:content-box}
+  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
+    border:2px solid transparent;background-clip:content-box}
+  .twk-row{display:flex;flex-direction:column;gap:5px}
+  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
+  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
+    color:rgba(41,38,27,.72)}
+  .twk-lbl>span:first-child{font-weight:500}
+  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
+
+  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
+    color:rgba(41,38,27,.45);padding:10px 0 0}
+  .twk-sect:first-child{padding-top:0}
+
+  .twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:26px;padding:0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;
+    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
+  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
+  select.twk-field{padding-right:22px;
+    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
+    background-repeat:no-repeat;background-position:right 8px center}
+
+  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
+    border-radius:999px;background:rgba(0,0,0,.12);outline:none}
+  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
+    width:14px;height:14px;border-radius:50%;background:#fff;
+    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
+    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+
+  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
+    background:rgba(0,0,0,.06);user-select:none}
+  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
+    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
+    transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
+  .twk-seg.dragging .twk-seg-thumb{transition:none}
+  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
+    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
+    border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
+    overflow-wrap:anywhere}
+
+  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
+    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
+  .twk-toggle[data-on="1"]{background:#34c759}
+  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
+  .twk-toggle[data-on="1"] i{transform:translateX(14px)}
+
+  .twk-num{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:26px;padding:0 0 0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
+  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
+    user-select:none;padding-right:8px}
+  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
+    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
+    outline:none;color:inherit;-moz-appearance:textfield}
+  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
+    -webkit-appearance:none;margin:0}
+  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
+
+  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
+    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
+  .twk-btn:hover{background:rgba(0,0,0,.88)}
+  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
+  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
+
+  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
+    background:transparent;flex-shrink:0}
+  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
+  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
+  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
+
+  .twk-chips{display:flex;gap:6px}
+  .twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:46px;
+    padding:0;border:0;border-radius:6px;overflow:hidden;cursor:default;
+    box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
+    transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}
+  .twk-chip:hover{transform:translateY(-1px);
+    box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12)}
+  .twk-chip[data-on="1"]{box-shadow:0 0 0 1.5px rgba(0,0,0,.85),
+    0 2px 6px rgba(0,0,0,.15)}
+  .twk-chip>span{position:absolute;top:0;bottom:0;right:0;width:34%;
+    display:flex;flex-direction:column;box-shadow:-1px 0 0 rgba(0,0,0,.1)}
+  .twk-chip>span>i{flex:1;box-shadow:0 -1px 0 rgba(0,0,0,.1)}
+  .twk-chip>span>i:first-child{box-shadow:none}
+  .twk-chip svg{position:absolute;top:6px;left:6px;width:13px;height:13px;
+    filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
+`;
+
+// ── useTweaks ───────────────────────────────────────────────────────────────
+// Single source of truth for tweak values. setTweak persists via the host
+// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).
+function useTweaks(defaults) {
+  const [values, setValues] = React.useState(defaults);
+  // Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a
+  // useState-style call doesn't write a "[object Object]" key into the persisted
+  // JSON block.
+  const setTweak = React.useCallback((keyOrEdits, val) => {
+    const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
+      ? keyOrEdits : { [keyOrEdits]: val };
+    setValues((prev) => ({ ...prev, ...edits }));
+    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
+    // Same-window signal so in-page listeners (deck-stage rail thumbnails)
+    // can react — the parent message only reaches the host, not peers.
+    window.dispatchEvent(new CustomEvent('tweakchange', { detail: edits }));
+  }, []);
+  return [values, setTweak];
+}
+
+// ── TweaksPanel ─────────────────────────────────────────────────────────────
+// Floating shell. Registers the protocol listener BEFORE announcing
+// availability — if the announce ran first, the host's activate could land
+// before our handler exists and the toolbar toggle would silently no-op.
+// The close button posts __edit_mode_dismissed so the host's toolbar toggle
+// flips off in lockstep; the host echoes __deactivate_edit_mode back which
+// is what actually hides the panel.
+function TweaksPanel({ title = 'Tweaks', children }) {
+  const [open, setOpen] = React.useState(false);
+  const dragRef = React.useRef(null);
+  const offsetRef = React.useRef({ x: 16, y: 16 });
+  const PAD = 16;
+
+  const clampToViewport = React.useCallback(() => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const w = panel.offsetWidth, h = panel.offsetHeight;
+    const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
+    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
+    offsetRef.current = {
+      x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
+      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
+    };
+    panel.style.right = offsetRef.current.x + 'px';
+    panel.style.bottom = offsetRef.current.y + 'px';
+  }, []);
+
+  React.useEffect(() => {
+    if (!open) return;
+    clampToViewport();
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', clampToViewport);
+      return () => window.removeEventListener('resize', clampToViewport);
+    }
+    const ro = new ResizeObserver(() => window.requestAnimationFrame(() => clampToViewport()));
+    ro.observe(document.documentElement);
+    return () => ro.disconnect();
+  }, [open, clampToViewport]);
+
+  React.useEffect(() => {
+    const onMsg = (e) => {
+      const t = e?.data?.type;
+      if (t === '__activate_edit_mode') setOpen(true);
+      else if (t === '__deactivate_edit_mode') setOpen(false);
+    };
+    window.addEventListener('message', onMsg);
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+    return () => window.removeEventListener('message', onMsg);
+  }, []);
+
+  const dismiss = () => {
+    setOpen(false);
+    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
+  };
+
+  const onDragStart = (e) => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const r = panel.getBoundingClientRect();
+    const sx = e.clientX, sy = e.clientY;
+    const startRight = window.innerWidth - r.right;
+    const startBottom = window.innerHeight - r.bottom;
+    const move = (ev) => {
+      offsetRef.current = {
+        x: startRight - (ev.clientX - sx),
+        y: startBottom - (ev.clientY - sy),
+      };
+      clampToViewport();
+    };
+    const up = () => {
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+  };
+
+  if (!open) return null;
+  return (
+    <>
+      <style>{__TWEAKS_STYLE}</style>
+      <div ref={dragRef} className="twk-panel" data-omelette-chrome=""
+           style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
+        <div className="twk-hd" onMouseDown={onDragStart}>
+          <b>{title}</b>
+          <button className="twk-x" aria-label="Close tweaks"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={dismiss}>✕</button>
+        </div>
+        <div className="twk-body">
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}
+
+// ── Layout helpers ──────────────────────────────────────────────────────────
+
+function TweakSection({ label, children }) {
+  return (
+    <>
+      <div className="twk-sect">{label}</div>
+      {children}
+    </>
+  );
+}
+
+function TweakRow({ label, value, children, inline = false }) {
+  return (
+    <div className={inline ? 'twk-row twk-row-h' : 'twk-row'}>
+      <div className="twk-lbl">
+        <span>{label}</span>
+        {value != null && <span className="twk-val">{value}</span>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ── Controls ────────────────────────────────────────────────────────────────
+
+function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = '', onChange }) {
+  return (
+    <TweakRow label={label} value={`${value}${unit}`}>
+      <input type="range" className="twk-slider" min={min} max={max} step={step}
+             value={value} onChange={(e) => onChange(Number(e.target.value))} />
+    </TweakRow>
+  );
+}
+
+function TweakToggle({ label, value, onChange }) {
+  return (
+    <div className="twk-row twk-row-h">
+      <div className="twk-lbl"><span>{label}</span></div>
+      <button type="button" className="twk-toggle" data-on={value ? '1' : '0'}
+              role="switch" aria-checked={!!value}
+              onClick={() => onChange(!value)}><i /></button>
+    </div>
+  );
+}
+
+function TweakRadio({ label, value, options, onChange }) {
+  const trackRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  // The active value is read by pointer-move handlers attached for the lifetime
+  // of a drag — ref it so a stale closure doesn't fire onChange for every move.
+  const valueRef = React.useRef(value);
+  valueRef.current = value;
+
+  // Segments wrap mid-word once per-segment width runs out. The track is
+  // ~248px (280 panel − 28 body pad − 4 seg pad), each button loses 12px
+  // to its own padding, and 11.5px system-ui averages ~6.3px/char — so 2
+  // options fit ~16 chars each, 3 fit ~10. Past that (or >3 options), fall
+  // back to a dropdown rather than wrap.
+  const labelLen = (o) => String(typeof o === 'object' ? o.label : o).length;
+  const maxLen = options.reduce((m, o) => Math.max(m, labelLen(o)), 0);
+  const fitsAsSegments = maxLen <= ({ 2: 16, 3: 10 }[options.length] ?? 0);
+  if (!fitsAsSegments) {
+    // <select> emits strings — map back to the original option value so the
+    // fallback stays type-preserving (numbers, booleans) like the segment path.
+    const resolve = (s) => {
+      const m = options.find((o) => String(typeof o === 'object' ? o.value : o) === s);
+      return m === undefined ? s : typeof m === 'object' ? m.value : m;
+    };
+    return <TweakSelect label={label} value={value} options={options}
+                        onChange={(s) => onChange(resolve(s))} />;
+  }
+  const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
+  const idx = Math.max(0, opts.findIndex((o) => o.value === value));
+  const n = opts.length;
+
+  const segAt = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    const inner = r.width - 4;
+    const i = Math.floor(((clientX - r.left - 2) / inner) * n);
+    return opts[Math.max(0, Math.min(n - 1, i))].value;
+  };
+
+  const onPointerDown = (e) => {
+    setDragging(true);
+    const v0 = segAt(e.clientX);
+    if (v0 !== valueRef.current) onChange(v0);
+    const move = (ev) => {
+      if (!trackRef.current) return;
+      const v = segAt(ev.clientX);
+      if (v !== valueRef.current) onChange(v);
+    };
+    const up = () => {
+      setDragging(false);
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+
+  return (
+    <TweakRow label={label}>
+      <div ref={trackRef} role="radiogroup" onPointerDown={onPointerDown}
+           className={dragging ? 'twk-seg dragging' : 'twk-seg'}>
+        <div className="twk-seg-thumb"
+             style={{ left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,
+                      width: `calc((100% - 4px) / ${n})` }} />
+        {opts.map((o) => (
+          <button key={o.value} type="button" role="radio" aria-checked={o.value === value}>
+            {o.label}
+          </button>
+        ))}
+      </div>
+    </TweakRow>
+  );
+}
+
+function TweakSelect({ label, value, options, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <select className="twk-field" value={value} onChange={(e) => onChange(e.target.value)}>
+        {options.map((o) => {
+          const v = typeof o === 'object' ? o.value : o;
+          const l = typeof o === 'object' ? o.label : o;
+          return <option key={v} value={v}>{l}</option>;
+        })}
+      </select>
+    </TweakRow>
+  );
+}
+
+function TweakText({ label, value, placeholder, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <input className="twk-field" type="text" value={value} placeholder={placeholder}
+             onChange={(e) => onChange(e.target.value)} />
+    </TweakRow>
+  );
+}
+
+function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
+  const clamp = (n) => {
+    if (min != null && n < min) return min;
+    if (max != null && n > max) return max;
+    return n;
+  };
+  const startRef = React.useRef({ x: 0, val: 0 });
+  const onScrubStart = (e) => {
+    e.preventDefault();
+    startRef.current = { x: e.clientX, val: value };
+    const decimals = (String(step).split('.')[1] || '').length;
+    const move = (ev) => {
+      const dx = ev.clientX - startRef.current.x;
+      const raw = startRef.current.val + dx * step;
+      const snapped = Math.round(raw / step) * step;
+      onChange(clamp(Number(snapped.toFixed(decimals))));
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+  return (
+    <div className="twk-num">
+      <span className="twk-num-lbl" onPointerDown={onScrubStart}>{label}</span>
+      <input type="number" value={value} min={min} max={max} step={step}
+             onChange={(e) => onChange(clamp(Number(e.target.value)))} />
+      {unit && <span className="twk-num-unit">{unit}</span>}
+    </div>
+  );
+}
+
+// Relative-luminance contrast pick — checkmarks drawn over a swatch need to
+// read on both #111 and #fafafa without per-option configuration. Hex input
+// only (#rgb / #rrggbb); named or rgb()/hsl() colors fall through to "light".
+function __twkIsLight(hex) {
+  const h = String(hex).replace('#', '');
+  const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, '0');
+  const n = parseInt(x.slice(0, 6), 16);
+  if (Number.isNaN(n)) return true;
+  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
+  return r * 299 + g * 587 + b * 114 > 148000;
+}
+
+const __TwkCheck = ({ light }) => (
+  <svg viewBox="0 0 14 14" aria-hidden="true">
+    <path d="M3 7.2 5.8 10 11 4.2" fill="none" strokeWidth="2.2"
+          strokeLinecap="round" strokeLinejoin="round"
+          stroke={light ? 'rgba(0,0,0,.78)' : '#fff'} />
+  </svg>
+);
+
+// TweakColor — curated color/palette picker. Each option is either a single
+// hex string or an array of 1-5 hex strings; the card adapts — a lone color
+// renders solid, a palette renders colors[0] as the hero (left ~2/3) with the
+// rest stacked in a sharp column on the right. onChange emits the
+// option in the shape it was passed (string stays string, array stays array).
+// Without options it falls back to the native color input for back-compat.
+function TweakColor({ label, value, options, onChange }) {
+  if (!options || !options.length) {
+    return (
+      <div className="twk-row twk-row-h">
+        <div className="twk-lbl"><span>{label}</span></div>
+        <input type="color" className="twk-swatch" value={value}
+               onChange={(e) => onChange(e.target.value)} />
+      </div>
+    );
+  }
+  // Native <input type=color> emits lowercase hex per the HTML spec, so
+  // compare case-insensitively. String() guards JSON.stringify(undefined),
+  // which returns the primitive undefined (no .toLowerCase).
+  const key = (o) => String(JSON.stringify(o)).toLowerCase();
+  const cur = key(value);
+  return (
+    <TweakRow label={label}>
+      <div className="twk-chips" role="radiogroup">
+        {options.map((o, i) => {
+          const colors = Array.isArray(o) ? o : [o];
+          const [hero, ...rest] = colors;
+          const sup = rest.slice(0, 4);
+          const on = key(o) === cur;
+          return (
+            <button key={i} type="button" className="twk-chip" role="radio"
+                    aria-checked={on} data-on={on ? '1' : '0'}
+                    aria-label={colors.join(', ')} title={colors.join(' · ')}
+                    style={{ background: hero }}
+                    onClick={() => onChange(o)}>
+              {sup.length > 0 && (
+                <span>
+                  {sup.map((c, j) => <i key={j} style={{ background: c }} />)}
+                </span>
+              )}
+              {on && <__TwkCheck light={__twkIsLight(hero)} />}
+            </button>
+          );
+        })}
+      </div>
+    </TweakRow>
+  );
+}
+
+function TweakButton({ label, onClick, secondary = false }) {
+  return (
+    <button type="button" className={secondary ? 'twk-btn secondary' : 'twk-btn'}
+            onClick={onClick}>{label}</button>
+  );
+}
+
+Object.assign(window, {
+  useTweaks, TweaksPanel, TweakSection, TweakRow,
+  TweakSlider, TweakToggle, TweakRadio, TweakSelect,
+  TweakText, TweakNumber, TweakColor, TweakButton,
+});
diff --git a/ui/designs/SD-0002-products-bulk-csv-import-export/app/ui.jsx b/ui/designs/SD-0002-products-bulk-csv-import-export/app/ui.jsx
new file mode 100644
index 0000000..6f8d620
--- /dev/null
+++ b/ui/designs/SD-0002-products-bulk-csv-import-export/app/ui.jsx
@@ -0,0 +1,176 @@
+/* ui.jsx — shared primitives for the import/export admin: thin geometric line icons
+   (consistent with the Circle-of-Equals mark, single weight — flagged as a net-new
+   admin icon set, not house brand), status badges, diff chips, stat tiles, progress.
+   Exported to window. */
+
+const { useState: _uiUseState } = React;
+
+/* ---------- Icon set: thin, single-weight, geometric ---------- */
+const ICON_PATHS = {
+  products: 'M3 7.5 12 3l9 4.5-9 4.5-9-4.5Zm0 0v9l9 4.5 9-4.5v-9M12 12v9',
+  upload: 'M12 16V4m0 0-4 4m4-4 4 4M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3',
+  download: 'M12 4v12m0 0-4-4m4 4 4-4M4 20h16',
+  check: 'M4 12.5 9.5 18 20 6',
+  x: 'M6 6l12 12M18 6 6 18',
+  plus: 'M12 5v14M5 12h14',
+  minus: 'M5 12h14',
+  equal: 'M5 9h14M5 15h14',
+  alert: 'M12 3 2 20h20L12 3Zm0 6v6m0 3h.01',
+  clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-13v5l3.5 2',
+  image: 'M3 5h18v14H3V5Zm0 11 5-5 4 4 3-3 6 6M9.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z',
+  chevron: 'M9 6l6 6-6 6',
+  chevronDown: 'M6 9l6 6 6-6',
+  file: 'M6 2h8l4 4v16H6V2Zm8 0v4h4',
+  home: 'M3 11.5 12 4l9 7.5M5 10v10h5v-6h4v6h5V10',
+  cart: 'M3 4h2l2.5 12h11L21 7H6',
+  gauge: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-9 4-3',
+  tag: 'M3 12V4h8l10 10-8 8L3 12Zm5-4.5a1 1 0 1 0 0-.01',
+  signout: 'M14 4h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-5M10 16l-4-4 4-4M6 12h10',
+  search: 'M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm6 2-3.5-3.5',
+  arrowRight: 'M5 12h14m0 0-5-5m5 5-5 5',
+  arrowLeft: 'M19 12H5m0 0 5-5m-5 5 5 5',
+  filter: 'M3 5h18l-7 8v6l-4-2v-4L3 5Z',
+  refresh: 'M20 11a8 8 0 1 0-.5 4M20 5v6h-6',
+  link: 'M9 15l6-6M8 12l-2 2a3 3 0 0 0 4 4l2-2M16 12l2-2a3 3 0 0 0-4-4l-2 2',
+};
+
+function Icon({ name, size = 18, stroke = 1.6, style, ...rest }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
+      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round"
+      strokeLinejoin="round" style={{ flexShrink: 0, display: 'block', ...style }} {...rest}>
+      <path d={ICON_PATHS[name]} />
+    </svg>
+  );
+}
+
+/* ---------- Circle-of-Equals mark (compact, for the admin lockup) ---------- */
+function CircleMark({ size = 26 }) {
+  const id = 'cm' + Math.random().toString(36).slice(2, 7);
+  // six equal nodes on a ring, connected by one wiggling line, empty center
+  const cx = 18, cy = 18, R = 13;
+  const pts = [];
+  for (let i = 0; i < 6; i++) {
+    const a = (Math.PI / 3) * i - Math.PI / 2;
+    pts.push([cx + R * Math.cos(a), cy + R * Math.sin(a)]);
+  }
+  // wiggle path: between each pair of nodes, bow the line in/out alternately
+  let d = `M ${pts[0][0]} ${pts[0][1]}`;
+  for (let i = 1; i <= 6; i++) {
+    const p = pts[i % 6];
+    const prev = pts[i - 1];
+    const mx = (prev[0] + p[0]) / 2, my = (prev[1] + p[1]) / 2;
+    const out = i % 2 === 0 ? 1.18 : 0.82;
+    const ctrlx = cx + (mx - cx) * out, ctrly = cy + (my - cy) * out;
+    d += ` Q ${ctrlx} ${ctrly} ${p[0]} ${p[1]}`;
+  }
+  return (
+    <svg width={size} height={size} viewBox="0 0 36 36" fill="none" style={{ display: 'block' }}>
+      <defs>
+        <linearGradient id={id} x1="4" y1="6" x2="32" y2="30" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#9B8CFF" />
+          <stop offset="1" stopColor="#F4C76B" />
+        </linearGradient>
+      </defs>
+      <path d={d} stroke={`url(#${id})`} strokeWidth="1.9" strokeLinejoin="round" strokeLinecap="round" />
+      {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="2.1" fill="#EDEAFF" />)}
+    </svg>
+  );
+}
+
+/* ---------- Status / kind badges ---------- */
+const KIND_META = {
+  add:       { glyph: 'plus',  label: 'Add',       cssvar: 'add' },
+  update:    { glyph: 'equal', label: 'Update',    cssvar: 'update' },
+  unchanged: { glyph: 'minus', label: 'Unchanged', cssvar: 'muted' },
+  error:     { glyph: 'alert', label: 'Error',     cssvar: 'error' },
+};
+
+function KindBadge({ kind, size = 'md' }) {
+  const m = KIND_META[kind];
+  const pad = size === 'sm' ? '.12rem .5rem .12rem .42rem' : '.22rem .62rem .22rem .5rem';
+  return (
+    <span className="ie-kind" style={{
+      display: 'inline-flex', alignItems: 'center', gap: '.34em',
+      fontFamily: 'var(--font-display)', fontWeight: 600,
+      fontSize: size === 'sm' ? '.72rem' : '.78rem',
+      letterSpacing: '.01em', padding: pad, borderRadius: '999px',
+      color: `var(--st-${m.cssvar})`, background: `var(--st-${m.cssvar}-tint)`,
+      border: `1px solid var(--st-${m.cssvar}-line)`, whiteSpace: 'nowrap',
+    }}>
+      <Icon name={m.glyph} size={size === 'sm' ? 11 : 12} stroke={2.1} />
+      {m.label}
+    </span>
+  );
+}
+
+/* ---------- Diff value: before → after ---------- */
+function DiffPair({ before, after, noop }) {
+  if (noop) {
+    return <span style={{ color: 'var(--text-on-light-soft)', fontSize: '.9rem' }}>{after} <span style={{ opacity: .6 }}>(unchanged)</span></span>;
+  }
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '.5em', flexWrap: 'wrap', fontSize: '.9rem' }}>
+      <span style={{ color: 'var(--text-on-light-soft)', textDecoration: 'line-through', textDecorationColor: 'var(--st-error)', textDecorationThickness: '1px', opacity: .8 }}>{before}</span>
+      <Icon name="arrowRight" size={13} stroke={1.8} style={{ color: 'var(--text-on-light-soft)', opacity: .7 }} />
+      <span style={{ color: 'var(--st-update)', fontWeight: 600 }}>{after}</span>
+    </span>
+  );
+}
+
+/* ---------- Stat tile (summary filter) ---------- */
+function StatTile({ n, label, kind, active, onClick, disabled }) {
+  const m = KIND_META[kind];
+  const accent = `var(--st-${m.cssvar})`;
+  return (
+    <button onClick={onClick} disabled={disabled} className="ie-stat" data-active={active ? '1' : '0'} style={{
+      flex: '1 1 0', minWidth: 0, textAlign: 'left', cursor: disabled ? 'default' : 'pointer',
+      background: active ? `var(--st-${m.cssvar}-tint)` : 'var(--surface-card-light)',
+      border: `1.5px solid ${active ? `var(--st-${m.cssvar}-line)` : 'var(--paper-line)'}`,
+      borderRadius: '12px', padding: '.85rem 1rem .9rem', position: 'relative',
+      transition: 'transform var(--dur-fast) var(--ease), border-color var(--dur-fast), background var(--dur-fast)',
+      opacity: disabled ? .55 : 1, font: 'inherit',
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '.4em' }}>
+        <span style={{ width: 7, height: 7, borderRadius: 999, background: accent, display: 'inline-block' }} />
+        <span style={{ fontSize: '.74rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--text-on-light-soft)' }}>{label}</span>
+      </div>
+      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.9rem', lineHeight: 1.05, marginTop: '.3rem', color: kind === 'unchanged' ? 'var(--text-on-light)' : accent }}>
+        {n.toLocaleString()}
+      </div>
+    </button>
+  );
+}
+
+/* ---------- Progress bar ---------- */
+function ProgressBar({ value, max, accent = 'var(--wv-violet)', height = 8 }) {
+  const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
+  return (
+    <div style={{ background: 'var(--paper-line)', borderRadius: 999, height, overflow: 'hidden', width: '100%' }}>
+      <div style={{ width: pct + '%', height: '100%', background: accent, borderRadius: 999, transition: 'width .3s ease' }} />
+    </div>
+  );
+}
+
+/* ---------- Generic paper card ---------- */
+function Card({ children, style, pad = '1.5rem', ...rest }) {
+  return (
+    <div style={{ background: 'var(--surface-card-light)', border: '1px solid var(--paper-line)', borderRadius: '14px', padding: pad, ...style }} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+/* ---------- Spinner (thin, geometric) ---------- */
+function Spinner({ size = 16, stroke = 2 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: 'block', animation: 'ie-spin .8s linear infinite' }}>
+      <circle cx="12" cy="12" r="9" stroke="var(--paper-line)" strokeWidth={stroke} />
+      <path d="M12 3a9 9 0 0 1 9 9" stroke="var(--wv-violet)" strokeWidth={stroke} strokeLinecap="round" />
+    </svg>
+  );
+}
+
+Object.assign(window, {
+  Icon, CircleMark, KindBadge, DiffPair, StatTile, ProgressBar, Card, Spinner, KIND_META,
+});