How Schema Builder Works

Schema Builder operates in three session modes, selectable via the tab strip at the top of the toolbar (defined in sessionMode.ts):

Mode	Route	Purpose
Schema Mode	/schema	Author, edit, visualize, and translate JSON-LD schemas
Data Mode	/data	Edit and validate data documents against the active schema
Settings Mode	/settings	Configure Schema Builder's own behaviour via a settings schema

Each mode activates a different set of panels — resizable, togglable panes that each provide a distinct view or editing surface. The active panel layout is persisted in sessionStore.ts.

Panels

Panels are the core UI primitive. Each panel is a self-contained view registered in defaultPanelTypes.ts and rendered inside a resizable PrimeVue Splitter. Panels can be opened, closed, and resized independently. Selection state (the currently focused schema node or data element) is shared reactively across all open panels.

Panel	Schema Mode	Data Mode	Settings Mode
Text View (Code Editor)	✅	✅	✅
GUI View (Visual Editor)	✅	✅	✅
Diagram View (Schema Graph)	✅	—	—
Mapper View (Translation Workbench)	✅	—	—
AI View	✅	✅	✅
Documentation View	✅	—	—
Table View	—	✅	—

Projects and CARD Profiles

The bottom toolbar row contains two comboboxes that scope the session:

Project Switcher — selects the active project (stored in sessionStorage). All CARD Profiles belong to a project. Changing the project re-fetches available profiles.

CARD Profile Combobox — selects the active CARD Profile, which activates a specific set of schemas, datasets, plugins, and a visualization app target. The 🔧 button opens the CARD Profile Editor dialog.

Application Boot Sequence

Implemented in main.ts:

1. Create Vue app + Pinia + PrimeVue (Lara preset, brand #29619B)
2. Register plugins (Toast, ConfirmationService, Tooltip)
3. registerIcons() — FontAwesome icon library
4. registerDefaultDataFormats() — JSON, YAML, XML format handlers
5. registerDefaultPanelTypes() — all panel types in display order
6. registerBuiltins() — SQL PostgreSQL, SQL DuckDB, and Seed Dataset Generator plugins
7. initApiKey() — restore AI API key from sessionStorage if previously saved
8. Mount app; beforeunload handler warns if unsaved changes exist