@spawnite/devtools 0.1.0-beta.15

package/dist/index.d.ts

@@ -0,0 +1,1658 @@
+import { BehaviourOption, CursorMode, DeclaredPanel, DevtoolsNode, DevtoolsPanel, DevtoolsPanel as DevtoolsPanel$1, FrameCost, FrameSplit, GroundSpot, LogLevel, LogLine, MapChoice, PaintMaterial, Placeable, PropEdit, PropRange, Relation, RoomState, ScatterPick, ScreenRect, SendOutcome, SentMessage, StatModifier, SystemEntry, TerrainEditorState, Wiki, WikiEntry, WikiRef, useDevtools } from "@spawnite/engine/devtools";
+import { ComponentProps, InputHTMLAttributes, MouseEvent as MouseEvent$1, ReactNode, Ref } from "react";
+import { AgentActivity, ChatPost, FavoriteField, MapPoint } from "@spawnite/schema";
+import { AbilityInspection } from "@spawnite/engine";
+import { HTMLMotionProps } from "motion/react";
+import { MermaidConfig } from "mermaid";
+import { TooltipProps } from "@spawnite/ui";
+/** One step a game's playtest panel runs, such as a quick start past the
+ *  title or a wave on demand, which `spawnite play action <name>` runs by
+ *  name, as Unreal's console runs a cheat. */
+interface PlaytestAction {
+  /** What the panel's button and the cli call it, such as "Quick start". */
+  name: string;
+  /** Runs the step. A line it returns, such as "No damage on", is what
+   *  the cli prints; it throws to refuse, with why, such as a quick start
+   *  asked for mid-run. */
+  run: () => string | void | Promise<string | void>;
+}
+/** What the page exposes for the cli. */
+interface PlaytestActionsOnPage {
+  list: () => string[];
+  run: (name: string) => Promise<string | undefined>;
+}
+declare global {
+  interface Window {
+    /** The game's playtest actions, while its devtools are mounted. */
+    __GAME_PLAYTEST_ACTIONS__?: PlaytestActionsOnPage;
+  }
+}
+declare global {
+  interface Window {
+    /** The engine's devtools store, for a playtest driving the page
+     *  from outside it. */
+    __GAME_DEVTOOLS__?: typeof useDevtools;
+  }
+}
+interface DevtoolsProps {
+  /** The game's own sections, one icon each on the rail, beside those it
+   *  registers with the store. */
+  panels?: DevtoolsPanel$1[];
+  /** The steps the game's playtest panel runs, by name, which
+   *  `spawnite play action <name>` runs too. */
+  playtestActions?: PlaytestAction[];
+}
+/** The debugger overlay. A game mounts it inside `<Game>` in development
+ *  only. With edit mode off it is the toggle and the frame rate; on, the
+ *  top bar, the rail of icons down the left edge with the one sidebar
+ *  beside it, and the frames on the hovered and the selected entity. The
+ *  sidebar shows the section whose icon is pressed: the entity tree with
+ *  the inspector under it, the map's placeables, the fields the creator
+ *  starred, the game's own panels and
+ *  those it registers with the store, the game's wiki, the console, the
+ *  frame's times, the shortcuts, and at the rail's foot the console. It captures the console
+ *  while mounted, so the log holds what came before edit mode too. With
+ *  `?map=<name>` in the URL it shows that map alone. On a phone the
+ *  sections open one at a time from a tab bar at the foot, in place of the
+ *  rail. It draws nothing while the game's loading screen covers the page,
+ *  and its store is on the page from its mount, so the agent's tools read a
+ *  game still loading.
+ *
+ *  ponytail: edit mode is the store's, so it starts the recording; the
+ *  open section is the layout store's, which the browser keeps. */
+export declare function Devtools({ panels, playtestActions }: DevtoolsProps): import("react").JSX.Element | null;
+/** The overlay's own sections; a game's panel has the id `readPanelId`
+ *  gives it. */
+export declare enum SectionId {
+  Entities = "entities",
+  Map = "map",
+  Assets = "assets",
+  Favorites = "favorites",
+  Clips = "clips",
+  Wiki = "wiki",
+  Console = "console",
+  Shortcuts = "shortcuts"
+}
+/** The rail's top icons in the order the browser kept, `ids` by id. A kept
+ *  id no item has any more is dropped, and an item the kept order does not
+ *  name, such as a section a game registered since, stands after the item
+ *  that comes before it by default, or first where none does. */
+export declare function orderRail<Item extends {
+  id: string;
+}>(items: Item[], ids: string[]): Item[];
+interface LayoutState {
+  /** The section the sidebar shows, or showed before it folded. */
+  section: string;
+  /** Folded, the rail stands alone. */
+  open: boolean;
+  /** The sidebar's width in pixels, the same for every section. */
+  width: number;
+  treeShare: number;
+  /** The rail's top icons by id, in the order a drag left them; empty,
+   *  the default order. */
+  railOrder: string[];
+  /** A press on a section's icon: opens it, or folds the sidebar where
+   *  it is the open one. */
+  pressSection: (id: string) => void;
+  /** Opens a section, whatever showed before. */
+  openSection: (id: string) => void;
+  setWidth: (width: number) => void;
+  setTreeShare: (share: number) => void;
+  setRailOrder: (ids: string[]) => void;
+  resetRailOrder: () => void;
+}
+/** Where the sidebar stands, kept in the browser for the next page load. */
+export declare const useLayout: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<LayoutState>, "persist" | "setState"> & {
+  setState(partial: LayoutState | Partial<LayoutState> | ((state: LayoutState) => LayoutState | Partial<LayoutState>), replace?: false | undefined): unknown;
+  setState(state: LayoutState | ((state: LayoutState) => LayoutState), replace: true): unknown;
+  persist: {
+    setOptions: (options: Partial<import("zustand/middleware").PersistOptions<LayoutState, LayoutState, unknown>>) => void;
+    clearStorage: () => void;
+    rehydrate: () => Promise<void> | void;
+    hasHydrated: () => boolean;
+    onHydrate: (fn: (state: LayoutState) => void) => () => void;
+    onFinishHydration: (fn: (state: LayoutState) => void) => () => void;
+    getOptions: () => Partial<import("zustand/middleware").PersistOptions<LayoutState, LayoutState, unknown>>;
+  };
+}>;
+export declare enum PropKind {
+  Number = "number",
+  Toggle = "toggle",
+  /** Another entity, such as the one a behaviour chases. */
+  Entity = "entity",
+  Text = "text"
+}
+interface NumberProp {
+  kind: PropKind.Number;
+  name: string;
+  value: number;
+  /** Left out with `max`, the engine knows no range and no slider draws. */
+  min?: number;
+  max?: number;
+  /** Left out, a hundredth of the range. */
+  step?: number;
+  /** The box takes any finite value; only the slider keeps `min` and
+   *  `max`, for a range the inspector made up rather than one declared. */
+  open?: boolean;
+}
+interface ToggleProp {
+  kind: PropKind.Toggle;
+  name: string;
+  value: boolean;
+}
+interface EntityProp {
+  kind: PropKind.Entity;
+  name: string;
+  /** The entity's name. */
+  value: string;
+}
+interface TextProp {
+  kind: PropKind.Text;
+  name: string;
+  value: string;
+}
+/** One prop of a behaviour, as the inspector edits it. Given a
+ *  `readOnlyReason`, that field alone is greyed, with the reason as its
+ *  tooltip. */
+type BehaviourProp = (NumberProp | ToggleProp | EntityProp | TextProp) & {
+  readOnlyReason?: string;
+};
+type PropValue = BehaviourProp["value"];
+interface BehaviourCardProps {
+  name: string;
+  /** Left out, no line under the name. */
+  description?: string;
+  /** Left out, the behaviour declares no wiki page. */
+  docsHref?: string;
+  /** Some prop differs from the behaviour's defaults. */
+  changed: boolean;
+  props: BehaviourProp[];
+  /** An edit, by the prop's name. The value comes back through `props`. */
+  onChange: (name: string, value: PropValue) => void;
+  /** Given, the fields are greyed and take no edit, and the card says
+   *  why. */
+  readOnlyReason?: string;
+  /** What a game pastes into its component to keep the edits, which a
+   *  Copy as prop button writes to the clipboard; left out, no button. */
+  copyText?: string;
+  /** The favourite a field's star keeps, by the field's name; left out,
+   *  the fields carry no star. */
+  favorite?: (field: string) => FavoriteField;
+  /** Under the fields: the Stats card's stats. */
+  children?: ReactNode;
+  /** Where its host places it. */
+  className?: string;
+}
+/** One behaviour on the inspected entity: its name, what it does, a link to
+ *  its docs, and a field for each prop. */
+export declare function BehaviourCard({ name, description, docsHref, changed, props, onChange, readOnlyReason, copyText, favorite, children, className }: BehaviourCardProps): import("react").JSX.Element;
+interface AbilitiesCardProps {
+  inspection: AbilityInspection;
+  /** The ability the rings draw and the range verdict is for, by name. */
+  selected: string | null;
+  onSelect: (name: string) => void;
+  /** Whether the range rings and the target line are drawn. */
+  rings: boolean;
+  onRingsChange: (rings: boolean) => void;
+  /** Where its host places it. */
+  className?: string;
+}
+/** The abilities the entity holds and the numbers that decide a cast: per
+ *  ability its kind, range, cost, cooldown left and cast state, above them
+ *  the target, its reach, whether it is in range of the selected ability
+ *  and in sight, and why the last cast was refused. A switch draws the
+ *  selected ability's range round the caster. The rows are live: the host
+ *  hands a new inspection each frame the numbers change. */
+export declare function AbilitiesCard({ inspection, selected, onSelect, rings, onRingsChange, className }: AbilitiesCardProps): import("react").JSX.Element;
+interface AddBehaviourMenuProps {
+  /** The behaviours the entity can take, in the order the numbers pick. */
+  options: BehaviourOption[];
+  onAdd: (name: string) => void;
+  onClose: () => void;
+  /** Where the overlay places it: beside the context menu. */
+  className?: string;
+}
+/** The context menu's Add behaviour submenu: a search over the behaviours
+ *  the entity can take. Focus stays in the search; the arrows move the
+ *  highlight, Enter adds it, 1 to 9 add by number until the search has
+ *  text, and Escape closes. */
+export declare function AddBehaviourMenu({ options, onAdd, onClose, className }: AddBehaviourMenuProps): import("react").JSX.Element;
+/** A row put on the next message, by its id and as the tree labels it. */
+type ChatAttachment = ChatPost["attachments"][number];
+interface ChatStripProps {
+  /** Every message the page sent, the pane's too, oldest first. */
+  sent: SentMessage[];
+  attachments: ChatAttachment[];
+  onDetach: (id: string) => void;
+  text: string;
+  onTextChange: (text: string) => void;
+  onSend: () => void;
+  /** Given, an X in the header closes the strip. */
+  onClose?: () => void;
+  /** Where the overlay places it, and how tall it is. */
+  className?: string;
+}
+/** A message to the agent: what was sent so far, the rows attached to the
+ *  next one, and a field that grows with its text. ⌘↵ sends, since Enter
+ *  starts a new line. */
+export declare function ChatStrip({ sent, attachments, onDetach, text, onTextChange, onSend, onClose, className }: ChatStripProps): import("react").JSX.Element;
+interface ConsoleStripProps {
+  lines: LogLine[];
+  onClear: () => void;
+  /** Given, an X in the header closes the pane: a phone's sheet. */
+  onClose?: () => void;
+  /** Where its host places it, and how tall it is. */
+  className?: string;
+}
+/** The game's log: a chip per level in the header, which counts it and
+ *  hides it on a press, a filter and Clear, then the lines, each message
+ *  on as many rows as it takes. */
+export declare function ConsoleStrip({ lines, onClear, onClose, className }: ConsoleStripProps): import("react").JSX.Element;
+export declare enum EntityAction {
+  SendToAgent = "sendToAgent",
+  Inspect = "inspect",
+  SelectParent = "selectParent",
+  FocusCamera = "focusCamera",
+  Hide = "hide",
+  Duplicate = "duplicate",
+  Delete = "delete",
+  AddBehaviour = "addBehaviour",
+  CopyId = "copyId"
+}
+/** A point in the world, as three's vectors carry one. */
+interface WorldPoint {
+  x: number;
+  y: number;
+  z: number;
+}
+interface ContextMenuProps {
+  name: string;
+  /** The id as the game prints it: `#113`. */
+  entityId: string;
+  /** Its component type: Spline, Pickup. */
+  type: string;
+  /** The world point the right-click met on it. */
+  point?: WorldPoint;
+  /** Why an action is off for this entity, by action. */
+  disabled?: Partial<Record<EntityAction, string>>;
+  onAction: (action: EntityAction) => void;
+  onClose: () => void;
+  /** Where the overlay places it: at the pointer. */
+  className?: string;
+}
+/** What a right-click on an entity offers, headed by the entity. It opens
+ *  on the first action; the arrows move, Enter picks, Escape closes. */
+export declare function ContextMenu({ name, entityId, type, point, disabled, onAction, onClose, className }: ContextMenuProps): import("react").JSX.Element;
+type TerrainTool = NonNullable<TerrainEditorState["tool"]>;
+export declare enum GroundAction {
+  SendToAgent = "sendToAgent",
+  PlayFromHere = "playFromHere",
+  PickMaterial = "pickMaterial",
+  RemoveScattered = "removeScattered",
+  PickHeight = "pickHeight",
+  ResetHere = "resetHere",
+  CopyPosition = "copyPosition",
+  DuplicateMaterial = "duplicateMaterial",
+  ToggleWet = "toggleWet",
+  ToggleLower = "toggleLower",
+  SetSea = "setSea",
+  Undo = "undo",
+  Redo = "redo"
+}
+interface GroundContextMenuProps {
+  /** The map whose ground it is. */
+  map: string;
+  spot: GroundSpot;
+  /** The cell's own material, which the material's items act on. */
+  material: string;
+  /** Whether that material shows rain ripples. */
+  wet: boolean;
+  /** Whether the editor has a step to undo, and one to redo. */
+  undoable: boolean;
+  redoable: boolean;
+  /** Why Play from here is off, such as in a room, which places the
+   *  player; on where left out. */
+  playFromHereDisabledReason?: string;
+  mode: CursorMode;
+  tool: TerrainTool | null;
+  brush: Pick<TerrainEditorState["brush"], "radius">;
+  /** Whether Sculpt lowers the ground. */
+  lower: boolean;
+  /** The scattered tree, bush, rock or tuft the click is on, its kind
+   *  in words, such as `tree round`, which Remove this erases; left out
+   *  on bare ground. */
+  scattered?: string;
+  onMode: (mode: CursorMode) => void;
+  onTool: (tool: TerrainTool) => void;
+  onBrush: (brush: Partial<TerrainEditorState["brush"]>) => void;
+  onAction: (action: GroundAction) => void;
+  onClose: () => void;
+  /** Whether the Other submenu starts open. */
+  defaultOtherOpen?: boolean;
+  /** Where the overlay places it: at the pointer. */
+  className?: string;
+}
+/** What a right-click on bare ground offers, headed by what is there: the
+ *  cursor's mode, and in Terrain the tools, and the brush's sizes while
+ *  one is in hand, then what to do at the spot, the rarer actions under
+ *  Other. It opens on the first action; the arrows move, Enter picks,
+ *  Escape closes. Other opens its submenu beside the menu, else over it,
+ *  on a click or a mouse resting on it; Escape, a press outside the
+ *  submenu or the mouse off both closes it alone. */
+export declare function GroundContextMenu({ map, spot, material, wet, undoable, redoable, playFromHereDisabledReason, mode, tool, brush, lower, scattered, onMode, onTool, onBrush, onAction, onClose, defaultOtherOpen, className }: GroundContextMenuProps): import("react").JSX.Element;
+interface DevtoolsOverlayProps {
+  topBar?: ReactNode;
+  /** The buttons before the top bar on a desktop: Record's and the
+   *  screenshot's. */
+  leading?: ReactNode;
+  /** The buttons after the top bar on a desktop: the free camera's and
+   *  the map's. */
+  camera?: ReactNode;
+  /** The rail of icons, down the left edge. */
+  rail?: ReactNode;
+  /** The sidebar beside the rail, with the open section; nothing while
+   *  it is folded. */
+  sidebar?: ReactNode;
+  /** The frame on the hovered or selected entity. */
+  outline?: ReactNode;
+  /** The context menu, over everything, where it places itself. */
+  menu?: ReactNode;
+  /** A phone's tab bar, along the bottom edge. */
+  tabBar?: ReactNode;
+  /** A phone's open panel, in a sheet that springs up out of the tab bar
+   *  and leaves the game above it free for a tap. */
+  sheet?: ReactNode;
+  /** A phone: the toolbar takes a row of its own under the toggles and
+   *  slides down from under them, and the panels open one at a time in
+   *  `sheet`. */
+  phone?: boolean;
+}
+/** Edit mode's layout: the bar along the top and the rail and its sidebar
+ *  down the left edge, the rest left to the game. Only the surfaces take
+ *  the pointer. A
+ *  column, so the panels start under the top bar however many rows it
+ *  wraps to; the insets keep clear of a phone's notch and home bar. */
+export declare function DevtoolsOverlay({ topBar, leading, camera, rail, sidebar, outline, menu, tabBar, sheet, phone }: DevtoolsOverlayProps): import("react").JSX.Element;
+/** A point on a rect as fractions of its width and height: `{ x: 1, y: 1 }`
+ *  is its bottom-right corner. */
+interface Anchor {
+  x: number;
+  y: number;
+}
+interface AnchoredBoxProps extends Omit<HTMLMotionProps<"div">, "style"> {
+  /** What it stands on, in the window's pixels, such as an entity's frame.
+   *  Followed at once as it moves. */
+  rect: Pick<ScreenRect, "left" | "top" | "width" | "height">;
+  /** Where on the rect its top-left corner stands. A new anchor springs
+   *  there, so the box glides across the rect rather than jumping. */
+  anchor: Anchor;
+  /** Its own size, so it stays inside the window. */
+  size: {
+    width: number;
+    height: number;
+  };
+}
+/** A box pinned to a point on a moving rect, as a popover stands on its
+ *  anchor in Floating UI: the rect is followed every frame exactly, and
+ *  only the point on it springs, so the box slides to a new point while it
+ *  keeps up with what it stands on. Absolutely placed; its place comes from
+ *  motion values, so a slide renders nothing in React. */
+export declare function AnchoredBox({ rect, anchor, size, ...box }: AnchoredBoxProps): import("react").JSX.Element;
+interface EntityOutlineProps {
+  rect: ScreenRect;
+  /** With its id: `Coin #12`. */
+  name: string;
+  /** Its component type: Pickup, Enemy. */
+  type: string;
+  /** Selected, rather than under the pointer. */
+  selected?: boolean;
+  /** Its buttons stay whatever is selected after it, and its panel
+   *  stands over it while the world panels are on: Pin reads Unpin,
+   *  under a cross. */
+  pinned?: boolean;
+  /** The buttons alone, with no frame and no name: a pinned entity that
+   *  is neither selected nor under the pointer. */
+  bare?: boolean;
+  /** The frame with no name above it: an entity whose world panel
+   *  stands there and names it. */
+  nameless?: boolean;
+  /** Where on the frame the strip opens, as fractions of its width and
+   *  height: the point the selecting click met, so the buttons open
+   *  under the cursor and ride with the entity. The bottom-right corner
+   *  for a selection made without a click, as from the tree. */
+  anchor?: StripAnchor;
+  /** The strip's buttons, one for each given: Send to agent, Inspect and
+   *  Pin. Without Inspect, no strip. */
+  onSendToAgent?: () => void;
+  onInspect?: () => void;
+  onTogglePin?: () => void;
+}
+/** A point on a frame as fractions of its width and height. */
+type StripAnchor = Anchor;
+/** A frame drawn over the entity the pointer is on, or the selected one,
+ *  with its name above. Nothing under it dims: the frame is the only mark.
+ *  The frame and the name are hidden from assistive technology, which
+ *  hears the selection from the tree and the inspector. A selected frame
+ *  carries a row of round buttons at its anchor, which alone takes the
+ *  pointer. */
+export declare function EntityOutline({ rect, name, type, selected, anchor, pinned, bare, nameless, onSendToAgent, onInspect, onTogglePin }: EntityOutlineProps): import("react").JSX.Element;
+interface EntityTreeProps {
+  nodes: DevtoolsNode[];
+  /** The ids whose children start hidden. Opening and closing a node is
+   *  the tree's own business after that. */
+  initiallyCollapsed?: string[];
+  selectedId?: string;
+  /** The rest of a selection of several, marked as selected too. */
+  selectedIds?: string[];
+  /** `adding` on a ⇧ or ⌘ click, which adds the row to the selection or
+   *  takes it out. */
+  onSelect: (id: string, adding: boolean) => void;
+  /** The pointer over a row, so the scene can outline its entity, and
+   *  `null` once it leaves the tree. */
+  onHover?: (id: string | null) => void;
+  /** A right-click on a row, which the overlay opens its menu on. */
+  onContextMenu?: (id: string, event: MouseEvent$1) => void;
+}
+/** The scene as a tree: its world, the component types, their entities and
+ *  each entity's behaviours, with a filter above and the counts below. */
+export declare function EntityTree({ nodes, initiallyCollapsed, selectedId, selectedIds, onSelect, onHover, onContextMenu }: EntityTreeProps): import("react").JSX.Element;
+/** What the bar reads of the game's room. */
+type RoomReadout = Pick<RoomState, "roundTripMilliseconds" | "stepMilliseconds" | "snapshotsPerSecond" | "bytesPerSecond" | "players" | "corrections" | "correctionMetres">;
+interface TopBarProps {
+  paused: boolean;
+  speed: number;
+  /** The recorded frames as bars, oldest first, spread across the window,
+   *  each a fraction of the tallest bar between 0 and 1. */
+  recording: number[];
+  /** Where the replay stands, in seconds before now: 0 is the present,
+   *  -10 the oldest frame kept. */
+  playheadSeconds: number;
+  framesPerSecond: number;
+  /** The room the game plays in; none outside one. In one, pause, step
+   *  and speed are off. */
+  room?: RoomReadout;
+  /** Drawn after the controls, before the frame rate: on a phone, the
+   *  free camera's button, since the round one has no place beside the
+   *  bar there. */
+  camera?: ReactNode;
+  onTogglePause: () => void;
+  onStep: () => void;
+  onSpeed: (speed: number) => void;
+  /** A seek on the scrubber, in seconds before now. */
+  onSeek: (seconds: number) => void;
+  /** False leaves the scrubber out: a phone has no room for it and no
+   *  keys to step through it. */
+  scrubber?: boolean;
+  /** Where the overlay places it. */
+  className?: string;
+}
+/** The playback bar at the top of the screen in edit mode: pause, step,
+ *  speed, the last ten seconds as a scrubber, then the frame rate. The
+ *  frame's times and a room's readouts are the Frame panel's. In a room,
+ *  pause, step and speed are off. */
+export declare function TopBar({ paused, speed, recording, playheadSeconds, framesPerSecond, room, camera, onTogglePause, onStep, onSpeed, onSeek, scrubber, className }: TopBarProps): import("react").JSX.Element;
+interface FrameStatsProps {
+  frameMilliseconds: number;
+  /** The game's own clock, which stops when it pauses. */
+  simulatedSeconds: number;
+  /** None while the loop times no frames. */
+  frameSplit?: Pick<FrameSplit, "cpu" | "gpu"> | null;
+  /** The last frame's draw calls and triangles; none while the loop
+   *  times no frames. */
+  cost?: Pick<FrameCost, "drawCalls" | "triangles"> | null;
+  /** The room the game plays in, with its own work per step where it
+   *  sends it; none outside one. */
+  room?: RoomReadout & Partial<Pick<RoomState, "roomStepMilliseconds">>;
+}
+/** The frame's time, the CPU's and the GPU's share of it with the last
+ *  frame's draw calls and triangles, and the game's clock, and in a room
+ *  the round trip, the step time, the room's own step time, the stream's
+ *  rates, the players and the room's corrections of the player's character. At
+ *  the head of the Frame panel. */
+export declare function FrameStats({ frameMilliseconds, simulatedSeconds, frameSplit, cost, room }: FrameStatsProps): import("react").JSX.Element;
+interface FrameTimesProps {
+  /** None before the loop's first split arrives. */
+  split: FrameSplit | null;
+}
+/** The last 60 frames by part, then the totals, each by mean and worst. */
+export declare function FrameTimes({ split }: FrameTimesProps): import("react").JSX.Element;
+interface SidePanelProps {
+  title: string;
+  /** Drawn before the title. */
+  icon: ReactNode;
+  /** Given, an X in the header closes the pane: a phone's sheet. The
+   *  sidebar's sections have none, since the rail folds them. */
+  onClose?: () => void;
+  /** Where its host places it. */
+  className?: string;
+  /** A function draws its own header instead of the title's row, and
+   *  takes the X to place in it, where the pane has one. */
+  children: ReactNode | ((close: ReactNode) => ReactNode);
+}
+/** A section's pane, in the sidebar or a phone's sheet: its title, with a
+ *  search in the pane standing at its right, then what it holds, as tall
+ *  and as wide as its host. */
+export declare function SidePanel({ title, icon, onClose, className, children }: SidePanelProps): import("react").JSX.Element;
+interface ClipsPanelProps extends Pick<SidePanelProps, "onClose"> {
+  /** Where its host places it. */
+  className?: string;
+}
+/** The Clips section: the clip recording now, the shape the next records
+ *  in, and every clip the game keeps, each to play here, delete, or send
+ *  to the agent. */
+export declare function ClipsPanel({ onClose, className }: ClipsPanelProps): import("react").JSX.Element;
+interface FavoritesPanelProps extends Pick<SidePanelProps, "onClose"> {
+  /** Where its host places it. */
+  className?: string;
+}
+/** The fields a creator starred, gathered from the world and every entity
+ *  as Unreal's Details panel gathers its Favorites: the world's settings
+ *  first, then a card per component, each field edited live. */
+export declare function FavoritesPanel({ onClose, className }: FavoritesPanelProps): import("react").JSX.Element;
+interface ScatterInstanceActionsProps {
+  /** The map's prop the instance stands for, or null for one the seed
+   *  placed. */
+  prop: string | null;
+  /** Where it stands, [x, z] in metres. */
+  position: [number, number];
+  onMakeEditable: () => void;
+  onMove: (point: [number, number]) => void;
+  onDelete: () => void;
+  className?: string;
+}
+/** Under a scattered tree, bush or rock in the Inspector: Make editable,
+ *  which makes it a prop of the map; under a prop, where it stands, which
+ *  moves it, and Delete. */
+export declare function ScatterInstanceActions({ prop, position, onMakeEditable, onMove, onDelete, className }: ScatterInstanceActionsProps): import("react").JSX.Element;
+/** One stat as the Stats card shows it. */
+interface InspectedStat {
+  name: string;
+  base: number;
+  /** The base under its modifiers, clamped to its bounds. */
+  value: number;
+  modifiers: StatModifier[];
+  /** The base's slider. */
+  range: PropRange;
+}
+interface StatsCardProps extends Pick<ComponentProps<typeof BehaviourCard>, "description" | "docsHref" | "copyText" | "readOnlyReason" | "favorite" | "className"> {
+  stats: InspectedStat[];
+  /** Some base was edited here; left out, none was. */
+  changed?: boolean;
+  /** A base edited, by its stat's name. */
+  onChange: (name: string, base: number) => void;
+}
+/** The entity's stats, whatever declared them: a slider on each one's
+ *  base, and under them the value each resolves to where its modifiers or
+ *  bounds move it, with each modifier and a timed one's seconds left. */
+export declare function StatsCard({ stats, onChange, description, docsHref, changed, copyText, readOnlyReason, favorite, className }: StatsCardProps): import("react").JSX.Element;
+/** A behaviour's card, with the id of the row it edits. */
+type InspectedBehaviour = Omit<ComponentProps<typeof BehaviourCard>, "onChange"> & Pick<DevtoolsNode, "id">;
+/** A card that takes no edit, and why. */
+type ReadOnlyCard = Pick<ComponentProps<typeof BehaviourCard>, "name" | "props" | "readOnlyReason">;
+interface InspectedEntity {
+  name: string;
+  /** The id as the game prints it: `#01`. Left out for a row that is no
+   *  entity's, such as a HUD's, which shows no behaviours and sends
+   *  nothing to the agent. */
+  entityId?: string;
+  /** Its component type: Enemy, Pickup. Left out, no chip. */
+  type?: string;
+  /** Left out, the row goes. */
+  model?: string;
+  /** Left out where the entity has no transform. */
+  position?: MapPoint;
+  behaviours: InspectedBehaviour[];
+  /** Left out where the entity has no stats: one card after the
+   *  behaviours'. */
+  stats?: Omit<ComponentProps<typeof StatsCard>, "onChange" | "className">;
+  systems: SystemEntry[];
+  relations: Relation[];
+  /** The panel its component declared through `useDevtoolsPanel`, drawn
+   *  above the behaviours; left out where it declared none. */
+  panel?: DeclaredPanel;
+  /** A card that takes no edit, and why, drawn in place of the
+   *  behaviours: a scattered instance's placement, or the props a game
+   *  wrote on a HUD component. */
+  readOnlyCard?: ReadOnlyCard;
+  /** A scattered tree, bush or rock's actions under its placement: Make
+   *  editable, or, for one that is a prop, where it stands and Delete. */
+  scatter?: Pick<ComponentProps<typeof ScatterInstanceActions>, "prop" | "position">;
+  /** A card that takes no edit for each state machine it holds, after
+   *  the behaviours'. */
+  machines?: ReadOnlyCard[];
+  /** The numbers that decide a cast, for an entity that holds abilities,
+   *  in a section after the behaviours; left out, no section. */
+  abilities?: Omit<AbilitiesCardProps, "className">;
+}
+interface InspectorProps {
+  /** Left out, nothing is selected. */
+  entity?: InspectedEntity;
+  /** The saved sets of prop values, by name. None, and the row goes. */
+  presets: string[];
+  preset: string;
+  /** A prop edited on a card, by its row's id. */
+  onChange: (edit: PropEdit) => void;
+  /** A stat's base edited on the Stats card, by the stat's name. */
+  onStatChange: (name: string, base: number) => void;
+  onSendToAgent: () => void;
+  /** A related entity pressed, by its id. */
+  onSelectEntity: (id: string) => void;
+  /** Its pane's X on a phone, at the end of the header. */
+  close?: ReactNode;
+  onPreset: (preset: string) => void;
+  onSavePreset: () => void;
+  onDeletePreset: () => void;
+  /** What a scattered instance's actions do; left out, they are not
+   *  shown, as where no map editor runs. */
+  onScatter?: Pick<ComponentProps<typeof ScatterInstanceActions>, "onMakeEditable" | "onMove" | "onDelete">;
+}
+/** The selected entity: its header, a card per behaviour, the systems that
+ *  run on it and its relations, with its presets at the foot. */
+export declare function Inspector({ entity, presets, preset, onChange, onStatChange, onSendToAgent, onSelectEntity, onPreset, onSavePreset, onDeletePreset, onScatter, close }: InspectorProps): import("react").JSX.Element;
+/** One part of what goes to the agent, as `describe` gathers it. */
+interface BundlePart {
+  id: string;
+  title: string;
+  /** What it holds, in a line: the files, the systems. */
+  summary: string;
+  included: boolean;
+  /** A picture of it, such as the framed screenshot. */
+  image?: string;
+}
+/** A send under way. */
+interface SendProgress {
+  /** Who it goes to: "Claude Code". */
+  agent: string;
+  /** Between 0 and 1. */
+  progress: number;
+  sentPartIds: string[];
+}
+interface SendToAgentProps {
+  name: string;
+  entityId: string;
+  intent: string;
+  onIntentChange: (intent: string) => void;
+  parts: BundlePart[];
+  onTogglePart: (id: string) => void;
+  /** The bundle's size, the image aside. */
+  bundleKilobytes: number;
+  /** Left out until Send is pressed. */
+  sending?: SendProgress;
+  /** How the last send went, where it left the pane open. */
+  outcome?: SendOutcome;
+  onSend: () => void;
+  onCopyBundle: () => void;
+  onCancel: () => void;
+  /** Where the overlay places it. */
+  className?: string;
+}
+/** What goes to the agent about one entity: a line of intent and the parts
+ *  `describe` gathers, each of which can be left out. */
+export declare function SendToAgent({ name, entityId, intent, onIntentChange, parts, onTogglePart, bundleKilobytes, sending, outcome, onSend, onCopyBundle, onCancel, className }: SendToAgentProps): import("react").JSX.Element;
+/** A part of the overlay that answers keys of its own. */
+declare enum DevtoolsSurface {
+  Tree = "tree",
+  Inspector = "inspector",
+  Console = "console",
+  TopBar = "top-bar",
+  /** The outline and the context menu over the game. */
+  Scene = "scene"
+}
+/** Every key the overlay answers to, by what it does. */
+declare enum DevtoolsAction {
+  ToggleEditMode = "toggle-edit-mode",
+  ShowShortcuts = "show-shortcuts",
+  SendToAgent = "send-to-agent",
+  CopyAgentBundle = "copy-agent-bundle",
+  Undo = "undo",
+  Redo = "redo",
+  Save = "save",
+  ShowRailSection = "show-rail-section",
+  ToggleConsole = "toggle-console",
+  NextGamePanel = "next-game-panel",
+  FoldSidebar = "fold-sidebar",
+  Close = "close",
+  Select = "select",
+  AddToSelection = "add-to-selection",
+  SelectParent = "select-parent",
+  OpenContextMenu = "open-context-menu",
+  Inspect = "inspect",
+  FocusCamera = "focus-camera",
+  Hide = "hide",
+  Duplicate = "duplicate",
+  Delete = "delete",
+  AddBehaviour = "add-behaviour",
+  CopyId = "copy-id",
+  FilterTree = "filter-tree",
+  MoveInTree = "move-in-tree",
+  ExpandInTree = "expand-in-tree",
+  SelectInTree = "select-in-tree",
+  ShowBehaviours = "show-behaviours",
+  NextProp = "next-prop",
+  SavePreset = "save-preset",
+  ResetProps = "reset-props",
+  ClearConsole = "clear-console",
+  TogglePause = "toggle-pause",
+  ToggleClip = "toggle-clip",
+  StepFrame = "step-frame",
+  StepBack = "step-back",
+  LowerTerrain = "lower-terrain",
+  SmoothTerrain = "smooth-terrain",
+  ResizeBrush = "resize-brush",
+  BrushStrength = "brush-strength",
+  PutToolDown = "put-tool-down",
+  PutCardDown = "put-card-down"
+}
+interface ShortcutsPanelProps {
+  /** Escape in its search. */
+  onClose: () => void;
+  /** Focus the search as it mounts, as `?` asks. */
+  focusSearch?: boolean;
+  /** The surfaces on screen. A key whose surface is missing is dimmed and
+   *  marked not yet; left out, every key is live. */
+  surfaces?: DevtoolsSurface[];
+  /** Keys a surface on screen shows but does not answer yet, dimmed the
+   *  same way. */
+  unanswered?: DevtoolsAction[];
+  /** Where its host places it. */
+  className?: string;
+}
+/** Every key the overlay answers to, by where it works, with a search over
+ *  actions and keys: Settings' Shortcuts, which `?` opens. */
+export declare function ShortcutsPanel({ onClose, focusSearch, surfaces, unanswered, className }: ShortcutsPanelProps): import("react").JSX.Element;
+/** The lines logged since the console last showed, for its icon's circle. */
+interface UnreadLog {
+  count: number;
+  /** The worst level among them; none with nothing unread. */
+  level?: LogLevel;
+}
+/** One section of the sidebar, as its icon on the rail. */
+interface RailItem {
+  id: string;
+  /** The section's name, which the icon's tooltip says. */
+  title: string;
+  icon: ReactNode;
+  /** The chord that opens it. */
+  shortcut?: string[];
+  /** The console's: the lines logged since it last showed. */
+  unread?: UnreadLog;
+}
+interface RailProps {
+  /** From the top: the overlay's sections and the game's. */
+  items: RailItem[];
+  /** At the foot, apart from the rest. */
+  footItems: RailItem[];
+  /** Last of all, under a line of its own: the console. */
+  apart?: RailItem;
+  /** The section the sidebar shows; null while it is folded. */
+  active: string | null;
+  /** A press on a section's icon, the open one's included. */
+  onSelect: (id: string) => void;
+  /** Given, the top icons move on a drag up or down the rail, and a
+   *  release hands over their ids in the new order. */
+  onOrder?: (ids: string[]) => void;
+  /** Where the overlay places it, and how tall it is. */
+  className?: string;
+}
+/** The column of icons down the left edge, one a section of the sidebar
+ *  beside it, as VS Code's activity bar and Figma's navigation bar: what a
+ *  creator builds with at the top, what they look things up in at the
+ *  foot, and one apart under a line at the very bottom. */
+export declare function Rail({ items, footItems, apart, active, onSelect, onOrder, className }: RailProps): import("react").JSX.Element;
+interface SidebarProps {
+  /** In pixels, the same for every section. */
+  width: number;
+  /** A drag on its edge, or an arrow key with the edge focused: the
+   *  width asked for, which the caller keeps inside its limits. */
+  onWidth: (width: number) => void;
+  /** The open section's pane. */
+  children: ReactNode;
+}
+/** The one sidebar beside the rail: the open section at the width a drag
+ *  on its edge set, or wider where the section needs it. It grows out of
+ *  the rail as it opens and narrows back into it as it folds, what it holds
+ *  keeping its width and riding the moving edge, so it slides in and out of
+ *  the rail rather than squeezing; a
+ *  change of width, such as the console's, springs the same way, and a drag
+ *  follows the pointer at once. A direct child of `AnimatePresence`, so its
+ *  fold plays before it goes. */
+export declare function Sidebar({ width, onWidth, children }: SidebarProps): import("react").JSX.Element;
+interface SplitPaneProps {
+  /** The section's pane, which takes the whole height alone. */
+  top: ReactNode;
+  /** Under it, the pane about what is selected; nothing, and it goes. */
+  bottom?: ReactNode;
+  /** The top pane's share of the height while both show, from 0 to 1. */
+  share: number;
+  /** A drag on the line between them, or an arrow key with the line
+   *  focused: the share asked for, which the caller keeps inside its
+   *  limits. */
+  onShare: (share: number) => void;
+}
+/** The sidebar's column: the section, and under it the inspector once a
+ *  row is selected, with a line between them that a drag moves. Both in
+ *  view together, as Roblox stacks Explorer over Properties. The section
+ *  springs to its share as the inspector rises under it, and back to the
+ *  whole height as it folds away; a drag follows the pointer at once. */
+export declare function SplitPane({ top, bottom, share, onShare }: SplitPaneProps): import("react").JSX.Element;
+interface SectionPaneProps {
+  panel: DevtoolsPanel$1;
+  /** Given, an X in the header closes it: a phone's sheet. */
+  onClose?: () => void;
+}
+/** A panel of the engine's or the game's as a section, in the sidebar or a
+ *  phone's sheet: its icon and its title, then what its component draws,
+ *  scrolling inside the pane's height. */
+export declare function SectionPane({ panel, onClose }: SectionPaneProps): import("react").JSX.Element;
+interface SegmentOption<Value extends string> {
+  value: Value;
+  label: string;
+  shortcut?: string[];
+  /** Drawn above the label: a phone's tab bar, big enough for a thumb.
+   *  A segment with an icon shows its label only while chosen, so a row
+   *  of them fits a phone; the label stays its name. */
+  icon?: ReactNode;
+}
+interface SegmentedControlProps<Value extends string> {
+  /** The group's accessible name. */
+  label: string;
+  options: SegmentOption<Value>[];
+  value: Value;
+  onChange: (value: Value) => void;
+  /** Given, every segment is disabled and says why as its tooltip. */
+  disabledReason?: string;
+  /** The frame and the font differ by use: the speed is framed and mono,
+   *  the game panels' tabs are neither, and a phone's tab bar is taller,
+   *  which the segments fill. */
+  className?: string;
+}
+/** One choice out of a few, side by side: the playback speed, the game
+ *  panels' tabs. The accent slides to the chosen one. */
+export declare function SegmentedControl<Value extends string>({ label, options, value, onChange, disabledReason, className }: SegmentedControlProps<Value>): import("react").JSX.Element;
+/** The seven panels the overlay always has; a game's own panels take the
+ *  ids `Devtools` gives them. */
+export declare enum PhoneTab {
+  Entities = "entities",
+  Map = "map",
+  Wiki = "wiki",
+  Assets = "assets",
+  Inspector = "inspector",
+  Console = "console",
+  Clips = "clips"
+}
+interface PhoneTabBarProps {
+  /** A tab per panel, each with its icon. */
+  tabs: SegmentOption<string>[];
+  /** The open panel's tab; null with none open. */
+  active: string | null;
+  /** A tap: the tab's id, or null when the open one is tapped again. */
+  onSelect: (id: string | null) => void;
+}
+/** The phone's bar along the bottom edge: the game panels' segmented
+ *  control, grown to a thumb's height with an icon over each label, one
+ *  segment per panel and none chosen while every panel is closed. The row
+ *  scrolls sideways once the game adds more panels than fit. A second tap
+ *  on the chosen segment closes its panel. */
+export declare function PhoneTabBar({ tabs, active, onSelect }: PhoneTabBarProps): import("react").JSX.Element;
+/** Where the entity menu opens: the row it acts on, the pointer in pixels
+ *  from the viewport's corner, and the world point the pointer met. */
+interface EntityMenuAnchor {
+  id: string;
+  x: number;
+  y: number;
+  point?: WorldPoint;
+}
+/** What the pane keeps while another tab shows: the search, the kind
+ *  whose page is open, whether each section a press folded or opened is
+ *  open, by its key, on every page alike, and how far out the map reaches.
+ *  A section no press reached shows as it starts: open, except the
+ *  overview and each kind's engine entries nothing uses. */
+interface WikiBrowse {
+  search: string;
+  kind: string | null;
+  sections: Record<string, boolean>;
+}
+interface WikiBrowserProps {
+  /** What `wiki()` returned. */
+  wiki: Wiki;
+  /** The entity tree, which names each entity an entry is used by. */
+  tree: DevtoolsNode[];
+  /** The entry on screen, or null for the list. The overlay holds it, so
+   *  it outlasts a switch to another tab. */
+  open: WikiRef | null;
+  onOpen: (ref: WikiRef | null) => void;
+  /** The overlay holds it too, so it outlasts a switch to another tab. */
+  browse: WikiBrowse;
+  onBrowse: (browse: WikiBrowse) => void;
+  /** A press on an entity an entry is used by: its row's id. */
+  onSelectEntity: (id: string) => void;
+  /** A press on a missing page's path: Send to agent on that page. */
+  onSendToAgent: (page: string, intent: string) => void;
+  className?: string;
+}
+/** The running game's wiki: a map at the top, of where the page on screen
+ *  sits and what it relates to, which takes you anywhere with a press, and
+ *  under it the page. The home holds a search, the entries by kind, and the
+ *  game's overview; a kind's page and an entry's open in its place. The
+ *  kinds come in the map's tiers, and each lists the game's entries, then
+ *  the engine's it uses, and folds the rest of the engine's into one
+ *  row. */
+export declare function WikiBrowser({ wiki, tree, open, onOpen, browse, onBrowse, onSelectEntity, onSendToAgent, className }: WikiBrowserProps): import("react").JSX.Element;
+export declare enum LeftPanelTab {
+  Entities = "entities",
+  Map = "map",
+  Wiki = "wiki",
+  Assets = "assets"
+}
+interface LeftPanelProps extends Pick<SidePanelProps, "onClose"> {
+  tab: LeftPanelTab;
+  /** A press on an entity an entry is used by, which goes to Entities.
+   *  Left out by a phone's sheet, which opens the inspector instead. */
+  onTab?: (tab: LeftPanelTab) => void;
+  /** The wiki entry on screen, or null for the list: the overlay's, so
+   *  it stays open while the tree shows. */
+  open: WikiRef | null;
+  onOpen: (ref: WikiRef | null) => void;
+  /** The Wiki tab's search, open kind and folds: the overlay's too, so a
+   *  switch to another section keeps them. */
+  browse: WikiBrowse;
+  onBrowse: (browse: WikiBrowse) => void;
+  /** The Map tab's folded and opened sections, the overlay's for the
+   *  same reason. */
+  mapSections: Record<string, boolean>;
+  onMapSections: (sections: Record<string, boolean>) => void;
+  /** A right-click on an entity's row. */
+  onOpenMenu: (anchor: EntityMenuAnchor) => void;
+  /** A press on a row, after the store selects it, the same row again
+   *  included, or on an entity an entry is used by: a phone opens the
+   *  inspector on it. */
+  onSelect?: () => void;
+  /** A press on a missing wiki page's path: Send to agent on that
+   *  page. */
+  onSendToAgent: (page: string, intent: string) => void;
+}
+/** One of the sections the engine fills: its tree, a press on a row being
+ *  the store's selection, the map's editor, the running game's wiki, or
+ *  what a creator can place. */
+export declare function LeftPanel({ tab, onTab, open, onOpen, browse, onBrowse, mapSections, onMapSections, onClose, onOpenMenu, onSelect, onSendToAgent }: LeftPanelProps): import("react").JSX.Element;
+interface MapPaletteProps {
+  /** A press on an avatar's card, after the store selects its
+   *  characters; a card that places keeps the section open. */
+  onSelect?: () => void;
+}
+/** The Assets section: what a creator can place, as cards in four
+ *  sections, models, avatars, scatter and shapes, each with how many stand
+ *  in the map now, under a search that filters the cards by name. A press
+ *  on a card selects every entity that draws it; with Shift, Cmd or Ctrl
+ *  held it adds them, as a click on the canvas does. A model's, a scatter
+ *  kind's or a shape's press also picks the card up, for a click on the
+ *  ground to place, and a second press puts it down. */
+export declare function MapPalette({ onSelect }: MapPaletteProps): import("react").JSX.Element;
+/** Whether a section shows its body, and what a press on its header does.
+ *  The Wiki tab and the Map tab keep which sections are folded. With no
+ *  `onToggle`, the section is held open with no fold to press, as a search
+ *  holds the home's. */
+interface SectionFold {
+  label: string;
+  open: boolean;
+  onToggle?: () => void;
+}
+interface MaterialTilesProps {
+  materials: PaintMaterial[];
+  /** The material chosen now. */
+  value: string;
+  onChange: (name: string) => void;
+  /** Whether a family's section is open, and what a press on its header
+   *  does. */
+  fold: (family: string) => SectionFold;
+  className?: string;
+}
+/** One tile per ground material, its colour texture over its name and the
+ *  chosen one ringed, in a section per family that folds, its tiles
+ *  wrapping to the pane's width: what Paint and Fill lay down. Alt and a click on the ground picks the
+ *  material under the cursor, as an eyedropper does. */
+export declare function MaterialTiles({ materials, value, onChange, fold, className }: MaterialTilesProps): import("react").JSX.Element;
+/** The settings of a material's look the editor refines. */
+interface RefinedLook {
+  /** #rrggbb, which multiplies the texture's colour. */
+  tint: string;
+  /** How much of the tint applies, 0 to 1. */
+  tintAmount: number;
+  /** Metres one repeat of the texture covers. */
+  tile: number;
+  /** How strongly the detail shades, 0 to 2. */
+  bumps: number;
+  /** Rain ripples play on it. */
+  wet: boolean;
+}
+interface MaterialRefineProps {
+  look: RefinedLook;
+  /** A change as it is dragged, shown and not yet an undo step. */
+  onPreview: (look: Partial<RefinedLook>) => void;
+  /** A change where the drag ends, as one undo step. */
+  onCommit: (look: Partial<RefinedLook>) => void;
+  className?: string;
+}
+/** A material's tint, tile and bumps, each shown on the ground as it is
+ *  dragged and written where the drag ends, and Wet, written as it is
+ *  pressed. */
+export declare function MaterialRefine({ look, onPreview, onCommit, className }: MaterialRefineProps): import("react").JSX.Element;
+interface ScatterControlsProps extends ScatterPick {
+  onChange: (pick: Partial<ScatterPick>) => void;
+  className?: string;
+}
+/** What the Scatter tool paints: the families as chips, any of them on,
+ *  and whether a stroke grows them to double, growing back what was
+ *  erased, thins them to half or erases each one under the brush. */
+export declare function ScatterControls({ families, action, onChange, className }: ScatterControlsProps): import("react").JSX.Element;
+interface MapPickerProps {
+  /** Every map the game registered, each marked where it is on screen. */
+  maps: MapChoice[];
+  /** The map the editor edits, or "" while there is none. */
+  value: string;
+  onPick: (map: string) => void;
+  /** Edits the map file lacks, which another map asks about first. */
+  unsaved?: boolean;
+  /** Saves the edits before another map opens; false keeps this one. */
+  onSave?: () => Promise<boolean>;
+  /** Drops the edits before another map opens; false keeps this one. */
+  onDiscard?: () => Promise<boolean>;
+  /** Given, the list ends in "Reset <map> to base…", which asks first. */
+  onResetToBase?: () => void;
+}
+/** The map the Map section edits, as its header's name with a chevron:
+ *  a press lists the game's maps under it, as Figma's page picker and VS
+ *  Code's branch picker do. The arrows move, Enter picks, and Escape or a
+ *  press outside closes it. Another map picked over unsaved edits asks
+ *  Save, Discard or Cancel first, as a desktop editor's close does. */
+export declare function MapPicker({ maps, value, onPick, unsaved, onSave, onDiscard, onResetToBase }: MapPickerProps): import("react").JSX.Element;
+interface TerrainSectionProps {
+  /** Whether each section a press folded or opened is open, by its key:
+   *  the overlay's, so a switch to another section keeps them. A section
+   *  no press reached is open. */
+  sections: Record<string, boolean>;
+  onSections: (sections: Record<string, boolean>) => void;
+}
+/** The Map tab's terrain editor, toolbar first: the six tools and Clear
+ *  as icons, pinned; then sections that fold. Brush holds the size, the
+ *  strength and the rows of the tool in hand: Sculpt's Raise or Lower,
+ *  Flatten's level, Scatter's families and what it does, Fill's region.
+ *  The chosen material's section, headed by its name and Duplicate, holds
+ *  its refine controls; a section per family holds its tiles; Map, last,
+ *  holds the sea's height. The pane's header names the map, which picks
+ *  another, and holds Undo, Redo and the moved base's two ways out. A tool
+ *  pressed is in hand until it is pressed again or Escape puts it down;
+ *  while it is, a drag over the ground paints it. */
+export declare function TerrainSection({ sections, onSections }: TerrainSectionProps): import("react").JSX.Element;
+/** A class the Wiki tab's map puts each node in, which a theme styles with
+ *  a `classDef`. The groups' classes are also their subgraphs' ids, but for
+ *  a relation's group, which takes Refers to's class. */
+export declare enum DiagramClass {
+  Centre = "centre",
+  /** The chain on the left, from the game to the centre's parent. */
+  BelongsTo = "belongsTo",
+  MadeOf = "madeOf",
+  RefersTo = "refersTo",
+  UsedBy = "usedBy",
+  /** The rows under the running scene's row in the entity tree, drawn as
+   *  the entities that use an entry are. */
+  Holds = "holds",
+  /** The `N more` node a group of more than 8 folds its rest into. */
+  Fold = "fold",
+  /** The entities that use the entry but have no row in the tree. */
+  OffTree = "offTree",
+  /** An entry the game registered, or a kind that holds one: bright, with
+   *  an accent outline, at every step out. */
+  Game = "game",
+  /** An entry the engine registered, or a kind that holds only the
+   *  engine's: muted, so the game's stand out among them. */
+  Engine = "engine",
+  /** The second step out: the parts of each entry on the right, the
+   *  game's aside. */
+  Faded = "faded"
+}
+interface DiagramTheme {
+  /** Mermaid's options: the `base` theme's variables, the faces, the
+   *  spacing and the curve. The wiki site's diagrams take these alone. */
+  mermaid: MermaidConfig;
+  /** The body of the `classDef` for each class. */
+  classes: Record<DiagramClass, string>;
+  /** Behind a diagram with no game under it, such as a wiki page's: the
+   *  glass's own colour, whole. */
+  background: string;
+}
+/** Translucent nodes in dark group wells: made of in a white tint, used
+ *  by in the accent chip's fill, the parent quieter, and soft curves
+ *  between them. */
+export declare const glassDiagramTheme: DiagramTheme;
+/** Lines alone: no node fill but the centre's, a dashed line around each
+ *  group's faint well, each group told apart by its outline, and edges
+ *  that leave and arrive level. */
+export declare const outlineDiagramTheme: DiagramTheme;
+/** Solid cards in dark group wells, and edges that turn square corners,
+ *  as a schematic's do. */
+export declare const cardDiagramTheme: DiagramTheme;
+/** The theme the Wiki tab's map, its pages' diagrams and the wiki site
+ *  draw with. */
+export declare const diagramTheme: DiagramTheme;
+/** What the map centres on: an entry, a kind, or null for the game. */
+type DiagramCentre = WikiRef | {
+  kind: string;
+} | null;
+/** How far out the map reaches: 1, the centre and its neighbours; 2, each
+ *  neighbour's own parts one column further; 3, one ring more. */
+type DiagramSteps = 1 | 2 | 3;
+interface WikiDiagramProps {
+  /** What `wiki()` returned. */
+  wiki: Wiki;
+  /** The entity tree, which names each entity an entry is used by. */
+  tree: DevtoolsNode[];
+  /** What the map centres on: the Wiki tab's open entry, else its open
+   *  kind, else the game. */
+  centre: DiagramCentre;
+  /** A press on an entry, a kind or the game. */
+  onCentre: (centre: DiagramCentre) => void;
+  /** A press on an entity an entry is used by: its row's id. */
+  onSelectEntity: (id: string) => void;
+  /** How far out the map reaches: two steps in the overlay, where a
+   *  press on a node centres it to go further; a story draws one. */
+  steps?: DiagramSteps;
+  /** The stories draw each variant; the overlay takes the default. */
+  theme?: DiagramTheme;
+  className?: string;
+}
+/** The Wiki tab's map of the running game: the centre, the 2 steps nearest
+ *  it of the chain that leads to it from the game on its left, and what it
+ *  is made of, what it refers to and the entities that use it on its right,
+ *  or the rows the running scene holds, the game's bright among the
+ *  engine's. A press on an entry, a kind or the game hands it on to centre
+ *  there, and a press on an entity or a row hands its row on. Mermaid draws
+ *  it with `securityLevel: "strict"`, so its own click handlers are off:
+ *  each node listens by the element id mermaid gives it instead.
+ *
+ *  The box scrolls like any other, and a drawing for a new centre scrolls
+ *  that centre to the box's middle. */
+export declare function WikiDiagram({ wiki, tree, centre, onCentre, onSelectEntity, steps, theme, className }: WikiDiagramProps): import("react").JSX.Element;
+interface WikiEntryListProps {
+  /** The list's accessible name: its kind, or its place on an entry's
+   *  page. */
+  label: string;
+  entries: WikiEntry[];
+  /** Muted after each name, for a list that holds several kinds. */
+  showKind?: boolean;
+  onOpen: (ref: WikiRef) => void;
+}
+/** Wiki entries as rows, each with the number of entities that use it at
+ *  the right. An entry whose registry cannot tell shows no number, rather
+ *  than a 0 that reads as unused. The engine's entries are muted, so the
+ *  game's own stand out among them. Tab lands on the first row. */
+export declare function WikiEntryList({ label, entries, showKind, onOpen }: WikiEntryListProps): import("react").JSX.Element;
+interface WikiEntryPageProps {
+  entry: WikiEntry;
+  /** The wiki route of the entry's kind, whose page an engine entry with
+   *  no page of its own shows and links to. */
+  kindPage?: string;
+  /** Another entry, or null for the Wiki tab's home, which a link on the
+   *  page to the game's overview opens. */
+  onOpen: (ref: WikiRef | null) => void;
+  /** A link on the page to a site route: what opens the entry or kind
+   *  whose page it names in the panel, or undefined where none does. */
+  openRoute?: (route: string) => (() => void) | undefined;
+  /** A press on a missing page's path: Send to agent on that page, with
+   *  a line of intent that asks for it. */
+  onSendToAgent: (page: string, intent: string) => void;
+  /** Whether the section with this label is open, as the Wiki tab keeps
+   *  it. */
+  fold: (label: string) => SectionFold;
+  /** A line under the description about the entry as the game runs,
+   *  such as a scene's that is not running, or the phase of the step a
+   *  system runs in. */
+  note?: string;
+}
+/** One wiki entry: a header with its name and kind, and its code name,
+ *  wiki page and file as icons at the right; its description under it;
+ *  then Properties, which folds, with its own data where it has any; then
+ *  Used by, which folds, with each entity that carries a behaviour or a
+ *  trait and its value there; then Page, which folds, with the opening of its page, the game's or the
+ *  engine's, and Read more for the whole page there, with Show less at its
+ *  top. What it relates to is the Wiki tab's map, above it. */
+export declare function WikiEntryPage({ entry, kindPage, onOpen, openRoute, onSendToAgent, fold, note }: WikiEntryPageProps): import("react").JSX.Element;
+interface WikiKindPageProps {
+  kind: Wiki["kinds"][number];
+  /** How many entries the kind has, the engine's among them. */
+  count: number;
+  /** Whether the section with this label is open, as the Wiki tab keeps
+   *  it. */
+  fold: (label: string) => SectionFold;
+  /** Its entries, as the Wiki tab's home lists them. */
+  children: ReactNode;
+}
+/** One kind of wiki entry, headed as an entry is: its name, its code name
+ *  and its wiki page as an icon at the right; its description under it;
+ *  then its entries, which fold. */
+export declare function WikiKindPage({ kind, count, fold, children }: WikiKindPageProps): import("react").JSX.Element;
+interface WikiLinksProps {
+  /** The name the code and an agent use for it, such as `maxHealth`,
+   *  which a press copies. */
+  code?: string;
+  /** A wiki route, opened on the wiki site in a new tab. */
+  page?: string;
+  /** The file that declares it, by its path from the game's folder,
+   *  such as `src/behaviours/chase.ts`, where the dev server opens it. */
+  source?: string;
+  className?: string;
+}
+/** A wiki entry's or kind's code name, which a press copies, its page on
+ *  the wiki site, as a book, and the file that declares it, as a file,
+ *  each named in a tooltip. Draws nothing where it has none of them. */
+export declare function WikiLinks({ code, page, source, className }: WikiLinksProps): import("react").JSX.Element | null;
+export declare enum ButtonTone {
+  /** The one action a surface is for: Agent, Send. */
+  Accent = "accent",
+  Neutral = "neutral",
+  /** No fill of its own, for a button that is the whole of its pane,
+   *  which shrinks under the press in its place. */
+  Plain = "plain"
+}
+interface ButtonProps {
+  /** The words on the button, which are its accessible name too. */
+  label: string;
+  /** Leaves the words off the face, for a button its icon says enough
+   *  for; the label stays its name. */
+  hideLabel?: boolean;
+  tone: ButtonTone;
+  /** Drawn before the label. */
+  icon?: ReactNode;
+  /** The chord that does the same, named in the tooltip. */
+  shortcut?: string[];
+  /** A line in the tooltip under the chord. */
+  detail?: string;
+  /** Given, the button is disabled and says why as its tooltip. */
+  disabledReason?: string;
+  /** Left out by a button that holds no state. */
+  pressed?: boolean;
+  /** One of a menu's choices, which the menu's arrows reach, checked
+   *  where it is pressed. */
+  menuItem?: boolean;
+  onPress: () => void;
+  className?: string;
+}
+/** A text button with an icon. */
+export declare function Button({ label, hideLabel, tone, icon, shortcut, detail, disabledReason, pressed, menuItem, onPress, className }: ButtonProps): import("react").JSX.Element;
+export declare enum LampTone {
+  /** Edit mode on, or a replay away from the present. */
+  Accent = "accent",
+  /** The game running at the present. */
+  Live = "live",
+  /** Off. */
+  Idle = "idle",
+  Info = "info",
+  Warning = "warning",
+  Error = "error"
+}
+interface LampProps {
+  tone: LampTone;
+}
+/** A status dot. Decoration: whatever it reports, the words beside it say
+ *  too. */
+export declare function Lamp({ tone }: LampProps): import("react").JSX.Element;
+export declare enum ChipTone {
+  /** The entity's type beside its name. */
+  Accent = "accent",
+  /** A relation, a log level's count. */
+  Neutral = "neutral"
+}
+interface ChipProps {
+  tone: ChipTone;
+  /** A status dot before the words. */
+  lamp?: LampTone;
+  /** Given, the chip is a button: a relation that selects its entity, a
+   *  level that filters the log. */
+  onPress?: () => void;
+  /** A chip that toggles, such as a log level's filter. Off, it dims. */
+  pressed?: boolean;
+  /** The accessible name, where the chip's face says less than it means:
+   *  a phone's log level, a lamp and a count. */
+  label?: string;
+  /** An element elsewhere on the page holding what a screen reader
+   *  reads as this chip's accessible description. */
+  "aria-describedby"?: string;
+  /** Where the caller places it: a margin, an alignment. */
+  className?: string;
+  children: ReactNode;
+}
+/** A small rounded tag. */
+export declare function Chip({ tone, lamp, onPress, pressed, label, "aria-describedby": ariaDescribedby, className, children }: ChipProps): import("react").JSX.Element;
+interface CameraToggleProps {
+  on: boolean;
+  /** The press. The free camera belongs to the caller, and `on` is how it
+   *  comes back. */
+  onToggle: () => void;
+}
+/** The round button beside the top bar that flies the free camera in place
+ *  of the scene's, and gives the scene's back. */
+export declare function CameraToggle({ on, onToggle }: CameraToggleProps): import("react").JSX.Element;
+interface MapToggleProps {
+  on: boolean;
+  /** The press. The map camera belongs to the caller, and `on` is how it
+   *  comes back. */
+  onToggle: () => void;
+  /** The toolbar's small button, in place of the round one beside the
+   *  bar. */
+  phone?: boolean;
+}
+/** The button beside the free camera's that puts the map camera in the
+ *  scene's place, flying it up over the player's character until the whole map is in
+ *  view, and a second press gives the scene's camera back. */
+export declare function MapToggle({ on, onToggle, phone }: MapToggleProps): import("react").JSX.Element;
+export declare enum ResizeAxis {
+  /** Dragged left and right: the edge of a column. */
+  Horizontal = "horizontal",
+  /** Dragged up and down: the line between two rows. */
+  Vertical = "vertical"
+}
+interface ResizeHandleProps {
+  /** The accessible name: what a drag resizes. */
+  label: string;
+  axis: ResizeAxis;
+  /** The pixels moved since the last call, right and down positive. The
+   *  caller keeps the size and its limits. */
+  onMove: (pixels: number) => void;
+  /** A pointer taking hold of it, and letting go: for a host that
+   *  animates its size, so a drag follows the pointer at once. */
+  onDragging?: (dragging: boolean) => void;
+  className?: string;
+}
+/** The line between two panes that a drag moves, or an arrow key with the
+ *  line focused. */
+export declare function ResizeHandle({ label, axis, onMove, onDragging, className }: ResizeHandleProps): import("react").JSX.Element;
+interface RoundButtonProps extends Pick<ButtonProps, "label" | "icon" | "onPress" | "pressed" | "className" | "shortcut" | "detail" | "disabledReason"> {
+  /** Drawn in the pane beside the button, such as a status for a screen
+   *  reader. */
+  children?: ReactNode;
+}
+/** A round glass button the top bar's height, with an icon and no words,
+ *  for the rows beside the bar: Record's and the screenshot's before it,
+ *  the free camera's and the map camera's after it. Tinted while pressed. */
+export declare function RoundButton({ label, icon, onPress, pressed, className, shortcut, detail, disabledReason, children }: RoundButtonProps): import("react").JSX.Element;
+/** The circle on the console's icon: how many lines were logged since the
+ *  console last showed, in the colour of the worst of them. Nothing at
+ *  none. */
+export declare function UnreadBadge({ count, level }: UnreadLog): import("react").JSX.Element | null;
+interface PaletteCardProps {
+  placeable: Placeable;
+  /** The card is in hand, for a click on the ground to place. */
+  held?: boolean;
+  /** A press: `adding` where Shift, Cmd or Ctrl was held, as a click on
+   *  the canvas adds. An avatar's card nothing stands for takes none. */
+  onPress?: (adding: boolean) => void;
+}
+/** One thing a creator can place: its picture, its name, how tall it is
+ *  and how many stand in the map. A press selects them, and picks a card
+ *  that places up, ringed in the accent while it is in hand. */
+export declare function PaletteCard({ placeable, held, onPress }: PaletteCardProps): import("react").JSX.Element;
+interface CaptureButtonProps {
+  /** The press; whether the copy landed comes back, and the icon says
+   *  so. What is captured, and where it goes, is the caller's. */
+  onCapture: () => Promise<boolean>;
+  /** The toolbar's small button, in place of the round one beside the
+   *  bar. */
+  phone?: boolean;
+}
+/** The button beside the free camera's that copies what the player sees,
+ *  then shows a check, or a cross where the copy failed. */
+export declare function CaptureButton({ onCapture, phone }: CaptureButtonProps): import("react").JSX.Element;
+interface RecordButtonProps {
+  /** The press: the caller starts or stops the clip and opens the Clips
+   *  section. */
+  onPress: () => void;
+}
+/** The button before the top bar, and by Spawnite while the dev tools are
+ *  closed, that records a clip of what the game draws: a red dot while
+ *  idle; while it records, a stop square on a red tint with a pulsing dot,
+ *  and the time so far in its tooltip. It waits, disabled, while the clip
+ *  starts and while it saves. */
+export declare function RecordButton({ onPress }: RecordButtonProps): import("react").JSX.Element;
+interface EditToggleProps {
+  on: boolean;
+  /** The press. Edit mode belongs to the caller, and `on` is how it comes
+   *  back. */
+  onToggle: () => void;
+  /** An agent's playtest attached to this tab: the pane lights green,
+   *  and its tooltip says what the agent does. */
+  agent?: AgentActivity;
+}
+/** The one control left when edit mode is off: Spawnite's wordmark,
+ *  with its chord in the tooltip, and on a phone the gem alone, or an X
+ *  once edit mode is on. While an agent drives the tab the pane's edge
+ *  turns green, and the pane and the gem glow in that green, breathing
+ *  together while a call runs, so the corner says so without a control
+ *  of its own. */
+export declare function EditToggle({ on, onToggle, agent }: EditToggleProps): import("react").JSX.Element;
+export declare enum SparkTone {
+  /** White, as the name beside it. */
+  Plain = "plain",
+  /** Send to agent's own mark, in the accent, where a pane or a menu
+   *  names it. */
+  Accent = "accent"
+}
+interface SparkMarkProps {
+  tone: SparkTone;
+}
+/** Spawnite's mark, the four-pointed spark of the wiki's icon, drawn in
+ *  the current colour. Decoration: the name beside it says what it is. */
+export declare function SparkMark({ tone }: SparkMarkProps): import("react").JSX.Element;
+interface FrameRateProps {
+  framesPerSecond: number;
+  frameMilliseconds: number;
+  /** The recent frames as bars, oldest first, each a fraction of the
+   *  sparkline's height between 0 and 1. The caller decides what full
+   *  means. */
+  history: number[];
+}
+/** The frame rate as a sparkline and two numbers, drawn straight onto the
+ *  scene with no pane behind it. */
+export declare function FrameRate({ framesPerSecond, frameMilliseconds, history }: FrameRateProps): import("react").JSX.Element;
+interface FreeCameraIconProps {
+  /** The free camera is flying, in place of the player's. */
+  on: boolean;
+  className?: string;
+}
+/** The free camera's icon, after Unreal's play-in-editor: eject, while the
+ *  player's camera runs, to leave it and fly free; a gamepad, while flying,
+ *  to take the player's camera back. */
+export declare function FreeCameraIcon({ on, className }: FreeCameraIconProps): import("react").JSX.Element;
+/** The pane's corners and insets differ by surface, so the caller's classes
+ *  win over these. A pane that opens and closes animates through Motion's
+ *  props. */
+interface GlassPaneProps extends HTMLMotionProps<"div"> {
+  /** Shrinks under a press, for a pane whose whole face is one button:
+   *  the button has no fill, so a shrink of its own would not show. */
+  pressable?: boolean;
+}
+/** The dark pane every surface of the overlay sits in. It takes the pointer,
+ *  where the overlay around it lets the pointer through to the game. */
+export declare function GlassPane({ className, pressable, ...props }: GlassPaneProps): import("react").JSX.Element;
+/** A small glass label beside a control, shown on hover and on keyboard
+ *  focus: `@spawnite/ui`'s tooltip on the devtools' glass. */
+export declare function Tooltip(props: Omit<TooltipProps, "className">): import("react").JSX.Element;
+interface KeyboardShortcutProps {
+  /** What the control does, first in the tooltip. */
+  label: string;
+  /** The chord that does the same, as keycaps after the label. Left out,
+   *  the control shows no tooltip. */
+  keys?: string[];
+  /** Given, the tooltip says why the control is disabled in place of its
+   *  chord. */
+  disabledReason?: string;
+  /** The control's face shows no words, so with no chord the tooltip
+   *  still names it. */
+  iconOnly?: boolean;
+  /** A line under the label and the chord, such as the state the control
+   *  stands for. */
+  detail?: string;
+  /** The one control the chord stands for. */
+  children: ComponentProps<typeof Tooltip>["children"];
+}
+/** Gives a control its chord: the chrome keeps chords out of sight, so the
+ *  tooltip names it, and the shortcuts panel lists them all. */
+export declare function KeyboardShortcut({ label, keys, disabledReason, iconOnly, detail, children }: KeyboardShortcutProps): import("react").JSX.Element;
+export declare enum ListRowRole {
+  TreeItem = "treeitem",
+  MenuItem = "menuitem",
+  /** One of a menu's choices, checked where it is selected. */
+  MenuItemRadio = "menuitemradio",
+  Option = "option"
+}
+interface ListRowProps {
+  /** For a field that points at the row, such as a picker's search. */
+  id?: string;
+  /** What the row is inside its list. The list owns the arrow keys. */
+  role: ListRowRole;
+  label: string;
+  /** Drawn before the label: an icon, a chevron. */
+  leading?: ReactNode;
+  /** Muted, straight after the label: an entity's id. */
+  detail?: ReactNode;
+  /** Drawn at the right: a shortcut, a count, a submenu's arrow. */
+  trailing?: ReactNode;
+  /** How far a tree row sits in, in levels. */
+  depth?: number;
+  /** A tree row with children: whether they show. Left out by a row with
+   *  none. */
+  expanded?: boolean;
+  /** The one row of its list that Tab lands on. */
+  tabbable?: boolean;
+  selected?: boolean;
+  /** Given, the row is disabled and says why: in its tooltip where it
+   *  has a hint, which the reason stands in for, else beside its label. */
+  disabledReason?: string;
+  /** The click, where a pointer pressed it rather than a key. */
+  onPress?: (event?: MouseEvent$1) => void;
+  onHover?: () => void;
+  /** What the row does, in a tooltip on hover and keyboard focus. */
+  hint?: string;
+  className?: string;
+}
+/** One row of a list: a tree's entity, a menu's action, a picker's option. */
+export declare function ListRow({ id, role, label, leading, detail, trailing, depth, expanded, tabbable, selected, disabledReason, onPress, onHover, hint, className }: ListRowProps): import("react").JSX.Element;
+interface PaneHeaderProps {
+  /** Drawn before the title. */
+  icon?: ReactNode;
+  title: string;
+  /** Muted, after the title: an id, a count, what the pane is about. */
+  detail?: ReactNode;
+  /** Drawn at the right of the title's row: buttons, a close. */
+  actions?: ReactNode;
+  /** Rows under the title, inside the header: the inspector's model and
+   *  position, the shortcuts panel's search. */
+  children?: ReactNode;
+}
+/** The bold title a pane opens with when it is about one thing: an entity,
+ *  the shortcuts, what goes to the agent. */
+export declare function PaneHeader({ icon, title, detail, actions, children }: PaneHeaderProps): import("react").JSX.Element;
+/** What a field that drives a list, such as a picker's search, sets on its
+ *  input. */
+type ComboboxAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, "role" | "aria-controls" | "aria-expanded" | "aria-activedescendant" | "onKeyDown">;
+interface SearchFieldProps extends ComboboxAttributes {
+  /** The accessible name. */
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  /** Drawn before the text, such as a magnifier. */
+  icon?: ReactNode;
+  /** The key that focuses the field, named in the tooltip. */
+  shortcut?: string[];
+  /** For the pane that moves focus here on its shortcut. */
+  ref?: Ref<HTMLInputElement>;
+  className?: string;
+}
+/** A one-line text field: a filter, a search, the intent sent to the
+ *  agent. */
+export declare function SearchField({ label, value, onChange, placeholder, icon, shortcut, ref, className, ...inputAttributes }: SearchFieldProps): import("react").JSX.Element;
+interface SectionLabelProps {
+  label: string;
+  /** Drawn before the label. */
+  icon?: ReactNode;
+  /** Given, the label is a button: a wiki kind's, which opens its page,
+   *  or a section's, which folds and unfolds it. */
+  onPress?: () => void;
+  /** Given with `onPress`, the button folds what the label heads, and
+   *  this says whether it is open. */
+  expanded?: boolean;
+  /** Given with `onPress`, the button's tooltip. */
+  hint?: string;
+  /** Drawn at the right: a count, a shortcut, a column heading. */
+  children?: ReactNode;
+  className?: string;
+}
+/** The small capitals that head a pane or a section of one: ENTITIES,
+ *  BEHAVIOURS, SYSTEMS. */
+export declare function SectionLabel({ label, icon, onPress, expanded, hint, children, className }: SectionLabelProps): import("react").JSX.Element;
+interface ShortcutProps {
+  /** Each key of the chord in the order they are pressed, as printed on the
+   *  cap: `["⌘", "E"]`. */
+  keys: string[];
+  /** Where the caller places it: a margin, an alignment. */
+  className?: string;
+}
+/** A chord as keycaps. Nested `kbd`, which is HTML's own spelling for a
+ *  combination of keys. */
+export declare function Shortcut({ keys, className }: ShortcutProps): import("react").JSX.Element;
+interface StatProps {
+  value: ReactNode;
+  /** Muted after the value: "fps", "ms", "cards". */
+  unit: string;
+  /** Drawn straight onto the scene, with no pane behind it. */
+  outlined?: boolean;
+}
+/** A number and its unit. Stats in a row are told apart by the gap the caller
+ *  puts between them, never by a separator character. */
+export declare function Stat({ value, unit, outlined }: StatProps): import("react").JSX.Element;
+interface ToolbarToggleProps {
+  on: boolean;
+  /** The press. The toolbar belongs to the caller, and `on` is how it
+   *  comes back. */
+  onToggle: () => void;
+}
+/** The button beside a phone's Edit toggle that shows and hides the
+ *  toolbar: chevrons folding in while it shows, out while it is hidden. */
+export declare function ToolbarToggle({ on, onToggle }: ToolbarToggleProps): import("react").JSX.Element;
+interface ToolButtonProps {
+  /** The accessible name. The button shows an icon and no words. */
+  label: string;
+  /** Left out by a button that holds no state. */
+  pressed?: boolean;
+  /** Shows the accent tint without holding state, as Save does while
+   *  there is something to save. */
+  lit?: boolean;
+  shortcut?: string[];
+  /** Given, the button is disabled and says why as its tooltip. */
+  disabledReason?: string;
+  onPress: () => void;
+  /** The icon. */
+  children: ReactNode;
+}
+/** A small icon button in a pane's header: pin, collapse, close. */
+export declare function ToolButton({ label, pressed, lit, shortcut, disabledReason, onPress, children }: ToolButtonProps): import("react").JSX.Element;
+export declare const palette: {
+  readonly sans: "font-['IBM_Plex_Sans',system-ui,sans-serif]";
+  readonly mono: "font-['IBM_Plex_Mono',ui-monospace,monospace]";
+  readonly glassSurface: "bg-[#12162094] bg-clip-padding backdrop-blur-[14px] backdrop-saturate-90";
+  readonly glassBorder: "border border-[#FFFFFF33]";
+  readonly glassShadow: "shadow-[0_8px_28px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.28)]";
+  readonly mutedText: "text-[#FFFFFFB8]";
+  readonly divider: "border-[#FFFFFF24]";
+  readonly readoutBar: "bg-white shadow-[0_0_0_1px_rgba(8,12,22,0.9)]";
+  readonly accentFill: "bg-[#FFC14D]";
+  readonly accentText: "text-[#1B1206]";
+  readonly accentGlow: "shadow-[0_0_0_2px_rgba(0,0,0,0.35),0_0_10px_#FFC14D]";
+  readonly accentRing: "focus-visible:ring-2 focus-visible:ring-[#FFC14D]";
+  readonly control: "h-7 focus-visible:ring-2 focus-visible:ring-[#FFC14D] focus-visible:ring-offset-0";
+  readonly accentTint: "bg-[#FFC14D38]";
+  readonly errorTint: "bg-[rgba(255,107,107,0.22)]";
+  readonly accentBorder: "border-[#FFC14D]";
+  readonly keycap: "min-w-[18px] h-[18px] px-[5px] rounded-[5px] border border-b-2 border-current/35 bg-current/12 text-[10.5px] font-medium leading-none opacity-90";
+};
+export type { Anchor, BehaviourProp, BundlePart, ChatAttachment, DevtoolsPanel, DiagramTheme, InspectedEntity, InspectedStat, PlaytestAction, RailItem, SegmentOption, SendProgress };