@dscout/strata

A shared React component library for building Tailwind based dscout interfaces. The primary consumer is Figma Make, which uses real React components from npm in prototypes.

Installation

npm install @dscout/strata

Peer dependencies

React 19+ is required (components rely on React 19's ref-as-a-plain-prop support), and so is React Router 7+ (NavTabs and its dropdowns are barrel exports that read the current route):

npm install react@^19 react-dom@^19 react-router-dom@^7

Upgrading to 2.0

• PillButton was removed. Use Chip for a pill-shaped label, or Button for an action.
• react-router-dom is a required peer dependency. It was optional in 1.x.

Usage

// CSS (required — contains all Tailwind utilities and design tokens)
import '@dscout/strata/styles.css';

// Components and their types, from the package root
import { Button, Modal, type ButtonProps, type ModalProps } from '@dscout/strata';

Import from the package root. Every component's props type ships from the root as <Component>Props (e.g. ButtonProps, FilterBarProps, QuestionGroupProps), alongside the value and option types its props reference.

Per-component subpaths (@dscout/strata/button, @dscout/strata/popover/menu-item, …) also exist, for consumers that need to code-split a single component. They use kebab-case and mirror the source folder. A subpath is not guaranteed to re-export its component's types, so import types from the root.

Components

Buttons & inputs

• Button, ButtonWithTooltipAndPopover, PromptButton, SendButton, SourceButton
• CheckboxInput, RadioInput, Switch (+ SwitchColor type)
• TextInput, Textarea
• Datepicker
• Select

Surfaces & layout

• Modal
• Popover, PopoverMenu, PopoverMenuItem, PopoverSurface
• TooltipContainer, TooltipProvider
• Callout
• CollapsibleContent
• ScrollFadeContainer
• ResizeHandle, useResizeHandle
• WorkspaceLayout, useWorkspaceLayout, useNavState (plus WorkspacePane, WorkspaceState, WorkspaceAction, WorkspaceLayoutHandle, WorkspaceLayoutProps, PrimaryHeaderProps, SecondaryHeaderProps, PaneProps, NavProps types)
• Table (+ Column, TableRow, SortDir, SortState, TableProps, TablePaginationProps types) — sort/resize/reorder/hide columns, row selection, a frozen first column, and loading/loadingMore/onLoadMore pagination states. Body rows are always virtualized (@tanstack/react-virtual, no opt-out): only the rows in view plus a small fixed buffer are ever mounted, so role="row" elements you query in a consuming app's own tests won't match the full rows array for a long table. aria-rowcount/aria-rowindex are published on the table/rows to tell assistive tech the true row count and position even though only a window of rows is in the DOM at once.

Filtering

Strata holds no filter model: the consumer supplies the options, operators, conditions and labels, and applies every change the components report.

• FilterBar (+ FilterBar.Item) — the strip that hosts filter chips, conjunctions and the add-filter control, as a single tab stop with arrow-key navigation
• FilterChip — one filter condition that reads as a sentence: category, operator, values, remove
• FilterGroupChip — a group of conditions summarized as one sentence, opening an editor of FilterChip rows
• FilterConjunction — the connector the consumer places between chips, optionally toggleable
• AddFilterButton, AddFilterMenu — the add-filter trigger and its nested submenus of checkbox lists by category, with optional saved views
• FilterAnnouncer — holds the polite live region filter changes are announced in. Wrap it around a FilterBar that unmounts when it has no filters, so removing the last filter is still announced.

Chat & command surfaces

• ChatMessage, ChatMessagesArea, ChatThinkingIndicator, MessageTextarea
• CommandMenu (compound: .Search, .Filters, .List, .Item), CommandAnchoredMenu, CommandPopover

Question authoring

• QuestionCard — the card shell (header + removable settings chips + kebab menu + label + kind-specific body)
• QuestionLabel — the editable/read-only question label
• QuestionSettingsMenu — the card's kebab/duplicate/delete menu, with an extraItems slot for kind-specific controls
• MenuItemRow — structural row helper for composing custom content inside QuestionSettingsMenu's extraItems
• AddQuestionButton
• QuestionGroup (+ QuestionGroupProps, QuestionGroupLabels and related types) — a header above a tinted surface holding a nested SortableListContainer of the consumer's questions, collapsing to a summary bar. Presentational: the questions, their numbering and the settings menu's actions belong to the consumer.
• Multivariate (+ MultivariateProps, MultivariateVariantConfig, MultivariateLabels and related types) — a header with Add variant above a stack of variant trays that reorder within the block, collapsing to a summary bar of the variants' letters. Presentational, like QuestionGroup.
• EditableCardSort (+ EditableCardSortProps, CardSortItem types) — card-sort question editing: two independent EditableList instances (Cards always, Categories optional), each with its own add/remove/reorder/lock axes and opt-in max-item cap
• EditableList, EditableListRow (+ EditableListProps, EditableListRowProps, EditableListItemArgs types) — choice/rank question list editing: add/remove/reorder, three independent lock axes, an optional pinned (non-reorderable) item. When items is empty, EditableList renders one synthetic row via renderItem with args.isSynthetic: true — check it before reading any other field off item (the sentinel carries no real data). Render that branch through PlaceholderEditableListRow (+ PlaceholderEditableListRowProps type), which owns the synthetic row's full contract (blank value, no-op remove, locked/focus forwarding, reserved remove-button footprint) instead of hand-composing EditableListRow for it.
• EditableScale (+ EditableScaleProps type) — scale question editing: editable low/high labels, a numbered scale box row, an optional "Not applicable" row
• EditableTreeTest (+ EditableTreeTestProps, TreeNode types) — tree-test question display: a nested, indented outline with leaf/branch markers, working expand/collapse, and a correct-destination indicator. Read-only for now — no editing, drag/drop, or add/remove mutations; a future ticket adds interactivity to this same component.
• EditableUrl (+ EditableUrlProps type) — URL/link question editing: input → loading → resolved-preview → invalid states, add/edit/remove/cancel, with an instanceLabel escape hatch for disambiguating multiple instances on one page
• FollowupInstructions (+ FollowupInstructionsProps type) — AI Mod follow-up policy editor: a mode/count selector plus optional free-text guidance for the moderator. Kind-agnostic — the consumer supplies the mode options and their copy; the on/off control lives outside this component.
• QuotaMenu (+ QuotaMenuProps, QuotaMenuValue types) — per-choice quota configuration popover: even-split or numeric-per-choice modes, with pending-value staging until commit.
• ResponseDisplay (+ ResponseDisplayProps, ResponseQuestion, SupportedResponseKind, isResponseDisplaySupported, and per-kind question types) — renders a question's response for a given QuestionKind, in either full transcript or compact citation mode. ResponseDisplayStatCell and resolveSelfReportedLabel are shared pieces used by transcript surfaces that render a self-report row outside the full component.
• SortableListContainer (+ SortableListContainerProps, SortableListContainerOwnerProps, SortableListMoveEvent, SortableListActivationMode, SortableListContainerNestedProps types) — generic @dnd-kit-backed drag-and-drop primitive for reordering an arbitrary item array, with pointer + keyboard support and opt-in cross-instance movement, including keyboard moves across nested lists. A nested owner names items in its drag announcements through getItemLabel, and announcements (+ SortableListAnnouncements, SortableListAnnouncedPlace types) replaces their English text. Nested-mode hooks (useSortableListDropRegion, useSortableListArrangement, useSortableListArrangementInput, useSortableListIds, useSortableListDragActive, useSortableListRowState, + SortableListArrangement type) ship from the package root.

Text & rich content

• Markdown — opinionated markdown renderer. The individual block renderers are exposed too as drop-in components={...} overrides: BasicMarkdownRenderer, MarkdownBlockquote, MarkdownCode, MarkdownListItem, MarkdownParagraph.
• FormattedTextarea, MentionSuggestionList
• EditableTextField — standalone contentEditable primitive (blur-commit, paste-stripping, maxLength)

Tabs

• Tabs (+ TabsList, TabsTrigger, TabsContent), TabsDropdown, TabsDropdownItem
• FilterTabs (+ FilterTab, FilterPill)
• NavTabs (+ NavTab), NavTabsDropdown, NavTabsDropdownItem — route-driven tabs; render them inside a React Router.

Motion

• duration, ease, spring — Strata's motion tokens for motion/react. Durations are in seconds; the matching CSS tokens in styles.css are in milliseconds.
• useMotionTransition, resolveMotionTransition — resolve tokens to a motion/react transition, collapsing to an instant one under prefers-reduced-motion
• fadeInOut — opacity crossfade variants

Notifications & status

• ToastContainer, ToastActions, useToastStore
• LoadingDots, LoadingSpinner, LogoLoader, SkeletonLoader, TypingIndicator

Miscellaneous

• Chip (+ ChipProps, ChipColor, ChipLeadingContent types) — a compact, pill-shaped label chip with an optional leading icon/leadingSlot and an optional hover/focus-reveal dismiss control. Breaking change: the primary and tip color variants were removed — ChipColor is now "white" | "gray" only, and the default color changed from gray to white. Update any color="primary"/color="tip" usage to "white" or "gray", and pass color="gray" explicitly if you relied on the old default.
• FeedbackSelector (+ Rating enum)
• ProfileDropdown
• QuestionIndicator
• ResourceItem, ResourceItemButton
• UserAvatar

Browse interactive examples in the Storybook.

Intentionally internal

Some primitives in the Strata source tree are deliberately not exposed via this package. External consumers should compose around the public primitives instead:

• Component-folder internals/. Strata's complex component folders (chat/, workspace_layout/, markdown/, scroll_fade_container/, command_menu/, tabs/, question_card/, …) keep implementation detail under an internals/ subdirectory — editor wiring, popover shells, suggestion-extension factories, reducers, FSM machinery, layout shells, the settings-chips overflow row, etc. None of those modules ship as package entry points, and the in-repo ESLint rule dscout/no-strata-internals-cross-folder enforces the boundary at build time. If you find yourself wanting to reach into an internals/ module, that's a signal that the public surface is missing something — open an issue rather than working around it.
• ResourceItem / ResourceItemButton — subgrid mode is internal. Both components are exposed and render with their default flex layout out of the box. The mechanism that auto-activates leading / title / trailing alignment across a list of rows — the ResourceItemListProvider context and matching parent grid template — is not exported. External consumers will get the standalone (flex) behavior; the aligned-list behavior lives behind a follow-up primitive (e.g. a future ResourceItemList that bundles the parent grid + provider). Until that lands, this is the supported public contract.
• CheckboxIndicator — prop-driven visual sibling of CheckboxInput. Exists to deduplicate the checkbox visual contract between CheckboxInput and <button>-rooted Items (e.g. CommandMenu.Item), both of which live inside this monorepo. External Strata consumers should use CheckboxInput for real form input.
• ErrorBoundary and friends. Depend on @datadog/browser-rum-react, which is app-specific and not appropriate for the package.