@dineug/erd-editor 3.4.0 → 3.5.0

package/dist/components/appContext.d.ts

@@ -17,7 +17,14 @@ export type AppContext = EngineContext & {
     emitter: Emitter;
 };
 export type InjectAppContext = InjectEngineContext;
-export declare function createAppContext(ctx: InjectAppContext, options?: RxStoreOptions): AppContext;
+export type AppContextOptions = RxStoreOptions & {
+    /**
+     * Whether a dev build connects the store to the redux devtools extension. Off
+     * for a store built where there is no window to look the extension up on.
+     */
+    devtools?: boolean;
+};
+export declare function createAppContext(ctx: InjectAppContext, options?: AppContextOptions): AppContext;
 export declare const appContext: import('@dineug/r-html').Context<AppContext>;
 export declare const useAppContext: (ctx: Ctx, fallback?: AppContext) => import('@dineug/r-html').Ref<AppContext>;
 export declare function appDestroy(app: AppContext): void;

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

@@ -7,5 +7,21 @@ type Node = {
     y: number;
     ref: Table;
 };
-export declare function createAutomaticTablePlacement(state: RootState): import('d3').Simulation<Node, undefined>;
+/** The two readings of a simulation's heat that its progress is taken from. */
+type Cooling = {
+    alpha(): number;
+    alphaMin(): number;
+};
+/**
+ * How far a placement has run, from 0 to 1. The simulation cools by a fixed
+ * factor a tick until its heat reaches the floor it stops at, so the log of
+ * the heat over the log of that floor is the share of the ticks it will take.
+ *
+ * @example
+ * simulation.on('tick.progress', () => {
+ *   state.progress = placementProgress(simulation);
+ * });
+ */
+export declare function placementProgress(simulation: Cooling): number;
+export declare function createAutomaticTablePlacement(state: RootState): import('d3-force').Simulation<Node, undefined>;
 export {};

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

@@ -4,5 +4,10 @@ export type CanvasProps = {
     canvas: Ref<HTMLDivElement>;
     grabMove?: boolean;
 };
+/**
+ * The dom shell the scene hangs in: a controller box, the Stage container in it
+ * and the editing overlay over that. Scroll and zoom moved onto the scene's
+ * layers, so the shell is viewport sized rather than schema sized.
+ */
 declare const Canvas: FC<CanvasProps>;
 export default Canvas;

package/dist/components/erd/canvas/Canvas.styles.d.ts

@@ -1,2 +1,13 @@
+/**
+ * A document box, painted with the canvas background. The minimap's thumbnail
+ * is one of these; the editor's own document box is a konva rect on the scene's
+ * bottom layer, because the stage container below is the screen, not the box.
+ */
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The stage container, which is viewport sized. It paints nothing of its own so
+ * that the boundary background of whatever holds the editor shows through
+ * wherever the scene has drawn no document.
+ */
+export declare const stage: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const controller: import('@dineug/r-html').CSSTemplateLiterals;

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

@@ -0,0 +1,18 @@
+import { FC, Ref } from '@dineug/r-html';
+import { Stage } from 'konva/lib/Stage';
+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.
+ */
+declare const CanvasScene: FC<CanvasSceneProps>;
+/**
+ * Renders the scene as the root of a Stage. Named in lower case on purpose:
+ * r-html's refresh boundary treats an all-upper-case export list as a component
+ * module and would self-accept this one, which kills hmr for the whole scene.
+ */
+export declare function renderCanvasScene(stage: Stage, props: CanvasSceneProps): void;
+export default CanvasScene;

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

@@ -0,0 +1,8 @@
+import { FC } from '@dineug/r-html';
+/**
+ * The one editing surface over the Stage. A canvas has no caret, no selection
+ * and no IME, so the edited cell hides its konva text and a real input takes
+ * its place, under the same zoom the scene layer carries.
+ */
+declare const EditOverlay: FC;
+export default EditOverlay;

package/dist/components/erd/canvas/EditOverlay.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A cell editor, laid out on the text the scene drew rather than beside it. The
+ * input's own line is centred in the same box konva centred one in, and it
+ * paints no underline of its own: the scene's rect keeps running under it.
+ */
+export declare const cell: import('@dineug/r-html').CSSTemplateLiterals;

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

