@dineug/erd-editor 3.4.0 → 3.5.0

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

@@ -0,0 +1,18 @@
+import { ScenePointerEvent } from './sceneTokens';
+import { SelectType } from '../../../engine/modules/editor/state';
+import { Ctx } from '../../../internal-types';
+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 pointer start every draggable entity shares: select it, hand an Alt drag
+ * to the duplicate ghost, and otherwise move the whole selection with the
+ * pointer. Only the entity kind and the blocked areas differ between them.
+ */
+export declare function useMoveEntity(ctx: Ctx, options: MoveEntityOptions): {
+    onMoveStart: (event: ScenePointerEvent) => void;
+};

package/dist/components/erd/erd-context-menu/ErdContextMenu.d.ts

@@ -1,4 +1,4 @@
-import { FC, Ref } from '@dineug/r-html';
+import { FC } from '@dineug/r-html';
 import { ValuesType } from '../../../internal-types';
 export declare const ErdContextMenuType: {
     readonly ERD: "ERD";
@@ -8,7 +8,6 @@ export declare const ErdContextMenuType: {
 export type ErdContextMenuType = ValuesType<typeof ErdContextMenuType>;
 export type ErdContextMenuProps = {
     type: ErdContextMenuType;
-    canvas: Ref<HTMLDivElement>;
     relationshipId?: string;
     tableId?: string;
     onClose: () => void;

package/dist/components/erd/erd-context-menu/menus/drawRelationshipMenus.d.ts

@@ -1,8 +1,8 @@
 import { AppContext } from '../../../appContext';
-import { Base64IconName } from '../../../primitives/icon/icons';
+import { NotationIconName } from '../../../primitives/icon/icons';
 import { KeyBindingName } from '../../../../utils/keyboard-shortcut';
 type Menu = {
-    iconName: Base64IconName;
+    iconName: NotationIconName;
     name: string;
     keyBindingName: KeyBindingName;
     relationshipType: number;

package/dist/components/erd/erd-context-menu/menus/exportMenus.d.ts

@@ -1,9 +1,10 @@
 import { AppContext } from '../../../appContext';
 import { IconName } from '../../../primitives/icon/icons';
+import { Theme } from '../../../../themes/tokens';
 type Menu = {
     icon: IconName;
     name: string;
     onClick: () => void;
 };
-export declare function createExportMenus(app: AppContext, onClose: () => void, root: HTMLElement): Menu[];
+export declare function createExportMenus(app: AppContext, onClose: () => void, theme: Theme): Menu[];
 export {};

package/dist/components/erd/hide-sign/hideSignBounds.d.ts

@@ -0,0 +1,9 @@
+import { Viewport } from '../../../engine/modules/editor/state';
+import { ScrollTransform } from '../../../engine/modules/settings/atom.actions';
+import { Rect } from '../../../utils/dragSelect';
+/**
+ * The scene a reader can still get to: what the screen shows, taken over every
+ * scroll offset the current zoom allows. A magnifying zoom sees less at once
+ * but reaches the same document, so the bound has to follow the travel.
+ */
+export declare function getReachableRect(settings: ScrollTransform, viewport: Viewport): Rect;

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

@@ -0,0 +1,22 @@
+import { Stage } from 'konva/lib/Stage';
+/** The scene entities the erd routing tells apart from one another. */
+export type SceneEntityKind = 'table' | 'memo' | 'relationship';
+export type SceneHit = {
+    kind: SceneEntityKind;
+    id: string;
+};
+/**
+ * Records the entity konva hit for every press a stage dispatches, and returns
+ * the teardown. Konva resolves the node while the hit canvas still matches the
+ * scene, so the walk up to the entity runs there too.
+ *
+ * @example
+ * addUnsubscribe(trackSceneHits(stage));
+ */
+export declare function trackSceneHits(stage: Stage): () => void;
+/**
+ * The scene entity a pointer event landed on, or null for bare canvas and for a
+ * target outside the stage. Konva resolved it as it dispatched that same event,
+ * because the press has re-rendered the scene by the time this is asked.
+ */
+export declare function sceneHit(container: HTMLElement | null | undefined, event: MouseEvent | TouchEvent): SceneHit | null;

package/dist/components/erd/minimap/Minimap.styles.d.ts

@@ -1,3 +1,2 @@
 export declare const minimap: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const border: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const canvasSvg: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/erd/minimap/MinimapScene.d.ts

@@ -0,0 +1,16 @@
+import { FC } from '@dineug/r-html';
+import { Stage } from 'konva/lib/Stage';
+export type MinimapSceneProps = {};
+/**
+ * The whole document on one layer, with no culling: a thumbnail that dropped
+ * what is off screen would stop being a map of where the rest of it is. Boxes
+ * only, because a connector between two of them is noise at this size.
+ */
+declare const MinimapScene: FC<MinimapSceneProps>;
+/**
+ * Renders the minimap scene as the root of its Stage. Named in lower case on
+ * purpose: an all-upper-case export list makes r-html's refresh treat this as a
+ * component module and self-accept it, which kills hmr for the whole scene.
+ */
+export declare function renderMinimapScene(stage: Stage): void;
+export default MinimapScene;

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

@@ -3,5 +3,10 @@ import { Memo } from '../../../../internal-types';
 export type MemoProps = {
     memo: Memo;
 };
+/**
+ * A memo as the minimap draws it: the box and nothing in it. The id rides in
+ * the name, the way a relationship carries its own, because an id on a second
+ * stage would make an id scan over the live stages ambiguous.
+ */
 declare const Memo: FC<MemoProps>;
 export default Memo;

package/dist/components/erd/minimap/minimapGeometry.d.ts

@@ -0,0 +1,52 @@
+import { Point } from '../../../internal-types';
+import { SceneTransform } from '../../../konva/scene/viewport';
+/** The canvas box the minimap draws, plus the screen that is looking at it. */
+export type MinimapTransform = SceneTransform & {
+    viewportWidth: number;
+    viewportHeight: number;
+};
+export type MinimapRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * The whole canvas box scaled into the minimap square, with no zoom term. Fixed
+ * on purpose: the thumbnail stays a map of the document at one size, and the
+ * zoom shows up in the rectangle drawn over it instead.
+ */
+export declare function getMinimapRatio(width: number): number;
+/**
+ * The canvas the screen actually covers, read back through the very origin
+ * getSceneOrigin places the scene layer at. One screen pixel buys one over the
+ * zoom in canvas units, so zooming out widens this with the scroll standing still.
+ */
+export declare function getVisibleCanvasRect(transform: MinimapTransform): MinimapRect;
+/** That same rectangle in the minimap's own pixels, which is where it is drawn. */
+export declare function getMinimapViewportRect(transform: MinimapTransform): MinimapRect;
+/** The thumbnail's own box: the canvas box at the minimap ratio, 150 wide. */
+export declare function getMinimapBoxSize(width: number, height: number): {
+    width: number;
+    height: number;
+};
+/**
+ * The rectangle as drawn, trimmed to the thumbnail box. Zooming out far enough
+ * makes the screen reach past the canvas on every side, and this box is a
+ * pointer target, so what leaves the map is dropped instead of laid over it.
+ */
+export declare function getMinimapHandleRect(transform: MinimapTransform): MinimapRect;
+/**
+ * A canvas distance as the scroll that travels it. Scroll is measured in screen
+ * pixels and moves the view the opposite way, so it carries both the zoom and
+ * the sign that a minimap coordinate does not.
+ */
+export declare function toScrollDistance(distance: number, zoomLevel: number): number;
+/** Minimap travel as the scroll that keeps the rectangle under the pointer. */
+export declare function toScrollMovement(movement: number, ratio: number, zoomLevel: number): number;
+/**
+ * The scroll that puts a canvas point in the middle of the screen. Stated as a
+ * step away from where the scroll stands now, so the origin is read once through
+ * getVisibleCanvasRect rather than restated inverted here.
+ */
+export declare function getScrollToCenter(transform: MinimapTransform, center: Point): Point;

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

@@ -3,5 +3,10 @@ import { Table } from '../../../../internal-types';
 export type TableProps = {
     table: Table;
 };
+/**
+ * A table as the minimap draws it: the box and nothing in it. The id stays off
+ * the node because two stages spelling one id make an id scan ambiguous, so a
+ * minimap node is found by its name and the table it carries.
+ */
 declare const Table: FC<TableProps>;
 export default Table;

package/dist/components/erd/virtual-scroll/useVirtualScroll.d.ts

@@ -1,4 +1,21 @@
+import { ScrollRange } from '../../../engine/modules/settings/atom.actions';
 import { Ctx } from '../../../internal-types';
+/** One scrollbar as drawn: a track a viewport wide over the content behind it. */
+export type ScrollbarTrack = {
+    range: ScrollRange;
+    ratio: number;
+    thumb: number;
+    offset: number;
+    scrollable: boolean;
+};
+/**
+ * The bar for one axis, sized from the travel the engine allows rather than from
+ * the canvas box. The content behind the track is a viewport plus that travel,
+ * which is the only place the zoom enters, and at zoom 1 the two read the same.
+ */
+export declare function getScrollbarTrack(range: ScrollRange, scroll: number, viewportLength: number): ScrollbarTrack;
+/** The scroll that centres the viewport on a point pressed on a track. */
+export declare function trackPointToScroll({ range, ratio }: ScrollbarTrack, point: number, viewportLength: number): number;
 export declare function useVirtualScroll(ctx: Ctx): {
     state: {
         selected: null | "horizontal" | "vertical";
@@ -7,4 +24,6 @@ export declare function useVirtualScroll(ctx: Ctx): {
     onScrollTopStart: (event: MouseEvent) => void;
     getWidthRatio: () => number;
     getHeightRatio: () => number;
+    getHorizontalTrack: () => ScrollbarTrack;
+    getVerticalTrack: () => ScrollbarTrack;
 };

package/dist/components/global-styles/GlobalStyles.d.ts

@@ -1,18 +1,9 @@
 import { FC } from '@dineug/r-html';
 export type GlobalStylesProps = {};
 /**
- * Renders nothing, and stays anyway.
- *
- * Every sheet it used to be responsible for is an adopted global literal now, so there is no
- * markup left to emit. What is left is the `setGlobalStyleOrder` call above, which is a module
- * side effect — it only runs if something imports this module, and the bucket order is the one
- * thing in the style layer with no test-visible symptom until the cascade is already wrong.
- *
- * Being a component is what makes that import load-bearing on its face. `ErdEditor` renders
- * `<${GlobalStyles} />`, which no bundler will drop and no `no-unused-imports` pass will offer to
- * delete; a bare `import '@/components/global-styles/GlobalStyles'` in its place would be a naked
- * side-effect import that `simple-import-sort` is free to move and a future cleanup is free to
- * mistake for dead weight. The empty render is the cheaper half of that trade.
+ * Renders nothing, and stays anyway. What is left is the setGlobalStyleOrder
+ * call above, a module side effect, and being a component is what keeps its
+ * import load-bearing on its face rather than a naked side-effect import.
  */
 declare const GlobalStyles: FC<GlobalStylesProps>;
 export default GlobalStyles;

package/dist/components/primitives/code-block/CodeBlock.styles.d.ts

@@ -1,6 +1,6 @@
 export declare const clipboard: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
-/** Out of flow, the root loses its content height and collapses to `min-height`. */
+/** Out of flow, the root loses its content height and collapses to min-height. */
 export declare const scroller: import('@dineug/r-html').CSSTemplateLiterals;
 /** Sized by the preview, so the overlay stretched onto it has no scroll of its own to desync. */
 export declare const layers: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/primitives/icon/icons.d.ts

@@ -1,22 +1,9 @@
 import { IconNode } from 'lucide';
-import { ValuesType } from '../../../internal-types';
-/** Raster crow's-foot notation; `@/utils/icon` reads the data URIs back as strings. */
-export declare const BASE_64_ICON: {
-    /** @deprecated */
-    readonly ZeroOneN: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0RFRDI1RjI0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0RFRDI1RjM0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQTE2QzQzRDQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQTE2QzQzRTQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnTT5ywAAAJMSURBVHja7Fc9T2JBFB3MZq1IqLSgsRM6G6TcAmK7VNoRK4yBxE6XP/CsNxBohc6G5w+AoCU0aEWpBfAD4AeM55AZMjvvg2dClsRwkxOeb+7ce+6dmTPPmJRSbNP2xJZtR2DrBH6k0+ndEkSxBHAD9AGpMAJc4Lfh1zDGn4GLgHglNb8kqANhSKVSTiaTkY7jyMFgILWNx2PZ7XZluVyW8BkBJWA1PhwO+f7ZinUO9DmH8xl3XfIGnefzuQwzBsvlcjKIAH4PWAh9zCLq9Xp48mq16knGwASTmkaShULBQ0B1ZlSr1TyFtFqtwOS3xWLxH2eyZctUUOKVFTGRtslk4iHAODZZ/k2yLDKIwLsZjJ2gM3Bo+V0wieu6vsvCCu0ucS+RPHC1vId8kp+YrWRwvHsIWaosO7Nun3DDqn1yD+zr+RQiz3WYz+dXz6iCP82g84lKB4jxF0Rv0G7P+Gw2E6ha9Ho9/eoPsRJAucbUzl53Wi79NmwU25QSJuLx+ObugkqlInD+l8+oTsAny1aHxDlKJpOBgzhBot1ui8Vi4R3cwCY8jbIJeap4JOHvAmd6flDQj+l06ncMD/yktdPp+AoW59nEeBqUnjjAzyACd7YQUcnUxL7CyJZWk7QWIs6xdcLQg6cvSzETEl+Q4iyXkAWZBHU3/stlpLvKpaWkm0sb5Tq+19exqfvWdbyU1gjX8SGLIlnKNJ9jPGYRP0gugQLwS717Az6AB+DJ+CC5Vs8vSkEffeIdK79mVALf95swtvvXbEdg2wQ+BRgAvLABcxKvek4AAAAASUVORK5CYII=";
-    readonly ZeroOne: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkExNkM0M0I0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkExNkM0M0M0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQTE2QzQzOTQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQTE2QzQzQTQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PomEhhsAAAKSSURBVHja7FexbhpBED0ipFRI7ixBQwlV0nCUWKJIydEkFSRpHCGQ0iXgBqfBbQrAShXzA4BLJJCdEip3UDoSUFvwAZv30B5a1ncHBiSk2CONdrU3O/N2dt6w+IQQxiHllXFgeQFwcAD+aDT6zDPwBNsjaAoaVtbuoNcee46hOSi5/hd6pRv41vUBXJFJJ4FA4FMymTRCodDy22g0Mnq93gOml8Ph8Mxhb71QKOQYYzqdGq1W6zPsVkHwo5tGIpFvsVhMNJtN4Saz2UwUi0UB299QU9u/tBsMBrS51WN4BrcsS4zHY7GJEKQOYmsAMIzz5GrwyWQiSqWSwDXQkchms6LRaCwyoIPYB4Ar3NdyM+cEhPXv0LC0OYH+ZJZUEASG9fdbA2AAnlI9uQwedwF7waC29Pt92t5sCoCN6FzSZCmsdluq1aoxn8+LqN6+E0uwXoKPKNiQ4j7TNA0w5gRLZRdWraz7QZOyTkU6saXb7XL4taZH3IGSKRs4asVA5s5Vg2AwaOTz+QSmCZ2GniLTuI6uFpyLbcRfq9UeHYcZwL0v5mw8SFsYqb73yMBb9Tel3W4zA4s5gC1G2Yget2Lc8Q99MZ1Ol20AmLMOTjE9c7nT1xgstW4qlQrrhn7LNgACgp8/mN56dkKk84hVb1OLo+T+qUv66wi4QlnSeNc+cAG0y81IvyDfZaf7CE1Av5JubE6qSLDxXQEc05ib9HbLvp/JZARPTc6rQjDMyL5+Cz7wKkDDjapZD74zAOngHbRN57wGJyFAmfa6w/71ndCruyBoB0MHlf4FxZUDJd+o7wF8Z7Vfy/dAx8HFJWies1ng+CABqqe8oMIOL6KHDV5ElPt9APj/HqW+l/+Gzx7APwEGACfjkeXK58xsAAAAAElFTkSuQmCC";
-    readonly ZeroN: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDc5MkNFMEM0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDc5MkNFMEQ0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NzkyQ0UwQTQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NzkyQ0UwQjQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpR0ImIAAALlSURBVHja7Fe/jxJBGF0MyVUk2HgJFJ6NQqUNWEoCkfKWxusozxBI7Eiw8ardKy/hxyVWQqcF8AdA9Eqg8DqwuwJI7Aj8AeN7OEuGhd09tCBRvuTLzA4z37z53rxvF58QQtunPdD2bAcA/mg0+p9nYMf5Qfhz5fnmbwH47iND0PQaTS4QCOiRSGQ1PhgMZmja8OvhcNi/z4aIdc5Ycs1HjQCcHJu9hH/KZrOi0+kIu83nc9FsNkUymRSYZ3jEegqv6bousLHI5/NcU3RbkIa3W62W8DICKZVKDFhziFWMxWKiXq+v1ozHY8Exv0OajpmmSqVyitOtxrvdrjYajZZ90KGlUiktFAot+4ZhcDiHtTOc8L1KHWLoAKiFw+FVrOl0+rvjgNjA5msnJA3MCPxC+hX8DhuvzZN0kDqDfTt1nCPT/w1+tm3zIFPDidYC8oZxc8vcI6ZdBUHKMPadY1YMy0gBY6uxfHhIMBEKAw+BvIUMLB+q1aqG/iXSWnKg6wjND9DzmHQsFgttMploqlpIm2maWr/fv8bj5zUZMrV2KWYymaXTyDMCPgGAOxdpXRQKhQ9I7cZv2FSzDrPVvG44TiLc5CWp0Mnrn5gfxWQDFG8r02nddpwwiAzMXOrLC6d3CtNPWhxLMSjYKKcYe0XZ0OLxOOVHOX1xA6Bybj8MKWg0GjdOFNjTeUL5WNbr9UjDV3jcIf3nVIllrHK8V2xVYxypphr8kbXeidO2ql+WWwnijQrU0rq6mdT4W/gta4ldiuVy2ZJi0Q1AmoHVxTyBDL50/m7XOkETvIxxTL1zHpSwBoJlWBa2mtvNNpky+wmcjJvIk6Vtcc5Y9QjeHovxveRlbiun9tLKVFul1S2W+kJiywx4fg9AXmm+UDD5lIqg3HizwftSYgBHmV1izhXGfnrEeobmHeLkuB7rIj4n+WyTGjwh2xP4rXR+kMx2/BBKyLWzXQD8mx+lvsNfswOAfQP4JcAAK/At0HQvwB8AAAAASUVORK5CYII=";
-    readonly OneOnly: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJCNTBCRDA0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkExNkM0MzQ0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkI1MEJDRTQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkI1MEJDRjQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pur5d4QAAAE1SURBVHjaYvz//z/DQAImhgEGow4YcAewaGpqjvAQoJI5CUAsD2VPB+JXULY4EGcCMSivPwTiBRgOuH79OkU2A6MwITAwcL6UlBSYP3XqVHGgmVlQufqcnJxMUFnz7NkzhvXr1zMA5VAdAZKkBGtoaBw4derUfxgA8v8jycHFQWpAatH1j2bDUQeACqIGaDahGgClfmLlWIDZpJ7SKhmWBUEgOzsbRDVgUwOUswcy7ZHFGf8PcIOABVhwUGwIsCBiQCqIUOSgIQIviNABI7BwaKDQfodFixbZm5qawuIYRDVC5ephJe3p06cZ4uLiDgKZB0ZLwtGCaNg1SBYAs5c9MJExIDVI4GxgtgQ1SBiePn3KgK1BAsqG1GoRKSA54CVaiwgEHtDSAUM3DTCO9g1HvAMAAgwAvvwYPnW1JuQAAAAASUVORK5CYII=";
-    readonly OneN: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkExNkM0Mzc0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkExNkM0Mzg0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQTE2QzQzNTQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQTE2QzQzNjQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+BFx8AAAIISURBVHja7Fc9TwJBEF0MLYkdBgot4QdwLSaQSAmNdkCrR61CI9Ud1oCUIB0NYElBtJU/QIkmQKIVgcpqfXPekQNBYu7WM4FJJvs1x87Ovnk7uDjnzEnZYw7LzgHHHXAFAoHtjoDbpt9JQw/1fgX6vsH+CDohdVnlgWAwmE4kElWfz6eNy+Vypd/vX6yx9aK58fv959PplM1mswNGDlhRYOip1+txQzDma+wuoYNSqaTZUYvxnXAHMJag1WQyyYfDITdLJBLhbpEAQ8gVj8eThTBc03weoWeqqrLRaFQREgHoKfQRG3Pc9cKpW60WD4VCZKPS90IiAJA1FEVhkiTN58bjMaNIwNl7yhQA9VlLQ4Qpj9a2J1GWZZbJZBbmkBkMoHtFt6pPxbBvTGNCHZWWNqX7xalXriHkdNfrqZg7XBC4KTxWhSJgENGy0Onb7faPj1He4v7H9Xo9DGRrg1QqpaWY2SEAj+Vyua+0W6ZpQWn4YjCeWYrFIq0NiBWN70U54CWajcfj3LxGQmxIrEjsSCwplIrRP6N1cMI3Qmo2mxohCa0HQDYNNCfASAG8z7rd7nwtGo3+TUECJz6gWfB/DAT1QCAlViSgYq5gBxXXQDZhQrqpIFnlSAdNBwx4BWwUsPk15m7tqgnTepVjOPC2wX5fr4hse4xqv7Sf/J+yfPffcOsd+BRgAOvawAWTC+PMAAAAAElFTkSuQmCC";
-    /** @deprecated */
-    readonly One: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJCNTBCQ0M0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJCNTBCQ0Q0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkI1MEJDQTQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkI1MEJDQjQ4NjQxMUU3QkRBMDg1MDlCNjg0QjgzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnOhfCQAAADcSURBVHjaYvz//z/DQAImhgEGow4YcAewaGpqjvAQoJI5CUAsD2VPB+JXxGpkpLQcAEZhQmBg4HwpKSkwf+rUqdOvX7+eRbQBIAdQgjU0NA6cOnXqPwwA+f9J0T+aDUcdACqIGkBpkZqGAs2sJzobTpky5T+lWRGYDRmkpaXBbKB5JOll/D/ADQIWYMFBsSGgEEAqiEgLAWDB0UCh/Q6LFi2yNzU1hcU/iGocLQlHC6IR1SBZsH79entgQmRAapCQlA2p1SJSQHLAS3o3yRYM2TTAONo3HPEOAAgwAJh583IRUllDAAAAAElFTkSuQmCC";
-    /** @deprecated */
-    readonly N: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDc5MkNFMDg0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDc5MkNFMDk0ODY0MTFFN0JEQTA4NTA5QjY4NEI4MzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNDQwRjc3NTQ4M0MxMUU3QkRBMDg1MDlCNjg0QjgzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNDQwRjc3NjQ4M0MxMUU3QkRBMDg1MDlCNjg0QjgzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkbQDKwAAAGjSURBVHja7Jcxb4JQEMefLl272cjSUbYu0g+gSVemdpPZwKzRRSf4AGg70k8AfACTdqx+ibYJLp2MfoDr/wg0vJp2Al6TeskFeQ+4e/fufvdsEJFQKU2hWE4OKHeg0el0TlugQi6h5+kW1MkBXddbuMw0TRvu93txOBwumjUaH+Hy4jjOcLVaCcuyeHgmOAJVKpLcgAaDwYCSJKGi9Hq9yo273W6XwjCUDCP8NJlMCPP3VRm+hT6xETZWlCiKiJ3CvJfmX8mGW7wqDu16vZYMb7db4m3A/CP0On+HQTRHMpRVCiaS7Mq2bWlwuVyKxWLxjp/BEQkxQWWVYr/fF9/JipALrP5nFJPiA0EagbI+BsAI0zSlMV59HMe/NqN5mYg1DMPyPE+02+2vwc1mI6bTKTvzgNsP6Y0KSnAMfctySxLf97kKXqGj/PmqOJCWI7aDsHrJCaZhVo4BU7JqEt5Bn13XPQIS05GBVEcvOGPqsTE0IQnHtThQcOQGGnP4mYpZL/Bqc6CYpFkvGOcoVsEfPg3tVB7Jdn/nWH76b/jvHfgUYADeZNmzPgOYQQAAAABJRU5ErkJggg==";
-};
-export type BASE_64_ICON = ValuesType<typeof BASE_64_ICON>;
 export declare const ICON_VIEW_BOX = "0 0 24 24";
+/** The stroke lucide draws with, in the box its path data is written in. */
+export declare const ICON_STROKE_WIDTH = 2;
 export type IconNodeChild = IconNode[number];
-declare const SVG_ICON: {
+declare const LUCIDE_ICON: {
     atom: IconNode;
     braces: IconNode;
     brackets: IconNode;
@@ -56,17 +43,55 @@ declare const SVG_ICON: {
     workflow: IconNode;
     x: IconNode;
 };
-export type SvgIconName = keyof typeof SVG_ICON;
-export type Base64IconName = keyof typeof BASE_64_ICON;
-export type IconName = SvgIconName | Base64IconName;
+/**
+ * Crow's-foot notation on lucide's grid, named after the v2 RelationshipType
+ * members: a connector along y 12 carrying a ring, one or two bars and a fork,
+ * each glyph spanning the safe area so the seven line up in a menu.
+ */
+export declare const NOTATION_ICON: {
+    /** @deprecated The one glyph carrying all three marks, so its ring sits flush left for room. */
+    ZeroOneN: ([string, {
+        cx: string;
+        cy: string;
+        r: string;
+    }] | [string, {
+        d: string;
+    }])[];
+    ZeroOne: ([string, {
+        d: string;
+    }] | [string, {
+        cx: string;
+        cy: string;
+        r: string;
+    }])[];
+    ZeroN: ([string, {
+        d: string;
+    }] | [string, {
+        cx: string;
+        cy: string;
+        r: string;
+    }])[];
+    OneOnly: [string, {
+        d: string;
+    }][];
+    OneN: [string, {
+        d: string;
+    }][];
+    /** @deprecated */
+    One: [string, {
+        d: string;
+    }][];
+    /** @deprecated */
+    N: [string, {
+        d: string;
+    }][];
+};
+export type LucideIconName = keyof typeof LUCIDE_ICON;
+export type NotationIconName = keyof typeof NOTATION_ICON;
+export type IconName = LucideIconName | NotationIconName;
 export type IconDefinition = {
-    type: 'svg';
-    name: SvgIconName;
+    name: IconName;
     node: IconNode;
-} | {
-    type: 'base64';
-    name: Base64IconName;
-    src: string;
 };
 export declare const iconMap: Record<IconName, IconDefinition>;
 export declare function getIcon(name: string): IconDefinition | undefined;

package/dist/components/primitives/sash/Sash.stories.d.ts

@@ -9,7 +9,7 @@ declare const meta: {
             control: "radio";
         };
         cursor: {
-            options: ("default" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize")[];
+            options: ("default" | "ew-resize" | "ns-resize" | "nwse-resize" | "nesw-resize")[];
             control: "select";
         };
         top: {

package/dist/components/primitives/toast/Toast.d.ts

@@ -3,6 +3,10 @@ export type ToastProps = {
     title?: DOMTemplateLiterals | string;
     description?: DOMTemplateLiterals | string;
     action?: DOMTemplateLiterals | string;
+    /** The thing reported is still running, which a turning ring says. */
+    busy?: boolean;
+    /** How far along it is, from 0 to 1, which the ring fills up by. */
+    progress?: number;
 };
 declare const Toast: FC<ToastProps>;
 export default Toast;

package/dist/components/primitives/toast/Toast.stories.d.ts

@@ -13,8 +13,21 @@ declare const meta: {
         action: {
             control: "text";
         };
+        busy: {
+            control: "boolean";
+        };
+        progress: {
+            control: {
+                type: "range";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<ToastProps>;
 export declare const Normal: Story;
+export declare const Busy: Story;
+export declare const Progress: Story;

package/dist/components/primitives/toast/Toast.styles.d.ts

@@ -1,4 +1,9 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The ring beside the text of a toast that reports something still running.
+ * A busy one turns a quarter of it; one with a progress fills it from the top.
+ */
+export declare const indicator: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const textWrap: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const title: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const description: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/{erd/canvas/table → table-view}/column/column-data-type/ColumnDataType.d.ts

@@ -1,5 +1,5 @@
 import { FC, Ref } from '@dineug/r-html';
-import { AppContext } from '../../../../../appContext';
+import { AppContext } from '../../../appContext';
 export type ColumnDataTypeProps = {
     app?: Ref<AppContext>;
     tableId: string;

package/dist/components/table-view/column/useColumnCell.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from '@dineug/r-html';
+import { AppContext } from '../../appContext';
+import { DataTypeHint } from '../../../constants/sql/dataType';
+export type ColumnCellProps = {
+    tableId: string;
+    columnId: string;
+    edit?: boolean;
+    value: string;
+    onEditEnd?: () => void;
+};
+/**
+ * Data type autocomplete state and key handling for a column cell, shared by
+ * the DOM cell and by the Konva cell that replaces it.
+ */
+export declare function useColumnCell(props: ColumnCellProps, app: Ref<AppContext>): {
+    state: {
+        hints: DataTypeHint[];
+        index: number;
+    };
+    setHints: (value: string) => void;
+    handleSelectHint: (index: number) => void;
+    handleKeydown: (event: KeyboardEvent) => void;
+};

package/dist/components/themeContext.d.ts

@@ -0,0 +1,9 @@
+import { Ctx } from '../internal-types';
+import { Theme } from '../themes/tokens';
+/**
+ * The scene's colours as values. A stylesheet resolved a custom property per
+ * node and konva resolves none, so the whole palette reaches every scene node
+ * through one context and a theme change is one provider set away from a repaint.
+ */
+export declare const themeContext: import('@dineug/r-html').Context<Theme>;
+export declare const useThemeContext: (ctx: Ctx) => import('@dineug/r-html').Ref<Theme>;

package/dist/components/toast-container/openToastWhileRunning.d.ts

@@ -0,0 +1,11 @@
+import { DOMTemplateLiterals } from '@dineug/r-html';
+import { Emitter } from '../../utils/emitter';
+/**
+ * Says that something is running, but only when it runs long enough to be
+ * worth a message. Resolves once nothing is left on screen for it, which lets
+ * a caller report the outcome after this toast rather than on top of it.
+ *
+ * @example
+ * await openToastWhileRunning(emitter, running, html`<${Toast} description=${'Working'} />`);
+ */
+export declare function openToastWhileRunning(emitter: Emitter, running: Promise<unknown>, message: DOMTemplateLiterals): Promise<void>;

package/dist/components/visualization/Visualization.d.ts

@@ -1,4 +1,10 @@
 import { FC } from '@dineug/r-html';
+import { Visualization } from './createVisualization';
 export type VisualizationProps = {};
+/**
+ * The dom shell around the graph: the Stage container, the wheel that zooms
+ * it, and the table preview that opens over a hovered table dot. The layout,
+ * the view and the hover live in one observable here and never reach the store.
+ */
 declare const Visualization: FC<VisualizationProps>;
 export default Visualization;

package/dist/components/visualization/Visualization.styles.d.ts

@@ -1 +1,7 @@
+/**
+ * Overflow is hidden rather than scrolled: the graph pans and zooms on its own
+ * Stage, so nothing here is ever larger than the box it sits in.
+ */
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+/** The Stage container, viewport sized, which konva fills with its own canvas. */
+export declare const stage: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/visualization/VisualizationScene.d.ts

@@ -0,0 +1,21 @@
+import { FC } from '@dineug/r-html';
+import { Stage } from 'konva/lib/Stage';
+import { Visualization } from './createVisualization';
+import { VisualizationState } from './visualizationView';
+export type VisualizationSceneProps = {
+    graph: Visualization;
+    state: VisualizationState;
+};
+/**
+ * The graph on two layers: a stage sized box that takes a pan, and the scene
+ * itself under the view transform, links below dots below labels. Only a table
+ * carries a name, and a hovered table lights its neighbourhood over the rest.
+ */
+declare const VisualizationScene: FC<VisualizationSceneProps>;
+/**
+ * Renders the graph as the root of its Stage. Named in lower case on purpose:
+ * an all-upper-case export list makes r-html's refresh treat this as a
+ * component module and self-accept it, which kills hmr for the whole scene.
+ */
+export declare function renderVisualizationScene(stage: Stage, props: VisualizationSceneProps): void;
+export default VisualizationScene;

package/dist/components/visualization/createVisualization.d.ts

@@ -1,9 +1,68 @@
+import { Simulation } from 'd3-force';
 import { RootState } from '../../engine/state';
-type Props = {
-    onDragStart: () => void;
-    onDragEnd: () => void;
-    onStartPreview: (event: MouseEvent, tableId: string | null, columnId: string | null) => void;
-    onEndPreview: () => void;
-};
-export declare function createVisualization(state: RootState, props: Props): import('d3-selection').Selection<SVGSVGElement, undefined, null, undefined>;
-export {};
+import { ValuesType } from '../../internal-types';
+export declare const Group: {
+    readonly table: "table";
+    readonly column: "column";
+};
+export type Group = ValuesType<typeof Group>;
+/**
+ * One dot of the graph. d3 owns the position fields from the first step on,
+ * and a pinned node is one whose fixed pair is set, which is how a drag holds
+ * it against the forces the way the svg drag did.
+ */
+export type VisualizationNode = {
+    id: string;
+    group: Group;
+    name: string;
+    /** The table a column hangs off; a table node has none. */
+    tableId: string | null;
+    x: number;
+    y: number;
+    fx: number | null;
+    fy: number | null;
+};
+export declare const LinkKind: {
+    readonly column: "column";
+    readonly relationship: "relationship";
+};
+export type LinkKind = ValuesType<typeof LinkKind>;
+/**
+ * One line of the graph. Each end is an id when the link is built and the node
+ * it named once the link force has resolved it, which createVisualization does
+ * before it returns; linkEnds is the read that takes that for granted.
+ */
+export type VisualizationLink = {
+    id: string;
+    kind: LinkKind;
+    source: VisualizationNode | string;
+    target: VisualizationNode | string;
+};
+export type VisualizationGraph = {
+    nodes: VisualizationNode[];
+    links: VisualizationLink[];
+};
+export type Visualization = VisualizationGraph & {
+    simulation: Simulation<VisualizationNode, VisualizationLink>;
+};
+/**
+ * The document as a graph: a node per table and per column, a link from each
+ * column to its table and one per pair of tables a relationship joins. The
+ * pair is ordered, so the same two tables joined both ways draw two lines.
+ */
+export declare function convertVisualization({ doc: { tableIds, relationshipIds }, collections, }: RootState): VisualizationGraph;
+/**
+ * Both ends of a link as nodes. The link force rewrote each id to its node when
+ * createVisualization installed it, and no link reaches a scene before that.
+ */
+export declare function linkEnds(link: VisualizationLink): [VisualizationNode, VisualizationNode];
+/**
+ * The graph with the force layout running over it. The forces are the ones the
+ * svg graph ran, links holding their length, nodes repelling and both axes
+ * pulling toward the origin, which the view puts at the middle of the stage.
+ *
+ * @example
+ * const { nodes, links, simulation } = createVisualization(store.state);
+ * simulation.on('tick', redraw);
+ */
+export declare function createVisualization(state: RootState): Visualization;

package/dist/components/visualization/graph-node/GraphNode.d.ts

@@ -0,0 +1,23 @@
+import { FC } from '@dineug/r-html';
+import { Visualization, VisualizationNode } from '../createVisualization';
+import { VisualizationState } from '../visualizationView';
+export type GraphNodeProps = {
+    node: VisualizationNode;
+    /**
+     * The node's place, handed down rather than read off the node, so a step of
+     * the simulation the scene saw reaches this dot as a changed prop.
+     */
+    x: number;
+    y: number;
+    /** Outside the neighbourhood of the hovered table, which the scene decides. */
+    dimmed: boolean;
+    graph: Visualization;
+    state: VisualizationState;
+};
+/**
+ * One dot, owning its own hover and drag. A hovered table opens its preview
+ * and lights its neighbourhood, a hovered column only wears a ring, and a
+ * press pins the node under the pointer and reheats the layout around it.
+ */
+declare const GraphNode: FC<GraphNodeProps>;
+export default GraphNode;

package/dist/components/visualization/table/Table.d.ts

@@ -2,7 +2,6 @@ import { FC } from '@dineug/r-html';
 import { Table } from '../../../internal-types';
 export type TableProps = {
     table: Table;
-    columnId: string | null;
     x: number;
     y: number;
 };