# MyUIbrix Vylepšení - Říjen 2025

## Přehled změn

Kompletní přepracování MyUIbrix editoru s novými funkcemi, opravami chyb a českým překladem.

---

## 🎯 Nové Funkce

### 1. **Interaktivní Ovládání na Stránce**
- **Tlačítka na hover**: Při najetí myší se zobrazí akční tlačítka:
  - ⚙️ **Upravit styl** - Otevře panel se styly
  - ⬆️ **Přesunout nahoru** - Posune element výš
  - ⬇️ **Přesunout dolů** - Posune element níž
  - 🗑️ **Odstranit** - Smaže element (s potvrzením)

### 2. **Drag & Drop na Stránce**
- Přetáhněte element přímo na stránce pro změnu pozice
- Vizuální indikátory při přetahování (žlutý okraj)
- Automatické přeuspořádání v DOM

### 3. **Responzivní Viewport Switcher**
- **Nyní funkční!** Přepínání mezi zařízeními:
  - 🖥️ Počítač (100% šířka)
  - 📱 Tablet (768px)
  - 📱 Telefon (375px)
- Šedé pozadí kolem viewportu pro lepší viditelnost
- Modrý okraj pro non-desktop zobrazení
- Indikátor aktuální šířky pod tlačítky

### 4. **Český Překlad**
Všechna uživatelská rozhraní nyní v češtině:
- Tlačítka a popisky
- Nápověda a instrukce
- Chybové zprávy
- Tooltips

---

## 🐛 Opravené Chyby

### 1. **Přesouvání Elementů**
**Problém**: Elementy se přesouvaly na divné pozice
**Řešení**: 
- Opravena funkce `applyVisualReorder()` pro správnou detekci kontejneru
- Nyní funguje s viewport wrapperem
- Používá `container.contains()` místo přímé kontroly parent

### 2. **Změna Stylů**
**Problém**: Pouze jeden styl fungoval, elementy mizely
**Řešení**:
- Aktualizace `configs` state při změně varianty
- Vynucení re-renderu elementu pomocí `data-variant` atributu
- Dispatch `variant-change` eventu pro posluchače
- Timeout 50ms pro zajištění správného pořadí operací

### 3. **Responzivní Viewport**
**Problém**: Viewport switcher neměnil šířku stránky
**Řešení**:
- Implementace `.myuibrix-viewport-wrapper` kontejneru
- Dynamické aplikování šířky při změně viewport
- Zachování fixed/absolute elementů mimo wrapper
- Vizuální feedback (border, shadow)

---

## 🎨 Vylepšené UX

### Hover Efekty
```typescript
- Modrý tečkovaný okraj při najetí
- Průhledné modré pozadí
- Badge s názvem elementu
- Akční tlačítka (opacity 0 → 1)
```

### Drag & Drop Indikátory
```typescript
- Kurzor: move
- Při dragování: opacity 0.5
- Drop target: žlutý okraj (3px solid)
- Smooth transitions
```

### Viewport Visual Feedback
```typescript
Desktop:  šedé pozadí, žádný okraj
Tablet:   šedé pozadí, modrý okraj 3px
Mobile:   šedé pozadí, modrý okraj 3px
```

---

## 📝 Technické Detaily

### Viewport Wrapper
```typescript
// Vytvoření při aktivaci edit mode
const wrapper = document.createElement('div');
wrapper.className = 'myuibrix-viewport-wrapper';
wrapper.style.cssText = `
  margin: 0 auto;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.15);
  min-height: calc(100vh - 60px);
`;
```

### Variant Change Handler
```typescript
// Nyní správně aktualizuje configs a vynutí re-render
setConfigs(prevConfigs => {
  const updated = [...prevConfigs];
  updated[configIndex] = { ...updated[configIndex], variant };
  return updated;
});

// Force element update
element.setAttribute('data-variant', variant);
element.dispatchEvent(new CustomEvent('variant-change', { 
  detail: { variant } 
}));
```

### Visual Reorder Fix
```typescript
// Detekce správného kontejneru
const viewport = document.querySelector('.myuibrix-viewport-wrapper');
const container = viewport || document.querySelector('.container');

// Bezpečná kontrola
if (element && container.contains(element)) {
  container.appendChild(element);
}
```

---

## 🎓 Klávesové Zkratky

| Zkratka | Akce |
|---------|------|
| `ESC` | Zavřít panel / Ukončit edit mode |
| `Ctrl+S` / `⌘+S` | Uložit změny |
| `L` | Toggle vrstvy panelu |
| `A` | Přidat element |
| `↑` | Přesunout vybraný element nahoru |
| `↓` | Přesunout vybraný element dolů |
| `Del` / `Backspace` | Odstranit vybraný element |

---

## 🚀 Použití

### Aktivace Edit Mode
1. Klikněte na plovoucí tlačítko vlevo dole
2. Nebo přidejte `?myuibrix=edit` do URL

### Úprava Elementu
1. Najeďte myší na element (zobrazí se akční tlačítka)
2. Klikněte na ⚙️ pro změnu stylu
3. Vyberte styl z panelu
4. Změny se zobrazí okamžitě (preview)

### Přesunutí Elementu
**Možnost 1**: Tlačítka
- Klikněte ⬆️ nebo ⬇️

**Možnost 2**: Drag & Drop
- Přetáhněte element na novou pozici
- Pustě na cílové místo

**Možnost 3**: Layers Panel
- Otevřete panel vrstev (L)
- Přetáhněte v seznamu

### Odstranění Elementu
- Klikněte 🗑️ (potvrdí se dialogem)
- Nebo `Del` na vybraném elementu

### Uložení Změn
1. Klikněte "Publikovat" v top baru
2. Nebo stiskněte `Ctrl+S`
3. Stránka se obnoví s uloženými změnami

---

## 🔍 Testování

### Checklist
- [✅] Změna stylu elementu
- [✅] Přesun elementu nahoru/dolů
- [✅] Drag & Drop přesunutí
- [✅] Odstranění elementu
- [✅] Přidání nového elementu
- [✅] Viewport switcher (desktop/tablet/mobile)
- [✅] Uložení a reload
- [✅] Klávesové zkratky
- [✅] Layers panel
- [✅] Hover efekty

---

## 📦 Soubory

**Upravené soubory:**
```
frontend/src/components/editor/MyUIbrixEditor.tsx
```

**Nové funkce:**
- Interaktivní tlačítka na hover
- Drag & Drop na stránce
- Viewport wrapper implementace
- Lepší detekce kontejnerů
- Force re-render při změně varianty

---

## 🎯 Budoucí Vylepšení

- [ ] Undo/Redo funkce
- [ ] Copy/Paste elementů
- [ ] Keyboard navigation mezi elementy
- [ ] Custom breakpoints pro responsive
- [ ] Export/Import konfigurace
- [ ] Element templates
- [ ] Pokročilé CSS úpravy (padding, margin, colors)
- [ ] Live CSS editor
- [ ] Mobile touch gestures pro přesunutí

---

## 📚 Dokumentace

Pro více informací viz:
- `DOCS/MYUIBRIX_QUICK_START.md`
- `DOCS/MYUIBRIX_ELEMENTOR_FEATURES.md`
- `DOCS/MYUIBRIX_PREVIEW_MODE.md`

---

**Datum:** 18. října 2025  
**Verze:** 2.0  
**Status:** ✅ Kompletní a otestováno