====== TUI Layout ======

Anchoring-First Responsive Layout za TUI-aplikacije.

<note>Anchoring je **Default-Mode** - svaki Control se ponaša ispravno pri Terminal-Resizeu bez posebnih Containera.</note>

===== Temeljno načelo =====

<code>
Anchoring-First znači:
- Terminal Resize ne smije pokvariti Layout, Focus i Rendering
- Controls zadržavaju stabilne prostorne odnose
- Predvidljiva pravila Expansion/Shrinking
</code>

===== Anchor-Semantika =====

==== Dostupni Anchori ====

| Anchor | Značenje |
^ Left | Udaljenost od lijevog ruba ostaje konstantna |
^ Top | Udaljenost od gornjeg ruba ostaje konstantna |
^ Right | Udaljenost od desnog ruba ostaje konstantna |
^ Bottom | Udaljenost od donjeg ruba ostaje konstantna |

==== Kombinacije ====

<code>
Default: Left + Top
→ Pozicija ostaje stabilna, veličina konstantna

Left + Right:
→ Širina se rasteže/skuplja sa širinom Parenta

Top + Bottom:
→ Visina se rasteže/skuplja s visinom Parenta

Sva četiri (Left + Top + Right + Bottom):
→ Rect se rasteže u oba smjera

Bez Anchora:
→ Tretirati kao Left + Top (bez "floating" nejasnoće)
</code>

==== PXAML Primjeri ====

<code xml>
<!-- Fiksna pozicija gore lijevo -->
<Button Anchors="Left,Top" Text="OK" />

<!-- Puna širina, fiksna visina -->
<TextEdit Anchors="Left,Top,Right" Height="3" />

<!-- Ispunjava cijelo dostupno područje -->
<ListView Anchors="Left,Top,Right,Bottom" />

<!-- Statusna traka dolje -->
<StatusBar Anchors="Left,Right,Bottom" Height="1" />
</code>

===== Resize-Ponašanje =====

==== Tok pri Resizeu ====

<code>
1. Primiti Resize Event
   └─ Ažurirati Root Available Rect

2. Invalidirati Layout
   └─ Izvršiti Measure/Arrange Pass

3. Zadržati Focus
   └─ Isti logički Control zadržava Focus

4. Ponovno renderirati
   └─ Paint → DiffFlush
</code>

==== Deterministički ====

<code>
OBAVEZNO:
- Isti Input → Isti Layout
- Nema flickera kod brzog Resizea
- Nema Cursor-Corruptiona
- Focus ostaje na logičkom Controlu
</code>

===== Breakpoints =====

Opcionalni ali preporučeni Resize-pragovi:

==== Standardni Breakpoints ====

| Breakpoint | Širina | Tipični Layout |
^ Narrow | < 80 | Single-Column, složeno |
^ Medium | 80-119 | Sidebar kolabiran u Tabove |
^ Wide | >= 120 | Sidebar + Content jedan pored drugog |

==== PXAML Konfiguracija ====

<code xml>
<Panel ResponsiveMode="Auto" Breakpoints="80,120">
  <!-- Automatski Reflow pri prijelazu Breakpointa -->
</Panel>
</code>

==== Breakpoint-Pravila ====

<code>
OBAVEZNO:
- Breakpoints NISU "magic" - definirati u PXAML ili Theme Config
- Breakpoints dokumentirati
- Ponašanje za svaki Breakpoint jasno definirati
</code>

===== Layout-Containeri =====

==== Stack ====

<code>
Orijentacija: Vertikalno ili Horizontalno
Djeca se aranžiraju jedno za drugim
</code>

<code xml>
<Stack Orientation="Vertical">
  <Label Text="Ime:" />
  <TextEdit />
  <Label Text="Email:" />
  <TextEdit />
</Stack>
</code>

==== Dock ====

<code>
Pozicije: Left, Top, Right, Bottom, Fill
Djeca se pričvršćuju na strane, ostatak ispunjava sredinu
</code>

<code xml>
<Dock>
  <MenuBar Dock="Top" />
  <StatusBar Dock="Bottom" />
  <Sidebar Dock="Left" Width="20" />
  <Content Dock="Fill" />
</Dock>
</code>

==== Overlay ====

<code>
Za Popupe, Modale, Tooltipe
Prekriva druge Controls
Mora ostati unutar Screen Boundsa (clamped)
</code>

