@dineug/erd-editor 3.6.0 → 3.8.0

package/dist/components/erd/erd-context-menu/menus/tablePlacementMenus.d.ts

@@ -0,0 +1,24 @@
+import { AppContext } from '../../../appContext';
+import { IconName } from '../../../primitives/icon/icons';
+import { TablePlacement } from '../../../../constants/tablePlacement';
+type Menu = {
+    name: string;
+    iconName: IconName;
+    placement: TablePlacement;
+};
+export declare const menus: Menu[];
+/**
+ * The placements the author can ask for. Each one emits the same action, and
+ * the editor reads the placement to decide between the preview it watches
+ * settle and the layout ELK answers in one go.
+ *
+ * @example
+ * createTablePlacementMenus(app.value, props.onClose).map(menu => ...);
+ */
+export declare function createTablePlacementMenus({ emitter }: AppContext, onClose: () => void): {
+    name: string;
+    iconName: IconName;
+    onClick: () => void;
+}[];
+export {};
+//# sourceMappingURL=tablePlacementMenus.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/code-block/CodeBlock.d.ts

@@ -1,8 +1,8 @@
 import { FC } from '@dineug/r-html';
-import { ShikiService } from '../../../services/shikiService';
+import { Lang } from '../../../constants/language';
 export type CodeBlockProps = {
     value: string;
-    lang: Parameters<ShikiService['codeToHtml']>[1]['lang'];
+    lang: Lang;
     theme?: 'dark' | 'light';
     onCopy?: (value: string) => void;
 };

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

