@visuallyjs/browser-ui-react 1.0.0

package/diagram-component.d.ts

@@ -0,0 +1,84 @@
+import React, { Context, MutableRefObject, ReactElement, ReactNode } from 'react';
+import { Diagram, DiagramOptions } from "@visuallyjs/browser-ui";
+import { RefHandle } from "./definitions";
+import { ModelOptions } from "@visuallyjs/browser-ui/types/core";
+/**
+ * @internal
+ */
+export declare const DiagramContext: Context<DiagramRef>;
+/**
+ * Handle for a reference to a mutable ref object which holds a diagram. See implementation below.
+ * @internal
+ */
+export interface DiagramRef extends RefHandle<Diagram> {
+}
+/**
+ * Implementation of the DiagramRef handler. The `set` method sets the ref object's value and then propagates the diagram to all registered listeners. The `listen` method either queues a listener, if the handle is not yet ready, or calls back the listener immediately, if the handle is already populated with a surface. The `_ref` method provides access to the underlying mutable ref object; the DiagramComponent uses this when it is created inside a DiagramProvider. None of this
+ * code is public facing.
+ * @param ref
+ * @internal
+ */
+export declare function createDiagramRef(ref: MutableRefObject<Diagram>): DiagramRef;
+/**
+ * Provider for a Diagram. You can use this at some high level in your UI - some common parent component between the parent of where you want to put a Diagram and where you want to put some other component such as miniview, controls or DiagramPalette . Whenever a `DiagramComponent` is declared as a descendant of this provider, the provider's underlying diagram is set and this is propagated to all the other components using this context. To use this you just declare a DiagramProvider element and put some children inside of it.
+ *
+ * @group Providers
+ */
+export declare function DiagramProvider(props: {
+    children?: Array<ReactNode | ReactElement<any, any>> | ReactNode | ReactElement<any, any>;
+}): JSX.Element;
+/**
+ * Hook to expose the current Diagram. This hook is asynchronous and returns a Promise.
+ * @group Hooks
+ */
+export declare function useDiagram(): Promise<Diagram>;
+/**
+ * Handle for a DiagramComponent.
+ * @group Handles
+ */
+export interface DiagramComponentRef {
+    /**
+     * Gets the underlying Diagram from UI core.
+     */
+    getDiagram: () => Diagram;
+}
+/**
+ * Props for the {@link DiagramComponent}
+ * @group Props
+ */
+export interface DiagramComponentProps {
+    /**
+     * Optional class name to set on the container
+     */
+    className?: string;
+    /**
+     * Options for the underlying model
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * Options for the Diagram
+     */
+    options?: DiagramOptions;
+    /**
+     * Optional initial data
+     */
+    data?: any;
+    /**
+     * Optional URL to load initial data from.
+     */
+    url?: string;
+    /**
+     * You do not pass this prop yourself; React constructs this prop from any elements that are children of the diagram component element in the JSX.
+     * @internal
+     */
+    children?: Array<ReactNode | ReactElement<any, any>> | ReactNode | ReactElement<any, any>;
+    /**
+     * Optional style object to apply to the container element.
+     */
+    style?: Record<string, string>;
+}
+/**
+ * Provides an SVG diagram that renders nodes and groups from a shape library.
+ * @group Components
+ */
+export declare const DiagramComponent: React.ForwardRefExoticComponent<DiagramComponentProps & React.RefAttributes<DiagramComponentRef>>;

package/diagram-palette-component.d.ts

