Repository navigation
UI and Overlay System
Allislet v1.0.0-alpha includes a sophisticated overlay architecture for building floating tool surfaces, sidebar-based developer tools, windows, and modal interactions without disturbing the host page.
The app shell is designed around a host-safe mount and floating layout primitives.
Core building blocks include:
- DockManager
- WindowManager
- DragController
- Modal
- Theme Engine
- CommandRegistry
- Toast System
- ErrorBoundary
DockManager provides alignment and positioning logic for the shell. The SDK supports:
- left dock
- right dock
- top dock
- bottom dock
This makes the app behave like a panel, toolbar, dev console, or sidecar utility depending on the desired workflow.
WindowManager is the central tool for opening windows inside the isolated runtime. It supports:
- floating windows
- custom component views
- nested sidebars
- internal app pages and utilities
- layout repositioning
This is especially important for multi-panel experiences inside a single isolated runtime.
DragController adds motion and repositioning behavior. This makes any floating window or panel draggable and adaptable to user interactions.
This is useful when the runtime needs to behave like a desktop-style interface rather than static sidebar content.
The Modal primitive supports overlays and lifecycle state transitions for interactive app dialogs.
Common patterns include:
- settings dialogs
- confirmation prompts
- scoped browser actions
- feature configuration overlays
The theme engine keeps the overlay visually coherent with the host page while still preserving a complete app aesthetic.
It supports:
- dark and light mode
- accent color customization
- global shell consistency
- dock-aware positioning and style rules
The SDK offers a command registry and palette pattern so users can access features quickly through keyboard-driven actions.
This includes:
- command registration
- palette invocation
- action routing
- keyboard-triggered UI behavior
The command experience is aligned with the general design philosophy of a high-frequency developer and automation tool.
The Toast system is designed for lightweight runtime feedback. It supports UI patterns similar to modern notification systems, including:
- info notifications
- success states
- warnings
- custom icon payloads
- animated dismissals
This keeps app feedback consistent without polluting the host page with intrusive DOM changes.
The system includes an ErrorBoundary so runtime failures in portions of the UI can be contained and reported without destroying the entire injected shell.
This is essential for browser automation tools, where a failing subview should not break the whole overlay.
The overlay system relies on HostReset and Shadow DOM isolation to avoid host-page CSS conflicts. This ensures the shell can be visually rich without affecting page layout or styling.
The result is a stable application shell that behaves like a desktop-style overlay while maintaining page safety and determinism.
A typical Allislet instance might include:
- a docked side panel
- a floating command palette
- a settings modal
- a windowed inspector
- draggable tool surfaces
- toast notifications
These patterns work together to create an SDK that feels like a browser utility suite rather than a static web component.
The UI and overlay layer is a major feature family in Allislet. It gives the SDK a desktop-like interaction model with docked shells, windows, palettes, modals, theming, and feedback systems that remain isolated from the host page and remain highly composable.