# SmartTheme — Session Changes

Session date: 28 Apr 2026
Focus: 8 build items from previous session continuation.

## ⚠️ SECURITY FIRST — ROTATE YOUR API KEY

The Anthropic API key in `backend/api/ai-generate.php` line 16 was shared in the upload zip.
**Before deploying:**
1. Go to https://console.anthropic.com → Settings → API Keys
2. Revoke the existing `sk-ant-api03-Grxxk...` key
3. Generate a fresh one
4. Replace `ANTHROPIC_API_KEY` constant in BOTH locations:
   - `backend/api/ai-generate.php`
   - `frontend/ai-generate.php` (duplicate)

Better long-term: move to env var or include from a file outside web root.

## Files changed

| File | What changed |
|---|---|
| `frontend/app.jsx` | Design object expanded; AI modal gets URL mode tab; full-screen preview wired |
| `frontend/storefront.jsx` | Element-order-driven hero render; gallery variants; bundle/features inside hero; customSections renderer |
| `frontend/index.html` | Sidebar collapse CSS (240→64px); 3 gallery variant CSS rules |
| `frontend/Theme Builder.html` | Same as index.html (kept in sync) |
| `frontend/preview.html` | **NEW** — standalone full-page preview |
| `backend/api/ai-generate.php` | Now supports `mode: 'url'` for HTML fetch; better prompt with customSections |
| `frontend/ai-generate.php` | Synced duplicate of above |

## What got built (matches your 8 items)

1. ✅ **Design object fix** — `galleryStyle`, `heroElementOrder`, `bundleStyle`, `buttonRadius`, `atcFullWidth`, `customSections` now flow from page → design → Storefront. Autosave deps updated.

2. ✅ **Dynamic hero rendering** — `renderHeroInfo()` walks `design.heroElementOrder`. Adjacent `quantity` + `atcButton` auto-group into the inline row. Default order preserves original behavior including stockIndicator placement.

3. ✅ **3 gallery CSS variants**
   - `thumbs-bottom-horizontal` (default)
   - `thumbs-left-vertical` (vertical 64px strip on left)
   - `thumbs-bottom-with-arrows` (carousel arrows over main image)

4. ✅ **URL input in AI popup** — Tab switcher (📸 Screenshot / 🔗 Shopify URL). PHP backend curl-fetches the URL, strips scripts/styles/svgs, sends cleaned HTML to Claude with same JSON-output prompt. Works with Shopify, Shoplazza, WooCommerce.

5. ✅ **Dynamic widget creation** — AI prompt asks for `customSections[]` for unrecognized sections. They render at bottom as dashed-border placeholder cards labeled "AI Custom" with title + description + layout hint.

6. ✅ **Full Page Preview** — "Full Screen Preview" link in preview-footer now serializes design+content+widgetState to localStorage and opens `preview.html` in a new tab. Has device toggle + close button.

7. ✅ **Sidebar collapse** — `.app.sidebar-collapsed` rule shrinks grid 240→64px, hides labels/groups/footer/upgrade card, centers nav icons. Smooth 0.25s transition.

8. ✅ **Bundle/Features inside hero** — They're now first-class hero elements (`heroEl.bundle`, `heroEl.features`). Bottom-append fallback still fires only if heroOrder doesn't include them, so old saved pages keep working.

## Validation done

- All JSX/JS files parsed cleanly with `@babel/parser` (no syntax errors)
- Both PHP files passed `php -l` lint
- Diff between `index.html` and `Theme Builder.html` confirmed 1-line difference (template-registry.jsx, intentional)

## Live testing checklist (do this on EC2 first)

1. **Hard refresh** the builder URL (Cmd+Shift+R) so old JSX gets dumped
2. **Sidebar collapse** — click chevron in header, verify smooth shrink to 64px showing icons only
3. **AI Generate (Screenshot mode)** — upload any product page screenshot, verify: colors apply, hero element order changes, bundle/features render inside hero
4. **AI Generate (URL mode)** — paste a Shopify URL like `https://allbirds.com/products/mens-wool-runners`, verify: PHP fetches OK, AI returns config, layout updates
5. **Bundle widget toggle** — turn on bundle widget from sidebar, verify it appears INSIDE the right column of hero (not at bottom)
6. **Full Screen Preview** — click footer link, verify new tab opens with full-width product page, device toggle works
7. **Gallery variants** — manually set `galleryStyle` via AI prompt or test all three: thumbs-bottom-horizontal, thumbs-left-vertical, thumbs-bottom-with-arrows

## Next session candidates

- Editor sidebar UI for manually picking `galleryStyle`, `bundleStyle`, `heroElementOrder` (currently AI-only)
- Drag-to-reorder hero elements
- Persist customSections in saved Shopify ZIP output (publish.php)
- WebP image optimization for fetched Shopify images
- Convert customSections AI hint into actual rendered widgets (currently placeholder cards)