@@ -0,0 +1,94 @@
+import React from "react";
+import { Diagram, DiagramCell, Size, PaletteMode, OnVertexAddedCallback, PreparedShape } from "@visuallyjs/browser-ui";
+/**
+ * Options for a palette for a diagram.
+ * @group Props
+ */
+export interface DiagramPaletteComponentProps {
+    /**
+     * Optional fill color to use for dragged elements. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc.
+     */
+    fill?: string;
+    /**
+     * Optional color to use for outline of dragged elements. Should be in RGB format.
+     */
+    outline?: string;
+    /**
+     * Optional size to use for dragged elements.
+     */
+    dragSize?: Size;
+    /**
+     * Indicates that when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Defaults to true.
+     */
+    inspector?: boolean;
+    /**
+     * Optional size to use for icons. Defaults to 150x100 pixels. If you provide this but not `dragSize` this size will also be used for an icon that is being dragged.
+     */
+    iconSize?: Size;
+    /**
+     * Optionally show each shape icon's label underneath it
+     */
+    showLabels?: boolean;
+    /**
+     * Stroke width to use for shapes in palette. Defaults to 1.
+     */
+    paletteStrokeWidth?: number;
+    /**
+     * Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes. Defaults to `Show all`.
+     */
+    showAllMessage?: string;
+    /**
+     * Callback to invoke when a new diagram cell has been added.
+     * @param dc
+     */
+    onCellAdded?: (dc: DiagramCell) => any;
+    /**
+     * Mode to operate in - 'drag' or 'tap'. Defaults to 'drag' (PALETTE_MODE_DRAG).
+     */
+    mode?: PaletteMode;
+    /**
+     * When in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * Defaults to true: when in 'tap' mode and a new group/node has been drawn on the canvas, the UI is set back to pan mode.
+     */
+    autoExitDrawMode?: boolean;
+    /**
+     * When true (which is the default), a newly dropped shape will be set as the underlying model's selection.
+     */
+    selectAfterAdd?: boolean;
+    /**
+     * Optional diagram to attach to. In most cases it is better to use a DiagramProvider to provision the diagram to this component.
+     */
+    diagram?: Diagram;
+    /**
+     * Optional class name to set on the diagram palette root element.
+     */
+    className?: string;
+    /**
+     * Optional style object to apply to the container element.
+     */
+    style?: Record<string, string>;
+    /**
+     * Optional callback that will be invoked after a new vertex has been dropped and added to the dataset.
+     * @param v
+     */
+    onVertexAdded?: OnVertexAddedCallback;
+    /**
+     * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
+     */
+    preparedShapes?: Array<PreparedShape>;
+}
+/**
+ * Ref handle for a {@link DiagramPaletteComponent}
+ * @group Handles
+ */
+export interface DiagramPaletteRef {
+}
+/**
+ * A palette that renders the shape library in use by a Diagram.
+ *
+ * @group Components
+ */
+export declare const DiagramPaletteComponent: React.ForwardRefExoticComponent<DiagramPaletteComponentProps & React.RefAttributes<DiagramPaletteRef>>;

package/edge-type-picker.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Props for the EdgeTypePickerComponent
+ * @group Props
+ */
+export interface EdgeTypePickerComponentProps {
+    /**
+     * Name of the property to get/set in the edge data
+     */
+    propertyName: string;
+}
+/**
+ * A component that provides a picker for edge types.
+ * @group Components
+ */
+export declare function EdgeTypePickerComponent(props: EdgeTypePickerComponentProps): JSX.Element;

package/export-controls-component.d.ts

@@ -0,0 +1,50 @@
+import { SvgExportUIOptions, ImageExportUIOptions, PointXY } from "@visuallyjs/browser-ui";
+/**
+ * Options for the ExportControlsComponent
+ * @group Props
+ */
+export interface ExportControlsComponentProps {
+    /**
+     * The ID of surface to attach to. Optional. The component is context aware and will try to resolve the Surface/Paper
+     * to attach to from an ancestor {@link SurfaceProvider} {@link SurfaceComponent} or {@link PaperComponent}.
+     */
+    surfaceId?: string;
+    /**
+     * Whether or not to show a label in front of the buttons. Defaults to true.
+     */
+    showLabel?: boolean;
+    /**
+     * What to show in the label, if visible. Defaults to "Export:".
+     */
+    label?: string;
+    /**
+     * Optional margins to apply to both SVG and image exports. Will not override any margins specified in svgOptions or imageOptions.
+     */
+    margins?: PointXY;
+    /**
+     * Options for SVG exports.
+     */
+    svgOptions?: SvgExportUIOptions;
+    /**
+     * Options for image exports.
+     */
+    imageOptions?: ImageExportUIOptions;
+    /**
+     * Defaults to true.
+     */
+    allowSvgExport?: boolean;
+    /**
+     * Defaults to true.
+     */
+    allowPngExport?: boolean;
+    /**
+     * Defaults to true.
+     */
+    allowJpgExport?: boolean;
+}
+/**
+ * Provides export svg/png/jpg buttons. This component is context aware and by default will locate the surface/paper to
+ * attach to from an ancestor {@link SurfaceProvider} {@link SurfaceComponent} or {@link PaperComponent}.
+ * @group Components
+ */
+export declare function ExportControlsComponent(props: ExportControlsComponentProps): JSX.Element;

