@dineug/erd-editor 3.7.0 → 3.9.0

package/dist/components/erd/content-compass/compassGeometry.d.ts

@@ -1,5 +1,8 @@
+import { RxStore } from '../../../engine/rx-store';
 import { RootState } from '../../../engine/state';
 import { Point } from '../../../internal-types';
+import { Rect } from '../../../konva/scene/metrics';
+import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
 /** Which way the nearest entity lies and how far, while the screen holds none. */
 export type ContentCompass = {
     /** Degrees clockwise from east, which is the rotation the arrow is drawn at. */
@@ -10,11 +13,31 @@ export type ContentCompass = {
     target: Point;
 };
 /**
- * Where the nearest entity stands when the screen shows none of them, measured
- * from the screen's own middle. Null while any table or memo reaches the screen,
- * touching it counting as reaching it, and null while nobody has measured one.
+ * Where the nearest of the rects stands when the screen holds none of them,
+ * measured from the screen's own middle. Null while any of them reaches the
+ * screen, touching it counting as reaching it, and null where there are none.
+ *
+ * @example
+ * const compass = nearestContent(getContentRects(state, [], source), screen);
  */
-export declare function getContentCompass(state: RootState): ContentCompass | null;
+export declare function nearestContent(rects: Iterable<Rect>, screen: Rect): ContentCompass | null;
+/**
+ * Where the nearest entity stands when the screen shows none of them, in the
+ * scene the source names. Null while any table or memo reaches the screen and
+ * null while nobody has measured one.
+ */
+export declare function getContentCompass(state: RootState, source?: GeometrySource): ContentCompass | null;
+/** Small enough beside a label or a button to read as a mark rather than one. */
+export declare const COMPASS_ARROW_SIZE = 14;
+/**
+ * Puts the nearest entity in the middle of the screen of the source given, and
+ * does nothing while the screen holds one. Read on the press rather than closed
+ * over by the render that drew the arrow, since a wheel between the two moves the screen.
+ *
+ * @example
+ * scrollToNearestContent(store, ViewKind.flow);
+ */
+export declare function scrollToNearestContent(store: RxStore, source?: GeometrySource): void;
 /**
  * The gap as the pill prints it: whole scene units under a thousand, then
  * thousands, millions and billions carrying one decimal under ten, so the label

package/dist/components/erd/diff-viewer/diff.d.ts

@@ -1,10 +1,13 @@
 import { RootState } from '../../../engine/state';
 import { Column, Table } from '../../../internal-types';
+import { Theme } from '../../../themes/tokens';
 /**
  * Map<uuid, [tag, Map<path, diff>]>
  */
 export type DiffMap = Map<string, DiffTuple>;
-type DiffTuple = [string, Map<string, number>];
+/** Map<path, diff> for one entity, each path spelled as the FocusType of the cell showing it. */
+export type DiffPaths = Map<string, number>;
+type DiffTuple = [string, DiffPaths];
 type NameToTableMap = Map<string, {
     table: Table;
     nameToColumnMap: Map<string, Column>;
@@ -15,6 +18,10 @@ export declare const Diff: {
 };
 export declare function diffState(prevState: RootState, state: RootState): [DiffMap, DiffMap];
 export declare function getNameToTableMap({ doc: { tableIds }, collections, }: RootState): NameToTableMap;
-export declare function getDiffStyle(diff: number, diffMap: DiffMap): HTMLStyleElement;
+/**
+ * The background a cell of one entity sits on in a diff pane: the insert or the
+ * delete colour its own path carries, and null for a path that did not change.
+ */
+export declare function diffFill(theme: Theme, paths: DiffPaths | null | undefined, path: string): string | null;
 export {};
 //# sourceMappingURL=diff.d.ts.map

package/dist/components/erd/diff-viewer/diffContext.d.ts

@@ -0,0 +1,9 @@
+import { DiffMap } from './diff';
+import { Ctx } from '../../../internal-types';
+/**
+ * The changes a diff pane tints its cells by. ErdViewer alone provides one, so
+ * every other scene reads null and draws no tint, and no node for one either.
+ */
+export declare const diffContext: import('@dineug/r-html').Context<DiffMap | null>;
+export declare const useDiffMap: (ctx: Ctx) => import('@dineug/r-html').Ref<DiffMap | null>;
+//# sourceMappingURL=diffContext.d.ts.map

package/dist/components/erd/floating-toolbar/FloatingToolbar.d.ts

@@ -1,9 +1,9 @@
 import { FC } from '@dineug/r-html';
 export type FloatingToolbarProps = {};
 /**
- * The tools over the canvas: which of the two a press means, the notation the
- * next relationship is drawn in, and zen mode. It is the one surface zen mode
- * leaves standing, because the way out of zen mode is in it.
+ * The bar over the bottom of the canvas: which of the two a press means, the
+ * zoom, the notation the next relationship is drawn in, zen mode, and which
+ * way the content lies once the screen holds none. It is the one surface zen mode leaves standing.
  */
 declare const FloatingToolbar: FC<FloatingToolbarProps>;
 export default FloatingToolbar;

package/dist/components/erd/floating-toolbar/FloatingToolbar.styles.d.ts

@@ -1,4 +1,7 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const menu: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const readout: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const divider: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const compass: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const compassDistance: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=FloatingToolbar.styles.d.ts.map

package/dist/components/erd/floating-toolbar/ToolbarCompass.template.d.ts

@@ -0,0 +1,14 @@
+import { DOMTemplateLiterals } from '@dineug/r-html';
+import { ContentCompass } from '../content-compass/compassGeometry';
+export type ToolbarCompassOptions = {
+    compass: ContentCompass | null;
+    className?: string;
+    onClick: () => void;
+};
+/**
+ * The last group of a bottom bar once the screen holds no content: which way it
+ * lies and how far. A template rather than a component, so the label changes in
+ * the same pass as the bar and a menu anchored over it moves with it.
+ */
+export declare function toolbarCompass({ compass, className, onClick, }: ToolbarCompassOptions): DOMTemplateLiterals | null;
+//# sourceMappingURL=ToolbarCompass.template.d.ts.map

package/dist/components/erd/minimap/MinimapScene.d.ts

@@ -2,7 +2,7 @@ import { FC } from '@dineug/r-html';
 import { Stage } from 'konva/lib/Stage';
 export type MinimapSceneProps = {};
 /**
- * The whole document on one layer, with no culling: a thumbnail that dropped
+ * The whole scene on one layer, with no culling: a thumbnail that dropped
  * what is off screen would stop being a map of where the rest of it is. Boxes
  * only, because a connector between two of them is noise at this size.
  */

package/dist/components/erd/minimap/minimapGeometry.d.ts

@@ -3,6 +3,7 @@ import { RootState } from '../../../engine/state';
 import { Point } from '../../../internal-types';
 import { Rect } from '../../../konva/scene/metrics';
 import { SceneTransform } from '../../../konva/scene/viewport';
+import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
 /** The scene placement plus the screen looking at it, which is all a visible rect is read from. */
 export type ViewTransform = SceneTransform & {
     viewportWidth: number;
@@ -45,8 +46,8 @@ export type MinimapLayout = {
     /** Where the box sits inside the MINIMAP_SIZE square, centred along its shorter side. */
     offset: Point;
 };
-/** The view as the store holds it, for every reader that maps the screen onto the thumbnail. */
-export declare function getViewTransform(state: RootState): ViewTransform;
+/** The placement as the store holds it, for every reader that maps the screen onto the thumbnail. */
+export declare function getViewTransform(state: RootState, source?: GeometrySource): ViewTransform;
 /**
  * The scene the screen actually covers, read back through the very origin
  * getSceneOrigin places the scene layer at. One screen pixel buys one over the
@@ -64,7 +65,7 @@ export declare function getReachRect(view: ViewTransform, { left, top }: ScrollR
  * around it, snapped to the grid, then widened along its shorter side where
  * that would draw under MINIMAP_BOX_MIN_SIDE. A drag holds its content still.
  */
-export declare function getMinimapLayout(state: RootState): MinimapLayout;
+export declare function getMinimapLayout(state: RootState, source?: GeometrySource): MinimapLayout;
 /** A scene point in the thumbnail's own pixels; scene zero lands where the layer is placed. */
 export declare function toMinimapPoint({ map, ratio }: MinimapLayout, point: Point): Point;
 /** The scene point under a thumbnail pixel, the mapping above inverted. */

package/dist/components/flowCenters.d.ts

@@ -0,0 +1,10 @@
+import { AppContext } from './appContext';
+/**
+ * Narrows the Flow view to the tables given and their one hop. State alone:
+ * the placement loop reads the display set it names and asks for the layout,
+ * so this and the mount never hold two answers to the one question.
+ */
+export declare function focusFlowView(app: AppContext, tableIds: string[]): void;
+/** Widens the Flow view back to everything it placed, through that same one channel: state alone. */
+export declare function showAllFlowView(app: AppContext): void;
+//# sourceMappingURL=flowCenters.d.ts.map

package/dist/components/primitives/context-menu/context-menu-content/ContextMenuContent.d.ts

@@ -3,6 +3,8 @@ export type ContextMenuContentProps = {
     id: string;
     x: number;
     y: number;
+    fit?: boolean;
+    flipX?: number;
     children?: DOMTemplateLiterals;
 };
 declare const ContextMenuContent: FC<ContextMenuContentProps>;

package/dist/components/primitives/context-menu/context-menu-content/fitMenu.d.ts

@@ -0,0 +1,20 @@
+export type MenuBox = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export type WindowSize = {
+    width: number;
+    height: number;
+};
+/**
+ * How far a menu drawn at box moves into the window: back from the right and
+ * bottom edges, never past the left and top. A submenu the right edge cuts
+ * flips to end at flipRight instead, unless the left edge would cut it more.
+ */
+export declare function fitMenu(box: MenuBox, view: WindowSize, flipRight?: number): {
+    dx: number;
+    dy: number;
+};
+//# sourceMappingURL=fitMenu.d.ts.map

package/dist/components/primitives/icon/icons.d.ts

@@ -4,25 +4,26 @@ export declare const ICON_VIEW_BOX = "0 0 24 24";
 export declare const ICON_STROKE_WIDTH = 2;
 export type IconNodeChild = IconNode[number];
 declare const LUCIDE_ICON: {
-    'align-horizontal-distribute-center': IconNode;
-    'align-vertical-distribute-center': IconNode;
     'arrow-right': IconNode;
     atom: IconNode;
     braces: IconNode;
     brackets: IconNode;
     'case-sensitive': IconNode;
     check: IconNode;
+    'chevron-down': IconNode;
     'chevron-right': IconNode;
     code: IconNode;
     contrast: IconNode;
     copy: IconNode;
     database: IconNode;
     diff: IconNode;
+    'external-link': IconNode;
     eye: IconNode;
     'file-diff': IconNode;
     'file-image': IconNode;
     'file-input': IconNode;
     'file-output': IconNode;
+    fullscreen: IconNode;
     'grip-vertical': IconNode;
     hand: IconNode;
     'key-round': IconNode;
@@ -31,6 +32,7 @@ declare const LUCIDE_ICON: {
     minus: IconNode;
     'moon-star': IconNode;
     'mouse-pointer-2': IconNode;
+    network: IconNode;
     palette: IconNode;
     plus: IconNode;
     'redo-2': IconNode;
@@ -43,6 +45,7 @@ declare const LUCIDE_ICON: {
     'sticky-note': IconNode;
     sun: IconNode;
     table: IconNode;
+    'table-2': IconNode;
     'table-properties': IconNode;
     'undo-2': IconNode;
     'wand-sparkles': IconNode;

package/dist/components/sceneSourceContext.d.ts

@@ -0,0 +1,10 @@
+import { Ctx } from '../internal-types';
+import { GeometrySource } from '../utils/draw-relationship/geometrySource';
+/**
+ * Which coordinate system the scene a component sits in is drawn from. Each
+ * root that opens a scene provides its own inside its wrapper, so an export or
+ * a minimap of the document keeps it while a Flow scene beside them reads its view.
+ */
+export declare const sceneSourceContext: import('@dineug/r-html').Context<GeometrySource>;
+export declare const useSceneSource: (ctx: Ctx) => import('@dineug/r-html').Ref<GeometrySource>;
+//# sourceMappingURL=sceneSourceContext.d.ts.map

package/dist/components/table-view/Table.styles.d.ts

@@ -1,6 +1,11 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+/** The band the name stands in, one input line and its room as in the scene. */
 export declare const header: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The colour along the left edge, over the border. The box is wider than the
+ * corner it rounds and cut back to the strip, since a radius wider than its
+ * own box is scaled down to fit and would no longer follow the card's.
+ */
 export declare const headerColor: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const headerButtonWrap: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const headerInputWrap: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=Table.styles.d.ts.map

package/dist/components/table-view/column/useColumnCell.d.ts

@@ -8,6 +8,11 @@ export type ColumnCellProps = {
     value: string;
     onEditEnd?: () => void;
 };
+/**
+ * The hints a typed data type offers: a fuzzy match over the names, or none
+ * for blank text and for text that has gone past a whole name.
+ */
+export declare function searchDataTypeHints(hints: DataTypeHint[], value: string): DataTypeHint[];
 /**
  * Data type autocomplete state and key handling for a column cell, shared by
  * the DOM cell and by the Konva cell that replaces it.

package/dist/components/theme-builder/ThemeBuilder.styles.d.ts

@@ -1,3 +1,8 @@
+/**
+ * A panel placed over whichever tab is up. The tab wrapper raises no stacking
+ * context of its own, so a raised descendant inside it would paint over an
+ * unraised sibling; the same step, later in the root, keeps this panel on top.
+ */
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const title: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const subTitle: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/visualization/Visualization.d.ts

@@ -1,10 +1,9 @@
 import { FC } from '@dineug/r-html';
-import { Visualization } from './createVisualization';
 export type VisualizationProps = {};
 /**
- * The dom shell around the graph: the Stage container, the wheel that zooms
- * it, and the table preview that opens over a hovered table dot. The layout,
- * the view and the hover live in one observable here and never reach the store.
+ * The tab, which mounts one of its two modes at a time and the toolbar that
+ * picks between them. Each mode builds its own Stage on mount, so the choice
+ * is which sibling stands here rather than a branch inside one of them.
  */
 declare const Visualization: FC<VisualizationProps>;
 export default Visualization;

package/dist/components/visualization/Visualization.styles.d.ts

@@ -3,6 +3,9 @@
  * Stage, so nothing here is ever larger than the box it sits in.
  */
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
-/** The Stage container, viewport sized, which konva fills with its own canvas. */
+/**
+ * The Stage container, viewport sized, which konva fills with its own canvas.
+ * It takes every touch itself, so a pinch on it zooms the graph and not the page.
+ */
 export declare const stage: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=Visualization.styles.d.ts.map

package/dist/components/visualization/VisualizationFlow.d.ts

@@ -0,0 +1,10 @@
+import { FC } from '@dineug/r-html';
+export type VisualizationFlowProps = {};
+/**
+ * The Flow mode of the tab: the tables of a display set, placed once by ELK
+ * and kept for the session, drawn by the same scene the ERD is. The wheel
+ * moves the screen and a drag on the background pans, as the ERD tab reads them.
+ */
+declare const VisualizationFlow: FC<VisualizationFlowProps>;
+export default VisualizationFlow;
+//# sourceMappingURL=VisualizationFlow.d.ts.map

package/dist/components/visualization/VisualizationGraph.d.ts

@@ -0,0 +1,10 @@
+import { FC } from '@dineug/r-html';
+export type VisualizationGraphProps = {};
+/**
+ * The Graph mode of the tab, the force graph: the Stage container, the wheel
+ * that zooms it, and the table preview that opens over a hovered table dot.
+ * The layout, the view and the hover live in one observable here and never reach the store.
+ */
+declare const VisualizationGraph: FC<VisualizationGraphProps>;
+export default VisualizationGraph;
+//# sourceMappingURL=VisualizationGraph.d.ts.map

package/dist/components/visualization/captureDrag.d.ts

@@ -0,0 +1,14 @@
+import { KonvaEventObject } from 'konva/lib/Node';
+import { Subscription } from 'rxjs';
+import { DragMove } from '../../utils/globalEventObservable';
+export type CapturedDragObserver = {
+    next: (move: DragMove) => void;
+    complete: () => void;
+};
+/**
+ * Follows a drag pressed on a konva shape, holding the pointer on that shape
+ * until the lift. Konva tests a move against the hit graph the last draw left,
+ * so a pointer faster than a draw would otherwise leave the shape it holds.
+ */
+export declare function captureDrag(event: KonvaEventObject<Event>, { next, complete }: CapturedDragObserver): Subscription;
+//# sourceMappingURL=captureDrag.d.ts.map

package/dist/components/visualization/flowLayout.d.ts

@@ -0,0 +1,29 @@
+import { AppContext } from '../appContext';
+import { RxStore } from '../../engine/rx-store';
+/**
+ * Fits what the Flow view shows into the screen, the way a placement preview
+ * opens, with no ceiling but the zoom's own: a view is read up close as
+ * readily as from afar, where a preview of the whole document is only ever the latter.
+ */
+export declare function fitFlowView(store: RxStore): void;
+/**
+ * The one place a Flow placement is asked for. The landing the display set
+ * already has under this key is stood back on, an ask already out for it is
+ * joined, and anything else is one new ask; a Tidy up forces that ask and its fit.
+ *
+ * @example
+ * onMounted(() => ensureFlowPlaced(app.value));
+ */
+export declare function ensureFlowPlaced(app: AppContext, { force }?: {
+    force?: boolean;
+}): Promise<void>;
+/**
+ * Keeps the Flow view placed for as long as the tab draws it: placed again
+ * after any batch that changed what it is placed over, and never at the
+ * subscription itself, which the mount has asked for already. Returns the teardown.
+ *
+ * @example
+ * onMounted(() => addUnsubscribe(keepFlowPlaced(app.value)));
+ */
+export declare function keepFlowPlaced(app: AppContext): () => void;
+//# sourceMappingURL=flowLayout.d.ts.map

package/dist/components/visualization/graphViewHandle.d.ts

@@ -0,0 +1,33 @@
+import { VisualizationNode } from './createVisualization';
+import { VisualizationState, VisualizationView } from './visualizationView';
+/** What the graph lets the bar beside it reach: the view it draws with, and where its dots stand. */
+export type GraphViewHandle = {
+    state: VisualizationState;
+    nodes: () => VisualizationNode[];
+};
+/** Hands the graph of the editor given to whatever reads it, for as long as it is mounted. */
+export declare function registerGraphView(editorId: string, handle: GraphViewHandle): void;
+/**
+ * Takes the handle back as the graph unmounts. Only its own: a second graph
+ * that registered in between owns the slot, and this must not empty it.
+ */
+export declare function unregisterGraphView(editorId: string, handle: GraphViewHandle): void;
+/**
+ * The graph of the editor given, or the resting handle while none is mounted.
+ * The version is read rather than merely counted, so a render that reached
+ * this is redrawn once a graph registers.
+ *
+ * @example
+ * const { state, nodes } = getGraphView(store.state.editor.id);
+ */
+export declare function getGraphView(editorId: string): GraphViewHandle;
+/**
+ * Moves the view of the graph of the editor given, and does nothing at all
+ * while none is mounted. The resting handle is one object every editor shares,
+ * so a press before the mount must not be written into it.
+ *
+ * @example
+ * updateGraphView(editor.id, ({ state }) => zoomAt(state, center, 1.04));
+ */
+export declare function updateGraphView(editorId: string, next: (handle: GraphViewHandle) => VisualizationView | null): void;
+//# sourceMappingURL=graphViewHandle.d.ts.map

package/dist/components/visualization/particles/ParticleLayer.d.ts

@@ -0,0 +1,10 @@
+import { FC } from '@dineug/r-html';
+export type ParticleLayerProps = {};
+/**
+ * The layer the particles of a view's lit connectors run on, under the scene,
+ * since a card hides the connectors behind it and a particle riding one goes
+ * with them. Its one empty layer is committed at mount and drawn by the loop alone.
+ */
+declare const ParticleLayer: FC<ParticleLayerProps>;
+export default ParticleLayer;
+//# sourceMappingURL=ParticleLayer.d.ts.map

package/dist/components/visualization/particles/particleEdges.d.ts

@@ -0,0 +1,15 @@
+import { RootState } from '../../../engine/state';
+import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
+import { MeasuredPath } from './particlePath';
+/** One lit connector as the particles ride it, from its PK end to its FK end. */
+export type ParticleEdge = {
+    id: string;
+    path: MeasuredPath;
+};
+/**
+ * The connectors a view lights, measured for the particles to ride: those the
+ * hover or the pin reaches, in the order the view shows them. None for the
+ * document, none at rest, and none past the cap, where the light stands alone.
+ */
+export declare function getParticleEdges(state: RootState, source?: GeometrySource): ParticleEdge[];
+//# sourceMappingURL=particleEdges.d.ts.map

package/dist/components/visualization/particles/particleLoop.d.ts

@@ -0,0 +1,28 @@
+import { Layer } from 'konva/lib/Layer';
+import { Point } from '../../../internal-types';
+import { ParticleEdge } from './particleEdges';
+/** The time and the frame a loop runs on, so a spec can freeze a phase or count frames. */
+export type ParticleClock = {
+    now(): number;
+    requestFrame(callback: () => void): number;
+    cancelFrame(handle: number): void;
+};
+/** The clock every shipped loop runs on: wall time and the browser's own animation frame. */
+export declare const particleClock: ParticleClock;
+export type ParticleLoop = {
+    /** The lit connectors to run particles on and the colour to paint them; an empty list clears the layer. */
+    setEdges(edges: ParticleEdge[], fill: string): void;
+    /** Where the scene layers stand, so the circles land over the connectors they ride. */
+    setPlacement(origin: Point, zoomLevel: number): void;
+    /** Cancels the frame out, if any, and takes every circle off the layer. */
+    stop(): void;
+};
+/** The name every group of one connector's particles carries, beside the connector's own id. */
+export declare const PARTICLE_GROUP_NAME = "particle-edge";
+/**
+ * One requestAnimationFrame loop that owns the drawing of one layer. It runs
+ * a frame only while there is something to move or clear, so a scene with
+ * nothing lit costs no frame, and the view has one loop for as long as the layer lives.
+ */
+export declare function createParticleLoop(layer: Layer, clock?: ParticleClock): ParticleLoop;
+//# sourceMappingURL=particleLoop.d.ts.map

package/dist/components/visualization/particles/particlePath.d.ts

@@ -0,0 +1,83 @@
+import { Point } from '../../../internal-types';
+/** How many particles ride one lit connector at a time, as the reference draws them. */
+export declare const PARTICLE_COUNT = 6;
+/** How long one particle takes from the PK end to the FK end, in milliseconds. */
+export declare const ANIMATE_DURATION = 6000;
+/**
+ * How long after the one before it each particle leaves the PK end: one
+ * second, which over six particles fills the six second run, so a connector
+ * carries all six at every moment rather than a bunch that thins out.
+ */
+export declare const PARTICLE_INTERVAL: number;
+/**
+ * The most lit connectors a view animates. Past it the particles stay off and
+ * only the fade and the highlight remain, since six circles on each of more
+ * connectors than this is more than a frame has room for.
+ */
+export declare const PARTICLE_EDGE_MAX = 60;
+/** How long one particle is along the run it rides, in scene units. */
+export declare const PARTICLE_RX = 5;
+/** How thick it is across that run, which is what makes the circle an elongated blur. */
+export declare const PARTICLE_RY = 1.2;
+/** How opaque the far edge of a particle's gradient is, against 1 at its centre. */
+export declare const PARTICLE_EDGE_ALPHA = 0.4;
+/**
+ * How far either side of a point the direction is measured over, as a fraction
+ * of the whole run, guide lines included: about one chord of the curve, so a
+ * window spans a bend and the angle turns through it rather than stepping.
+ */
+export declare const TANGENT_WINDOW: number;
+/** A polyline with the distance along it each point sits at, so a distance names a point on it. */
+export type MeasuredPath = {
+    points: Point[];
+    /** How far along the path each point is: zero for the first, the length for the last. */
+    distances: number[];
+    length: number;
+};
+/** Copies the polyline and measures it, so the path handed back shares nothing with the caller. */
+export declare function measurePath(points: Point[]): MeasuredPath;
+/**
+ * The point so far along the path from its first point. A distance past
+ * either end lands on that end, and a zero-length run between two points
+ * hands back the first of them rather than dividing by nothing.
+ */
+export declare function pointAlong(path: MeasuredPath, distance: number): Point;
+/**
+ * How far along a connector each of its particles is at a moment: the first
+ * leaves the PK end at zero, each next one an interval later, and every one
+ * runs the whole length in a period and starts over, easing in and out of it.
+ */
+export declare function particlePhase(elapsedMs: number, edgeLength: number): number[];
+/**
+ * Which way the path runs at a distance along it, in degrees, so a particle
+ * lies along the run it rides. Measured between the points a window either
+ * side of it, never off the one chord it sits in, which steps at every bend.
+ */
+export declare function tangentAt(path: MeasuredPath, distance: number): number;
+/**
+ * The gradient one particle is filled with: its colour at the centre, the same
+ * colour at a fraction of its opacity at the edge. Handed to the node whole,
+ * so the loop that moves circles sets attributes and computes nothing.
+ */
+export declare function particleGradient(fill: string): {
+    fill: string;
+    fillPriority: string;
+    fillRadialGradientStartPoint: {
+        x: number;
+        y: number;
+    };
+    fillRadialGradientStartRadius: number;
+    fillRadialGradientEndPoint: {
+        x: number;
+        y: number;
+    };
+    fillRadialGradientEndRadius: number;
+    fillRadialGradientColorStops: (string | number)[];
+};
+/**
+ * The same colour carrying an alpha channel. Every palette token reaching here
+ * is a six digit hex, and a colour in any other spelling is handed back as it
+ * came rather than mangled into one the canvas would refuse.
+ */
+export declare function withAlpha(color: string, alpha: number): string;
+//# sourceMappingURL=particlePath.d.ts.map

package/dist/components/visualization/useViewGestures.d.ts

@@ -0,0 +1,24 @@
+import { Ref } from '@dineug/r-html';
+import { Ctx } from '../../internal-types';
+import { ViewSource } from '../../utils/draw-relationship/geometrySource';
+export type ViewGestureOptions = {
+    /** The box the scene hangs in, which a press and a wheel are measured against. */
+    root: Ref<HTMLDivElement>;
+    /** The Stage container, which says whether a press landed on a table. */
+    canvas: Ref<HTMLDivElement>;
+    /** The view the gestures land in, named so they never reach the active one. */
+    source: ViewSource;
+};
+/**
+ * The gestures a view scene takes on its box: the wheel moves the screen and
+ * with the modifier zooms it, as a pinch does, a press on the background pans,
+ * and with the modifier it opens the marquee. Every one lands in the view named.
+ *
+ * @example
+ * const { handleWheel, handleMousedown } = useViewGestures(ctx, { root, canvas, source });
+ */
+export declare function useViewGestures(ctx: Ctx, { root, canvas, source }: ViewGestureOptions): {
+    handleWheel: (event: WheelEvent) => void;
+    handleMousedown: (event: MouseEvent | TouchEvent) => void;
+};
+//# sourceMappingURL=useViewGestures.d.ts.map

package/dist/components/visualization/visualization-toolbar/VisualizationToolbar.d.ts

@@ -0,0 +1,10 @@
+import { FC } from '@dineug/r-html';
+export type VisualizationToolbarProps = {};
+/**
+ * The bar over the bottom of the Visualization tab: which of the two modes is
+ * up, the zoom, the placement tools of the Flow, how much of a card it draws,
+ * the way back to the whole document, and which way the content lies and how far once the screen holds none.
+ */
+declare const VisualizationToolbar: FC<VisualizationToolbarProps>;
+export default VisualizationToolbar;
+//# sourceMappingURL=VisualizationToolbar.d.ts.map

package/dist/components/visualization/visualization-toolbar/VisualizationToolbar.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const showModeTrigger: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const showModeLabel: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const showModeMenu: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=VisualizationToolbar.styles.d.ts.map