@dineug/erd-editor 3.10.0 → 4.1.0

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

@@ -1,15 +1,5 @@
-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
@@ -19,5 +9,4 @@ export declare const PlacingToast: FC<PlacingToastProps>;
  * 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/DiffOutline.template.d.ts

@@ -0,0 +1,14 @@
+/** @jsxHost konva */
+export type DiffOutlineOptions = {
+    name: string;
+    stroke: string | null;
+    width: number;
+    height: number;
+    cornerRadius: number;
+};
+/**
+ * The outline a diff pane draws round a box standing at its group's origin,
+ * centred on the box's edge and taking no press; none while stroke is null.
+ */
+export declare const diffOutlineRect: ({ name, stroke, width, height, cornerRadius, }: DiffOutlineOptions) => import("@dineug/r-html/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DiffOutline.template.d.ts.map

package/dist/components/erd/canvas/SceneIcon.template.d.ts

@@ -15,8 +15,8 @@ export type SceneIconOptions = {
 };
 /**
  * A lucide icon drawn at size, by scaling its own 24 unit box. The scale carries
- * the stroke with it, which is what keeps the weight the same as the svg the DOM
- * scene rendered at that size.
+ * the stroke with it, which keeps the weight of the svg the DOM scene drew, and
+ * a click answers the main button alone (mainButtonClick).
  */
 export declare function sceneIcon({ icon, name, kind, size, color, x, y, click, mouseenter, mouseleave, }: SceneIconOptions): DOMTemplateLiterals | null;
 //# sourceMappingURL=SceneIcon.template.d.ts.map

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

@@ -1,8 +1,24 @@
+import { HeldTableGroupBoxes } from '../../../engine/modules/table-group/generator.actions';
 import { RootState } from '../../../engine/state';
 import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
-/** Raises the flag and holds the scene's view as it stands until endEntityDrag. */
+/**
+ * Raises the flag, holds the scene's view as it stands until endEntityDrag,
+ * and, in the document while groups show, the box each group shows.
+ */
 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, source?: GeometrySource): boolean;
+/**
+ * Marks the drag as past the click distance from its press, after which its
+ * drop is judged and a drop target shown: a tremor short of it changes no group.
+ */
+export declare function markEntityDragTravelled(root: RootState, source?: GeometrySource): void;
+/** Whether the drag the scene holds has travelled the click distance, tracked as the flag is. */
+export declare function hasEntityDragTravelled(root: RootState, source?: GeometrySource): boolean;
+/**
+ * The box each group showed as the scene's drag began, or null while no drag
+ * holds it: what a group the drag leaves standing is drawn and judged in.
+ */
+export declare function getHeldTableGroupBoxes(root: RootState, source?: GeometrySource): HeldTableGroupBoxes | null;
 //# sourceMappingURL=entityDrag.d.ts.map

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

@@ -0,0 +1,11 @@
+import { DragMove } from '../../../utils/globalEventObservable';
+/**
+ * Takes a middle press anywhere in a stage container as a pan, heard in the
+ * capture phase before konva or the scene root, and prevents its lift wherever
+ * it lands: nothing selects, drags or clicks, and nothing autoscrolls or pastes.
+ *
+ * @example
+ * addUnsubscribe(listenMiddleButtonPan(container, handleMove, handlePress));
+ */
+export declare function listenMiddleButtonPan(container: HTMLElement, onMove: (move: DragMove) => void, onPress?: () => void): () => void;
+//# sourceMappingURL=middleButtonPan.d.ts.map

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

@@ -3,6 +3,15 @@ import { KonvaEventObject } from 'konva/lib/Node';
 export type SceneMouseEvent = KonvaEventObject<MouseEvent>;
 export type SceneTouchEvent = KonvaEventObject<TouchEvent>;
 export type ScenePointerEvent = SceneMouseEvent | SceneTouchEvent;
