@dineug/erd-editor 3.3.1 → 3.5.0

package/README.md

@@ -1,9 +1,31 @@
-# erd-editor
+# @dineug/erd-editor
 
-> Entity-Relationship Diagram Editor
+> Entity-Relationship Diagram Editor as a custom element
 
 ![erd-editor](https://github.com/dineug/erd-editor/blob/main/img/erd-editor-vscode.png?raw=true)
 
+`<erd-editor>` is a full database-schema editor in a single custom element. It has no
+framework dependency and renders into a closed shadow root, so it drops into any page —
+React, Vue, Svelte, or plain HTML — without leaking styles either way.
+
+This is the same editor that powers [erd-editor.io](https://erd-editor.io), the
+[VS Code extension](https://marketplace.visualstudio.com/items?itemName=dineug.vuerd-vscode)
+and the [IntelliJ plugin](https://plugins.jetbrains.com/plugin/23594-erd-editor).
+
+## Features
+
+- Visual schema design — tables, columns, memos, and four relationship cardinalities
+  (zero-one, zero-N, one-only, one-N)
+- Import — a `.sql` dump, a GraphQL SDL schema from any tool that emits one, a `.dbml` file, or
+  an `.aml` file
+- SQL DDL export — Databricks, MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, Snowflake and SQLite
+- Code generation — TypeScript, GraphQL, C#, Java, JPA, Kotlin, Scala, Go,
+  SQLAlchemy, TypeORM, Sequelize, Drizzle, DBML, AML
+- Export — `.erd.json`, `.sql`, `.png`
+- Force-directed visualization of table relationships
+- Quick search, undo / redo, remappable keyboard shortcuts, and a built-in theme builder
+- Collaboration hooks — the editor emits and applies actions; you supply the transport
+
 ## Install
 
 ```sh
@@ -16,37 +38,195 @@ npm install @dineug/erd-editor
 import '@dineug/erd-editor';
 
 const editor = document.createElement('erd-editor');
+// the editor fills its container, and a custom element is inline by default
+Object.assign(editor.style, { display: 'block', width: '100%', height: '100vh' });
 document.body.appendChild(editor);
+
+// load a document without adding an undo entry, then keep it in sync
+editor.setInitialValue(localStorage.getItem('my-diagram') ?? '');
+editor.addEventListener('change', () => {
+  localStorage.setItem('my-diagram', editor.value);
+});
 ```
 
-### CDN
+`setInitialValue('')` starts an empty document.
+
+### Server-side rendering
+
+Importing the package registers the custom element at module scope, so it needs a DOM and
+throws in Node. In Next.js, Nuxt, SvelteKit or Astro, reach it from a client-only path:
+
+```js
+useEffect(() => {
+  import('@dineug/erd-editor');
+}, []);
+```
+
+### HTML
 
 ```html
+<erd-editor system-dark-mode enable-theme-builder></erd-editor>
 <script type="module">
-  import 'https://esm.run/@dineug/erd-editor';
+  import '@dineug/erd-editor';
 
-  const editor = document.createElement('erd-editor');
-  document.body.appendChild(editor);
+  const editor = document.querySelector('erd-editor');
 </script>
-<!-- or -->
-<script type="module" src="https://esm.run/@dineug/erd-editor"></script>
 ```
 
-### html
+```css
+erd-editor {
+  display: block;
+  width: 100%;
+  height: 100vh;
+}
+```
+
+### CDN
 
 ```html
-<erd-editor readonly system-dark-mode enable-theme-builder></erd-editor>
+<erd-editor style="display: block; width: 100%; height: 100vh"></erd-editor>
 <script type="module">
   import 'https://esm.run/@dineug/erd-editor';
-
-  const editor = document.querySelector('erd-editor');
 </script>
 ```
 
-## [Document](https://docs.erd-editor.io)
+## API
+
+### Attributes
+
+| Attribute | Property | Description |
+| --- | --- | --- |
+| `readonly` | `readonly` | Blocks editing and suppresses the `change` event. Assigning `value`, `setSchemaSQL()`, `setSchemaGraphQL()`, `setSchemaDBML()`, `setSchemaAML()` and `clear()` are ignored while it is set — load with `setInitialValue()` instead. Viewport actions and the SQL/code output settings still apply. |
+| `system-dark-mode` | `systemDarkMode` | Follows the OS color scheme |
+| `enable-theme-builder` | `enableThemeBuilder` | Shows the built-in theme builder |
+
+### Properties
+
+| Property | Description |
+| --- | --- |
+| `value: string` | The document as JSON — an `.erd.json` document ([schema](https://github.com/dineug/erd-editor/blob/main/json-schema/schema.json)). Assigning it loads the document as an edit, so it lands in the undo history; use `setInitialValue` to load without one. |
+
+### Methods
+
+| Method | Description |
+| --- | --- |
+| `setInitialValue(value: string)` | Load the initial document. Does not create a history entry. |
+| `getSchemaSQL(vendor?)` | Export DDL. `vendor` is one of `Databricks`, `MariaDB`, `MSSQL`, `MySQL`, `Oracle`, `PostgreSQL`, `Snowflake`, `SQLite`; omit it to use the document's own setting. |
+| `setSchemaSQL(value: string)` | Parse a DDL string and **replace** the current document with it. Lands in the undo history; an empty string is ignored. |
+| `setSchemaGraphQL(value: string)` | Parse a GraphQL SDL string and **replace** the current document with it. Object types become tables, scalars map to the document's own dialect, and relationships are read from the fields that point at another type. Lands in the undo history; an empty string is ignored. |
+| `setSchemaDBML(value: string)` | Parse a DBML string and **replace** the current document with it. Tables, columns, indexes and every `Ref` spelling are read; a `Project`, `TableGroup` or sticky `Note` is skipped, and text it cannot read loads an empty document rather than being refused. Lands in the undo history; an empty string is ignored. |
+| `setSchemaAML(value: string)` | Parse an [AML](https://azimutt.app) string and **replace** the current document with it. Entities, attributes, indexes and every relation arrow are read, in the v2 and the legacy v1 spelling; a check, a struct type and a view are skipped, and text it cannot read loads an empty document rather than being refused. Lands in the undo history; an empty string is ignored. |
+| `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. |
+| `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. |
+| `destroy()` | Tear the editor down and release its listeners, subscriptions and shared stores. |
+
+### Events
+
+| Event | Description |
+| --- | --- |
+| `change` | The document changed. Debounced, and never fired while `readonly`. Read `editor.value`. |
+| `changePresetTheme` | The theme was changed from inside the editor. `event.detail` carries the new options. |
+
+## Syntax highlighting
+
+The SQL and code-generation panels render as plain text unless a highlighter is supplied.
+[`@dineug/erd-editor-shiki-worker`](https://www.npmjs.com/package/@dineug/erd-editor-shiki-worker)
+runs one in a shared worker. It is a separate install:
+
+```sh
+npm install @dineug/erd-editor-shiki-worker
+```
 
-- [Web App](https://erd-editor.io)
-- [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=dineug.vuerd-vscode)
-- [IntelliJ Plugin](https://plugins.jetbrains.com/plugin/23594-erd-editor)
+```js
+import { setGetShikiServiceCallback } from '@dineug/erd-editor';
+
+// deferred, so the highlighter never lands in your main chunk
+import('@dineug/erd-editor-shiki-worker').then(({ getShikiService }) => {
+  setGetShikiServiceCallback(getShikiService);
+});
+```
+
+## File dialogs
+
+Import and export go through injectable callbacks, so a host without a browser file dialog —
+an IDE webview, for example — can supply its own. The two are not symmetric: export hands you
+the finished file, while import only asks for one, and you push the content back in yourself.
+
+```js
+import { setExportFileCallback, setImportFileCallback } from '@dineug/erd-editor';
+
+setExportFileCallback((blob, { fileName }) => host.writeFile(fileName, blob));
+
+setImportFileCallback(async ({ type, op, accept }) => {
+  const text = await host.pickFile(accept);
+
+  if (op === 'diff') {
+    editor.setDiffValue(text);
+  } else if (type === 'json') {
+    editor.value = text;
+  } else if (type === 'sql') {
+    editor.setSchemaSQL(text);
+  } else if (type === 'graphql') {
+    editor.setSchemaGraphQL(text);
+  } else if (type === 'dbml') {
+    editor.setSchemaDBML(text);
+  } else if (type === 'aml') {
+    editor.setSchemaAML(text);
+  }
+});
+```
+
+Dispatch on every `type` you handle and ignore the rest. Assigning `value` clears the
+document before it parses, so routing a payload there that is not an `.erd.json` document —
+through a catch-all `else`, or because a `type` added later fell through — empties the
+diagram instead of importing anything. `accept` carries the extensions for that type
+(`.json`, `.sql`, or `.graphql,.gql,.graphqls`), ready to hand to a host file dialog.
+
+Left unset, the editor uses the browser's own download and file-picker behavior.
+
+## Headless replica
+
+A second entry point runs the document store with no DOM, for hosts that need to apply an
+action stream and serialize the result off the main thread:
+
+```js
+import { createReplicationStore } from '@dineug/erd-editor/engine.js';
+
+// `toWidth` measures text for layout — a worker has no DOM, so you supply it
+const store = createReplicationStore({ toWidth });
+
+store.setInitialValue(savedJson);
+store.on({ change: () => persist(store.value) });
+store.dispatch(actions); // actions relayed from a live editor's shared store
+```
+
+## Development
+
+This package is the editor core of the [erd-editor monorepo](https://github.com/dineug/erd-editor);
+work on it from a workspace checkout.
+
+```sh
+pnpm --filter @dineug/erd-editor dev            # builds workspace deps, then a dev server
+pnpm --filter @dineug/erd-editor dev:storybook  # component playground
+pnpm exec vp run --filter @dineug/erd-editor --fail-if-no-match test
+pnpm --filter @dineug/erd-editor e2e            # Playwright
+```
+
+## Documentation
+
+- [Documentation](https://docs.erd-editor.io)
 - [Editing Guide](https://docs.erd-editor.io/docs/category/guides)
-- [API](https://docs.erd-editor.io/docs/api/erd-editor-element)
+- [Element API](https://docs.erd-editor.io/docs/api/erd-editor-element)
+
+## Issues
+
+Found a bug or want a feature? [Open an issue](https://github.com/dineug/erd-editor/issues).
+
+## License
+
+[MIT](https://github.com/dineug/erd-editor/blob/main/LICENSE) © SeungHwan-Lee

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/altDragDuplicate.d.ts

@@ -0,0 +1,3 @@
+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;

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

@@ -0,0 +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;