import { type CSSProperties, type ReactNode } from "react";
import type { Icon as IconName, Mood, Row, Shape } from "../spec/index.ts";
/** What the playground tells the kit: whose colour an instance wears. */
export interface PlayContextValue {
    /** The identity colour of an instance, by id or label. */
    colorOf: (ref: string | null | undefined) => string | undefined;
}
export declare const PlayProvider: import("react").Provider<PlayContextValue>;
export declare const usePlay: () => PlayContextValue;
export declare function Icon({ name, size, className, style }: {
    name: IconName | null | undefined;
    size?: number;
    className?: string;
    style?: CSSProperties;
}): import("react").JSX.Element;
export interface NodeBadge {
    /** One or two characters: an initial. */
    text: string;
    color: string;
    title?: string;
}
export interface NodeVisualProps {
    shape: Shape;
    icon?: IconName | null;
    label: string;
    status?: string | null;
    /** Colours the ring when it says something (ok, busy, warn, bad); otherwise the ring is neutral. */
    mood?: Mood | null;
    /** A ring colour that wins over the mood's. */
    ring?: string;
    /** Services in a region wear the region's accent on their ring and icon. */
    accent?: string;
    /** Whose it is: a small initial in their colour. */
    badge?: NodeBadge | null;
    /** The name inside the shape; by default for services and gates. */
    inside?: boolean;
    className?: string;
    /** Classes for the shape itself, such as an animation that should follow its outline. */
    shapeClassName?: string;
}
/** A node as the playground draws it: a shape with an icon, its name, and a few words. */
export declare function Node({ shape, icon, label, status, mood, ring, accent, badge, inside, className, shapeClassName }: NodeVisualProps): import("react").JSX.Element;
/**
 * State as structure: rows boxed by group. A group belonging to someone wears their colour.
 * `anchor` marks each row so live links can end at it.
 */
export declare function Rows({ rows, anchor, compact, limit, className }: {
    rows: Row[];
    anchor?: string;
    compact?: boolean;
    limit?: number;
    className?: string;
}): import("react").JSX.Element | null;
/** A small titled box: a host_link record, a Settings pane. */
export declare function Card({ title, children, className }: {
    title?: ReactNode;
    children: ReactNode;
    className?: string;
}): import("react").JSX.Element;
export declare function Badge({ children, mood }: {
    children: ReactNode;
    mood?: Mood;
}): import("react").JSX.Element;
/** Something to hand over: a code on a ticket, struck through once it no longer works. */
export declare function Ticket({ code, expired, label }: {
    code: string;
    expired?: boolean;
    label?: string;
}): import("react").JSX.Element;
/** A terminal beside a node: what came back, and commands to click. */
export declare function Terminal({ title, lines, commands, onRun, onClose, busy, }: {
    title: string;
    lines: string[];
    commands?: string[];
    onRun?: (command: string) => void;
    onClose?: () => void;
    /** Waiting for an answer. */
    busy?: boolean;
}): import("react").JSX.Element;
/** A plain panel beside a node, for anything else. */
export declare function Panel({ title, children, onClose }: {
    title?: ReactNode;
    children: ReactNode;
    onClose?: () => void;
}): import("react").JSX.Element;