@visuallyjs/browser-ui-svelte 1.1.4 → 1.2.1

package/definitions.d.ts

@@ -1,11 +1,16 @@
-import type { DOMAttributes } from "svelte/elements";
-import { SurfaceOptions, Vertex, Group, Node, ControlsComponentButtons, DataGeneratorFunction, type BrowserElement, Base, Size, ObjectData, DropTargetInfo, PaletteMode, SvgExportUIOptions, ImageExportUIOptions, ShapeLibraryImpl, ModelOptions, DiagramOptions, ColumnChartOptions, BarChartOptions, CategoryValueChartOptions, Diagram, DiagramCell, NodeMapping, GroupMapping, PortMapping, BrowserUI, EdgeMapping, OnVertexAddedCallback, CanvasDropFilter, LineChartOptions, AreaChartOptions, PieChartOptions, ScatterChartOptions, BubbleChartOptions, GaugeChartOptions, SankeyOptions, FontSpec, BrowserUIModel, PreparedShape, ChartModelFilter, VisuallyJsDefaultJSON, PointXY, FixedElementConstraints } from "@visuallyjs/browser-ui";
 import { type Snippet } from "svelte";
+import type { DOMAttributes } from "svelte/elements";
+import { SurfaceOptions, Vertex, Group, Node, ControlsComponentButtons, DataGeneratorFunction, type BrowserElement, Base, Size, ObjectData, DropTargetInfo, PaletteMode, SvgExportUIOptions, ImageExportUIOptions, ShapeLibraryImpl, ModelOptions, DiagramOptions, Diagram, DiagramCell, NodeMapping, GroupMapping, PortMapping, BrowserUI, EdgeMapping, OnVertexAddedCallback, CanvasDropFilter, FontSpec, BrowserUIModel, PreparedShape, PointXY, FixedElementConstraints, PopupPosition, OverlaySpec, PaperOptions } from "@visuallyjs/browser-ui";
 /**
  * Render options for a SurfaceComponent. This interface is the same as SurfaceOptions but with several vanilla-only options removed.
  */
 export interface SvelteSurfaceRenderOptions extends Omit<SurfaceOptions, "directRender" | "enhancedView" | "view" | "templates"> {
 }
+/**
+ * Render options for a PaperComponent. This interface is the same as PaperOptions but with several vanilla-only options removed.
+ */
+export interface SveltePaperRenderOptions extends Omit<PaperOptions, "directRender" | "enhancedView" | "view" | "templates"> {
+}
 /**
  * Definition of a node - its component, and behaviour.
  */
@@ -34,15 +39,29 @@ export interface SveltePortMapping extends Omit<PortMapping<any>, "templateIdRes
     component?: any;
 }
 /**
- * Spec for a react component overlay. A ctx object is passed in to your component and you are expected to return JSX.
+ * Defines a value holder. This is a direct copy of the `RefObject` concept from React.
  */
+export type RefObject<T> = {
+    current: T | null;
+};
 /**
- * Edge mappings for a view.
+ * Definition for an overlay when using Svelte components.
  */
+export interface SvelteOverlaySpec {
+    /**
+     * Component used to render this overlay.
+     */
+    component: any;
+    /**
+     * Props to pass to the component.
+     */
+    props?: Record<string, any>;
+}
 /**
  * Mapping definition for edges in a Svelte view.
  */
-export interface SvelteEdgeMapping extends EdgeMapping {
+export interface SvelteEdgeMapping extends Omit<EdgeMapping, "overlays"> {
+    overlays?: Array<OverlaySpec | SvelteOverlaySpec>;
 }
 /**
  * Options for the view in the Svelte surface component. Maps node/group/port/edge types to components and behaviour.
@@ -65,6 +84,11 @@ export interface SvelteSurfaceViewOptions {
      */
     edges?: Record<string, SvelteEdgeMapping>;
 }
