Editor szekciók

Ez a blokk gyorsan megmutatja, hogy az editor egyes UI részei pontosan mit végeznek, és melyik modulhoz nyúlj, ha egy adott viselkedést szeretnél módosítani.

Gyors tajekozodas az editor UI reszeihez

Minden kartya azt mutatja meg, hol latszik az adott resz, mikor erdemes hozzanyulni, es melyik fajlokkal indulj.

Live Editor layout attekinto abra
Layout abrazolas: bal oldali navigator, kozepso canvas, jobb oldali panel es top toolbar.
1

Top toolbar

Felso sor: update, publish, viewport, preview

A mentesi/publish flow allapotkapuja. Innen indulsz, ha release vagy viewport viselkedes valtozik.

Mikor nyulj hozza

  • Frissites/Publish gomb allapota hibasan reagal.
  • Pending/allapot indicator nem koveti a valtozasokat.
  • Viewport valtasnal hibas a toolbar visszajelzes.

Kezdo fajlok

  • components/globals/live-editor-toolbar.tsx
  • editing/hooks/use-update-publish-pipeline.ts
2

Bal oldali navigator

Szekcio/oszlop/blokk fa nezet

Az aktualis oldal strukturajat epiti fel es celzott kijelolest ad node szinten.

Mikor nyulj hozza

  • Node sorrend, cimkezes vagy faepites nem megfelelo.
  • Kattintasra rossz elem lesz aktiv.
  • Szekcio szintu akciok rossz node-hoz kotodnek.

Kezdo fajlok

  • panels/hooks/use-structure-navigator-sections.ts
  • hooks/structure-navigator/use-structure-navigator-node-actions.ts
3

Canvas + section controls

Kozepso szerkesztofelulet drag/drop kontrollokkal

Itt fut a section reorder, drop preview, spacing es column control viselkedes.

Mikor nyulj hozza

  • Drop target vagy reorder pontossag hibas.
  • Spacing panel rossz helyen jelenik meg.
  • Column/section kontroll nem a vart allapotot adja.

Kezdo fajlok

  • dragging/hooks/use-section-reorder-drag.ts
  • panels/hooks/use-section-controls.ts
  • panels/hooks/use-section-dom-operations.ts
4

Jobb oldali Elements panel

Widget katalogus, Codex, settings, DB blokkok

Tab kompozicio: widget beszuras, Codex panel, beallitasok es DB katalogus egy helyen.

Mikor nyulj hozza

  • Uj tabot adsz hozza vagy tab sorrendet modositod.
  • Widget card drag affordance-et valtoztatsz.
  • DB katalogus keresesi/beszurasi flowt javitasz.

Kezdo fajlok

  • components/elements-panel/tabs/
  • editing/hooks/use-widget-insertion-domain.ts
  • editing/hooks/use-widget-pointer-badge.ts
5

Selection panel

Inline kijelolesi panel a cel elem mellett

Kijelolt elem actionjai: szoveg, tipografia es widget szintu muveletek.

Mikor nyulj hozza

  • Panel rossz helyre pozicional.
  • Action label vagy metadata hibas.
  • Inline panel nyitas/zaras viselkedese bizonytalan.

Kezdo fajlok

  • selection/hooks/use-selection-action.ts
  • selection/engine/selection-metadata.ts
  • widgets/panels/live-editor-selection-panel.tsx
6

Runtime + startup

Overlay init, global eventek, marker pipeline

Az editor eletciklus orchestration retege: betoltes, marker apply, site-data sync.

Mikor nyulj hozza

  • Indulasi sorrend hibasan fut le.
  • Global listener okoz regressziot.
  • Runtime allapot es view-props szetcsuszik.

Kezdo fajlok

  • orchestration/hooks/use-site-content-management.ts
  • orchestration/hooks/use-overlay-interaction-events.ts
  • orchestration/hooks/use-dom-marker-pipeline.ts

Overlay modulok

Az alábbi modulok külön felelősségi körrel rendelkeznek. Ha egy adott viselkedést módosítasz (pl. drag/drop vagy hover), első körben az adott modul mappájában dolgozz.

Overlay modul mátrix

Ez a blokk a root modulokat már nem csak felsorolja: minden kártyán látod a belépési pontokat, a state/contract felelősséget, az integrációs érintkezéseket és a regresszióellenőrző listát.

