# Studio oferty — plan produktowy (mobile-first)

> **Status:** zaakceptowany kierunek przed implementacją (Faza B).  
> **Baza techniczna:** po merge Fazy A (`outlet` z `offerState`, Live domyślnie, `/deps/payloadImageOrder`, drafty na dysku).  
> **Zastępuje:** 5-krokowy `/editor/wizard` na co dzień. **Zostaje:** `/editor/legacy` (ekspert).

---

## 1. Cel

Jeden ekran **Studio** (`/editor/studio`): Tara → parametry → AI → Base.com w **~2–3 kliknięciach** na telefonie, z możliwością rozwinięcia tylko tego, co operator chce zmienić.

**Zasada:** jedna oferta = jeden **draft** na dysku. Zawsze można wrócić, edytować i ponownie wysłać (update po `product_id`).

---

## 2. Wymagania operatora (Damian)

| # | Wymaganie | Rozwiązanie w Studio |
|---|-----------|---------------------|
| 1 | Stan: domyślnie **OUTLET**, wybór **PO_ZWROCIE** | Dwa duże przyciski (radio) na górze ekranu |
| 2 | **Wszystkie** zdjęcia z oferty wariantu | Import zaznacza wszystkie; UI pokazuje limit BL 16 |
| 3 | Cena **auto PLN**, edytowalna | Pole liczbowe pod EUR; bez ponownego AI |
| 4 | Etykieta: **OUTLET** / **PO_ZWROCIE** / **własny** + prosty **kolaż** | Presety + 2 pola tekstu; przycisk „Kolaż 2×2” |
| 5 | Po zapisie: **otwórz Base.com** LUB toast + lista | Ustawienie profilu; draft z `productId` zawsze na liście |

---

## 3. Architektura ekranu (telefon)

```
┌─────────────────────────────────────┐
│ ←  Dywan Madrid 120×170      [⚙]   │
├─────────────────────────────────────┤
│ STAN    [ Outlet ] [ Po zwrocie ]   │
├─────────────────────────────────────┤
│ ETYKIETA  ○Brak ●Outlet ○Zwrot ○Własny│
│  (własny: nagłówek + podpis)        │
├─────────────────────────────────────┤
│ CENA PLN  [ 306,40 ]  (z 87,43 EUR) │
├─────────────────────────────────────┤
│ ┌─ ZDJĘCIA ──── 12/16 do Base ───┐  │
│ │ [sticky pasek akcji — patrz §4] │  │
│ │ [poziomy filmstrip / siatka 2]  │  │
│ └─────────────────────────────────┘  │
│ [ Kolaż z zaznaczonych (4) ]        │
├─────────────────────────────────────┤
│ ▶ Treść AI (tytuł + opis)           │
├─────────────────────────────────────┤
│      [ Wyślij do Base.com ]         │
└─────────────────────────────────────┘
```

Sekcje **Zdjęcia** i **Treść AI** domyślnie **otwarte** tylko gdy operator rozwinął wcześniej lub są ostrzeżenia (np. >16 slotów, waga 0).

---

## 4. Zdjęcia — nowy UX (mobile-first)

### 4.1 Problemy obecnego kreatora (krok 3)

- Małe checkboxy „Wybrane” + osobny checkbox „W kolażu” — za dużo stref klikania.
- Siatka z `<label>` i checkboxami — trudna obsługa kciukiem.
- Nakładki, auto-plan AI, masowy render — na telefonie przytłaczające.
- Kolejność slotów mało czytelna bez przewijania całej siatki.

### 4.2 Zasady nowego selektora

| Zasada | Implementacja |
|--------|----------------|
| **Tap = zaznacz/odznacz** | Cała miniatura jest przyciskiem (min. 72×72 px, odstęp 8px) |
| **Wyraźny stan** | Ramka 3px teal + numer kolejności w rogu; niezaznaczone — przyciemnione 40% |
| **Poza Base (17+)** | Miniatura z czerwoną obwódką + badge „Poza Base”; nie da się „przypadkiem” myśleć że poleci |
| **Jeden pasek akcji** | Sticky pod nagłówkiem sekcji: `Wszystkie` · `Żadne` · `Do Base (16)` |
| **Kolejność** | Długie przytrzymanie → tryb sortowania LUB strzałki ↑↓ na zaznaczonym (prostsze na start: strzałki) |
| **Kolaż** | Osobny tryb: „Wybierz do kolażu” (max 4) — drugi pasek, inny kolor obramowania (fiolet) |
| **Podgląd** | Tap na ikonę lupy / drugi tap — pełnoekranowy swipe (bez zaznaczania) |
| **Licznik** | Zawsze widoczny: `Wybrane: 12 · Do Base: 12/16` |

### 4.3 Układ na telefonie