package/global-context.d.ts

@@ -0,0 +1,18 @@
+import { SurfaceComponentRef } from "./definitions";
+/**
+ * @internal
+ */
+export type SurfaceComponentRefCallback = (s: SurfaceComponentRef) => any;
+/**
+ * @internal
+ * @param id
+ * @param ref
+ */
+export declare function registerSurface(id: string, ref: SurfaceComponentRef): void;
+/**
+ * Accessor for globally registered surfaces
+ * @internal
+ * @param id
+ * @param cb
+ */
+export declare function getSurfaceComponent(id: string, cb: SurfaceComponentRefCallback): void;

package/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Provides integration with React (17+). This package has a dependency on @visuallyjs/browser-ui.
+ *
+ * For a detailed discussion of this package, see https://visuallyjs.com/react.
+ *
+ * @packageDocumentation
+ */
+export * from './global-context';
+export * from './definitions';
+export * from './jsx-wrapper';
+export * from './browser-ui-react';
+export * from './edge-type-picker';
+export * from './surface-component';
+export * from './miniview-component';
+export * from './inspector-component';
+export * from './controls-component';
+export * from './export-controls-component';
+export * from './shape-palette-component';
+export * from './shape-component';
+export * from './palette-component';
+export * from './color-picker-component';
+export * from './visuallyjs-context';
+export * from './surface-context';
+export * from './inspector-context';
+export * from './diagram-component';
+export * from './diagram-palette-component';
+export * from './chart-component';
+export * from './decorator-component';
+export * from './background-component';

package/inspector-component.d.ts

@@ -0,0 +1,72 @@
+import { Base, Inspector, Surface, VisuallyJsModel } from "@visuallyjs/browser-ui";
+import React, { ReactNode } from "react";
+/**
+ * Props for the InspectorComponent
+ * @group Props
+ */
+export interface InspectorComponentProps {
+    /**
+     * Surface to attach to. It is not mandatory that you supply this - the component is context aware and can try to resolve a surface from an ancestor {@link SurfaceProvider} {@link SurfaceComponent} or {@link PaperComponent}.
+     */
+    surface?: Surface;
+    /**
+     * Child elements. Internal.
+     * @internal
+     */
+    children?: Array<ReactNode> | ReactNode | ((obj: Base, model: VisuallyJsModel) => Array<ReactNode> | ReactNode);
+    /**
+     * Whether or not to auto commit on enter keypress/blur. Defaults to true.
+     */
+    autoCommit?: boolean;
+    /**
+     * Whether or not to support multiple selections. Defaults to true.
+     */
+    multipleSelections?: boolean;
+    /**
+     * Optional filter you can use to instruct the inspector to ignore certain items.
+     * @param b The object to test
+     */
+    filter?: (b: Base) => boolean;
+    /**
+     * Callback invoked when the inspector is cleared. You need to provide this if the child content you provide to the Inspector is not a function.
+     * @internal
+     */
+    onSelectionCleared?: () => void;
+    /**
+     * Callback invoked when a new object has started to be edited. You need to provide this if the child content you provide to the Inspector is not a function.
+     * @param obj
+     * @param cb
+     */
+    refresh?: (obj: Base) => void;
+    /**
+     * Optional extra css classes to set on the root element
+     */
+    className?: string;
+    /**
+     * Whether or not to show a close button. Defaults to false.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Optional function to invoke after an update.
+     * @param s
+     */
+    afterUpdate?: (s: Surface) => void;
+    /**
+     * Optional function that returns JSX to use when nothing is selected
+     */
+    renderEmptyContent?: () => any;
+    target?: any;
+}
+/**
+ * Ref handle for an InspectorComponent. Allows access to the underlying inspector, for advanced use cases.
+ * @group Handles
+ */
+export interface InspectorComponentRef {
+    getInspector(): Inspector;
+}
+/**
+ * Provides an inspector. This component is context aware and will resolve a surface from an ancestor
+ * {@link SurfaceProvider} {@link SurfaceComponent} or {@link PaperComponent}.
+ * @group Components
+ */
+export declare const InspectorComponent: React.ForwardRefExoticComponent<InspectorComponentProps & React.RefAttributes<InspectorComponentRef>>;

