@dineug/erd-editor 3.9.2 → 4.0.0

package/dist/components/erd/draw-target/DrawTargetButtons.styles.d.ts

@@ -0,0 +1,14 @@
+/** The buttons' own size on screen at any zoom, read by the placement too. */
+export declare const PILL_BUTTON = 26;
+export declare const PILL_PADDING = 4;
+export declare const PILL_BORDER = 1;
+export declare const PILL_GAP = 2;
+/** The canvas-sized layer the outline, the gutter and the buttons stand in. */
+export declare const layer: import('@dineug/r-html').CSSTemplateLiterals;
+/** The table the buttons act on, outlined in the colour of the draw's preview line. */
+export declare const outline: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const gutter: import('@dineug/r-html').CSSTemplateLiterals;
+/** The floating toolbar's pill, stood on its end. */
+export declare const pill: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const button: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=DrawTargetButtons.styles.d.ts.map

package/dist/components/erd/draw-target/drawTargetState.d.ts

@@ -0,0 +1,26 @@
+import { RootState } from '../../../engine/state';
+import { Point } from '../../../internal-types';
+/**
+ * What the buttons beside the table a relationship is drawn to follow, in
+ * screen pixels from the top left of the editor's canvas root.
+ */
+export type DrawTarget = {
+    /** Where the pointer last stood over the canvas, or null once it left. */
+    pointer: Point | null;
+    /** The press that picked the table the draw starts from. */
+    pressPoint: Point | null;
+    /** Whether the pointer has travelled far enough from that press for the start table to offer the buttons too. */
+    selfArmed: boolean;
+    /** The table the pointer points the draw at. */
+    targetId: string | null;
+};
+/** Reads the record through the observable, so a render or an observer tracks it. */
+export declare function getDrawTarget(root: RootState): Readonly<DrawTarget>;
+/**
+ * Writes the fields given and leaves the rest, each only when it changes, so an
+ * observer that reads a field and writes the value it read settles at once.
+ */
+export declare function updateDrawTarget(root: RootState, patch: Partial<DrawTarget>): void;
+/** Forgets everything the draw held, as it ends or the canvas goes away. */
+export declare function clearDrawTarget(root: RootState): void;
+//# sourceMappingURL=drawTargetState.d.ts.map

package/dist/components/erd/draw-target/findDrawTarget.d.ts

@@ -0,0 +1,29 @@
+import { RootState } from '../../../engine/state';
+import { Point } from '../../../internal-types';
+import { Rect } from '../../../konva/scene/metrics';
+/**
+ * How far the pointer travels from the press that started a draw, in screen
+ * pixels whatever the zoom, before the table the draw starts from offers the
+ * buttons too: a press there sooner draws a self reference as it always has.
+ */
+export declare const SELF_REFERENCE_TRAVEL = 24;
+export declare const hasTravelled: (from: Point, to: Point) => boolean;
+/** Edges included, so a point on a border belongs to the box it bounds. */
+export declare const containsPoint: (rect: Rect, { x, y }: Point) => boolean;
+export type DrawTargetQuery = {
+    /** The pointer in screen pixels from the top left of the canvas root. */
+    pointer: Point;
+    startTableId: string;
+    selfArmed: boolean;
+    /** The table the buttons stand beside now. */
+    current: string | null;
+    /** The buttons and the gutter beside them, in screen pixels, over which the current table stays. */
+    keep: readonly Rect[];
+};
+/**
+ * The table a press under the pointer would draw to, by arithmetic, since konva
+ * raises no hover at a low zoom or over the buttons: top first, the reverse of
+ * the canvas's paint order, and none under a memo drawn over it, which takes the press.
+ */
+export declare function findDrawTarget(state: RootState, { pointer, startTableId, selfArmed, current, keep }: DrawTargetQuery): string | null;
+//# sourceMappingURL=findDrawTarget.d.ts.map

package/dist/components/erd/draw-target/placePill.d.ts

