# TKCode.Arc > TKCode.Arc brings Arc (uiarc.dev) to Avalonia: 113 components in Arc's 22 groups, 78 page-level blocks, a spreadsheet-style data grid and a streaming Markdown renderer, as native Avalonia 12.1.4 controls with no other UI framework dependency. Every control derives from an Avalonia base type and reads one set of design tokens, with light and dark appearances, eight accents and spring motion that respects reduced motion. MIT licensed, trimming and NativeAOT compatible. Agent skill entry point: [skills.md](https://docs.tkcode.si/skills.md), the workflow, rules and index of every component in one file. Version 1.0.0 (preview: pin the exact version). Each link below is a page as Markdown: when to use the component, when not to and what to use instead, usage in XAML and C#, the source of every live example, the API reference generated from the library (every property with its type and default, events, pseudo-classes), accessibility and motion. "Also called" gives the names other libraries use; "Covers" lists the page's usage sections beyond the ones every page has. Any page of https://docs.tkcode.si is available as Markdown at its address plus `.md`, for example https://docs.tkcode.si/components/button.md for https://docs.tkcode.si/components/button. The site itself is an Avalonia WebAssembly app that draws to a canvas, so its HTML carries no text: read the Markdown. Each component and block page also comes as a short reference at its address plus `.api.md`, for example https://docs.tkcode.si/components/button.api.md: the first example, the components to choose instead and the API reference, about a quarter of the full page. Simplified and Traditional Chinese pages are under https://docs.tkcode.si/zh-CN/ and https://docs.tkcode.si/zh-TW/, for example https://docs.tkcode.si/zh-CN/components/button.md. ## Start from a template ```bash dotnet new install TKCode.Arc.Templates dotnet new tkcode-arc -n MyApp --layout sidebar ``` `tkcode-arc` (layouts `blank`, `sidebar`, `header`, `dock`; options `--mvvm toolkit`, `--di`, `--i18n`, `--ui-language`, `--tests`, `--custom-titlebar`), `tkcode-arc-xplat` (desktop and browser), the finished apps `tkcode-arc-admin`, `-ai-chat`, `-devtool`, `-workflow`, `-projects`, `-analytics`, the control library `tkcode-arc-lib`, and the item templates `tkcode-arc-page`, `-window`, `-dialog`, `-control`. All options: [Templates](https://docs.tkcode.si/docs/templates.md). To add Arc to an existing app, install the packages as below. ## Install ```bash dotnet add package TKCode.Arc --version 1.0.0 dotnet add package TKCode.Arc.Fonts --version 1.0.0 # optional: Geist and Geist Mono dotnet add package Avalonia.Fonts.Inter --version 12.1.4 # optional: Inter for body text ``` Register Arc on the `AppBuilder` with `UseArc(...)`; the `Application` class needs nothing from Arc: ```csharp AppBuilder.Configure() .UsePlatformDetect() .WithInterFont() .WithArcFonts() .UseArc(arc => arc .UseArcControls() .WithTheme(t => t.Appearance(ArcAppearance.System))); ArcTheme.Apply(t => t.Appearance(ArcAppearance.Dark).Accent(ArcAccentPreset.Violet)); // switch the theme at run time ``` Controls, token resources and markup extensions share one XAML namespace: `xmlns:arc="https://github.com/AIDotNet/TKCode.Arc"`, as in ``. Other packages register inside the same callback: `TKCode.Arc.Blocks` (`UseArcBlocks()`), `TKCode.Arc.Special` (`UseArcSpecial()`, the AI components, illustrations and effects), `TKCode.Arc.Mobile` (`UseArcMobile()`, phone controls in their own XAML namespace `xmlns:arcm="https://github.com/AIDotNet/TKCode.Arc.Mobile"`: ``, ``), `TKCode.Arc.AdvancedCharts` (`UseArcAdvancedCharts()`, the DataGrid), `TKCode.Arc.Workflow` (`UseArcWorkflow()`), `TKCode.Arc.Dock` (`UseArcDock()`). Below, a component is in `TKCode.Arc` unless its group or line names another package. ## Rules for agents - This is Avalonia 12.1.4 with TKCode.Arc, not WPF, WinUI or HTML: no `Visibility`, no `DataTemplateSelector`, no `x:Array`, no CSS. - Write the `arc:` prefix. Without it, `Button`, `Slider`, `TreeView` and the other names Arc shares with Avalonia resolve to Avalonia's own controls. In C#, alias one namespace: `using ArcButton = TKCode.Arc.Button;`. - Use only the properties, events and enum values in the component's API reference. Anything else is invented and fails at build or run time. - Colors, radii, spacing and fonts come from tokens: `{arc:ArcDesignTokenResource Surface}` in XAML, `ArcTokens.Bind(...)` in code. A hard-coded hex color breaks dark mode and the accents. - Arc controls animate themselves. A custom control declares its transitions in its ControlTheme under `^:motion-full` and `^:motion-reduced` with `arc:ArcMotion.Tracks="True"`; the levels are Full, Reduced and Off (`ArcMotion.Level`). - Fields are named by `Label`, explained by `Description`, and show errors through `ErrorMessage` or data validation on the bound property. - Icons: `{x:Static arc:ArcIcons.Check}` for Arc's built-in glyphs; any other Lucide icon through `TKCode.Arc.Icons.Lucide` (``, `xmlns:lucide="https://github.com/AIDotNet/TKCode.Arc/lucide"`). Its generator compiles in only the icons written in C# or XAML: an icon from a binding or from data must also be declared in the project file, `` (or `true`), or it draws nothing. Build warning `ARCL002` marks such bindings. - One `Primary` button per surface. Copy is sentence case, and a button says what it does: "Save changes", not "OK" or "Submit". ## Agent skill - [skills.md](https://docs.tkcode.si/skills.md): the entry point in one file: the skill below with the index of every component and block. Fetch this one when you read rather than install the skill. - [SKILL.md](https://docs.tkcode.si/skills/tkcode-arc/SKILL.md): the TKCode.Arc skill for coding agents: workflow, rules and quick component decisions. Save it with the three files below in a `tkcode-arc` folder of your agent's skills directory, such as `.claude/skills/tkcode-arc/`. - [components.md](https://docs.tkcode.si/skills/tkcode-arc/components.md): every component and block by group, with its class, package, purpose and other names. - [choosing.md](https://docs.tkcode.si/skills/tkcode-arc/choosing.md): for each component, the nearby components to choose instead and when. - [checklist.md](https://docs.tkcode.si/skills/tkcode-arc/checklist.md): the review checklist to run before finishing a screen. ## Docs - [Introduction](https://docs.tkcode.si/docs/introduction.md): What Arc is and how the gallery is organized. - [Installation](https://docs.tkcode.si/docs/installation.md): Add the Arc packages to a project. - [Templates](https://docs.tkcode.si/docs/templates.md): Start an app from a dotnet new template, and add pages, windows, dialogs and controls to it. - [Theming](https://docs.tkcode.si/docs/theming.md): Themes, design tokens and appearance. - [Motion](https://docs.tkcode.si/docs/motion.md): The motion engine and its presets. - [AI and MCP](https://docs.tkcode.si/docs/ai-and-mcp.md): Use Arc with AI assistants: llms.txt, Markdown pages, an agent skill and MCP. - [Changelog](https://docs.tkcode.si/docs/changelog.md): Release notes. ## Components ### Buttons - [Button](https://docs.tkcode.si/components/button.md): The default button for one action, in primary, secondary, ghost and danger weights, three sizes and a loading state that keeps its width. Also called: btn, command button, primary action. Covers: Variants, Sizes, Loading and label morph, Icon-only button, Disabled. - [Action button](https://docs.tkcode.si/components/action-button.md): A submit button that shows the work on itself: a pending word and a spinner while the task runs, then a success word with a check, then back to idle. Also called: submit button, async button, loading button, busy button. Covers: Labels and reset, Lifecycle, Failure, Commands and clicks, Disabled. - [Action swap](https://docs.tkcode.si/components/action-swap.md): One pill that cycles through related states, such as Follow and Following, changing its width, tone, icon and letters in place. Covers: States, Actions, Working without a label, Failure, Sizes, Disabled. - [Split button](https://docs.tkcode.si/components/split-button.md): A primary action with a menu of nearby alternatives. Also called: dropdown button, menu button. Covers: Choosing the variant and the default action, Click and menu selection, Rows from data, Icon and result in place, Disabled, Secondary. - [Button group](https://docs.tkcode.si/components/button-group.md): Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row. Also called: toolbar, button bar, joined buttons. Covers: Icons and icon-only segments, Live value and label change, Attached menu, Variants, orientation and events, Collapsing labels, Disabled. - [Floating button group](https://docs.tkcode.si/components/floating-button-group.md): A small tray of actions that floats over a canvas, document, chart or map, with one highlight that morphs from button to button. Covers: Variant and size, Icons and icon-only items, Label change and reserved width, Items from data and vertical layout, Checked items, Shortcut hints and tooltips, Events. - [Expanding button group](https://docs.tkcode.si/components/expanding-button-group.md): Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place. Covers: Icons and the resting action, Confirmation, Async action, Size and tone, Events, Pointer, touch and keyboard, Layout and width. - [Copy button](https://docs.tkcode.si/components/copy-button.md): Copy a value with immediate confirmation. Also called: copy to clipboard. Covers: Variants and sizes, Icon only and labels, Reset time and events. - [Icon morph](https://docs.tkcode.si/components/icon-morph.md): Icons that morph between states: menu to close, play to pause, copy to check, and more. Covers: Kinds, Toggle state, Size and stroke, Chevron direction, MorphGlyph, Using motion with restraint. - [Confirm morph](https://docs.tkcode.si/components/confirm-morph.md): A destructive button that morphs into an inline confirmation, a spinner, and a result with undo. Also called: delete confirmation, inline confirm, undo delete. Covers: Actions and undo, Choosing a confirm mode, Hold mode, Countdown mode, Labels and tone, Controlled state and timeouts, Focus and dismissal, Disabled. - [Theme switcher](https://docs.tkcode.si/components/theme-switch.md): A button that flips the whole window between light and dark, with four styles of page transition. Also called: dark mode toggle, light and dark toggle. Covers: Variants, Icon only and text, Handling the request, Controlled appearance, Persisting the choice, Using motion with restraint. ### Gestures - [Hold to confirm](https://docs.tkcode.si/components/hold-to-confirm.md): Confirm a destructive action by holding, not tapping. Also called: long press, press and hold, destructive confirm. Covers: Choosing a tone, Hold duration, Icon, Hint while holding, Done state, Disabled, Cancelling a hold. - [Swipe actions](https://docs.tkcode.si/components/swipe-actions.md): Reveal row actions with a swipe, or from the same actions in a menu. Also called: swipe to delete, swipe row actions. Covers: Tones, Actions that run, Rows with their own actions, Resting open, Full swipe. - [Reactions](https://docs.tkcode.si/components/reactions.md): Acknowledge a post in one tap, with counts that roll. Also called: emoji reactions, likes. Covers: Value and changes, Wrapping and width, Labels and tips, Who reacted, Live counts. ### Menus - [Dropdown menu](https://docs.tkcode.si/components/dropdown-menu.md): A menu of commands behind a labelled trigger button: choosing an item runs an action and closes the menu. Also called: menu, actions menu, overflow menu, kebab menu, more menu, menu flyout. Covers: Choosing the trigger, side and alignment, Handling a selection, Live label and radio rows, Data-driven rows and a custom trigger, Submenus, Opening from code, MenuSurface, Focus and dismissal. - [Context menu](https://docs.tkcode.si/components/context-menu.md): A right-click or long-press menu of the actions for one object, opened at the pointer or under the target. Also called: right-click menu. Covers: Handling a selection, Checked rows, Data-driven rows, Attaching a menu to any control, Submenus, Opening and closing from code, Focus and dismissal. - [User menu](https://docs.tkcode.si/components/user-menu.md): Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones. Also called: account menu, profile menu, avatar menu. Covers: Choosing the layout, Theme and status, Asynchronous sign out, Photo and destinations as data, Focus and dismissal. ### Text fields - [Input](https://docs.tkcode.si/components/input.md): The text box for a short typed value, with its label, helper text and error row built in. Also called: text box, textbox, text field, text input, edit box. Covers: Helper and error copy, Validation timing, Sizes, Prefix and suffix, States, Field foundation. - [Textarea](https://docs.tkcode.si/components/textarea.md): A multiline field for notes, descriptions, and longer text. Also called: multiline text box, text area, memo. Covers: Choosing a height, Live count and validation, Bind the text, Resizing, Disabled. - [Password field](https://docs.tkcode.si/components/password-field.md): A masked Input for a password or secret that already exists, with a reveal toggle inside the field. Also called: password box, secret input. Covers: Bind the value, Validation, Confirmation, Toggle names, Sizes and states. - [Password strength](https://docs.tkcode.si/components/password-strength.md): Show how strong a new password is while it is typed. Also called: password meter, strength meter. Covers: Strength levels, Bind the value, React to the strength, Custom rules, Validation, Errors, Scoring with a custom scorer, Messages and localization. - [Search field](https://docs.tkcode.si/components/search-field.md): A search box that narrows the items already on the view as people type, with a clear button that does not shift the toolbar. Also called: search box, search bar, search input. Covers: Sizes, Binding the query, Filter as the user types, Submit, Clear from code, Filtering large lists. - [Expanding search](https://docs.tkcode.si/components/expanding-search.md): An icon that morphs into a search field with results beneath it. Also called: collapsible search, search icon expand. Covers: Items and suggestions, Selection, Open and close from code, Anchor and width, Focus and dismissal. - [Inline edit](https://docs.tkcode.si/components/inline-edit.md): Rename in place: the text becomes a field without moving. Also called: rename in place, editable label, click to edit. Covers: Variants and multiline, Binding, Save and validation, Empty, Saving and leaving the field. ### Special inputs - [Number field](https://docs.tkcode.si/components/number-field.md): Enter a bounded number with clear increment controls. Also called: numeric up down, spin box, stepper input, number input. Covers: Prefix, suffix and step, Formatting and culture, Sizes, Limit hint and errors, Validation, Binding and events, Scrub label, Keyboard. - [Money input](https://docs.tkcode.si/components/money-input.md): A currency field with live grouping, stable width, rolling digits, and minor-unit output. Also called: currency input, amount field, price input. Covers: Currency and quick-add chips, Culture, Error and description, Binding and events, Minimum and maximum, Validation, Hidden label, Disabled. - [Phone input](https://docs.tkcode.si/components/phone-input.md): A phone field with a country picker, formatting as you type, and E.164 output. Also called: telephone input, phone number field. Covers: Preset value, Restricted countries, Validation and errors, Storing and checking numbers, Binding and events, Disabled and hidden label, Keyboard. - [Scrub input](https://docs.tkcode.si/components/scrub-input.md): A Figma-style number field: drag the label to scrub, or type values, units, and arithmetic. Also called: drag number, draggable value, unit input. Covers: Scrubbing and typing, Limits and wrapping, Steps and precision, Input grammar, Multiple units, Sizes, Binding and events, Glyph labels, States. - [Tag input](https://docs.tkcode.si/components/tag-input.md): Turn short text values into removable tags. Also called: tags, chips input, token input. Covers: Initial tags, Binding and events, Limit and errors, Validation, Pasted lists, Empty with placeholder, Description, Wrapping rows, Keyboard, Disabled. - [Mention input](https://docs.tkcode.si/components/mention-input.md): A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret. Also called: at mentions, @mention, hashtag input. Covers: When suggestions open, Prefilled value, Submit on Enter, Lines and growth, Size and placement, Commands and events, Disabled, Focus and dismissal, Serialized output. - [Shortcut recorder](https://docs.tkcode.si/components/shortcut-recorder.md): Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet. Also called: hotkey input, keybinding editor, key capture. Covers: Value and reset, Known shortcuts and conflicts, Modifiers and platform, Events, Hidden label, Description, Disabled. ### Selects - [Select](https://docs.tkcode.si/components/select.md): The dropdown field for one value from a short, fixed list, with a label and a keyboard friendly menu. Also called: dropdown, combo box (fixed list), picker, select box, option list. Covers: Bound options and value, Custom labels and values, Placeholder and description, Long lists and disabled state, Focus and dismissal. - [Combobox](https://docs.tkcode.si/components/combobox.md): Search and select from a list without leaving the field. Also called: autocomplete, typeahead, auto complete box, searchable select, filterable dropdown. Covers: Choosing the data, Searching and filtering, Placeholder, empty text and status, Clearing and focus, Validation, Inline options and disabled options, Disabled. - [Multi-select](https://docs.tkcode.si/components/multi-select.md): A dropdown field for several values from a fixed list, shown as chips inside the field. Also called: multiple select, multi-select dropdown, checkbox dropdown. Covers: Chips and overflow, Bound options and values, Searchable menu, Selecting in code, Placeholder and disabled state. - [Morph select](https://docs.tkcode.si/components/morph-select.md): A select whose trigger grows into the list, with a gliding highlight and type-ahead. Covers: Choosing the selection mode and width, Groups, icons and meta, Compact toolbar, Search, Validation. - [Chip group](https://docs.tkcode.si/components/chip-group.md): Filter by a few facets with chips that morph as you pick them. Also called: filter chips, choice chips, tag filter, pills. Covers: Choosing the selection mode, Folding long lists. ### Toggles - [Radio cards](https://docs.tkcode.si/components/radio-cards.md): Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior. Also called: option cards, plan picker, selectable cards. Covers: Options in code, Choosing a layout, Unavailable options, Required and disabled. - [Billing toggle](https://docs.tkcode.si/components/billing-toggle.md): A monthly and yearly switch with a savings badge and prices that roll to the new amount. Also called: monthly yearly toggle, pricing period switch. Covers: Custom options, Prices, Size and accent. - [Checkbox](https://docs.tkcode.si/components/checkbox.md): A labelled yes or no choice in a form, applied when the form is saved, with an indeterminate state for partly selected groups. Also called: check box, tick box. Covers: Required and invalid, Validation, Indeterminate parent, Three-state cycle, Events. - [Radio group](https://docs.tkcode.si/components/radio-group.md): Choose one option from a visible set. Also called: radio buttons, option buttons. Covers: Bound options, Disabled options, Selection events, Option count and layout. - [Switch](https://docs.tkcode.si/components/switch.md): A tactile toggle for settings that take effect immediately. Also called: toggle, toggle switch, toggle button setting. Covers: Settings list, Binding, Disabled, Changes. - [Segmented control](https://docs.tkcode.si/components/segmented-control.md): Switch between a small set of related views. Also called: segmented button, toggle button group, view switcher, tab-like choice. Covers: Choosing the variant, Items from code, Accessory, Intent, Overflow. ### Sliders - [Slider](https://docs.tkcode.si/components/slider.md): Pick a value or a range on a track that follows your finger. Also called: range slider, track bar. Covers: Start and end content, Range, Steps and marks, Ranges and limits, Events, Using motion with restraint, Disabled. - [Elastic slider](https://docs.tkcode.si/components/elastic-slider.md): A slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into. Covers: Icons, Detents, Steps and format, Events, Using motion with restraint, Disabled. ### Pickers - [Calendar](https://docs.tkcode.si/components/calendar.md): Browse dates in a clear, compact month view. Also called: month view, date grid. Covers: Selected date, Limits and disabled days, Displayed month, Labels and culture, Focus and the roving tab stop. - [Date picker](https://docs.tkcode.si/components/date-picker.md): A date field: type a date or pick it from a calendar popup, with the same label and error rows as the other fields. Also called: date input, calendar date picker. Covers: Value and typed text, Limits and disabled days, Sizes, Culture and display format, Error and disabled state, Validation. - [Date range picker](https://docs.tkcode.si/components/date-range-picker.md): A range picker that grows from its trigger into two months with presets and a stretching range highlight. Also called: date range, period picker, from to dates. Covers: Layout: one or two months, Presets, Limits and week start, Culture, Driving it from code, Validation, Focus and dismissal. - [Time picker](https://docs.tkcode.si/components/time-picker.md): A time-of-day field that picks from an evenly spaced list, every 15 minutes by default, shown in the person's culture. Also called: time input, clock picker. Covers: Step and clock, Empty value and default, Sizes and states, Validation, Focus and dismissal, Driving it from code. - [Color picker](https://docs.tkcode.si/components/color-picker.md): A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout. Also called: color chooser, swatch picker. Covers: Value and format, Saved swatches, Limits and the eyedropper, Contrast and accessibility, Validation and error state. ### Editors - [Rich text editor](https://docs.tkcode.si/components/rich-text-editor.md): A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output. Also called: WYSIWYG editor, rich text box, formatted text editor. Covers: Block types and marks, Markdown shortcuts and the supported subset, The Docs profile, Images and tables, The block handle, Find and replace, Placeholder and block hint, Read only, Content formats, Importing existing Markdown, Reading the content, Your own toolbar, Undo and history, Long documents and performance. - [Signature pad](https://docs.tkcode.si/components/signature-pad.md): Smooth ink that thins with speed, with undo, replay, and PNG or SVG export. Also called: signature capture, draw signature. Covers: Ink color and nib, Reading the strokes, Export, Storing and restoring a signature, Validation. - [File dropzone](https://docs.tkcode.si/components/file-dropzone.md): A file drop target with the system file picker, paste, and a list that shows each file's upload state. Also called: file upload, drag and drop upload, file picker area. Covers: Choose the accepted types and the limits, Row status, Single file, Upload handler, Application-driven rows, Rows inside the target, Refusals and limits. ### Navigation - [Tabs](https://docs.tkcode.si/components/tabs.md): A tab list that switches between peer views of one object, such as Overview, Activity and Settings, each with its own panel. Also called: tab control, tab view, tab bar, tab strip. Covers: Data-bound tabs, Activation mode, Selecting in code, Long tab lists. - [Breadcrumb](https://docs.tkcode.si/components/breadcrumb.md): Show where a page sits in a hierarchy. Also called: breadcrumbs, path bar. Covers: Navigating with a click, Bound path, Commands and navigation URIs, Label, Collapsed path. - [Pagination](https://docs.tkcode.si/components/pagination.md): Previous, next and page number buttons for a collection the app loads one page at a time. Also called: pager, page numbers. Covers: Reacting to a page change, Boundary pages, Few pages and no pages, Labels, Keeping the page in range. ### Expand - [Scroll area](https://docs.tkcode.si/components/scroll-area.md): A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows. Also called: scroll viewer, scrollable panel. Covers: Axes and overlay bars, Horizontal strip, Edge fades and hide delay, Driving it from code. - [Accordion](https://docs.tkcode.si/components/accordion.md): A column of headed rows, such as questions in an FAQ, whose content opens in place one at a time or together. Also called: expander, collapse, collapsible sections, disclosure. Covers: Sizes, Data-driven rows, Single and multiple open rows, Opening a row from code. - [Expandable card](https://docs.tkcode.si/components/expandable-card.md): A summary card whose header opens a details panel below it, or grows sideways for wide details. Also called: expanding card, card to detail. Covers: Widths: CollapsedWidth and ExpandedWidth, Open by default, Updating the summary, Events, Layout in lists and stacks. - [Resizable panels](https://docs.tkcode.si/components/resizable-panels.md): Trade space between panes by dragging the divider between them. Also called: splitter, split view, grid splitter, split pane. Covers: Sizing panes, Vertical, Gap between panes, Adding and removing panes, Collapsed by default, Limits, Drag, flick and double-click, Narrow windows. - [Expandable text](https://docs.tkcode.si/components/expandable-text.md): Long text clamped to a few lines with a soft fade that glides open with Read more and closes with Show less, shown only when the text overflows. Also called: read more, show more text, truncated text. Covers: Line count, Labels, Binding the expanded state, Text that fits, Driving it from data, Rich text and links, Selectable or rich content. ### Overlays - [Dialog](https://docs.tkcode.si/components/dialog.md): A centred modal panel for a decision or a short task that must be finished before the person returns to the page. Also called: modal, modal dialog, popup window, message box, content dialog, confirm dialog. Covers: Declared in XAML, Confirmation from code, Step titles, Sizes, Closing and results, Focus and dismissal. - [Drawer](https://docs.tkcode.si/components/drawer.md): A modal panel that slides in from an edge of the window for focused work on the current view, such as filters or one record. Also called: side sheet, off-canvas panel, slide-over, flyout panel. Covers: Edge, Long content, Actions, Opening from code, Closing reason, Dragging to close. - [Bottom sheet](https://docs.tkcode.si/components/bottom-sheet.md): A sheet that rests at a peek or full height and follows your finger. Also called: action sheet, bottom drawer, mobile sheet. Covers: Basic sheet, Choosing detents, Opening and moving between detents, Long content, Closing, Drag, flick and rubber band, Focus and dismissal. - [Popover](https://docs.tkcode.si/components/popover.md): A small non-modal panel of interactive content anchored to the control that opens it, such as share settings or a filter form. Also called: flyout, popup, callout. Covers: Trigger and content, Attached to a control, Placement and alignment, Opening from code, Modal popover, Small form, Focus and dismissal. - [Hover card](https://docs.tkcode.si/components/hover-card.md): Preview a person or link on hover or focus without leaving the page. Also called: hover preview, peek card. Covers: Profile card, Link preview, Timing and width, Showing from code, Dense list, Focus and dismissal. - [Tooltip](https://docs.tkcode.si/components/tooltip.md): A short label shown on hover or keyboard focus for a control that does not explain itself, such as an icon-only button. Also called: hint, info tip, title tip. Covers: Basic, Side, Binding the text, Changing the text and the delay, Showing from code, Queueing and timing. ### Messages - [Alert](https://docs.tkcode.si/components/alert.md): An inline notice that stays on the page next to what it concerns until its situation is resolved. Also called: banner, info bar, callout message, notice, inline message. Covers: Tones, Morph in place, Dismiss, Custom content, Driving it from data, Focus and dismissal. - [Toast](https://docs.tkcode.si/components/toast.md): A short message a page shows for a few seconds after something it started has finished, such as a saved form. Also called: snackbar, notification, flash message, toast notification. Covers: Showing and hiding, Duration, Closed event, App-wide toasts. - [Toast stack](https://docs.tkcode.si/components/toast-stack.md): An app-wide stack of toasts at the window edge that any control can add a result to, newest in front. Also called: notification stack, toaster, notification manager. Covers: Showing a toast, Kinds and lifetimes, Loading and update, Actions, Position and limits, Driving it from code. - [Announcement bar](https://docs.tkcode.si/components/announcement-bar.md): A top banner that rotates messages, counts down, and collapses smoothly when dismissed. Also called: top banner, promo bar, site-wide notice. Covers: Tones, Controls and autoplay, Actions and countdown, Remembered dismissal. - [Cookie consent](https://docs.tkcode.si/components/cookie-consent.md): A consent bar that morphs into preferences and folds into a reopen button. Also called: cookie banner, GDPR consent. Covers: Categories and policy, Reacting to the choice, Reading a saved choice, Position and reopen button. ### Progress - [Progress](https://docs.tkcode.si/components/progress.md): A progress bar for a task with a known total, such as an upload or an import, with an optional count and a completion check. Also called: progress bar, spinner, loading indicator, progress ring, activity indicator. Covers: Bar only, Custom maximum, Changing label, Completion, Reporting progress. - [Skeleton](https://docs.tkcode.si/components/skeleton.md): Placeholder shapes that hold the layout of a block of content, such as an avatar and lines of text, while its data loads. Also called: placeholder, shimmer, loading placeholder, ghost content. Covers: Matching the layout, Comment placeholder, Loaded content. - [Stepper](https://docs.tkcode.si/components/stepper.md): Show where a person is in a multi-step flow and what is done. Also called: steps, wizard steps, progress steps. Covers: Bound steps, Errors and recovery, Vertical with error, Compact and current details, Navigable steps. - [Countdown](https://docs.tkcode.si/components/countdown.md): A launch countdown with rolling digits that morphs into a live state at zero. Also called: timer, countdown timer. Covers: Choosing a variant, Choosing units, Target and duration, Time zones and the clock, Pause, resume and restart, Completion. - [Usage meter](https://docs.tkcode.si/components/usage-meter.md): Show what fills an allowance and how close it is to the limit. Also called: quota bar, usage bar, limit meter. Covers: Almost full and over the limit, Units and decimals, Labels for the free and over amounts, Status in code. ### Avatars - [Avatar](https://docs.tkcode.si/components/avatar.md): A compact identity marker for people and accounts. Also called: profile picture, user image, initials. Covers: Photo and fallback, Sizes, Status, Initials, Photos in lists and tables. - [Avatar group](https://docs.tkcode.si/components/avatar-group.md): Show a team or set of contributors in a small space. Also called: avatar stack, facepile. Covers: Bound members, Overflow, Sizes, Inline members. - [Badge](https://docs.tkcode.si/components/badge.md): A small label for status, category, or metadata. Also called: tag, label, status pill, chip, count badge. Covers: Tones, Sizes, Icon, Changing in place. ### Cards - [Card](https://docs.tkcode.si/components/card.md): A tile for one item of a browsable grid, with a visual, title, owner and status, that can grow into a quick look. Also called: panel, tile, container. Covers: Parts and combinations, Media, owner and footer, Status, Quick look, Without a quick look, Focus and dismissal. - [Metric card](https://docs.tkcode.si/components/metric-card.md): A dashboard tile with one number, the label that names it, a comparison and an optional change chip. Also called: KPI card, stat card, statistic, number tile. Covers: Value, prefix, suffix and decimals, Change chip, Trend line, Narrow windows. - [Empty state](https://docs.tkcode.si/components/empty-state.md): A useful next step when there is nothing to show yet. Also called: no data, blank slate, zero state. Covers: Choosing the copy and the icon, Icon, Action row, Driving it from data, Changing state, Layout and sizing. ### Charts - [Line chart](https://docs.tkcode.si/components/line-chart.md): A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges. Also called: line graph, trend chart, time series. Covers: Ranges, Single series and units, Legend and hidden series, Loading and empty states, Reading values, Value axis. - [Bar chart](https://docs.tkcode.si/components/bar-chart.md): Compare one measure across days and scrub any bar for its value. Also called: column chart, histogram, bar graph. Covers: Ranges, Headline labels, Value formatting and axes, Reading values. - [Donut chart](https://docs.tkcode.si/components/donut-chart.md): A donut chart of how a whole divides into two to six parts, with a legend and the total or the pointed part in the center. Also called: pie chart, ring chart. Covers: Sizes and grouping, Datasets, Legend and hidden segments, Pinning a segment. - [Streamgraph](https://docs.tkcode.si/components/streamgraph.md): Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week. Covers: Layers and series, Offset, Ranges, Legend, direct labels and hidden layers, Reading a week. - [Brush chart](https://docs.tkcode.si/components/brush-chart.md): A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place. Covers: Choosing the window and the presets, Annotations, Minimum span, Formatting. - [Waffle chart](https://docs.tkcode.si/components/waffle-chart.md): A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes. Covers: Choosing the grid, Accent and colors, Datasets, Selectors and non-category data, Pinning a category, Empty. - [Slope chart](https://docs.tkcode.si/components/slope-chart.md): Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope. Covers: Datasets, Value and change formats, Highlight and rank, Reading an item, Data shape and label collisions. - [Sparkline](https://docs.tkcode.si/components/sparkline.md): Show a compact trend beside a value. Also called: mini chart, inline chart. Covers: Headline, aside and scrubbing, Tones, Point labels, Scale and size, Dense tables, Without a headline. - [Gauge](https://docs.tkcode.si/components/gauge.md): A 270 degree ring that shows where a reading sits in a known range, with the percentage in the center and named bands. Also called: dial, meter, radial progress. Covers: Choosing thresholds, Custom range, Tone without thresholds. - [Activity heatmap](https://docs.tkcode.si/components/activity-heatmap.md): See a year of activity at a glance, one square per day. Also called: contribution graph, calendar heatmap. Covers: Years and controls, Units and weeks, Thresholds, Selecting a day. - [Animated counter](https://docs.tkcode.si/components/animated-counter.md): A large number whose changed digits roll to the new value, like an odometer, without changing its width. Also called: rolling number, number ticker, count up. Covers: Decimals and suffix, Updating the value, Reveal on view, Driving it from data, Formatting and culture, Using motion with restraint. - [Ridgeline](https://docs.tkcode.si/components/ridgeline.md): Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs. Covers: Datasets, Items and value formats, Overlap and smoothness, Tint and domain, Reading a ridge. - [Treemap](https://docs.tkcode.si/components/treemap.md): A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile. Also called: hierarchy chart, area breakdown. Covers: Choosing a tree source, Node tree, Shading and color, Formatting, Switching measures, Focus and zoom. ### Advanced charts Package: `TKCode.Arc.AdvancedCharts`, `UseArcAdvancedCharts()`. - [Data grid](https://docs.tkcode.si/components/data-grid.md): A spreadsheet grid with range selection, inline editing, a fill handle, clipboard, undo, sorting, filters, grouping, totals and export. Also called: spreadsheet, editable grid, data table with editing, excel-like grid. Covers: Column types, Cell renderers, Editing, clipboard and undo, Validation, locked cells and conditional styles, Adding rows, Columns, saved views and cell events, Find and replace, Rows from your own classes, Sorting, filters and search, View state, Grouping and totals, Checked rows and bulk actions, Export, Server data, Striped rows, Loading and empty states. - [Sunburst](https://docs.tkcode.si/components/sunburst.md): A hierarchy drawn as concentric rings: click a segment to make it the new centre, with a breadcrumb back, a rolling total and a legend of shares. Also called: radial treemap, ring hierarchy, multi-level pie chart, zoomable hierarchy. Covers: Controlled focus, Depth and legend, Formatting and empty state. - [Sankey flow](https://docs.tkcode.si/components/sankey-flow.md): Flows between stages drawn as ribbons with drifting particles: hover or focus a node or ribbon to trace its share through the whole journey. Also called: sankey diagram, flow diagram, alluvial chart, funnel flow, user journey chart. Covers: Columns, Links and cycles, Formats and totals, Tracing, Particles. - [Funnel chart](https://docs.tkcode.si/components/funnel-chart.md): A tapered conversion funnel with the drop-off at each step: split or isolate segments on a spring, and watch dots leave the band at the real rates. Also called: conversion funnel, sales funnel, drop-off chart, pipeline chart. Covers: One series, Segments and views, Reading the numbers, Formats, Orientation and size, Reading the active step in code, Changing data. - [Radar chart](https://docs.tkcode.si/components/radar-chart.md): Compare several profiles on one web of measures: swap a profile and its shape morphs, sweep the axes and each value reads out. Also called: spider chart, web chart, star plot, skill radar, capability chart. Covers: Axes and series, Scales, missing values and clamping, Several products with their own scales, Swapping a profile, Grid shape, rings and fill, Reading an axis, Size and legend. - [Realtime stream](https://docs.tkcode.si/components/realtime-stream.md): A live line chart that scrolls as readings arrive, holds still under the pointer so a point can be read, and marks readings flagged as anomalies. Also called: live line chart, streaming chart, real-time chart, telemetry chart, scrolling time series. Covers: Feeding from a collection, Window and interval, Value axis, Anomalies, Pausing, Formats. - [Race bar chart](https://docs.tkcode.si/components/race-bar-chart.md): A ranking that changes over time: bars slide past each other as their values climb, and a timeline plays, pauses or scrubs the periods. Also called: bar chart race, racing bars, animated ranking, ranking over time, leaderboard animation. Covers: Rising and falling values, Controlling the timeline, Groups and highlight, Formats and timing, Reading a bar, Data and performance. ### Workflow Package: `TKCode.Arc.Workflow`, `UseArcWorkflow()`. - [Workflow canvas](https://docs.tkcode.si/components/workflow-canvas.md): Show a workflow on a dotted canvas and play its runs: each step lights up in turn, the data draws along the edges, and every step reports its result and time. Also called: node editor, flow chart, pipeline diagram, DAG view. Covers: Playing a run, Step states, A finished run, Compact steps, Left to right, Edge styles, Panning and zooming, Arranging, Editing, Connecting steps, Undo and redo, Toolbar commands, Custom card content, Large workflows, Narrow canvases, Fitting and sizes, Placing steps. ### Dock Package: `TKCode.Arc.Dock`, `UseArcDock()`, not on NuGet yet. - [Dock layout](https://docs.tkcode.si/components/dock-layout.md): An IDE-style layout of tabbed panes in nested, resizable splits around a document area: drag panes to dock them, float them in their own windows, auto-hide tools to the edges, bind documents to a collection, switch panes from the keyboard, and save layouts to JSON. Also called: docking panels, IDE layout, tool windows, docking manager. Covers: Tabs and splits, Moving panes, Drag to dock, Floating, Auto hide, Maximize and the pane switcher, Save and restore, Documents from a collection, Locking. ### Video Package: `TKCode.Arc.Video`, `UseArcControls()`, not on NuGet yet. - [Video player](https://docs.tkcode.si/components/video-player.md): Play a video with controls over the picture: seek with chapters, volume, speed, captions and full screen, drawn in Arc's style and decoded by the platform's own player. Covers: Animated films, Captions and chapters, Controls, Playback backends. - [Video surface](https://docs.tkcode.si/components/video-surface.md): Show a video's picture with nothing over it, as a background or under controls of your own; it clips, fades and transforms like any control. Covers: Controls of your own. ### PDF Package: `TKCode.Arc.Pdf`, `UseArcPdf()`, not on NuGet yet. - [PDF viewer](https://docs.tkcode.si/components/pdf-viewer.md): View a PDF with thumbnails, a table of contents, search, text selection, links and password prompts, rendered by PDFium on desktop and pdf.js in a browser. Also called: pdf reader, pdf preview, document viewer, pdf.js, pdfium. Covers: Sidebar, Search, Selecting text, Links, Locked documents, Pages only, Platforms and packages. ### Tables - [Table](https://docs.tkcode.si/components/table.md): Compare structured records with sortable columns. Also called: data table, list view with columns, grid view, sortable table. Covers: Columns and sorting, Selection, Cell content and formatting, Multi-line cells, Sorting and events, Striped rows, Empty and loading states, Five thousand rows, Narrow. - [Tree table](https://docs.tkcode.si/components/tree-table.md): A table with nested rows, tri-state selection, hierarchy-preserving sort, and lazy-loaded children. Also called: tree grid, tree list view, hierarchical table. Covers: Columns, Row identity, Expanding and collapsing, Selection, Sorting, Loading children on demand, Activating a row, Striped rows, Responsive columns. - [Tree view](https://docs.tkcode.si/components/tree-view.md): Navigate nested folders and structured content. Also called: tree, folder tree, outline, hierarchy. Covers: Choosing inline items or a data source, Data with a children selector, Icons, Rich row content, Disabled nodes, Expanding and collapsing from code, Events, Thousands of nodes. - [Reorderable list](https://docs.tkcode.si/components/reorderable-list.md): Organize items with direct drag and drop. Also called: sortable list, drag to reorder, drag and drop list. Covers: Reacting to a move, Custom item template, Length and scrolling. - [Filter toolbar](https://docs.tkcode.si/components/filter-toolbar.md): The strip above a table or list with the applied filters as removable chips, an Add filter menu, search and a reset. Also called: filter bar, query builder, faceted filters. Covers: Filters from code, Responding to changes, Search, Extra actions, No filters, Narrow, Filter menu on its own, Focus and dismissal. - [Code block](https://docs.tkcode.si/components/code-block.md): A read-only code viewer with a file-name header, syntax colors and a copy button. Also called: code viewer, syntax highlighting, source view. Covers: Collapsing long code, Language, Copy and line numbers, Labels, Switching files, Narrow. - [JSON viewer](https://docs.tkcode.si/components/json-viewer.md): A collapsible JSON tree with search, paging for long arrays, and copy value or path. Also called: JSON tree, object inspector. Covers: Loading data, Expansion, Search, Long arrays, Paths and copy, Narrow containers. ### Activity - [Timeline](https://docs.tkcode.si/components/timeline.md): Follow what happened, newest first, grouped by day. Also called: activity feed, history, audit log, changelog list. Covers: Live feed, Expandable rows and tones, Long history. - [Comment thread](https://docs.tkcode.si/components/comment-thread.md): Threaded comments with replies, reactions, mentions, inline edit, and resolve. Also called: comments, discussion, replies. Covers: Mentions and people, Reactions and depth, Resolve and reopen, Changes and persistence, Narrow. - [Chat thread](https://docs.tkcode.si/components/chat-thread.md): A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments. Also called: chat, messages, conversation view, message list. Covers: Grouping, time and culture, Sending and attachments, Status, read receipts and typing, Reactions and the picker, Streaming a reply, Composer on its own. ### Media - [Image compare](https://docs.tkcode.si/components/image-compare.md): Drag a divider across two images to see what changed. Also called: before and after, image slider compare. Covers: Labels and frame, Vertical comparison, Pictures, Position, Alignment and cropping, Using motion with restraint. - [Carousel](https://docs.tkcode.si/components/carousel.md): Browse a row of slides by dragging, flicking, or arrowing through them. Also called: slideshow, image gallery, slider of cards. Covers: Slide width and gap, Bound items, Driving it from code, Slide size and labels, Autoplay, Using motion with restraint, Long carousels, Photos. - [Card stack](https://docs.tkcode.si/components/card-stack.md): Review a deck one card at a time, with a throw and an undo. Covers: Card face and size, Deciding and undoing in code, Naming cards, Custom button and stamp text, Empty state, Photos. - [Page viewer](https://docs.tkcode.si/components/page-viewer.md): Zoom, pan and page through pictures or pages rendered on demand. Also called: document viewer, image viewer, zoom and pan, pdf pages, page reader. Covers: Layout, Fit and zoom, Panning, Rendering on demand, Layers, Moving to a place, Deriving from it. ### Text effects Decorative: effects and showpieces. Use one only when the brief asks for that effect, not for ordinary controls. - [Text reveal](https://docs.tkcode.si/components/text-reveal.md): A headline or short paragraph whose words rise in once when it appears on screen. Covers: Heading levels and paragraphs, Line breaks and width, Delay and stagger, Replay, Entrance before the first layout, Tracking, leading and blur, Driving it from data, Using motion with restraint. - [In-view title](https://docs.tkcode.si/components/in-view-title.md): Bring a section title in as it scrolls into view. Covers: Choosing a variant, Heading level, Explicit lines, Replay on every entry, Driving it from data, Using motion with restraint. - [Text morph](https://docs.tkcode.si/components/text-morph.md): Morph a label into its next state, letter by letter. Covers: Changing state, Matching, Font. - [Text shimmer](https://docs.tkcode.si/components/text-shimmer.md): Show ongoing work with a calm light across the words. Covers: Choosing the state, Changing the text, Finishing, Sweep speed, Size and color, Driving it from code, Using motion with restraint. ### Layout - [Waterfall panel](https://docs.tkcode.si/components/waterfall-panel.md): A masonry panel: cards of different heights flow into equal columns, each to the shortest one, so they pack without gaps. Covers: Horizontal, Lane count, Item size limits, Filling the last item, In an ItemsControl. - [Tile panel](https://docs.tkcode.si/components/tile-panel.md): A start-screen tile grid: tiles span rows and columns, take the first free place without overlapping, and resize with the panel. Covers: Grid size, Span limits, Auto fill, In an ItemsControl. - [Cyclic panel](https://docs.tkcode.si/components/cyclic-panel.md): A list that loops without a seam: after the last item comes the first, scrolled by wheel, touchpad or code, with the visible items reported. Covers: Horizontal, Visible item count, Scrolling from code, Wheel and touchpad, Visible items, Animation, In an ItemsControl. ### Extras - [Markdown](https://docs.tkcode.si/components/markdown.md): Render Markdown documents and streamed replies in Arc's style, with fenced code highlighted in Arc's syntax palette. Also called: Markdown viewer, Markdown renderer, streaming text. Covers: Bound document, Streamed reply, Chat size, Links, Host integration, Code highlighting, Services and precedence. - [Token text editor](https://docs.tkcode.si/components/token-text-editor.md): A multi-line text editor whose tokens, such as commands and mentions, behave as single units, with triggers that open a query for your own list. Covers: Triggers, Tokens, Styling tokens, Height and submitting, Reading the state. - [Cascader](https://docs.tkcode.si/components/cascader.md): Pick one node of a hierarchy level by level, such as province, city and district, with a field and menu that match Select. Also called: cascading select, nested dropdown, region picker. Covers: Choosing parents, What the field shows, Opening on hover, Disabled and read-only, Clearing. - [Transfer box](https://docs.tkcode.si/components/transfer-box.md): Move items between two lists, one by one, as a selection or all at once, with select all, search and the bound collections edited in place. Covers: Selecting and moving, Objects, text and templates, Search and moving everything, Commands, methods and events. - [Property grid](https://docs.tkcode.si/components/property-grid.md): Edit the properties of one or more objects in rows of label and editor, grouped by category, with search, nested values and lists. Also called: property inspector, settings inspector, object editor. Covers: Several objects, Nested values and lists, Custom editors and styles, Registering types in code, Avalonia controls, Layout options, Changes and errors. - [Window](https://docs.tkcode.si/components/arc-window.md): A desktop window with an Arc title bar: left, center and right areas for your controls, native dragging, snapping and resizing, and caption buttons that follow the theme. Also called: custom title bar window, chromeless window. Covers: Your controls in the bar, Height, Caption buttons, Always on top, Without the bar, Previews. - [Number filter box](https://docs.tkcode.si/components/number-filter-box.md): One number filter condition: a checkbox to switch it on, an operator shown as a symbol and a value, with an optional tolerance. Covers: Integer and decimal values, Switching a filter off, Choosing the operators, Filtering in the view model, Lining up stacked filters. - [Text filter box](https://docs.tkcode.si/components/text-filter-box.md): One text filter condition: a checkbox to switch it on, contains, starts with, ends with, equals or a regular expression, and case sensitivity. Covers: Regular expressions, Extra content, Filtering in the view model, Lining up stacked filters. - [Enum selector](https://docs.tkcode.si/components/enum-selector.md): Pick from the members of an enum: radio options for a plain enum, and checkboxes that combine flags for a [Flags] enum, described at compile time without reflection. Covers: Flags, Display modes, Display names, Layout, Custom labels, Registering an enum in code. - [Fluid tab control](https://docs.tkcode.si/components/fluid-tab-control.md): Tabs beside one scroll area that holds every tab's content in order. Picking a tab scrolls to its section, and scrolling selects the tab of the section in view. Also called: scroll spy, scroll-linked tabs, anchor navigation, table of contents tabs, settings navigation. Covers: Placement and anchor, Data-bound tabs, Smooth scrolling, Adding and removing tabs, Selecting in code, Custom tabs and icons. ### Loaders Package: `TKCode.Arc.Special`, `UseArcSpecial()`. - [Stretch refresh](https://docs.tkcode.si/components/stretch-refresh.md): A feed you pull down to refresh: the rows spread apart, a line stretches across the gap until it is time to let go, then runs while new items arrive. Covers: States, Your own rows, Errors and labels, Narrow containers and the threshold, Reduced motion. - [Morph loader](https://docs.tkcode.si/components/morph-loader.md): A tiny loader whose four strokes morph between dots, bars, a ring and a square, then fold into a check or a cross when the work finishes. Covers: Shapes and results, Sizes, Inside a button, Color, Reduced motion. - [Skeleton morph](https://docs.tkcode.si/components/skeleton-morph.md): Loading placeholders that stretch into the real content block by block, while the card eases to its new height. Covers: Driving it, Skeleton shapes, Stagger, Reduced motion, States. - [Black hole](https://docs.tkcode.si/components/black-hole.md): A delete transition that spirals the chosen items into a small singularity while the rest of the list bends around it, and spins them back out on undo. Covers: The whole API in one place, Where the hole opens, Narrow containers, Reduced motion, States. - [Charge session](https://docs.tkcode.si/components/charge-session.md): A live charging card: energy flows from the charger along the cable into the battery, which fills toward a draggable limit while power, energy, time and cost update. Covers: Events and other currencies, States, Moving the limit, Your own session, Narrow containers, Reduced motion. ### Playful Package: `TKCode.Arc.Special`, `UseArcSpecial()`. Decorative: effects and showpieces. Use one only when the brief asks for that effect, not for ordinary controls. - [Sticker peel](https://docs.tkcode.si/components/sticker-peel.md): A surface of stickers with a real peel. Hovering lifts a corner, pulling folds the sticker back with its paper backing showing, and letting go sticks it down where you dropped it. Covers: Stickers, Saving the arrangement, Using the keyboard. - [Page curl](https://docs.tkcode.si/components/page-curl.md): A small book that opens on its cover, with pages that fold along a line that follows the pointer. Covers: Sizing, Pages from data, Tease, hint and controls. - [Orbit logos](https://docs.tkcode.si/components/orbit-logos.md): An integrations orbit: your product mark in the centre, logos on two slowly turning rings, and a card that morphs out of the logo you pick. Covers: Marks, Categories, Opening, connecting and the centre. - [Ticket tear](https://docs.tkcode.si/components/ticket-tear.md): An event ticket with a stub you tear off. It rips along the perforation one hole at a time, following your hand, and once free it falls away. Covers: Knowing when it was torn, and tearing it yourself, Paper and size. ### Audio and video Package: `TKCode.Arc.Special`, `UseArcSpecial()`. - [Voice orb](https://docs.tkcode.si/components/voice-orb.md): A glowing voice-mode sphere that breathes at rest, ripples while it listens, swirls while it thinks and pulses as it speaks, with live captions and call controls. Covers: Every state, Your own levels, Captions and the call bar, Colors, Reduced motion. - [Now playing](https://docs.tkcode.si/components/now-playing.md): A mini player bar that grows into a full player in one continuous morph, with a waveform scrubber and artwork that slides the way you skip. Covers: The full player, Playback and real audio, The level bars on their own, Gestures, Narrow containers, Reduced motion. - [Voice recorder](https://docs.tkcode.si/components/voice-recorder.md): A voice note composer: record into a live waveform, review and scrub the take, then send it into the thread as a voice bubble. Covers: Messages, Your own events, Recording and review, Levels from your microphone, Narrow containers, Reduced motion. ### Surfaces Package: `TKCode.Arc.Special`, `UseArcSpecial()`. - [Sheet stack](https://docs.tkcode.si/components/sheet-stack.md): Drill-down panels that rise over one another, keep the level below in view, drag away to close and turn into stacked dialogs on wide screens. Covers: Opening, closing and events, Dialogs, descriptions and confirmations, Narrow containers, Gestures, Reduced motion. - [Wallet stack](https://docs.tkcode.si/components/wallet-stack.md): A wallet of payment cards in real materials: fan the stack, flick through it and lift a card out to see its balance and recent activity. Covers: Materials, Gestures, Your own data and events, Currency, culture and labels, Narrow containers, Reduced motion. - [Control center](https://docs.tkcode.si/components/control-center.md): A quick settings panel whose tiles grow into their details, with a focus-session dial and volume and text-size meters that stretch at their ends. Covers: Every state, The Focus detail, The Notifications detail, Your own labels and content, Narrow containers, Reduced motion. - [Holo card](https://docs.tkcode.si/components/holo-card.md): A collectible card drawn in perspective that follows the pointer with a shifting rainbow sheen, then turns over to reveal a second side. Covers: Turning over, A badge that only tilts, Reduced motion, Gestures. - [Card to article](https://docs.tkcode.si/components/card-to-article.md): Story cards that grow into full articles in one continuous morph and shrink back into their place when you pull them down. Covers: Opening and closing from code, Writing the article, Pulling to close, Narrow containers, Reduced motion. - [Link unfurl](https://docs.tkcode.si/components/link-unfurl.md): A message composer that turns a pasted address into a link, shows it loading, then unrolls it into a preview card you can fold back or remove. Covers: Your own resolver and send handler, Opening cards on demand, States, Gestures, Narrow containers, Reduced motion. ### Cursor Package: `TKCode.Arc.Special`, `UseArcSpecial()`. Decorative: effects and showpieces. Use one only when the brief asks for that effect, not for ordinary controls. - [Dot grid](https://docs.tkcode.si/components/dot-grid.md): A field of dots that swells away from the pointer like a lens and sends a ripple out from every click. Covers: As a hero, Density, lens and colors, Ripples from code. - [Gravity well](https://docs.tkcode.si/components/gravity-well.md): Tiles that lean toward the pointer, shrink and dim as if pulled into a well, with a click that rolls a shockwave through the grid. Covers: Columns, Reach and strength, Responding to a shockwave. - [Ink fluid](https://docs.tkcode.si/components/ink-fluid.md): A fluid simulation behind your content: the pointer stirs soft ink that swirls and fades, and a slow stir keeps it moving when nobody does. Covers: Tuning the ink, Quality, A waiting screen. ### AI Package: `TKCode.Arc.Special`, `UseArcSpecial()`. - [Agent status](https://docs.tkcode.si/components/agent-status.md): A live status pill for a running agent: its mark in a spinning ring, the current step and a timer, opening into the recent steps with pause, stop and approval controls. Also called: AI status, agent running indicator. Covers: Every state, The panel, Your own run, Offering only what you can honor, The simulation, Narrow containers, Reduced motion. - [Tool call](https://docs.tkcode.si/components/tool-call.md): A tool call row for an agent transcript: the tool, what it did and how it went, opening into the call's input and output, with approval and retry in place. Also called: function call, tool invocation, tool use card. Covers: Statuses, Outputs, A group driven by your own data, Opening and folding, The simulation, Narrow containers, Reduced motion. - [Agent plan](https://docs.tkcode.si/components/agent-plan.md): An agent's plan as an editable checklist: reorder, rename and add steps while it is a draft, then follow the run step by step once it is approved. Also called: task plan, todo list for agent. Covers: Editing a draft, A controlled plan, A plan in the middle of its run, The simulation, Times and counts, Narrow containers, Reduced motion. - [Agent timeline](https://docs.tkcode.si/components/agent-timeline.md): A replay of a multi-agent run on one time axis: each agent's thinking, tool calls and waiting, the handoffs between them, and the time, tokens and cost. Covers: The preview's run, Your own run, Numbers and formats, Playback and speed, Pinning a span, Live runs, Narrow containers. - [Context window](https://docs.tkcode.si/components/context-window.md): A model's context window as a grid of 200 cells that fills part by part, with a compaction threshold, a legend and actions that show what still fits. Also called: token usage, context meter. Covers: How the cells are counted, Send, attach and compact, Your own session, Driving it from your app, A different threshold, Narrow containers, Reduced motion. - [Reasoning block](https://docs.tkcode.si/components/reasoning-block.md): The collapsible thinking block of an AI reply: a card whose label counts the seconds while the model thinks, with the latest reasoning streaming under it, and the full reasoning as steps on a quiet rail once it has finished. Also called: thinking block, chain of thought, reasoning trace. Covers: States, Stopping, Plain, Simulated model, Your own words, Reduced motion. - [Source cards](https://docs.tkcode.si/components/source-cards.md): A row of cited sources under an AI answer: cards stream into reserved slots while the model searches, the overflow collapses into a stack of site marks, hovering lifts a preview with the passage, and an inline [n] citation highlights its card. Also called: citations, references, sources. Covers: Streaming an answer with citations, The stack and narrow containers, Your own reader and failures, Status line, Site marks, Your own words. - [Model card](https://docs.tkcode.si/components/model-card.md): A model details card where switching models rolls every price, limit and score in place, a volume slider estimates the monthly cost, benchmark bars show each model's rank, and Compare crossfades to a side by side table against any rival. Also called: model info, model details. Covers: Compare, Loading and errors, In a model picker, Narrow cards, Events, Your own words, Reduced motion. - [AI workflow](https://docs.tkcode.si/components/ai-workflow.md): An automation card where a trigger, an AI step, a branch and actions sit on one rail, a test run glides down it opening each step's output, and steps are added from a compact command menu. Covers: Steps, Simulation, Running steps for real, Outputs, Adding and removing steps, Read only, Loading, Narrow, Your own words. - [Code suggestion](https://docs.tkcode.si/components/code-suggestion.md): An AI code edit suggestion where the proposed changes stream into a small editor panel as inline diff hunks, and the person accepts or rejects each one, or all at once with Cmd or Ctrl + Enter. Covers: Streaming, States, Narrow cards, Long files, The model and the file, Simulation, Your own words, Reduced motion. - [Ghost text](https://docs.tkcode.si/components/ghost-text.md): An inline AI autocomplete where muted ghost text continues the sentence at the caret: Tab accepts it in place, Cmd+Right takes one word, Escape dismisses it, and a calm chip shows the model behind it. Also called: inline suggestion, autocomplete suggestion, copilot text. Covers: Streaming suggestions, Single line, Plain, Events and methods, States, Writing suggestions, Your own words. - [Image generation](https://docs.tkcode.si/components/image-generation.md): An image generation card where four images resolve as a pixel mosaic, from coarse colour blocks to full detail, each with its own progress ring; pick one to upscale, vary or download. Covers: Picking, upscaling, varying and downloading, Portrait shapes, Your own generator, Listening to the card, Narrow containers, Your own words and models, Reduced motion. - [Dictation button](https://docs.tkcode.si/components/dictation-button.md): A chat composer with voice input: the mic springs into a recording pill with a live waveform, a timer, cancel and Insert, and words stream into the field as you speak, muted until the recognizer settles them. Also called: voice input, speech to text, microphone button. Covers: States, Your own recognizer, Only the control, A blocked microphone, Narrow columns, Reduced motion, Autoplay, Your own words. - [Speech player](https://docs.tkcode.si/components/speech-player.md): A read-aloud player for AI replies: Read aloud turns into a compact player with play, a scrubbable progress bar, speed and a voice picker, and a highlight follows the spoken word through the reply. Also called: text to speech, audio playback. Covers: States, In a chat column, Events, Driving it from code, Simulated speech, Your own words, Narrow containers and touch. - [Meeting summary](https://docs.tkcode.si/components/meeting-summary.md): AI notes for a call: the platform, attendees and length, then Summary, Decisions and Action items that stream in, each line linked to its transcript quote and each task ready to check off or send to a tracker. Covers: Simulation, Your meeting, Streaming from your model, Sending action items, Checking items off, Transcript quotes, States, Narrow cards, Your own words, Reduced motion. - [Reply draft](https://docs.tkcode.si/components/reply-draft.md): An AI reply drafter under a received email: quick replies steer a fresh streaming draft, tone and length rewrite it with one crossfade, and the reader edits it before Insert. Covers: Simulation, States, Your own model, Inserting, Starting on demand, Narrow containers, Your own words. - [Agent handoff](https://docs.tkcode.si/components/agent-handoff.md): A support chat where an AI assistant hands off to a person: a card shows the summary it passes to the team and the typical wait, then the person joins, with a thin timeline marking each step. Covers: Stages, Actions and the composer, Streaming and typing, Narrow containers, Marks and avatars, The simulation, Your own words. - [PII redaction](https://docs.tkcode.si/components/pii-redaction.md): A guardrail card where personal data is redacted before the prompt reaches the model, and the reply comes back with the original values put back. Covers: Simulation, Phases, Playground, Your detector and your model, The helpers without the card, Narrow containers. - [Response feedback](https://docs.tkcode.si/components/response-feedback.md): A feedback control for AI replies: thumbs down opens an inline panel with reason chips and a note, thumbs up asks what was good, and a submit shows a short thank-you before folding back into the row. Also called: thumbs up down, rate response. Covers: Your own message rows, Saving feedback, Reasons and the note, While the reply streams, Your own words, Narrow containers. - [LLM cost calculator](https://docs.tkcode.si/components/llm-cost-calculator.md): A pricing calculator for LLM workloads: set tokens per request, requests per day and prompt caching, and the models re-rank by monthly cost as bars glide and prices roll. Covers: Your prices and workload, The same numbers on the server, Presets, Loading, errors and no models, Narrow layouts, Your own words. - [Provider keys](https://docs.tkcode.si/components/provider-keys.md): A settings card for bring-your-own-key AI products: each provider's masked key, status and last use, with reveal, copy, rotate and remove with undo, and an inline form that tests a new key before saving. Covers: Your API, Empty state, Simulated tests, Loading, Narrow cards, Your own words. - [Generation stats](https://docs.tkcode.si/components/generation-stats.md): A live stats strip for a streaming model response: time to first token, speed with a sparkline, output tokens and cost count up, then settle and open into a latency and token cost breakdown. Covers: States, Speed and cost, Breakdown, Inline, Failures and stops, Simulated runs, Responsive, Your own words. - [AI translate](https://docs.tkcode.si/components/ai-translate.md): A message card where picking a language streams the AI translation in place, sentence by sentence over the dimmed original, with a detected-language chip, a Show original toggle and a status line. Covers: Simulation, Streaming from your model, Ready translations, Following a preferred language, Narrow, States, Persisting translations, Your own words and mark, Autoplay. - [TL;DR toggle](https://docs.tkcode.si/components/tldr-toggle.md): An article card that streams an AI summary or key points in place of the article, with a length slider and key points that jump back to their paragraphs. Covers: Simulation, Key points, Results, Stop and Regenerate, Your own summarizer, Failures, Narrow containers, Autoplay, Your own words. - [Connector setup](https://docs.tkcode.si/components/connector-setup.md): A "Connect your tools" card for an AI assistant: each app connects inline through redirect, authorize and a first sync with a progress hairline, then lists the scopes it was granted and offers Disconnect with an inline confirmation. Covers: Simulation, Your own flow, Onboarding, Marks, States, Your own words. - [Smart form fill](https://docs.tkcode.si/components/smart-form-fill.md): A paste-to-fill form card: AI reads an email signature or messy notes and fills a contact form field by field, with a confidence dot per value, its source lit up in the text, review for guesses and Undo. Covers: Simulation, Reading and filling, Review and Undo, Your own fields, Narrow columns, Your own words. - [Enrich column](https://docs.tkcode.si/components/enrich-column.md): An AI enrichment column for a data table, where one prompt runs down every row and each cell shimmers while it works, then settles into a value with its source or a failure you can retry. Covers: Simulation, Your rows and service, States, Running, Saved values, Narrow and long tables, Your own words. - [Ticket router](https://docs.tkcode.si/components/ticket-router.md): Support messages arrive one at a time, an AI classifier labels intent, sentiment and confidence, and each ticket travels into a team lane with an assignee or waits in a review lane for one click. Covers: Simulation, Your classifier, Lanes and routing, Your queue, Pausing and speed, Narrow containers, Your own words. - [Ask your data](https://docs.tkcode.si/components/ask-your-data.md): A natural language to chart card: the question goes in, the SQL streams into a collapsible, syntax tinted panel, the query runs with a rolling row count, and the answer builds as stacked bars, lines or a table with a one line insight underneath. Covers: Simulation, Streaming the SQL, Results, Errors and stopping, The SQL panel, Chart views, Narrow cards, Your own words. - [Agent cursor](https://docs.tkcode.si/components/agent-cursor.md): A live document where an AI agent edits like a collaborator: its labeled cursor selects, rewrites and fixes text while a teammate reads along, and the changes stay tinted until someone accepts or undoes them. Covers: Simulation, Your document and edits, Fetching edits from your agent, Review, accept and undo, Narrow containers, Your own words. - [Provider status](https://docs.tkcode.si/components/provider-status.md): A status card for the AI providers your product depends on: health as an icon and label, median latency and a 30 day uptime bar with a tooltip per day, incidents that open into their updates, and a visible countdown to the next check. Covers: Simulated checks, Your providers, Uptime bar, Incidents, Checks and errors, States, Narrow cards, Your own words. - [Training run](https://docs.tkcode.si/components/training-run.md): A fine-tuning job card where a live train and validation loss curve draws across a fixed step axis that doubles as the epoch progress bar, with the learning rate, elapsed time, ETA, recent events, pause and cancel, and results with Deploy. Covers: Driven by your app, Results and deploy, Narrow, Your own words. - [Design to code](https://docs.tkcode.si/components/design-to-code.md): A screenshot-to-code card: a scan line finds the layout regions of a dropped screenshot or design file frame, then code streams in beside it, linked region by region, with a live preview one tab away. Covers: Simulation, The run, Your model, Dropping a screenshot, Design files, The live preview, Narrow containers, Reduced motion. - [AI command](https://docs.tkcode.si/components/ai-command.md): A Cmd+K command palette with an AI mode: search pages and actions, or press Tab to ask, and the answer streams in place with numbered sources and next steps that run from the list. Covers: Your pages and actions, Asking, Suggested actions, As a dialog, Narrow containers, Your own words, Simulated workspace. - [Starter prompts](https://docs.tkcode.si/components/starter-prompts.md): A greeting and starter cards for the empty state of an AI app, with category tabs, a shuffle that crossfades the cards, and a composer that a picked card fills. Also called: suggested prompts, prompt suggestions. Covers: The empty state, Your own starters and tabs, Sending, Your own composer, Loading, Narrow containers, Your own words. - [AI mascot](https://docs.tkcode.si/components/ai-mascot.md): A small assistant character that shows what the AI is doing: it breathes when idle, leans in to listen, watches its dot orbit while thinking, reads along as it writes, squints when done and shakes once on an error. Covers: States, In a reply header, Sizes, Tones and colors, Following the pointer, Companion and ground, Pausing, Reduced motion. - [Image reveal](https://docs.tkcode.si/components/image-reveal.md): An image generation canvas where a soft, blurred preview made from the image's own colors sharpens top to bottom behind a soft-edged band, with fine film grain, a translucent progress pill and calm queued and error states. Covers: States, A generator, No progress events, A simulation, A grid of variations, Your own words. - [AI spark](https://docs.tkcode.si/components/ai-spark.md): An animated spark mark for AI status: four tapered rays and four lighter diagonals breathe at rest, ripple while thinking, pulse like a heartbeat while writing, then gather and settle when done. Covers: States, Pill, Avatar, Inline in text, Sizes, Color, Hero mark, Speed and pause. - [Sketch to image](https://docs.tkcode.si/components/sketch-to-image.md): An image generation visual that paints the way an artist does: pencil strokes sketch the scene, a round brush blocks in flat colors region by region, grain and warm light refine it, and it resolves into the finished picture. Covers: Following a request, Stages, Sizes, Tone, Your own scene, Your own words, Reduced motion. - [Building blocks](https://docs.tkcode.si/components/building-blocks.md): A loading visual for AI app builders: rounded blocks snap into a tiny app layout with no bounce, fill with content and pick up the accent while the label steps from Laying out to Ready. Covers: Driven by the app, Sizes, Tone and tint, Play once, Without the status line, Your own words, Reduced motion. - [Pixel mascot](https://docs.tkcode.si/components/pixel-mascot.md): A pixel-art robot that shows what an AI assistant is doing. It idles, thinks, types, celebrates and errors in frame-stepped sprite animations, and stays crisp at every integer size from 24px to 192px. Covers: Statuses, The built-in loop, Sizes, Next to text, Accent, Reduced motion. - [Ghost mascot](https://docs.tkcode.si/components/ghost-mascot.md): A floating ghost mascot whose hem ripples while it hovers: it blinks when idle, listens, thinks under a swirl, writes with a tiny pen, sparkles when done and wobbles on an error. Covers: States, In a reply header, Sizes, Color, Empty state, On an image canvas. - [Cube mascot](https://docs.tkcode.si/components/cube-mascot.md): An isometric cube mascot whose shaded faces and painted-on face show what the assistant is doing: it turns in eased quarter turns while thinking, prints lines onto the floor while writing, settles with a sparkle when done and shakes once on error. Covers: States, In a reply header, Sizes, Colors, On a canvas, and pausing. - [Tone tuner](https://docs.tkcode.si/components/tone-tuner.md): A brand voice card where two sliders (formality and detail) and voice chips rewrite a customer reply: each changed sentence crossfades in place, new words can be highlighted against the original, and Copy takes the current version. Covers: Simulation, Your model, Tone, Changes, Failures, Narrow, Your own words. - [Upgrade prompt](https://docs.tkcode.si/components/upgrade-prompt.md): An upgrade nudge for the moment someone hits a limit, with a usage meter, a rolling price with a monthly and yearly toggle, three concrete unlocks and a success state, in a card that never changes size. Covers: States, Your plan and unit, Running the upgrade, Narrow containers, Reduced motion. - [Referral card](https://docs.tkcode.si/components/referral-card.md): A give-and-get referral card where people copy or share their invite link, invite friends by email as chips, and watch invites move from invited to signed up to earned, with the credit total counting up and a milestone reward unlocking. Covers: Your data, Sharing, Inviting by email, Narrow cards, Your own words. - [Trial banner](https://docs.tkcode.si/components/trial-banner.md): A trial status banner where a ring counts down the days left, the copy names what the workspace loses, and the upgrade path is one click away, as a slim banner, a sidebar card or a header pill. Covers: Days and dates, Variants, Checkout, Dismiss and snooze, Narrow containers, Your own words. - [Team switcher](https://docs.tkcode.si/components/team-switcher.md): A workspace switcher: the trigger shows the current workspace's logo and plan, and the menu searches your workspaces, shows your role and a Cmd/Ctrl+number shortcut for each, and creates or joins one inline. Also called: workspace switcher, organization switcher. Covers: Your workspaces, Switching, Creating and joining, Shortcuts, Disabled, Your own words, Reduced motion. - [Live visitors](https://docs.tkcode.si/components/live-visitors.md): A realtime visitors card where the live count rolls digit by digit, new arrivals ping in on a dotted world map, the top pages reorder with bars, and signups and upgrades tick in. Covers: Push events as they arrive, A simulated stream, Connection states, Pausing, Narrow containers, Your own words, Flags. - [Social proof toast](https://docs.tkcode.si/components/social-proof-toast.md): A stack of social proof notifications for landing and pricing pages, where recent trials, upgrades and verified purchases from people and companies arrive every few seconds; it pauses and fans out on hover, and visitors can dismiss any toast. Covers: Your events, Corner position, Selecting and limiting, Pausing, Your own words. - [Install snippet](https://docs.tkcode.si/components/install-snippet.md): A quickstart card where framework tabs, three numbered steps and highlighted snippets take a developer from install to the first event, and Generate key wipes a fresh key into place. Covers: Your frameworks, Your key service, A simulated SDK, Narrow, Your own words. ### Illustrations Decorative: effects and showpieces. Use one only when the brief asks for that effect, not for ordinary controls. - [Data flow](https://docs.tkcode.si/components/data-flow.md): Events stream from their sources through a queue and a batch transform into a warehouse and live dashboards. Covers: Throughput and filtering, Sources and labels, Playback and speed, Following the story, Reduced motion, Driving it from data. - [Payment flow](https://docs.tkcode.si/components/payment-flow.md): A card payment from checkout through tokenization, authorization and the issuer's decision to settlement. Covers: Amount, currency and merchant, Declines, Labels, Reacting to decisions, Playback, Reduced motion. - [Multi-region failover](https://docs.tkcode.si/components/multi-region-failover.md): A global load balancer shifts traffic to a standby region and promotes its database when the primary region goes down. Covers: Regions, Driving the failure yourself, Labels, Playback, Reduced motion, Driving it from code. - [Vector search](https://docs.tkcode.si/components/vector-search.md): A question is embedded as a vector and answered with its nearest documents by cosine similarity. Covers: Number of answers, Your own documents and questions, Searching for a question, Labels, Playback, speed and captions, Reduced motion, Using motion with restraint. - [Agent loop](https://docs.tkcode.si/components/agent-loop.md) (`TKCode.Arc.Special`, `UseArcSpecial()`): An agent gathers context, calls tools and checks the result, going round the loop until the task is done. Covers: The story and its timing, Your own run, A run that stops, Playback, steps and speed, Narrow containers, Reduced motion, Driving it from data. - [Mixture of experts](https://docs.tkcode.si/components/mixture-of-experts.md) (`TKCode.Arc.Special`, `UseArcSpecial()`): A router scores every expert for each token and sends it to its top choices, whose outputs blend into the result. Covers: The story, The arithmetic, Top k and capacity, Your own experts and tokens, Inspecting a token or an expert, Playback, events and binding, Narrow containers, Reduced motion. - [Speculative decoding](https://docs.tkcode.si/components/speculative-decoding.md) (`TKCode.Arc.Special`, `UseArcSpecial()`): A small draft model guesses a few tokens ahead and the large model checks them in one pass, keeping the ones it agrees with. Covers: Your own answer, A recorded run, The story and its arithmetic, Comparing with the target alone, Playback, Loading and errors, Narrow cards, Reduced motion. - [Prompt cache](https://docs.tkcode.si/components/prompt-cache.md) (`TKCode.Arc.Special`, `UseArcSpecial()`): Requests that share a prompt prefix read it from the cache instead of processing it again, and the savings add up. Covers: The story, The arithmetic, Your own prefix and requests, Prices and the first token, The change toggle, Playback, stepping and events, Narrow containers, Reduced motion. - [Reasoning tree](https://docs.tkcode.si/components/reasoning-tree.md) (`TKCode.Arc.Special`, `UseArcSpecial()`): A search over candidate thoughts: each is scored, weak branches are pruned, the best expand and the winning path draws in. Covers: Your own question and thoughts, The search, step by step, Timing, Playback, Wide and narrow, Reduced motion. ### Mobile Package: `TKCode.Arc.Mobile`, `UseArcMobile()`. XAML namespace: `xmlns:arcm="https://github.com/AIDotNet/TKCode.Arc.Mobile"`. The controls are `TKCode.Arc.Mobile.Button`, `.Page` and so on, written `arcm:Button`; the API tables call them `MobileButton` so they do not clash with the desktop names. - [Mobile page](https://docs.tkcode.si/components/mobile-page.md): A phone screen: a header, the content and a footer laid out inside the device's safe area. Covers: Safe area, Content only, Scrolling content, Keyboard, Tokens. - [Mobile navbar](https://docs.tkcode.si/components/mobile-navbar.md): The 44 px top bar of a page: a leading slot, a centered title and a trailing slot for actions. Also called: navigation bar, app bar, top bar. Covers: Title only, Back button, Large title, Tokens. - [Mobile toolbar](https://docs.tkcode.si/components/mobile-toolbar.md): The 44 px bottom action bar of a page: plain actions that share the width, or leading, center and trailing slots. Covers: Slots, Above a tab bar, shown and hidden, Tokens. - [Mobile tabbar](https://docs.tkcode.si/components/mobile-tabbar.md): The bottom tab bar of a page: icon-over-label tabs that share the width, with the selected one highlighted. Also called: bottom navigation, tab bar, bottom tabs. Covers: Tokens. - [Mobile navigation stack](https://docs.tkcode.si/components/mobile-navigation-stack.md): A stack of pages: a pushed page slides in over the one below, and a swipe from the left edge or a back button slides it away. Also called: navigation stack, page stack, push navigation. Covers: Tabs with a stack each, Swipe back, Tokens. - [Mobile list](https://docs.tkcode.si/components/mobile-list.md): Grouped rows for settings and menus: icon, title, subtitle, a value or control at the end and a chevron. Also called: grouped list, table view, settings list. Covers: Tokens. - [Mobile pull to refresh](https://docs.tkcode.si/components/mobile-pull-to-refresh.md): Pull scrollable content down at its top to refresh it, with rubber-band resistance, a spinner and a spring back. Also called: pull to refresh, refresh control. Covers: Pass-through, Tokens. - [Mobile dialog](https://docs.tkcode.si/components/mobile-dialog.md): A centered alert or confirmation dialog with a title, a message and up to three actions, over a scrim. Covers: Several overlays on one page, Tokens. - [Mobile toast](https://docs.tkcode.si/components/mobile-toast.md): A transient message that slides up near the bottom, leaves by itself and can be swiped away. Covers: Several overlays on one page, Tokens. - [Mobile sheet](https://docs.tkcode.si/components/mobile-sheet.md): A bottom sheet that rises over a page with a scrim and can rest at several heights, closed by tapping the scrim, pulling the handle down or flicking it. Covers: Detents, Bottom safe area, Tokens. - [Mobile action sheet](https://docs.tkcode.si/components/mobile-action-sheet.md): A bottom list of actions with an optional destructive row and a separate Cancel row, closed by choosing a row, tapping the scrim or pulling it down. Also called: action sheet, bottom menu. Covers: Tokens. - [Mobile button](https://docs.tkcode.si/components/mobile-button.md): A touch-first button with a press state instead of a hover state and a 44 px minimum touch target. Covers: Variants, Tokens. - [Mobile switch](https://docs.tkcode.si/components/mobile-switch.md): A 51 by 31 toggle for settings that take effect at once, with a spring thumb and a 44 px hit area. Covers: Tokens. - [Mobile text field](https://docs.tkcode.si/components/mobile-text-field.md): A 44 px filled text field with an optional icon and a clear button, whose border takes the accent color while focused. Also called: mobile text input. Covers: Tokens. - [Mobile search bar](https://docs.tkcode.si/components/mobile-searchbar.md): A pill-shaped text field with a search glyph, a clear button and a Search key that raises Submitted. Also called: mobile search bar. Covers: Tokens. - [Mobile checkbox](https://docs.tkcode.si/components/mobile-checkbox.md): A 22 px rounded checkbox in a 44 px row, with a check, an indeterminate dash and no hover state. Covers: Tokens. - [Mobile radio](https://docs.tkcode.si/components/mobile-radio.md): A 22 px radio in a 44 px row whose accent dot springs in, one choice per group, with arrow-key navigation and no hover state. Covers: Tokens. - [Mobile icon button](https://docs.tkcode.si/components/mobile-icon-button.md): A 44 by 44 icon-only button with plain, tinted, filled and floating variants and a spring press state. Covers: Floating action button, Tokens. - [Mobile segmented control](https://docs.tkcode.si/components/mobile-segmented.md): A short row of segments that share the width, one selected, for switching between views of the same content. Also called: mobile segmented control. Covers: Tokens. ## Blocks Blocks are complete screens and page regions built from the components, in `TKCode.Arc.Blocks` (`UseArcBlocks()`). ### Analytics - [Metrics dashboard](https://docs.tkcode.si/blocks/metrics-dashboard.md): A one-screen analytics overview with a range switch, metric tabs that count to their totals, an inspectable area chart that can overlay the previous period, and two ranked lists. Also called: dashboard, analytics overview, KPI dashboard. Covers: Counts and rates, Ranges and weeks, Narrow containers, Other data, other words, State and events, Export. - [KPI drilldown](https://docs.tkcode.si/blocks/kpi-drilldown.md): KPI cards with sparklines and period changes that grow in place into a detail view with a trend chart, a prior-period comparison, a readout you can drive by keyboard and a breakdown by dimension. Covers: What a card shows, Detail view, Bound state and events, Fewer metrics, other ranges, Narrow containers, Words. - [Metric explorer](https://docs.tkcode.si/blocks/metric-explorer.md): A row of KPI cards that each open into a chart you can inspect by dragging: the card's surface grows into the panel, the tabs morph the line from metric to metric point by point, the range switch moves a camera window over the daily data, and this period is drawn against the one before it. Covers: Value formats, changes and tones, Ranges, Inspecting a day, Narrow containers, Words and screen reader text. - [Revenue explorer](https://docs.tkcode.si/blocks/revenue-explorer.md): Monthly recurring revenue as stacked new, expansion and churn layers with three headline numbers and an overview strip: drag its window or handles and the paths, axes and numbers slide to the new range, with range presets, series chips, a previous-period comparison and a crosshair readout for the pointer and the keyboard. Covers: The range, Series and comparison, Inspecting a month, Narrow containers, Words, formats and currency. - [MRR waterfall](https://docs.tkcode.si/blocks/mrr-waterfall.md): A recurring-revenue bridge from the start of a period to its end: floating bars for new business, expansion, reactivation, contraction and churn, a side panel that lists the accounts behind any bar, and period and unit switches that move every bar, tick and number on one spring. Covers: The axis and the bars, Selecting a bar and previewing one, Period and unit, Words, symbols and formats, Narrow containers, Events. - [Cohort retention](https://docs.tkcode.si/blocks/cohort-retention.md): How many of each starting group stayed, month by month: a heatmap triangle that morphs into retention curves, headline numbers that compare the newest cohorts with the oldest, segments that repaint every cell, and a cell cursor for the pointer and the keyboard. Covers: Heatmap and curves, Inspecting a cell, Weeks, other periods, other thresholds, Narrow containers, Formats and words. - [Usage forecast](https://docs.tkcode.si/blocks/usage-forecast.md): A billing cycle against a budget: measured usage and a dashed forecast with its likely range, a budget line you drag or step with the keys while the headline, tiles, red overage and alert chips react, and a metric switch that morphs every path. Covers: The budget line, Alerts, Outcomes, Inspecting a day, Narrow containers, Words, formats and dates. - [Journey flow](https://docs.tkcode.si/blocks/journey-flow.md): A journey as a Sankey chart: point at a step or a flow to trace that cohort through every stage, select a step to see where its people came from and went next, and switch segments to watch every flow morph. Covers: Node kinds, Tracing and selection, Narrow containers, Numbers and words, Live counts. - [Uptime status](https://docs.tkcode.si/blocks/uptime-status.md): A status page for a set of services: 90 days of daily bars with uptime figures and a hover card per day, a response-time chart with p50 and p95 curves against a target for the chosen service, and an incident timeline, all derived from the services' samples and the incidents, with keyboard paging by a week. Covers: What is derived, The bars, The response-time chart, Incidents, A status that changes, Header action, Other examples, Narrow containers, Words and formats. - [Choropleth explorer](https://docs.tkcode.si/blocks/choropleth-explorer.md): A map shaded by a metric in quantile steps with a linked ranked list; choose a region to fly into it and rank its counties, switch the metric to sweep new colours across the map, or change the country. Covers: Bins and colours, Zooming in, One area, a diverging metric, Card look and narrow containers, Words. - [Connected scatter](https://docs.tkcode.si/blocks/connected-scatter.md): Two measures that move together, drawn as one path: a head point you scrub or play along the months, readouts that count with it, a target line that tints the healthy side, and a switch that morphs the whole path from one series to another. Covers: Axes and the target line, The head, the scrubber and playback, First appearance, Hovering, tapping and the card, Labels, notes and narrow containers, Formats and words. - [Horizon chart](https://docs.tkcode.si/blocks/horizon-chart.md): Many daily series compared by how far each strays from its own baseline, folded into one thin band row each: the band count folds and unfolds every row on one spring, rows re-sort by name, peak or latest value, and one crosshair reads the same day across every row for the pointer, touch and the keyboard. Covers: How the bands work, Sorting, The crosshair, Formatting values and other units, Narrow containers, Words. ### Finance - [Market terminal](https://docs.tkcode.si/blocks/market-terminal.md): A trading screen with a candlestick chart you zoom and pan, a live watchlist with sparklines and flashing prices, and a market and limit order ticket with its order list. Covers: Ranges and the chart, Live prices, Orders, Narrow containers, Text. - [Budget variance](https://docs.tkcode.si/blocks/budget-variance.md): Budget against actual spend by department as bullet charts on one shared scale, with signed variances, a period switch that springs every bar, budget lines that open in place and a total row. Covers: Reading a bullet chart, Periods and departments, Narrow containers, Text and currency. ### Line charts - [Small multiples](https://docs.tkcode.si/blocks/small-multiples.md): A grid of small line charts, one per group, read as a single picture: one crosshair moves through every panel, the y axes switch between each group's own range and a common one, panels re-sort by value, growth or name, and flat groups can be faded. Covers: Growth and flat trends, Scales, Your own units, Following the crosshair, Other words. - [Line replay](https://docs.tkcode.si/blocks/line-replay.md): Watch a day of data unfold: the line draws itself as a clock runs, events you mark pop up on the chart when it reaches them, and you can pause, drag to any moment or change the speed. Covers: Playing, From code, Formats and words. ### AI - [Model picker](https://docs.tkcode.si/blocks/model-picker.md): Choose a model and its reasoning effort from one compact pill: featured models with a note each, an effort setting, every other model by provider, and a summary of what the choice costs. Also called: model selector, LLM picker. Covers: Choosing a model, effort and more, Pages in a narrow window, The summary and the confirmation, The pill alone, Reading and setting the choice, Wording, Marks. - [AI side panel](https://docs.tkcode.si/blocks/ai-side-panel.md): An assistant beside a page the person reads: it reads the whole page, answers about it or about a selection, and proposes changes as a word diff that the person applies, discards or undoes, with a sweep on the page and an Undo pill. Also called: copilot panel, assistant sidebar. Covers: The page, Answering, Changes, Selection, Open, close and narrow containers, Wording. - [Prompt studio](https://docs.tkcode.si/blocks/prompt-studio.md): A card to edit a prompt template with colored variable chips, try it on saved test cases, and compare and ship versions: version and model menus, variable fields, a Run button and an output panel for the reply. Covers: The template, Variables and test cases, Running, Versions, Model and effort, Wording. - [Document extraction](https://docs.tkcode.si/blocks/document-extraction.md): Turns a document into typed data and shows where each value came from: a quiet document viewer beside an editable form whose fields fill in as the model reads, with tinted source text, curved links, low-confidence review and a typed JSON result. Covers: The document, The schema, A run, Reviewing, Accepting, Zoom, Wording. - [Model arena](https://docs.tkcode.si/blocks/model-arena.md): A blind test of two models: one prompt goes to two anonymous models, both answers stream in at the same pace, and the models are revealed after the vote, with time to first token, speed and cost per answer and a standings list. Covers: A round, Metrics, Standings, Narrow containers, Wording. - [AI answer](https://docs.tkcode.si/blocks/ai-answer.md): A page that answers one question like an article: reasoning, source cards, a streamed answer with headings, lists, a table, code and numbered citations that light the sentence they support, then actions, related questions and a follow-up box. Covers: Answering with a responder, A finished answer, Reasoning and sources, Citations light the sentence, Versions, Feedback, Copying and sharing, Asking, The empty page, Wording. - [AI chat](https://docs.tkcode.si/blocks/ai-chat.md): A chat with an assistant that fills its container: a title menu, a model button and a new chat button on top, a thread with streamed Markdown replies, collapsible reasoning, tool chips, numbered citations and message actions, and a message box at the bottom. Also called: chatbot, assistant chat, chat UI. Covers: Answering with a responder, The thread, Reasoning, tools and citations, Versions, Stopping and failing, Without a responder, Conversations, models and new chats, Width, Wording. - [AI composer](https://docs.tkcode.si/blocks/ai-composer.md): The prompt box of an AI app: a text area that grows, slash commands and @ mentions that become tokens, attachments that upload in place, tool toggles, a model and effort menu, a character counter and a send button that becomes a stop button. Also called: prompt input, chat input, message composer. Covers: Commands and mentions, Attachments, Tools, model and effort, The limit, Sending and stopping, A minimal composer, Wording. - [Agent memory](https://docs.tkcode.si/blocks/agent-memory.md): A card that shows what an assistant remembers: filter by group, search, edit a sentence in place, forget with a few seconds to undo, file a just-noted memory and add one by hand. Covers: Filtering and searching, Editing and forgetting, Saving the change, Captured memories, Adding by hand, Capacity, Paused, Wording. ### App shell - [Sidebar](https://docs.tkcode.si/blocks/sidebar.md): Workspace navigation with sections, nested pages, counts and a gliding selection marker; collapses to icons. Also called: navigation pane, side navigation, nav drawer, navigation view, app sidebar. Covers: Layouts, Sections and nested pages, Counts, unread dots, actions and icons, Header, filter and footer, Selection and routing, Bound items, Icon rail, The page next to the sidebar, Filter, Live data. - [Page header](https://docs.tkcode.si/blocks/page-header.md): A project page header that folds into a compact bar as you scroll, with tabs whose counts roll. Also called: page title bar, header with actions. Covers: Title and tabs, Breadcrumbs, status and meta, Actions, Condensing, Data items, Narrow widths, Choosing what goes in the header. - [Command palette](https://docs.tkcode.si/blocks/command-palette.md): A complete keyboard driven action surface with search, grouped results, and shortcuts. Also called: command bar, quick open, spotlight, Cmd+K menu, launcher. Covers: Commands, Running a command, Opening and closing, Opening from a button or from code, The open gesture, Placement, Focus, The palette on its own, Long lists, Text. - [Notification center](https://docs.tkcode.si/blocks/notification-center.md): A home for updates with read state, grouped information, and animated disclosure. Also called: notification inbox, notifications panel, bell menu. Covers: Read state and your data, Data shape and updates, Unread view and empty state, In an app header, Focus and dismissal, Wording, Opening from code. - [Empty states](https://docs.tkcode.si/blocks/empty-states.md): Four empty states in one illustration whose shapes morph between scenes as you switch tabs. Covers: Scenes and copy, Actions and phases, Narrow layouts, Using motion with restraint. - [Search results](https://docs.tkcode.si/blocks/search-results.md): A workspace search page with a suggestions popup, filters whose counts follow the query, a date range, sorting, removable filter chips, highlighted results and a detail sheet. Also called: search page, results list. Covers: Items, Matching, ranking and highlights, Filters, Sorting and the results header, Suggestions and recent searches, Opening results, Server-side search, No results, Narrow layouts, Long lists, Texts. ### Auth - [Login](https://docs.tkcode.si/blocks/login.md): Sign in and sign up pages, from a compact code card to full screen split and immersive layouts. Also called: sign in, log in page, authentication form. Covers: Email code, Centered, Split, Immersive, LoginImmersive, LoginImmersiveProvider, LoginImmersiveLabels, LoginImmersiveTimings, LoginImmersiveSignedInEventArgs, LoginImmersiveLinkSentEventArgs, LoginImmersiveNavigateEventArgs, Sign up. - [Onboarding illustration](https://docs.tkcode.si/blocks/onboarding-illustration.md): A compact first-run card whose line drawing morphs from an empty box to files, a team and a badge as people step through it. Covers: Scenes, Your own steps, Steps, completion and events, Narrow layouts, Using motion with restraint. - [OTP input](https://docs.tkcode.si/blocks/otp-input.md): A six digit verification flow with paste support and keyboard navigation. Also called: verification code, one-time code, PIN input, 2FA code. Covers: Verifying a code, Errors, Success, Disabled, Length and characters, How the code fills the slots, Narrow containers, Text and localization. - [Multi-step form](https://docs.tkcode.si/blocks/multi-step-form.md): A short form asked one step at a time in a card, with a progress list, Back and Continue, checks before each step, and a success state at the end. Also called: wizard, multi-page form, onboarding form. Covers: Values are kept, Checking a step before moving on, Sending the last step, Driving the step yourself, Narrow containers, Other words. ### Settings - [Settings page](https://docs.tkcode.si/blocks/settings-page.md): A full settings page: section navigation with an account card, the chosen section beside it, and a save bar for unsaved changes. Also called: preferences, options page, settings screen. Covers: Unsaved changes, Layout and width, Settings groups and rows, Columns, Responsive columns, Label width and alignment, Text. - [Settings command](https://docs.tkcode.si/blocks/settings-command.md): Find any setting from one search field and change it in place: toggles flip, choices cycle and links open, all from the keyboard. Also called: settings search, find a setting. Covers: Searching, Toggles, choices and actions, Focus and dismissal, Shortcuts and actions, Text, Size and performance. - [Security settings](https://docs.tkcode.si/blocks/security-settings.md): A security checkup, password change, two-step verification and signed-in sessions, each handled in place. Also called: two-factor settings, sessions, password settings. Covers: Security checkup, Changing the password, Signed-in sessions. - [Billing overview](https://docs.tkcode.si/blocks/billing-overview.md): The current plan, next charge, payment method and invoice history on one page, with the actions next to each. Also called: billing page, subscription, plan and invoices. Covers: Plan states, Invoice states, Trial and an expiring card, Handling the actions, Text and language. - [Usage billing](https://docs.tkcode.si/blocks/usage-billing.md): A metered billing period: spend so far, a projected total, daily spend, overage per meter and a spending limit. Also called: metered billing, usage charges. Covers: Near and over the limit, Live usage, Spending limit, Today and the projection, Currency and text. - [Cancel flow](https://docs.tkcode.si/blocks/cancel-flow.md): A considerate cancellation: ask why, offer a fitting alternative, show what ends, hold to confirm, and allow a quick return. Also called: cancel subscription, churn flow. Covers: Choosing reasons and offers, Without an offer, In a dialog, Focus and dismissal, Text and other languages. ### People - [Team members](https://docs.tkcode.si/blocks/team-members.md): The members page of a workspace: invite by typing or pasting addresses that fly into pending invites as the seat count rolls, change roles, search, and remove people with an inline confirm. Also called: members list, user management. Covers: Inviting, Seats, Bound collections and events, When the server says no, Removing people, Narrow containers, Read only, Words. - [Invite people](https://docs.tkcode.si/blocks/invite-people.md): Invite people by name or email into a workspace, with a role for each, a seat meter against the plan, and avatars that fly from the suggestions into chips and on into a pending list. Also called: invite users, share dialog. Covers: Adding people, Sending, State and events, Framed or flat, Narrow containers, Other words. - [Team directory](https://docs.tkcode.si/blocks/team-directory.md): A company directory with search, team filters and the picked person's profile beside the list, from bio and status to an email address to copy. Covers: Search and teams, The person shown, Nobody matches, Copying an email address, Narrow containers, Framed or flat. - [Roles and permissions](https://docs.tkcode.si/blocks/roles-permissions.md): A matrix of roles and permissions with group checkboxes that ripple, locked owner access, role copies and a review bar that saves every change at once. Also called: access control, RBAC, permissions matrix. Covers: Cells, groups and locked roles, Copying and removing roles, Saving, Bound state and events, Framed or flat, Narrow containers, Other words. - [Profile page](https://docs.tkcode.si/blocks/profile-page.md): A person's profile as one page: a cover and avatar, an about column with stats, Activity and Projects tabs, and an edit sheet whose saved fields glow once. Also called: account page, user profile. Covers: Activity, Projects and stars, Controlling the tab, Saving, Rules in the sheet, Share, Read-only profiles, Narrow containers and height, Texts. ### Developer - [API keys](https://docs.tkcode.si/blocks/api-keys.md): API key management where a Create key pill unfolds into a form, the new secret is shown once, rows open into usage details and a hold revokes a key. Also called: API tokens, access keys. Covers: Creating keys on your server, Failure and retry, Revoking, Details and idle keys, Narrow containers, Empty state, Events and state, Texts. - [Webhooks](https://docs.tkcode.si/blocks/webhooks.md): A webhooks console where you check each endpoint's health and traffic, inspect what was sent and what came back, retry failed deliveries in place and add endpoints with a one-time signing secret. Covers: Endpoints and deliveries, Retries, new endpoints and test events, A new endpoint, Narrow containers, Events and bound state. - [Integrations](https://docs.tkcode.si/blocks/integrations.md): A directory of apps to connect, with search, counted category filters, a connect pill that spins, connects or offers a retry, and a drawer for permissions, sync frequency and hold to disconnect. Covers: Apps, categories and frequencies, Marks, Connecting, Narrow containers, Categories only, Events and bound state. - [Env variables](https://docs.tkcode.si/blocks/env-variables.md): A project's environment variables as a matrix of switches per environment, with masked values, inline editing, .env import, a fingerprint comparison and a redeploy banner. Also called: environment variables, secrets editor. Covers: Environments and rows, Values, sensitive values and fingerprints, Adding and importing, Comparing environments, Redeploying, Narrow containers, Events and bound state, Texts. - [Domain verify](https://docs.tkcode.si/blocks/domain-verify.md): A custom domain setup card where customers add a domain and copy the DNS records, then a live checker marks each record valid, not found or misconfigured with a one-line fix and finishes with the domain verified and its SSL certificate issued. Covers: The flow, Connecting your server, Narrow containers, Sending domains, Texts. - [Webhook tester](https://docs.tkcode.si/blocks/webhook-tester.md): A webhook tester where you pick an event, edit its JSON payload and send a signed test event, watch it go from signed to sent to the endpoint's answer, read the response and retry failed deliveries from a recent list. Covers: Sending on your server, Other products, The payload editor, Narrow containers, Texts. ### Pricing - [Plan comparison](https://docs.tkcode.si/blocks/plan-comparison.md): Plan cards with a monthly or yearly switch that rolls every price to the new period, a highlighted plan, and a feature matrix that shows what each tier adds. Covers: Your own plans and an event log, The block's own card, Values, Text, culture and currency, Narrow containers, Reduced motion. - [Pricing calculator](https://docs.tkcode.si/blocks/pricing-calculator.md): Plan cards priced by a seat slider and a billing switch: prices roll digit by digit as you drag, and the recommended badge glides to the plan that fits the team. Covers: How prices are worked out, Picking a plan and seat caps, Feature lines, Your backend, events and the trial, Narrow containers, Currency, culture and wording, Reduced motion. - [Usage pricing](https://docs.tkcode.si/blocks/usage-pricing.md): A pricing calculator that picks the plan for you: drag seats and monthly traffic and the plan name morphs, the estimate counts to the new total and the call to action follows. Covers: The recommendation and its reason, The estimate, Own data and events, The trial, Narrow containers, Currency, culture and wording, Reduced motion. - [Cart drawer](https://docs.tkcode.si/blocks/cart-drawer.md): A product grid whose items fly into the cart button, a count that rolls, and a side drawer with quantity steppers, a free-shipping progress bar, a rolling subtotal and checkout. Covers: The cart, Removing rows, Promo codes, Checkout, Your own store, Narrow containers, Reduced motion. - [Checkout summary](https://docs.tkcode.si/blocks/checkout-summary.md): An order summary where an accepted promo code turns into a removable chip, discount and tax lines slide in, totals roll to the new amount and the pay button walks through processing to paid. Covers: The arithmetic, Promo codes, Paying, States, Narrow containers, Other words, currencies and motion. - [Live checkout](https://docs.tkcode.si/blocks/checkout-live.md): A subscription checkout whose summary recalculates with every change to plan, billing period, add-ons and details, then moves to the centre and unfolds into a receipt. Covers: How the numbers are calculated, Checks before a payment, Coupons, Paying, Other words, currencies and countries. - [Seat manager](https://docs.tkcode.si/blocks/seat-manager.md): A team seats card with an avatar row and a seat meter for members, invites and open seats, a stepper that rolls today's prorated charge and the new monthly total, a confirm step before any charge, invites you can resend or revoke with undo, and a full-team state that offers another seat. Covers: The meter and the notice, Changing seats, Confirm, pay, done, Resend and revoke, States, Narrow containers, Other words, currencies and motion, The demonstration loop. - [Credit top-up](https://docs.tkcode.si/blocks/credit-topup.md): A card for buying usage credits: the balance with a two-week usage chart and days left, preset packs with bonus badges, a custom amount slider with a live price, auto top-up with a threshold, the saved payment card, and a new balance that rolls in like an odometer. Covers: Amount, packs and bonus, Balance, days left and health, Buying, Failure and retry, A balance that changes on its own, Narrow containers, Currency, culture and wording. ### Media - [File upload](https://docs.tkcode.si/blocks/file-upload.md): A complete file selection flow with constraints, progress, and error feedback. Also called: upload list, attachments, file uploader. Covers: Type and size, One file, Disabled, The file list, Text. - [Media player](https://docs.tkcode.si/blocks/media-player.md): An audio player with cover art, a playlist, a seek bar, previous and next, and volume with mute; skipping wraps around and keeps playing or paused, and the playing row shows moving bars. Also called: video player, audio player. Covers: Tracks and audio, Making sound, Playing, skipping and the end of a track, Volume and mute, Without the card, Narrow containers, Events and texts. ### Projects - [Week calendar](https://docs.tkcode.si/blocks/week-calendar.md): A week planner where you drag to add, move and resize events and undo the last change, with a month and calendar toggles beside the grid, an all-day row, and three-day or agenda views when narrow. Also called: scheduler, week view, agenda. Covers: Events and calendars, Editing, Saving changes, Touch, Views and navigation, Narrow containers, Time zones, The all-day row, Texts, Performance. - [Availability picker](https://docs.tkcode.si/blocks/availability-picker.md): Find a meeting time across several people's calendars, see who is free at each time, and book the one that works. Also called: booking slots, time slot picker, appointment picker. Covers: Days, times and attendees, Selection, Booking, Framed or flat, Narrow containers, Harder data, Texts. - [Project board](https://docs.tkcode.si/blocks/project-board.md): A compact sprint board: arrow buttons step each card to the next or previous stage and it flies to its new column, under a sprint line, the team and an All work / My work switch. Also called: project overview, board view. Covers: Stages, tasks and people, Moving tasks, All work and My work, Adding tasks, Your own stages, Framed or flat, Narrow containers, Texts. - [Gantt timeline](https://docs.tkcode.si/blocks/gantt-timeline.md): A project timeline of phases and tasks on a calendar: drag bars to move or resize them, dependency arrows that turn red on conflicts, day, week and month zoom, folding phases and undo. Also called: Gantt chart, project timeline, schedule chart. Covers: Keyboard. - [Release readiness](https://docs.tkcode.si/blocks/release-readiness.md): A release gate where a short list of checks unlocks one action, with a progress bar, the owners, a notify switch and the result in place. Covers: Checks and the gate, Starting the release, Failure and retry, Framed or flat, Narrow containers, Other words, optional checks. - [Kanban board](https://docs.tkcode.si/blocks/kanban-board.md): A team board whose cards lift, tilt with the pointer and spring into the slot that opens for them, with swimlanes by person, live work-in-progress limits, quick add and a details drawer. Also called: kanban, task board, card board. Covers: Columns, people, labels and cards, Saving changes, Swimlanes, Work-in-progress limits, Quick add and the details drawer, Narrow containers and read-only boards, Texts. ### Headers and footers - [Site header](https://docs.tkcode.si/blocks/site-header.md): A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet. Also called: website header, navbar, top navigation. Covers: Items, links and the feature card, Choosing a destination, Scrolling and solid state, Mega menu panels, Narrow layouts and the menu sheet. - [Site footer](https://docs.tkcode.si/blocks/site-footer.md): A website footer with link columns and newsletter, a minimal layout, and a large fading Arc mark. Also called: website footer. Covers: Layouts, Links, Newsletter, Status, Responsive behavior. - [CTA section](https://docs.tkcode.si/blocks/cta-section.md): A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner. Covers: Shapes, Actions, Centered, Split and the setup card, Banner, Responsive layout. - [Newsletter signup](https://docs.tkcode.si/blocks/newsletter-signup.md): An email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front. Also called: email signup, subscribe form. Covers: The subscription, Validation, Variants, The publication, Form only, Narrow containers, Text and localization, The privacy link. ### Showpieces Decorative: effects and showpieces. Use one only when the brief asks for that effect, not for ordinary controls. - [Activity terrain](https://docs.tkcode.si/blocks/activity-terrain.md): A week of hourly activity as a 3D terrain: orbit and zoom it, hover an hour for its numbers, fly to a bar, press it flat into a heat map, and read the total, the peak hours and the busiest day beside it. Covers: Metrics, Tone and good news, Terrain and heat map, Hovering and flying in, Orbiting and zooming, Narrow layouts, Your own data and live updates, Texts. - [Revenue globe](https://docs.tkcode.si/blocks/revenue-globe.md): A live payments map: arcs fly from every city to headquarters on a dotted globe, with a day timeline to replay or scrub and the revenue, regions and top cities beside it. Covers: Data, The clock, Replay, pause and the playhead, Cities and regions, Narrow layouts, Reduced motion, Texts, Performance. - [Customer galaxy](https://docs.tkcode.si/blocks/customer-galaxy.md): Every customer as a dot sized by revenue and colored by health, turning as a galaxy; group them into clusters, fly in, and read the totals. Covers: Accounts, Groupings, Health states, Focusing a cluster and selecting an account, Camera, Totals and the list, Layout and container width, Your own data, Texts. - [Semantic zoom](https://docs.tkcode.si/blocks/semantic-zoom.md): An organization map you zoom through from teams to projects to a single task, each level showing new detail, with breadcrumbs, a minimap, a guided tour and the numbers of whatever is in view. Covers: The data, Moving around, Ticking checklist items, The guided tour, Layout and container width, Your own data, Texts and formats. - [Layout morph](https://docs.tkcode.si/blocks/layout-morph.md): One set of cards in six views, from a grid and a list to a fanned stack, a 3D ring and a helix, with every card flying to its new place. Covers: Items, Views, The panel and the detail, Framed or flat, Narrow containers, Texts. - [Exploded view](https://docs.tkcode.si/blocks/exploded-view.md): A screen that comes apart as you scroll: its layers tip back, separate with labels, take turns in focus with a caption each, and close into one screen again. Covers: Scroll modes, Driving the progress, Your own layers, Narrow containers, Reduced motion, Tuning the scene. ## Optional - [llms-full.txt](https://docs.tkcode.si/llms-full.txt): every page above, in full, in one file (about 9 MB; fetch single pages when you can). - [Source code](https://github.com/AIDotNet/TKCode.Arc): the repository; its `AGENTS.md` is for work on the library itself. - [NuGet](https://www.nuget.org/packages/TKCode.Arc): the TKCode.Arc package.