package/inspector-context.d.ts

@@ -0,0 +1,25 @@
+import { Context, MutableRefObject } from "react";
+import { RefHandle } from "./definitions";
+import { Inspector } from "@visuallyjs/browser-ui";
+/**
+ * @internal
+ */
+export declare const InspectorContext: Context<InspectorRef>;
+/**
+ * Handle for a reference to a mutable ref object which holds an inspector. See implementation below.
+ * @internal
+ */
+export interface InspectorRef extends RefHandle<Inspector> {
+}
+/**
+ * Implementation of the InspectorRef handler. The `set` method sets the ref object's value and then
+ * propagates the surface to all registered listeners. The `listen` method either queues a listener, if the handle is not yet
+ * ready, or calls back the listener immediately, if the handle is already populated with a surface.
+ * @param ref
+ * @internal
+ */
+export declare function createInspectorRef(ref: MutableRefObject<Inspector>): InspectorRef;
+/**
+ * Hook to expose current inspector for components that need one.
+ */
+export declare function useInspector(): Inspector;

package/jsx-wrapper.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+import { Base, BrowserUI, BrowserUIModel, ObjectData } from "@visuallyjs/browser-ui";
+/**
+ * These are the props that are passed to the `jsx` you provide to map a node, group or overlay component in the `viewOptions` of a {@link SurfaceComponent} or {@link PaperComponent}. VisuallyJs passes in the UI, the model (which you can get from the UI anyway), the object being rendered, the object's data, and any `childProps` that have been configured.
+ * @group Props
+ */
+export interface JsxWrapperProps<T extends Base> {
+    /**
+     * The object to be rendered - a Node, Group or Edge.
+     */
+    obj: T;
+    /**
+     * The UI that is rendering this object.
+     */
+    ui: BrowserUI;
+    /**
+     * Underlying model. Can also be accessed via `ui.model`.
+     */
+    model: BrowserUIModel;
+    /**
+     * The object's backing data
+     */
+    data: ObjectData;
+    /**
+     * Any extra props configured by the view to present to this JSX.
+     */
+    props: any;
+}
+/**
+ * @internal
+ */
+export interface ComponentFacade<T extends Base> {
+    def: {
+        jsx?: (p: JsxWrapperProps<any>) => ReactNode;
+        component?: any;
+    };
+    obj: T;
+    payload?: any;
+}
+/**
+ * Placeholder component to render some JSX  and inform the UI on load. This is for internal use. In its return value it writes out the JSX provided, as well as, if the `initialized` ref is false, a placeholder element. A useEffect checks to see if `initialized` is not yet true, and if it isn't, the callback provided in the wrapper's props is invoked, passing in the previous element sibling to the placeholder, ie. the JSX that a user provided.  After `initialized.current` is set to true, React will at some point re-render the component and flush the placeholder element, because it only gets drawn when initialized is false.
+ *
+ * @param props
+ * @internal
+ */
+export declare function JSXWrapper<REP extends ComponentFacade<any>>(props: {
+    ns: REP;
+    model: BrowserUIModel;
+    ui: BrowserUI;
+    childProps: any;
+    cb: (ns: REP) => any;
+}): JSX.Element;

package/miniview-component.d.ts

