@dineug/erd-editor 3.6.0 → 3.8.0

package/README.md

@@ -34,10 +34,11 @@ npm install @dineug/erd-editor
 
 The package ships ES modules with its dependencies left as bare imports, so any bundler
 (Vite, webpack, Rspack, esbuild, …) resolves, dedupes and tree-shakes them like the rest of
-your app. Two features run in shared workers — schema garbage collection and the PNG export —
-constructed as `new SharedWorker(new URL('./workers/…', import.meta.url))`, which those bundlers
-emit as worker files beside your chunks; a strict CSP needs `worker-src 'self'`. Without a
-bundler, use the UMD file described under [Script tag](#script-tag) instead.
+your app. Four features run in shared workers — schema garbage collection, the PNG export, the
+automatic table placement and the syntax highlighting — constructed as
+`new SharedWorker(new URL('./workers/…', import.meta.url))`, which those bundlers emit as worker
+files beside your chunks; a strict CSP needs `worker-src 'self'`. Without a bundler, use the UMD
+file described under [Script tag](#script-tag) instead.
 
 ## Usage
 
@@ -79,7 +80,7 @@ that step; a production build needs nothing.
 // vite.config.js
 export default {
   optimizeDeps: {
-    exclude: ['@dineug/erd-editor', '@dineug/erd-editor-shiki-worker'],
+    exclude: ['@dineug/erd-editor'],
   },
 };
 ```
@@ -87,16 +88,12 @@ export default {
 ### Script tag
 
 `dist/erd-editor.umd.js` is a self-contained build for a plain `<script>` tag: every
-dependency and both workers are inside it, and it registers `<erd-editor>` and exposes the
-three callbacks as `window.ErdEditor`. It is what `unpkg` and `jsdelivr` serve.
+dependency and all four workers are inside it, and it registers `<erd-editor>` and exposes the
+two file callbacks as `window.ErdEditor`. It is what `unpkg` and `jsdelivr` serve.
 
 ```html
 <erd-editor style="display: block; width: 100%; height: 100vh"></erd-editor>
 <script src="https://cdn.jsdelivr.net/npm/@dineug/erd-editor/dist/erd-editor.umd.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@dineug/erd-editor-shiki-worker/dist/erd-editor-shiki-worker.umd.js"></script>
-<script>
-  ErdEditor.setGetShikiServiceCallback(ErdEditorShikiWorker.getShikiService);
-</script>
 ```
 
 The workers travel inside the file as `data:` URLs, so a strict CSP needs `worker-src data:`
@@ -165,22 +162,22 @@ erd-editor {
 
 ## Syntax highlighting
 
-The SQL and code-generation panels render as plain text unless a highlighter is supplied.
-[`@dineug/erd-editor-shiki-worker`](https://www.npmjs.com/package/@dineug/erd-editor-shiki-worker)
-runs one in a shared worker. It is a separate install:
+The SQL and code-generation panels are highlighted by [Shiki](https://shiki.style), in a shared
+worker of its own. There is nothing to install or register: the worker is built the first time a
+code panel renders, so a page that opens none never fetches the grammars.
 
-```sh
-npm install @dineug/erd-editor-shiki-worker
-```
+| | |
+| --- | --- |
+| Languages | SQL, TypeScript, GraphQL, C#, Java, Kotlin, Scala, Go, Python |
+| Themes | `github-dark`, `github-light`, picked from the editor's light / dark appearance |
 
-```js
-import { setGetShikiServiceCallback } from '@dineug/erd-editor';
+Those are exactly the languages the panels emit — the JPA generator emits Java, the SQLAlchemy
+generator emits Python, the TypeORM, Sequelize and Drizzle generators emit TypeScript, and the
+DBML and AML generators are highlighted as SQL, the closest grammar shiki ships.
 
-// deferred, so the highlighter never lands in your main chunk
-import('@dineug/erd-editor-shiki-worker').then(({ getShikiService }) => {
-  setGetShikiServiceCallback(getShikiService);
-});
-```
+Where `SharedWorker` is missing — Chrome on Android, Safari before 16.4 — the underlying error is
+logged and the panels render as plain text; nothing else is affected. The regex engine is plain
+JavaScript, so no host CSP needs `wasm-unsafe-eval`.
 
 ## File dialogs
 

package/dist/components/erd/automatic-table-placement/AutomaticTablePlacement.d.ts

@@ -1,7 +1,5 @@
 import { FC, Ref } from '@dineug/r-html';
 import { AppContext } from '../../appContext';
-import { Viewport } from '../../../engine/modules/editor/state';
-import { Rect } from '../../../konva/scene/metrics';
 export type AutomaticTablePlacementProps = {
     app: Ref<AppContext>;
     onChange: (tables: TablePoint[]) => void;
@@ -11,19 +9,11 @@ export type TablePoint = {
     x: number;
     y: number;
 };
-/**
- * Scene units left around the content when the preview fits it, so a table at
- * the edge of the document is not flush against the edge of the screen.
- */
-export declare const FIT_PADDING = 200;
-/** The closest the preview opens at: the whole document is what it is for. */
-export declare const PREVIEW_ZOOM_MAX = 0.7;
-/**
- * The zoom the preview opens at: the content with its padding fitted into the
- * screen on both axes, rounded to the two places a zoom is kept to, and held
- * between the floor every zoom has and the ceiling above.
- */
-export declare function previewZoomLevel(content: Rect, viewport: Viewport): number;
+/** How far the simulation has cooled, from 0 to 1. */
+export type PlacementToastState = {
+    progress: number;
+};
+export declare function placementDescription({ progress, }: PlacementToastState): string;
 declare const AutomaticTablePlacement: FC<AutomaticTablePlacementProps>;
 export default AutomaticTablePlacement;
 //# sourceMappingURL=AutomaticTablePlacement.d.ts.map

package/dist/components/erd/automatic-table-placement/runElkPlacement.d.ts

@@ -0,0 +1,23 @@
+import { FC } from '@dineug/r-html';
+import { AppContext } from '../../appContext';
+import { ElkLayoutPoint, ElkPlacement } from '../../../services/elk-layout';
+type PlacingToastProps = {
+    onCancel: () => void;
+};
+/**
+ * The message up while ELK works, and the whole of what a one-shot placement
+ * shows. There is no progress to follow and nothing to read off a layout that
+ * does not exist yet, so Cancel is the only thing on it. A view placement shows it too.
+ */
+export declare const PlacingToast: FC<PlacingToastProps>;
+/**
+ * Places every table by ELK and hands the layout straight over. No preview
+ * overlay: one layout arrives at once, there is nothing to weigh before it
+ * lands, and a single undo puts every table back.
+ *
+ * @example
+ * runElkPlacement(app.value, placement, handleChangeAutomaticTablePlacement);
+ */
+export declare function runElkPlacement(app: AppContext, placement: ElkPlacement, onChange: (tables: ElkLayoutPoint[]) => void): Promise<void>;
+export {};
+//# sourceMappingURL=runElkPlacement.d.ts.map

package/dist/components/erd/canvas/CanvasScene.d.ts

@@ -4,9 +4,9 @@ export type CanvasSceneProps = {
     root: Ref<HTMLDivElement>;
 };
 /**
- * The four layers of the canvas, plus the one a drag opens. Background, scene
- * and presence carry the canvas transform, and the marquee layer stays in
- * screen space because that is where its own mousemove measures.
+ * The layers of the canvas, four over the document and four under a view,
+ * plus the one a drag opens. Each carries the canvas transform but the
+ * marquee, which stays in screen space where its own mousemove measures.
  */
 declare const CanvasScene: FC<CanvasSceneProps>;
 /**

package/dist/components/erd/canvas/entityDrag.d.ts

@@ -1,7 +1,8 @@
 import { RootState } from '../../../engine/state';
-/** Raises the flag and holds the view as it stands until endEntityDrag. */
-export declare function beginEntityDrag(root: RootState): void;
-export declare function endEntityDrag(root: RootState): void;
+import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
+/** Raises the flag and holds the scene's view as it stands until endEntityDrag. */
+export declare function beginEntityDrag(root: RootState, source?: GeometrySource): void;
+export declare function endEntityDrag(root: RootState, source?: GeometrySource): void;
 /** Reads the flag through the observable, so a scene render tracks it. */
-export declare function isEntityDragActive(root: RootState): boolean;
+export declare function isEntityDragActive(root: RootState, source?: GeometrySource): boolean;
 //# sourceMappingURL=entityDrag.d.ts.map

package/dist/components/erd/canvas/highlightTransition.d.ts

@@ -0,0 +1,35 @@
+/** The time and the frame a transition runs on, so a spec can step it and count its frames. */
+export type TransitionClock = {
+    now(): number;
+    requestFrame(callback: () => void): number;
+    cancelFrame(handle: number): void;
+};
+/** How long a highlight takes to come up or go out, the span the reference gives its edges. */
+export declare const TRANSITION_MS = 300;
+/**
+ * The key one transition is held under. The editor id leads so a scene that
+ * closes drops its own keys and no one else's, and the kind separates a table
+ * from a connector that was minted the same id.
+ */
+export declare function transitionKey(editorId: string, kind: string, id: string): string;
+/**
+ * What the key shows now: where the frame last put it, or the target it rests
+ * at. Reading a key that is not moving arms nothing, which is what keeps this
+ * module frameless in the export worker that carries it.
+ */
+export declare function progressOf(key: string): number;
+/**
+ * Sends a key toward the target given. A key already heading there is left
+ * alone, and a key asked for the first time settles on the target at once, so
+ * only a change a reader could have watched is animated.
+ */
+export declare function transitionTo(key: string, target: number): void;
+/** Drops every key one editor holds and cancels the frame if nothing else is moving. */
+export declare function stopTransitions(editorId: string): void;
+/**
+ * Runs the transitions on the clock given, or on the browser's own again when
+ * called with nothing. Whatever was moving lands on its target, since a start
+ * time taken from one clock means nothing against another.
+ */
+export declare function setTransitionClock(next?: TransitionClock): void;
+//# sourceMappingURL=highlightTransition.d.ts.map

package/dist/components/erd/canvas/memo/useMoveMemo.d.ts

@@ -1,7 +1,9 @@
+import { Ref } from '@dineug/r-html';
 import { Ctx, Memo } from '../../../../internal-types';
+import { GeometrySource } from '../../../../utils/draw-relationship/geometrySource';
 export declare function useMoveMemo(ctx: Ctx, props: {
     memo: Memo;
-}): {
+}, source: Ref<GeometrySource>): {
     onMoveStart: (event: import('../sceneTokens').ScenePointerEvent) => void;
 };
 //# sourceMappingURL=useMoveMemo.d.ts.map

package/dist/components/erd/canvas/mixColor.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The colour a fraction of the way from one to the other, mixed straight in
+ * rgb. Both ends come back exactly as they were given, and a colour this
+ * cannot read is handed back whole rather than mangled into one that is not.
+ */
+export declare function mixColor(from: string, to: string, t: number): string;
+//# sourceMappingURL=mixColor.d.ts.map

package/dist/components/erd/canvas/relationship-group/RelationshipGroup.d.ts

@@ -5,6 +5,8 @@ export type RelationshipGroupProps = {
     relationships: RelationshipType[];
     viewport?: CullingRect;
     strokeWidth?: number;
+    /** The connectors a view lights, decided once by the scene rather than by each leaf. */
+    litIds?: Set<string>;
 };
 /**
  * Culling lives here, not in the parent, because a route is a side channel of

package/dist/components/erd/canvas/relationship-group/relationship/Relationship.d.ts

@@ -3,6 +3,8 @@ import { Relationship as RelationshipType } from '../../../../../internal-types'
 export type RelationshipProps = {
     relationship: RelationshipType;
     strokeWidth: number;
+    /** Whether the view lights this connector, decided by the scene it is drawn in. */
+    lit?: boolean;
 };
 declare const Relationship: FC<RelationshipProps>;
 export default Relationship;

package/dist/components/erd/canvas/relationship-group/relationship/Relationship.template.d.ts

@@ -11,8 +11,8 @@ export declare const segment: ({ x1, y1, x2, y2 }: PointToPoint) => number[];
  * One stroke of a cardinality marker. The paint, the width and the two naming
  * attributes are per node in konva, so every marker is drawn through here.
  */
-export declare function decorationLine(points: PointToPoint, stroke: string): DOMTemplateLiterals;
+export declare function decorationLine(points: PointToPoint, stroke: string, strokeWidth: number): DOMTemplateLiterals;
 /** The optional ring of a cardinality marker, at either anchor. */
-export declare function decorationRing({ cx, cy }: Circle, stroke: string): DOMTemplateLiterals;
-export declare function relationshipShape(relationshipType: number, { path, line }: RelationshipPath, stroke: string): DOMTemplateLiterals | null;
+export declare function decorationRing({ cx, cy }: Circle, stroke: string, strokeWidth: number): DOMTemplateLiterals;
+export declare function relationshipShape(relationshipType: number, { path, line }: RelationshipPath, stroke: string, strokeWidth: number): DOMTemplateLiterals | null;
 //# sourceMappingURL=Relationship.template.d.ts.map

package/dist/components/erd/canvas/sceneHit.d.ts

@@ -1,15 +1,16 @@
 import { Context } from 'konva/lib/Context';
 import { Shape } from 'konva/lib/Shape';
+import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
 /** What konva calls to put a shape on the hit canvas, in the shape's own space. */
 export type HitFunc = (context: Context, shape: Shape) => void;
 /**
- * The box a column cell's text answers a press for: the full row height and
- * the gap to the next cell, which is the div the dom scene put the input in.
- * The text carries it so the cell needs no shape that exists only to be hit.
+ * One of those per source, built once. A row is not the same height in a view
+ * as in the document, and konva reads this off an attribute, so a function
+ * built per render would mark every cell dirty every frame.
  */
-export declare const columnCellHit: HitFunc;
-/** The header cell's box, the same way, at the header input's own height. */
-export declare const headerCellHit: HitFunc;
+export declare const columnCellHit: Record<GeometrySource, HitFunc>;
+/** One of those per source, built once, for the reason columnCellHit is. */
+export declare const headerCellHit: Record<GeometrySource, HitFunc>;
 /**
  * The whole 24 unit box of a lucide icon, answered by the first shape it draws.
  * A circle's origin is its centre, so its own position is what puts the box

package/dist/components/erd/canvas/sceneTokens.d.ts

@@ -8,10 +8,20 @@ export type ScenePointerEvent = SceneMouseEvent | SceneTouchEvent;
  * make a cell wider or narrower than the width the layout reserved for it.
  */
 export declare const SCENE_FONT_FAMILY: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Open Sans', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+/**
+ * The monospace face a view draws a type cell in, the same stack the code
+ * panels use. A second face on the scene, so the metrics below are kept per
+ * face rather than as the one pair the text face used to be the whole of.
+ */
+export declare const SCENE_CODE_FONT_FAMILY: "'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', monospace, 'Apple Color Emoji', 'Segoe UI Emoji'";
 /** The px behind font-size-1, which is what typography.paragraph resolves to. */
 export declare const SCENE_FONT_SIZE = 12;
-/** The css font shorthand konva builds for a cell's text, and measures it with. */
+/** That shorthand in the text face. */
 export declare const SCENE_FONT: string;
+/** The weight every cell but a view card's header name is drawn at. */
+export declare const SCENE_FONT_WEIGHT = "normal";
+/** The heavier weight a view card draws its header name at. */
+export declare const VIEW_HEADER_FONT_WEIGHT = "500";
 /** The pair a canvas centres a drawn line by, which no line box is involved in. */
 export type SceneFontMetrics = {
     ascent: number;
@@ -19,13 +29,13 @@ export type SceneFontMetrics = {
 };
 /**
  * The ascent and descent konva centres a drawn line by, read with the measure
- * call konva makes itself. A canvas has no line box to lean on, so this pair is
- * the whole of where a baseline lands, and the editor has to read the same one.
+ * call konva makes itself, and kept per face: the scene draws a type cell in
+ * the code face, whose overhang is not the text face's and whose baseline is its own.
  *
  * @example
  * const { ascent, descent } = getSceneFontMetrics();
  */
-export declare function getSceneFontMetrics(): SceneFontMetrics;
+export declare function getSceneFontMetrics(fontFamily?: string): SceneFontMetrics;
 /**
  * The px behind font-size-5 through font-size-9, in the order HighLevelTable
  * steps through them as the zoom falls. The scale itself is a CSS custom
@@ -42,6 +52,22 @@ export declare const HEADER_COLOR_HEIGHT = 4;
 export declare const FOCUS_BORDER_HEIGHT = 1.5;
 /** What the ring outside a table box costs, as outline and box-shadow both do. */
 export declare const RING_WIDTH = 1;
+/**
+ * The drop shadow a view card sits on, which is what lifts it off the ground
+ * the ERD canvas draws flat. The alpha is the shadow's own, since the shadow
+ * colour token is opaque and the palette has no translucent spelling of it.
+ */
+export declare const VIEW_CARD_SHADOW_BLUR = 20;
+export declare const VIEW_CARD_SHADOW_OFFSET_X = 0;
+export declare const VIEW_CARD_SHADOW_OFFSET_Y = 2;
+export declare const VIEW_CARD_SHADOW_OPACITY = 0.4;
+/**
+ * The bloom a lit view card wears, drawn as a shadow on a stroke and never as
+ * a filled sibling: a fill behind the body would have to be reordered under it,
+ * and the ledger is the only thing allowed to order the scene.
+ */
+export declare const VIEW_CARD_GLOW_BLUR = 14;
+export declare const VIEW_CARD_GLOW_OPACITY = 0.55;
 /** The side of the square viewBox every icon is authored in. */
 export declare const ICON_VIEW_SIZE: number;
 /** What a colour is when the scene paints nothing, as a CSS keyword konva takes. */

package/dist/components/erd/canvas/table/Table.d.ts

@@ -10,6 +10,13 @@ export type TableProps = {
     editorFocused?: boolean;
     /** Off while the table is kept built but scrolled out of the culling rect. */
     visible?: boolean;
+    /** Whether the view lights this card, decided by the scene it is drawn in. */
+    lit?: boolean;
+    /**
+     * The rows of this table a relationship ends on, which a view tints. Decided
+     * by the scene, which walks the document's links once for every card it draws.
+     */
+    relatedColumnIds?: Set<string> | null;
 };
 declare const Table: FC<TableProps>;
 export default Table;

package/dist/components/erd/canvas/table/cellLayout.d.ts

@@ -3,6 +3,7 @@ import { RootState } from '../../../../engine/state';
 import { Table } from '../../../../internal-types';
 import { Theme } from '../../../../themes/tokens';
 import { ColumnWidth } from '../../../../utils/calcTable';
+import { GeometrySource } from '../../../../utils/draw-relationship/geometrySource';
 /** The four widths a column row measures from its table; the rest are fixed. */
 export type ColumnCellWidths = Pick<ColumnWidth, 'comment' | 'dataType' | 'default' | 'name'>;
 /** One editable box on a table, positioned inside the table's own group. */
@@ -16,12 +17,40 @@ export type ColumnCellSlot = CellSlot & {
 };
 /** Where the header cell row starts inside a table group. */
 export declare const HEADER_CELLS_X: number;
-export declare const HEADER_CELLS_Y: number;
-/** The text line inside a header cell and inside a column cell. */
-export declare const HEADER_TEXT_Y = 2;
-export declare const COLUMN_TEXT_Y = 2;
-/** Where the scene runs its focus rect inside a cell, header and column both. */
+/**
+ * How far down a table group the header cells start. The document keeps the
+ * icon band above them; a view draws no icon there, so its cells begin at the
+ * inset itself.
+ */
+export declare function getHeaderCellsY(source?: GeometrySource): number;
+/**
+ * The text line inside a header cell. The document pads its input box; a view
+ * starts its line at the top of the icon band, which the card's own padding has
+ * already put where the band wants it.
+ */
+export declare function getHeaderTextY(source?: GeometrySource): number;
+/**
+ * The box that line is centred in. The document uses the box its editor opens
+ * an input in; a view centres on the icon beside the name instead, so the two
+ * share one middle.
+ */
+export declare function getHeaderTextHeight(source?: GeometrySource): number;
+/** The text line inside a column cell, at the padding its own source lays rows out with. */
+export declare function getColumnTextY(source?: GeometrySource): number;
+/**
+ * The box that line is centred in, the same split: the editor's input box in
+ * the document, and the row's own icon band in a view, which is what leaves the
+ * text on the badge's middle.
+ */
+export declare function getColumnTextHeight(source?: GeometrySource, fontFamily?: string): number;
+/** Where the scene runs its focus rect inside a header cell. */
 export declare const CELL_UNDERLINE_Y: number;
+/**
+ * The same rect inside a column cell, along the foot of the line box the row
+ * leaves between its two paddings. The document draws it alone, so the row it
+ * is measured against is the document's.
+ */
+export declare function getColumnUnderlineY(): number;
 /**
  * The paint that focus rect takes, header and column both: the input colour
  * while the cell is being edited, and greyed out with the rest of the focus
@@ -30,35 +59,36 @@ export declare const CELL_UNDERLINE_Y: number;
 export declare function focusBorderFill(theme: Theme, edit: boolean, editorFocused: boolean | undefined): string;
 /**
  * The baseline one line of cell text is drawn on, down from the top of the
- * cell. Blink puts a painted baseline on the device grid before the zoom scales
- * it, so only a whole pixel survives both rasterisers unchanged.
+ * cell, in the face named or the scene's own. Blink puts a painted baseline on
+ * the device grid before the zoom scales it, so only a whole pixel survives both rasterisers.
  *
  * @example
  * const baseline = getCellTextBaseline();
  */
-export declare function getCellTextBaseline(): number;
+export declare function getCellTextBaseline(fontFamily?: string): number;
 /**
- * The box one line of cell text is centred in. The scene hands konva this
- * height with verticalAlign middle and the editor gives its input the same one,
- * which is what puts the two baselines on one whole pixel instead of two.
+ * The box one line of cell text is centred in, in the face named or the
+ * scene's own. The scene hands konva this height with verticalAlign middle and
+ * the editor gives its input the same one, which puts the two baselines on one whole pixel.
  *
  * @example
  * const height = getCellTextHeight();
  */
-export declare function getCellTextHeight(): number;
-/** Where a column row's cells start, past the key badge. */
-export declare const COLUMN_CELLS_X: number;
+export declare function getCellTextHeight(fontFamily?: string): number;
+/** Where a column row's cells start, past the key badge its own source sizes. */
+export declare function getColumnCellsX(source?: GeometrySource): number;
 /** The comment width a table draws at, clamped by the setting when it is set. */
 export declare function getWidthComment(state: RootState, table: Table): number;
 /**
  * The name and comment boxes across a table header. One list feeds both the
  * scene that draws them and the overlay that edits them, so an editor can never
- * sit anywhere but on the text it replaces.
+ * sit anywhere but on the text it replaces. A view draws the name alone.
  */
-export declare function getHeaderCellSlots(state: RootState, table: Table): CellSlot[];
+export declare function getHeaderCellSlots(state: RootState, table: Table, source?: GeometrySource): CellSlot[];
 /**
  * The cells of one column row, in the order the settings put them and at the x
- * each lands on once the ones before it have taken their width.
+ * each lands on once the ones before it have taken their width. A view lays
+ * out the name and the type and reads neither the show bits nor the order.
  */
-export declare function getColumnCellSlots(state: RootState, widths: ColumnCellWidths): ColumnCellSlot[];
+export declare function getColumnCellSlots(state: RootState, widths: ColumnCellWidths, source?: GeometrySource): ColumnCellSlot[];
 //# sourceMappingURL=cellLayout.d.ts.map

package/dist/components/erd/canvas/table/column/Column.d.ts

@@ -1,8 +1,34 @@
 import { FC } from '@dineug/r-html';
 import { SceneMouseEvent } from '../../sceneTokens';
 import { Column } from '../../../../../internal-types';
+import { GeometrySource } from '../../../../../utils/draw-relationship/geometrySource';
 export type ColumnProps = {
     column: Column;
+    /**
+     * The source the table drawing this row reads, which picks the row's cells. A
+     * prop rather than useSceneSource, the one leaf to depart from it: the table
+     * resolved it already, and a context costs an observable and a subscription per row.
+     */
+    source: GeometrySource;
+    /**
+     * Whether a relationship ends on this column, which a view tints the row
+     * for. Decided by the scene, which walks the links once for every card.
+     */
+    related?: boolean;
+    /**
+     * How far the light has come up on the card this row is drawn in, which is
+     * what the row tint and the type cell above are both drawn at. One number, so
+     * the two of them come up over the one span of time and a document row reads none of it.
+     */
+    litAlpha?: number;
+    /** Whether a view rules a line under this row, which every row but the last does. */
+    divider?: boolean;
+    /**
+     * Whether this is the row a view card ends at. A view draws no padding under
+     * its rows, so the last one meets the card's bottom border and takes the two
+     * corners it is rounded by, or its square tint would stand outside them.
+     */
+    last?: boolean;
     y: number;
     width: number;
     selected: boolean;

package/dist/components/erd/canvas/table/goToErd.d.ts

@@ -0,0 +1,18 @@
+import { GeneratorAction } from '../../../../engine/generator.actions';
+import { RxStore } from '../../../../engine/rx-store';
+/**
+ * Stands the reader on one table in the document, selected, scrolled to the
+ * middle of the screen at the document's own zoom unless it is already on
+ * screen whole, since that scroll is the one change the host hears of. One that is gone is passed over.
+ */
+export declare const showErdTableAction$: (tableId: string) => GeneratorAction;
+/**
+ * The Go to ERD button's whole errand: the tab in one dispatch, the scroll and
+ * the selection in a second. A batch is classified by the state before it, so
+ * a scroll travelling with the tab change would be redirected into the view it leaves.
+ *
+ * @example
+ * goToErdTable(store, 'orders');
+ */
+export declare function goToErdTable(store: RxStore, tableId: string): void;
+//# sourceMappingURL=goToErd.d.ts.map

package/dist/components/erd/canvas/table/useMoveTable.d.ts

@@ -1,7 +1,9 @@
+import { Ref } from '@dineug/r-html';
 import { Ctx, Table } from '../../../../internal-types';
+import { GeometrySource } from '../../../../utils/draw-relationship/geometrySource';
 export declare function useMoveTable(ctx: Ctx, props: {
     table: Table;
-}): {
+}, source: Ref<GeometrySource>): {
     onMoveStart: (event: import('../sceneTokens').ScenePointerEvent) => void;
 };
 //# sourceMappingURL=useMoveTable.d.ts.map

package/dist/components/erd/canvas/table/useViewPin.d.ts

@@ -0,0 +1,19 @@
+import { Ref } from '@dineug/r-html';
+import { AppContext } from '../../../appContext';
+import { ScenePointerEvent } from '../sceneTokens';
+import { Table } from '../../../../internal-types';
+import { GeometrySource } from '../../../../utils/draw-relationship/geometrySource';
+/**
+ * The click a view scene takes on a table: pressed with the main button and
+ * lifted without moving and without the modifier. It pins the highlight on
+ * that table, and a second click on the same one lets it go. Documents take none.
+ *
+ * @example
+ * const pin = useViewPin(app, props, sourceRef);
+ */
+export declare function useViewPin(app: Ref<AppContext>, props: {
+    table: Table;
+}, source: Ref<GeometrySource>): {
+    onPress: (event: ScenePointerEvent) => void;
+};
+//# sourceMappingURL=useViewPin.d.ts.map

package/dist/components/erd/canvas/useMoveEntity.d.ts

@@ -1,12 +1,19 @@
+import { Ref } from '@dineug/r-html';
 import { ScenePointerEvent } from './sceneTokens';
 import { SelectType } from '../../../engine/modules/editor/state';
 import { Ctx } from '../../../internal-types';
+import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
 export type MoveEntityOptions = {
     /** Read late, because repeat hands a component a new entity in place. */
     entityId: () => string;
     selectType: SelectType;
-    /** The scene kinds a drag never starts from, as closest read their classes. */
-    blockedKinds: readonly string[];
+    /** The scene kinds a drag never starts from in the scene pressed, as closest read their classes. */
+    blockedKinds: (source: GeometrySource) => readonly string[];
+    /**
+     * The scene the component already stands in, handed down rather than read
+     * again here, so a leaf pays for one context subscription and not two.
+     */
+    source: Ref<GeometrySource>;
 };
 /**
  * The pointer start every draggable entity shares: select it, hand an Alt drag

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

@@ -3,7 +3,7 @@ export type ContentCompassProps = {};
 /**
  * The one thing on a screen that has been panned off every table and memo: an
  * arrow at the nearest of them, how far off it lies, and a press that puts it
- * back in the middle of the screen.
+ * back in the middle. A pill of its own, for the diff viewer, which draws no bar to carry one.
  */
 declare const ContentCompass: FC<ContentCompassProps>;
 export default ContentCompass;

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