UI SDK Modules

Review the complete public export surface of @downcity/ui

UI SDK Modules

This page lists the full public module surface of @downcity/ui.

Utilities and Types

cn

  • Purpose: merge Tailwind classes and resolve conflicts safely

DowncityButtonVariant

  • Values: default, outline, secondary, ghost, destructive, link

DowncityButtonSize

  • Values: default, xs, sm, lg, icon, icon-xs, icon-sm, icon-lg

DowncityCardSize

  • Values: default, sm

DowncityDropdownMenuItemVariant

  • Values: default, destructive

DowncityContextMenuItemVariant

  • Values: default, destructive

DowncityItemVariant, DowncityItemSize

  • Item variants: default, outline, muted
  • Item sizes: default, sm

DowncitySpinnerSize

  • Values: sm, default, lg

DowncityToasterTheme

  • Values: light, dark, system

Style Modules

@downcity/ui/source.css

  • Role: declare the Tailwind scanning source

@downcity/ui/styles.css

  • Role: provide design tokens and the base layer

Actions and State Modules

Button

  • Exports: Button, buttonVariants

ButtonGroup

  • Exports: ButtonGroup
  • Exported types: DowncityButtonGroupProps, DowncityButtonGroupOrientation

Badge

  • Exports: Badge, badgeVariants

Toggle

  • Exports: Toggle, toggleVariants

ToggleGroup

  • Exports: ToggleGroup, ToggleGroupItem

Spinner

  • Exports: Spinner
  • Purpose: loading feedback in buttons, items, and asynchronous regions

Kbd

  • Exports: Kbd, KbdGroup
  • Purpose: display shortcuts and key combinations

CodeBlock

  • Exports: CodeBlock
  • Exported type: DowncityCodeBlockProps

Typography

  • Exports: H1–H6, Paragraph, Lead, Small, Muted, Strong, Emphasis, InlineCode, Blockquote, UnorderedList, OrderedList, ListItem, TaskListItem, DefinitionList, DefinitionTerm, DefinitionDescription, FootnoteReference, Footnotes, FootnoteItem, Anchor, Hr, Annotation
  • Exported types: DowncityAnnotationProps, DowncityAnnotationTone, and Typography prop types
  • Purpose: render headings, prose, quotes, lists, links, inline code, and semantic annotations
  • Purpose: render plain source or build-time highlighted code with copy behavior

Form Modules

Input

  • Exports: Input

Textarea

  • Exports: Textarea
  • Exported type: TextareaProps

Checkbox

  • Exports: Checkbox

Label

  • Exports: Label

Select

  • Exports: Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel, SelectItem, SelectSeparator
  • Purpose: single-value selection with grouped options

Slider

  • Exports: Slider
  • Purpose: scalar or range value selection

Switch

  • Exports: Switch
  • Purpose: toggle one boolean setting

Containers and Display Modules

ChatPanel

  • Exports: ChatPanel, ChatHistory, ChatMessage, ChatComposer, session_message_to_chat_message
  • Exported types: DowncityChatPanelProps, DowncityChatMessage, DowncityChatThread, DowncityChatStatus, DowncityChatSubmitInput
  • Purpose: runtime-agnostic Agent chat UI with a header, thread history, messages, empty state, streaming state, stop action, and composer.
  • The components are controlled. Hosts provide data and own Agent, Session, network, and persistence behavior through callbacks.
import { ChatPanel } from "@downcity/ui";
import "@downcity/ui/styles.css";

<ChatPanel
  thread={{ id: "session-1", title: "Project helper" }}
  messages={messages}
  status={is_streaming ? "streaming" : "ready"}
  on_submit={({ text }) => send_message(text)}
  on_stop={() => stop_generation()}
  render_message={({ message }) => render_markdown(message.content)}
/>

session_message_to_chat_message converts Session SDK canonical messages into the Chat presentation model. The UI includes Duobox-style messages, tool activities, interactions, changed files, history, and composer surfaces, while the host owns the Session lifecycle and response actions.

Card

  • Exports:
    • Card
    • CardHeader
    • CardTitle
    • CardDescription
    • CardAction
    • CardContent
    • CardFooter

Separator

  • Exports: Separator

Skeleton

  • Exports: Skeleton

Tabs

  • Exports:
    • Tabs
    • TabsList
    • TabsTrigger
    • TabsContent
    • tabsListVariants

