# Pathfinder

> Commenda’s React design system. Package version: 0.1.0.

Import @commenda/pathfinder/styles.css once. React 18.3.1 and 19 are supported. Interactive handlers require a client component in Next.js App Router.

## Start here
- [Installation](/llms.mdx/getting-started/installation): Package and compiled stylesheet setup.
- [Design principles](/llms.mdx/foundations/design-rules): Shared foundation usage principles.
- [Component conventions](/llms.mdx/guides/component-conventions): Shared accessibility, styling and integration guidance.

## Component guidance
Each component page contains its examples, API, accessibility guidance and source-linked design rules. Read that page before implementing or changing a component. Rule IDs remain stable. Figma variant names are not automatically public props.

## File uploads
- [File upload](/llms.mdx/components/file-upload): validated selection, controlled uploads, limits and migration guidance.
- [File card](/llms.mdx/components/file-card): progress, failure recovery and actions.

## AI content
- [AI content integration](/llms.mdx/guides/ai-content): Markdown, CodeBlock, InlineReference, Attachment, AttachmentGroup, ComposerContext, Composer, SuggestedPrompt, SuggestedPromptGroup, ThinkingIndicator, Reasoning, ToolCall, ChainOfThought, QuestionCard, ApprovalCard, PlanReviewCard, UploadRequestCard, ResponseRecap, ActionCard, Message, Conversation, OutputList, RunList, migration mappings, and app-owned orchestration. Code highlighting uses Lowlight.

## Assets
- [Complete asset reference](/assets.txt): Export names, namespaces and supported sizes for tooling.

