@dineug/erd-editor 3.10.0 → 4.1.0

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

@@ -0,0 +1,47 @@
+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;
+    /** 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, 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,5 +1,9 @@
 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;
@@ -10,7 +14,7 @@ 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): {
+export declare function createReferentialActionMenus({ store }: AppContext, field: ReferentialActionField, relationshipId?: string, i18n?: Pick<I18n, 't'>): {
     checked: boolean;
     name: string;
     note: string | null;

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

@@ -1,9 +1,12 @@
 import { FC } from '@dineug/r-html';
-export type FloatingToolbarProps = {};
+export type FloatingToolbarProps = {
+    /** The editor's readonly, under which the bar offers nothing to add. */
+    readonly?: boolean;
+};
 /**
- * The bar over the bottom of the canvas: which of the two a press means, the
- * zoom, the notation the next relationship is drawn in, zen mode, and which
- * way the content lies once the screen holds none. It is the one surface zen mode leaves standing.
+ * The bar over the bottom of the canvas: which of the two a press means, what
+ * to add, the zoom, the notation the next relationship is drawn in, zen mode,
+ * and which way the content lies once the screen holds none. It is the one surface zen mode leaves standing.
  */
 declare const FloatingToolbar: FC<FloatingToolbarProps>;
 export default FloatingToolbar;

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

@@ -10,7 +10,7 @@ export type TextRange = {
     start: number;
     end: number;
 };