**Wariant A (preferowany):** poziomy **filmstrip** (scroll w bok) — duże miniatury 120×120, numer slotu na zaznaczonych.

**Wariant B:** siatka **2 kolumny** — lepsza gdy >10 zdjęć (mniej przewijania w pionie).

Przełącznik „Pasek / Siatka” w ustawieniach profilu (domyślnie: filmstrip ≤8 zdjęć, siatka >8).

### 4.4 Kolaż (prosty)

1. Operator zaznacza 2–4 zdjęcia (tryb kolażu lub checkbox „+ kolaż”).
2. Przycisk **„Utwórz kolaż 2×2”** → podgląd pod filmstripem.
3. Toggle: **„Kolaż jako pierwsze zdjęcie w Base”**.
4. **„Usuń kolaż”** — jedno kliknięcie.

Bez auto-planu AI etykiet w Studio (zostaje w legacy).

### 4.5 Etykieta na zdjęciu

- Presety **OUTLET** / **PO_ZWROCIE** mapują na istniejące `mainImageOverlay`.
- Podgląd na **pierwszym zdjęciu produktu** (nie na kolażu) — miniatura z nałożoną etykietą po zmianie presetu.
- **Własny:** dwa pola, podgląd na żywo.

### 4.6 Limit techniczny

- Tara: do ~12 zdjęć / wariant (adapter).
- BaseLinker: **max 16 slotów** w payloadzie.
- UI **nigdy nie ukrywa** nadwyżki — przyciemnia i ostrzega przed wysyłką.

---

## 5. Pipeline (bez zmian merytorycznych)

```
URL / wyszukiwarka
  → extract (JSON + HTML, specs, zdjęcia, EAN, wymiary)
  → buildProductDraft (wszystkie zdjęcia selected, cena PLN, kategoria serii)
  → translateForBase (tytuł PL, opis HTML, specsPl)
  → [opcjonalnie render etykiety / kolaż w przeglądarce]
  → addInventoryProduct (live)
  → draft: status sent, baseLinkerProductId
```

---

## 6. Po zapisie

### Ustawienie profilu (`localStorage` + opcjonalnie API)

```json
{
  "defaultOfferState": "OUTLET",
  "defaultBadge": "OUTLET",
  "afterSave": "open_base",
  "imagePickerLayout": "filmstrip",
  "selectAllImagesOnImport": true
}
```

| `afterSave` | Zachowanie |
|-------------|------------|
| `open_base` | `window.open` URL karty produktu w panelu BL (szablon w env / config) |
| `toast_stay` | Toast z `productId` + powrót na dashboard |

### Lista draftów (dashboard)

Filtry: **Wszystkie** · **Do wysłania** · **W Base** · **Błędy**

Karta:
```
Dywan Madrid · OUTLET · 306 PLN
12 zdj · EAN … · W Base #514637051
[ Otwórz Studio ]  [ Base.com ]
```

Ponowne wysłanie = ten sam draft z `product_id` w envelope.

---

## 7. Nawigacja w aplikacji (po wdrożeniu)

| Ścieżka | Rola |
|---------|------|
| `/editor` | Dashboard: szukaj, lista draftów, ustawienia |
| `/editor/studio` | **Główny flow** (nowy) |
| `/editor/wizard` | Redirect 302 → `/editor/studio` (po stabilizacji) |
| `/editor/legacy` | Ekspert: kanały, prompty, multichannel |

Chrome extension → `/editor/studio?url=…&variantId=…`

---

## 8. Kolejność implementacji

| Etap | Zakres |
|------|--------|
| **B1** | Routing `/editor/studio`, import + AI w tle, stan OUTLET/PO_ZWROCIE, cena PLN |
| **B2** | **Selektor zdjęć mobile** (§4) — filmstrip, tap-to-select, sticky akcje, licznik 16 |
| **B3** | Etykiety preset + własny + podgląd |
| **B4** | Kolaż 2×2 + slot pierwszy |
| **B5** | Po zapisie (open Base / toast) + filtry listy + re-send |
| **B6** | Wizard → redirect Studio; testy + smoke |

---

## 9. Poza zakresem Studio

- Auto-publikacja Allegro/OLX/Erli
- Auto-plan AI etykiet na całą galerię
- Adapter Merinos
- Generowanie opisów pod kanały marketplace (tylko Base w Studio)

---

## 10. Definition of Done (Studio v1)

- [ ] Na telefonie (375px): zaznaczenie zdjęcia jednym tapem, bez checkboxów.
- [ ] Wszystkie zdjęcia wariantu zaznaczone po imporcie; licznik `x/16 do Base`.
- [ ] OUTLET / PO_ZWROCIE + etykieta + cena edytowalna na jednym ekranie.
- [ ] Zapis live + draft na liście z `productId`.
- [ ] Ustawienie: otwórz Base lub toast.
- [ ] `npm test` zielone.