@@ -0,0 +1,51 @@
+import { Group, Node } from "@visuallyjs/browser-ui";
+import React from "react";
+/**
+ * Imperative handle for a miniview component. When you use the miniview component and set a ref:
+ *
+ * `<MiniviewComponent ref={myRef}/>`
+ *
+ * Then `myRef` is of type `MiniviewComponentRef`.
+ *
+ * @group Handles
+ */
+export interface MiniviewComponentRef {
+    /**
+     * Toggle the collapsed state of the miniview.
+     */
+    toggleCollapsed: () => void;
+}
+/**
+ * Props for the MiniviewComponent.
+ * @group Props
+ */
+export interface MiniviewComponentProps {
+    /**
+     * Optional filter to decide which elements to show in the miniview.
+     * @param obj
+     */
+    elementFilter?: (obj: Node | Group) => boolean;
+    /**
+     * Optional function to use to decorate miniview elements with a `vjs-miniview-type` attribute. Can be used for simple styling.
+     * @param obj
+     */
+    typeFunction?: (obj: Node | Group) => string;
+    /**
+     * Whether or not to move miniview elements at the same time as their related surface element is being dragged. Defaults to true.
+     */
+    activeTracking?: boolean;
+    /**
+     * Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
+     */
+    clickToCenter?: boolean;
+    /**
+     * Optional class name to append to the root element's class list.
+     */
+    className?: string;
+}
+/**
+ * Provides a miniview attached to some surface. This component is context aware and will locate the surface to attach
+ * to when declared either inside a {@link SurfaceProvider} or as a child element of a {@link SurfaceComponent}.
+ * @group Components
+ */
+export declare const MiniviewComponent: React.ForwardRefExoticComponent<MiniviewComponentProps & React.RefAttributes<MiniviewComponentRef>>;

package/package.json

