# ThemeCare variant repair demonstration

This is an original fictional storefront demonstration, not a completed customer project. It contains no customer data, real Shopify credentials, store API, checkout, payment, external fonts or remote images. All product names and IDs are invented.

## Run

Open `index.html` in a current browser. For reliable address-bar and shared-link checks, serve this folder:

```powershell
python -m http.server 8765 --bind 127.0.0.1 --directory C:\Users\Cike\Documents\73\output\internet-income-2026-10-02\portfolio
```

Then open `http://127.0.0.1:8765/`. No dependency installation is required. The server is only for the local demo; it is not a production service.

## Reproduction and acceptance

1. In **Before repair**, choose Ocean. Its visible selection changes, but the display still shows $32, the hidden `name="id"` field remains Sand, and the URL remains on the previous selection. Preview the form to see the wrong ID.
2. Choose Clay in the same mode. It is sold out, but submission still remains enabled and previews Sand. This is an intentionally reproduced bug.
3. Switch to **After repair**. Clay shows $44, the URL and hidden field contain its ID `900000000003`, and submission is disabled.
4. Select Ocean in After repair. It shows $38; form data uses ID `900000000002` and quantity 1. The form event is intercepted and renders a local receipt, without a network request.
5. Reload `?variant=900000000002&mode=fixed`. Ocean remains selected. Repeat for sold-out Clay. Unrelated query parameters and anchors survive changes.
6. Check the page at a narrow viewport and use keyboard Tab/arrow keys to navigate radio selections and mode buttons. Live status text and native disabled controls communicate the state.

## Automated verification

```powershell
node --test C:\Users\Cike\Documents\73\output\internet-income-2026-10-02\portfolio\test.mjs
```

The dependency-free tests execute the same controller used by the browser. They check shared URLs, all three prices, inventory rejection, correct/stale form payloads, duplicate URL keys, preservation of query/hash state, deliberate old behavior, mode repair, invalid input and immutable state.

## Integration boundary

The front end demonstrates the behavior of a Shopify-style variant form. A live Shopify repair would use the actual theme's Liquid product/variant data, section lifecycle, cart API and availability responses. This demo does not verify those integrations, competing theme/app scripts, localized pricing, inventory changes during checkout or an actual merchant's acceptance. A store must independently validate inventory on the server; a disabled button is not server-side enforcement.

`variant-core.js` owns the state and validation. `demo.js` renders it and reads the actual hidden form ID with `FormData` before producing the preview. `index.html` and `styles.css` supply the responsive page. No portfolio claim should present this as revenue, a customer engagement or proof of real-store acceptance.