+/**
+ * The click listener of a scene button, which acts on the main button alone:
+ * konva makes a click of any button's press and lift, and a right click is the
+ * context menu's. A Mac control click is the main button, so it still acts.
+ *
+ * @example
+ * on:click={mainButtonClick(handleRemove)}
+ */
+export declare const mainButtonClick: (click: (event: SceneMouseEvent) => void) => (event: SceneMouseEvent) => void;
 /**
  * The face utils/text.ts measures a string with. Drawing in anything else would
  * make a cell wider or narrower than the width the layout reserved for it.
@@ -50,6 +59,8 @@ export declare const TABLE_CORNER_RADIUS = 6;
 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 outline a diff pane draws round an entity added, removed or only moved. */
+export declare const DIFF_OUTLINE_WIDTH = 2;
 /**
  * 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
@@ -78,6 +89,22 @@ export declare const DOCUMENT_CARD_SHADOW_OFFSET_Y = 2;
  */
 export declare const VIEW_CARD_GLOW_BLUR = 14;
 export declare const VIEW_CARD_GLOW_OPACITY = 0.55;
+/**
+ * How much of its color a table group's body shows, the canvas and the
+ * connectors over it reading through.
+ */
+export declare const TABLE_GROUP_FILL_OPACITY = 0.12;
+/** The radius a table group's box is rounded with, a table's own. */
+export declare const TABLE_GROUP_CORNER_RADIUS = 6;
+/** The room a table group's name keeps from each end of its title bar, the name editor's too. */
+export declare const TABLE_GROUP_TITLE_PADDING = 8;
+/** The weight a table group's name is drawn and edited at, a heading over the tables' own names. */
+export declare const TABLE_GROUP_TITLE_FONT_WEIGHT = "bold";
+/**
+ * The line a table drag outlines the group its drop would join with, twice
+ * the box's own line so it reads apart from the selection.
+ */
+export declare const TABLE_GROUP_DROP_WIDTH = 2;
 /** 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. */
@@ -108,6 +135,19 @@ export declare const CURSOR_INHERIT = "";
  * on:mouseenter={(event) => setSceneCursor(event, CURSOR_POINTER)}
  */
 export declare function setSceneCursor(event: ScenePointerEvent, cursor: string): void;
