Components

All Vue components use <script setup lang="ts"> with the Composition API. Props and emits are typed via generics (defineProps<T>(), defineEmits<T>()).

Main Components

Component	Purpose
ParallaxScene.vue	Fullscreen parallax viewport — renders all visible layers as positioned <div> elements. Hosts the geometry guide overlay with grid, axes, and selected layer proxy rectangle
OverlayPanel.vue	Draggable floating control panel using VueUse useDraggable. Contains the three-tab interface (Project / Scene / Layer) with viewport edge clamping
LayerList.vue	Drag-reorderable layer stack using SortableJS via useSortable. Shows all layers with name, visibility toggle, and selection highlight. Provides add, duplicate, and delete buttons
LayerEditor.vue	Geometry and motion editors for the selected layer. Renders NumberField sliders for all geometry and motion parameters, organized by sub-tab. Inspector interaction is deactivated by App.vue while a hidden layer is selected
LayerBasicEditor.vue	Basic layer properties: name (text input), image source (URL/path input), upload button, saved images dropdown, and the background styling editor. Inspector interaction is deactivated by App.vue while a hidden layer is selected
LayerBackgroundEditor.vue	Full CSS background styling UI: position anchor grid, offset sliders, size mode selector, repeat mode, blend mode, color picker, and origin/clip selectors
SceneControls.vue	Scene-level parameter sliders: max rotation, container lerp, perspective, and document background color picker
HarmonicsControls.vue	Float harmonics sliders: six frequency and amplitude controls for X and Y axes
FpsBadge.vue	Color-coded FPS counter displayed in the viewport corner. Green (≥55), amber (30–54), rose (<30)
ToastHost.vue	Toast notification stack rendered via <Teleport>. Displays timed messages with optional action buttons (e.g., Undo)
DockedTooltipHelp.vue	Help tooltip variant docked to the overlay panel edge for better readability
LanguageToggle.vue	EN/FR locale toggle buttons using useI18n composable

Control Components

Reusable form controls in src/components/controls/:

Component	Purpose
NumberField.vue	Labeled range slider with numeric display. Supports min/max/step from project constraints, v-model binding, and double-click label to reset to default value
SelectField.vue	Labeled <select> dropdown with v-model binding and double-click reset
TextField.vue	Labeled text input with v-model binding
ToggleField.vue	Labeled checkbox toggle with v-model binding
CollapsibleSection.vue	Expandable/collapsible section with a colored header. Supports color tone variants (neutral, blue, amber, rose, etc.)
SegmentedTabs.vue	Tab bar with icon support and keyboard navigation (arrow keys). Used for both the main panel tabs and layer sub-tabs. Supports contextual help on hover

Modal Components

Dialog components in src/components/modals/:

Component	Purpose
BaseModal.vue	Generic modal shell using <Teleport> to render outside the component tree. Handles backdrop clicks, Escape key to close, and focus trapping
ConfirmDialog.vue	Confirmation dialog with confirm/cancel buttons. Supports a danger tone for destructive actions
ExportHtmlOptionsModal.vue	Runtime HTML export options dialog for local IDB assets (inline vs placeholder), with size impact summary
ImportJsonModal.vue	Import dialog with two modes: paste JSON text, or upload a .json file. Validates against schema v3 on submission

Project Settings Components

Settings panel components in src/components/project-settings/:

Component	Purpose
ProjectSettingsPanel.vue	Orchestrates the three settings groups (setup/presets, transfer, danger) in a vertical layout
ProjectSettingsAccordion.vue	Colored collapsible accordion section with inline contextual help support
TogglePanelSection.vue	Simple collapsible section with a color tone variant
SetupPresetsGroup.vue	Templates, built-in presets, and custom presets with save/load/delete/overwrite. Manages preset apply strategy (Replace/Keep)
TransferGroup.vue	Import/export buttons: Import JSON, Copy JSON, and Download HTML
DangerGroup.vue	Destructive operations: reset project, clear local data, and delete saved presets/assets. Each action requires confirmation