+/**
+ * Options for the view in the Svelte paper component. Maps node/group/port/edge types to components and behaviour.
+ */
+export interface SveltePaperViewOptions extends SvelteSurfaceViewOptions {
+}
 /**
  * @group Props
  */
@@ -109,6 +133,56 @@ export interface SurfaceComponentProps extends DOMAttributes<HTMLDivElement> {
      * Shape library to use to render SVG shapes. Optional.
      */
     shapeLibrary?: ShapeLibraryImpl<ObjectData>;
+    /**
+     * An optional array of reactive objects. The properties from these objects will be
+     * merged into the props passed to each WrapperComponent, preserving reactivity.
+     */
+    additionalProps?: Array<Record<string, any>>;
+}
+/**
+ * @group Props
+ */
+export interface PaperComponentProps extends DOMAttributes<HTMLDivElement> {
+    /**
+     * @internal
+     */
+    children?: Snippet;
+    /**
+     * Optional class name to set on the paper component's container
+     */
+    className?: string;
+    /**
+     * Render options for the Paper.
+     */
+    renderOptions?: SveltePaperRenderOptions;
+    /**
+     * View options for the Paper.
+     */
+    viewOptions?: SveltePaperViewOptions;
+    /**
+     * Options for the underlying model instance.
+     */
+    modelOptions?: ModelOptions;
+    /**
+     * Optional Visually JS instance to use. If this is not provided, a Visually JS instance will be created, with `modelOptions` if you provide them.
+     */
+    model?: BrowserUIModel;
+    /**
+     * Optional function that is used to generate a set of props for a given vertex before rendering it. This provides a mechanism for you to inject specific items into the components you use to render your vertices. The return value of this function should be `Record<string, any>`. It may be null.
+     */
+    injector?: (v: Vertex) => Record<string, any>;
+    /**
+     * Optional data to load after the component has been mounted.
+     */
+    data?: any;
+    /**
+     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
+     */
+    url?: string;
+    /**
+     * Shape library to use to render SVG shapes. Optional.
+     */
+    shapeLibrary?: ShapeLibraryImpl<ObjectData>;
 }
 /**
  * @group Props
@@ -282,17 +356,13 @@ export interface InspectorComponentProps extends DOMAttributes<HTMLDivElement> {
      * Optional class name to set on the component's root element.
      */
     className?: string;
-    /**
-     * Callback invoked when the inspector is cleared.
-     * @internal
-     */
-    renderEmptyContainer: () => void;
     /**
      * Callback invoked when a new object has started to be edited.
      * @param obj
      * @param cb
+     * @deprecated From 1.2.0 onwards, use the `current` state object approach instead.
      */
-    refresh: (obj: Base) => void;
+    refresh?: (obj: Base) => void;
     /**
      * Optional filter function that you can supply if you want to ignore certain objects in your dataset.
      */
@@ -306,6 +376,12 @@ export interface InspectorComponentProps extends DOMAttributes<HTMLDivElement> {
      * Whether or not to auto commit changes on blur or enter keypress. Defaults to true.
      */
     autoCommit?: boolean;
+    /**
+     * A $state ref that the inspector will apply 2-way binding to. Since 1.2.0 this is the preferred way to use an inspector, as it reduces the amount of boilerplate you need to configure.
+     * @since 1.2.0
+     */
+    current?: Base | null;
+    children?: Snippet;
 }
 /**
  * @group Props
@@ -478,256 +554,10 @@ export interface DiagramComponentProps extends DOMAttributes<HTMLDivElement> {
      * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
      */
     url?: string;
