Workspace i panele

Cztery kolumny (Source, Canvas, Inspector, Export), trójstanowe zwijanie expanded → rail → hidden, sekcje akordeonu i persystencja.

Siatka workspace'u#

Shell to grid z czterema obszarami: Source (edytor JSON), Canvas, Inspector, Export. Każdy można zwinąć bez utraty stanu, a oba poziomy zwijania przeżywają reload.

Stany paneli#

Stan	Jak osiągnąć	Efekt
Expanded	domyślny	Pełna kolumna o szerokości tieru
Rail	1. klik przełącznika	Pionowy rail 44 px z etykietą; klik rozwija
Hidden	2. klik przełącznika	Kolumna usunięta z gridu

Przełącznik w headerze cykluje expanded → rail → hidden → expanded na desktopie. Poniżej 901 px przełącznik działa jak zwykłe show/hide, bo panele są tam tabowane.

Gdy wszystkie trzy kolumny są w stanie rail, w prawym dolnym rogu canvasa pojawia się przycisk Restore panels.

Stan w store#

store.panelCollapsed
store.setPanelCollapsed('json', true)
store.togglePanelCollapsed('json')
store.collapsePanels()
store.expandPanels()

panelVisible (per panel, także toolbar, statusbar, banner) i panelCollapsed trafiają do localStorage:

vector-engine.panels
vector-engine.panel-collapse

Sekcje w panelach#

Każdy nagłówek grupy w Inspectorze i krokach eksportu to toggle z aria-expanded/aria-controls:

Inspector: Layers, Transform, Appearance, Shape
Export: 1. Target … 6. Preview

vue

<InspectorSection
  id="inspector-transform"
  title="Transform"
  storage-key="inspector.transform"
>
  <InspectorNumberField label="X" />
  <InspectorNumberField label="Y" />
</InspectorSection>

Grupy używają useCollapsibleSection(storageKey) — stan w reaktywnej mapie na poziomie modułu, persystencja pod vector-engine.sections. Sekcje są domyślnie otwarte; :default-open="false" startuje zwinięte, :collapsible="false" przypina na stałe.

AppBanner.vue renderuje zamykalny pasek ogłoszeniowy między headerem a workspace. Zamknięcie zapisuje panelVisible.banner = false; przycisk info w headerze przywraca go.

Banner znika automatycznie:

w trybie fullscreen,
na bardzo niskich viewportach (≤ 820 px wysokości),
jego drugorzędna lista zwija się poniżej 1180 px.

Shell rezerwuje wiersz bannera przez .app-shell:not(:has(.app-banner)), więc ukrycie nie zostawia pustej luki.

Tła canvasa#

Podgląd ma niezależne tło edytora (Grid, Light, White, Dark), odseparowane od tła eksportu — możesz projektować na ciemno, a eksportować na biało.

Brand assets#

Plik	Przeznaczenie
`public/favicon.svg`	Główna favicon wektorowa
`public/favicon.ico`	Legacy 16/32/48 px
`public/apple-touch-icon.png`	Ikona iOS 180 px
`public/icon-192.png`, `icon-512.png`	Ikony manifestu PWA
`public/site.webmanifest`	Metadane instalowalnej PWA
`public/brand/social-card.png`	Karta Open Graph 1200×630

npm run build uruchamia scripts/verify-deployment.mjs, który wywala się, jeśli którykolwiek z tych plików lub metadanych zniknie z outputu.