Panel Frontend Module
Svelte 5 frontend module providing the panel registry, docked panel containers with tab management, collapsible mini-panels, floating panel windows with drag/resize, and the floating panel orchestrator.
Responsibilities
- Component registration and metadata lookup via singleton registry
- Docked panel rendering with tab bar, lazy-loading, and collapse/expand
- Floating panel rendering with drag, resize, minimize, dock, and close
- Orchestration of all active floating panel instances
- Collapsed mini-panel icon strip with expand-on-click
- Barrel exports for public API surface
Public API Surface
| Export |
Kind |
Description |
| register() |
function |
Register a panel component with metadata |
| getComponentById() |
function |
Lookup a registered component by ID |
| getRegisteredComponents() |
function |
Get all registered component configs |
| getComponentsForIds() |
function |
Resolve ID array to sorted configs |
| getDefaultLayout() |
function |
Build default docked layout from registrations |
| isAllowedAtPosition() |
function |
Check if a component supports a position |
| PanelContainer |
component |
Docked panel container with tabs |
| FloatingPanel |
component |
Individual floating panel window |
| FloatingPanelManager |
component |
Orchestrator for all floating panels |
| MiniPanel |
component |
Collapsed panel icon strip |
PanelComponentConfig |
type |
Registration config interface |
PanelPosition |
type |
'left' | 'right' | 'bottom' | 'floating' |
PanelTier |
type |
'core' | 'pro' | 'addon' |
PanelSource |
type |
'builtin' | 'plugin' |
Internal Structure
src/lib/components/panels/
|-- index.ts (barrel exports)
|-- PanelRegistry.ts (singleton registry + built-in registrations)
|-- PanelContainer.svelte (docked panel with tabs + lazy-loading)
|-- FloatingPanel.svelte (floating window with drag/resize)
|-- FloatingPanelManager.svelte (orchestrator for floating instances)
+-- MiniPanel.svelte (collapsed icon strip)
Component Relationships
- PanelContainer reads component IDs from
userPreferences.panelLayout[position].components, resolves them via PanelRegistry, and lazy-loads the active tab's Svelte component
- MiniPanel reads the same component IDs and renders icon buttons; clicking one calls
userPreferences.expandPanel()
- FloatingPanelManager reads
userPreferences.panelLayout.floating[] and renders a FloatingPanel for each instance
- FloatingPanel resolves its
componentId via the registry, lazy-loads the component, and delegates all mutations (drag, resize, dock, close) to the preferences store via callbacks
- ResizableLayout (in
workspace/) decides whether to render PanelContainer or MiniPanel based on uiState.collapsedPanels[position]
Dependencies
| Dependency |
Type |
Purpose |
userPreferences store |
internal |
Panel layout state, mutations, persistence |
LucideIcons |
external |
Dynamic icon resolution for tabs and mini-panels |
svelte Component type |
external |
Generic component reference for lazy-loading |
createLogger |
internal |
Logger factory for debug/info output |
Dataflow Diagrams