@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):

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

Usage

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

// Barrel import
import { Button, Modal } from '@dscout/strata';

// Or per-component subpath import
import Button from '@dscout/strata/button';

Components

Buttons & inputs

• Button, ButtonWithTooltipAndPopover, PillButton, 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.

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
• 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, SortableListMoveEvent, SortableListActivationMode 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.

Text & rich content

• Markdown — opinionated MarkdownRenderer (@dscout/strata/markdown). 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, TabsDropdown, TabsDropdownItem, FilterTabs, NavTabs, NavTabsDropdown, NavTabsDropdownItem. Available as subpath imports (@dscout/strata/tabs, @dscout/strata/tabs/filter, @dscout/strata/tabs/nav, …).

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
• ProfileDropdown
• QuestionIndicator
• ResourceItem, ResourceItemButton
• UserAvatar

All components are available as both barrel imports from the package root (import { CommandMenu } from "@dscout/strata") and individual subpath imports (import CommandMenu from "@dscout/strata/command-menu"). Subpaths use kebab-case and mirror the source folder, e.g. @dscout/strata/popover/menu-item, @dscout/strata/command-menu/anchored, @dscout/strata/markdown/blockquote.

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.