+/**
+ * The cursors one scene component asks for, so a node unmounted from under the pointer, which konva
+ * sends no leave for, hands the container back the cursor it took: release writes CURSOR_INHERIT
+ * once, unless the last cursor the component asked for already was.
+ *
+ * @example
+ * const cursor = createSceneCursorScope();
+ * onUnmounted(cursor.release);
+ */
+export declare function createSceneCursorScope(): {
+    set(event: ScenePointerEvent, cursor: string): void;
+    release(): 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

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

@@ -2,7 +2,10 @@ import { FC } from '@dineug/r-html';
 import { Table } from '../../../../internal-types';
 export type TableProps = {
     table: Table;
-    /** A drawn copy rather than the table itself, so nothing in it takes an id. */
+    /**
+     * A drawn copy rather than the table itself, so nothing in it takes an id,
+     * and no group color either: a copy, a duplicate's, lands in no group.
+     */
     preview?: boolean;
     hovered?: boolean;
     hoveredColumnId?: string | null;
@@ -17,6 +20,11 @@ export type TableProps = {
      * by the scene, which walks the document's links once for every card it draws.
      */
     relatedColumnIds?: Set<string> | null;
+    /**
+     * The group whose color the header wears, '' for none, named by a scene that
+     * reads the group list once for every table; a table drawn alone reads its own.
+     */
+    tableGroupId?: string;
 };
 declare const Table: FC<TableProps>;
 export default Table;

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

@@ -1,10 +1,9 @@
 import { SceneMouseEvent } from '../sceneTokens';
-import { FocusType } from '../../../../engine/modules/editor/state';
 export type DoubleClickGuard = {
-    /** Records the cell a click opened a pair on. */
-    track(cell: FocusType, event: SceneMouseEvent): void;
+    /** Records the cell, or a group's part, a click opened a pair on. */
+    track(cell: string, event: SceneMouseEvent): void;
     /** Whether a konva dblclick closes a pair that began on this same cell. */
-    isDouble(cell: FocusType, event: SceneMouseEvent): boolean;
+    isDouble(cell: string, event: SceneMouseEvent): boolean;
 };
 /**
  * Tells a real double click from the one konva invents. Konva fires dblclick on

package/dist/components/erd/canvas/table-group/TableGroup.d.ts

@@ -0,0 +1,17 @@
+import { FC } from '@dineug/r-html';
+import { TableGroupLinks } from './tableGroupBox';
+import { Table, TableGroup } from '../../../../internal-types';
+export type TableGroupProps = {
+    group: TableGroup;
+    /** The group's member tables, read once for every group by TableGroups. */
+    members: ReadonlyArray<Table>;
+    links: TableGroupLinks;
+};
+/**
+ * A group's frame over its body (TableGroupBody), in getDrawnTableGroupRect's box: a title bar with
+ * the group icon, the name and the remove button, one line around the box, the peer ring and the
+ * sashes, in the theme's group colors with no color it reads.
+ */
+declare const TableGroup: FC<TableGroupProps>;
+export default TableGroup;
+//# sourceMappingURL=TableGroup.d.ts.map

package/dist/components/erd/canvas/table-group/TableGroupBody.d.ts

@@ -0,0 +1,17 @@
+import { FC } from '@dineug/r-html';
+import { TableGroupLinks } from './tableGroupBox';
+import { Table, TableGroup } from '../../../../internal-types';
+export type TableGroupBodyProps = {
+    group: TableGroup;
+    /** The group's member tables, read once for every group by TableGroups. */
+    members: ReadonlyArray<Table>;
+    links: TableGroupLinks;
+};
+/**
+ * A group's body under its bar, in its color at a low alpha or the theme's group body (alpha its own),
+ * drawn before every frame, so no body stands over another group's bar. The main button reads it as
+ * the canvas under it, so only another button selects the group there, for the menu it opens.
+ */
+declare const TableGroupBody: FC<TableGroupBodyProps>;
+export default TableGroupBody;
+//# sourceMappingURL=TableGroupBody.d.ts.map

package/dist/components/erd/canvas/table-group/TableGroupDropTarget.d.ts

@@ -0,0 +1,10 @@
+import { FC } from '@dineug/r-html';
+export type TableGroupDropTargetProps = {};
+/**
+ * The outline of each group a table drag would drop a table into, in the focus color, over the
+ * static scene and under the dragged tables, in the box the drop is judged in; nothing where the
+ * drop would put every table in none, nor short of the click distance, where it judges none.
+ */
+declare const TableGroupDropTarget: FC<TableGroupDropTargetProps>;
+export default TableGroupDropTarget;
+//# sourceMappingURL=TableGroupDropTarget.d.ts.map

package/dist/components/erd/canvas/table-group/TableGroupSash.d.ts

@@ -0,0 +1,35 @@
+import { FC } from '@dineug/r-html';
+import { TableGroup, ValuesType } from '../../../../internal-types';
+import { Rect } from '../../../../konva/scene/metrics';
+export declare const TableGroupSashPosition: {
+    readonly left: "left";
+    readonly right: "right";
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly lt: "lt";
+    readonly rt: "rt";
+    readonly lb: "lb";
+    readonly rb: "rb";
+};
+export type TableGroupSashPosition = ValuesType<typeof TableGroupSashPosition>;
+/**
+ * The box a sash drag leaves, the edges it grabs moved by the drag in scene
+ * units: never smaller than the minimum, nor than the members' padded box,
+ * which the edge stops at however far past it the pointer goes.
+ */
+export declare function resizeTableGroupRect(start: Rect, members: Rect | null, position: TableGroupSashPosition, movementX: number, movementY: number): Rect;
+export type TableGroupSashProps = {
+    group: TableGroup;
+    /** The box the group is drawn in, in scene units; the sashes sit on its edges. */
+    box: Rect;
+    /** Takes each step's box to draw, and null once the drag is over. */
+    onDraft: (rect: Rect | null) => void;
+};
+/**
+ * The eight resize handles on a group's edges and corners, selected or not, as a memo's are. A drag
+ * draws its steps without writing them and writes one resize as it ends, so
+ * peers hear one write and one undo puts back the rect it started from.
+ */
+declare const TableGroupSash: FC<TableGroupSashProps>;
+export default TableGroupSash;
+//# sourceMappingURL=TableGroupSash.d.ts.map

package/dist/components/erd/canvas/table-group/TableGroups.d.ts

@@ -0,0 +1,10 @@
+import { FC } from '@dineug/r-html';
+export type TableGroupsProps = {};
+/**
+ * The document's groups by zIndex in two passes, every body before every frame, so a group's bar
+ * and sashes stand over every body: a large group drawn over a smaller one it holds leaves the
+ * inner bar to its own group. A scene mounts it while groups show; it reads the list itself.
+ */
+declare const TableGroups: FC<TableGroupsProps>;
+export default TableGroups;
+//# sourceMappingURL=TableGroups.d.ts.map

package/dist/components/erd/canvas/table-group/tableGroupBox.d.ts

@@ -0,0 +1,40 @@
+import { DoubleClickGuard } from '../table/doubleClick';
+import { RootState } from '../../../../engine/state';
+import { Table, TableGroup } from '../../../../internal-types';
+import { Rect } from '../../../../konva/scene/metrics';
+import { GeometrySource } from '../../../../utils/draw-relationship/geometrySource';
+/**
+ * The box a group is drawn in, on the canvas and the minimap: getTableGroupRect's, and while a drag
+ * holds the scene and leaves the group standing, the box it held as the drag began with the members
+ * left standing, so it neither shrinks under a member lifted out nor stretches after one carried off.
+ *
+ * @example
+ * const box = getDrawnTableGroupRect(state, group, source, members);
+ */
+export declare function getDrawnTableGroupRect(state: RootState, group: TableGroup, source: GeometrySource, members: ReadonlyArray<Table>): Rect;
+/** The two nodes a group draws apart, each telling the other whether the pointer is over it. */
+export type TableGroupHoverPart = 'frame' | 'body';
+/**
+ * What a group's body and its frame share, drawn apart in TableGroups' two passes: the box a sash
+ * drag draws until its one resize, the guard telling a double click on the bar from a pair begun on
+ * the body, and whether the pointer is over either, which shows the remove button.
+ */
+export type TableGroupLinks = {
+    draftOf(groupId: string): Rect | null;
+    setDraft(groupId: string, rect: Rect | null): void;
+    guardOf(groupId: string): DoubleClickGuard;
+    isHovered(groupId: string): boolean;
+    setHover(groupId: string, part: TableGroupHoverPart, hovered: boolean): void;
+};
+export declare function createTableGroupLinks(): TableGroupLinks;
+/**
+ * Reads each group's members off one walk over the tables, handing a group the
+ * list it had last time while no member came or went, so a scene render that
+ * moved no membership leaves every group component's props as they were.
+ *
+ * @example
+ * const membersOf = memberLists(state);
+ * membersOf(group.id);
+ */
+export declare function createTableGroupMemberLists(): (state: RootState) => (groupId: string) => ReadonlyArray<Table>;
+//# sourceMappingURL=tableGroupBox.d.ts.map

package/dist/components/erd/canvas/table-group/titleLayout.d.ts

@@ -0,0 +1,45 @@
+/** The group icon before the name, at the table header icon's size and gap. */
+export declare const TABLE_GROUP_ICON_SIZE = 12;
+/** Where the name starts along the title bar, past the icon and its gap. */
+export declare const TABLE_GROUP_NAME_X: number;
+/** The remove button at the end of the bar, at the size of a table header's. */
+export declare const TABLE_GROUP_REMOVE_SIZE = 12;
+/**
+ * The box a group's name is centred in, down from the top of its title bar on
+ * a whole pixel. The scene hands konva this box with verticalAlign middle and
+ * the name editor gives its input the same one, so the two baselines meet.
+ *
+ * @example
+ * const { x, y, width, height } = getTableGroupNameBox(box.width);
+ */
+export declare function getTableGroupNameBox(barWidth?: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * Where the group icon stands on the title bar: the bar's padding in, centred
+ * down the bar on a whole pixel, as the table header centres its icon.
+ *
+ * @example
+ * const { x, y, size } = getTableGroupIconBox();
+ */
+export declare function getTableGroupIconBox(): {
+    x: number;
+    y: number;
+    size: number;
+};
+/**
+ * Where the remove button stands on the title bar: the bar's padding short of
+ * its end, centred down the bar on a whole pixel, as the group icon is.
+ *
+ * @example
+ * const { x, y, size } = getTableGroupRemoveBox(box.width);
+ */
+export declare function getTableGroupRemoveBox(barWidth: number): {
+    x: number;
+    y: number;
+    size: number;
+};
+//# sourceMappingURL=titleLayout.d.ts.map

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

@@ -20,6 +20,8 @@ export type MoveEntityOptions = {
      * again here, so a leaf pays for one context subscription and not two.
      */
     source: Ref<GeometrySource>;
+    /** Read at the press: false leaves it a selection that lifts nothing. */
+    canMove?: () => boolean;
 };
 /**
  * The pointer start every draggable entity shares: select it, hand an Alt drag

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

@@ -0,0 +1,19 @@
+import { FC } from '@dineug/r-html';
+import { AppContext } from '../../../appContext';
+import { DiffEntries } from '../../../../utils/diff';
+export type DiffTreeProps = {
+    prevApp: AppContext;
+    app: AppContext;
+    entries: DiffEntries;
+    /** The width the diff gives the tree, which a drag on its edge asks to change. */
+    width: number;
+    onResize: (width: number) => void;
+};
+/**
+ * What a diff found, on the tree the Explorer draws: the changed entities and
+ * the tables they are in, each named in the colour of what happened to it and
+ * ending on its status letter. A row takes either pane to its entity.
+ */
+declare const DiffTree: FC<DiffTreeProps>;
+export default DiffTree;
+//# sourceMappingURL=DiffTree.d.ts.map

package/dist/components/erd/diff-viewer/diff-tree/DiffTree.styles.d.ts

@@ -0,0 +1,12 @@
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const header: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const filter: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const body: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const empty: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const sash: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const rowIcon: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const name: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const count: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const status: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const visuallyHidden: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=DiffTree.styles.d.ts.map

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

@@ -0,0 +1,49 @@
+import { ErdTarget } from '../../goToErdTarget';
+import { TreeNode } from '../../../primitives/tree/treeModel';
+import { I18n } from '../../../../i18n/translate';
+import { DiffEntries, DiffEntry, DiffStatus } from '../../../../utils/diff';
+export type DiffFolder = 'tables' | 'tableGroups' | 'memos' | 'columns' | 'indexes' | 'foreignKeys';
+/** What one row of the diff tree stands for: a folder, or an entry with the table it is in. */
+export type DiffTreeItem = {
+    kind: 'folder';
+    folder: DiffFolder;
+    count: number;
+} | {
+    kind: 'entry';
+    entry: DiffEntry;
+    table: DiffEntry | null;
+};
+export type DiffTreeNode = TreeNode<DiffTreeItem>;
+export type DiffTree = {
+    roots: DiffTreeNode[];
+    /** Every row with children, which the tree shows open unless folded. */
+    branchIds: string[];
+};
+/** A row's id: the current entity's, or the saved one's where it is gone. */
+export declare const entryNodeId: (entry: DiffEntry) => string;
+/** Whether a name filter keeps an entry: its current name or the saved one holds what is typed, in any case. */
+export declare function matchesFilter(entry: DiffEntry, filter: string): boolean;
+/**
+ * The tree a diff lists: Tables, Table Groups and Memos as the Explorer has
+ * them, holding what changed and the tables what changed is in, and only what
+ * the name filter keeps. Every row with children shows open to begin with.
+ */
+export declare function buildDiffTree(entries: DiffEntries, filter?: string): DiffTree;
+/** The letter a row ends on: its status, or a tilde for a row listed only for what it holds. */
+export declare function statusLetter(item: DiffTreeItem): string;
+export declare const statusLabel: (status: DiffStatus | null, { t }: Pick<I18n, "t">) => string;
+/** How long a text a tooltip line quotes may run before it is cut. */
+export declare const QUOTE_LIMIT = 40;
+/** The tooltip of a row: what it is, then each change as before → after, one a line. */
+export declare function describeEntry(entry: DiffEntry, i18n: Pick<I18n, 't'>): string;
+export type DiffTargets = {
+    prev: ErdTarget | null;
+    next: ErdTarget | null;
+};
+/**
+ * Where a row takes each pane: an added entity the current pane alone, a
+ * removed one the saved pane alone, and anything both hold both; a column or
+ * an index its table, and a folder neither.
+ */
+export declare function diffTargets(item: DiffTreeItem): DiffTargets;
+//# sourceMappingURL=diffTreeModel.d.ts.map

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

@@ -1,27 +1,29 @@
-import { RootState } from '../../../engine/state';
-import { Column, Table } from '../../../internal-types';
 import { Theme } from '../../../themes/tokens';
-/**
- * Map<uuid, [tag, Map<path, diff>]>
- */
-export type DiffMap = Map<string, DiffTuple>;
-/** Map<path, diff> for one entity, each path spelled as the FocusType of the cell showing it. */
-export type DiffPaths = Map<string, number>;
-type DiffTuple = [string, DiffPaths];
-type NameToTableMap = Map<string, {
-    table: Table;
-    nameToColumnMap: Map<string, Column>;
-}>;
+/** The kinds of change a diff pane marks, one bit each. */
 export declare const Diff: {
     readonly insert: 1;
     readonly delete: 2;
+    readonly modify: 4;
+    readonly rename: 8;
 };
-export declare function diffState(prevState: RootState, state: RootState): [DiffMap, DiffMap];
-export declare function getNameToTableMap({ doc: { tableIds }, collections, }: RootState): NameToTableMap;
 /**
- * The background a cell of one entity sits on in a diff pane: the insert or the
- * delete colour its own path carries, and null for a path that did not change.
+ * Map<path, diff> for one entity: a cell's path is the FocusType of the cell
+ * showing it, and ENTITY_PATH stands for the entity as a whole.
+ */
+export type DiffPaths = Map<string, number>;
+/** Map<id, paths> for the entities one pane marks. */
+export type DiffMap = Map<string, DiffPaths>;
+/** An entity added or removed, or one only moved, resized, recoloured or regrouped. */
+export declare const ENTITY_PATH = "entity";
+export declare const MEMO_VALUE_PATH = "memoValue";
+/** A column's primary key, which its key icon shows. */
+export declare const COLUMN_KEY_PATH = "columnPrimaryKey";
+export declare const TABLE_GROUP_NAME_PATH = "tableGroupName";
+/**
+ * The colour a cell's text takes in a diff pane: its own change's, else, in a
+ * row, the row's as a whole; null where neither changed.
  */
-export declare function diffFill(theme: Theme, paths: DiffPaths | null | undefined, path: string): string | null;
-export {};
+export declare function diffTextColor(theme: Theme, paths: DiffPaths | null | undefined, path: string, row?: boolean): string | null;
+/** The outline an entity takes in a diff pane, or the colour of a line; null for none. */
+export declare function diffOutline(theme: Theme, paths: DiffPaths | null | undefined): string | null;
 //# sourceMappingURL=diff.d.ts.map

package/dist/components/erd/draw-target/DrawTargetButtons.d.ts

@@ -0,0 +1,16 @@
+import { FC, Ref } from '@dineug/r-html';
+import { PillSize } from './placePill';
+export type DrawTargetButtonsProps = {
+    root: Ref<HTMLDivElement>;
+    readonly: boolean;
+};
+/** The pill at the size the stylesheet gives it: two buttons, the gap and the padding. */
+export declare const PILL_SIZE: PillSize;
+/**
+ * The two buttons beside the table a relationship is drawn to: one maps the
+ * parent's key to columns the child already has, the other adds new ones as a
+ * press on the table does. A layer of the document canvas, never of a view.
+ */
+declare const DrawTargetButtons: FC<DrawTargetButtonsProps>;
+export default DrawTargetButtons;
+//# sourceMappingURL=DrawTargetButtons.d.ts.map

package/dist/components/erd/draw-target/DrawTargetButtons.styles.d.ts

@@ -0,0 +1,14 @@
+/** The buttons' own size on screen at any zoom, read by the placement too. */
+export declare const PILL_BUTTON = 26;
+export declare const PILL_PADDING = 4;
+export declare const PILL_BORDER = 1;
+export declare const PILL_GAP = 2;
+/** The canvas-sized layer the outline, the gutter and the buttons stand in. */
+export declare const layer: import('@dineug/r-html').CSSTemplateLiterals;
+/** The table the buttons act on, outlined in the colour of the draw's preview line. */
+export declare const outline: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const gutter: import('@dineug/r-html').CSSTemplateLiterals;
+/** The floating toolbar's pill, stood on its end. */
+export declare const pill: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const button: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=DrawTargetButtons.styles.d.ts.map

package/dist/components/erd/draw-target/drawTargetState.d.ts

@@ -0,0 +1,26 @@
+import { RootState } from '../../../engine/state';
+import { Point } from '../../../internal-types';
+/**
+ * What the buttons beside the table a relationship is drawn to follow, in
+ * screen pixels from the top left of the editor's canvas root.
+ */
+export type DrawTarget = {
+    /** Where the pointer last stood over the canvas, or null once it left. */
+    pointer: Point | null;
+    /** The press that picked the table the draw starts from. */
+    pressPoint: Point | null;
+    /** Whether the pointer has travelled far enough from that press for the start table to offer the buttons too. */
+    selfArmed: boolean;
+    /** The table the pointer points the draw at. */
+    targetId: string | null;
+};
+/** Reads the record through the observable, so a render or an observer tracks it. */
+export declare function getDrawTarget(root: RootState): Readonly<DrawTarget>;
+/**
+ * Writes the fields given and leaves the rest, each only when it changes, so an
+ * observer that reads a field and writes the value it read settles at once.
+ */
+export declare function updateDrawTarget(root: RootState, patch: Partial<DrawTarget>): void;
+/** Forgets everything the draw held, as it ends or the canvas goes away. */
+export declare function clearDrawTarget(root: RootState): void;
+//# sourceMappingURL=drawTargetState.d.ts.map

package/dist/components/erd/draw-target/findDrawTarget.d.ts

@@ -0,0 +1,29 @@
+import { RootState } from '../../../engine/state';
+import { Point } from '../../../internal-types';
+import { Rect } from '../../../konva/scene/metrics';
+/**
+ * How far the pointer travels from the press that started a draw, in screen
+ * pixels whatever the zoom, before the table the draw starts from offers the
+ * buttons too: a press there sooner draws a self reference as it always has.
+ */
+export declare const SELF_REFERENCE_TRAVEL = 24;
+export declare const hasTravelled: (from: Point, to: Point) => boolean;
+/** Edges included, so a point on a border belongs to the box it bounds. */
+export declare const containsPoint: (rect: Rect, { x, y }: Point) => boolean;
+export type DrawTargetQuery = {
+    /** The pointer in screen pixels from the top left of the canvas root. */
+    pointer: Point;
+    startTableId: string;
+    selfArmed: boolean;
+    /** The table the buttons stand beside now. */
+    current: string | null;
+    /** The buttons and the gutter beside them, in screen pixels, over which the current table stays. */
+    keep: readonly Rect[];
+};
+/**
+ * The table a press under the pointer would draw to, by arithmetic, since konva
+ * raises no hover at a low zoom or over the buttons: top first, the reverse of
+ * the canvas's paint order, and none under a memo drawn over it, which takes the press.
+ */
+export declare function findDrawTarget(state: RootState, { pointer, startTableId, selfArmed, current, keep }: DrawTargetQuery): string | null;
+//# sourceMappingURL=findDrawTarget.d.ts.map