# Mola UI > A design system cut like a mola: flat layers, hard keylines, revealed bands. React components for dense internal tools and AI-native interfaces. Published as `@demogar/mola-ui`: React 19, Base UI for behaviour, Tailwind v4 for styling, design tokens as CSS custom properties. 61 components and 14 AI components (75 documented pages). Install and set up: ```bash npm install @demogar/mola-ui @base-ui/react @fontsource-variable/archivo @fontsource-variable/alegreya @fontsource-variable/martian-mono ``` `@base-ui/react` is a peer dependency: install it beside the package so the app and Mola share one copy. The package is ESM only; `require()` works on Node 22.12 or later. ```tsx import '@fontsource-variable/archivo/wdth.css' import '@fontsource-variable/alegreya/wght.css' import '@fontsource-variable/martian-mono/wdth.css' import '@demogar/mola-ui/styles.css' import { Button } from '@demogar/mola-ui' ``` Mount the providers once, at the app root (in Next.js, `app/layout.tsx`): ```tsx import { DirectionProvider, ToastProvider, TooltipProvider } from '@demogar/mola-ui' ``` `ToastProvider` is required: `useToast()` throws without it. `DirectionProvider` gives Base UI the keyboard direction; for right-to-left, set `dir="rtl"` on `` and `direction="rtl"` on the provider. `TooltipProvider` is optional. Theme and density are attributes, not props: ``. Leave `data-theme` off to follow the OS; a stored choice is set by an inline `` script before the first paint. `styles.css` includes Tailwind's preflight and styles `body`; in an existing app, import `@demogar/mola-ui/components.css` instead, which scopes the reset to the components. Already on Tailwind v4? Import `@demogar/mola-ui/tailwind.css` into your own build instead of `styles.css`. ## Rules - Interactive edges use `shadow-cut` (`shadow-floating` on popups, `shadow-overlay` on dialogs and drawers), never `border`. `border-keyline` is for decorative dividers only. Every other edge is a named utility (`rule-b`, `cut-t`, `bar-start-ink`, `cut-anil`, `focus-ring`), never an arbitrary `shadow-[…]` or an `rtl:` twin. A box-shadow edge can grow a revealed band on hover without moving its neighbours; the named edges flip for right-to-left by themselves and keep an edge in forced-colours mode. - Radius is zero. `rounded-full` only for something that is genuinely a dot. The system is cut cloth: nothing in it is rounded. - State is never colour alone: glyph, word and colour, in that order of importance. It has to survive colour blindness, a greyscale screenshot and forced colours. - Disabled is stated, not faded. No `opacity-*` on a disabled control. Opacity fades the keyline and the label to about 2:1, a failure axe does not report because disabled controls are exempt. - Colours come from tokens, each through a utility its scope allows (surface `bg-`, text `text-`, edge `border-`/`decoration-`, mark `bg-`/`fill-`). No hex, rgb or arbitrary colour values outside `tokens.css`. Every token pairing has a measured contrast ratio in both themes; a colour outside the token file, or a token outside its scope (`text-cloth-pale` compiles), was never measured. - Theme and density are attributes (`data-theme`, `data-density`) on `` or a subtree, not props or React context. Dialogs and menus portal to `` and must inherit them. No component takes a density prop. - Lay out with logical properties: `ps-`/`pe-`, `ms-`/`me-`, `inset-s-`/`inset-e-`, `text-start`/`text-end`. `dir="rtl"` then mirrors the layout with no second set of classes. - Typefaces have roles: Archivo (`font-ui`) for the interface, Alegreya (`font-text`) for prose from a person or a model, Martian Mono (`literal`) only for machine literals. A reader can tell from the letterforms whether the product, a person or the machine is speaking. - Labels are sentence case; buttons start with a verb and name the object (“Cancel run”, not “OK”). A button that names its consequence can be chosen without reading the surrounding text. - Unknown duration is the relleno working state, never a spinner; elapsed time counts up instead of a progress bar inventing a percentage. Model work has no knowable total, and a bar that stalls at 90% is a lie. - Anything that writes to the world waits for a person, with the choices given equal weight (`ToolCall` approval, `ChangeReview`). An agent’s action is only as safe as the decision in front of it. - Use the components for behaviour. Do not re-implement focus trapping, roving focus or typeahead; the components are built on Base UI. A maintained primitive gets keyboard and screen-reader behaviour right in more cases than a local copy. - Check a component’s lifecycle phase before building on it. Stable is covered by semver, Experimental may change in a minor release, and Deprecated names its replacement: use that instead. A screen built on a component that is about to change or go is built twice. - Do what each component’s accessibility section leaves to you, usually an accessible name or a label. The component handles roles, focus and announcements. Axe catches a missing name only on the screens it is run on; the component cannot know what its button is for. - On a product screen, rojo means danger and is used only through the danger role (`bg-danger`, `bg-danger-soft`, `text-ink-danger`, `band-danger`). The accent is gold, by name (`band-accent`). A red label band or bullet beside a red FAILED mark makes the failure one red thing among several (ADR 0008). - A screen reflows at 320px: only a region meant to scroll sideways (a table, code, a tab or chip row) may, and it carries the `scroll-edge` utility with `useScrollEdge()` as its ref. Table, Tabs and CodeBlock already do. WCAG 1.4.10 is measured at 320px, and a region that scrolls with no cue reads as complete: a table hid its Status column and its only action that way. - Props share one vocabulary: `tone` is a status (`neutral`, `info`, `success`, `warn`, `danger`, `accent`), `variant` a presentation (`solid`, `outline`, `seam`), `kind` a category (`EmptyState kind="no-results"`), and `size` the t-shirt scale (`xs` to `xl`). A word that means one thing on every component can be guessed instead of looked up, by a person or an agent. - Every component takes `ref`, `id`, `data-*` and the other DOM props of the element it documents. `className` and `style` style the box you see (the element with the cut); `ref` and the rest go to the control you focus. A wrapper around a label has `wrapperClassName`. A `className` that moved to another element when a `label` was added changed meaning silently. ## Lifecycle phases Every component has one phase. Stable unless the index says otherwise. - Experimental: Its API may change in a minor release, without a deprecation first. - Stable: Semantic versioning applies: nothing breaks without a deprecation first. - Deprecated: It still works and warns in development. It will be removed; move to its replacement. ## Docs - [Choosing a component](https://demogar.github.io/molaui/?path=/docs/mola-ui-choosing-a-component--overview): which component for which job, and what to use instead - [Getting started](https://demogar.github.io/molaui/?path=/docs/mola-ui-getting-started--overview): install, the app root and its providers, existing apps, theme switching without a flash, density, right-to-left, Tailwind, Next.js - [Principles](https://demogar.github.io/molaui/?path=/docs/mola-ui-principles--overview): the six rules every component obeys - [AI interface principles](https://demogar.github.io/molaui/?path=/docs/ai-principles--overview): streaming, latency, approval, uncertainty, failure - [Decisions](https://demogar.github.io/molaui/?path=/docs/decisions-all-decisions--overview): the architecture decision records behind colour roles, themes, density and typography - [Versioning](https://demogar.github.io/molaui/?path=/docs/mola-ui-versioning--overview): lifecycle phases, what counts as breaking, deprecation, codemods - [Known gaps](https://demogar.github.io/molaui/?path=/docs/mola-ui-known-gaps--overview): open limitations, and what has not been tested by hand - [Component manifest](https://github.com/demogar/molaui/blob/main/docs/ai/components.json): every export, prop, variant and story as JSON ## Files for agents Read the one you need rather than all of them. Every docs page also has a Markdown version: `?path=/docs/` is `https://demogar.github.io/molaui/md/.md`, linked as "Markdown" below. - [Components](https://demogar.github.io/molaui/llms-components.txt): every component's usage, props, accessibility, anatomy and where it is used - [Tokens](https://demogar.github.io/molaui/llms-tokens.txt): every design token with its role and its value in the light and the dark theme; each colour's scopes and the only utilities valid for it; every promised contrast pairing - [Patterns](https://demogar.github.io/molaui/llms-patterns.txt): whole screens, what each is built from, and its states - [Rules](https://demogar.github.io/molaui/llms-rules.txt): the design rules alone, numbered as `check_code` cites them, with the lifecycle phases - [Full text](https://demogar.github.io/molaui/llms-full.txt): all of the above except the tokens, in one file An MCP server with the same data ships in the package: `npx -y --package @demogar/mola-ui mola-ui-mcp`. Its tools are `list_components`, `get_component` (with `brief: true` for the summary, usage and props alone), `search`, `get_tokens`, `get_rules`, `get_pattern` and `check_code`, which reviews code you wrote against the design rules and returns each finding with its line, rule and fix. ## Actions - [Button](https://demogar.github.io/molaui/?path=/docs/components-actions-button--overview) ([Markdown](https://demogar.github.io/molaui/md/components-actions-button--overview.md)): A cut-shape button for an action on this page, with IconButton for an action shown as an icon alone. ## Data display - [Avatar](https://demogar.github.io/molaui/?path=/docs/components-data-display-avatar--overview) ([Markdown](https://demogar.github.io/molaui/md/components-data-display-avatar--overview.md)): A person or an agent as a square tile, with initials or a glyph on a colour picked from the name. - [Code](https://demogar.github.io/molaui/?path=/docs/components-data-display-code--overview) ([Markdown](https://demogar.github.io/molaui/md/components-data-display-code--overview.md)): Machine text: Code for an inline literal, CodeBlock for a labelled block with copy and wrap. - [Description list](https://demogar.github.io/molaui/?path=/docs/components-data-display-description-list--overview) ([Markdown](https://demogar.github.io/molaui/md/components-data-display-description-list--overview.md)): Term and value pairs: the properties of a run, a document or an evaluation. - [Relative time](https://demogar.github.io/molaui/?path=/docs/components-data-display-relative-time--overview) ([Markdown](https://demogar.github.io/molaui/md/components-data-display-relative-time--overview.md)) (Experimental): A moment as its distance from now, “3 minutes ago” or “in 2 days”, in a time element that keeps the exact moment. - [Stat](https://demogar.github.io/molaui/?path=/docs/components-data-display-stat--overview) ([Markdown](https://demogar.github.io/molaui/md/components-data-display-stat--overview.md)): A KPI tile: a label, a figure, a change with its direction and sentiment, and an optional sparkline. - [Swatch](https://demogar.github.io/molaui/?path=/docs/components-data-display-swatch--overview) ([Markdown](https://demogar.github.io/molaui/md/components-data-display-swatch--overview.md)): A small decorative colour key, square or round, in one of the badge tones, placed before the word it keys. - [Table](https://demogar.github.io/molaui/?path=/docs/components-data-display-table--overview) ([Markdown](https://demogar.github.io/molaui/md/components-data-display-table--overview.md)): Table primitives for rows of records, and DataTable for columns as data with sorting, selection, column visibility and pages. - [Timeline](https://demogar.github.io/molaui/?path=/docs/components-data-display-timeline--overview) ([Markdown](https://demogar.github.io/molaui/md/components-data-display-timeline--overview.md)): Timeline for events already written down, on a spine; StepList for ordered steps a person follows. ## Feedback - [Badge](https://demogar.github.io/molaui/?path=/docs/components-feedback-badge--overview) ([Markdown](https://demogar.github.io/molaui/md/components-feedback-badge--overview.md)): A small status mark in one of the system’s tones; StatusDot for a square dot beside a label; RecommendationBadge for an editorial scale. - [Callout](https://demogar.github.io/molaui/?path=/docs/components-feedback-callout--overview) ([Markdown](https://demogar.github.io/molaui/md/components-feedback-callout--overview.md)): A message that belongs to a region of the page, with a tone, an optional title and actions. - [Empty state](https://demogar.github.io/molaui/?path=/docs/components-feedback-empty-state--overview) ([Markdown](https://demogar.github.io/molaui/md/components-feedback-empty-state--overview.md)): What a panel shows when it has nothing to show, in four variants: empty, no results, error and no permission. - [Placeholder](https://demogar.github.io/molaui/?path=/docs/components-feedback-placeholder--overview) ([Markdown](https://demogar.github.io/molaui/md/components-feedback-placeholder--overview.md)): A slot for something that does not exist yet, such as a chart with no data, announced as one image. - [Progress](https://demogar.github.io/molaui/?path=/docs/components-feedback-progress--overview) ([Markdown](https://demogar.github.io/molaui/md/components-feedback-progress--overview.md)): Progress for work moving toward done, which may be indeterminate; Meter for a reading inside a known range, with thresholds. - [Skeleton](https://demogar.github.io/molaui/?path=/docs/components-feedback-skeleton--overview) ([Markdown](https://demogar.github.io/molaui/md/components-feedback-skeleton--overview.md)): Bones in the shape of content that has not arrived, with SkeletonGroup to mark the region busy and say once what is loading. - [Toast](https://demogar.github.io/molaui/?path=/docs/components-feedback-toast--overview) ([Markdown](https://demogar.github.io/molaui/md/components-feedback-toast--overview.md)): A floating notice for something that happened elsewhere or just now; a running toast turns into its result in place. ## Forms - [Checkbox](https://demogar.github.io/molaui/?path=/docs/components-forms-checkbox--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-checkbox--overview.md)): A square that turns a choice on or off, applied when the form is saved; CheckboxGroup for any number of choices from a set. - [Chip](https://demogar.github.io/molaui/?path=/docs/components-forms-chip--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-chip--overview.md)): A filter chip with a real checkbox or radio inside, filled with ink when on, with an optional count. - [Combobox](https://demogar.github.io/molaui/?path=/docs/components-forms-combobox--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-combobox--overview.md)): A select you can type into: Combobox always ends on an option from the list; Autocomplete takes free text with suggestions. - [Date picker](https://demogar.github.io/molaui/?path=/docs/components-forms-date-picker--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-date-picker--overview.md)): DatePicker for one date, typed or picked from a calendar; DateRangePicker for a period, with presets and two typed ends. - [Field](https://demogar.github.io/molaui/?path=/docs/components-forms-field--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-field--overview.md)): A label, a control and a hint or error wired together; the page also covers Input, Textarea, SearchInput and Label. - [File upload](https://demogar.github.io/molaui/?path=/docs/components-forms-file-upload--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-file-upload--overview.md)): A dropzone with a real Browse button, and a list of the files put there with their status and progress. - [Form](https://demogar.github.io/molaui/?path=/docs/components-forms-form--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-form--overview.md)) (Experimental): A form that knows which fields are failing: FormErrorSummary lists them as links and takes focus on submit; Fieldset groups controls under one legend. - [Listbox](https://demogar.github.io/molaui/?path=/docs/components-forms-listbox--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-listbox--overview.md)) (Experimental): A list of options that stays on the page, for choosing one or several without opening anything. - [Number input](https://demogar.github.io/molaui/?path=/docs/components-forms-number-input--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-number-input--overview.md)): A number you can type and step, formatted for a locale, with bounds, a unit and steppers inside the field. - [Radio](https://demogar.github.io/molaui/?path=/docs/components-forms-radio--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-radio--overview.md)): One choice from a small set, all visible, in a named RadioGroup; square, and told from a checkbox by its mark. - [Segmented control](https://demogar.github.io/molaui/?path=/docs/components-forms-segmented-control--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-segmented-control--overview.md)): One choice from a few views or settings, all visible and switched instantly, cut from one piece. - [Select](https://demogar.github.io/molaui/?path=/docs/components-forms-select--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-select--overview.md)): A choice from a list in a popup, with an optional second line per option and labelled groups. - [Slider](https://demogar.github.io/molaui/?path=/docs/components-forms-slider--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-slider--overview.md)): A value or a range on a continuous scale, with the value always printed in tabular figures. - [Switch](https://demogar.github.io/molaui/?path=/docs/components-forms-switch--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-switch--overview.md)): A setting that takes effect the moment it is switched; on is verde, the colour of live. - [Tag group](https://demogar.github.io/molaui/?path=/docs/components-forms-tag-group--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-tag-group--overview.md)) (Experimental): A set of short values shown as tags, which can be removed, and selected when the set is also a choice. - [Time picker](https://demogar.github.io/molaui/?path=/docs/components-forms-time-picker--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-time-picker--overview.md)) (Experimental): TimePicker for a time of day as hour and minute spinbuttons; DateTimePicker for a moment, a DatePicker and a TimePicker read as one Date. ## Layout - [App shell](https://demogar.github.io/molaui/?path=/docs/components-layout-app-shell--overview) ([Markdown](https://demogar.github.io/molaui/md/components-layout-app-shell--overview.md)): The frame a tool lives in: a top bar, a sidebar that collapses to a rail or becomes a sheet, and one scrolling main region. - [Container](https://demogar.github.io/molaui/?path=/docs/components-layout-container--overview) ([Markdown](https://demogar.github.io/molaui/md/components-layout-container--overview.md)): The page column, in prose, page, wide and full widths; Section and SectionHeader set the rhythm down the page. - [Divider](https://demogar.github.io/molaui/?path=/docs/components-layout-divider--overview) ([Markdown](https://demogar.github.io/molaui/md/components-layout-divider--overview.md)): Three dividers in rising weight and rarity: a keyline, a relleno seam and the sawtooth diente. - [Grid](https://demogar.github.io/molaui/?path=/docs/components-layout-grid--overview) ([Markdown](https://demogar.github.io/molaui/md/components-layout-grid--overview.md)): Column patterns that reflow; auto fits as many columns of at least minItem as there is room for. - [Page header](https://demogar.github.io/molaui/?path=/docs/components-layout-page-header--overview) ([Markdown](https://demogar.github.io/molaui/md/components-layout-page-header--overview.md)): The top of a page inside the shell: a breadcrumb, the title, a description, actions, a row of facts and optional tabs. - [Panel](https://demogar.github.io/molaui/?path=/docs/components-layout-panel--overview) ([Markdown](https://demogar.github.io/molaui/md/components-layout-panel--overview.md)): A cut surface: a region of one ground bounded by an edge, where the tone decides the ink. - [Stack](https://demogar.github.io/molaui/?path=/docs/components-layout-stack--overview) ([Markdown](https://demogar.github.io/molaui/md/components-layout-stack--overview.md)): Stack for a column with one gap, Inline for a row that wraps, and RowBetween for one thing at each end. - [Toolbar](https://demogar.github.io/molaui/?path=/docs/components-layout-toolbar--overview) ([Markdown](https://demogar.github.io/molaui/md/components-layout-toolbar--overview.md)): A row of related controls with one tab stop and arrow-key movement, with toggles, a field and an overflow menu. ## Navigation - [Accordion](https://demogar.github.io/molaui/?path=/docs/components-navigation-accordion--overview) ([Markdown](https://demogar.github.io/molaui/md/components-navigation-accordion--overview.md)): Sections of one document that open one or several at a time; Collapsible for a single disclosure. - [Breadcrumb](https://demogar.github.io/molaui/?path=/docs/components-navigation-breadcrumb--overview) ([Markdown](https://demogar.github.io/molaui/md/components-navigation-breadcrumb--overview.md)): Where a page sits, as links back up the path, with the current page as plain text. - [Pagination](https://demogar.github.io/molaui/?path=/docs/components-navigation-pagination--overview) ([Markdown](https://demogar.github.io/molaui/md/components-navigation-pagination--overview.md)): Moving through a long ordered result, as numbered pages or as a compact range with two arrows. - [Stepper](https://demogar.github.io/molaui/?path=/docs/components-navigation-stepper--overview) ([Markdown](https://demogar.github.io/molaui/md/components-navigation-stepper--overview.md)) (Experimental): A task done in order, one step at a time: the steps with their state, and the current step as a form that validates before it moves on. - [Tabs](https://demogar.github.io/molaui/?path=/docs/components-navigation-tabs--overview) ([Markdown](https://demogar.github.io/molaui/md/components-navigation-tabs--overview.md)): Switching between views of one thing: underline for views, panel for tabs that are containers. - [Tree](https://demogar.github.io/molaui/?path=/docs/components-navigation-tree--overview) ([Markdown](https://demogar.github.io/molaui/md/components-navigation-tree--overview.md)) (Experimental): A hierarchy you move through and pick from, with branches that open and close and one selected item. ## Overlays - [Command palette](https://demogar.github.io/molaui/?path=/docs/components-overlays-command-palette--overview) ([Markdown](https://demogar.github.io/molaui/md/components-overlays-command-palette--overview.md)): The keyboard’s front door: a searchable list of commands and destinations, opened with ⌘K or Ctrl+K. - [Dialog](https://demogar.github.io/molaui/?path=/docs/components-overlays-dialog--overview) ([Markdown](https://demogar.github.io/molaui/md/components-overlays-dialog--overview.md)): Dialog for a short modal task; AlertDialog to confirm an action that destroys something. - [Drawer](https://demogar.github.io/molaui/?path=/docs/components-overlays-drawer--overview) ([Markdown](https://demogar.github.io/molaui/md/components-overlays-drawer--overview.md)): A panel that slides in from an edge: details beside a list, filters, or quick actions in a bottom sheet. - [Menu](https://demogar.github.io/molaui/?path=/docs/components-overlays-menu--overview) ([Markdown](https://demogar.github.io/molaui/md/components-overlays-menu--overview.md)): Actions on a thing that do not each deserve a button, with checkbox and radio items, submenus and shortcuts. - [Popover](https://demogar.github.io/molaui/?path=/docs/components-overlays-popover--overview) ([Markdown](https://demogar.github.io/molaui/md/components-overlays-popover--overview.md)): A non-modal panel anchored to the control that opened it. - [Tooltip](https://demogar.github.io/molaui/?path=/docs/components-overlays-tooltip--overview) ([Markdown](https://demogar.github.io/molaui/md/components-overlays-tooltip--overview.md)): A short label on hover or focus, with an optional keyboard shortcut. ## Typography - [Display](https://demogar.github.io/molaui/?path=/docs/components-typography-display--overview) ([Markdown](https://demogar.github.io/molaui/md/components-typography-display--overview.md)): Archivo Bold set wide, for the one title that is the point of a screen. - [Heading](https://demogar.github.io/molaui/?path=/docs/components-typography-heading--overview) ([Markdown](https://demogar.github.io/molaui/md/components-typography-heading--overview.md)): Four heading levels for wayfinding in a tool, with size to separate the look from the outline. - [Kbd](https://demogar.github.io/molaui/?path=/docs/components-typography-kbd--overview) ([Markdown](https://demogar.github.io/molaui/md/components-typography-kbd--overview.md)): A key as a cut shape, with KbdChord for keys pressed together. - [Lead](https://demogar.github.io/molaui/?path=/docs/components-typography-lead--overview) ([Markdown](https://demogar.github.io/molaui/md/components-typography-lead--overview.md)): The paragraph under a page title that says what the screen is for, in the reading voice. - [Meta](https://demogar.github.io/molaui/?path=/docs/components-typography-meta--overview) ([Markdown](https://demogar.github.io/molaui/md/components-typography-meta--overview.md)): Small facts compared down a column, such as duration, cost, count and time, in tabular figures. - [Prose](https://demogar.github.io/molaui/?path=/docs/components-typography-prose--overview) ([Markdown](https://demogar.github.io/molaui/md/components-typography-prose--overview.md)): The reading voice for long-form markup, such as a document, a run summary or a model’s answer. - [Pullquote](https://demogar.github.io/molaui/?path=/docs/components-typography-pullquote--overview) ([Markdown](https://demogar.github.io/molaui/md/components-typography-pullquote--overview.md)): A voice interrupting the prose: a quotation in the reading face, under a relleno band, with its source. - [Rotulo](https://demogar.github.io/molaui/?path=/docs/components-typography-rotulo--overview) ([Markdown](https://demogar.github.io/molaui/md/components-typography-rotulo--overview.md)): The label register, cut short by a band, set under the block it belongs to. - [Text](https://demogar.github.io/molaui/?path=/docs/components-typography-text--overview) ([Markdown](https://demogar.github.io/molaui/md/components-typography-text--overview.md)): Running interface text in the system voice, in three inks: ink, ink-2 and muted. ## AI interface - [Agent run](https://demogar.github.io/molaui/?path=/docs/ai-agent-run--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-agent-run--overview.md)): A long-running agent run as a timeline: its status and live clock, each step on one spine, and the reason it stopped. - [Change review](https://demogar.github.io/molaui/?path=/docs/ai-change-review--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-change-review--overview.md)): A change an agent proposes, shown as the reviewer reads it, with Approve, Request changes and Reject under it. - [Confidence](https://demogar.github.io/molaui/?path=/docs/ai-confidence--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-confidence--overview.md)): How sure the system is, in three levels and in words, with UncertaintyNote for a specific claim to check. - [Markdown](https://demogar.github.io/molaui/?path=/docs/ai-markdown--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-markdown--overview.md)) (Experimental): A model’s Markdown answer, streamed and rendered in Mola’s typography, with its citation markers kept and no HTML ever injected. - [Message](https://demogar.github.io/molaui/?path=/docs/ai-message--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-message--overview.md)): One turn of a conversation, laid out as a ledger: who spoke, when, with which model, and what they said or did. - [Prompt input](https://demogar.github.io/molaui/?path=/docs/ai-prompt-input--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-prompt-input--overview.md)): The composer: a field that grows, attachments, a toolbar, and a send button that becomes Stop while a response generates. - [Reasoning](https://demogar.github.io/molaui/?path=/docs/ai-reasoning--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-reasoning--overview.md)): The model’s thinking behind a disclosure, summarised as “Thought for 12.4s” and set a step quieter than the answer. - [Run error](https://demogar.github.io/molaui/?path=/docs/ai-run-error--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-run-error--overview.md)): Why a run stopped: the step, a plain sentence, the error verbatim, and the ways back in order of cost. - [Run status](https://demogar.github.io/molaui/?path=/docs/ai-run-status--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-run-status--overview.md)): The one status vocabulary for a run, a step and a tool call: a glyph, a word and a colour, with an elapsed clock. - [Side-by-side diff](https://demogar.github.io/molaui/?path=/docs/ai-side-by-side-diff--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-side-by-side-diff--overview.md)) (Experimental): Two versions of one text in two panes, each change opposite its replacement, falling back to one column when narrow. - [Sources](https://demogar.github.io/molaui/?path=/docs/ai-sources--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-sources--overview.md)): Inline citation markers and the numbered list of sources they point to, with a preview card on hover, focus or first tap. - [Streaming text](https://demogar.github.io/molaui/?path=/docs/ai-streaming-text--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-streaming-text--overview.md)): A model’s answer arriving a token at a time, in the reading voice, without layout shift, and announced once when it ends. - [Token usage](https://demogar.github.io/molaui/?path=/docs/ai-token-usage--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-token-usage--overview.md)): What a run consumed: input, cached and output tokens, cost, and how full the context window is. - [Tool call](https://demogar.github.io/molaui/?path=/docs/ai-tool-call--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-tool-call--overview.md)): One tool invocation: the tool’s literal name, its arguments, the result or error, and an approval when a person must decide. ## Patterns - [Agent console](https://demogar.github.io/molaui/?path=/docs/ai-agent-console--overview) ([Markdown](https://demogar.github.io/molaui/md/ai-agent-console--overview.md)) - [Form example](https://demogar.github.io/molaui/?path=/docs/components-forms-form-example--overview) ([Markdown](https://demogar.github.io/molaui/md/components-forms-form-example--overview.md)) - [Agent hand-off](https://demogar.github.io/molaui/?path=/docs/patterns-agent-hand-off--overview) ([Markdown](https://demogar.github.io/molaui/md/patterns-agent-hand-off--overview.md)): An agent has done what it may and stopped at what it may not: the person approves its proposed action, or takes the task over and finishes it themselves. - [Confirmation](https://demogar.github.io/molaui/?path=/docs/patterns-confirmation--overview) ([Markdown](https://demogar.github.io/molaui/md/patterns-confirmation--overview.md)): A destructive action that cannot be undone and takes a round trip: ask first, show it working, and say plainly whether it happened. - [Empty states](https://demogar.github.io/molaui/?path=/docs/patterns-empty-states--overview) ([Markdown](https://demogar.github.io/molaui/md/patterns-empty-states--overview.md)): One screen, every way a list can have nothing to show: first run, no results, loading, error and no permission, each saying something different. - [Filtered table](https://demogar.github.io/molaui/?path=/docs/patterns-filtered-table--overview) ([Markdown](https://demogar.github.io/molaui/md/patterns-filtered-table--overview.md)): A table of many records narrowed by several filters at once, with bulk actions on a selection and each record opening in a drawer. - [List and detail](https://demogar.github.io/molaui/?path=/docs/patterns-list-and-detail--overview) ([Markdown](https://demogar.github.io/molaui/md/patterns-list-and-detail--overview.md)): Every item on the start side and the chosen one on the end side, collapsing to one pane at a time when its container is narrow. - [Settings page](https://demogar.github.io/molaui/?path=/docs/patterns-settings-page--overview) ([Markdown](https://demogar.github.io/molaui/md/patterns-settings-page--overview.md)): A long settings form saved as a whole, with errors on save, a guard on leaving with unsaved changes, and a danger zone outside the form.