@@ -10,17 +10,20 @@ declare const LUCIDE_ICON: {
     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;
@@ -29,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;
@@ -41,8 +45,11 @@ declare const LUCIDE_ICON: {
     'sticky-note': IconNode;
     sun: IconNode;
     table: IconNode;
+    'table-2': IconNode;
     'table-properties': IconNode;
     'undo-2': IconNode;
+    'wand-sparkles': IconNode;
+    waypoints: IconNode;
     workflow: IconNode;
     x: 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/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/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/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, a press on the background pans, and with the
+ * modifier it opens the marquee of this scene. 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

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

@@ -1,5 +1,8 @@
+import { ContentCompass } from '../erd/content-compass/compassGeometry';
+import { Viewport } from '../../engine/modules/editor/state';
 import { Point } from '../../internal-types';
 import { Group, VisualizationLink, VisualizationNode } from './createVisualization';
+export { DIM_OPACITY } from '../../konva/scene/viewLayout';
 /** The most of a table name a label shows before it is cut. */
 export declare const NAME_MAX_LENGTH = 15;
 /**
@@ -18,11 +21,6 @@ export declare const TABLE_RADIUS = 8;
 export declare const COLUMN_RADIUS = 4;
 /** A table draws larger than the columns that hang off it. */
 export declare const nodeRadius: (group: Group) => number;
-/**
- * What a dot, a line or a name fades to while it sits outside the lit
- * neighbourhood of a hovered table, so that neighbourhood reads on its own.
- */
-export declare const DIM_OPACITY = 0.2;
 /** The ids a hovered table lights up: nodes on one side, links on the other. */
 export type Highlight = {
     nodeIds: Set<string>;
@@ -63,6 +61,32 @@ export declare function createView(width: number, height: number): Visualization
  * const next = zoomAt(view, { x: event.offsetX, y: event.offsetY }, 1.2);
  */
 export declare function zoomAt(view: VisualizationView, point: Point, factor: number): VisualizationView;
+/**
+ * The view that stands the whole graph in the middle of the stage, as large as
+ * the zoom allows with a margin clear of every edge. A graph with nothing
+ * placed yet gets the middle of the stage back, which is where the forces gather it.
+ *
+ * @example
+ * Object.assign(state, fitGraphView(nodes, viewport));
+ */
+export declare function fitGraphView(nodes: VisualizationNode[], viewport: Viewport): VisualizationView;
+/**
+ * The view holding the scene point given under the middle of the stage, at the
+ * scale it already stands at. What a press on the compass moves the graph by.
+ *
+ * @example
+ * Object.assign(state, centerGraphView(state, compass.target, viewport));
+ */
+export declare function centerGraphView(view: VisualizationView, target: Point, viewport: Viewport): VisualizationView;
+/**
+ * Which way the nearest dot lies while the stage holds none of them, read the
+ * way the scene beside it reads its own. Null while the graph is empty, while
+ * the stage has no size, and while any dot reaches the stage.
+ *
+ * @example
+ * const compass = graphCompass(state, nodes, viewport);
+ */
+export declare function graphCompass(view: VisualizationView, nodes: Iterable<VisualizationNode>, viewport: Viewport): ContentCompass | null;
 /**
  * How much a wheel event scales the view, above one for a wheel rolled away
  * from the user. Exponential in the travel, so a notch each way cancels out.

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

@@ -0,0 +1,20 @@
+import { AppContext } from '../appContext';
+/**
+ * One step of zoom in the mode that is up. The Flow's runs through the canon
+ * the document's own does; the graph's holds the middle of the stage, which is
+ * where the same step lands for a view with no scroll under it.
+ *
+ * @example
+ * stepVisualizationZoom(app.value, ZOOM_STEP);
+ */
+export declare function stepVisualizationZoom(app: AppContext, step: number): void;
+/**
+ * The zoom of the mode that is up, at the level given rather than a step from
+ * where it stands. Absolute, so the reset chord lands on the same number
+ * whichever mode reads it and however far the reader had zoomed.
+ *
+ * @example
+ * setVisualizationZoom(app.value, ZOOM_RESET);
+ */
+export declare function setVisualizationZoom(app: AppContext, level: number): void;
+//# sourceMappingURL=zoomVisualization.d.ts.map

package/dist/constants/layout.d.ts

@@ -4,6 +4,8 @@ export declare const START_ADD = 50;
 export declare const DUPLICATE_MIN_MOVE = 4;
 export declare const DEFAULT_WIDTH = 1200;
 export declare const DEFAULT_HEIGHT: number;
+/** The px a table cell's text is drawn at, which the scene and the view header scale read. */
+export declare const CELL_FONT_SIZE = 12;
 export declare const INPUT_HEIGHT = 20;
 export declare const INPUT_MARGIN_RIGHT = 8;
 export declare const HEADER_ICON_HEIGHT = 12;
@@ -23,6 +25,48 @@ export declare const COLUMN_UNIQUE_WIDTH = 22;
 export declare const COLUMN_AUTO_INCREMENT_WIDTH = 15;
 export declare const COLUMN_PADDING = 2;
 export declare const COLUMN_HEIGHT: number;
+/** The table icon a view card draws beside its name, at the reference's 1rem. */
+export declare const VIEW_TABLE_HEADER_ICON_SIZE = 16;
+/** The gap between that icon and the name, the reference's one unit of spacing. */
+export declare const VIEW_TABLE_HEADER_ICON_GAP = 4;
+/** The size a view card draws its header name at, over the size its rows take. */
+export declare const VIEW_TABLE_HEADER_FONT_SIZE = 14;
+/**
+ * How much wider a string is at that size than at the one it was measured with.
+ * A face advances a glyph in proportion to its size, so a measured width scales
+ * rather than having to be measured a second time.
+ */
+export declare const VIEW_TABLE_HEADER_FONT_SCALE: number;
+/**
+ * How much wider again the header name is at the medium weight a view draws it
+ * in, over the regular every ui width was measured with. A host with no medium
+ * of its own synthesises one wider still, so the slot carries the room for both.
+ */
+export declare const VIEW_TABLE_HEADER_WEIGHT_SCALE = 1.04;
+/**
+ * The header a view card draws: the icon line with the card's own padding under
+ * it, and none of the icon band the document header keeps above the name,
+ * because a view offers no edit affordance there.
+ */
+export declare const VIEW_TABLE_HEADER_HEIGHT: number;
+/** The key badge a view row draws, at the size the reference gives a row icon. */
+export declare const VIEW_COLUMN_ICON_SIZE = 16;
+/** The gap between that badge and the name, the reference's one and a half units. */
+export declare const VIEW_COLUMN_ICON_GAP = 6;
+/** The gap above and below the content of a view row, the reference's two units. */
+export declare const VIEW_COLUMN_PADDING = 8;
+/**
+ * The row a view card draws, written down as that icon line inside that padding
+ * rather than derived from INPUT_HEIGHT: a view row is a line of read only
+ * text, not the editable input box the document row is sized around.
+ */
+export declare const VIEW_COLUMN_HEIGHT: number;
+/** The width a view card is never drawn under, which is the reference's node minimum. */
+export declare const VIEW_TABLE_MIN_WIDTH = 172;
+/** The size of a button in a view card's header. */
+export declare const VIEW_TABLE_HEADER_BUTTON_SIZE = 12;
+/** The strip the two of them take along the right edge of that header. */
+export declare const VIEW_TABLE_HEADER_BUTTONS_WIDTH: number;
 export declare const MEMO_BORDER = 1;
 export declare const MEMO_PADDING = 8;
 export declare const MEMO_HEADER_HEIGHT: number;
@@ -38,6 +82,12 @@ export declare const DIFF_TREE_WIDTH = 200;
  * two rows at partial alpha on a 1x display.
  */
 export declare const RELATIONSHIP_STROKE_WIDTH = 2;
+/**
+ * The same connector inside a view, at the reference's hairline. A particle
+ * riding a lit one is 2.4 units across, so a heavier line swallows it: what a
+ * reader sees moving is the bulge the particle makes over the stroke, not a colour of its own.
+ */
+export declare const VIEW_RELATIONSHIP_STROKE_WIDTH = 1;
 /**
  * The invisible band that catches the pointer for a connector, because
  * hit-testing follows the painted stroke. Narrower than NUDGE_GAP, so it stays

package/dist/constants/tablePlacement.d.ts

@@ -0,0 +1,16 @@
+import { ValuesType } from '../internal-types';
+/**
+ * How a set of tables is laid out. Force is the simulation the editor has
+ * always run, the rest are ELK algorithms answered off the main thread, and
+ * viewLayered is the preset the views place with rather than one the author picks.
+ */
+export declare const TablePlacement: {
+    readonly force: "force";
+    readonly layeredHorizontal: "layeredHorizontal";
+    readonly layeredVertical: "layeredVertical";
+    readonly flow: "flow";
+    readonly viewLayered: "viewLayered";
+};
+export type TablePlacement = ValuesType<typeof TablePlacement>;
+export declare const DEFAULT_TABLE_PLACEMENT: TablePlacement;
+//# sourceMappingURL=tablePlacement.d.ts.map