@dineug/erd-editor 3.4.0 → 3.6.0

package/README.md

@@ -32,6 +32,13 @@ and the [IntelliJ plugin](https://plugins.jetbrains.com/plugin/23594-erd-editor)
 npm install @dineug/erd-editor
 ```
 
+The package ships ES modules with its dependencies left as bare imports, so any bundler
+(Vite, webpack, Rspack, esbuild, …) resolves, dedupes and tree-shakes them like the rest of
+your app. Two features run in shared workers — schema garbage collection and the PNG export —
+constructed as `new SharedWorker(new URL('./workers/…', import.meta.url))`, which those bundlers
+emit as worker files beside your chunks; a strict CSP needs `worker-src 'self'`. Without a
+bundler, use the UMD file described under [Script tag](#script-tag) instead.
+
 ## Usage
 
 ```js
@@ -62,6 +69,39 @@ useEffect(() => {
 }, []);
 ```
 
+### Vite
+
+In development Vite pre-bundles dependencies into its cache directory, and the worker files
+would then be looked up there rather than beside the package. Exclude the editor packages from
+that step; a production build needs nothing.
+
+```js
+// vite.config.js
+export default {
+  optimizeDeps: {
+    exclude: ['@dineug/erd-editor', '@dineug/erd-editor-shiki-worker'],
+  },
+};
+```
+
+### Script tag
+
+`dist/erd-editor.umd.js` is a self-contained build for a plain `<script>` tag: every
+dependency and both workers are inside it, and it registers `<erd-editor>` and exposes the
+three callbacks as `window.ErdEditor`. It is what `unpkg` and `jsdelivr` serve.
+
+```html
+<erd-editor style="display: block; width: 100%; height: 100vh"></erd-editor>
+<script src="https://cdn.jsdelivr.net/npm/@dineug/erd-editor/dist/erd-editor.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@dineug/erd-editor-shiki-worker/dist/erd-editor-shiki-worker.umd.js"></script>
+<script>
+  ErdEditor.setGetShikiServiceCallback(ErdEditorShikiWorker.getShikiService);
+</script>
+```
+
+The workers travel inside the file as `data:` URLs, so a strict CSP needs `worker-src data:`
+for this build. Pin a version in the URL for anything beyond a demo.
+
 ### HTML
 
 ```html
@@ -81,15 +121,6 @@ erd-editor {
 }
 ```
 
-### CDN
-
-```html
-<erd-editor style="display: block; width: 100%; height: 100vh"></erd-editor>
-<script type="module">
-  import 'https://esm.run/@dineug/erd-editor';
-</script>
-```
-
 ## API
 
 ### Attributes
@@ -119,7 +150,7 @@ erd-editor {
 | `setDiffValue(value: string)` | Open the diff viewer against another document. |
 | `setPresetTheme(options)` | Set `appearance`, `grayColor` and `accentColor`. |
 | `setTheme(theme)` | Override individual theme tokens. |
-| `setKeyBindingMap(map)` | Remap shortcuts. `edit`, `stop`, `search`, `undo`, `redo`, `zoomIn` and `zoomOut` are reserved. |
+| `setKeyBindingMap(map)` | Remap shortcuts. `edit`, `stop`, `search`, `undo`, `redo`, `zoomIn`, `zoomOut` and `zoomReset` are reserved. |
 | `getSharedStore(config?)` | Returns `{ subscribe, dispatch, dispatchSync, connection, disconnect, destroy }`. `subscribe` gives you this editor's actions to relay; `dispatch` applies a peer's. You supply the transport. `config` is `{ getNickname?, mouseTracker?, focusTracker? }`; both trackers default to `true` and broadcast this editor's cursor and table focus to peers. |
 | `focus()` / `blur()` | Move focus in and out of the editor. |
 | `clear()` | Empty the document. |

package/dist/components/appContext.d.ts

@@ -17,7 +17,15 @@ 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;
+//# sourceMappingURL=appContext.d.ts.map

package/dist/components/customElementRegistry.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=customElementRegistry.d.ts.map

package/dist/components/erd/Erd.d.ts

@@ -5,3 +5,4 @@ export type ErdProps = {
 };
 declare const Erd: FC<ErdProps>;
 export default Erd;
+//# sourceMappingURL=Erd.d.ts.map

package/dist/components/erd/Erd.styles.d.ts

@@ -1 +1,2 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=Erd.styles.d.ts.map

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

@@ -1,5 +1,7 @@
 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;
@@ -9,5 +11,19 @@ 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;
 declare const AutomaticTablePlacement: FC<AutomaticTablePlacementProps>;
 export default AutomaticTablePlacement;
+//# sourceMappingURL=AutomaticTablePlacement.d.ts.map

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

@@ -1,2 +1,3 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const container: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=AutomaticTablePlacement.styles.d.ts.map

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

@@ -7,5 +7,22 @@ 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 {};
+//# sourceMappingURL=createAutomaticTablePlacement.d.ts.map

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

@@ -4,5 +4,11 @@ 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;
+//# sourceMappingURL=Canvas.d.ts.map

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

@@ -1,2 +1,14 @@
+/**
+ * The stage container, which is viewport sized and is the canvas. The document
+ * has no edge to draw any more, so the colour the scene used to paint on a
+ * document sized rect is painted here instead and reaches every corner.
+ */
+export declare const stage: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The minimap's thumbnail, which is a picture of that same canvas and so is
+ * painted by the very same rules. It keeps a name of its own because the
+ * minimap asks for it by one.
+ */
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const controller: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=Canvas.styles.d.ts.map

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

@@ -0,0 +1,19 @@
+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;
+//# sourceMappingURL=CanvasScene.d.ts.map

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

@@ -0,0 +1,9 @@
+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;
+//# sourceMappingURL=EditOverlay.d.ts.map

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

@@ -0,0 +1,7 @@
+/**
+ * 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;
+//# sourceMappingURL=EditOverlay.styles.d.ts.map

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

@@ -0,0 +1,22 @@
+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;
+//# sourceMappingURL=SceneIcon.template.d.ts.map

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

@@ -1,3 +1,4 @@
 import { AppContext } from '../../appContext';
 import { SelectType } from '../../../engine/modules/editor/state';
 export declare function tryStartAltDragDuplicate(app: AppContext, event: MouseEvent | TouchEvent, entityId: string, selectType: SelectType): boolean;
+//# sourceMappingURL=altDragDuplicate.d.ts.map

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

@@ -0,0 +1,12 @@
+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;
+//# sourceMappingURL=DragSelect.d.ts.map

package/dist/components/erd/canvas/draw-relationship/DrawRelationship.d.ts

@@ -6,3 +6,4 @@ export type DrawRelationshipProps = {
 };
 declare const DrawRelationship: FC<DrawRelationshipProps>;
 export default DrawRelationship;
+//# sourceMappingURL=DrawRelationship.d.ts.map

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

@@ -1,4 +1,10 @@
 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;
+//# sourceMappingURL=DuplicateGhost.d.ts.map

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

@@ -0,0 +1,7 @@
+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;
+/** Reads the flag through the observable, so a scene render tracks it. */
+export declare function isEntityDragActive(root: RootState): boolean;
+//# sourceMappingURL=entityDrag.d.ts.map

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

@@ -2,6 +2,11 @@ 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;
+//# sourceMappingURL=HighLevelTable.d.ts.map

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

@@ -2,6 +2,9 @@ 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;
+//# sourceMappingURL=Memo.d.ts.map

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

@@ -1,9 +1,20 @@
 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;
+//# sourceMappingURL=MemoSash.d.ts.map

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

@@ -0,0 +1,27 @@
+/**
+ * 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;
+//# sourceMappingURL=memoCaret.d.ts.map

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

@@ -0,0 +1,29 @@
+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;
+//# sourceMappingURL=memoScroll.d.ts.map

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

@@ -0,0 +1,34 @@
+/** 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[];
+//# sourceMappingURL=memoText.d.ts.map

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

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

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

@@ -0,0 +1,16 @@
+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;
+//# sourceMappingURL=RelationshipGroup.d.ts.map

package/dist/components/erd/canvas/{canvas-svg → relationship-group}/relationship/Relationship.d.ts

@@ -6,3 +6,4 @@ export type RelationshipProps = {
 };
 declare const Relationship: FC<RelationshipProps>;
 export default Relationship;
+//# sourceMappingURL=Relationship.d.ts.map

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

@@ -0,0 +1,18 @@
+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;
+//# sourceMappingURL=Relationship.template.d.ts.map

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

@@ -0,0 +1,19 @@
+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;
+//# sourceMappingURL=sceneHit.d.ts.map

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

@@ -0,0 +1,12 @@
+/**
+ * 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;
+//# sourceMappingURL=sceneKind.d.ts.map

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

@@ -0,0 +1,32 @@
+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;
+//# sourceMappingURL=sceneRetention.d.ts.map

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

@@ -0,0 +1,68 @@
+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;
+//# sourceMappingURL=sceneTokens.d.ts.map

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

@@ -1,4 +1,9 @@
 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;
+//# sourceMappingURL=SharedDragSelect.d.ts.map