@@ -0,0 +1,21 @@
+import { DOMTemplateLiterals } from '@dineug/r-html';
+import { SceneMouseEvent } from './sceneTokens';
+import { LucideIconName } from '../../primitives/icon/icons';
+export type SceneIconOptions = {
+    icon: LucideIconName;
+    name: string;
+    kind: string;
+    size: number;
+    color: string;
+    x: number;
+    y: number;
+    click?: (event: SceneMouseEvent) => void;
+    mouseenter?: (event: SceneMouseEvent) => void;
+    mouseleave?: (event: SceneMouseEvent) => void;
+};
+/**
+ * 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.
+ */
+export declare function sceneIcon({ icon, name, kind, size, color, x, y, click, mouseenter, mouseleave, }: SceneIconOptions): DOMTemplateLiterals | null;

package/dist/components/erd/canvas/drag-select/DragSelect.d.ts

@@ -0,0 +1,11 @@
+import { FC, Ref } from '@dineug/r-html';
+export type DragSelectProps = {
+    root: Ref<HTMLDivElement>;
+};
+/**
+ * The marquee, drawn in the screen space its own mousemove measures against the
+ * erd root. Its home is the overlay layer the canvas leaves untransformed, so
+ * these are the numbers the DOM version wrote into left and top.
+ */
+declare const DragSelect: FC<DragSelectProps>;
+export default DragSelect;

package/dist/components/erd/canvas/duplicate-ghost/DuplicateGhost.d.ts

@@ -1,4 +1,9 @@
 import { FC } from '@dineug/r-html';
 export type DuplicateGhostProps = {};
+/**
+ * The Alt-drag copies, drawn on the presence layer above the scene. Ghost
+ * geometry is schema coordinates read from table.ui, and the drag delta rides
+ * on the group above them, so both halves compose into the committed offset.
+ */
 declare const DuplicateGhost: FC<DuplicateGhostProps>;
 export default DuplicateGhost;

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

@@ -0,0 +1,4 @@
+export declare function beginEntityDrag(): void;
+export declare function endEntityDrag(): void;
+/** Reads the flag through the observable, so a scene render tracks it. */
+export declare function isEntityDragActive(): boolean;

package/dist/components/erd/canvas/high-level-table/HighLevelTable.d.ts

@@ -2,6 +2,10 @@ import { FC } from '@dineug/r-html';
 import { Table } from '../../../../internal-types';
 export type HighLevelTableProps = {
     table: Table;
+    /** A drawn copy rather than the table itself, so nothing in it takes an id. */
+    preview?: boolean;
+    /** Off while the table is kept built but scrolled out of the culling rect. */
+    visible?: boolean;
 };
 declare const HighLevelTable: FC<HighLevelTableProps>;
 export default HighLevelTable;

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

@@ -2,6 +2,8 @@ import { FC } from '@dineug/r-html';
 import { Memo } from '../../../../internal-types';
 export type MemoProps = {
     memo: Memo;
+    /** A drawn copy rather than the memo itself, so nothing in it takes an id. */
+    preview?: boolean;
 };
 declare const Memo: FC<MemoProps>;
 export default Memo;

package/dist/components/erd/canvas/memo/memo-sash/MemoSash.d.ts

@@ -1,9 +1,19 @@
 import { FC } from '@dineug/r-html';
-import { Memo } from '../../../../../internal-types';
+import { Memo, ValuesType } from '../../../../../internal-types';
 export type MemoSashProps = {
     memo: Memo;
     top: number;
     left: number;
 };
+export declare const MemoSashPosition: {
+    readonly left: "left";
+    readonly right: "right";
+    readonly bottom: "bottom";
+    readonly lt: "lt";
+    readonly rt: "rt";
+    readonly lb: "lb";
+    readonly rb: "rb";
+};
+export type MemoSashPosition = ValuesType<typeof MemoSashPosition>;
 declare const MemoSash: FC<MemoSashProps>;
 export default MemoSash;

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

@@ -0,0 +1,26 @@
+/**
+ * The offset in a memo's editor value that a point in its drawn body falls on,
+ * in the body's own coordinates. Past the last line box a textarea takes the
+ * end of the value whatever x is, which is where an author carries on writing.
+ *
+ * @example
+ * const offset = memoCaretOffsetAt(memo.value, memo.ui.width, 12, 40);
+ */
+export declare function memoCaretOffsetAt(value: string, width: number, x: number, y: number): number;
+/**
+ * Asks the next body editor for this memo to open with its caret here. The
+ * editor is a textarea the click itself mounts, so the point the pointer landed
+ * on is gone by the time it exists and has to be carried across.
+ *
+ * @example
+ * requestMemoCaret(memo.id, memoCaretOffsetAt(memo.value, width, x, y));
+ */
+export declare function requestMemoCaret(memoId: string, offset: number): void;
+/**
+ * The caret asked for, taken once. Anything the pointer did not open, and any
+ * request left over from another memo, opens the body at its start instead.
+ *
+ * @example
+ * const offset = takeMemoCaret(target.memoId);
+ */
+export declare function takeMemoCaret(memoId: string): number;

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