-}
-/**
- * @group Props
- */
-export interface ColumnChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<ColumnChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface BarChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<BarChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface XYChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<CategoryValueChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-}
-/**
- * @group Props
- */
-export interface LineChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<LineChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface AreaChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<AreaChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface PieChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<PieChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface ScatterChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<ScatterChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface BubbleChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<BubbleChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Optional filter to apply to the data source.
-     */
-    dataSourceFilter?: ChartModelFilter;
-}
-/**
- * @group Props
- */
-export interface GaugeChartComponentProps extends DOMAttributes<HTMLDivElement> {
     /**
-     * Options for the chart
-     */
-    options: Omit<GaugeChartOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load after the chart has been mounted.
-     */
-    data?: Array<ObjectData>;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-}
-/**
- * @group Props
- */
-export interface SankeyChartComponentProps extends DOMAttributes<HTMLDivElement> {
-    /**
-     * Options for the chart
-     */
-    options: Omit<SankeyOptions, "data" | "url" | "model">;
-    /**
-     * Optional class name to set on the chart component's container
-     */
-    className?: string;
-    /**
-     * Optional data to load into the chart (in CSV format)
-     */
-    csvData?: string;
-    /**
-     * Optional data to load into the chart (in VisuallyJs default json format)
-     */
-    jsonData?: VisuallyJsDefaultJSON;
-    /**
-     * Optional url from which to load data after the component has been mounted. If you provide this and also data, this will take precedence.
-     */
-    url?: string;
-    /**
-     * Whether the chart is interactive.
-     */
-    interactive?: boolean;
-    /**
-     * Optional property to pivot the sankey chart on.
+     * @internal
      */
-    pivot?: string;
+    children?: Snippet;
 }
 /**
  * Props for the diagram palette.
@@ -846,4 +676,26 @@ export interface DecoratorComponentProps extends DOMAttributes<HTMLDivElement> {
      * Optional constraints when using fixed placement.
      */
     constraints?: FixedElementConstraints;
+    /**
+     * @internal
+     */
+    children?: Snippet;
+}
+/**
+ * Props for the SurfacePopup component.
+ * @group Props
+ */
+export interface SurfacePopupProps {
+    /**
+     * CSS3 selector identifying elements from which this popup is launched.
+     */
+    selector: string;
+    /**
+     * Optional position to place this popup. Defaults to "bottom", and can also be overridden on a per-launcher basis via a DOM attribute.
+     */
+    anchor?: PopupPosition;
+    /**
+     * The snippet that renders the content for the popup.
+     */
+    popup: Snippet<[Vertex | null, BrowserUIModel, BrowserUI]>;
 }

package/diagram-store.d.ts

@@ -23,8 +23,3 @@ export declare function internal_createDiagramContext(): DiagramRef;
  * @internal
  */
 export declare function internal_getDiagramContext(doNotCreate: boolean): DiagramRef;
-/**
- * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
- * @group Hooks
- */
-export declare function useDiagram(): Promise<Diagram>;

package/diagram-store.js

@@ -41,18 +41,3 @@ export function internal_getDiagramContext(doNotCreate) {
     }
     return ctx;
 }
-/**
- * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
- * @group Hooks
- */
-export function useDiagram() {
-    const ref = internal_getDiagramContext(true);
-    return new Promise((resolve, reject) => {
-        if (ref != null) {
-            ref.listen((s) => resolve(s));
-        }
-        else {
-            reject();
-        }
-    });
-}

package/index.d.ts

@@ -11,7 +11,11 @@ export * from './diagram-store';
 export * from './surface-store';
 export * from './inspector-store';
 export * from './definitions';
+export * from './charts/definitions';
 export * from './use-zoom.svelte';