@@ -0,0 +1,49 @@
+import { Viewport } from '../../../engine/modules/editor/state';
+import { Rect } from '../../../konva/scene/metrics';
+/** The room between the buttons and the table, and between them and the canvas edge. */
+export declare const PILL_MARGIN = 8;
+/** How far past the buttons' outer edge the gutter beside them reaches. */
+export declare const GUTTER_REACH = 4;
+export type PillSide = 'left' | 'right';
+export type PillSize = {
+    width: number;
+    height: number;
+};
+export type PillPlacement = {
+    x: number;
+    y: number;
+    side: PillSide;
+};
+export type PlacePillInput = {
+    /** The table's box on screen. */
+    card: Rect;
+    viewport: Viewport;
+    /** How far in from the left edge Find and Replace hides the canvas. */
+    covered: number;
+    /** The chrome drawn over the canvas that the buttons keep clear of. */
+    obstacles: readonly Rect[];
+    pill: PillSize;
+};
+/** The part of the table's height the canvas shows, a margin in from its edges. */
+export declare function getVisibleSpan(card: Rect, viewport: Viewport): {
+    top: number;
+    bottom: number;
+};
+/**
+ * Left of the table, else right of it, else over its left edge; level with the
+ * top of its shown part and inside the canvas. Off the minimap and the floating
+ * toolbar by moving below or above it, then by the other side, else put.
+ */
+export declare function placePill({ card, viewport, covered, obstacles, pill, }: PlacePillInput): PillPlacement;
+/**
+ * The clear strip from a little past the buttons to the table, as tall as both,
+ * which takes a press that would reach a neighbour or the start table under it,
+ * so only the outlined table is drawn to. None where the buttons cover the table.
+ */
+export declare function getGutterRect({ card, viewport, placement, pill, }: {
+    card: Rect;
+    viewport: Viewport;
+    placement: PillPlacement;
+    pill: PillSize;
+}): Rect | null;
+//# sourceMappingURL=placePill.d.ts.map

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

@@ -3,13 +3,19 @@ import { ValuesType } from '../../../internal-types';
 export declare const ErdContextMenuType: {
     readonly ERD: "ERD";
     readonly table: "table";
+    readonly memo: "memo";
     readonly relationship: "relationship";
+    readonly tableGroup: "tableGroup";
 };
 export type ErdContextMenuType = ValuesType<typeof ErdContextMenuType>;
 export type ErdContextMenuProps = {
     type: ErdContextMenuType;
     relationshipId?: string;
     tableId?: string;
+    /** The column whose row the press that raised a table menu landed on. */
+    columnId?: string;
+    memoId?: string;
+    tableGroupId?: string;
     onClose: () => void;
 };
 declare const ErdContextMenu: FC<ErdContextMenuProps>;

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

@@ -1,9 +1,11 @@
 import { AppContext } from '../../../appContext';
 import { NotationIconName } from '../../../primitives/icon/icons';
+import { PlainMessageKey } from '../../../../i18n/translate';
 import { KeyBindingName } from '../../../../utils/keyboard-shortcut';
 type Menu = {
     iconName: NotationIconName;
     name: string;
+    labelKey?: PlainMessageKey;
     keyBindingName: KeyBindingName;
     relationshipType: number;
 };
@@ -11,6 +13,7 @@ export declare const menus: Menu[];
 export declare function createDrawRelationshipMenus({ store, keyBindingMap }: AppContext, onClose: () => void): {
     iconName: "ZeroOneN" | "ZeroOne" | "ZeroN" | "OneOnly" | "OneN" | "One" | "N";
     name: string;
+    labelKey: PlainMessageKey | undefined;
     shortcut: string;
     onClick: () => void;
 }[];

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

@@ -1,11 +1,16 @@
 import { AppContext } from '../../../appContext';
 import { IconName } from '../../../primitives/icon/icons';
-import { Theme } from '../../../../themes/tokens';
+import { I18n } from '../../../../i18n/translate';
 type Menu = {
     icon: IconName;
     name: string;
     onClick: () => void;
 };
-export declare function createExportMenus(app: AppContext, onClose: () => void, theme: Theme): Menu[];
+/**
+ * The Export rows: json by its format's name, Schema SQL and Image in the
+ * reader's language. Schema SQL saves nothing yet: it opens the tab, its
+ * options out, where Save file writes the text the reader settled on.
+ */
+export declare function createExportMenus(app: AppContext, onClose: () => void, i18n?: Pick<I18n, 't'>): Menu[];
 export {};
 //# sourceMappingURL=exportMenus.d.ts.map

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

@@ -1,10 +1,14 @@
 import { AppContext } from '../../../appContext';
 import { IconName } from '../../../primitives/icon/icons';
+import { PlainMessageKey } from '../../../../i18n/translate';
+import { ImportMode } from '../../../../utils/file/importFile';
 type Menu = {
     icon: IconName;
     name: string;
+    labelKey?: PlainMessageKey;
     onClick: () => void;
 };
-export declare function createImportMenus(app: AppContext, onClose: () => void): Menu[];
+/** The five formats of the Import menu, or of Import and Add for an append. */
+export declare function createImportMenus(app: AppContext, onClose: () => void, mode?: ImportMode): Menu[];
 export {};
 //# sourceMappingURL=importMenus.d.ts.map

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

@@ -1,8 +1,23 @@
 import { AppContext } from '../../../appContext';