Root wiring flow

  1. orchestration összerakja a state bucketeket + view propsokat
  2. panels és selection modulok kezelik a látható editor UI domainjeit
  3. dragging + hovering feloldja az interakciós célpontokat
  4. editing futtatja a szerkesztési és publish pipeline-t
  5. shared adja a közös contractokat, utilokat és shell elemeket

Dragging

Interaction

Modulgyökér (VS Code path)

Fő felelősségek

  • Szekció-átrendezés drag lifecycle és drop intent kezelése
  • Drag ghost és drop preview pozicionálása
  • Layout célpont feloldása és drop-kompatibilitás

Kiemelt fájlok (path map)

Belépési pontok

  • hooks/use-section-reorder-drag.ts
  • hooks/use-section-reorder-session.ts
  • ui/live-editor-core-interaction-ui.tsx

State / contract felelősség

  • section reorder session snapshot
  • drop preview target + before/after placement
  • drag ghost visibility + pointer anchor

Integrációs érintkezések

  • panels/use-section-controls.ts a spacing/drop UI miatt
  • selection metadata a drop előtti célpont-értelmezéshez
  • editing widget insertion flow-val összehangolt drag affordance

Regression checklist

  • Drag cancel után minden preview/ghost eltűnik
  • Drop before/after mapping nem cserélődik fel
  • Cross-container drop tiltás továbbra is működik

Következő refaktor lépések

  • drop intent és hit-testing edge case-ek izolált helperbe emelése
  • pointer + native drag viselkedés teljes szinkronja

Kapcsolódó belső dokumentumok

  • live-editor-overlay-root-modules/README.md
  • live-editor-overlay-root-modules/improvements/00-BOARD.md

Hovering

Interaction

Modulgyökér (VS Code path)

Fő felelősségek

  • Hover célpont feloldása és throttled szinkron
  • Szekció hover állapot és pointer-vezérelt kijelölés előkészítése
  • Hover kontroll állapot és címkelogika

Kiemelt fájlok (path map)

Belépési pontok

  • engine/hover-target-resolver.ts
  • hooks/use-hover-control-sync-state.ts
  • state/hover-sync-state.ts

State / contract felelősség

  • hover sync snapshot az aktív célpontról
  • pointer-driven hover lock / release jelzők
  • spacing label target metadata

Integrációs érintkezések

  • selection panel nyitás előtti target előkészítés
  • panels spacing controls célpont feloldás
  • dragginggel közös dom-marker target szabályok

Regression checklist

  • Hover target gyors mozgásnál sem marad stale
  • Section control trigger nem ugrál random elemekre
  • Hover label mindig a valós célponthoz kötődik

Következő refaktor lépések

  • hover target resolver szűkebb API-val engine boundary mögé zárása

Kapcsolódó belső dokumentumok

  • live-editor-overlay-root-modules/README.md

Editing

Domain

Modulgyökér (VS Code path)

Fő felelősségek

  • Szöveg- és tipográfiai módosítások, pending edit history kezelése
  • Widget beszúrások, Codex prompt és pipeline
  • Frissítés/publish pipeline és kapcsolódó szerkesztőállapot

Kiemelt fájlok (path map)

Belépési pontok

  • hooks/use-widget-insertion-domain.ts
  • hooks/use-update-publish-pipeline.ts
  • hooks/use-codex-prompt-domain.ts

State / contract felelősség

  • pending edit history + undo/redo státusz
  • update version items és restore állapot
  • codex prompt/memory/attachment state snapshot

Integrációs érintkezések

  • elements-panel tabs (widgets/codex) teljes szerkesztési folyamata
  • orchestration view-props builderben toolbar/panel props kitöltés
  • selection action flow szöveg- és tipográfiai módosításnál

Regression checklist

  • Unsaved változások számlálói helyesek maradnak
  • Publish után a draft/published státusz konzisztens
  • Codex prompt submit nem törli váratlanul a lokális állapotot

Következő refaktor lépések

  • widget insertion és pointer badge domain teljes leválasztása a rootról
  • codex targeting domain határainak további szűkítése

Kapcsolódó belső dokumentumok

  • live-editor-overlay-root-modules/strategy/TASK-03-codex-targeting-and-highlight-domain.md
  • live-editor-overlay-root-modules/strategy/TASK-05-widget-pointer-badge-and-drag-affordance-domain.md

Panels

UI Domain

Modulgyökér (VS Code path)

Fő felelősségek

  • Elem- és szekcióvezérlő panelek domainlogikája
  • Structure Navigator szekciók és panel-vezérelt műveletek
  • Statikus blokk mutációs domain és panel layout helper-ek

Kiemelt fájlok (path map)