+export * from './use-surface.svelte';
+export * from './use-diagram.svelte';
+export * from './use-visuallyjs-update.svelte';
 import { BrowserElement, BrowserUIModel, BrowserUIOptions, TemplateRenderer, ModelOptions } from "@visuallyjs/browser-ui";
 /**
  * Extension of VisuallyJsModel suitable for use with the Svelte integration.

package/index.js

@@ -11,7 +11,11 @@ export * from './diagram-store';
 export * from './surface-store';
 export * from './inspector-store';
 export * from './definitions';
+export * from './charts/definitions';
 export * from './use-zoom.svelte';
+export * from './use-surface.svelte';
+export * from './use-diagram.svelte';
+export * from './use-visuallyjs-update.svelte';
 import { BrowserUIModel, log } from "@visuallyjs/browser-ui";
 /**
  * Extension of VisuallyJsModel suitable for use with the Svelte integration.

package/package.json

@@ -1 +1 @@
-{"name":"@visuallyjs/browser-ui-svelte","version":"1.1.4","description":"VisuallyJS Svelte integration for Browser UI renderer","module":"index.js","main":"index.js","types":"index.d.ts","svelte":"index.js","files":["**/*.d.ts","**/*.js","SurfaceComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaletteComponent.svelte","InspectorComponent.svelte","EdgeTypePickerComponent.svelte","ShapePaletteComponent.svelte","ExportControlsComponent.svelte","ShapeComponent.svelte","DiagramComponent.svelte","BarChartComponent.svelte","ColumnChartComponent.svelte","XYChartComponent.svelte","LineChartComponent.svelte","AreaChartComponent.svelte","PieChartComponent.svelte","WrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.1.4"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
+{"name":"@visuallyjs/browser-ui-svelte","version":"1.2.1","description":"VisuallyJS Svelte integration for Browser UI renderer","module":"index.js","main":"index.js","types":"index.d.ts","svelte":"index.js","files":["**/*.d.ts","**/*.js","SurfaceComponent.svelte","PaperComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaperProvider.svelte","PaletteComponent.svelte","InspectorComponent.svelte","EdgeTypePickerComponent.svelte","ShapePaletteComponent.svelte","ExportControlsComponent.svelte","ShapeComponent.svelte","DiagramComponent.svelte","BarChartComponent.svelte","ColumnChartComponent.svelte","XYChartComponent.svelte","LineChartComponent.svelte","AreaChartComponent.svelte","PieChartComponent.svelte","WrapperComponent.svelte","OverlayWrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte","SurfacePopup.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.1"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}

package/surface-store.d.ts

@@ -1,4 +1,4 @@
-import type { Surface } from "@visuallyjs/browser-ui";
+import type { Paper, Surface } from "@visuallyjs/browser-ui";
 import { BrowserUISvelteModel } from "./index";
 /**
  * Key for the surface context
@@ -17,11 +17,24 @@ export interface SurfaceRef {
     set: (surface: Surface) => void;
     listen: (l: (s: Surface) => any) => void;
 }
+/**
+ * Handle for a paper - use `set` to set the paper and `listen` to register a listener.
+ * @internal
+ */
+export interface PaperRef {
+    set: (paper: Paper) => void;
+    listen: (l: (s: Paper) => any) => void;
+}
 /**
  * Create a surface context, and set it on Svelte via `setContext`.
  * @internal
  */
 export declare function internal_createSurfaceContext(): SurfaceRef;
+/**
+ * Create a paper context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export declare function internal_createPaperContext(): PaperRef;
 /**
  * Gets the current surface context from Svelte, optionally creating it if it does not exist. The Surface and the SurfaceProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
  * This method is NOT to be invoked by users of the API. Use {@link useSurface} to access the current Surface.
@@ -30,10 +43,12 @@ export declare function internal_createSurfaceContext(): SurfaceRef;
  */
 export declare function internal_getSurfaceContext(doNotCreate: boolean): SurfaceRef;
 /**
- * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
- * @group Hooks
+ * Gets the current paper context from Svelte, optionally creating it if it does not exist. The Paper and the PaperProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
+ * This method is NOT to be invoked by users of the API. Use {@link usePaper} to access the current Paper.
+ * @param doNotCreate
+ * @internal
  */