-export declare function createRelationshipMenus({ store }: AppContext, relationshipId?: string): {
+import { I18n } from '../../../../i18n/translate';
+/** A notation's name as this menu gives it, and none for a value it does not know. */
+export declare function relationshipTypeName(relationshipType: number, { t }: Pick<I18n, 't'>): string;
+/** The four types a relationship can take, its own one checked, named in the reader's language. */
+export declare function createRelationshipMenus({ store }: AppContext, relationshipId?: string, i18n?: Pick<I18n, 't'>): {
     checked: boolean;
     iconName: "ZeroOneN" | "ZeroOne" | "ZeroN" | "OneOnly" | "OneN" | "One" | "N";
     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, i18n?: Pick<I18n, 't'>): {
+    checked: boolean;
+    name: string;
+    note: string | null;
+    onClick: () => void;
+}[];
 //# sourceMappingURL=relationshipMenus.d.ts.map

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

@@ -1,5 +1,7 @@
 import { AppContext } from '../../../appContext';
-export declare function createShowMenus({ store }: AppContext): {
+import { I18n } from '../../../../i18n/translate';
+/** The View Option rows, each named in the reader's language and checked while it shows. */
+export declare function createShowMenus({ store }: AppContext, i18n?: Pick<I18n, 't'>): {
     checked: boolean;
     name: string;
     onClick: () => void;

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

@@ -1,8 +1,10 @@
 import { AppContext } from '../../../appContext';
 import { IconName } from '../../../primitives/icon/icons';
 import { TablePlacement } from '../../../../constants/tablePlacement';
+import { PlainMessageKey } from '../../../../i18n/translate';
 type Menu = {
     name: string;
+    labelKey?: PlainMessageKey;
     iconName: IconName;
     placement: TablePlacement;
 };
@@ -17,6 +19,7 @@ export declare const menus: Menu[];
  */
 export declare function createTablePlacementMenus({ emitter }: AppContext, onClose: () => void): {
     name: string;
+    labelKey: PlainMessageKey | undefined;
     iconName: IconName;
     onClick: () => void;
 }[];

package/dist/components/erd/floating-toolbar/ToolbarCompass.template.d.ts

@@ -2,6 +2,8 @@ import { DOMTemplateLiterals } from '@dineug/r-html';
 import { ContentCompass } from '../content-compass/compassGeometry';
 export type ToolbarCompassOptions = {
     compass: ContentCompass | null;
+    /** What the compass names itself, in the language of the bar it stands in. */
+    title: string;
     className?: string;
     onClick: () => void;
 };
@@ -10,5 +12,5 @@ export type ToolbarCompassOptions = {
  * lies and how far. A template rather than a component, so the label changes in
  * the same pass as the bar and a menu anchored over it moves with it.
  */
-export declare function toolbarCompass({ compass, className, onClick, }: ToolbarCompassOptions): DOMTemplateLiterals | null;
+export declare function toolbarCompass({ compass, title, className, onClick, }: ToolbarCompassOptions): DOMTemplateLiterals | null;
 //# sourceMappingURL=ToolbarCompass.template.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/hitTest.d.ts

@@ -1,9 +1,15 @@
 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 SceneEntityKind = 'table' | 'memo' | 'relationship' | 'tableGroup';
+/** The part of a table group a press landed on: its title bar, its body or a sash on its edge. */
+export type TableGroupPart = 'title' | 'body' | 'sash';
 export type SceneHit = {
     kind: SceneEntityKind;
     id: string;
+    /** The column whose row a press inside a table landed on, absent off the rows. */
+    columnId?: string;
+    /** The part of a group a press landed on, for a group alone. */
+    part?: TableGroupPart;
 };
 /**
  * Records the entity konva hit for every press a stage dispatches, and returns
@@ -14,6 +20,15 @@ export type SceneHit = {
  * addUnsubscribe(trackSceneHits(stage));
  */
 export declare function trackSceneHits(stage: Stage): () => void;
+/**
+ * Whether a press over the scene belongs to what it landed on, so the canvas
+ * under it neither pans, draws a marquee nor unselects: a table, a memo, a
+ * group's title bar or sash, and any part of a group for any other button.
+ *
+ * @example
+ * const canUnselectAll = !ownsPress(sceneHit(canvas, event), event);
+ */
+export declare function ownsPress(hit: SceneHit | null, event: MouseEvent | TouchEvent): boolean;
 /**
  * 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,

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

@@ -4,7 +4,7 @@ export type MinimapSceneProps = {};
 /**
  * The whole scene 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.
+ * only, the groups behind, because a connector between two is noise at this size.
  */
 declare const MinimapScene: FC<MinimapSceneProps>;
 /**

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

@@ -6,9 +6,9 @@ export type TableProps = {
     ratio: number;
 };
 /**
- * A table as the minimap draws it: the box and nothing in it, no smaller than a
- * mark however far the map is folded. The id stays off the node because two
- * stages spelling one id make an id scan ambiguous, so it is found by name and table.
+ * A table as the minimap draws it: the box in the table's own color and nothing in it, no smaller
+ * than a mark however far the map is folded. The id stays off the node because two stages
+ * spelling one id make an id scan ambiguous, so it is found by name and table.
  */
 declare const Table: FC<TableProps>;
 export default Table;

package/dist/components/erd/minimap/table-group/TableGroup.d.ts

@@ -0,0 +1,17 @@
+import { FC } from '@dineug/r-html';
+import { Table, TableGroup } from '../../../../internal-types';
+export type TableGroupProps = {
+    group: TableGroup;
+    /** The group's member tables, read once for every group by the minimap scene. */
+    members: ReadonlyArray<Table>;
+    /** Thumbnail pixels per scene unit, which is what the box is floored at. */
+    ratio: number;
+};
+/**
+ * A table group as the minimap draws it: the box the canvas draws it in,
+ * filled in its color, or the bar color of a group with none, at a low alpha
+ * behind the table marks.
+ */
+declare const TableGroup: FC<TableGroupProps>;
+export default TableGroup;
+//# sourceMappingURL=TableGroup.d.ts.map

package/dist/components/erd/table-group/TableGroupDraft.d.ts

@@ -0,0 +1,15 @@
+import { FC } from '@dineug/r-html';
+import { Rect } from '../../../konva/scene/metrics';
+export type TableGroupDraftProps = {
+    /**
+     * The draw under way, whose box in the erd root's own pixels this reads
+     * itself, so a step of the draw re-renders the box alone and not the root.
+     */
+    draw: {
+        draft: Rect | null;
+    };
+};
+/** The box a table group draw spans while the pointer travels, the group it adds on release. */
+declare const TableGroupDraft: FC<TableGroupDraftProps>;
+export default TableGroupDraft;
+//# sourceMappingURL=TableGroupDraft.d.ts.map

package/dist/components/erd/table-group/TableGroupDraft.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The box a table group draw spans, outlined in the focus color over a fill of
+ * it at the low alpha a group's body takes, so the canvas reads through.
+ */
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=TableGroupDraft.styles.d.ts.map

package/dist/components/erd/table-group/tableGroupName.d.ts

@@ -0,0 +1,21 @@
+import { GeneratorAction } from '../../../engine/generator.actions';
+import { RxStore } from '../../../engine/rx-store';
+/**
+ * Opens the editor over a group's title bar, the table focus let go so Enter and the arrows are the
+ * name's. A readonly store opens nothing, nor do hidden groups, whose bar no editor stands over and
+ * which would leave the canvas shortcuts waiting on an editor that never opened.
+ *
+ * @example
+ * openTableGroupNameEditor(store, groupId);
+ */
+export declare function openTableGroupNameEditor(store: RxStore, id: string): void;
+/**
+ * Adds a group through the batch given and opens its name editor, so a name
+ * can be typed at once. The group is the one id the batch adds to the
+ * document, and nothing opens when it adds none.
+ *
+ * @example
+ * addTableGroupAndRename(store, addTableGroupFromTablesAction$());
+ */
+export declare function addTableGroupAndRename(store: RxStore, action: GeneratorAction): void;
+//# sourceMappingURL=tableGroupName.d.ts.map

package/dist/components/erd/table-group/useTableGroupDraw.d.ts

@@ -0,0 +1,25 @@
+import { Ref } from '@dineug/r-html';
+import { AppContext } from '../../appContext';
+import { Rect } from '../../../konva/scene/metrics';
+export type TableGroupDrawOptions = {
+    /** The editor whose store the group lands in. */
+    app: () => AppContext;
+    /** The box the scene hangs in, which the draw is measured against. */
+    root: Ref<HTMLDivElement>;
+};
+/**
+ * The draw mode's gesture: from a press on the canvas, a box the travel spans,
+ * never under the least a group takes at the zoom, which the release adds as a
+ * group. A release with no travel adds a default-size group at the press.
+ *
+ * @example
+ * const draw = useTableGroupDraw({ app: () => app.value, root });
+ * draw.start(event);
+ */
+export declare function useTableGroupDraw({ app, root }: TableGroupDrawOptions): {
+    state: {
+        draft: Rect | null;
+    };
+    start: (event: MouseEvent | TouchEvent) => void;
+};
+//# sourceMappingURL=useTableGroupDraw.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 centres the dialog in it, whose fixed height keeps it
+ * still when the tabs switch.
+ */
 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;