@termix-ssh/plugin-sdk 1.0.0

package/dist/host/types/src/ui/components/card-masonry.d.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+/** How many columns fit a container of this width for a column preference. */
+export declare function masonryColumns(width: number, columns: number): number;
+/**
+ * Cards dealt round-robin into columns that stack tight. The assignment only
+ * depends on child order and column count, so live updates never reshuffle
+ * cards between columns. Width comes from the container, not the window, so
+ * split panes and docks get the right count.
+ */
+export declare function CardMasonry({ columns, stack, className, children, }: {
+    columns: number;
+    /** Force one full-width column, for cards holding wide tables. */
+    stack?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/host/types/src/ui/components/card.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/host/types/src/ui/components/charts/BarSeries.d.ts

@@ -0,0 +1,16 @@
+export interface BarSeriesItem {
+    label: string;
+    /** 0..max value driving the bar width. */
+    value: number;
+    /** Optional right-aligned value text (defaults to value). */
+    valueLabel?: string;
+}
+export interface BarSeriesProps {
+    items: BarSeriesItem[];
+    /** Domain max; defaults to the largest value (min 1). */
+    max?: number;
+    className?: string;
+    colorClassName?: string;
+}
+/** Compact horizontal bar list with a label, a track, and a value. */
+export declare function BarSeries({ items, max, className, colorClassName, }: BarSeriesProps): import("react").JSX.Element;

package/dist/host/types/src/ui/components/charts/LineChart.d.ts

@@ -0,0 +1,17 @@
+export interface LineChartSeries {
+    key: string;
+    label: string;
+    /** CSS color string or var(--...) */
+    color: string;
+    data: Array<number | null>;
+}
+interface LineChartProps {
+    series: LineChartSeries[];
+    timestamps: string[];
+    domain: [number, number];
+    yFormatter?: (v: number) => string;
+    height?: number;
+    className?: string;
+}
+export declare function LineChart({ series, timestamps, domain, yFormatter, height, className, }: LineChartProps): import("react").JSX.Element;
+export {};

package/dist/host/types/src/ui/components/charts/RadialGauge.d.ts

@@ -0,0 +1,18 @@
+export interface RadialGaugeProps {
+    /** 0..100 percentage, or null for "no data". */
+    value: number | null;
+    /** Large centered text (defaults to the percentage). */
+    label?: string;
+    /** Small caption under the value. */
+    caption?: string;
+    size?: number;
+    strokeWidth?: number;
+    className?: string;
+    /** Tailwind text-color class for the value arc. */
+    colorClassName?: string;
+}
+/**
+ * A 270-degree radial gauge with a big centered readout. Auto-themes via
+ * currentColor; the track uses the muted token.
+ */
+export declare function RadialGauge({ value, label, caption, size, strokeWidth, className, colorClassName, }: RadialGaugeProps): import("react").JSX.Element;

package/dist/host/types/src/ui/components/charts/Sparkline.d.ts

@@ -0,0 +1,22 @@
+export interface SparklineProps {
+    /** Series of values, oldest first. */
+    data: Array<number | null | undefined>;
+    /**
+     * Fixed value domain [min, max]. When omitted the domain is derived from the
+     * data. Providing a stable domain (e.g. [0, 100] for percentages) avoids the
+     * jittery rescaling the old sparkline had.
+     */
+    domain?: [number, number];
+    className?: string;
+    /** Tailwind text-color class for the line/fill (uses currentColor). */
+    colorClassName?: string;
+    /** Show a dot on the last point. */
+    showLastDot?: boolean;
+    /** Internal coordinate height; the SVG scales to its container. */
+    height?: number;
+}
+/**
+ * Compact area + line chart. Uses a non-scaling stroke + a stable value domain
+ * so the line stays crisp and readable regardless of container size.
+ */
+export declare function Sparkline({ data, domain, className, colorClassName, showLastDot, height, }: SparklineProps): import("react").JSX.Element;

package/dist/host/types/src/ui/components/charts/StatRow.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+/** Dense key/value row used across metric and manager cards. */
+export declare function StatRow({ label, value, mono, className, }: {
+    label: ReactNode;
+    value: ReactNode;
+    mono?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** A compact stacked stat: small uppercase caption over a bold value. */
+export declare function MiniStat({ caption, value, valueClassName, className, }: {
+    caption: ReactNode;
+    value: ReactNode;
+    valueClassName?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/host/types/src/ui/components/charts/geometry.d.ts

@@ -0,0 +1,20 @@
+/** Pure geometry helpers for the chart primitives (unit-tested). */
+export declare const SPARKLINE_VIEW_W = 300;
+export interface SparklineGeometry {
+    hasData: boolean;
+    coords: Array<readonly [number, number]>;
+    linePath: string;
+    areaPath: string;
+}
+/**
+ * Map a value series to SVG coordinates within [0..VIEW_W] x [0..height].
+ * A fixed `domain` keeps the y-axis stable (no per-tick rescaling).
+ */
+export declare function sparklineGeometry(data: Array<number | null | undefined>, height: number, domain?: [number, number]): SparklineGeometry;
+export interface GaugeArc {
+    trackLen: number;
+    valueLen: number;
+    circumference: number;
+}
+/** Arc lengths for a radial gauge sweeping `sweepDeg` degrees. */
+export declare function gaugeArc(value: number | null, radius: number, sweepDeg?: number): GaugeArc;

package/dist/host/types/src/ui/components/charts/index.d.ts

@@ -0,0 +1,4 @@
+export { Sparkline, type SparklineProps } from "./Sparkline";
+export { RadialGauge, type RadialGaugeProps } from "./RadialGauge";
+export { BarSeries, type BarSeriesItem, type BarSeriesProps, } from "./BarSeries";
+export { StatRow, MiniStat } from "./StatRow";

package/dist/host/types/src/ui/components/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+export { Checkbox };

package/dist/host/types/src/ui/components/connection/ConnectionGate.d.ts

@@ -0,0 +1,56 @@
+import type React from "react";
+import { type ConnectionUnavailable } from "./ConnectionScreen";
+import type { ConnectionStatus } from "./connection-status";
+import type { ConnectionStage } from "../../../types/connection-log";
+type LogFn = (message: string, stage?: ConnectionStage) => void;
+export interface ConnectionGateController {
+    status: ConnectionStatus;
+    attempt: number;
+    maxAttempts: number;
+    nextRetryInMs: number | null;
+    error: string | null;
+    unavailable: ConnectionUnavailable | null;
+    log: {
+        info: LogFn;
+        success: LogFn;
+        warning: LogFn;
+        error: LogFn;
+    };
+    markConnected: () => void;
+    /** It did not come up. Logs the reason and schedules a retry. */
+    markFailed: (error?: unknown) => void;
+    /** It was up and dropped. No automatic retry. */
+    markDisconnected: (error?: unknown) => void;
+    /** It cannot run here, like a feature that is off for this host. */
+    markUnavailable: (info: ConnectionUnavailable) => void;
+    retryNow: () => void;
+    reset: () => void;
+}
+export interface ConnectionGateProps {
+    /** Opens the connection. Throwing or rejecting counts as a failure. */
+    connect: (gate: ConnectionGateController) => void | Promise<void>;
+    message: string;
+    detail?: string;
+    disconnectedMessage?: string;
+    retry?: {
+        maxAttempts?: number;
+        baseDelayMs?: number;
+        maxDelayMs?: number;
+        autoStart?: boolean;
+        enabled?: boolean;
+    };
+    /** Keep children mounted under the screen, for a terminal or display. */
+    keepMounted?: boolean;
+    backgroundColor?: string;
+    extraActions?: React.ReactNode;
+    className?: string;
+    children: React.ReactNode | ((gate: ConnectionGateController) => React.ReactNode);
+}
+/** The controller of the ConnectionGate this renders inside. */
+export declare function useConnectionGate(): ConnectionGateController;
+/**
+ * One connection lifecycle for every tab: connecting, failed with retry and
+ * a log, dropped, or unavailable. Children render once it is up.
+ */
+export declare function ConnectionGate(props: ConnectionGateProps): React.JSX.Element;
+export {};

package/dist/host/types/src/ui/components/connection/ConnectionLogPanel.d.ts

@@ -0,0 +1,9 @@
+interface ConnectionLogPanelProps {
+    isConnecting: boolean;
+    isConnected: boolean;
+    hasConnectionError: boolean;
+    position?: "top" | "bottom";
+    className?: string;
+}
+export declare function ConnectionLogPanel({ isConnecting, isConnected, hasConnectionError, position, className, }: ConnectionLogPanelProps): import("react").JSX.Element;
+export {};

package/dist/host/types/src/ui/components/connection/ConnectionScreen.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { ConnectionStatus } from "./connection-status";
+export interface ConnectionUnavailable {
+    title: string;
+    hint?: string;
+    /** Another way forward, like opening the host editor. */
+    action?: React.ReactNode;
+}
+export interface ConnectionScreenProps {
+    status: ConnectionStatus;
+    /** Headline while connecting. */
+    message?: string;
+    /** Second line under the headline, usually user@host:port. */
+    detail?: string;
+    /** Headline once it has failed and is not retrying on its own. */
+    errorMessage?: string;
+    /** The reason it failed, shown under the headline. */
+    errorDetail?: string | null;
+    /** Shown instead of a failure when the feature cannot run here. */
+    unavailable?: ConnectionUnavailable | null;
+    backgroundColor?: string;
+    attempt?: number;
+    maxAttempts?: number;
+    nextRetryInMs?: number | null;
+    onManualRetry?: () => void;
+    retryLabel?: string;
+    disconnectedMessage?: string;
+    extraActions?: React.ReactNode;
+    logPosition?: "top" | "bottom";
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/** The one screen every connection shows until it is up. */
+export declare function ConnectionScreen({ status, message, detail, errorMessage, errorDetail, unavailable, backgroundColor, attempt, maxAttempts, nextRetryInMs, onManualRetry, retryLabel, disconnectedMessage, extraActions, logPosition, emptyState, className, }: ConnectionScreenProps): React.JSX.Element;

package/dist/host/types/src/ui/components/connection/connection-status.d.ts

@@ -0,0 +1 @@
+export type ConnectionStatus = "connecting" | "connected" | "error" | "disconnected";

package/dist/host/types/src/ui/components/data-view.d.ts

@@ -0,0 +1,32 @@
+import type React from "react";
+import { type PanelDensity, type PanelViewMode } from "./panel-layout";
+export interface DataColumn<T> {
+    key: string;
+    header: string;
+    /** Any grid track: "1fr", "120px", "minmax(0,2fr)". */
+    width: string;
+    cell: (item: T) => React.ReactNode;
+    /** Dropped below md, for columns that are nice rather than necessary. */
+    hideBelow?: "md" | "lg";
+    align?: "start" | "end";
+}
+export interface GridColumns {
+    base?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+}
+/** One collection as a card grid or a dense row table. */
+export declare function DataView<T>({ items, view, density, getKey, renderCard, columns, listColumns, onRowClick, isRowActive, empty, className, }: {
+    items: T[];
+    view: PanelViewMode;
+    density?: PanelDensity;
+    getKey: (item: T) => string;
+    renderCard: (item: T) => React.ReactNode;
+    columns: GridColumns;
+    listColumns: DataColumn<T>[];
+    onRowClick?: (item: T) => void;
+    isRowActive?: (item: T) => boolean;
+    empty: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/host/types/src/ui/components/dialog.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/host/types/src/ui/components/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, sideOffset, alignOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/host/types/src/ui/components/empty-state.d.ts

@@ -0,0 +1,19 @@
+import type { LucideIcon } from "lucide-react";
+/**
+ * Shared empty state. Every feature used to hand-roll its own, so some
+ * surfaces explained what to do next and others showed a bare line of text.
+ *
+ * The `hint` and `action` only render at "guided" verbosity, which the Simple
+ * preset turns on: someone who has just picked the simplest interface is the
+ * one who most needs telling what to do next, while an experienced user on
+ * Advanced does not want the extra paragraph on every empty panel.
+ */
+export declare function EmptyState({ icon: Icon, title, hint, action, className, }: {
+    icon?: LucideIcon;
+    title: string;
+    /** Guidance shown only at "guided" verbosity. */
+    hint?: string;
+    /** Primary call to action, also guided-only. */
+    action?: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/host/types/src/ui/components/form-fields.d.ts

@@ -0,0 +1,115 @@
+import { type ReactNode } from "react";
+/** Label + control + optional hint, the shape every field shares. */
+export declare function Field({ label, hint, error, aside, htmlFor, className, children, }: {
+    label: string;
+    hint?: ReactNode;
+    error?: string;
+    aside?: ReactNode;
+    htmlFor?: string;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function TextField({ label, value, onChange, placeholder, hint, error, aside, disabled, mono, className, }: {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    hint?: ReactNode;
+    error?: string;
+    aside?: ReactNode;
+    disabled?: boolean;
+    mono?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function NumberField({ label, value, onChange, placeholder, hint, error, min, max, disabled, className, }: {
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    placeholder?: string;
+    hint?: ReactNode;
+    error?: string;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** Values the server sends in place of a stored secret. */
+export declare const SECRET_SENTINELS: string[];
+export declare function isSecretSentinel(value: string): boolean;
+export declare function SecretField({ label, value, onChange, placeholder, hint, error, disabled, className, }: {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    hint?: ReactNode;
+    error?: string;
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** A Radix dropdown, so its list uses the theme tokens. */
+export declare function SelectField<T extends string>({ label, value, onChange, options, hint, error, disabled, className, placeholder, }: {
+    label: string;
+    value: T;
+    onChange: (value: T) => void;
+    options: readonly {
+        value: T;
+        label: string;
+    }[];
+    hint?: ReactNode;
+    error?: string;
+    disabled?: boolean;
+    className?: string;
+    placeholder?: string;
+}): import("react").JSX.Element;
+export declare function TextAreaField({ label, value, onChange, placeholder, rows, hint, error, aside, mono, disabled, className, }: {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    rows?: number;
+    hint?: ReactNode;
+    error?: string;
+    aside?: ReactNode;
+    mono?: boolean;
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** A labelled switch. */
+export declare function SwitchRow({ label, description, badge, checked, onChange, disabled, defaultKey, rowId, }: {
+    label: string;
+    description?: ReactNode;
+    badge?: string;
+    checked: boolean;
+    onChange: (value: boolean) => void;
+    disabled?: boolean;
+    defaultKey?: string;
+    rowId?: string;
+}): import("react").JSX.Element;
+/** A list of rows you add to and remove from. */
+export declare function Repeater<T>({ label, items, onChange, makeItem, empty, addLabel, hint, renderItem, }: {
+    label: string;
+    items: T[];
+    onChange: (items: T[]) => void;
+    makeItem: () => T;
+    empty: string;
+    addLabel: string;
+    hint?: ReactNode;
+    renderItem: (item: T, update: (next: T) => void, index: number) => ReactNode;
+}): import("react").JSX.Element;
+/** Chip input for tags. */
+export declare function TagInput({ tags, input, placeholder, onTagsChange, onInputChange, }: {
+    tags: string[];
+    input: string;
+    placeholder: string;
+    onTagsChange: (tags: string[]) => void;
+    onInputChange: (value: string) => void;
+}): import("react").JSX.Element;
+/** Two fields side by side above md, stacked below. */
+export declare function FieldPair({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Reads a picked file's text, for keys and certificates. */
+export declare function useFileText(onText: (text: string) => void): {
+    reading: boolean;
+    onFile: (file: File | null | undefined) => Promise<void>;
+};

package/dist/host/types/src/ui/components/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input };

package/dist/host/types/src/ui/components/kbd.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type KbdProps = React.HTMLAttributes<HTMLElement>;
+declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+declare const KbdKey: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const KbdSeparator: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { Kbd, KbdKey, KbdSeparator };

package/dist/host/types/src/ui/components/label.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element;
+export { Label };

package/dist/host/types/src/ui/components/manager-card.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+export interface ManagerCardError {
+    message: string;
+    code?: string;
+}
+/** The frame a host manager card draws: title, refresh, error and empty states. */
+export declare function ManagerCardShell({ title, icon, loading, error, onRefresh, empty, emptyMessage, children, headerExtra, }: {
+    title: string;
+    icon: ReactNode;
+    loading: boolean;
+    error: ManagerCardError | null;
+    onRefresh: () => void;
+    empty?: boolean;
+    emptyMessage?: string;
+    children: ReactNode;
+    headerExtra?: ReactNode;
+}): import("react").JSX.Element;
+/** The filter box above a manager card's list. */
+export declare function ManagerSearch({ value, onChange, placeholder, count, extra, }: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    count?: number;
+    extra?: ReactNode;
+}): import("react").JSX.Element;

package/dist/host/types/src/ui/components/meter.d.ts

@@ -0,0 +1,14 @@
+/** A usage bar on the shared color ramp. */
+export declare function Meter({ percent, className, }: {
+    percent: number | null;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * A meter with its readout. Pass `label` for the stacked card form; leave it off
+ * for the bare form a table cell wants.
+ */
+export declare function UsagePair({ label, percent, detail, }: {
+    label?: string;
+    percent: number;
+    detail?: string;
+}): import("react").JSX.Element;

package/dist/host/types/src/ui/components/metric-card.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+/**
+ * Card shell for Host Metrics tiles. In the masonry grid tiles are
+ * content-sized (auto height), so the card grows to fit its content. Scrollable
+ * cards (long lists/logs) cap their body at `scrollMax` px and scroll beyond,
+ * which keeps the masonry tidy while short cards stay compact.
+ */
+export declare function MetricCard({ title, icon, action, children, bodyClassName, scroll, scrollMax, }: {
+    title: string;
+    icon: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    bodyClassName?: string;
+    /** When true the body caps its height and scrolls instead of growing. */
+    scroll?: boolean;
+    /** Max body height in px for scrollable cards. */
+    scrollMax?: number;
+}): import("react").JSX.Element;

package/dist/host/types/src/ui/components/panel-layout.d.ts

@@ -0,0 +1,83 @@
+import type React from "react";
+/** One spacing rhythm for every panel and tab. */
+export declare const PANEL: {
+    readonly body: "p-2.5";
+    readonly gap: "gap-2";
+    readonly band: "px-3 py-2";
+    readonly cardHead: "px-3 py-2.5";
+    readonly header: "h-12.5";
+};
+export type PanelViewMode = "grid" | "list";
+export type PanelDensity = "comfortable" | "compact";
+/** The header, toolbar band and body every tab and panel draws. */
+export declare function PanelShell({ chrome, icon, title, status, leading, actions, toolbar, tabs, footer, scroll, className, children, }: {
+    /** False inside a sidebar, which draws its own header. */
+    chrome?: boolean;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    /** Short caption beside the title, like "12 of 18 running". */
+    status?: React.ReactNode;
+    /** Sits before the title, usually a BackButton. */
+    leading?: React.ReactNode;
+    actions?: React.ReactNode;
+    toolbar?: React.ReactNode;
+    /** A full-bleed tab strip in place of a toolbar. */
+    tabs?: React.ReactNode;
+    /** A bar pinned under the body, like Cancel and Save. */
+    footer?: React.ReactNode;
+    /** False when the body scrolls itself. */
+    scroll?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Square back button sized for the PanelShell header. */
+export declare function BackButton({ onClick, label, className, }: {
+    onClick: () => void;
+    label?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Search box sized to match toolbar buttons. Esc clears it. */
+export declare function PanelSearch({ value, onChange, placeholder, fill, autoFocus, className, }: {
+    value: string;
+    onChange: (next: string) => void;
+    placeholder?: string;
+    /** Takes the whole toolbar, for panels where search is the only control. */
+    fill?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+}): React.JSX.Element;
+/** Square segmented control. */
+export declare function Segmented<T extends string>({ value, onChange, options, className, }: {
+    value: T;
+    onChange: (next: T) => void;
+    options: readonly {
+        value: NoInfer<T>;
+        label: string;
+        icon?: React.ReactNode;
+        count?: number;
+        title?: string;
+    }[];
+    className?: string;
+}): React.JSX.Element;
+/** Grid or list, plus the compact rows toggle. */
+export declare function ViewToggle({ view, onView, density, onDensity, }: {
+    view: PanelViewMode;
+    onView: (next: PanelViewMode) => void;
+    density?: PanelDensity;
+    onDensity?: (next: PanelDensity) => void;
+}): React.JSX.Element;
+/**
+ * A run of peer facts with a rule between each pair, like "12 online | 40
+ * hosts". Never wraps; a fact that does not fit is truncated.
+ */
+export declare function Facts({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Section label with a rule running to the edge. */
+export declare function GroupHeading({ title, count, action, className, }: {
+    title: string;
+    count?: number;
+    action?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;