Settings

  • Exports: SettingsContainer, SettingSection, SettingGroup, SettingItem, InfoRow
  • Purpose: compact settings screens and grouped detail rows

Item

  • Exports: Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemGroup, item_variants
  • Purpose: compose resource lists, search results, and settings entries

Empty

  • Exports: Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent
  • Purpose: first-use, no-data, and no-results states

Workboard

  • Exports: Workboard
  • Exported types:
    • DowncityWorkboardProps
    • DowncityWorkboardBoardSnapshot
    • DowncityWorkboardAgentItem
    • DowncityWorkboardActivityItem
  • Purpose: render a pixel-style game world across multiple agents with a fixed 40 x 24 tile world canvas, full-ratio normal view, cover-scaled fullscreen view, a Smallville-style downcity atlas, open state buildings, tiled interior room maps, a portal rail, keyboard map control, sprite patrols, quest paths, in-room wall boards, blueprint tables, a codex log, and focused inspection

buildWorkboardGameMapConfig

  • Exports: buildWorkboardGameMapConfig
  • Exported types:
    • DowncityWorkboardGameMapConfig
    • DowncityWorkboardGameZone
    • DowncityWorkboardGameActor
    • DowncityWorkboardGameRoute
    • DowncityWorkboardGamePointOfInterest
    • DowncityWorkboardGameAreaLabel
    • DowncityWorkboardGameAtlasProps
    • DowncityWorkboardGameRoomProps
    • DowncityWorkboardGameInspectorProps
    • DowncityWorkboardGameHudProps
  • Purpose: map the public workboard snapshot into a full game-map configuration that custom hosts can reuse for zones, actors, routes, gates, stations, props, and area labels

Overlays and Feedback Modules

Dialog

  • Exports:
    • Dialog
    • DialogTrigger
    • DialogPortal
    • DialogClose
    • DialogOverlay
    • DialogContent
    • DialogHeader
    • DialogFooter
    • DialogTitle
    • DialogDescription

Sheet

  • Exports:
    • Sheet
    • SheetTrigger
    • SheetClose
    • SheetPortal
    • SheetOverlay
    • SheetContent
    • SheetHeader
    • SheetFooter
    • SheetTitle
    • SheetDescription
  • Exports:
    • DropdownMenu
    • DropdownMenuTrigger
    • DropdownMenuPortal
    • DropdownMenuContent
    • DropdownMenuGroup
    • DropdownMenuLabel
    • DropdownMenuItem
    • DropdownMenuCheckboxItem
    • DropdownMenuRadioGroup
    • DropdownMenuRadioItem
    • DropdownMenuSeparator
    • DropdownMenuShortcut
    • DropdownMenuSub
    • DropdownMenuSubTrigger
    • DropdownMenuSubContent

ContextMenu

  • Exports: ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuGroup, ContextMenuLabel, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent
  • Purpose: provide right-click actions for a target region

Command

  • Exports: Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut
  • Purpose: command palettes, resource search, and quick navigation

Popover

  • Exports:
    • Popover
    • PopoverTrigger
    • PopoverContent

Tooltip

  • Exports:
    • Tooltip
    • TooltipTrigger
    • TooltipContent
    • TooltipProvider

Toaster

  • Exports: Toaster
  • Built on: sonner

Workboard Game

Game-style map rendering components for the agent activity world

Host Integration

Design a stable interaction boundary between UI components and the downcity main package

Table of Contents

UI SDK ModulesUtilities and TypescnDowncityButtonVariantDowncityButtonSizeDowncityCardSizeDowncityDropdownMenuItemVariantDowncityContextMenuItemVariantDowncityItemVariant, DowncityItemSizeDowncitySpinnerSizeDowncityToasterThemeStyle Modules@downcity/ui/source.css@downcity/ui/styles.cssActions and State ModulesButtonButtonGroupBadgeToggleToggleGroupSpinnerKbdCodeBlockTypographyForm ModulesInputTextareaCheckboxLabelSelectSliderSwitchContainers and Display ModulesChatPanelCardSeparatorSkeletonTabsSettingsItemEmptyWorkboardbuildWorkboardGameMapConfigOverlays and Feedback ModulesDialogSheetDropdownMenuContextMenuCommandPopoverTooltipToasterRecommended Reading