@dineug/erd-editor 3.7.0 → 3.9.0

package/README.md

@@ -138,7 +138,7 @@ erd-editor {
 
 | Method | Description |
 | --- | --- |
-| `setInitialValue(value: string)` | Load the initial document. Does not create a history entry. |
+| `setInitialValue(value: string)` | Load the initial document. Does not create a history entry, and clears the undo history, so nothing done before the load can be undone or redone onto it. |
 | `getSchemaSQL(vendor?)` | Export DDL. `vendor` is one of `Databricks`, `MariaDB`, `MSSQL`, `MySQL`, `Oracle`, `PostgreSQL`, `Snowflake`, `SQLite`; omit it to use the document's own setting. |
 | `setSchemaSQL(value: string)` | Parse a DDL string and **replace** the current document with it. Lands in the undo history; an empty string is ignored. |
 | `setSchemaGraphQL(value: string)` | Parse a GraphQL SDL string and **replace** the current document with it. Object types become tables, scalars map to the document's own dialect, and relationships are read from the fields that point at another type. Lands in the undo history; an empty string is ignored. |

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,6 @@ 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;

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

@@ -1,5 +1,15 @@
+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
@@ -9,4 +19,5 @@ import { ElkLayoutPoint, ElkPlacement } from '../../../services/elk-layout';
  * 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/column-drag-ghost/ColumnDragGhost.d.ts

@@ -0,0 +1,10 @@
+import { FC } from '@dineug/r-html';
+export type ColumnDragGhostProps = {};
+/**
+ * The rows a column drag carries, drawn on the presence layer under the
+ * pointer where the browser used to hang its drag image. Each keeps its name
+ * and type where its table lays them out, and none of it answers a hit.
+ */
+declare const ColumnDragGhost: FC<ColumnDragGhostProps>;
+export default ColumnDragGhost;
+//# sourceMappingURL=ColumnDragGhost.d.ts.map

package/dist/components/erd/canvas/column-drag-ghost/columnDragPointer.d.ts

@@ -0,0 +1,28 @@
+import { RootState } from '../../../../engine/state';
+import { Point, Table } from '../../../../internal-types';
+/**
+ * The pointer a column drag holds, in canvas units: where it is, where it took
+ * the rows it carries, and whether a drop target is under it right now.
+ */
+export type ColumnDragPointer = {
+    x: number;
+    y: number;
+    /** The pointer's offset from the top left of the rows it carries. */
+    grabX: number;
+    grabY: number;
+    over: boolean;
+};
+/**
+ * Takes hold of the rows a drag carries at the press on one of them. The ghost
+ * stacks them in drag order, so the pressed row sits that many rows down it.
+ */
+export declare function beginColumnDragPointer(root: RootState, table: Table, press: Point, { columnId, columnIds }: {
+    columnId: string;
+    columnIds: string[];
+}): void;
+/** Follows the pointer of a drag that began, and ignores one that never did. */
+export declare function moveColumnDragPointer(root: RootState, { x, y }: Point, over: boolean): void;
+export declare function endColumnDragPointer(root: RootState): void;
+/** Reads the pointer through the observable, so a render tracks it. */
+export declare function getColumnDragPointer(root: RootState): ColumnDragPointer | null;
+//# sourceMappingURL=columnDragPointer.d.ts.map

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
@@ -36,12 +46,38 @@ export declare const HIGH_LEVEL_FONT_SIZES: readonly [20, 24, 28, 35, 60];
 export declare const TABLE_INSET: number;
 /** The radius Table.styles rounds a table box with. */
 export declare const TABLE_CORNER_RADIUS = 6;
-/** The min-height Table.styles gives the colour bar across a table header. */
-export declare const HEADER_COLOR_HEIGHT = 4;
 /** The 1.5px underline EditInput draws for a focused, edited or shared cell. */
 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, deeper than any a document box casts.
+ * The alpha is the shadow's own, since the minimap shadow token it borrows is
+ * an opaque black.
+ */
+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;
+/** A drop shadow as the five konva shadow attrs a body sets from it. */
+export type CardShadow = {
+    color: string;
+    blur: number;
+    offsetX: number;
+    offsetY: number;
+    opacity: number;
+};
+/** The shadow a view card casts, in the colour of the token it borrows. */
+export declare function viewCardShadow(color: string): CardShadow;
+export declare const DOCUMENT_CARD_SHADOW_BLUR = 10;
+export declare const DOCUMENT_CARD_SHADOW_OFFSET_Y = 2;
+/**
+ * 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. */
@@ -51,6 +87,12 @@ export declare const TRANSPARENT = "transparent";
  * keeps the whole padded box clickable the way its div did.
  */
 export declare const HIT_FILL = "transparent";
+/**
+ * The shadow a document table or memo casts, in a colour carrying its alpha. No
+ * shadow sets no attr at all, so the canvas never spends a blur on nothing, and
+ * a scene with no theme above it reads every token as undefined.
+ */
+export declare function documentCardShadow(color: string | undefined): CardShadow | null;
 /** The hand a clickable scene node asks for, as the dom scene spelt it in css. */
 export declare const CURSOR_POINTER = "pointer";
 /** The beam a textarea carried on its own, which a drawn body has to ask for. */
@@ -60,9 +102,19 @@ export declare const CURSOR_INHERIT = "";
 /**
  * Points the stage container at a cursor. A konva node carries none of its own,
  * so the container is where the css the dom scene put on an element now lives.
+ * Under a hold the cursor is only noted, for the release to write back.
  *
  * @example
  * on:mouseenter={(event) => setSceneCursor(event, CURSOR_POINTER)}
  */
 export declare function setSceneCursor(event: ScenePointerEvent, cursor: string): void;
+/**
+ * Keeps the container on a cursor for a mouse gesture, whatever the pointer runs
+ * over, and hands back the release that shows what the last hover asked for. A
+ * touch has no cursor to keep, so its press holds nothing.
+ *
+ * @example
+ * drag$.subscribe(handleMove).add(holdSceneCursor(event, 'ew-resize'));
+ */
+export declare function holdSceneCursor(event: ScenePointerEvent, cursor: string): () => void;
 //# sourceMappingURL=sceneTokens.d.ts.map

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 band starts
+ * at the top border, over the card's top padding, and keeps its own room over
+ * the line; a view sets its icon line inside that padding instead.
+ */
+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.
+ * The name and comment boxes past a header's table icon. One list feeds the
+ * scene that draws them and the overlay that edits them, so an editor never
+ * sits 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/colorEdge.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The svg path of the colour a table wears along its left edge: the part of
+ * the card's outline left of the strip's width, so it follows both rounded
+ * corners where a rect that narrow could only round its own.
+ *
+ * @example
+ * <k-path data={getColorEdgePath(rect.height)} fill={table.ui.color} />
+ */
+export declare function getColorEdgePath(height: number): string;
+//# sourceMappingURL=colorEdge.d.ts.map

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

@@ -1,8 +1,43 @@
 import { FC } from '@dineug/r-html';
 import { SceneMouseEvent } from '../../sceneTokens';
+import { DiffPaths } from '../../../diff-viewer/diff';
 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;
+    /**
+     * What the diff pane this row is drawn in changed of its column, which tints
+     * those cells. A prop for the reason source is one, and null outside a pane.
+     */
+    diffPaths?: DiffPaths | null;
+    /**
+     * 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 the card rules a line under this row. A view card rules one under
+     * every row but the last, and a document table rules none.
+     */
+    divider?: boolean;
+    /**
+     * Whether this is the row a card ends at. A card 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,25 @@
+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 kinds whose press is a click as well: the drag waits for the pointer
+     * to travel before it lifts the entity into the drag layer, which takes it
+     * off the hit canvas, so a click or a double click there lands where it pressed.
+     */
+    clickKinds?: (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;