@@ -0,0 +1,28 @@
+import { Editor } from '../../../../engine/modules/editor/state';
+import { Memo } from '../../../../internal-types';
+/**
+ * The furthest a memo body scrolls: what its folded lines overrun the box by,
+ * in body px. A body the box holds whole has nowhere to go, which is where a
+ * textarea of the same box stops too.
+ *
+ * @example
+ * const max = getMemoScrollMax(memo);
+ */
+export declare function getMemoScrollMax(memo: Memo): number;
+/**
+ * A scroll pulled into the travel the body allows. The value, the width and
+ * the height can all change under a stored scroll, so the clamp runs where the
+ * scroll is read rather than where it was written.
+ *
+ * @example
+ * const next = clampMemoScrollTop(memo, scrollTop + event.deltaY);
+ */
+export declare function clampMemoScrollTop(memo: Memo, scrollTop: number): number;
+/**
+ * How far down its body the scene shows a memo from. A memo nothing has
+ * scrolled starts on its first line, as every memo always did.
+ *
+ * @example
+ * const scrollTop = getMemoScrollTop(store.state.editor, memo);
+ */
+export declare function getMemoScrollTop(editor: Editor, memo: Memo): number;

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

@@ -0,0 +1,33 @@
+/** The weight utils/text.ts measures with, which is what the body is drawn in. */
+export declare const MEMO_FONT_WEIGHT = "400";
+/** The css font shorthand the scene text and the overlay editor both resolve to. */
+export declare const MEMO_FONT: string;
+/**
+ * The leading a memo body takes, in px, which a css line-height and pretext
+ * both take. The dom textarea this replaced left it to line-height normal, so
+ * that is the advance, and the only way to it is to lay the lines out.
+ *
+ * @example
+ * const advance = getMemoLineHeightPx();
+ */
+export declare function getMemoLineHeightPx(): number;
+/** The same leading as konva's multiple of the font size, which is what it takes. */
+export declare function getMemoLineHeight(): number;
+/**
+ * The baseline konva draws the first body line on, down from the top of the
+ * text node. A canvas has no line box, so the leading and the canvas metrics
+ * konva itself measures with are the whole of where that line lands.
+ *
+ * @example
+ * const baseline = getMemoTextBaseline();
+ */
+export declare function getMemoTextBaseline(): number;
+/**
+ * The lines a memo body folds into at a box width, the way a textarea folds the
+ * same text. Konva breaks a string by rules of its own, so the scene draws
+ * these lines rather than handing it the value to wrap.
+ *
+ * @example
+ * const text = layoutMemoLines(memo.value, memo.ui.width).join('\n');
+ */
+export declare function layoutMemoLines(value: string, width: number): readonly string[];

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

@@ -0,0 +1,6 @@
+import { Ctx, Memo } from '../../../../internal-types';
+export declare function useMoveMemo(ctx: Ctx, props: {
+    memo: Memo;
+}): {
+    onMoveStart: (event: import('../sceneTokens').ScenePointerEvent) => void;
+};

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

@@ -0,0 +1,15 @@
+import { FC } from '@dineug/r-html';
+import { Relationship as RelationshipType } from '../../../../internal-types';
+import { CullingRect } from '../../../../konva/scene/viewport';
+export type RelationshipGroupProps = {
+    relationships: RelationshipType[];
+    viewport?: CullingRect;
+    strokeWidth?: number;
+};
+/**
+ * Culling lives here, not in the parent, because a route is a side channel of
+ * the sort: a parent that filtered would have to route every connector to learn
+ * where it reaches, which is the work this arrangement avoids.
+ */
+declare const RelationshipGroup: FC<RelationshipGroupProps>;
+export default RelationshipGroup;

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

@@ -0,0 +1,17 @@
+import { DOMTemplateLiterals } from '@dineug/r-html';
+import { Circle, PointToPoint, RelationshipPath } from '../../../../../utils/draw-relationship';
+/**
+ * What every decoration node answers a lookup and an ancestor walk with. Konva
+ * has no class list, so the one token is both.
+ */
+export declare const DECORATION = "relationship-decoration";
+/** Konva takes one flat pair list where svg took four attributes. */
+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;
+/** 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;

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

@@ -0,0 +1,18 @@
+import { Context } from 'konva/lib/Context';
+import { Shape } from 'konva/lib/Shape';
+/** 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.
+ */
+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;
+/**
+ * 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
+ * back at the icon's corner.
+ */
+export declare const iconHit: HitFunc;

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