-/** What a jump to the ERD lands on: a table, one cell of a column, or a memo. */
+/** What a jump to the ERD lands on: a table, one cell of a column, a memo, a relationship or a table group. */
 export type ErdTarget = {
     kind: 'table';
     tableId: string;
@@ -25,19 +25,42 @@ export type ErdTarget = {
 } | {
     kind: 'memo';
     memoId: string;
+} | {
+    kind: 'relationship';
+    relationshipId: string;
+} | {
+    kind: 'tableGroup';
+    tableGroupId: string;
 };
-type Span = {
+/** How far in from the edge of the screen a jump keeps what it shows of a rect too long for it. */
+export declare const EDGE_MARGIN = 40;
+export 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.
+ * The one jump rule every go-to shares: each axis judged on its own, the one
+ * that is fine left where it is. Where the rect would start on screen, or null
+ * when neither start moves by more than half a pixel, as on a press repeated.
+ *
+ * @example
+ * planJump({ width: 800, height: 600 }, toScreenSpans(state, rect), focusSpans);
+ */
+export declare function planJump(viewport: {
+    width: number;
+    height: number;
+}, [rectX, rectY]: [Span, Span], [focusX, focusY]: [Span, Span]): {
+    x: number;
+    y: number;
+} | null;
+/**
+ * The scroll the jump rule asks for to bring the rect into view at the
+ * document's own zoom, none when it asks for none, 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<{
+export declare function scrollIntoView(state: RootState, rect: Rect, focus?: Rect): Generator<import('@dineug/r-html').AnyAction<{
     originX: number;
     originY: number;
 }>, void, unknown>;
@@ -48,7 +71,7 @@ export declare function scrollIntoView(state: RootState, rect: Rect, covered?: n
  *
  * @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<{
+export declare function scrollTableIntoView(state: RootState, table: Table, focusType?: FocusType, range?: Span): Generator<import('@dineug/r-html').AnyAction<{
     originX: number;
     originY: number;
 }>, void, unknown>;
@@ -59,13 +82,16 @@ export declare function scrollTableIntoView(state: RootState, table: Table, cove
  */
 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.
+ * Whether a jump to the relationship shows it, as showErdTargetAction$ does
+ * only while it and both its tables stand; a host lights none it did not show.
+ */
+export declare function isRelationshipShown(state: RootState, relationshipId: string): boolean;
+/**
+ * Stands the reader on a table, a column cell, a memo, a relationship or a
+ * table group by the one jump rule, 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.
  */
-export declare const showErdTargetAction$: (target: ErdTarget, covered?: number) => GeneratorAction;
+export declare const showErdTargetAction$: (target: ErdTarget) => 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
@@ -74,12 +100,10 @@ export declare const showErdTargetAction$: (target: ErdTarget, covered?: number)
 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.
+ * from whichever tab is up, measured on the canvas once the ERD tab is up.
  *
  * @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/relationshipHighlight.d.ts

@@ -0,0 +1,18 @@
+/** Lights one relationship in the editor, and puts out the one it lit before. */
+export declare function setRelationshipHighlight(editorId: string, relationshipId: string): void;
+/** Puts out whatever relationship the editor has lit. */
+export declare function clearRelationshipHighlight(editorId: string): void;
+/** Whether a jump has lit the relationship, read by its connector as it reads a hover. */
+export declare function isRelationshipHighlighted(editorId: string, relationshipId: string): boolean;
+/** Forgets an editor that went, whose id nothing reads again. */
+export declare function dropRelationshipHighlight(editorId: string): void;
+/**
+ * Test-only probe: the flags the reactive record holds and the editors it
+ * remembers, which a read of an editor never lit must not grow. Nothing
+ * shipping calls it.
+ */
+export declare function countRelationshipHighlights(): {
+    flags: number;
+    editors: number;
+};
+//# sourceMappingURL=relationshipHighlight.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.styles.d.ts

@@ -1,6 +1,6 @@
 /**
- * Dims the canvas and hangs the dialog from the palette's line, so switching
- * tabs never moves its top edge.
+ * 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;
 /**

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

@@ -1,10 +1,16 @@
 import { FC } from '@dineug/r-html';
+import { PlainMessageKey } from '../../../../../i18n/translate';
 import { ColumnKey } from '../../../../../utils/tableKeys';
 export type IndexesKeyProps = {
     columnKey: ColumnKey;
     selected: boolean;
     onSelect: (columnKey: ColumnKey) => void;
 };
+/** A key's tag, written as the diagram writes it in every language, and the key of the name it shows on hover. */
+export declare const KIND_LABEL: Record<ColumnKey['kind'], {
+    text: string;
+    titleKey: PlainMessageKey;
+}>;
 /**
  * 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:

package/dist/components/erd/table-properties/table-properties-tabs/TablePropertiesTabs.d.ts

@@ -1,4 +1,5 @@
 import { FC } from '@dineug/r-html';
+import { PlainMessageKey } from '../../../../i18n/translate';
 import { ValuesType } from '../../../../internal-types';
 export declare const Tab: {
     readonly Indexes: "Indexes";
@@ -6,6 +7,8 @@ export declare const Tab: {
     readonly GeneratorCode: "Code Generator";
 };
 export type Tab = ValuesType<typeof Tab>;
+/** What each tab is called in the reader's language; its id stays the English name. */
+export declare const TabLabelKey: Record<Tab, PlainMessageKey>;
 export type TablePropertiesTabsProps = {
     value: Tab;
     onChange: (value: Tab) => void;

package/dist/components/erd/welcome-screen/WelcomeScreen.d.ts

@@ -0,0 +1,17 @@
+import { FC } from '@dineug/r-html';
+import { IconName } from '../../primitives/icon/icons';
+import { TextDirection } from '../../../i18n/locales';
+export type WelcomeScreenProps = {
+    enableThemeBuilder?: boolean;
+    enableLocalePicker?: boolean;
+};
+/** A row's icon as the text runs: the Back arrow points right in a right-to-left language. */
+export declare const rowIcon: (icon: IconName, dir: TextDirection) => IconName;
+/**
+ * What an empty diagram shows over its canvas: a heading and a menu of the
+ * ways to start, which Import swaps in place for its formats, with hints at
+ * the tools around it where the canvas has room.
+ */
+declare const WelcomeScreen: FC<WelcomeScreenProps>;
+export default WelcomeScreen;
+//# sourceMappingURL=WelcomeScreen.d.ts.map

package/dist/components/erd/welcome-screen/WelcomeScreen.styles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The layer over the empty canvas, which lets every press and wheel through
+ * to the scene but the menu's, so a drag over the heading still pans. An open
+ * panel stands over it, as the theme builder does, and moves nothing.
+ */
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The block centred in the room over the floating toolbar, whose top edge
+ * stands 60px over the canvas's bottom, so the last row never runs under it.
+ */
+export declare const center: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const heading: import('@dineug/r-html').CSSTemplateLiterals;
+/** The one part of the layer that takes the pointer, as a press on a row is no pan. */
+export declare const menu: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const item: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const label: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=WelcomeScreen.styles.d.ts.map

package/dist/components/erd/welcome-screen/welcome-hints/WelcomeHints.d.ts

@@ -0,0 +1,21 @@
+import { FC } from '@dineug/r-html';
+import { PlainMessageKey } from '../../../../i18n/translate';
+export type WelcomeHintsProps = {
+    /** Where the toolbar's Search button stands across the welcome screen, or null. */
+    search: number | null;
+    /** Where the theme and language buttons stand between them, or null. */
+    preferences: number | null;
+    width: number;
+    enableThemeBuilder?: boolean;
+    enableLocalePicker?: boolean;
+};
+/** What the hint at the theme and language buttons says, by which of the two the toolbar shows. */
+export declare function preferencesHintKey(theme: boolean, locale: boolean): PlainMessageKey | null;
+/**
+ * The hand-drawn arrows at the tools an empty diagram starts from: the
+ * palette's Search button and the theme and language buttons on the toolbar,
+ * each labelled on its own side, and the floating toolbar at the bottom.
+ */
+declare const WelcomeHints: FC<WelcomeHintsProps>;
+export default WelcomeHints;
+//# sourceMappingURL=WelcomeHints.d.ts.map

package/dist/components/erd/welcome-screen/welcome-hints/WelcomeHints.styles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A hint under a toolbar button: its arrow climbs from the label to just
+ * under the bar, and the label hangs a little below the arrow's tail. Where it
+ * stands across the canvas is set inline, from the button it was measured at.
+ */
+export declare const up: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * A hint whose label has no room beside its arrow: the label hangs under the
+ * arrow's tail, clear of a label beside the next arrow.
+ */
+export declare const stacked: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The hint over the floating toolbar, centred over it as the toolbar is, its
+ * arrow's tip clear of the bar's top edge.
+ */
+export declare const down: import('@dineug/r-html').CSSTemplateLiterals;
+/** A label a longer language wraps rather than run under the next hint, Japanese between phrases, never mid-word. */
+export declare const label: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=WelcomeHints.styles.d.ts.map

package/dist/components/erd/welcome-screen/welcome-hints/hintArrows.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A pen stroke that leaves the label low on the left and bows up to a tip
+ * near the top right, where both barbs meet it, at the tip ARROW_UP_BOX names.
+ */
+export declare const ARROW_UP: readonly ["M6 69C3.5 50 13.5 31 27 17.5C30.5 13.5 33.6 8.7 36 3", "M27.6 8.6Q31.8 5.6 36 3Q36.9 7.9 38.4 12.6"];
+/** A pen stroke that wavers down from under the label to a tip at the bottom middle. */
+export declare const ARROW_DOWN: readonly ["M15 3C8.5 15.5 27.5 25 21.5 39C20.5 43.5 20.2 48 20 53", "M13.8 45.2Q17.2 48.8 20 53Q22.6 48.6 26.2 45"];
+export declare const arrowUp: (mirrored: boolean) => import("@dineug/r-html/jsx-runtime").JSX.Element;
+export declare const arrowDown: () => import("@dineug/r-html/jsx-runtime").JSX.Element;
+//# sourceMappingURL=hintArrows.d.ts.map