Belépési pontok

  • hooks/use-section-controls.ts
  • hooks/use-structure-navigator-sections.ts
  • hooks/use-codex-workspace-domain.ts

State / contract felelősség

  • elements panel open/collapse/tab state
  • section spacing panel pozíció + visibility
  • structure navigator sections + action payload map

Integrációs érintkezések

  • widgets controls és elements panel tab komponensek
  • editing mutation flow (insert/delete/save static block)
  • navigator node action hook és overlay shell panel props

Regression checklist

  • Panel nyitás/zárás desktopon és mobilon is stabil
  • Structure navigator list frissül minden mutáció után
  • Static block save/delete után UI state konzisztens

Következő refaktor lépések

  • panels hookok további domain-szétválasztása codex/navigator/static-block szerint

Kapcsolódó belső dokumentumok

  • live-editor-overlay-root-modules/strategy/TASK-02-structure-navigator-section-builder-domain.md
  • live-editor-overlay-root-modules/strategy/TASK-04-static-block-and-delete-mutation-domain.md

Orchestration

Runtime

Modulgyökér (VS Code path)

Fő felelősségek

  • Root szintű event/effect orchestration és runtime lifecycle
  • State bucketek és view-props összeállítás
  • Site adat/startup bootstrap folyamatok

Kiemelt fájlok (path map)

Belépési pontok

  • state/use-overlay-root-state-buckets.ts
  • hooks/use-overlay-view-props.ts
  • effects/runtime/use-runtime-lifecycle-effects.ts

State / contract felelősség

  • root state bucket snapshot (selection/panels/editing bridge state)
  • overlay shell props shape és komponens-wiring contract
  • startup/runtime lifecycle guard state

Integrációs érintkezések

  • összes root-modules inputjának központi összekötése
  • effects (boot/data/dom-sync/observers/ui/cleanup) lifecycle orchestration
  • live-editor-overlay-root.tsx thin orchestrator boundary

Regression checklist

  • Editor boot sequence ugyanabban a sorrendben fut
  • Effects cleanup leak nélkül lefut route váltáskor
  • Shell props típus és runtime értékek szinkronban maradnak

Következő refaktor lépések

  • root fájl további karcsúsítása: csak hook wiring + shell render maradjon
  • effect domain hookoknál dependency boundary tisztítása

Kapcsolódó belső dokumentumok

  • live-editor-overlay-root-modules/orchestration/README.md
  • live-editor-overlay-root-modules/orchestration/effects/README.md
  • live-editor-overlay-root-modules/strategy/TASK-06-root-state-buckets-and-props-builders.md

Selection

State + UI

Modulgyökér (VS Code path)

Fő felelősségek

  • Selection panel viselkedés és pointer drag kezelés
  • Selection action és key-change flow
  • Selection metadata és UI shell komponensek

Kiemelt fájlok (path map)

Belépési pontok

  • engine/selection-metadata.ts
  • hooks/use-selection-action.ts
  • hooks/use-selection-panel-pointer-events.ts

State / contract felelősség

  • selection target kind + action label metadata
  • panel anchor + drag offset state
  • selection close/reset shared state helper

Integrációs érintkezések

  • editing domain action trigger (szöveg/tipográfia/widget műveletek)
  • panels és hovering target-feloldás kijelölés előkészítéshez
  • selection panel shell mount/unmount orchestration

Regression checklist

  • Selection panel mindig a helyes anchorhoz igazodik
  • Drag után resetPanelToAnchor működik
  • Selection key-change nem hagy stale action state-et

Következő refaktor lépések

  • selection target resolver külön engine fájlba emelése
  • selection key normalization explicit engine helperbe szervezése

Kapcsolódó belső dokumentumok

  • live-editor-overlay-root-modules/selection/README.md

Shared

Foundation

Modulgyökér (VS Code path)

Fő felelősségek

  • Modulok közti shared contractok, konstansok és utilityk
  • Lookup index és runtime log util réteg
  • Startup skeleton és közös overlay UI elemek

Kiemelt fájlok (path map)

Belépési pontok

  • contracts/live-editor-overlay-root-types.ts
  • constants.ts
  • utils/runtime-log-utils.ts

State / contract felelősség

  • cross-module type contractok és shared constants
  • runtime log shaping/sanitizing util API
  • shared UI shell komponensek (startup/codex thinking)

Integrációs érintkezések

  • dragging/hovering/editing/selection/panels/orchestration mind innen importál
  • shared contract változás teljes root-modules buildet érinti