## Documentation
- [File types](/llms.mdx/assets/file-types): Thirteen file and folder families at three authored sizes.
- [Flags](/llms.mdx/assets/flags): Country and territory artwork with round framing.
- [Icons](/llms.mdx/assets/icons): Interface glyphs with distinct authored small-size geometry.
- [Visual assets](/llms.mdx/assets): Local artwork, authored sizes, accessible usage, and source provenance.
- [Logos](/llms.mdx/assets/logos): Original brand artwork with collection-specific framing.
- [Status icons and progress](/llms.mdx/assets/status-icons): Task-state artwork and continuous semantic progress.
- [Accordion](/llms.mdx/components/accordion): Expandable sections with simple item data and retained form state.
- [Action card](/llms.mdx/components/action-card): An optional next action that does not block the agent turn.
- [Address input](/llms.mdx/components/address-input): Structured addresses with curated country ordering and optional provider-owned search.
- [Alert](/llms.mdx/components/alert): Persistent feedback beside the content it concerns.
- [Approval card](/llms.mdx/components/approval-card): Explicit approval or denial with consequences and an attributed receipt.
- [Attachment group](/llms.mdx/components/attachment-group): Responsive attachment rows with accessible overflow and sent-message alignment.
- [Attachment](/llms.mdx/components/attachment): Uploaded files, images, and folders with progress, retry, removal, and previews.
- [Avatar](/llms.mdx/components/avatar): Stable person identities, organization plates, and compact people groups.
- [Badge](/llms.mdx/components/badge): A read-only status reported by the system.
- [Banner](/llms.mdx/components/banner): Persistent feedback for the whole account or product.
- [Breadcrumb](/llms.mdx/components/breadcrumb): Current location and native links to its ancestors.
- [Button](/llms.mdx/components/button): Actions with explicit loading and completion feedback.
- [Calendar](/llms.mdx/components/calendar): Date-only deadlines with month and agenda views, entity filtering and record previews.
- [Card](/llms.mdx/components/card): Content sections and focused statistics on shared surfaces.
- [Chain of thought](/llms.mdx/components/chain-of-thought): An ordered disclosure of supplied summaries and tool activity.
- [Checkbox](/llms.mdx/components/checkbox): Independent choices saved with a form.
- [Code block](/llms.mdx/components/code-block): Warm-light code, tool payloads, and diffs with exact-source copying and line numbers.
- [Composer context](/llms.mdx/components/composer-context): Current and carried context above an editor, or a connector invitation below it.
- [Composer](/llms.mdx/components/composer): A controlled AI draft editor with skills, attachments, context, and send or stop actions.
- [Conversation](/llms.mdx/components/conversation): A typed transcript with reading-position preservation and app-owned composition.
- [Data grid](/llms.mdx/components/data-grid): Build financial matrices with grouped columns, expandable rows, totals and editable values.
- [Date picker](/llms.mdx/components/date-picker): Segmented dates, ranges, and months with a matching calendar.
- [Description list](/llms.mdx/components/description-list): Record details with responsive labels, copy actions, and protected edits.
- [Dialog](/llms.mdx/components/dialog): A focused task with accessible modal behavior and guarded dismissal.
- [Distribution bar](/llms.mdx/components/distribution-bar): Parts of a whole with exact numeric shares and grouped breakdowns.
- [Drag handle](/llms.mdx/components/drag-handle): Accessible activator for application-owned sortable behavior.
- [Dropdown](/llms.mdx/components/dropdown): Recursive action menus with consistent keyboard behavior.
- [Empty state](/llms.mdx/components/empty-state): Explain why content is missing and offer a useful next step.
- [File card](/llms.mdx/components/file-card): A reusable file row with progress, failure recovery, and contextual actions.
- [File upload](/llms.mdx/components/file-upload): Accessible file selection, validation, and controlled upload cards.
- [Icon button](/llms.mdx/components/icon-button): Named icon actions with built-in tooltips.
- [Inline reference](/llms.mdx/components/inline-reference): An application record link with a supplied preview, or a preview-only button.
- [Input](/llms.mdx/components/input): Single-line text with labels, validation, unit segments, and actions.
- [List](/llms.mdx/components/list): Inbox-style record rows with independent destinations and menus.
- [Markdown](/llms.mdx/components/markdown): A shared streaming-safe reply renderer with compact typography, code blocks, tables, and record references.
- [Message](/llms.mdx/components/message): Ordered content, authors, actions, and recoverable reply states.
- [Multi select](/llms.mdx/components/multi-select): Multiple selected values with tags, limits, and API-backed search.
- [OTP](/llms.mdx/components/otp): One accessible input with visual code slots and application-owned verification.
- [Output List](/llms.mdx/components/output-list): Compact artifact rows with controlled selection and independent actions.
- [Phone input](/llms.mdx/components/phone-input): Country-aware phone drafts with national formatting and E.164 output.
- [Plan review card](/llms.mdx/components/plan-review-card): Review a host-owned plan and explicitly approve or request changes.
- [Popover](/llms.mdx/components/popover): Compact anchored forms and read-only previews.
- [Progress](/llms.mdx/components/progress): Measured task progress in a bar or compact ring.
- [Question card](/llms.mdx/components/question-card): Single or multiple answers, written responses, and searchable overflow.
- [Radio group](/llms.mdx/components/radio-group): One choice from a short, visible set.
- [Reasoning](/llms.mdx/components/reasoning): An expandable application-provided progress summary.
- [Response recap](/llms.mdx/components/response-recap): A persistent, read-only summary of an accepted response.
- [Run List](/llms.mdx/components/run-list): Agent run history with activity indicators, unread state, and host-owned actions.
- [Search](/llms.mdx/components/search): Query entry for tables, pages, and global document search.
- [Segmented control](/llms.mdx/components/segmented-control): Two to four modes with one immediate selection.
- [Select](/llms.mdx/components/select): Single-value selection with local or remote search.
- [Separator](/llms.mdx/components/separator): A quiet boundary between content groups.
- [Sheet](/llms.mdx/components/sheet): A floating record panel or bottom sheet with shared overlay contracts.
- [Side nav](/llms.mdx/components/side-nav): Application navigation with a compact rail, recursive groups, and native links.
- [Skeleton](/llms.mdx/components/skeleton): Content-shaped loading placeholders.
- [Split button](/llms.mdx/components/split-button): One default action with related alternatives.
- [Stepper](/llms.mdx/components/stepper): Progress and optional backward navigation through a multi-step task.
- [Suggested prompt group](/llms.mdx/components/suggested-prompt-group): An accessible wrapping group of conversation starters.
- [Suggested prompt](/llms.mdx/components/suggested-prompt): A compact starter prompt that emits text for the host to insert or send.
- [Switch](/llms.mdx/components/switch): A setting that applies immediately.
- [Table](/llms.mdx/components/table): Build record tables with sorting, search, filters, pagination, selection and row actions.
- [Tabs](/llms.mdx/components/tabs): Switch between related panels for the same subject.
- [Tag input](/llms.mdx/components/tag-input): Create, edit and remove free-form values using Kakashi’s tag-entry interaction pattern.
- [Tag](/llms.mdx/components/tag): A selected-value chip with optional removal.
- [Text area](/llms.mdx/components/text-area): Multiline entry with auto-growth and soft character limits.
- [Thinking indicator](/llms.mdx/components/thinking-indicator): An accessible live mark while the assistant works.
- [Toast](/llms.mdx/components/toast): Brief confirmations with an isolated notification queue.
- [Tool call](/llms.mdx/components/tool-call): A compact tool lifecycle row with optional request and response payloads.
- [Tooltip](/llms.mdx/components/tooltip): Short, supplemental text on hover and keyboard focus.
- [Tree](/llms.mdx/components/tree): Recursive folders and files with keyboard navigation, remote child states, and validated moves.
- [Upload request card](/llms.mdx/components/upload-request-card): Collect requested documents and send only ready attachments.
- [Documentation standards](/llms.mdx/contributing/documentation): Maintain examples, public API references, and guidance from shared sources.
- [Formatting and linting](/llms.mdx/contributing/formatting): Consistent spacing, imports, and formatting across Pathfinder source, examples, and documentation.
- [Color reference](/llms.mdx/foundations/color-reference): The eight reviewed color scales and avatar tones.
- [Design principles](/llms.mdx/foundations/design-rules): Shared guidance for color, typography, spacing, motion, and accessible layouts.
- [Foundations](/llms.mdx/foundations): Choose the colors, text styles, dimensions and motion behind Pathfinder interfaces.
- [Layout guidance](/llms.mdx/foundations/layout): Figma app-shell, grid, content-width and overlay rules, with implementation limits.
- [Motion tokens](/llms.mdx/foundations/motion): Durations, curves, and spring presets from The System.
- [Spacing, sizing and elevation](/llms.mdx/foundations/sizing-elevation): Reviewed dimensions, borders, breakpoints, and surface shadows.
- [Tokens and styling](/llms.mdx/foundations/tokens): Figma foundations shipped as CSS, typed exports, and machine-readable data.
- [Typography](/llms.mdx/foundations/typography): Seventeen Inter styles for headings, labels, and wrapping copy.
- [Installation](/llms.mdx/getting-started/installation): Install Pathfinder and import its finished stylesheet once.
- [AI content integration](/llms.mdx/guides/ai-content): Phase 1 contracts, dependencies, migration mappings, and intentional differences from existing Commenda AI elements.
- [Component conventions](/llms.mdx/guides/component-conventions): Accessibility, styling and integration guidance shared across Pathfinder.
- [Contributing](/llms.mdx/guides/contributing): The workflow for adding a Pathfinder component.
- [Development skills](/llms.mdx/guides/development-skills): When to use Emil Kowalski's and Matt Pocock's skills while building Pathfinder.
- [Build with Pathfinder](/llms.mdx/): The components, foundations and patterns behind Commenda.

## Full reference
- [All documentation](/llms-full.txt)