<code xml>
<Overlay>
  <Dialog X="10" Y="5" Width="40" Height="10">
    <!-- Modal Content -->
  </Dialog>
</Overlay>
</code>

==== Grid (kasnije) ====

<code>
Definiranje Redaka i Stupaca
Postavljanje Controls u ćelije
</code>

===== Anchoring-Precedence =====

Redoslijed izračuna Layouta:

<code>
1. Container Layout (ako eksplicitno)
   └─ Stack/Grid/Dock/Overlay izračunava Child-Rectove

2. Primjena Anchora
   └─ Unutar Container-Recta rafinirati
   └─ Poštivati Min/Max
   └─ Zadržati Margins/Padding

3. Clipping na kraju
   └─ Rezanje finalnih Boundsa
</code>

===== Scroll i Viewport =====

==== Kada je Content veći od područja ====

<code>
PREFERIRANO:
- Koristiti ScrollViewer Container
- Content učiniti scrollabilnim

NIJE Default:
- Text "shrink to fit"

OBAVEZNO:
- Controls mogu renderirati u manjem Rectu (Clip + Ellipsis)
- State se ne smije izgubiti
</code>

==== ScrollViewer Primjer ====

<code xml>
<ScrollViewer Anchors="Left,Top,Right,Bottom">
  <Stack Orientation="Vertical">
    <!-- Dugačka lista Controls -->
  </Stack>
</ScrollViewer>
</code>

===== Focus pod Reflow =====

<code>
OBAVEZNO:
- Focus se prati preko Control-Identiteta (ne Screen-pozicije)
- Nakon Reflowa:
  - Ako fokusirani Control još može imati fokus i vidljiv je → zadržati
  - Inače: Fallback na sljedeći fokusirajući Sibling u Focus-Orderu
</code>

==== Focus-Stabilnost ====

<code pascal>
procedure TLayoutEngine.ApplyReflow;
var
  PreviousFocus: TWvdSControl;
begin
  (* Zapamtiti Focus *)
  PreviousFocus := FocusManager.FocusedControl;

  (* Ponovno izračunati Layout *)
  MeasureAndArrange(RootControl);

  (* Vratiti Focus *)
  if (PreviousFocus <> nil) and
     PreviousFocus.CanFocus and
     PreviousFocus.IsVisible then
    FocusManager.SetFocus(PreviousFocus)
  else
    FocusManager.FocusNextAvailable;
end;
</code>

===== Verifikacija =====

==== Resize-Testovi ====

<code>
[ ] Narrow ↔ Wide ponovljeno: nema flickera
[ ] Cursor nije korumpiran nakon Resizea
[ ] Focus ostaje na istom Controlu
[ ] Anchored Stretch Controls se ne preklapaju
[ ] Popupi/Overlayi ostaju u Screen Boundsima
</code>

==== Breakpoint-Testovi ====

<code>
[ ] Layout se ispravno mijenja pri prijelazu Breakpointa
[ ] Nema flickera pri promjeni Breakpointa
[ ] Svi Breakpointi dokumentirani
</code>

==== Container-Testovi ====

<code>
[ ] Stack ispravno aranžira djecu
[ ] Dock ispravno ispunjava (Left, Top, Right, Bottom, Fill)
[ ] Overlay ostaje u Boundsima
[ ] Ugniježdeni Containeri funkcioniraju
</code>

===== PXAML Referenca =====

==== Control-Atributi ====

| Atribut | Vrijednosti | Značenje |
^ Anchors | Left,Top,Right,Bottom | Anchor-kombinacije |
^ Margin | "l,t,r,b" ili "all" | Vanjski razmak |
^ Padding | "l,t,r,b" ili "all" | Unutarnji razmak |
^ MinWidth | Integer | Minimalna širina |
^ MaxWidth | Integer | Maksimalna širina |
^ MinHeight | Integer | Minimalna visina |
^ MaxHeight | Integer | Maksimalna visina |

==== Container-Atributi ====

| Atribut | Vrijednosti | Značenje |
^ ResponsiveMode | Auto, Manual | Automatsko Breakpoint-Handling |
^ Breakpoints | "w1,w2,..." | Breakpoint-širine |

===== Vidi također =====

  * [[.:tui-entwicklung|TUI-Razvoj Pregled]]
  * [[.:tui-engine|TUI Engine]]
  * [[.:tui-controls|TUI Controls]]