Regression checklist

  • Contract módosítás után nincs körkörös import
  • Shared utilok side-effect mentesek maradnak
  • Barrel exportok nem szivárogtatnak félkész API-t

Következő refaktor lépések

  • ismétlődő overlay helper hookok shared/hooks alá emelése
  • runtime-log-utils köré célzott unit tesztek

Kapcsolódó belső dokumentumok

  • live-editor-overlay-root-modules/shared/README.md

A kovetkezo blokkok mar kulon szekciokkent jelennek meg: Widgets, Navigator, Codex UI es Elements panel, mindegyik sajat anchorokkal.

3. Widgets

UI

Widget UI/interaction reteg: creation dock, canvas controls, media preview es selection panel.

Modul gyoker: packages/live-editor-overlay/src/components/widgets/

Kezdesnek nezd meg

  • components/widgets/creation/live-editor-section-create-dock.tsx
  • components/widgets/controls/live-editor-column-controls.tsx
  • components/widgets/controls/live-editor-section-spacing-panel.tsx
  • components/widgets/panels/live-editor-selection-panel.tsx

Subszekciok

  • Creation flow

    Section creation dock es widget beszurasi trigger logika.

  • Canvas controls

    Section spacing, column controls es canvas melletti gyors UI elemek.

  • Selection panel

    Inline widget inspector, tipografia es celzott action panel viselkedes.

4. Navigator

NAV

Bal oldali struktura-nezet, node actionok es szekciofa epites. Innen indul a celzott kijeloles es jump.

Modul gyoker: packages/live-editor-overlay/src/navigator/

Kezdesnek nezd meg

  • navigator/live-editor-structure-navigator.tsx
  • hooks/structure-navigator/use-structure-navigator-node-actions.ts
  • components/live-editor-overlay-root-modules/panels/hooks/use-structure-navigator-sections.ts

Subszekciok

  • Tree nezet

    Szekcio/oszlop/blokk fa rendereles, label es hierarchy viselkedes.

  • Node actionok

    Kijeloles, ugrasi pontok es node szintu muveletek kezelese.

  • Section builder

    Navigator sections list epites es panel oldali adatelokeszites.

5. Codex UI

AI

Prompt UI, workspace fa, mention flow es Codex overlay shell. Itt valtozik a Codex panel UX es adatfolyam.

Modul gyoker: packages/live-editor-overlay/src/components/elements-panel/tabs/

Kezdesnek nezd meg

  • components/elements-panel/tabs/elements-panel-codex-tab.tsx
  • components/elements-panel/tabs/elements-panel-codex-workspace-tree.tsx
  • components/live-editor-overlay-root-modules/editing/hooks/use-codex-prompt-domain.ts
  • components/live-editor-overlay-root-modules/panels/hooks/use-codex-workspace-domain.ts

Subszekciok

  • Prompt + mention

    Prompt textarea, suggestion lista es @mention autocomplete flow.

  • Workspace tree

    Workspace file/folder lista, scan-edit prefixek es tree rendereles.

  • Overlay shell

    Codex overlay mount, loading/error allapot es shell kompozicio.

6. Elements panel

PANEL

Tab compositing reteg: widgets, codex, globals, seo es db catalog tabok kozos panel shellbe kotve.

Modul gyoker: packages/live-editor-overlay/src/components/elements-panel/

Kezdesnek nezd meg

  • components/elements-panel/core/live-editor-elements-panel-content.tsx
  • components/elements-panel/tabs/elements-panel-tabs.tsx
  • components/elements-panel/tabs/elements-panel-widgets-tab.tsx
  • components/elements-panel/tabs/elements-panel-db-widget-catalog-tab.tsx

Overlay működés

Az overlay root komponens a CountryLayout-ból indul, és szerkesztési jogosultság esetén tölti a panelmodulokat.

  • Kijelölés + állapot: selection modulok és editor hookok
  • Panelek: section controls, codex, widget katalógus
  • Mentés: draft update pipeline
  • Publikálás: dedikált publish API + cache frissítés

Gyakorlati teszt útvonal: /{countryCode}/sites/{siteSlug}, ahol a DB-ből jövő oldal és az overlay együtt fut.

Draft és publish

Szerkesztés közben draft verzió készül. Publishkor új publikált verzió jön létre, majd a storefront oldali cache revalidálás lefut.

  1. Admin mentés: dokumentum validáció + draft perzisztálás
  2. Publish hívás: státuszváltás és új publikált rekord
  3. Frontend refresh: route cache revalidate