# Architecture

scitex-ui components are organized into two categories:

## Shell Components (`stx-shell-*`)

Workspace-level framing that wraps the entire application.

Component | Description
--- | ---
ThemeProvider | Manages `data-theme` attribute on `<html>`, persists to localStorage. Provides `toggle()`, `setTheme()`, `getTheme()` API.
AppShell | Creates the workspace layout: collapsible sidebar + main content area. Supports preset and custom app accent colors via `--stx-app-accent` CSS variable.
StatusBar | Bottom bar with three sections (left, center, right). Items can have icons and click handlers.

## App Components (`stx-app-*`)

Reusable in-app widgets that live inside the content area.

Component | Description
--- | ---
FileBrowser | Tree view for navigating file hierarchies. Supports expand/collapse directories, file-type icons, and selection callbacks.
PackageDocsSidebar | Navigable sidebar for browsing SciTeX package documentation. Fetches from API and renders grouped, clickable items.

## BaseComponent

All components (except ThemeProvider) extend `BaseComponent`, which provides:

- Container resolution — accepts CSS selector or HTMLElement

- Event dispatch — `emit(name, detail)` fires CustomEvents on the container

- Lifecycle — `destroy()` cleans up DOM

## CSS Naming Convention

- Shell: `stx-shell-{component}__{element}--{modifier}`

- App: `stx-app-{component}__{element}--{modifier}`

CSS custom properties (`--stx-app-accent`, `--text-primary`, etc.) are shared across both categories via `theme.css`.