@overvis/hmi-workspace-ui 0.0.0-stage → 0.1.0

package/dist/src/workspace/graphics/canvas.d.ts

@@ -0,0 +1,47 @@
+import { type RefObject, type Dispatch, type SetStateAction } from "react";
+import { type Node } from "@xyflow/react";
+import { type GraphicsViewBox, type GraphicsConnector, type GraphicsDocument, type GraphicsElement } from "@overvis/hmi-shared/graphics";
+import type { ParameterValueState } from "../parameters/live/model.js";
+import { resolveGraphicsPresentation } from "./bindings.js";
+import { type GraphicsParameterSetup } from "./symbols/bindings.js";
+import type { GraphicsSymbolPropertyState } from "./symbols/viewport.js";
+import { type GraphicsPlacement } from "./placement.js";
+export interface CanvasProps {
+    lineRoute?: GraphicsConnector["route"] | null;
+    /** Escape turns the Line tool off. */
+    onLineEnd?: () => void;
+    workspaceId: string;
+    document: GraphicsDocument;
+    editing: boolean;
+    states: ReadonlyMap<string, ParameterValueState>;
+    /** Units of bound parameters; readouts show them unless a placement sets its own. */
+    parameters?: GraphicsParameterSetup;
+    selection: readonly string[];
+    onSelection: Dispatch<SetStateAction<string[]>>;
+    onChange: (document: GraphicsDocument) => void;
+    onBeginEdit: () => void;
+    onActivate: (item: GraphicsElement | GraphicsConnector) => void;
+    onInspect: (item: GraphicsElement | GraphicsConnector) => void;
+    onViewBoxChange: (viewBox: GraphicsViewBox, checkpoint?: boolean) => void;
+    /** A symbol being placed while editing; the canvas takes clicks and taps for it. */
+    placement?: GraphicsPlacement | null;
+    onPlace?: (element: Extract<GraphicsElement, {
+        kind: "symbol";
+    }>) => void;
+    onPlacementEnd?: () => void;
+    /**
+     * View mode on a screen too small for the whole drawing: it opens at a legible minimum scale
+     * and can be panned and pinch-zoomed within its bounds.
+     */
+    zoomable?: boolean;
+}
+export type GraphicNode = Node<{
+    element: GraphicsElement;
+    authored: GraphicsElement;
+    props: CanvasProps;
+    latest: RefObject<CanvasProps>;
+    locale: string;
+    resolved: ReturnType<typeof resolveGraphicsPresentation>;
+    bindings: Readonly<Record<string, GraphicsSymbolPropertyState>>;
+}, "graphic">;
+export declare function GraphicsCanvas(props: CanvasProps): import("react").JSX.Element;

package/dist/src/workspace/graphics/commands/fields.d.ts

@@ -0,0 +1,7 @@
+import type { GraphicsAction, GraphicsDocument } from "@overvis/hmi-shared/graphics";
+export declare function GraphicsActionFields({ action, document, workspaceId, onChange, }: {
+    action: GraphicsAction | null;
+    document: GraphicsDocument;
+    workspaceId: string;
+    onChange: (action: GraphicsAction | null, document?: GraphicsDocument) => void;
+}): import("react").JSX.Element;

package/dist/src/workspace/graphics/commands/model.d.ts

@@ -0,0 +1,10 @@
+import { type GraphicsAction, type GraphicsDocument } from "@overvis/hmi-shared/graphics";
+import { type ParameterValueState } from "../../parameters/live/model.js";
+/** The write a command or toggle performs now, with its label in `locale`. */
+export declare function resolveGraphicsCommand(action: GraphicsAction, document: GraphicsDocument, states: ReadonlyMap<string, ParameterValueState>, locale: string): {
+    parameterId: string;
+    value: string;
+    label: string;
+    saving: boolean;
+    reviewKey: string;
+} | null;

package/dist/src/workspace/graphics/commands/provider.d.ts