@@ -0,0 +1,11 @@
+/**
+ * A scene node as an ancestor walk sees it. Konva has no closest, so the routing
+ * climbs from the node an event landed on until a kind attr names one of the
+ * shapes it knows, which is the rule a class selector gave the dom scene.
+ */
+export type SceneKindNode = {
+    getAttr(name: string): any;
+    getParent(): SceneKindNode | null;
+};
+/** Whether the node itself or any ancestor of it carries one of the kinds. */
+export declare function hasKindAncestor(node: SceneKindNode | null | undefined, kinds: readonly string[]): boolean;

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

@@ -0,0 +1,31 @@
+export type RetentionOptions = {
+    /** Hidden tables kept per drawn table. */
+    perDrawn: number;
+    /** The fewest kept however little is drawn. */
+    atLeast: number;
+};
+/**
+ * Three hidden per drawn. Building a table costs about twelve milliseconds and
+ * a fast pan builds dozens a frame, while konva walks every built node, hidden
+ * or not, on each scroll; this is the trade between the two that measured best.
+ */
+export declare const RETAINED_PER_DRAWN = 3;
+/** Kept even where nothing is drawn, so crossing an empty stretch keeps the pool. */
+export declare const RETAINED_AT_LEAST = 16;
+export type RetentionPool = {
+    /**
+     * The ids to keep built but hidden this render: what left the drawn set most
+     * recently, up to the bound, and never a table the document no longer holds.
+     */
+    retain(drawnIds: ReadonlySet<string>, presentIds: ReadonlySet<string>): ReadonlySet<string>;
+};
+/**
+ * Remembers which tables scrolled off so the scene hides them instead of
+ * destroying them, and a scroll back finds them built. Each call is one render:
+ * it takes what is drawn now and answers what to keep beside it.
+ *
+ * @example
+ * const retention = createRetentionPool();
+ * const retainedIds = retention.retain(drawnIds, new Set(tableIds));
+ */
+export declare function createRetentionPool({ perDrawn, atLeast, }?: Partial<RetentionOptions>): RetentionPool;

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

@@ -0,0 +1,67 @@
+import { KonvaEventObject } from 'konva/lib/Node';
+/** A pointer event as konva hands it to a listener bound on a scene node. */
+export type SceneMouseEvent = KonvaEventObject<MouseEvent>;
+export type SceneTouchEvent = KonvaEventObject<TouchEvent>;
+export type ScenePointerEvent = SceneMouseEvent | SceneTouchEvent;
+/**
+ * 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.
+ */
+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 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. */
+export declare const SCENE_FONT: string;
+/** The pair a canvas centres a drawn line by, which no line box is involved in. */
+export type SceneFontMetrics = {
+    ascent: number;
+    descent: number;
+};
+/**
+ * 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.
+ *
+ * @example
+ * const { ascent, descent } = getSceneFontMetrics();
+ */
+export declare function getSceneFontMetrics(): 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
+ * property, and a canvas has no way to read one.
+ */
+export declare const HIGH_LEVEL_FONT_SIZES: readonly [20, 24, 28, 35, 60];
+/** Border plus padding on one side, which is where a table's own content starts. */
+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 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. */
+export declare const TRANSPARENT = "transparent";
+/**
+ * A fill that paints nothing and still answers a hit test, which is how a cell
+ * keeps the whole padded box clickable the way its div did.
+ */
+export declare const HIT_FILL = "transparent";
+/** 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. */
+export declare const CURSOR_TEXT = "text";
+/** What a node hands back on the way out, leaving the container its own cursor. */
+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.
+ *
+ * @example
+ * on:mouseenter={(event) => setSceneCursor(event, CURSOR_POINTER)}
+ */
+export declare function setSceneCursor(event: ScenePointerEvent, cursor: string): void;

package/dist/components/erd/canvas/shared-drag-select/SharedDragSelect.d.ts

@@ -1,4 +1,8 @@
 import { FC } from '@dineug/r-html';
 export type SharedDragSelectProps = {};
+/**
+ * A peer's marquee, in the schema coordinates their editor shared. Fainter than
+ * the local one because several may be open at once over the same tables.
+ */
 declare const SharedDragSelect: FC<SharedDragSelectProps>;
 export default SharedDragSelect;

package/dist/components/erd/canvas/shared-mouse-tracker/SharedMouseTracker.d.ts

@@ -1,4 +1,5 @@
 import { FC } from '@dineug/r-html';
 export type SharedMouseTrackerProps = {};
