# DreamLake

> DreamLake uikit is the React component library and design contract — surfaces, ink, semantic color, type, geometry, and the zebra-list patterns shared by every DreamLake page.

## Get started

- [Overview](https://uikit.dreamlake.ai/index.md): Surfaces, ink, color, type, geometry, and the zebra-list patterns shared by every DreamLake page.
- [Style guide](https://uikit.dreamlake.ai/style-guide.md): Surfaces, ink, semantic palette, type pairing, spacing, icons, elevation, radii, motion, and zebra-list bands — the complete DreamLake design contract on one page.
- [LLM-Readable Docs](https://uikit.dreamlake.ai/llm-readable.md): Every page is available as clean markdown, plus an llms.txt index, a full-corpus dump, and an importable agent skill.

## Components

- [Avatar](https://uikit.dreamlake.ai/components/avatar.md): Image-or-initials avatar with adjustable size and corner radius.
- [BreadcrumbTree](https://uikit.dreamlake.ai/components/breadcrumb-tree.md): Breadcrumb selector with a Miller-column drop-down for navigating deep hierarchies.
- [Button](https://uikit.dreamlake.ai/components/button.md): Action button with primary, secondary, ghost and danger variants.
- [Dialog](https://uikit.dreamlake.ai/components/dialog.md): Modal dialog with backdrop, Escape-to-dismiss, and a footer action row.
- [Field](https://uikit.dreamlake.ai/components/field.md): Form-field wrapper — label, required marker, hint and error.
- [FilterBar](https://uikit.dreamlake.ai/components/filter-bar.md): Filter chips + search input + sort dropdown for list/table toolbars.
- [Menu](https://uikit.dreamlake.ai/components/menu.md): Trigger-anchored dropdown menu with sections, items, dividers, and a destructive variant.
- [ProfileCard](https://uikit.dreamlake.ai/components/profile-card.md): Bordered card for a resource row — title, tag, meta, description, footer, optional hover actions.
- [ProfileLayout](https://uikit.dreamlake.ai/components/profile-layout.md): Full-page profile layout — sticky top bar with animated tabs, a fixed left rail, and a scrollable main column.
- [ResizableLayout](https://uikit.dreamlake.ai/components/resizable-layout.md): Three-column drag-to-resize layout with optional persistence and fixed-px column modes.
- [Select](https://uikit.dreamlake.ai/components/select.md): Composable single-select with a trigger, value, and grouped items.
- [SideNav](https://uikit.dreamlake.ai/components/side-nav.md): Sidebar shell with pinned header/footer and a scrollable body of titled, sticky groups.
- [Tabs](https://uikit.dreamlake.ai/components/tabs.md): Animated tab switcher with underline or segment variants, multiple sizes, and controlled/uncontrolled state.
- [Tag](https://uikit.dreamlake.ai/components/tag.md): Hashtag or pill tag with a six-color tone palette, accent override, and removable variant.
- [TextField](https://uikit.dreamlake.ai/components/text-field.md): Controlled text input with prefix, multiline, mono and invalid states.
- [VirtualList](https://uikit.dreamlake.ai/components/virtual-list.md): Windowed list — fixed or dynamic item height, plus infinite-scroll for very large row sets.
- [VirtualListFlow](https://uikit.dreamlake.ai/components/virtual-list-flow.md): Flow-layout virtual list — items in CSS normal flow, so sticky / gap / scroll stability work like a non-virtual list.
- [VideoAnnotator](https://uikit.dreamlake.ai/components/video-annotator.md): Video player with an editable, contiguous segment timeline — split, merge, drag boundaries, and frame-step transport.
- [Spinner](https://uikit.dreamlake.ai/components/spinner.md): Indeterminate loading spinner — a dual dot-pulse ring that inherits text color.
- [Skeleton](https://uikit.dreamlake.ai/components/skeleton.md): Pulsing placeholder block for loading states.
- [Switch](https://uikit.dreamlake.ai/components/switch.md): Binary on/off toggle. Controlled or uncontrolled.
- [Badge](https://uikit.dreamlake.ai/components/badge.md): Small inline status/category badge with filled, outline and dot forms.
- [Collapsible](https://uikit.dreamlake.ai/components/collapsible.md): Expand/collapse region with an animated-height content area.
- [Card](https://uikit.dreamlake.ai/components/card.md): Panel container with padding, hairline border, and an optional collapse toggle.
- [Alert Dialog](https://uikit.dreamlake.ai/components/alert-dialog.md): Modal confirmation dialog for destructive or consequential actions.
- [Drawer](https://uikit.dreamlake.ai/components/drawer.md): Edge-anchored panel (sheet) that slides in from any side.
- [Toast](https://uikit.dreamlake.ai/components/toast.md): Transient notifications via an imperative toast() API and a Toaster.
- [UIKit Badge](https://uikit.dreamlake.ai/components/uikit-badge.md): Version chip showing the @dreamlake/uikit package name and version.
- [useIsMobile](https://uikit.dreamlake.ai/components/use-is-mobile.md): Hook returning true when the viewport is narrower than 768px.
- [Label](https://uikit.dreamlake.ai/components/label.md): Form label with size variants, associated via htmlFor.
- [Toggle](https://uikit.dreamlake.ai/components/toggle.md): Two-state toggle button, plus a segmented ToggleButtons group.
- [Toolbar](https://uikit.dreamlake.ai/components/toolbar.md): Horizontal container for grouped actions, with separators.
- [Modal](https://uikit.dreamlake.ai/components/modal.md): General-purpose modal dialog with a trigger and close button.
- [Form Layout](https://uikit.dreamlake.ai/components/form-layout.md): Pairs a label with a control, stacked or side-by-side.
- [Input](https://uikit.dreamlake.ai/components/input.md): Styled text input with optional left/right slots.
- [Mouse Cursor Icons](https://uikit.dreamlake.ai/components/mouse-cursor.md): Cursor-pointer icons (outline and filled) that inherit currentColor.
- [Tooltip](https://uikit.dreamlake.ai/components/tooltip.md): Hover/focus tooltip with anchored, viewport-aware positioning.
- [Popover](https://uikit.dreamlake.ai/components/popover.md): Click-triggered floating panel anchored to its trigger.
- [Dropdown Menu](https://uikit.dreamlake.ai/components/dropdown-menu.md): Click-triggered action menu with labels, separators, radio items and submenus.
- [Theme](https://uikit.dreamlake.ai/components/theme.md): ThemeProvider, the useTheme hook, and theme toggle controls.
- [Tree View](https://uikit.dreamlake.ai/components/tree-view.md): Flat-rendered hierarchical tree for scene graphs and file trees, with expand/collapse, selection, and searchable label highlighting.
- [Context Menu](https://uikit.dreamlake.ai/components/context-menu.md): Right-click menu composed from a trigger area and content items, with labels, groups, shortcuts, and a danger tone.
- [Dial](https://uikit.dreamlake.ai/components/dial.md): Schema-driven control panel that renders typed inputs (numbers, vectors, colors, booleans, buttons) from a single schema array.
- [Waterfall](https://uikit.dreamlake.ai/components/waterfall.md): A zoomable, pannable timeline waterfall — a tree of events on the left, a time axis with duration bars and instant-event dots on the right.
- [Slider](https://uikit.dreamlake.ai/components/slider.md): Horizontal range slider with single or multiple thumbs, optional step ticks, and controlled/uncontrolled state.
- [Number Inputs](https://uikit.dreamlake.ai/components/number-inputs.md): Drag-to-adjust numeric, vector, color, and text inputs for the Dial system.
- [Layout](https://uikit.dreamlake.ai/components/layout.md): Studio layout shells — an edge-docked dock layout and a pointer-transparent liquid layout for floating panels over a 3D canvas.
- [Sync Scroll](https://uikit.dreamlake.ai/components/sync-scroll.md): Synchronize scroll position across multiple panes — a master drives its slaves, with optional drag-to-scroll on either axis.

## Pipeline

- [Pipeline Graph](https://uikit.dreamlake.ai/pipeline-view/pipeline-graph.md): The presentational component that renders a traced DreamLake pipeline — what it's for, the Python↔visual↔JSON round-trip, and the interactive canvas.
- [Anatomy](https://uikit.dreamlake.ai/pipeline-view/anatomy.md): Every field mapped to a pixel — the node card, the two connector tags (data vs mask), and the six connector states — each as visual + TypeScript + JSON, side by side.
- [Pipeline Graph JSON](https://uikit.dreamlake.ai/pipeline-view/pipeline-graph-json.md): The data format PipelineGraph renders — pipeline, node, and edge shapes, static vs runtime fields, the output artifact, and how status drives edge flow.
- [Architecture & Roadmap](https://uikit.dreamlake.ai/pipeline-view/architecture.md): How PipelineGraph is built — the file split, the design principles, the render pipeline, and what it deliberately leaves out — plus the current stage and what's planned next.