-export declare function useSurface(): Promise<Surface>;
+export declare function internal_getPaperContext(doNotCreate: boolean): PaperRef;
 /**
  * Hook to expose the current model. This hook is asynchronous and returns a Promise.
  * @group Hooks

package/surface-store.js

@@ -1,4 +1,5 @@
 import { getContext, setContext } from "svelte";
+import { internal_getDiagramContext } from "./index";
 /**
  * Key for the surface context
  * @internal
@@ -28,6 +29,30 @@ export function internal_createSurfaceContext() {
     setContext(STORE_KEY, ref);
     return ref;
 }
+/**
+ * Create a paper context, and set it on Svelte via `setContext`.
+ * @internal
+ */
+export function internal_createPaperContext() {
+    const listeners = [];
+    const handle = { current: null };
+    const ref = {
+        set: (paper) => {
+            handle.current = paper;
+            listeners.forEach(l => l(paper));
+        },
+        listen: (l) => {
+            if (handle.current == null) {
+                listeners.push(l);
+            }
+            else {
+                l(handle.current);
+            }
+        }
+    };
+    setContext(STORE_KEY, ref);
+    return ref;
+}
 /**
  * Gets the current surface context from Svelte, optionally creating it if it does not exist. The Surface and the SurfaceProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
  * This method is NOT to be invoked by users of the API. Use {@link useSurface} to access the current Surface.
@@ -42,19 +67,17 @@ export function internal_getSurfaceContext(doNotCreate) {
     return ctx;
 }
 /**
- * Hook to expose the current Surface. This hook is asynchronous and returns a Promise.
- * @group Hooks
+ * Gets the current paper context from Svelte, optionally creating it if it does not exist. The Paper and the PaperProvider both set `doNotCreate` to false; other components such as miniview/controls must set it to true.
+ * This method is NOT to be invoked by users of the API. Use {@link usePaper} to access the current Paper.
+ * @param doNotCreate
+ * @internal
  */
-export function useSurface() {
-    const ref = internal_getSurfaceContext(true);
-    return new Promise((resolve, reject) => {
-        if (ref != null) {
-            ref.listen((s) => resolve(s));
-        }
-        else {
-            reject();
-        }
-    });
+export function internal_getPaperContext(doNotCreate) {
+    let ctx = getContext(STORE_KEY);
+    if (ctx == null && !doNotCreate) {
+        ctx = internal_createPaperContext();
+    }
+    return ctx;
 }
 /**
  * Hook to expose the current model. This hook is asynchronous and returns a Promise.
@@ -62,10 +85,18 @@ export function useSurface() {
  */
 export function useVisuallyJsModel() {
     const ref = internal_getSurfaceContext(true);
+    const paperRef = internal_getPaperContext(true);
+    const diagramRef = internal_getDiagramContext(true);
     return new Promise((resolve, reject) => {
         if (ref != null) {
             ref.listen((s) => resolve(s.model));
         }
+        else if (paperRef != null) {
+            paperRef.listen((s) => resolve(s.model));
+        }
+        else if (diagramRef != null) {
+            diagramRef.listen((d) => resolve(d.model));
+        }
         else {
             reject();
         }

package/use-diagram.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Diagram } from '@visuallyjs/browser-ui';
+/**
+ *
+ * @group Hooks
+ */
+export declare function useDiagram(): {
+    readonly current: Diagram | null;
+};

package/use-diagram.svelte.js

@@ -0,0 +1,18 @@
+import { internal_getDiagramContext } from "./diagram-store";
+/**
+ *
+ * @group Hooks
+ */
+export function useDiagram() {
+    const ctx = internal_getDiagramContext(true);
+    let diagram = $state(null);
+    if (ctx != null) {
+        ctx.listen((s) => diagram = s);
+    }
+    // Return an object with a getter to maintain reactivity across function boundaries
+    return {
+        get current() {
+            return diagram;
+        }
+    };
+}

package/use-surface.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Surface } from '@visuallyjs/browser-ui';
+import { RefObject } from "./definitions";
+/**
+ * Creates a reactive zoom state for a VisuallyJS UI
+ * @group Hooks
+ */
+export declare function useSurface(): RefObject<Surface>;