@@ -0,0 +1,285 @@
+import { type GraphicsActionSelection } from "../actions/selection.js";
+import { type ReactNode } from "react";
+import { type GraphicsDocument, type GraphicsElement, type GraphicsConnector } from "@overvis/hmi-shared/graphics";
+import type { ParameterValueState } from "../../parameters/live/model.js";
+type Item = GraphicsElement | GraphicsConnector;
+export interface GraphicsControl {
+    label: string | null;
+    disabled: boolean;
+    pending: boolean;
+    activate: () => void;
+}
+export declare const GraphicsSymbolInstanceContext: import("react").Context<{
+    id: string;
+    name: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    parentId: string | null;
+    locked: boolean;
+    layer?: number;
+    appearance: {
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+        opacity: number;
+        text: string | Record<string, string>;
+        fontSize: number;
+        fillLevel: number;
+        visible: boolean;
+        animated: boolean;
+    };
+    bindings: ({
+        property: "text";
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "format";
+        digits: number;
+        prefix: string | Record<string, string>;
+        suffix: string | Record<string, string>;
+    } | {
+        property: "fillLevel" | "height" | "opacity" | "rotation" | "width";
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "scale";
+        inputMin: number;
+        inputMax: number;
+        outputMin: number;
+        outputMax: number;
+    } | {
+        property: "fill" | "stroke";
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "thresholds";
+        fallback: string;
+        stops: {
+            atLeast: number;
+            color: string;
+        }[];
+    } | {
+        operator: "eq" | "gt" | "gte" | "lt" | "lte" | "ne";
+        value: number;
+        property: "animated" | "visible";
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "condition";
+    })[];
+    action: {
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        confirm: boolean;
+        kind: "command";
+        value: string;
+        label: string | Record<string, string>;
+    } | {
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        confirm: boolean;
+        kind: "toggle";
+        status: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        onValue: string;
+        offValue: string;
+        onLabel: string | Record<string, string>;
+        offLabel: string | Record<string, string>;
+    } | {
+        kind: "parameter";
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        mode: "details" | "history" | "write";
+    } | {
+        path?: string;
+        search?: string;
+        hash?: string;
+        kind: "dashboard";
+        dashboardId: string;
+    } | null;
+    kind: "symbol";
+    symbolId: string;
+    mirrorX?: boolean;
+    mirrorY?: boolean;
+    properties: Record<string, string | number | boolean | Record<string, string>>;
+    propertyBindings: ({
+        property: string;
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "value";
+        digits?: number;
+    } | {
+        property: string;
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "states";
+        states: {
+            value: number | boolean;
+            state: string;
+        }[];
+    } | {
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "format";
+        digits: number;
+        prefix: string | Record<string, string>;
+        suffix: string | Record<string, string>;
+        property: string;
+    } | {
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "scale";
+        inputMin: number;
+        inputMax: number;
+        outputMin: number;
+        outputMax: number;
+        property: string;
+    } | {
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "thresholds";
+        fallback: string;
+        stops: {
+            atLeast: number;
+            color: string;
+        }[];
+        property: string;
+    } | {
+        operator: "eq" | "gt" | "gte" | "lt" | "lte" | "ne";
+        value: number;
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        kind: "condition";
+        property: string;
+    })[];
+    actions?: Record<string, {
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        confirm: boolean;
+        kind: "command";
+        value: string;
+        label: string | Record<string, string>;
+    } | {
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        confirm: boolean;
+        kind: "toggle";
+        status: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        onValue: string;
+        offValue: string;
+        onLabel: string | Record<string, string>;
+        offLabel: string | Record<string, string>;
+    } | {
+        kind: "parameter";
+        source: {
+            kind: "parameter";
+            parameterId: string;
+        } | {
+            kind: "slot";
+            slotId: string;
+        };
+        mode: "details" | "history" | "write";
+    } | {
+        path?: string;
+        search?: string;
+        hash?: string;
+        kind: "dashboard";
+        dashboardId: string;
+    }>;
+} | null>;
+/** Named controls share the diagram's parameter coordinator, permissions and command lifecycle. */
+export declare function useGraphicsSymbolAction(name: string): GraphicsControl;
+export declare function useGraphicsActivation(): ((item: Item, name: string | null) => GraphicsControl) | null;
+export declare function GraphicsCommandsProvider({ document, states, enabled, onAction, children, }: {
+    document: GraphicsDocument;
+    states: ReadonlyMap<string, ParameterValueState>;
+    enabled: boolean;
+    onAction: (selection: GraphicsActionSelection) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/src/workspace/graphics/dashboard-graphics.d.ts

@@ -0,0 +1,12 @@
+import { type GraphicsDocument } from "@overvis/hmi-shared/graphics";
+interface DashboardGraphicsProps {
+    workspaceId: string;
+    dashboardId: string;
+    drawingId: string;
+    defaultDocument?: GraphicsDocument;
+    maxWidth?: number;
+    maxHeight?: number;
+}
+/** Drafts, dialogs and pending commands belong to one drawing resource. */
+export declare function DashboardGraphics(props: DashboardGraphicsProps): import("react").JSX.Element;
+export {};

package/dist/src/workspace/graphics/editor-session.d.ts

@@ -0,0 +1,47 @@
+import { type GraphicsDocument } from "@overvis/hmi-shared/graphics";
+interface Snapshot {
+    document: GraphicsDocument;
+    revision: string | null;
+}
+interface Draft {
+    document: GraphicsDocument;
+    baseline: GraphicsDocument;
+    past: GraphicsDocument[];
+    future: GraphicsDocument[];
+    baseRevision: string | null;
+}
+export type GraphicsEditorSession = Draft & ({
+    mode: "edit" | "saving" | "conflict";
+} | {
+    mode: "review";
+    saved: Snapshot;
+});
+type Event = {
+    type: "open";
+    saved: Snapshot;
+} | {
+    type: "change";
+    document: GraphicsDocument;
+    checkpoint: boolean;
+} | {
+    type: "checkpoint" | "undo" | "redo" | "saving" | "saved" | "close" | "keep-draft" | "use-saved";
+} | {
+    type: "failed";
+    conflict: boolean;
+} | {
+    type: "review";
+    saved: Snapshot;
+};
+export declare function graphicsSessionEditable(session: GraphicsEditorSession | null): session is GraphicsEditorSession & {
+    mode: "edit" | "conflict";
+};
+export declare function graphicsSessionDirty(session: GraphicsEditorSession | null): boolean;
+/** Save and conflict review retain the same draft; only explicit discard replaces it. */
+export declare function graphicsEditorReducer(session: GraphicsEditorSession | null, event: Event): GraphicsEditorSession | null;
+/**
+ * Drop slots a change left unused that have no parameter: nothing refers to them and they hold no
+ * assignment, such as the slot of a binding that was just removed. Unused slots with a parameter,
+ * and slots that were already unused, stay.
+ */
+export declare function pruneGraphicsSlots(before: GraphicsDocument, after: GraphicsDocument): GraphicsDocument;
+export {};

package/dist/src/workspace/graphics/framing.d.ts

@@ -0,0 +1,28 @@
+import type { GraphicsViewBox } from "@overvis/hmi-shared/graphics";
+/**
+ * The smallest scale a viewer shows a drawing at, so text and in-drawing buttons stay legible and
+ * tappable on phones: a 40-unit button stays 24 px tall. A drawing that would fit only below it
+ * opens at this scale in a pannable, zoomable viewport instead.
+ */
+export declare const graphicsMinViewScale = 0.6;
+/**
+ * The viewport showing `viewBox` at `zoom` in a `width` × `height` pane: centred where it fits,
+ * from its top-left corner where it overflows.
+ */
+export declare function graphicsFrameViewport(viewBox: GraphicsViewBox, width: number, height: number, zoom: number): {
+    x: number;
+    y: number;
+    zoom: number;
+};
+export declare function FrameDrawing({ editing, viewBox, saved, minScale, }: {
+    editing: boolean;
+    viewBox: GraphicsViewBox;
+    saved: boolean;
+    /** In view mode, open the drawing at no less than this scale. */
+    minScale?: number | undefined;
+}): null;
+/** Node auto-pan changes the displayed framing without a viewport drag event. */
+export declare function useGraphicsDragFrame(onBeginEdit: () => void, onViewBoxChange: (viewBox: GraphicsViewBox, checkpoint?: boolean) => void): {
+    onStart: () => void;
+    onStop: () => void;
+};

package/dist/src/workspace/graphics/generated-drawing.d.ts

@@ -0,0 +1,47 @@
+import { type GraphicsDocument } from "@overvis/hmi-shared/graphics";
+/**
+ * A stable UUID derived from a configuration entity's ID for one of its drawing items (`role`
+ * 1 for the symbol's first slot, 2 for the next…). The first eight hex digits are XOR-ed with the
+ * role, so a regenerated drawing keeps the same item IDs.
+ */
+export declare function derivedEntityId(id: string, role: number): string;
+/**
+ * A stable UUID-shaped ID hashed from `text`, for a generated item named by what it connects,
+ * such as a pipe keyed by its line and end ports. Four FNV-1a passes with different seeds; the
+ * same text always gives the same ID.
+ */
+export declare function hashedEntityId(text: string): string;
+/**
+ * Derived IDs of every entity role, keyed `<entity id>:<role>`. Entities whose own ID is a
+ * drawing item (such as a pump symbol) are listed in `reserved` and keyed `<id>:0`. A derived ID
+ * that collides with an earlier one is shifted by 16 until it is free; entities are processed in
+ * ID order so the result does not depend on configuration order.
+ */
+export declare function derivedEntityIds(entities: readonly {
+    id: string;
+    roles: readonly number[];
+}[], reserved?: readonly string[]): Map<string, string>;
+/**
+ * Validates a generated drawing. Throws `FleetConfigurationError` `drawing-limit` when it exceeds
+ * the graphics limits and `invalid-drawing` when it fails the document schema.
+ */
+export declare function validateDrawingLimits(document: GraphicsDocument): GraphicsDocument;
+/**
+ * Applies a configuration change to a drawing an editor may have customized. `previous` and
+ * `next` are the drawings generated from the configuration before and after the change, with
+ * their `derivedEntityIds`. When `current` still equals `previous`, `next` replaces it.
+ * Otherwise the editor's layout, styling and extra items stay: names, actions, labels and
+ * generated bindings that changed in configuration are applied, removed entities disappear, new
+ * ones are placed below the artwork, and slots follow their bindings. Connections that still
+ * link existing items keep the edited route. A property listed in
+ * `preserveEditedBindings` keeps an editor's own binding (such as a calibrated level scale).
+ * Throws `duplicate-id` when a new entity's derived ID is already used by the drawing.
+ */
+export declare function reconcileGeneratedDrawing({ current, previous, next, previousIds, nextIds, preserveEditedBindings, }: {
+    current: GraphicsDocument;
+    previous: GraphicsDocument;
+    next: GraphicsDocument;
+    previousIds: ReadonlyMap<string, string>;
+    nextIds: ReadonlyMap<string, string>;
+    preserveEditedBindings?: readonly string[];
+}): GraphicsDocument;

package/dist/src/workspace/graphics/geometry.d.ts

@@ -0,0 +1,41 @@
+import { type GraphicsSymbolGeometries, type GraphicsPortSide, type GraphicsConnector, type GraphicsDocument, type GraphicsElement, type GraphicsPoint } from "@overvis/hmi-shared/graphics";
+/** Equipment anchors at its top-left corner; junctions anchor where their lines meet. */
+export declare function snapGraphicsElementPosition(element: Pick<GraphicsElement, "kind" | "width" | "height">, position: GraphicsPoint, grid: number): GraphicsPoint;
+type Frame = Pick<GraphicsElement, "x" | "y" | "width" | "height">;
+/**
+ * The box an element occupies on the canvas. A symbol at a quarter turn occupies its rotated box,
+ * so its node, selection outline, resize handles and snapping match the artwork.
+ */
+export declare function graphicsElementFrame(element: Pick<GraphicsElement, "kind" | "x" | "y" | "width" | "height" | "rotation">): Frame;
+/** Saved geometry for a canvas box, keeping the box's center. */
+export declare function graphicsElementFromFrame(element: Pick<GraphicsElement, "kind" | "rotation">, frame: Frame): Frame;
+/** Place a snapped size where a resize put the requested box, keeping the edges it did not move. */
+export declare function graphicsResizedFrame(previous: Frame, requested: Frame, { width, height }: Pick<Frame, "width" | "height">): Frame;
+/**
+ * Apply a resize reported as a canvas box. With snapping, symbols take the nearest valid size and
+ * groups the nearest scale that keeps their symbols valid; the edges the user did not drag stay.
+ */
+export declare function resizeGraphicsNode(document: GraphicsDocument, element: GraphicsElement, requested: Frame, geometries: GraphicsSymbolGeometries, snap: boolean): GraphicsDocument;
+/** A connector end. An equipment port also knows the side it faces and its equipment's box. */
+export interface GraphicsRouteEnd extends GraphicsPoint {
+    side?: GraphicsPortSide | null;
+    box?: Frame | null;
+    /** A junction joins lines from any direction, so its wire may arrive along either axis. */
+    anyAxis?: boolean;
+}
+/** The axis-aligned box an element covers on the canvas, at any rotation. */
+export declare function graphicsElementBounds(element: Pick<GraphicsElement, "x" | "y" | "width" | "height" | "rotation">): Frame;
+/**
+ * Orthogonal connectors without bends are routed automatically between their ends. Connectors with
+ * bends pass through them, leaving the source along the axis its port faces.
+ */
+export declare function graphicsConnectorPoints(connector: GraphicsConnector, source: GraphicsRouteEnd, target: GraphicsRouteEnd, grid: number): GraphicsPoint[];
+/** Keep equipment endpoints fixed, adding short end segments when their segment is dragged. */
+export declare function moveGraphicsSegment(points: readonly GraphicsPoint[], index: number, point: GraphicsPoint): GraphicsPoint[];
+export declare function insertGraphicsBend(points: readonly GraphicsPoint[], point: GraphicsPoint): GraphicsPoint[];
+export declare function moveGraphicsObjects(document: GraphicsDocument, positions: ReadonlyMap<string, GraphicsPoint>, selection: readonly string[], lineDragDelta?: GraphicsPoint): GraphicsDocument;
+/** Smooth cubic segments pass through each manually positioned bend. */
+export declare function graphicsCurvePath(points: readonly GraphicsPoint[]): string;
+/** Points along the displayed curve for endpoint snapping and subdivision at a new junction. */
+export declare function sampleGraphicsCurve(points: readonly GraphicsPoint[]): GraphicsPoint[];
+export {};

package/dist/src/workspace/graphics/image-cache.d.ts

@@ -0,0 +1,18 @@
+type ImageState = {
+    status: "loading" | "unavailable";
+    url: null;
+} | {
+    status: "ready";
+    url: string;
+};
+interface ImageRequest {
+    url: string;
+    revision?: string;
+    credentials: RequestCredentials;
+    headers: Headers;
+}
+export declare function retainGraphicsImage(request: ImageRequest, listener: (state: ImageState) => void): {
+    retry(): void;
+    release(): void;
+};
+export {};

package/dist/src/workspace/graphics/image-dialog.d.ts

@@ -0,0 +1,5 @@
+export declare function GraphicsImageDialog({ workspaceId, onDone, onImage, }: {
+    workspaceId: string;
+    onDone: () => void;
+    onImage: (id: string) => void;
+}): import("react").JSX.Element;

package/dist/src/workspace/graphics/image-picker.d.ts

@@ -0,0 +1,5 @@
+export declare function GraphicsImagePicker({ workspaceId, value, onChange, }: {
+    workspaceId: string;
+    value?: string;
+    onChange: (id: string) => void;
+}): import("react").JSX.Element;

package/dist/src/workspace/graphics/inspector/bindings.d.ts

@@ -0,0 +1,17 @@
+import { type GraphicsBinding, type GraphicsSource, type GraphicsSymbolBinding, type GraphicsDocument } from "@overvis/hmi-shared/graphics";
+/** A generic property's label; a text object's fill is its text color. */
+export declare function graphicsPropertyLabel(property: string, kind?: string): string;
+export declare function initialBinding(property: GraphicsBinding["property"], source: GraphicsSource): GraphicsBinding;
+export declare function BindingFields<B extends GraphicsSymbolBinding>({ binding, label, states, workspaceId, document, onChange, onDelete, }: {
+    binding: B;
+    label?: string;
+    /** Translated symbol states a `states` binding can map to. */
+    states?: readonly {
+        value: string;
+        label: string;
+    }[];
+    workspaceId: string;
+    document: GraphicsDocument;
+    onChange: (binding: B, document?: GraphicsDocument) => void;
+    onDelete: () => void;
+}): import("react").JSX.Element;

package/dist/src/workspace/graphics/inspector/element.d.ts

@@ -0,0 +1,10 @@
+import { type GraphicsConnector, type GraphicsElement } from "@overvis/hmi-shared/graphics";
+import { type GraphicsItemProps } from "./item.js";
+/** Shapes, text, images, junctions and groups: name, appearance, placement, action. */
+export declare function GraphicsElementInspector({ onSelect, ...props }: GraphicsItemProps<Exclude<GraphicsElement, {
+    kind: "symbol";
+}>> & {
+    onSelect: (ids: string[]) => void;
+}): import("react").JSX.Element;
+/** Lines: name, appearance, route and ends, action. */
+export declare function GraphicsLineInspector(props: GraphicsItemProps<GraphicsConnector>): import("react").JSX.Element;

package/dist/src/workspace/graphics/inspector/fields.d.ts

@@ -0,0 +1,69 @@
+import { type LocalizedString } from "@overvis/hmi-shared";
+import { type ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+export declare function GraphicsEditStepProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Whether the next change starts a new undo step. */
+export declare function useGraphicsCheckpoint(): () => boolean;
+/** A small icon button with a tooltip, for actions next to a field label. */
+export declare function GraphicsIconButton({ label, icon: Icon, onClick, disabled, }: {
+    label: string;
+    icon: LucideIcon;
+    onClick: () => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+/** A warning such as "Not bound", shown beside a field label. */
+export declare function GraphicsFieldHint({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+interface FieldExtras {
+    /** Icon buttons beside the label, such as binding or resetting the value. */
+    actions?: ReactNode;
+    /** A short warning beside the label. */
+    hint?: ReactNode;
+    /** Names the value for save errors that point at it. */
+    field?: string;
+}
+export declare function GraphicsNumberField({ label, value, onChange, min, max, integer, labelHidden, actions, hint, field, }: {
+    label: string;
+    /** `null` when selected objects differ; an empty entry then changes nothing. */
+    value: number | null;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    integer?: boolean;
+    /** For rows under a shared column header; the label still names the input. */
+    labelHidden?: boolean;
+} & FieldExtras): import("react").JSX.Element;
+/** Shows localized text in the drawing's language; an edit stores plain text in its place. */
+export declare function GraphicsTextField({ label, value, onChange, multiline, labelHidden, actions, hint, field, }: {
+    label: string;
+    value: LocalizedString;
+    onChange: (value: string) => void;
+    multiline?: boolean;
+    labelHidden?: boolean;
+} & FieldExtras): import("react").JSX.Element;
+/** A choice with its label above it; `children` are the `NativeSelectOption`s. */
+export declare function GraphicsSelectField({ label, value, onChange, children, description, labelHidden, actions, hint, field, }: {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    children: ReactNode;
+    description?: ReactNode;
+    labelHidden?: boolean;
+} & FieldExtras): import("react").JSX.Element;
+export declare function ColorField({ label, value, onChange, labelHidden, actions, hint, field, }: {
+    label: string;
+    /** `null` when selected objects differ. */
+    value: string | null;
+    onChange: (value: string) => void;
+    labelHidden?: boolean;
+} & FieldExtras): import("react").JSX.Element;
+export declare function Toggle({ label, value, onChange, actions, hint, field, }: {
+    label: string;
+    /** `null` when selected objects differ. */
+    value: boolean | null;
+    onChange: (value: boolean) => void;
+} & FieldExtras): import("react").JSX.Element;
+export {};