+/** One cursor per peer sharing a pointer, on the presence layer. */
 declare const SharedMouseTracker: FC<SharedMouseTrackerProps>;
 export default SharedMouseTracker;

package/dist/components/erd/canvas/shared-mouse-tracker/shared-mouse-cursor/SharedMouseCursor.d.ts

@@ -3,5 +3,10 @@ import { SharedMouseTracker } from '../../../../../engine/modules/editor/state';
 export type SharedMouseCursorProps = {
     tracker: SharedMouseTracker;
 };
+/**
+ * One peer's pointer and nickname, eased toward the position they last shared.
+ * The colour identifies the editor rather than the theme, so it comes from the
+ * shared palette instead of a resolved token.
+ */
 declare const SharedMouseCursor: FC<SharedMouseCursorProps>;
 export default SharedMouseCursor;

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

@@ -2,6 +2,14 @@ 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. */
+    preview?: boolean;
+    hovered?: boolean;
+    hoveredColumnId?: string | null;
+    ghostColumnId?: string | null;
+    editorFocused?: boolean;
+    /** Off while the table is kept built but scrolled out of the culling rect. */
+    visible?: boolean;
 };
 declare const Table: FC<TableProps>;
 export default Table;

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

@@ -0,0 +1,63 @@
+import { FocusType } from '../../../../engine/modules/editor/state';
+import { RootState } from '../../../../engine/state';
+import { Table } from '../../../../internal-types';
+import { Theme } from '../../../../themes/tokens';
+import { ColumnWidth } from '../../../../utils/calcTable';
+/** 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. */
+export type CellSlot = {
+    focusType: FocusType;
+    x: number;
+    width: number;
+};
+export type ColumnCellSlot = CellSlot & {
+    columnType: number;
+};
+/** 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. */
+export declare const CELL_UNDERLINE_Y: 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
+ * while the editor is not the one holding the keyboard.
+ */
+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.
+ *
+ * @example
+ * const baseline = getCellTextBaseline();
+ */
+export declare function getCellTextBaseline(): 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.
+ *
+ * @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;
+/** 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.
+ */
+export declare function getHeaderCellSlots(state: RootState, table: Table): 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.
+ */
+export declare function getColumnCellSlots(state: RootState, widths: ColumnCellWidths): ColumnCellSlot[];

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

@@ -1,9 +1,10 @@
-import { FC, Ref } from '@dineug/r-html';
-import { AppContext } from '../../../../appContext';
+import { FC } from '@dineug/r-html';
+import { SceneMouseEvent } from '../../sceneTokens';
 import { Column } from '../../../../../internal-types';
 export type ColumnProps = {
-    app: Ref<AppContext>;
     column: Column;
+    y: number;
+    width: number;
     selected: boolean;
     widthName: number;
     widthDataType: number;
@@ -27,10 +28,19 @@ export type ColumnProps = {
     editDataType: boolean;
     editDefault: boolean;
     editComment: boolean;
-    draggable?: boolean;
+    hovered?: boolean;
+    /** The placeholder row for a column dragged in from another table. */
     ghost?: boolean;
-    onDragstart?: (event: DragEvent) => void;
-    onDragend?: (event: DragEvent) => void;
+    /** Drawn inside a copy of the table, which owns none of its ids. */
+    preview?: boolean;
+    editorFocused?: boolean;
+    /**
+     * The one pair of callbacks the scene keeps. A drop lands between siblings,
+     * so the table that owns the order is the only thing that can judge one, and
+     * the row can only say that a drag of it started and that it ended.
+     */
+    onDragstart?: (columnId: string, event: SceneMouseEvent) => void;
+    onDragend?: () => void;
 };
 declare const Column: FC<ColumnProps>;
 export default Column;

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

@@ -0,0 +1,14 @@
+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;
+    /** Whether a konva dblclick closes a pair that began on this same cell. */
+    isDouble(cell: FocusType, event: SceneMouseEvent): boolean;
+};
+/**
+ * Tells a real double click from the one konva invents. Konva fires dblclick on
+ * whatever the second click of any pair inside its window lands on, wherever
+ * the first one was, so the cell that opened the pair is remembered here.
+ */
+export declare function createDoubleClickGuard(): DoubleClickGuard;

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

@@ -2,5 +2,5 @@ import { Ctx, Table } from '../../../../internal-types';
 export declare function useMoveTable(ctx: Ctx, props: {
     table: Table;
 }): {
-    onMoveStart: (event: MouseEvent | TouchEvent) => void;
+    onMoveStart: (event: import('../sceneTokens').ScenePointerEvent) => void;
 };