Components

scitex-ui provides 11 reusable UI components organized into two categories:

Shell Components

Components that form the workspace frame (layout, navigation, chrome).

Component	Description
AppShell	Workspace layout with collapsible sidebar, accent colors
ThemeProvider	Light/dark theme manager with semantic color tokens
StatusBar	Bottom bar with left/center/right sections, optional theme toggle
Resizer	Draggable panel divider with snap, collapse, and localStorage persistence

App Components

Components used within app content areas.

Component	Description
FileBrowser	Tree view for file navigation with extension filter and image badges
FileTabs	Open file tab bar with drag reorder, rename, and dirty indicators
MediaViewer	Display images (zoom/pan), PDFs, and diagrams
ConfirmModal	Modern confirmation dialog replacing `window.confirm()`
Dropdown	Context menu with items, icons, separators, and click-outside-to-close
Tooltip	Auto-positioned tooltips via `data-tooltip` attributes
PackageDocsSidebar	Navigable sidebar for SciTeX package documentation

Usage (TypeScript)

Each component follows the same pattern:

// Import from the component's index
import { FileBrowser } from 'scitex_ui/ts/app/file-browser';

const browser = new FileBrowser({
  container: '#sidebar',
  onFileSelect: (node) => openFile(node.path),
  extensions: ['.yaml', '.yml'],
  showFileCount: true,
});

browser.setData(treeData);

CSS

Each component has a corresponding CSS file using BEM naming:

Shell components: stx-shell-* (e.g., stx-shell-resizer)
App components: stx-app-* (e.g., stx-app-file-browser)

All components use CSS custom properties from theme.css for consistent light/dark theme support.