# gntik-ui

> The product-agnostic design system of gntik-ai: React 19 + Tailwind CSS 4 components on Base UI, layouts, page blocks and page templates over one frozen token layer (green hue 145, Geist + Geist Mono, dark default + light + high-contrast themes). Products differ only by a brand preset (name + logo). 118 components, 12 layouts, 77 blocks, 61 templates.

Packages are published as `@gntik-ai/*` on npmjs.org: `@gntik-ai/tokens` (the brand), `@gntik-ai/ui` (components, layouts, ThemeProvider, presets), `@gntik-ai/blocks`, `@gntik-ai/templates` (pages, `ConsoleShell`), `@gntik-ai/chat`, `@gntik-ai/icons`, `@gntik-ai/charts`, `@gntik-ai/flow`, `@gntik-ai/editor`, and the `gntik-ui` CLI. Build pages from a template first, then layouts + blocks, then components. Styling uses token classes only: no hex or Tailwind palette colours, no gradients or glow, no `dark:` variants.

## Docs

- [AGENTS.md](https://github.com/gntik-ai/gntik-ui/blob/main/AGENTS.md): how to find, compose and add kit items, the brand rules and the gate commands
- [kit-registry.json](https://github.com/gntik-ai/gntik-ui/blob/main/kit-registry.json): machine-readable list of every installable item with files and dependencies
- [Release manifest](https://github.com/gntik-ai/gntik-ui/blob/main/packages/mcp/registry-manifest.json): shared package/registry item inventory, pinned versions and release baseline; the live registry follows main
- [INVENTORY.md](https://github.com/gntik-ai/gntik-ui/blob/main/INVENTORY.md): inventory of the catalog and the packages
- [Component contract](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/CONTRIBUTING.md): folder layout, docs, tests and style rules for a component
- [Brand tokens](https://github.com/gntik-ai/gntik-ui/blob/main/packages/tokens/src/brand.css): colour, typography, radii and shadows for the three themes
- [MCP server](https://github.com/gntik-ai/gntik-ui/blob/main/packages/mcp/README.md): list_kit, get_component, get_block, get_template, scaffold_page, scaffold_preset and validate_page

## Components

- [Button](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Button/Button.doc.ts): Triggers an action. Five variants (primary, secondary, soft, ghost, destructive), three sizes, icons and a loading state. (Actions, @gntik-ai/ui; id `button`)
- [CopyButton](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/CopyButton/CopyButton.doc.ts): Copies a string, or the result of a (possibly async) getter, to the clipboard. (Actions, @gntik-ai/ui; id `copy-button`)
- [DownloadButton](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/DownloadButton/DownloadButton.doc.ts): Saves required data (a string, Blob, or sync/async getter) as fileName. (Actions, @gntik-ai/ui; id `download-button`)
- [MessageFeedback](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/MessageFeedback/MessageFeedback.doc.ts): Actions for an assistant reply: copy, regenerate and thumbs up / down toggles (aria-pressed). (Actions, @gntik-ai/chat; id `message-feedback`)
- [SplitButton](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/SplitButton/SplitButton.doc.ts): A primary action joined to a menu of secondary actions. (Actions, @gntik-ai/ui; id `split-button`)
- [SuggestionChips](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/SuggestionChips/SuggestionChips.doc.ts): Prompt suggestions: a two-column grid of cards with descriptions for an empty conversation, or a row of pills for follow-ups after a reply. (Actions, @gntik-ai/chat; id `suggestion-chips`)
- [ToggleGroup](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/ToggleGroup/ToggleGroup.doc.ts): Toggle is a two-state (pressed) button; ToggleGroup sets Toggles side by side with shared state: a segmented control (single) or a toolbar of independent options (multiple). (Actions, @gntik-ai/ui; id `toggle-group`)
- [Toolbar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Toolbar/Toolbar.doc.ts): Action bar above tables and lists: search, filters and actions with a single Tab stop and arrow-key navigation. (Actions, @gntik-ai/ui; id `toolbar`)
- [Accordion](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Accordion/Accordion.doc.ts): A stack of collapsible sections separated by dividers, flush or inside a card. (Display, @gntik-ai/ui; id `accordion`)
- [AgentSurface](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/AgentSurface/AgentSurface.doc.ts): Opt-in, placement-neutral renderer for allow-listed agent content. (Display, @gntik-ai/chat; id `agent-surface`)
- [AttachmentList](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/Attachment/Attachment.doc.ts): Files attached to a message or waiting in the composer. (Display, @gntik-ai/chat; id `attachment`)
- [Avatar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Avatar/Avatar.doc.ts): Person or entity avatar: image with an initials (or icon) fallback, five sizes (xs–xl), round or rounded, tinted tones and an optional presence dot. (Display, @gntik-ai/ui; id `avatar`)
- [Badge](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Badge/Badge.doc.ts): Compact label for status, counts and categories. (Display, @gntik-ai/ui; id `badge`)
- [Blockquote](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Blockquote/Blockquote.doc.ts): Quoted content with its citation: a figure with the blockquote and a figcaption whose cite names the source (linked when `cite` is a URL). (Display, @gntik-ai/ui; id `blockquote`)
- [Carousel](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Carousel/Carousel.doc.ts): Scroll-snap media strip: one, two, three or auto-width slides per view, previous/next buttons, optional picker dots, arrow keys on the focused strip. (Display, @gntik-ai/ui; id `carousel`)
- [ChatMessage](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/ChatMessage/ChatMessage.doc.ts): g. a teammate: start-aligned outlined bubble with their name and avatar via `author` / `avatarSrc`), assistant, system and tool: avatar, author, timestamp, body and hover/focus actions (copy, retry, thumbs feedback). (Display, @gntik-ai/chat; id `chat-message`)
- [Citation](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/Citation/Citation.doc.ts): Numbered source references for grounded answers: an inline [n] marker that previews the source (title, host, snippet, link) on hover, focus + Enter or click, and CitationList, the numbered list of sources under a reply. (Display, @gntik-ai/chat; id `citation`)
- [CodeBlock](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/CodeBlock/CodeBlock.doc.ts): Read-only code panel with a filename / language header, a copy button ("Copied" feedback plus a polite live announcement), optional line numbers, highlighted lines, a soft-wrap toggle and a max height. (Display, @gntik-ai/ui; id `code-block`)
- [Collapsible](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Collapsible/Collapsible.doc.ts): A single show/hide section: an inline toggle ("Advanced settings") or a full-width row in the Accordion family. (Display, @gntik-ai/ui; id `collapsible`)
- [DiffViewer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/DiffViewer/DiffViewer.doc.ts): Compares two texts, or two JSON values pretty-printed with sorted keys, line by line (Myers diff, no dependencies). (Display, @gntik-ai/ui; id `diff-viewer`)
- [JsonViewer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/JsonViewer/JsonViewer.doc.ts): Collapsible JSON inspector built on TreeList: objects and arrays expand, values use contrast-safe type tokens, `search` highlights matches and expands their ancestors, `maxDepth` caps nesting, and a toolbar copies the selected node path or value. (Display, @gntik-ai/ui; id `json-viewer`)
- [KanbanBoard](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/KanbanBoard/KanbanBoard.doc.ts): Columns of cards you reorder within a column and move across columns by pointer drag or keyboard. (Display, @gntik-ai/ui; id `kanban-board`)
- [Kbd](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Kbd/Kbd.doc.ts): Keyboard key chip (<kbd>) for shortcuts and hints, in three sizes. (Display, @gntik-ai/ui; id `kbd`)
- [Markdown](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/Markdown/Markdown.doc.ts): Safe, token-styled Markdown with GFM, code copying and streaming fence repair. (Display, @gntik-ai/chat; id `markdown`)
- [OverflowList](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/OverflowList/OverflowList.doc.ts): Row of chips or avatars that renders items up to `max` (or to the available width with `responsive`, measured by ResizeObserver) and a "+N more" button that opens a Popover listing the rest. (Display, @gntik-ai/ui; id `overflow-list`)
- [Sparkline](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Sparkline/Sparkline.doc.ts): Inline trend in pure SVG (no chart library): line or bars, optional area fill and min / max / last markers, fixed width and height. (Display, @gntik-ai/ui; id `sparkline`)
- [StatusDot](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/StatusDot/StatusDot.doc.ts): State dot with an optional label and a soft pulse for live states (disabled under reduced motion). (Display, @gntik-ai/ui; id `status-dot`)
- [StatusTag](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/StatusTag/StatusTag.doc.ts): State pill with a dot (running, queued, paused, failed, draft…). (Display, @gntik-ai/ui; id `status-tag`)
- [Table](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Table/Table.doc.ts): Styled semantic table parts: Table, TableHeader, TableBody, TableFooter, TableRow (selected state), TableHead (optional sort button with aria-sort), TableCell and TableCaption. (Display, @gntik-ai/ui; id `table`)
- [Terminal](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Terminal/Terminal.doc.ts): Streamed command output (build, deploy, job logs). (Display, @gntik-ai/ui; id `terminal`)
- [Text](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Text/Text.doc.ts): Type roles on the brand scale. Text: body, label, supporting, caption, code and display, with tones (default, muted, primary, success, warning, destructive — contrast-safe *-text aliases). (Display, @gntik-ai/ui; id `text`)
- [Thumbnail](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Thumbnail/Thumbnail.doc.ts): File or image preview tile: image or file-type icon with extension tag, name and size caption, upload progress (progressbar + shimmer that holds still under reduced motion), error state with retry, and a remove button. (Display, @gntik-ai/ui; id `thumbnail`)
- [Timer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Timer/Timer.doc.ts): Elapsed time since a start, live while running ("1:02:05" or compact "2m 14s"), with paused and stopped states. (Display, @gntik-ai/ui; id `timer`)
- [Timestamp](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Timestamp/Timestamp.doc.ts): DateTimeFormat), localised with `locale`. (Display, @gntik-ai/ui; id `timestamp`)
- [Token](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Token/Token.doc.ts): Removable chip for active filters and recipient inputs: label with an optional muted prefix ("Region:"), a leading icon or avatar slot, tones (neutral, primary, success, warning, destructive), sizes sm and md, and an accessible "Remove {label}" button. (Display, @gntik-ai/ui; id `token`)
- [ToolCallCard](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/ToolCallCard/ToolCallCard.doc.ts): A tool invocation in an assistant turn: name, status (running, succeeded, failed), duration and a collapsible body with the arguments and the result or error as small collapsible JSON views. (Display, @gntik-ai/chat; id `tool-call-card`)
- [VirtualList](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/VirtualList/VirtualList.doc.ts): Windowed list for thousands of rows: only the visible rows plus `overscan` are mounted, with a fixed `itemHeight` or measured rows from an estimate. (Display, @gntik-ai/ui; id `virtual-list`)
- [Alert](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Alert/Alert.doc.ts): Inline banner in four tones (info, success, warning, destructive) with title, description, an action row and an optional dismiss button. (Feedback, @gntik-ai/ui; id `alert`)
- [EmptyState](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/EmptyState/EmptyState.doc.ts): Placeholder for an empty list, table or page: a neutral icon halo, a title, a short explanation and primary / secondary actions. (Feedback, @gntik-ai/ui; id `empty-state`)
- [LiveAnnouncer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/LiveAnnouncer/LiveAnnouncer.doc.ts): Screen-reader announcements for changes with no visible text: a polite (role="status") and an assertive aria-live region, plus `useAnnounce()` for any component below it. (Feedback, @gntik-ai/ui; id `live-announcer`)
- [Meter](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Meter/Meter.doc.ts): Usage meter for quotas and limits: label, value text, and a level set by thresholds (healthy → warning near the cap → destructive at or over it), with an optional note under the bar. (Feedback, @gntik-ai/ui; id `meter`)
- [Progress](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Progress/Progress.doc.ts): Progress bar for a running task: optional label and formatted value, four tones (primary, success, warning, destructive), three heights, and an indeterminate state (value null) that stops pulsing under reduced motion. (Feedback, @gntik-ai/ui; id `progress`)
- [Skeleton](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Skeleton/Skeleton.doc.ts): Loading placeholder in the shape of the content: block, text (one or more lines, the last shorter) or circle. (Feedback, @gntik-ai/ui; id `skeleton`)
- [Spinner](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Spinner/Spinner.doc.ts): Indeterminate loading indicator that inherits the current text colour. (Feedback, @gntik-ai/ui; id `spinner`)
- [Toast](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Toast/Toast.doc.ts): Short-lived notification stacked bottom-right. (Feedback, @gntik-ai/ui; id `toast`)
- [TypingIndicator](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/TypingIndicator/TypingIndicator.doc.ts): Three pulsing dots shown while a reply is being written, with the text "Assistant is typing" for screen readers (or visible with `showLabel`). (Feedback, @gntik-ai/chat; id `typing-indicator`)
- [Calendar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Calendar/Calendar.doc.ts): ) helper returns the locale first weekday (0–6, Monday fallback), matching scheduling blocks. (Forms, @gntik-ai/ui; id `calendar`)
- [ChatComposer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/ChatComposer/ChatComposer.doc.ts): g. a compact ModelPicker), a character counter near the limit, a disabled state, and a Stop button while a reply streams. (Forms, @gntik-ai/chat; id `chat-composer`)
- [Checkbox](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Checkbox/Checkbox.doc.ts): Checkbox with optional label and description, including the indeterminate state. (Forms, @gntik-ai/ui; id `checkbox`)
- [ChoiceCard](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/ChoiceCard/ChoiceCard.doc.ts): Cards as controls. ClickableCard: the whole card is one link or button (a stretched title, so there is a single focus target with a short name) with icon, description, meta and a chevron. (Forms, @gntik-ai/ui; id `choice-card`)
- [Combobox](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Combobox/Combobox.doc.ts): Searchable select: typing filters the list. (Forms, @gntik-ai/ui; id `combobox`)
- [DateField](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/DateField/DateField.doc.ts): Typed local date and date-time entry in Intl locale order. (Forms, @gntik-ai/ui; id `date-field`)
- [DatePicker](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/DatePicker/DatePicker.doc.ts): Date field with a focusable trigger ref: a read-only input with the Intl-formatted date that opens a Popover with a Calendar. (Forms, @gntik-ai/ui; id `date-picker`)
- [DateTimeRangePicker](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/DateTimeRangePicker/DateTimeRangePicker.doc.ts): Time range field for logs and metrics: quick presets (last 15 minutes, 1 hour, 24 hours, 7 days, 30 days, custom), a relative "Last N minutes/hours/days" mode and an absolute mode with a range Calendar plus start and end TimePickers, validated so the end is after the start. (Forms, @gntik-ai/ui; id `date-time-range-picker`)
- [Field](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Field/Field.doc.ts): Accessible form field scaffolding: Field, FieldLabel, FieldDescription, FieldError and FieldItem wire ids and aria-describedby for any kit control; Fieldset and FieldsetLegend group related fields under one name. (Forms, @gntik-ai/ui; id `field`)
- [Input](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Input/Input.doc.ts): Single-line text input in two sizes (sm, md) with optional leading/trailing icons and addons (prefixes, units, keyboard hints, icon buttons). (Forms, @gntik-ai/ui; id `input`)
- [KeyValueEditor](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/KeyValueEditor/KeyValueEditor.doc.ts): env". Controlled (`value` + `onChange`) or uncontrolled. (Forms, @gntik-ai/ui; id `key-value-editor`)
- [ListInput](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/ListInput/ListInput.doc.ts): Repeatable key/value rows for environment variables, headers or labels: add, remove and reorder (buttons or Alt+Arrow), paste `KEY=value` lines to bulk-add, per-row validation with duplicate-key detection, optional masked values with a reveal toggle. (Forms, @gntik-ai/ui; id `list-input`)
- [ModelPicker](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/ModelPicker/ModelPicker.doc.ts): Choose the model (and provider) for a conversation: options grouped by provider with a description, capability badges (vision, tools, reasoning, files, web, audio) and the context size; unavailable models stay listed, disabled, with the reason. (Forms, @gntik-ai/chat; id `model-picker`)
- [MultiSelect](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/MultiSelect/MultiSelect.doc.ts): Searchable multi-select: selected options as removable chips (extra ones collapse into "+N"), a "Select all" row, a clear button and rows with descriptions. (Forms, @gntik-ai/ui; id `multi-select`)
- [NumberInput](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/NumberInput/NumberInput.doc.ts): Numeric input with − / + steppers, a unit suffix, min/max/step clamping, locale formatting and an optional scrub label (drag to change). (Forms, @gntik-ai/ui; id `number-input`)
- [OtpInput](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/OtpInput/OtpInput.doc.ts): One-time / verification code input: 4–8 character boxes, numeric or alphanumeric, optional group separator. (Forms, @gntik-ai/ui; id `otp-input`)
- [PasswordInput](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/PasswordInput/PasswordInput.doc.ts): Password field on Input with a reveal toggle (aria-pressed) and an optional 4-segment strength meter. (Forms, @gntik-ai/ui; id `password-input`)
- [PeriodPicker](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/PeriodPicker/PeriodPicker.doc.ts): Whole ISO weeks, months, calendar quarters or years, single or range. (Forms, @gntik-ai/ui; id `period-picker`)
- [PermissionMatrix](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/PermissionMatrix/PermissionMatrix.doc.ts): Roles (columns) × permissions (rows grouped in sections) editor. (Forms, @gntik-ai/ui; id `permission-matrix`)
- [PowerSearch](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/PowerSearch/PowerSearch.doc.ts): Structured filter input: pick a field, an operator and a value from suggestions (or type `status=failed`, `cost>100`), add free text, and edit committed terms from the keyboard. (Forms, @gntik-ai/ui; id `power-search`)
- [QueryBuilder](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/QueryBuilder/QueryBuilder.doc.ts): Visual filter editor: nested AND/OR groups of field / operator / value conditions. (Forms, @gntik-ai/ui; id `query-builder`)
- [RadioGroup](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/RadioGroup/RadioGroup.doc.ts): Single choice from a short list. RadioGroup + Radio with optional label, description and trailing content per option, in plain, list (bordered rows) and card variants. (Forms, @gntik-ai/ui; id `radio-group`)
- [ScheduleInput](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/ScheduleInput/ScheduleInput.doc.ts): Cron schedule editor: presets (hourly at minute, daily at, weekly on days at, monthly on day at) that write a 5-field cron expression, plus a raw cron field (*, lists, ranges, steps, names, macros) with validation and an error message, a plain-language summary ("Every weekday at 09:00") and the next runs in a time zone. (Forms, @gntik-ai/ui; id `schedule-input`)
- [SecretField](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/SecretField/SecretField.doc.ts): A secret value (API key, token, connection string) on Input: masked by default (fixed-length mask, optional visible prefix/suffix), a reveal toggle (aria-pressed), a CopyButton that copies the real value and announces it, an optional Rotate action behind an AlertDialog confirmation, and optional created / last-used meta. (Forms, @gntik-ai/ui; id `secret-field`)
- [Select](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Select/Select.doc.ts): Pick one value from a short list in a popup, with SimpleSelect ref and triggerRef aliases for its trigger button. (Forms, @gntik-ai/ui; id `select`)
- [Slider](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Slider/Slider.doc.ts): Pick a number or a range on a track. Single or range thumbs (one per value), optional visible label and live value readout, two sizes, works inside Field and Form. (Forms, @gntik-ai/ui; id `slider`)
- [Switch](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Switch/Switch.doc.ts): On/off setting that applies immediately. (Forms, @gntik-ai/ui; id `switch`)
- [Textarea](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Textarea/Textarea.doc.ts): Multi-line text input in two sizes, with optional CSS autosize (field-sizing: content) and vertical resize. (Forms, @gntik-ai/ui; id `textarea`)
- [TimePicker](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/TimePicker/TimePicker.doc.ts): Accessible time field with a ref to its hours segment: hour and minute spinbutton segments, optional seconds, a 12-hour clock with AM/PM by locale or prop, minute step, min/max validation, controlled or uncontrolled (`"HH:mm"` strings). (Forms, @gntik-ai/ui; id `time-picker`)
- [TokenInput](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/TokenInput/TokenInput.doc.ts): Free-entry chips for emails, labels or hosts: Enter, Tab or a separator commits, pasted lists are split, `validate` marks bad entries as invalid chips, `maxItems` caps the list. (Forms, @gntik-ai/ui; id `token-input`)
- [TransferList](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/TransferList/TransferList.doc.ts): Two lists, available and selected, for picking and ordering a subset (columns, scopes, members): search each side, check several items, move them with the middle buttons, Enter or a double click, and reorder the selected side. (Forms, @gntik-ai/ui; id `transfer-list`)
- [AspectRatio](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/AspectRatio/AspectRatio.doc.ts): A box locked to a width / height ratio (16:9 by default) for images, video and embeds; direct children fill it (object-cover). (Layout, @gntik-ai/ui; id `aspect-ratio`)
- [Card](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Card/Card.doc.ts): The base content surface: border, token radius, generous padding and a flat shadow. (Layout, @gntik-ai/ui; id `card`)
- [ChatDemo](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/ChatDemo/ChatDemo.doc.ts): Reference composition of the chat pack: suggestions in the empty state, attachments (pick, paste or drop), a compact ModelPicker in the composer, a tool call, a streamed markdown reply with sources (TypingIndicator, caret), Stop, MessageFeedback (copy, regenerate, thumbs with reasons), and a resizable details panel. (Layout, @gntik-ai/chat; id `chat-demo`)
- [ChatLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/chat/src/ChatLayout/ChatLayout.doc.ts): Full-height chat frame: scrollable thread with auto-scroll that respects scrolling up, a jump-to-latest button, a composer pinned below and an optional resizable side panel (artifact or details). (Layout, @gntik-ai/chat; id `chat-layout`)
- [Grid](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Grid/Grid.doc.ts): Responsive CSS grid. `cols` takes 1–12 or a per-breakpoint object ({ base, sm, md, lg, xl }) mapped to static classes; `minChildWidth` auto-fills as many columns as fit. (Layout, @gntik-ai/ui; id `grid`)
- [Resizable](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Resizable/Resizable.doc.ts): Split layouts with draggable dividers: ResizablePanelGroup (horizontal or vertical), ResizablePanel (default / min / max size in %, collapsible) and ResizeHandle (optional grip). (Layout, @gntik-ai/ui; id `resizable`)
- [ScrollArea](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/ScrollArea/ScrollArea.doc.ts): Native scroll container with thin token-styled scrollbars that fade in on hover and while scrolling. (Layout, @gntik-ai/ui; id `scroll-area`)
- [Section](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Section/Section.doc.ts): A painted content region (<section>, named by its title). (Layout, @gntik-ai/ui; id `section`)
- [Separator](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Separator/Separator.doc.ts): Thin rule between content. Horizontal or vertical, default / subtle / strong weight, and an optional label (plain text, mono kicker or pill) placed at the start, centre or end of a horizontal line. (Layout, @gntik-ai/ui; id `separator`)
- [Stack](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Stack/Stack.doc.ts): Flex layout primitives: Stack (any direction), HStack, VStack and Center. (Layout, @gntik-ai/ui; id `stack`)
- [VisuallyHidden](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/VisuallyHidden/VisuallyHidden.doc.ts): Screen-reader-only content (sr-only), with a `focusable` variant that appears while focused. (Layout, @gntik-ai/ui; id `visually-hidden`)
- [Breadcrumbs](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Breadcrumbs/Breadcrumbs.doc.ts): Location trail in a nav landmark: chevron or slash separators, an optional icon-only root, and the current page marked with aria-current. (Navigation, @gntik-ai/ui; id `breadcrumbs`)
- [CursorPagination](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/CursorPagination/CursorPagination.doc.ts): See the cursor-pager-footer block example for data-table paginated={false} with a consumer-owned token stack. (Navigation, @gntik-ai/ui; id `cursor-pagination`)
- [Link](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Link/Link.doc.ts): 1); standalone links (nav, cards, actions) pass underline="hover" or "none". (Navigation, @gntik-ai/ui; id `link`)
- [MegaMenu](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/MegaMenu/MegaMenu.doc.ts): Top navigation with wide panels: items with sections open a panel of link columns with descriptions and optional featured content; plain items are links. (Navigation, @gntik-ai/ui; id `mega-menu`)
- [MobileNav](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/MobileNav/MobileNav.doc.ts): Small-screen navigation: a menu icon button opens a Drawer sheet (chrome surface) with the NavList groups and an optional footer slot. (Navigation, @gntik-ai/ui; id `mobile-nav`)
- [NavList](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/NavList/NavList.doc.ts): Vertical navigation for sidebars and settings pages: labelled (optionally foldable) groups of items with icon, label and badge, nested collapsible sub-items, and aria-current="page" on the active item with the brand accent bar. (Navigation, @gntik-ai/ui; id `nav-list`)
- [Pagination](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Pagination/Pagination.doc.ts): Moves through pages of results. Pagination is numbered (first, last, siblings of the current page and ellipses, constant width) and page-size agnostic: page, pageCount, onPageChange. (Navigation, @gntik-ai/ui; id `pagination`)
- [Stepper](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Stepper/Stepper.doc.ts): Wizard progress as an ordered list of steps (complete · current · upcoming · error), horizontal or vertical, with optional descriptions. (Navigation, @gntik-ai/ui; id `stepper`)
- [Tabs](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Tabs/Tabs.doc.ts): Switches between views of the same block without leaving the page. (Navigation, @gntik-ai/ui; id `tabs`)
- [TreeList](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/TreeList/TreeList.doc.ts): Hierarchical list on the WAI-ARIA tree pattern (role tree / treeitem / group, aria-expanded, aria-level): roving focus, arrow keys, Home/End and typeahead, single or multiple selection, icons per node and children loaded on first expand with loading and error states. (Navigation, @gntik-ai/ui; id `tree-list`)
- [UserMenu](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/UserMenu/UserMenu.doc.ts): Account menu for topbars and sidebar footers: avatar trigger (optionally with the name), or showEmail for a full-width name/email trigger in a sidebar footer. (Navigation, @gntik-ai/ui; id `user-menu`)
- [WorkspaceSwitcher](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/WorkspaceSwitcher/WorkspaceSwitcher.doc.ts): Two-line workspace picker (logo, name, plan/role meta) for the topbar or sidebar header. (Navigation, @gntik-ai/ui; id `workspace-switcher`)
- [AlertDialog](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/AlertDialog/AlertDialog.doc.ts): Confirmation that interrupts the user and demands a decision: tone icon (destructive, warning, info), title, consequence and Cancel + confirm actions. (Overlays, @gntik-ai/ui; id `alert-dialog`)
- [BottomSheet](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/BottomSheet/BottomSheet.doc.ts): Mobile sheet that rests at snap points (a peek height and expanded by default): drag or swipe it between heights or down to close, or use the handle from the keyboard. (Overlays, @gntik-ai/ui; id `bottom-sheet`)
- [CommandPalette](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/CommandPalette/CommandPalette.doc.ts): ⌘K / Ctrl+K command palette: a modal dialog with a search input over grouped commands (icon, label, description, shortcut keys). (Overlays, @gntik-ai/ui; id `command-palette`)
- [ContextMenu](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/ContextMenu/ContextMenu.doc.ts): Menu that opens at the pointer on right click or long press, and from the keyboard with Shift+F10 or the ContextMenu key on the focused area. (Overlays, @gntik-ai/ui; id `context-menu`)
- [Dialog](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Dialog/Dialog.doc.ts): Modal window for focused tasks: forms, details, confirmations. (Overlays, @gntik-ai/ui; id `dialog`)
- [Drawer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Drawer/Drawer.doc.ts): Panel that slides in from the right, left or bottom edge for details, edit forms and navigation. (Overlays, @gntik-ai/ui; id `drawer`)
- [HoverCard](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/HoverCard/HoverCard.doc.ts): Rich preview of a link destination — a member, project or resource — shown on hover or keyboard focus after a short delay. (Overlays, @gntik-ai/ui; id `hover-card`)
- [InfoTip](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/InfoTip/InfoTip.doc.ts): Inline "i" help button that opens a small popover with an explanation, next to a form label, a stat or a table header. (Overlays, @gntik-ai/ui; id `info-tip`)
- [Lightbox](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Lightbox/Lightbox.doc.ts): Full-screen image and video viewer: previous / next, zoom (buttons, keys or double click) with a scrollable stage, captions, a thumbnail strip and an announced position. (Overlays, @gntik-ai/ui; id `lightbox`)
- [Menu](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Menu/Menu.doc.ts): Dropdown list of actions or options: items with icon, shortcut hint and destructive tone, checkbox and radio items, labelled groups, separators and submenus. (Overlays, @gntik-ai/ui; id `menu`)
- [NotificationsPopover](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/NotificationsPopover/NotificationsPopover.doc.ts): Bell icon button with an unread-count badge that opens a popover of notifications: title, body, relative time and a tone dot for unread items, a mark-all-read action, an optional footer (View all) and an empty state. (Overlays, @gntik-ai/ui; id `notifications-popover`)
- [Popover](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Popover/Popover.doc.ts): Non-modal floating panel anchored to a trigger, for short forms, details and filters. (Overlays, @gntik-ai/ui; id `popover`)
- [Tooltip](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Tooltip/Tooltip.doc.ts): Short visual hint that appears on hover or keyboard focus. (Overlays, @gntik-ai/ui; id `tooltip`)
- [Tour](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/Tour/Tour.doc.ts): Onboarding steps anchored to elements (selector, ref or getter): a non-modal popover with a step counter and Back / Next / Skip, positioned at each target and outlined with the focus ring (no overlay, no glow). (Overlays, @gntik-ai/ui; id `tour`)
- [CSPProvider](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/csp/CSPProvider.doc.ts): CSPProvider passes the app server nonce to Base UI and kit inline elements; useCSP exposes the settings for custom elements. (Theme, @gntik-ai/ui; id `csp-provider`)
- [ThemeProvider](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/theme/Logo.tsx): ThemeProvider (persisted page mode, optional forcedMode), ThemeScope (nested themes and themed portals), themeScript, Logo and brand presets. (Theme, @gntik-ai/ui; id `theme`)
- [ThemeSwitcher](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/components/ThemeSwitcher/ThemeSwitcher.doc.ts): Theme control bound to useTheme(): a segmented Light · Dark · High contrast · System control (labels or icon-only), and ThemeCycleButton, a compact icon button that cycles modes for toolbars. (Theme, @gntik-ai/ui; id `theme-switcher`)
- [UI utilities](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/i18n/I18nProvider.tsx): cn() class merging and tv() variants helpers used by every component. (Utilities, @gntik-ai/ui; id `ui-utils`)

## Layouts

- [AuthLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/AuthLayout/AuthLayout.doc.ts): Sign-in, sign-up and reset shell in three variants: `split` (brand panel on the chrome surface + form; the panel hides below `lg` and the logo moves above the form), `card` (form centred in a card) and `full-bleed` (form straight on the chrome surface). (Layout, @gntik-ai/ui; id `auth-layout`)
- [CanvasLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/CanvasLayout/CanvasLayout.doc.ts): Editor shell for a full-bleed canvas (flow editor, code editor, map): top bar · left palette · canvas with a floating toolbar · right inspector · collapsible bottom console. (Layout, @gntik-ai/ui; id `canvas-layout`)
- [DocsLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/DocsLayout/DocsLayout.doc.ts): Documentation shell: top bar · left nav (a NavList) · article · right table of contents. (Layout, @gntik-ai/ui; id `docs-layout`)
- [InspectorLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/InspectorLayout/InspectorLayout.doc.ts): Main area with a pinnable right panel (properties, details, comments). (Layout, @gntik-ai/ui; id `inspector-layout`)
- [Page](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/Page/Page.doc.ts): The page inside any shell: a header (a custom slot such as the blocks PageHeader, or a simple h1 + description + actions), the body, and an optional sticky action bar (a labelled region) pinned to the bottom of the scroll container. (Layout, @gntik-ai/ui; id `page`)
- [PrintLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/PrintLayout/PrintLayout.doc.ts): Printable document frame for invoices, reports and receipts: an A4 or Letter page (`size`) with margins (`margin`), header and footer slots and a `PageBreak` helper. (Layout, @gntik-ai/ui; id `print-layout`)
- [SettingsLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/SettingsLayout/SettingsLayout.doc.ts): Settings shell: section nav (NavList groups) on the left · a content column with the page title and form sections · a sticky save bar slot (Discard · Save changes). (Layout, @gntik-ai/ui; id `settings-layout`)
- [SidebarLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/SidebarLayout/SidebarLayout.doc.ts): Application shell: a collapsible sidebar (expanded, 64px icon rail or off-canvas) with header, body and footer slots, a topbar (workspace switcher, breadcrumb, ⌘K, notifications, theme, user menu) and the main region. (Layout, @gntik-ai/ui; id `sidebar-layout`)
- [SplitLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/SplitLayout/SplitLayout.doc.ts): Master–detail layout: a resizable list pane beside a detail pane, built on ResizablePanelGroup (sizes can persist with autoSaveId). (Layout, @gntik-ai/ui; id `split-layout`)
- [StackedLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/StackedLayout/StackedLayout.doc.ts): Top-navigation shell: a chrome navbar (brand · primary links or a custom `nav` slot such as a MegaMenu · actions), an optional tab sub-nav row, an optional page-header band and centered content (narrow 640 · default 1120 · wide 1440 · full) with an optional footer. (Layout, @gntik-ai/ui; id `stacked-layout`)
- [StatusLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/StatusLayout/StatusLayout.doc.ts): Full-page status for 404, 403, 500 and maintenance: a centred message with a `heading` slot replacing `title` for exactly one page h1; `titleRef` on the built-in h1 enables focus() with tabIndex=-1 outside the Tab order. (Layout, @gntik-ai/ui; id `status-layout`)
- [WizardLayout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/ui/src/layouts/WizardLayout/WizardLayout.doc.ts): Focus-mode shell: title and Exit, Stepper, step body, Back / Next and Finish. (Layout, @gntik-ai/ui; id `wizard-layout`)

## Blocks

- [Assistant card grid](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/ai/AssistantCardGrid/block.meta.ts): Responsive grid of clickable assistant cards: name, description, model and runtime, status and last update, with a create action. (ai, @gntik-ai/blocks; id `assistant-card-grid`)
- [Evaluation scorecard](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/ai/EvaluationScorecard/block.meta.ts): Evaluation run as a datasets × metrics table: pass rate, scores against thresholds, deltas vs the baseline and flagged regressions, with a regressions-only filter. (ai, @gntik-ai/blocks; id `evaluation-scorecard`)
- [Model keys list](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/ai/ModelKeysList/block.meta.ts): Model provider keys with masked secrets and status: test the connection (spinner while it runs, result announced) and revoke behind a confirmation dialog. (ai, @gntik-ai/blocks; id `model-keys-list`)
- [Prompt editor](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/ai/PromptEditor/block.meta.ts): System and user prompt editors that detect {{variables}} as chips with value inputs, plus temperature and max-token parameters and a Run action. (ai, @gntik-ai/blocks; id `prompt-editor`)
- [Token cost card](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/ai/TokenCostCard/block.meta.ts): Input and output token counts, their split, total cost and a budget meter, with a period switch. (ai, @gntik-ai/blocks; id `token-cost-card`)
- [Trace waterfall](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/ai/TraceWaterfall/block.meta.ts): Span tree of a trace with indentation and duration bars positioned on a shared time axis; spans expand and collapse; the list is one tab stop with arrow-key navigation (←/→ collapse and expand), selection is controlled or uncontrolled, the details pane is optional or custom, and running spans show an in-progress bar (pulse stops under reduced motion) with a visible "running" label. (ai, @gntik-ai/blocks; id `trace-waterfall`)
- [Forgot password form](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/auth/ForgotPasswordForm/block.meta.ts): Email (default) or username-or-email password recovery; onSubmit receives the trimmed identifier. (auth, @gntik-ai/blocks; id `forgot-password-form`)
- [MFA challenge](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/auth/MfaChallenge/block.meta.ts): Second-factor step with a one-time code (auto-submit), a backup-code mode and resend with a countdown. (auth, @gntik-ai/blocks; id `mfa-challenge`)
- [Reset password form](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/auth/ResetPasswordForm/block.meta.ts): New password with a strength meter and a confirmation field with mismatch validation, then a success state. (auth, @gntik-ai/blocks; id `reset-password-form`)
- [Sign-in form](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/auth/SignInForm/block.meta.ts): Email (default) or text identifier and password sign-in. (auth, @gntik-ai/blocks; id `sign-in-form`)
- [Sign-up form](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/auth/SignUpForm/block.meta.ts): fields), a password strength meter and required consent (terms=false opts out). (auth, @gntik-ai/blocks; id `sign-up-form`)
- [SSO buttons](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/auth/SsoButtons/block.meta.ts): Neutral "Continue with …" provider buttons with lucide icons and a per-provider loading state. (auth, @gntik-ai/blocks; id `sso-buttons`)
- [Cost breakdown](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/billing/CostBreakdown/block.meta.ts): Cost composition: a donut with the total in the hole and the categories ranked by amount with share bars, in categorical (non-severity) colours. (billing, @gntik-ai/blocks; id `cost-breakdown`)
- [Invoice table](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/billing/InvoiceTable/block.meta.ts): Invoice history table with number, date, amount, a status badge (paid, due, overdue, void) and a per-row PDF download. (billing, @gntik-ai/blocks; id `invoice-table`)
- [Payment method card](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/billing/PaymentMethodCard/block.meta.ts): The card on file as text (brand, last four digits, expiry, holder) with default/expiry badges and update/remove actions; no card artwork. (billing, @gntik-ai/blocks; id `payment-method-card`)
- [Plan card](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/billing/PlanCard/block.meta.ts): Default billing header retains sample plan, Active status fallback, required monthly price and renewal, monthly/annual per-month pricing and built-in Manage/Upgrade actions. (billing, @gntik-ai/blocks; id `plan-card`)
- [Plan definition card](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/billing/PlanDefinitionCard/block.meta.ts): Administrative plan definition without billing fields: name, slug, optional description, labelled draft/active/deprecated/archived status, enabled/disabled capabilities, quotas, assigned tenants and formatted update date. (billing, @gntik-ai/blocks; id `plan-definition-card`)
- [Quota meters](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/billing/QuotaMeters/block.meta.ts): Plan quotas as usage meters with used/limit labels, amber/red thresholds, overage notes and a current/projected toggle. (billing, @gntik-ai/blocks; id `quota-meters`)
- [Spend vs budget](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/billing/SpendVsBudget/block.meta.ts): Cumulative spend line with the end-of-period forecast and a flat budget line, a summary row and a within/over budget status. (billing, @gntik-ai/blocks; id `spend-vs-budget`)
- [Code panel](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/builders/CodePanel/block.meta.ts): Multi-file code panel with optional readOnly, owned line markers, onValidityChange and onMonacoReady, merging every Monaco marker owner into Problems; the lazy loader example injects inline YAML schemas and same-origin yaml workers under CSP. (builders, @gntik-ai/blocks; id `code-panel`)
- [Flow builder](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/builders/FlowBuilder/block.meta.ts): FlowGraph<Kind> is {nodes,edges}; FlowGraphChange names the edit type and affected nodeIds/edgeIds. (builders, @gntik-ai/blocks; id `flow-builder`)
- [Log viewer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/builders/LogViewer/block.meta.ts): Windowed log stream (role="log"): level filter, search with highlighted matches, follow-tail and per-line copy. (builders, @gntik-ai/blocks; id `log-viewer`)
- [Activity feed](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/data-display/ActivityFeed/block.meta.ts): Who did what, when: actor avatar, action, target and Timestamp, grouped by day (Today, Yesterday, date), with optional Load more. (data-display, @gntik-ai/blocks; id `activity-feed`)
- [Chart card](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/data-display/ChartCard/block.meta.ts): A Card with chart and legend: default 7d/30d/90d or custom ranges via ranges, controlled range/onRangeChange, and showRangeToggle={false} when a toolbar owns the range (pass its window as range). (data-display, @gntik-ai/blocks; id `chart-card`)
- [Comment thread](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/data-display/CommentThread/block.meta.ts): Plain-text comments with avatar, author and Timestamp, plus a reply composer (Textarea + Button, ⌘/Ctrl+Enter posts). (data-display, @gntik-ai/blocks; id `comment-thread`)
- [Description list card](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/data-display/DescriptionListCard/block.meta.ts): Key–value detail card with mono, status and rich values, copy-to-clipboard buttons and an Edit action. (data-display, @gntik-ai/blocks; id `description-list-card`)
- [KPI row](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/data-display/KpiRow/block.meta.ts): Three to five stat tiles: label, value, a delta whose arrow and colour are independent, and an optional sparkline. (data-display, @gntik-ai/blocks; id `kpi-row`)
- [Resource card grid](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/data-display/ResourceCardGrid/block.meta.ts): Responsive grid of resource cards with icon or avatar, name, status, meta figures and a row-actions menu. (data-display, @gntik-ai/blocks; id `resource-card-grid`)
- [Stat card](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/data-display/StatCard/block.meta.ts): One rich stat: icon tile, value and delta that recalculate per range (7d/30d/90d), a trend chart and a footer action. (data-display, @gntik-ai/blocks; id `stat-card`)
- [Status timeline](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/data-display/StatusTimeline/block.meta.ts): Vertical timeline of state changes with a StatusDot per state, details, actor and Timestamp; collapses older events and renders an accessible empty state for an explicit empty events array, with a localizable emptyLabel. (data-display, @gntik-ai/blocks; id `status-timeline`)
- [Confirm destructive](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/feedback/ConfirmDestructive/block.meta.ts): AlertDialog for irreversible actions with exact typed-name and optional canConfirm gating, extra form fields, typed failure states, guarded retry and focus return. (feedback, @gntik-ai/blocks; id `confirm-destructive`)
- [Empty states](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/feedback/EmptyStates/block.meta.ts): Four canonical empty states: first run (with checklist), no results (clear filters/search), no access (request access) and not found (optional action). (feedback, @gntik-ai/blocks; id `empty-states`)
- [Error panel](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/feedback/ErrorPanel/block.meta.ts): Error summary with status code, copyable request id, retry with loading state and a technical-details disclosure. (feedback, @gntik-ai/blocks; id `error-panel`)
- [Inline callout](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/feedback/InlineCallout/block.meta.ts): Alert-based in-content callout with a tone, title, body, action buttons or links and optional dismiss. (feedback, @gntik-ai/blocks; id `inline-callout`)
- [Skeletons](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/feedback/Skeletons/block.meta.ts): Loading placeholders for a whole page, a table and a list; each announces loading once via role="status". (feedback, @gntik-ai/blocks; id `skeletons`)
- [System banner](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/feedback/SystemBanner/block.meta.ts): Full-width, dismissible banner for maintenance windows, incidents and system-wide notices. (feedback, @gntik-ai/blocks; id `system-banner`)
- [Create API key dialog](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/CreateApiKeyDialog/block.meta.ts): Two-step dialog: name, scopes and expiry, then the secret shown once in a copyable CodeBlock with a warning. (forms, @gntik-ai/blocks; id `create-api-key-dialog`)
- [Credential disclosure dialog](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/CredentialDisclosureDialog/block.meta.ts): Controlled disclosure for an existing credential. (forms, @gntik-ai/blocks; id `credential-disclosure-dialog`)
- [Danger zone](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/DangerZone/block.meta.ts): Bordered destructive section whose actions open an alert dialog that can require typing the resource name. (forms, @gntik-ai/blocks; id `danger-zone`)
- [Date range filter](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/DateRangeFilter/block.meta.ts): Compact date range picker for toolbars: small trigger with short dates, presets and a clear button. (forms, @gntik-ai/blocks; id `date-range-filter`)
- [Dialog wizard](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/DialogWizard/block.meta.ts): Modal variant of create-wizard for create flows over their parent page, without a route change. (forms, @gntik-ai/blocks; id `dialog-wizard`)
- [File upload panel](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/FileUploadPanel/block.meta.ts): Drag-and-drop zone with a Browse button, type and size validation, and a file list with progress, retry and remove. (forms, @gntik-ai/blocks; id `file-upload-panel`)
- [Form section](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/FormSection/block.meta.ts): Two-column settings section: title and help on the left, fields on the right; stacks on small screens. (forms, @gntik-ai/blocks; id `form-section`)
- [Invite members dialog](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/InviteMembersDialog/block.meta.ts): Dialog to invite people by email (validated chips) with a role and an optional message; submits with a loading state. (forms, @gntik-ai/blocks; id `invite-members-dialog`)
- [Settings row](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/SettingsRow/block.meta.ts): A setting with its label and description on the left and a control (Switch by default) on the right. (forms, @gntik-ai/blocks; id `settings-row`)
- [Validation summary](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/forms/ValidationSummary/block.meta.ts): Error summary that lists every problem with a link to its field and takes focus after a failed submit. (forms, @gntik-ai/blocks; id `validation-summary`)
- [Comparison table](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/marketing/ComparisonTable/block.meta.ts): Plans or options as columns and feature rows grouped by section (one tbody per section with a rowgroup header). (marketing, @gntik-ai/blocks; id `comparison-table`)
- [FAQ](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/marketing/Faq/block.meta.ts): Frequently asked questions in an accordion with a heading block, stacked or split layout, single or multiple open items. (marketing, @gntik-ai/blocks; id `faq`)
- [Feature grid](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/marketing/FeatureGrid/block.meta.ts): Features section: eyebrow, title and description over a responsive grid of icon tile, title and description. (marketing, @gntik-ai/blocks; id `feature-grid`)
- [Hero](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/marketing/Hero/block.meta.ts): Landing hero in centered or split layout: eyebrow badge, title, description, primary/secondary calls to action and a screenshot slot with a neutral placeholder. (marketing, @gntik-ai/blocks; id `hero`)
- [Pricing table](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/marketing/PricingTable/block.meta.ts): Pricing tiers with a monthly/annual toggle, a highlighted tier (primary border, no fill), price per cycle, CTA and feature checklist. (marketing, @gntik-ai/blocks; id `pricing-table`)
- [Bulk action bar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/page-chrome/BulkActionBar/block.meta.ts): Toolbar that appears while table rows are selected: selection count, bulk actions and clear selection. (page-chrome, @gntik-ai/blocks; id `bulk-action-bar`)
- [Page header](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/page-chrome/PageHeader/block.meta.ts): Screen header with breadcrumb, title and status, description, meta row, actions that fold into a MoreMenu on small screens, and optional navigation tabs. (page-chrome, @gntik-ai/blocks; id `page-header`)
- [Page toolbar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/page-chrome/PageToolbar/block.meta.ts): Toolbar above a list or table: search, a filters slot, a view toggle and the primary action, with roving focus. (page-chrome, @gntik-ai/blocks; id `page-toolbar`)
- [Section header](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/page-chrome/SectionHeader/block.meta.ts): Heading for a section within a page: title with optional count, description and small actions. (page-chrome, @gntik-ai/blocks; id `section-header`)
- [Sticky action bar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/page-chrome/StickyActionBar/block.meta.ts): Sticky bottom bar for long forms with an unsaved-changes status, Discard and Save (with saving state). (page-chrome, @gntik-ai/blocks; id `sticky-action-bar`)
- [Agenda list](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/scheduling/AgendaList/block.meta.ts): Upcoming scheduled work grouped by day (Today/Tomorrow labels), each row with a kind tile, locale-formatted time range, location and kind badge; empty state included. (scheduling, @gntik-ai/blocks; id `agenda-list`)
- [Month calendar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/scheduling/MonthCalendar/block.meta.ts): Locale-first month grid of scheduled work with per-day event lines, today/selected states, month navigation and full grid keyboard support. (scheduling, @gntik-ai/blocks; id `month-calendar`)
- [Time slot picker](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/scheduling/TimeSlotPicker/block.meta.ts): Grid of selectable time slots with native radio semantics (arrow keys, form name), taken slots struck through and disabled, controlled or uncontrolled. (scheduling, @gntik-ai/blocks; id `time-slot-picker`)
- [Week calendar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/scheduling/WeekCalendar/block.meta.ts): Locale-first seven-day time grid with positioned events (overlaps side by side), a now line, week navigation and optional clickable events. (scheduling, @gntik-ai/blocks; id `week-calendar`)
- [App sidebar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/shell/AppSidebar/block.meta.ts): Application sidebar: workspace switcher (or logo) header, NavList body with icon-rail support, and a footer with plan usage, help link and user menu. (shell, @gntik-ai/blocks; id `app-sidebar`)
- [App topbar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/shell/AppTopbar/block.meta.ts): Topbar contents for the application shell: breadcrumb and environment chip, ⌘K global search, notifications popover, theme control and user menu. (shell, @gntik-ai/blocks; id `app-topbar`)
- [Environment badge](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/shell/EnvironmentBadge/block.meta.ts): Environment + region chip ("production · eu-west") for the topbar or a page header; tone follows the environment. (shell, @gntik-ai/blocks; id `environment-badge`)
- [Global search](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/shell/GlobalSearch/block.meta.ts): ⌘K search button opening a CommandPalette pre-wired with recent items and grouped results: pages, records and actions. (shell, @gntik-ai/blocks; id `global-search`)
- [Cursor pager footer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/tables/CursorPagerFooter/block.meta.ts): Responsive stateless cursor-pagination footer for data-table paginated={false}. (tables, @gntik-ai/blocks; id `cursor-pager-footer`)
- [Data table](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/tables/DataTable/block.meta.ts): Generic typed table: sortable headers with aria-sort, row selection with select-all and indeterminate by default (selectionMode="multiple"), selectionMode="none" to hide selection, column visibility menu, density toggle, row actions, loading and empty states, client-side sort and pagination, optional row groups (groupBy) with rowgroup header rows, counts, keyboard-accessible collapse buttons and group selection; column resize (pointer drag or a focusable role="separator" handle with arrow keys, min/max widths, controlled columnWidths), column pinning to either edge with sticky cells (column menu or pinnedColumns), row virtualization for large datasets (aria-rowcount/aria-rowindex, works with selection and grouping), inline cell editing (text, number and select editors; Enter/F2 to edit, Enter/Tab to commit, Escape to cancel, onCellEdit can reject with an inline error) and saved views (filters, sort, visible columns, widths, pinning and grouping) with a view switcher to save as, rename, delete and reset. (tables, @gntik-ai/blocks; id `data-table`)
- [Filter bar](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/tables/FilterBar/block.meta.ts): Search Input, saved views Select, an Add filter Menu with multi-select per field, removable filter chips and Clear all. (tables, @gntik-ai/blocks; id `filter-bar`)
- [Inline edit row](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/tables/InlineEditRow/block.meta.ts): A table row that switches into edit mode with inputs, Save and Cancel; Enter saves, Escape cancels and focus returns to Edit. (tables, @gntik-ai/blocks; id `inline-edit-row`)
- [Load more footer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/tables/LoadMoreFooter/block.meta.ts): A load more button and loaded-count summary for appended lists without a total or page count. (tables, @gntik-ai/blocks; id `load-more-footer`)
- [Pagination footer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/tables/PaginationFooter/block.meta.ts): Table footer with a rows-per-page Select, a "1–10 of 97" summary and numbered Pagination; controlled or uncontrolled. (tables, @gntik-ai/blocks; id `pagination-footer`)
- [Subordinate list](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/tables/SubordinateList/block.meta.ts): Read-only list section inside a resource-form host, composing section-header, data-table, pagination-footer, empty-states, skeletons and error-panel. (tables, @gntik-ai/blocks; id `subordinate-list`)
- [Truncated collection footer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/tables/TruncatedCollectionFooter/block.meta.ts): Presentation-only summary of a loaded first cursor page without a total or pager. (tables, @gntik-ai/blocks; id `truncated-collection-footer`)
- [Members table](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/team/MembersTable/block.meta.ts): Workspace members with avatar, email, an inline role select, last activity and a row menu to remove. (team, @gntik-ai/blocks; id `members-table`)
- [Notification matrix](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/team/NotificationMatrix/block.meta.ts): Event × channel table of checkboxes with column and row toggles (mixed state) and always-on cells. (team, @gntik-ai/blocks; id `notification-matrix`)
- [Pending invitations](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/team/PendingInvitations/block.meta.ts): List of pending invitations with role, sender, age and expiry, and resend / revoke actions. (team, @gntik-ai/blocks; id `pending-invitations`)
- [Profile header](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/team/ProfileHeader/block.meta.ts): Profile header with a large avatar and change action, name, role badge, headline, meta row and edit button. (team, @gntik-ai/blocks; id `profile-header`)
- [Sessions and devices](https://github.com/gntik-ai/gntik-ui/blob/main/packages/blocks/src/team/SessionsDevices/block.meta.ts): Signed-in sessions with device, client, location, last seen and a current-device badge; revoke one or all others. (team, @gntik-ai/blocks; id `sessions-devices`)

## Templates

- [Assistant chat](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/assistant-chat/template.meta.ts): Workspace assistant in the console: @gntik-ai/chat ChatLayout with suggestions, ChatMessage turns, a ToolCallCard, a mock-streamed markdown reply with Citations, Stop / Retry / feedback and a ChatComposer; a details panel lists the context sources. (AI, @gntik-ai/templates; id `assistant-chat`)
- [Evaluations](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/evaluations/template.meta.ts): Evaluation run review: EvaluationScorecard with one row per dataset, a diverging Heatmap of the score change vs baseline (metric × dataset), a regressions DataTable and a sample viewer (Drawer + JsonViewer, failures first) per dataset. (AI, @gntik-ai/templates; id `evaluations`)
- [Model providers settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/model-providers/template.meta.ts): Settings page (shared settings nav plus a "Model providers" item) with the ModelKeysList — masked keys, test connection, confirmed revoke — an add-key dialog (provider, endpoint for compatible / self-hosted, secret) and workspace usage limits as Meters. (AI, @gntik-ai/templates; id `model-providers`)
- [Prompt playground](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/prompt-playground/template.meta.ts): Prompt playground inside the console (CanvasLayout embedded in ConsoleShell, so the app nav stays): shared variables in a ListInput palette, the PromptEditor, and 2–3 model columns side by side with a Diff switch that compares each column against the first in a DiffEditor. (AI, @gntik-ai/templates; id `prompt-playground`)
- [Run trace](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/run-trace/template.meta.ts): Trace of one AI run inside the console: run header with a live elapsed Timer, TraceWaterfall of spans, token cost and the run log; a pinnable inspector shows the selected span with a live Timer while it runs and its input / output in JsonViewers. (AI, @gntik-ai/templates; id `run-trace`)
- [Accept invitation](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/accept-invitation/template.meta.ts): Centred card invitation: inviter, workspace, role and member count, the invited email with a switch-account link, and Join / Decline with result states. (Auth, @gntik-ai/templates; id `accept-invitation`)
- [Forgot password](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/forgot-password/template.meta.ts): Centred card recovery with default email, inbox feedback and resend. (Auth, @gntik-ai/templates; id `forgot-password`)
- [Pending activation](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/pending-activation/template.meta.ts): Centred card for registered accounts awaiting approval or activation: polite status, optional request reference, allowed actions and recovery links. (Auth, @gntik-ai/templates; id `pending-activation`)
- [Public hub](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/public-hub/template.meta.ts): Unauthenticated entry hub on AuthLayout full-bleed with PageHeader, explanatory cards and navigation actions. (Auth, @gntik-ai/templates; id `public-hub`)
- [Reset password](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/reset-password/template.meta.ts): Centred card new-password step: password with a strength meter and confirmation, then a success state that continues to sign in. (Auth, @gntik-ai/templates; id `reset-password`)
- [Sign in](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/sign-in/template.meta.ts): Split sign-in: brand panel with a short value pitch, email and password form, forgot-password link and single sign-on options. (Auth, @gntik-ai/templates; id `sign-in`)
- [Sign in (card)](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/sign-in-card/template.meta.ts): Centred card sign-in with default email and password, legal footer and no SSO. (Auth, @gntik-ai/templates; id `sign-in-card`)
- [Sign up](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/sign-up/template.meta.ts): Split sign-up: brand panel with the value pitch, name, work email and password with a strength meter, terms consent and single sign-on. (Auth, @gntik-ai/templates; id `sign-up`)
- [Single sign-on](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/sso-login/template.meta.ts): Centred card SSO entry: work email lookup, then a "Redirecting to your identity provider" state with cancel and a password fallback. (Auth, @gntik-ai/templates; id `sso-login`)
- [Two-step verification](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/mfa/template.meta.ts): Centred card second-factor step: one-time code that auto-submits, backup-code fallback, resend with countdown and a way back to sign in. (Auth, @gntik-ai/templates; id `mfa`)
- [Verify email](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/verify-email/template.meta.ts): Centred card check-your-inbox step after sign-up: the address the link went to, resend with a countdown, change email and a support link. (Auth, @gntik-ai/templates; id `verify-email`)
- [Code editor](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/code-editor/template.meta.ts): Full-screen code editor: CanvasLayout top bar (breadcrumb, title, status, branch, Save), a file TreeList with a context menu (open, copy path, close tab, delete) in the palette, and the CodePanel block (file tabs, Monaco editor or diff, problems list) as the canvas. (Builders, @gntik-ai/templates; id `code-editor`)
- [Data explorer](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/data-explorer/template.meta.ts): Explore a large dataset inside the console: a PowerSearch (field filters, comparisons, free text) over a 10k-row DataTable with client sorting and pagination, a column chooser (TransferList in a Dialog: show, hide, reorder) and a row inspector (Drawer + JsonViewer). (Builders, @gntik-ai/templates; id `data-explorer`)
- [Flow builder](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/workflow-builder/template.meta.ts): onSave(graph) receives the graph on screen (controlled graph, latest reported edit, or initial starter graph), without selected, dragging or measured node fields. (Builders, @gntik-ai/templates; id `workflow-builder`)
- [Live event stream](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/live-event-stream/template.meta.ts): Controlled subscription form inside FormSection, a visible StatusDot connection indicator, a quiet role=log stream with LogViewer windowing, search, follow-tail and copy, and a pinnable JSON inspector on InspectorLayout. (Builders, @gntik-ai/templates; id `live-event-stream`)
- [Changelog](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/changelog/template.meta.ts): Release notes in the console: dated entries with version, tag badges and a “New” badge, a multi-select tag filter (ToggleGroup) with a live count, and a Subscribe action. (Help, @gntik-ai/templates; id `changelog`)
- [Docs article](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/docs-article/template.meta.ts): ” feedback with an optional comment, and previous / next links. (Help, @gntik-ai/templates; id `docs-article`)
- [Help home](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/help-home/template.meta.ts): Help center home on DocsLayout: search with a live result count, category ClickableCards with article counts, popular articles with reading time, and a contact-support footer. (Help, @gntik-ai/templates; id `help-home`)
- [Keyboard shortcuts](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/keyboard-shortcuts/template.meta.ts): Searchable shortcut sheet grouped by area (KbdCombo, “G then P” sequences), as a console page and as a Dialog variant (KeyboardShortcutsDialog) for the ? (Help, @gntik-ai/templates; id `keyboard-shortcuts`)
- [Create workspace](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/create-workspace/template.meta.ts): Workspace onboarding wizard: name with address preview, data region and plan as selectable cards, and inline team invitations with email chips and a role. (Onboarding, @gntik-ai/templates; id `create-workspace`)
- [Getting started](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/getting-started/template.meta.ts): Onboarding checklist in the console shell: setup progress, checkable steps with a completion message, and cards linking to the docs. (Onboarding, @gntik-ai/templates; id `getting-started`)
- [Contact](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/contact/template.meta.ts): Public contact page: StackedLayout with a MegaMenu (MobileNav below lg), a validated contact form (Field, Input, Select, Textarea, ValidationSummary) with a focused success state and a destructive Alert on failed sends. (Overview, @gntik-ai/templates; id `contact`)
- [Home dashboard](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/home-dashboard/template.meta.ts): Workspace home in the console shell: page header, KPI row, cost and traffic charts, recent activity and quick-action cards. (Overview, @gntik-ai/templates; id `home-dashboard`)
- [Incident board](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/incident-board/template.meta.ts): Incident triage Kanban in the console: page header with Export / Declare incident, a KPI strip (open, SEV1, unassigned, resolved), a FilterBar (search, severity, service, owner) and a KanbanBoard by stage (Triage · Investigating · Mitigated · Resolved) whose cards show severity, owner and age; pointer and keyboard moves with live announcements, and a details Drawer whose stage select also moves the card. (Overview, @gntik-ai/templates; id `incident-board`)
- [Incident console](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/incident-console/template.meta.ts): Incident triage in the console: a SplitLayout alert rail filtered with PowerSearch (severity, status, service, assignee; default “not resolved”), sorted by severity, with a detail pane showing the elapsed Timer, Acknowledge / Resolve actions and the StatusTimeline of events. (Overview, @gntik-ai/templates; id `incident-console`)
- [Landing](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/landing/template.meta.ts): Public landing: Hero, FeatureGrid, PricingTable, Faq (Overview, @gntik-ai/templates; id `landing`)
- [Pricing](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/pricing/template.meta.ts): Public pricing page: StackedLayout with a MegaMenu (MobileNav below lg), PricingTable with the monthly / annual toggle, FeatureGrid highlights, a plan comparison table grouped by section, and Faq. (Overview, @gntik-ai/templates; id `pricing`)
- [Scorecard](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/scorecard/template.meta.ts): Period-over-period scorecard: period select, KpiRow with deltas vs. (Overview, @gntik-ai/templates; id `scorecard`)
- [Usage analytics](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/usage-analytics/template.meta.ts): Analytics page: date range and filter bar, spend and traffic charts, a sortable breakdown table and a CSV export action. (Overview, @gntik-ai/templates; id `usage-analytics`)
- [Board](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/board/template.meta.ts): Kanban board in the console: columns with counts, cards with priority, labels, due date and assignee; pointer drag-and-drop between and within columns, keyboard moves (Space to pick up, arrows to move, Space to drop, Escape to cancel) with live announcements, and a card detail Drawer whose status select also moves the card. (Resources, @gntik-ai/templates; id `board`)
- [Create wizard](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/create-wizard/template.meta.ts): Focus-mode create flow on WizardLayout. Without flowSteps, the existing details, source, configuration and editable review flow, CreateWizardProps, copy and defaults are unchanged. (Resources, @gntik-ai/templates; id `create-wizard`)
- [Resource detail](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/resource-detail/template.meta.ts): Resource detail with editable Overview, Activity and Settings tabs by default; optional readOnly (boolean, default false) uses only explicit header and detail props and one Overview tab, with optional history (readonly StatusEvent[], default undefined): omitted hides the history card, [] shows the named empty state, and events render exactly as supplied without invented actors. (Resources, @gntik-ai/templates; id `resource-detail`)
- [Resource form](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/resource-form/template.meta.ts): Long create/edit form: two-column form sections, an error summary that links to each invalid field after submit, and a sticky save bar that tracks unsaved changes. (Resources, @gntik-ai/templates; id `resource-form`)
- [Resource gallery](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/resource-gallery/template.meta.ts): Card gallery of resources with a toolbar (search, grid/table view toggle, create action), per-card actions and a no-results state. (Resources, @gntik-ai/templates; id `resource-gallery`)
- [Resource index](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/resource-index/template.meta.ts): List page for any resource: header with the create action, filter bar with saved views, a selectable sortable table with pagination, a sticky bulk action bar and a no-results state. (Resources, @gntik-ai/templates; id `resource-index`)
- [Resource tree](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/resource-tree/template.meta.ts): Resource index with a team → project TreeList (counts, single selection) beside grouped DataTables (group by kind, region or team; one SectionHeader + table per group), StatusTag status and OverflowList tags. (Resources, @gntik-ai/templates; id `resource-tree`)
- [API keys settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/settings-api-keys/template.meta.ts): API key list with scopes and last use, a create-key dialog that shows the secret once, and typed revoke confirmation. (Settings, @gntik-ai/templates; id `settings-api-keys`)
- [Appearance settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/settings-appearance/template.meta.ts): Theme switcher wired to the ThemeProvider, an in-app Reduce motion switch, table density and interface language. (Settings, @gntik-ai/templates; id `settings-appearance`)
- [Billing settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/settings-billing/template.meta.ts): Current plan with billing cycle, quota meters, the default payment method and invoice history. (Settings, @gntik-ai/templates; id `settings-billing`)
- [Integrations settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/settings-integrations/template.meta.ts): Connector cards with on/off switches, webhook endpoints and a filterable delivery log. (Settings, @gntik-ai/templates; id `settings-integrations`)
- [Members settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/settings-members/template.meta.ts): Workspace members with inline roles, pending invitations, an invite dialog and a role permission matrix. (Settings, @gntik-ai/templates; id `settings-members`)
- [Notification settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/settings-notifications/template.meta.ts): Event × channel notification matrix with bulk row and column toggles and a sticky save bar. (Settings, @gntik-ai/templates; id `settings-notifications`)
- [Profile settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/settings-profile/template.meta.ts): Personal profile defaults to mode='editable': avatar header, name and email, locale and time zone, with a sticky save bar. (Settings, @gntik-ai/templates; id `settings-profile`)
- [Security settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/settings-security/template.meta.ts): Password change, two-factor setup with a one-time code dialog, and signed-in sessions and devices. (Settings, @gntik-ai/templates; id `settings-security`)
- [Workspace settings](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/settings-workspace/template.meta.ts): Workspace name, URL slug, logo upload and data region, with a danger zone for transfer and deletion. (Settings, @gntik-ai/templates; id `settings-workspace`)
- [Sidebar shell](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/shell-sidebar/template.meta.ts): Console starter: app sidebar, topbar and an empty Page with a title, description and a first-run empty state. (Shells, @gntik-ai/templates; id `shell-sidebar`)
- [Top-nav shell](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/shell-topnav/template.meta.ts): Top-navigation starter: brand, primary links (drawer on small screens), search, notifications, theme and user menu, a page header and an empty body. (Shells, @gntik-ai/templates; id `shell-topnav`)
- [403 Forbidden](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/status-403/template.meta.ts): Full-page permission state: explains who can grant access, with a Request access action (idle · pending · requested, like NoAccessEmpty) and a way home. (System, @gntik-ai/templates; id `status-403`)
- [404 Not found](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/status-404/template.meta.ts): Full-page not-found state: code, message, a primary way home, Go back and a support link. (System, @gntik-ai/templates; id `status-404`)
- [500 Server error](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/status-500/template.meta.ts): Full-page server error: StatusLayout message with an ErrorPanel (status code, copyable request id, retry, technical details) and links home and to the status page. (System, @gntik-ai/templates; id `status-500`)
- [Maintenance](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/status-maintenance/template.meta.ts): Full-page maintenance state: message, Check again and a status page link, with a maintenance SystemBanner carrying the window and a subscribe link. (System, @gntik-ai/templates; id `status-maintenance`)
- [Upgrade required](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/upgrade-required/template.meta.ts): Plan gate inside the console: what the locked feature does, the current plan, and a PricingTable comparison whose CTA starts the upgrade. (System, @gntik-ai/templates; id `upgrade-required`)
- [Audit log](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/audit-log/template.meta.ts): Workspace audit trail: FilterBar (search, actor / resource / result filters) and DateRangeFilter over a DataTable of events with actor, action, target and result; a drawer shows the change diff (CodeBlock); export to CSV. (Work, @gntik-ai/templates; id `audit-log`)
- [Messaging](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/messaging/template.meta.ts): Team messaging in the console: SplitLayout conversation list (unread counts, last message) → thread of ChatMessages with Thumbnail attachments, participants AvatarGroup, and a ChatComposer with file attachments; Back on small screens. (Work, @gntik-ai/templates; id `messaging`)
- [Notification inbox](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/notification-inbox/template.meta.ts): Master–detail inbox in the console: All / Unread / Mentions filter (ToggleGroup), read and unread rows, a detail pane with Open, Mark as unread and Archive, and Back on small screens. (Work, @gntik-ai/templates; id `notification-inbox`)
- [Search results](https://github.com/gntik-ai/gntik-ui/blob/main/packages/templates/src/search-results/template.meta.ts): Workspace search: query field, facets as Checkbox groups with counts, results grouped by type under SectionHeaders, arrow-key navigation through the results, and NoResultsEmpty. (Work, @gntik-ai/templates; id `search-results`)

## Optional

- [llms-full.txt](/llms-full.txt): every item with its full description, keyboard contract, tokens and a usage snippet