@@ -0,0 +1 @@
+{"name":"@visuallyjs/browser-ui-react","version":"1.0.0","description":"VisuallyJs React for Browser UI renderer","module":"visuallyjs.browser-ui-react.es.js","main":"visuallyjs.browser-ui-react.cjs.js","types":"index.d.ts","files":["visuallyjs.browser-ui-react.es.js","visuallyjs.browser-ui-react.cjs.js","**/*.d.ts"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.0.0"}}

package/palette-component.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { PaletteComponentProps, PaletteComponentRef } from "./definitions";
+/**
+ * Provides a palette from which new nodes/groups can be dragged onto a surface/paper canvas.  This component can function
+ * inside a {@link SurfaceContext} - whether provided by a {@link SurfaceComponent}, {@link PaperComponent} or a
+ * {@link SurfaceProvider}.
+ *
+ * @group Components
+ *
+ */
+export declare const PaletteComponent: React.ForwardRefExoticComponent<PaletteComponentProps & React.RefAttributes<PaletteComponentRef>>;

package/shape-component.d.ts

@@ -0,0 +1,51 @@
+import { JsxWrapperProps } from "./jsx-wrapper";
+import { FontSpec, Vertex } from "@visuallyjs/browser-ui";
+export declare const DEFAULT_SHAPE_WIDTH = 120;
+export declare const DEFAULT_SHAPE_HEIGHT = 90;
+/**
+ * Props for a ShapeComponent
+ *
+ * @group Props
+ */
+export interface ShapeComponentProps<T extends Vertex> {
+    /**
+     * Defaults to false. If true, a label will be written on the shape (using an SVG text element).
+     */
+    showLabels?: boolean;
+    /**
+     * The name of the property that identifies some vertex's label. Defaults to "label".
+     */
+    labelProperty?: string;
+    /**
+     * Optional stroke width to use for labels. Defaults to "0.25px".
+     */
+    labelStrokeWidth?: string;
+    /**
+     * For multiline labels, the proportion of the width of the shape that the longest line can take up.
+     */
+    labelFillRatio?: number;
+    /**
+     * Defaults to true - word wrap shape labels so they fit into their shapes
+     */
+    multilineLabels?: boolean;
+    /**
+     * Color for the label. Defaults to #000000.
+     */
+    labelColor?: string;
+    /**
+     * Context for the vertex, as passed in by the SurfaceComponent.
+     */
+    ctx: JsxWrapperProps<T>;
+    /**
+     * Optional font size/style to use for this shape.
+     */
+    font?: FontSpec;
+}
+/**
+ * A component that renders an SVG shape from a shape library. For many SVG use cases you might want to look into
+ * using a {@link DiagramComponent} in preference to a {@link SurfaceComponent} or {@link PaperComponent} that renders
+ * vertices with a ShapeComponent - take a look through the docs for discussions of the pros and cons of each.
+ *
+ * @group Components
+ */
+export declare function ShapeComponent<T extends Vertex>(props: ShapeComponentProps<T>): JSX.Element;

package/shape-palette-component.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { ShapePaletteComponentProps, ShapePaletteComponentRef } from "./definitions";
+/**
+ * A palette that renders the contents of a shape library. This component is context aware and can locate a surface to
+ * use without you needing to inject one.
+ *
+ * @group Components
+ */
+export declare const ShapePaletteComponent: React.ForwardRefExoticComponent<ShapePaletteComponentProps & React.RefAttributes<ShapePaletteComponentRef>>;

package/surface-component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { SurfaceComponentProps, SurfaceComponentRef } from "./definitions";
+/**
+ * Provides a pannable and zoomable canvas on which nodes, edges and groups can be drawn, with support for layouts and various plugins.
+ * @group Components
+ */
+export declare const SurfaceComponent: React.ForwardRefExoticComponent<SurfaceComponentProps & React.RefAttributes<SurfaceComponentRef>>;

package/surface-context.d.ts

@@ -0,0 +1,44 @@
+import { Context, MutableRefObject, ReactNode, ReactElement } from "react";
+import { Surface } from "@visuallyjs/browser-ui";
+import { RefHandle } from "./definitions";
+/**
+ * @internal
+ */
+export declare const SurfaceContext: Context<SurfaceRef>;
+/**
+ * Provider for a Surface. You can use this at some high level in your UI - some common parent component between the parent of where you want to put a Surface and where you want to or drag/drop. Whenever a `SurfaceComponent` is declared as a descendant of this provider, the provider's underlying surface is set and this is propagated to all the other components using this context. To use this you just declare a SurfaceProvider element and put some children inside of it
+ *
+ * @group Providers
+ */
+export declare function SurfaceProvider(props: {
+    children?: Array<ReactNode | ReactElement<any, any>> | ReactNode | ReactElement<any, any>;
+}): JSX.Element;
+/**
+ * Handle for a reference to a mutable ref object which holds a surface. See implementation below.
+ * @internal
+ */
+export interface SurfaceRef extends RefHandle<Surface> {
+}
+/**
+ * Implementation of the SurfaceRef handler. The `set` method sets the ref object's value and then
+ * propagates the surface to all registered listeners. The `listen` method either queues a listener, if the handle is not yet
+ * ready, or calls back the listener immediately, if the handle is already populated with a surface. The `_ref` method provides access
+ * to the underlying mutable ref object; the SurfaceComponent uses this when it is created inside a SurfaceProvider. None of this
+ * code is public facing.
+ * @param ref
+ * @internal
+ */
+export declare function createSurfaceRef(ref: MutableRefObject<Surface>): SurfaceRef;
+/**
+ * Generic reference handler create routine. This function creates a `RefHandle` for some given type, which is
+ * an object with `set` and `listen` methods that you can use inside a context. Visually Js uses this internally for the
+ * Surface but we exposed it for usage in some of our demos.
+ * @param ref
+ * @internal
+ */
+export declare function createRefHandler<T, S = Surface>(ref: MutableRefObject<T | null>): RefHandle<T>;
+/**
+ * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
+ * @group Hooks
+ */
+export declare function useSurface(): Promise<Surface>;

package/visuallyjs-context.d.ts

@@ -0,0 +1,22 @@
+import { Context, ReactNode } from "react";
+import { BrowserUIReactModel } from "./browser-ui-react";
+import { ModelOptions } from "@visuallyjs/browser-ui";
+/**
+ * Context object for use by the various Visually Js components such as Surface, Miniview, Controls, Inspector, DragDrop. The root value for this context is null: When a SurfaceComponent or PaperComponent is instantiated they check this context and if the value is null, they set a model instance for this context, which miniview/control/inspector components can use.
+ * @internal
+ */
+export declare const VisuallyJsContext: Context<BrowserUIReactModel>;
+/**
+ * Provider for a VisuallyJs model. This component is intended for certain advanced scenarios in which you have a number of UI components that want to share the same model. For instance you may render a model to a pannable and zoomable surface in some part of your UI, and then show a chart in some other part, whose data is the same model that the surface is using.
+ *
+ * @group Providers
+ */
+export declare function VisuallyJsProvider(props: {
+    modelOptions?: ModelOptions;
+    children?: Array<ReactNode> | ReactNode;
+}): JSX.Element;
+/**
+ * Provides access to the VisuallyJsModel that is in scope, either as provided by a VisuallyJsContext, or a PaperContext/SurfaceContext. This hook is asynchronous and returns a Promise.
+ * @group Hooks
+ */
+export declare function useVisuallyJsModel(): Promise<BrowserUIReactModel>;