@dineug/erd-editor 3.9.1 → 3.10.0

package/README.md

@@ -9,8 +9,10 @@ framework dependency and renders into a closed shadow root, so it drops into any
 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).
+[Google Drive app](https://workspace.google.com/marketplace/app/erd_editor/428467403360), the
+[VS Code extension](https://marketplace.visualstudio.com/items?itemName=dineug.vuerd-vscode),
+the [IntelliJ plugin](https://plugins.jetbrains.com/plugin/23594-erd-editor) and the
+[Obsidian plugin](https://community.obsidian.md/plugins/erd-editor).
 
 ## Features
 
@@ -23,7 +25,8 @@ and the [IntelliJ plugin](https://plugins.jetbrains.com/plugin/23594-erd-editor)
   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
+- Quick search over commands, and over tables, columns, comments and memos after `#`, `@` or `:`,
+  find and replace, undo / redo, remappable keyboard shortcuts, and a built-in theme builder
 - Collaboration hooks — the editor emits and applies actions; you supply the transport
 
 ## Install
@@ -57,7 +60,10 @@ editor.addEventListener('change', () => {
 });
 ```
 
-`setInitialValue('')` starts an empty document.
+`setInitialValue('')` starts a new document, as an element given no value shows: it saves neither
+the scroll nor the zoom (Save Scroll Information and Save Zoom Information off), so looking around
+leaves `value` as it was. A document loaded from text keeps the switches it names, and one that
+names none saves both.
 
 ### Server-side rendering
 
@@ -132,7 +138,7 @@ erd-editor {
 
 | 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. |
+| `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. Assigning an empty string loads a new document, as `setInitialValue('')` does. |
 
 ### Methods
 
@@ -147,19 +153,43 @@ 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`, `zoomOut` and `zoomReset` are reserved. |
+| `setKeyBindingMap(map)` | Remap shortcuts, `search` and `findReplace` among them. `edit`, `stop`, `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. |
+| `clear()` | Empty the document. Its settings stay, the save switches included, so a cleared file keeps saving what it saved. |
 | `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`. |
+| `change` | The document changed. Debounced, and never fired while `readonly`. Read `editor.value`. A scroll or a zoom fires it too. A scroll leaves `value` as it was with Save Scroll Information off; a zoom moves the scroll position too, so it leaves `value` as it was only with Save Zoom Information and Save Scroll Information both off. `value` differs from a file another release or machine wrote from the load on, so a host that writes files tells an edit from such a change by a [headless replica](#headless-replica)'s `changed`, not by comparing bytes with the file. |
 | `changePresetTheme` | The theme was changed from inside the editor. `event.detail` carries the new options. |
 
+## Key bindings
+
+`createKeyBindingMap()` returns the shortcuts an editor listens for until `setKeyBindingMap`
+changes them, as a new map on every call. Each is a [tinykeys](https://github.com/jamiebuilds/tinykeys)
+chord that names its key by `KeyboardEvent.code`, where `$mod` is Cmd on macOS and Ctrl elsewhere.
+
+```js
+import { createKeyBindingMap } from '@dineug/erd-editor';
+
+const shortcuts = Object.values(createKeyBindingMap())
+  .flat()
+  .map(({ shortcut }) => shortcut); // '$mod+KeyK', 'Alt+Enter', ...
+```
+
+The editor listens on its own element, so a host that takes keys before the page does, with
+global hotkeys or a capture-phase `keydown` listener, has to let these through while the editor
+is focused. The `KeyBindingMap`, `KeyBindingName` and `ShortcutOption` types come with it.
+
+The page's own find is among them: while the editor is focused, on any of its tabs, `$mod+KeyF`
+opens its Find and Replace, bringing the ERD tab up, and is prevented, so the browser opens no find
+bar; while the diff viewer, time travel or the automatic placement preview covers the ERD tab, the
+press goes on to the page. `setKeyBindingMap({ findReplace: [] })` leaves it to the page on every
+tab, and the toolbar button, the quick search and the context menu still open Find and Replace.
+
 ## Syntax highlighting
 
 The SQL and code-generation panels are highlighted by [Shiki](https://shiki.style), in a shared
@@ -229,10 +259,17 @@ import { createReplicationStore } from '@dineug/erd-editor/engine.js';
 const store = createReplicationStore({ toWidth });
 
 store.setInitialValue(savedJson);
-store.on({ change: () => persist(store.value) });
+store.on({ change: ({ value, changed }) => changed && persist(value) });
 store.dispatch(actions); // actions relayed from a live editor's shared store
 ```
 
+`change` comes 200 ms after the last action that can change the document. `changed` is false
+when those actions left `value` as it was, such as a scroll with Save Scroll Information off, or a
+zoom with Save Zoom Information and Save Scroll Information both off: a zoom moves the scroll
+position too, so with only the scroll saved it changes `value`. It compares with the value the
+store last reported, or loaded, never with your file: a file another release or machine wrote
+serializes differently from the start.
+
 ## Development
 
 This package is the editor core of the [erd-editor monorepo](https://github.com/dineug/erd-editor);

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

@@ -2,6 +2,7 @@ import { FC } from '@dineug/r-html';
 export type ErdProps = {
     isDarkMode: boolean;
     mouseTracking: boolean;
+    readonly: boolean;
 };
 declare const Erd: FC<ErdProps>;
 export default Erd;

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

@@ -5,6 +5,8 @@ export type RelationshipProps = {
     strokeWidth: number;
     /** Whether the view lights this connector, decided by the scene it is drawn in. */
     lit?: boolean;
+    /** Told as the pointer comes onto the connector and leaves it, for its label to light along. */
+    onHover?: (id: string, hover: boolean) => void;
 };
 declare const Relationship: FC<RelationshipProps>;
 export default Relationship;

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

@@ -0,0 +1,32 @@
+import { FC } from '@dineug/r-html';
+import { Relationship } from '../../../../../internal-types';
+import { Anchor } from '../../../../../utils/draw-relationship';
+/** The size the referential action label is drawn at, in scene units. */
+export declare const ACTION_LABEL_FONT_SIZE = 10;
+type LabelBox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * The box the label fills beside the child end: over a route leaving sideways,
+ * reaching away from the table, and right of one leaving up or down. Across, it
+ * clears the widest marker, so no stroke of a crow's foot runs under it.
+ */
+export declare function actionLabelBox(end: Anchor, text: string): LabelBox;
+export type RelationshipActionLabelProps = {
+    relationship: Relationship;
+    /** The connector the pointer rests on, whose label lights with it. */
+    hovered?: {
+        id: string;
+    };
+};
+/**
+ * The ON DELETE and ON UPDATE a connector sets, at its child end, on a box of
+ * the canvas colour. The group draws every label after every route, so another
+ * connector crossing one runs under the box rather than through the text.
+ */
+declare const RelationshipActionLabel: FC<RelationshipActionLabelProps>;
+export default RelationshipActionLabel;
+//# sourceMappingURL=RelationshipActionLabel.d.ts.map

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

@@ -77,6 +77,17 @@ export declare function getCellTextBaseline(fontFamily?: string): number;
 export declare function getCellTextHeight(fontFamily?: string): number;
 /** Where a column row's cells start, past the key badge its own source sizes. */
 export declare function getColumnCellsX(source?: GeometrySource): number;
+/**
+ * Where a document row's alternate key mark starts: one margin past the last
+ * of the cells given, whatever order the settings put them in. The mark is
+ * derived, so it is no cell of that order and nothing focuses, edits or moves it.
+ */
+export declare function getAlternateKeyMarkX(slots: ColumnCellSlot[]): number;
+/**
+ * The box the mark's code face line is centred in, so it stands on the text
+ * face's baseline, the one the cell before it is drawn on, and not on its own.
+ */
+export declare function getAlternateKeyMarkHeight(): number;
 /** The comment width a table draws at, clamped by the setting when it is set. */
 export declare function getWidthComment(state: RootState, table: Table): number;
 /**

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

@@ -45,6 +45,13 @@ export type ColumnProps = {
     widthDataType: number;
     widthDefault: number;
     widthComment: number;
+    /**
+     * The room the table keeps for alternate key marks after the last cell, 0
+     * while it draws none; the same for every row, so the marks stay in line.
+     */
+    widthAlternateKey?: number;
+    /** The mark this row carries in that room, AK1.2 or several comma joined. */
+    alternateKey?: string;
     focusName: boolean;
     focusDataType: boolean;
     focusNotNull: boolean;

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

@@ -1,15 +1,8 @@
-import { GeneratorAction } from '../../../../engine/generator.actions';
 import { RxStore } from '../../../../engine/rx-store';
 /**
- * Stands the reader on one table in the document, selected, scrolled to the
- * middle of the screen at the document's own zoom unless it is already on
- * screen whole, since that scroll is the one change the host hears of. One that is gone is passed over.
- */
-export declare const showErdTableAction$: (tableId: string) => GeneratorAction;
-/**
- * The Go to ERD button's whole errand: the tab in one dispatch, the scroll and
- * the selection in a second. A batch is classified by the state before it, so
- * a scroll travelling with the tab change would be redirected into the view it leaves.
+ * The Go to ERD button's whole errand, a jump from outside the canvas like any
+ * other: the tab in one dispatch, then the scroll and the selection, which
+ * never starts or finishes a relationship being drawn.
  *
  * @example
  * goToErdTable(store, 'orders');

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

@@ -5,4 +5,15 @@ export declare function createRelationshipMenus({ store }: AppContext, relations
     name: string;
     onClick: () => void;
 }[];
+export type ReferentialActionField = 'onDelete' | 'onUpdate';
+/**
+ * The ON DELETE or ON UPDATE choices of a relationship, its own one checked.
+ * One the current database's DDL would drop stays choosable, with a note.
+ */
+export declare function createReferentialActionMenus({ store }: AppContext, field: ReferentialActionField, relationshipId?: string): {
+    checked: boolean;
+    name: string;
+    note: string | null;
+    onClick: () => void;
+}[];
 //# sourceMappingURL=relationshipMenus.d.ts.map

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

@@ -0,0 +1,85 @@
+import { GeneratorAction } from '../../engine/generator.actions';
+import { FocusType } from '../../engine/modules/editor/state';
+import { RxStore } from '../../engine/rx-store';
+import { RootState } from '../../engine/state';
+import { Table } from '../../internal-types';
+import { Rect } from '../../konva/scene/metrics';
+/** The part of a cell's text a jump is for, a search's match say: text from start to end. */
+export type TextRange = {
+    text: string;
+    start: number;
+    end: number;
+};
+/** What a jump to the ERD lands on: a table, one cell of a column, or a memo. */
+export type ErdTarget = {
+    kind: 'table';
+    tableId: string;
+    focusType?: FocusType;
+    range?: TextRange;
+} | {
+    kind: 'column';
+    tableId: string;
+    columnId: string;
+    focusType: FocusType;
+    range?: TextRange;
+} | {
+    kind: 'memo';
+    memoId: string;
+};
+type Span = {
+    start: number;
+    end: number;
+};
+/**
+ * The scroll that puts the rect in the middle of what the screen shows at the
+ * document's own zoom, unless it is shown whole already, since that scroll is
+ * the one change of a jump the host hears of.
+ *
+ * @param focus The part of a rect too big for the screen that has to show.
+ */
+export declare function scrollIntoView(state: RootState, rect: Rect, covered?: number, focus?: Rect): Generator<import('@dineug/r-html').AnyAction<{
+    originX: number;
+    originY: number;
+}>, void, unknown>;
+/**
+ * Brings a table on screen whole, or one too big for the screen by the header
+ * cell a jump rings, its name unless it asks for the comment, rather than by
+ * a middle.
+ *
+ * @param range Where the text a jump is for stands in that cell, in from its left edge.
+ */
+export declare function scrollTableIntoView(state: RootState, table: Table, covered?: number, focusType?: FocusType, range?: Span): Generator<import('@dineug/r-html').AnyAction<{
+    originX: number;
+    originY: number;
+}>, void, unknown>;
+/**
+ * Selects the table alone and brings it to the front, as a press on it does,
+ * bar the press's part in a relationship being drawn: a jump only shows, so it
+ * never starts or finishes one, which would add a relationship and a column.
+ */
+export declare const selectTableAloneAction$: (tableId: string) => GeneratorAction;
+/**
+ * Stands the reader on a table, a column cell or a memo the way the Go to ERD
+ * button stands them on a table, with the focus ring on the cell asked for. A
+ * row too wide goes by the ringed cell, a cell too wide by the range found.
+ *
+ * @param covered How far in from the left edge a panel over the canvas hides it.
+ */
+export declare const showErdTargetAction$: (target: ErdTarget, covered?: number) => GeneratorAction;
+/**
+ * Takes the ERD tab when another is up, in a dispatch of its own: a batch is
+ * classified by the state before it, so a scroll travelling with the tab
+ * change would be redirected into the view it leaves.
+ */
+export declare function showErdTab(store: RxStore): void;
+/**
+ * A jump from outside the canvas, a search result say, to anything it holds,
+ * from whichever tab is up. It lands clear of the Find and Replace panel, read
+ * once the ERD tab is up, so a panel that tab draws again counts too.
+ *
+ * @example
+ * goToErdTarget(store, { kind: 'memo', memoId: 'note' });
+ */
+export declare function goToErdTarget(store: RxStore, target: ErdTarget): void;
+export {};
+//# sourceMappingURL=goToErdTarget.d.ts.map

package/dist/components/erd/table-properties/TableProperties.d.ts

@@ -1,6 +1,8 @@
 import { FC } from '@dineug/r-html';
 export type TablePropertiesProps = {
     isDarkMode: boolean;
+    /** The editor's readonly mode, which the dialog shows and its controls follow; the store refuses the edits anyway. */
+    readonly?: boolean;
     tableId: string;
     tableIds: string[];
     onChange: (tableId: string) => void;

package/dist/components/erd/table-properties/TableProperties.styles.d.ts

@@ -1,7 +1,29 @@
+/**
+ * Dims the canvas and hangs the dialog from the palette's line, so switching
+ * tabs never moves its top edge.
+ */
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * One fixed box for all three tabs, so the frame never jumps; a short host
+ * gets the height it has. It sets no font size, or the tabs would shrink too.
+ */
 export declare const container: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const scrollbarArea: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const header: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const tab: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const title: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const readonlyBadge: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * Shades a sideways scroller's edge only where more lies past it: two covers
+ * in the panel colour, solid as wide as a shade, ride with the content over
+ * two edge shades, the cue an overlay scrollbar leaves out.
+ */
+export declare const edgeShade: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const tables: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const tableChip: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const close: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const scrollbarArea: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The Indexes panes side by side, stacked once the dialog is too narrow for
+ * both; a code tab instead fills the body as a well that scrolls on its own.
+ */
 export declare const scope: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=TableProperties.styles.d.ts.map

package/dist/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.d.ts

@@ -1,6 +1,8 @@
 import { FC } from '@dineug/r-html';
 export type TablePropertiesIndexesProps = {
     tableId: string;
+    /** The editor's readonly mode: nothing here offers an edit, and picking a row only shows it. */
+    readonly?: boolean;
 };
 declare const TablePropertiesIndexes: FC<TablePropertiesIndexesProps>;
 export default TablePropertiesIndexes;

package/dist/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.styles.d.ts

@@ -1,4 +1,36 @@
+/**
+ * The room the keys and indexes stick in, which keeps their width. Side by
+ * side it stretches as tall as the columns, so they stay in sight while a
+ * long list scrolls; stacked above the columns it is only as tall as its rows.
+ */
+export declare const leftTrack: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const leftArea: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The columns, which take what the keys leave and scroll sideways past that.
+ * A box the keyboard reaches scrolls clear of the stuck heading and order,
+ * which the browser would otherwise count as showing it.
+ */
 export declare const rightArea: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The Columns heading, stuck to the top of the body while the rows scroll
+ * under it. It reaches back over the body padding, as the order does at the
+ * bottom, so no row shows above it.
+ */
+export declare const columnsHead: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const sectionLabel: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * Read, not hinted at: the placeholder colour is too faint for a sentence. A
+ * flex box draws no ellipsis, so its text span cuts itself short.
+ */
+export declare const sectionStatus: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const columns: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const hint: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const addIndexButtonArea: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const addIcon: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The selected index's column order, ruled off under the columns. It sticks
+ * to the bottom of the body while a long list scrolls, and sits in place
+ * under a short one.
+ */
+export declare const order: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=TablePropertiesIndexes.styles.d.ts.map

package/dist/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.d.ts

@@ -3,6 +3,13 @@ import { Index } from '../../../../../internal-types';
 export type IndexesCheckboxColumnProps = {
     tableId: string;
     index: Index | null;
+    /**
+     * The columns of a key the columns declare, picked instead of an index: they
+     * show checked, and every box stays disabled, since no index owns them.
+     */
+    keyColumnIds?: string[] | null;
+    /** The editor's readonly mode, which disables every box as a picked key does. */
+    readonly?: boolean;
 };
 declare const IndexesCheckboxColumn: FC<IndexesCheckboxColumnProps>;
 export default IndexesCheckboxColumn;

package/dist/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.styles.d.ts

@@ -1,2 +1,7 @@
+/**
+ * The column rows at their own width, the tint running to the end of each
+ * row however far the list scrolls sideways. A column of the picked index
+ * or key wears the picked row's tint and bar; an idle list hovers no row.
+ */
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=IndexesCheckboxColumn.styles.d.ts.map

package/dist/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn.d.ts

@@ -2,6 +2,13 @@ import { FC } from '@dineug/r-html';
 import { Index } from '../../../../../internal-types';
 export type IndexesColumnProps = {
     index: Index;
+    /**
+     * The alternate key the index is, 1 for AK1, whose marks each row then
+     * carries as the diagram draws them; 0 or left out while it is none.
+     */
+    alternateKey?: number;
+    /** The editor's readonly mode: the rows neither drag nor flip their sort order. */
+    readonly?: boolean;
 };
 declare const IndexesColumn: FC<IndexesColumnProps>;
 export default IndexesColumn;

package/dist/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn.styles.d.ts

@@ -1,4 +1,7 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const grip: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const gripSlot: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const orderType: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const mark: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=IndexesColumn.styles.d.ts.map

package/dist/components/erd/table-properties/table-properties-indexes/indexes-index/IndexesIndex.d.ts

@@ -2,7 +2,14 @@ import { FC } from '@dineug/r-html';
 import { Index } from '../../../../../internal-types';
 export type IndexesIndexProps = {
     index: Index;
+    /**
+     * The alternate key this index is, 1 for AK1, which the diagram can mark its
+     * columns with; 0 while it is no unique index over two columns or more.
+     */
+    alternateKey?: number;
     selected: boolean;
+    /** The editor's readonly mode: the row only selects, with no remove button and a name it cannot type in. */
+    readonly?: boolean;
     onSelect: (index: Index | null) => void;
 };
 declare const IndexesIndex: FC<IndexesIndexProps>;

package/dist/components/erd/table-properties/table-properties-indexes/indexes-index/IndexesIndex.styles.d.ts

@@ -1,5 +1,11 @@
+/**
+ * A row of the canvas table's height. Its remove button stays in sight, in
+ * the lock's place on a key row, and a hovered row lines its name field.
+ */
 export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const nameCell: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const input: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const unique: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const alternateKey: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const iconButton: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=IndexesIndex.styles.d.ts.map

package/dist/components/erd/table-properties/table-properties-indexes/indexes-key/IndexesKey.d.ts

@@ -0,0 +1,15 @@
+import { FC } from '@dineug/r-html';
+import { ColumnKey } from '../../../../../utils/tableKeys';
+export type IndexesKeyProps = {
+    columnKey: ColumnKey;
+    selected: boolean;
+    onSelect: (columnKey: ColumnKey) => void;
+};
+/**
+ * A key the table's columns declare, listed beside the indexes so every key
+ * shows in one place. A lock stands where an index has its remove button:
+ * selecting it only shows its columns, and the columns are where it changes.
+ */
+declare const IndexesKey: FC<IndexesKeyProps>;
+export default IndexesKey;
+//# sourceMappingURL=IndexesKey.d.ts.map

package/dist/components/erd/table-properties/table-properties-indexes/indexes-key/IndexesKey.styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * An index row's box, picked as an index is: a bar along its left edge
+ * carries the selection where the light theme's tint is too faint alone.
+ */
+export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * A filled tag, where an index row has its UQ toggle and as wide, so the
+ * names start in one line; filled, it reads as a label and never as a toggle.
+ */
+export declare const tag: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const name: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const lock: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=IndexesKey.styles.d.ts.map

package/dist/components/erd-editor/ErdEditor.d.ts

@@ -22,7 +22,7 @@ export interface ErdEditorElement extends ErdEditorProps, HTMLElement {
     setInitialValue: (value: string) => void;
     setPresetTheme: (themeOptions: Partial<ThemeOptions>) => void;
     setTheme: (theme: Partial<ThemeType>) => void;
-    setKeyBindingMap: (keyBindingMap: Partial<Omit<KeyBindingMap, typeof KeyBindingName.edit | typeof KeyBindingName.stop | typeof KeyBindingName.search | typeof KeyBindingName.undo | typeof KeyBindingName.redo | typeof KeyBindingName.zoomIn | typeof KeyBindingName.zoomOut | typeof KeyBindingName.zoomReset>>) => void;
+    setKeyBindingMap: (keyBindingMap: Partial<Omit<KeyBindingMap, typeof KeyBindingName.edit | typeof KeyBindingName.stop | typeof KeyBindingName.undo | typeof KeyBindingName.redo | typeof KeyBindingName.zoomIn | typeof KeyBindingName.zoomOut | typeof KeyBindingName.zoomReset>>) => void;
     setSchemaSQL: (value: string) => void;
     setSchemaGraphQL: (value: string) => void;
     setSchemaDBML: (value: string) => void;

package/dist/components/find-replace/FindReplace.d.ts

@@ -0,0 +1,13 @@
+import { FC } from '@dineug/r-html';
+export type FindReplaceProps = {
+    readonly: boolean;
+};
+/** How many result rows the list draws at once; the rest are reached by moving through them. */
+export declare const MATCH_ROW_LIMIT = 200;
+/** The rows drawn for a list longer than the limit: a window kept around the current match. */
+export declare function rowWindow(current: number, total: number, limit?: number): [number, number];
+/** How long the panel waits for typing to pause before it searches a regular expression. */
+export declare const REGEX_INPUT_DELAY = 150;
+declare const FindReplace: FC<FindReplaceProps>;
+export default FindReplace;
+//# sourceMappingURL=FindReplace.d.ts.map

package/dist/components/find-replace/FindReplace.styles.d.ts

@@ -0,0 +1,27 @@
+/** What the panel's box adds to the height of its controls: its padding and border, above and below. */
+export declare const PANEL_CHROME_HEIGHT: number;
+/**
+ * A panel over the top left of the canvas, clear of the minimap in the other
+ * corner. Its top and height are set inline, since zen mode takes the toolbar
+ * above it away; on a short canvas the list gives up its height first.
+ */
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const controls: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const header: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const actions: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const input: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const toggle: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const scopes: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const scope: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const status: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const count: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const list: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const match: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const icon: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const body: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const text: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const mark: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const location: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const more: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=FindReplace.styles.d.ts.map

package/dist/components/find-replace/fieldIcon.d.ts

@@ -0,0 +1,5 @@
+import { DOMTemplateLiterals } from '@dineug/r-html';
+import { FindField } from '../../utils/find-replace';
+/** The icon a result row carries for the kind of text it was found in. */
+export declare function fieldIcon(field: FindField, size?: number): DOMTemplateLiterals;
+//# sourceMappingURL=fieldIcon.d.ts.map

package/dist/components/find-replace/matchTarget.d.ts

@@ -0,0 +1,26 @@
+import { ErdTarget } from '../erd/goToErdTarget';
+import { EngineContext } from '../../engine/context';
+import { GeneratorAction } from '../../engine/generator.actions';
+import { RootState } from '../../engine/state';
+import { FindMatch } from '../../utils/find-replace';
+/**
+ * Where on the ERD canvas the text of a match is edited: its table, its column
+ * cell or its memo, with the match itself, which a cell too wide for the
+ * canvas is scrolled to by.
+ */
+export declare function toErdTarget(match: FindMatch): ErdTarget;
+/**
+ * The state as a jump measures it once a replacement is in: the field holding
+ * the new text at the width its reducer gives it. A memo's text sizes nothing,
+ * and a table or column the document no longer holds is left as it is.
+ */
+export declare function withReplacement(state: RootState, { toWidth }: EngineContext, { field, id, tableId }: FindMatch, value: string): RootState;
+/**
+ * The jump Replace makes to the next match, in the replacement's own dispatch.
+ * A batch is read against the state before it, so the jump measures the table
+ * the replacement widens or narrows from what the replacement writes.
+ *
+ * @param covered How far in from the left edge the panel hides the canvas.
+ */
+export declare const showNextMatchAction$: (next: FindMatch, replaced: FindMatch, value: string, covered: number) => GeneratorAction;
+//# sourceMappingURL=matchTarget.d.ts.map

package/dist/components/find-replace/panelLayout.d.ts

@@ -0,0 +1,17 @@
+import { RootState } from '../../engine/state';
+/** The overlays that take the whole canvas over, under which the panel stands down and opens on nothing. */
+export declare const TAKEOVERS: ("automaticTablePlacement" | "diffViewer" | "timeTravel")[];
+/** Whether an overlay that takes the canvas over is up, which keeps Find and Replace shut. */
+export declare const isTakenOver: ({ editor }: RootState) => boolean;
+/** Whether the panel is drawn: it stands aside, still open, while a dialog it would paint over is up. */
+export declare const isPanelShown: (state: RootState) => boolean;
+/** How far in from the left of the canvas the panel stands, and how wide it is at most, as FindReplace.styles draws it. */
+export declare const PANEL_LEFT = 16;
+export declare const PANEL_WIDTH = 380;
+/**
+ * How far in from the left edge of the canvas the panel hides it, read from
+ * the state rather than the panel's box, so a jump that brings the panel back
+ * with the ERD tab lands clear of it too. None while the panel is not drawn.
+ */
+export declare function coveredWidth(state: RootState): number;
+//# sourceMappingURL=panelLayout.d.ts.map