@dineug/erd-editor 3.10.0 → 4.0.0

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,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/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/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.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,14 @@
+/**
+ * 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;
+/**
+ * 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

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

@@ -0,0 +1,87 @@
+import { RootState } from '../../../engine/state';
+import { TextDirection } from '../../../i18n/locales';
+/** The narrowest canvas that shows the welcome screen at all. */
+export declare const WELCOME_MIN_WIDTH = 320;
+/**
+ * The least height that shows the heading over the menu: a heading of two
+ * lines over the six rows of Import's formats, clear of the floating toolbar.
+ */
+export declare const WELCOME_FULL_MIN_HEIGHT = 342;
+/** The least height that shows the menu alone: Import's six rows, clear of the floating toolbar. */
+export declare const WELCOME_MENU_MIN_HEIGHT = 294;
+/**
+ * The least canvas the hints at the tools take room on, beside the centre
+ * block: the height keeps them clear of the block, Import's formats in it, in
+ * the language whose labels wrap the most.
+ */
+export declare const WELCOME_HINTS_MIN_WIDTH = 720;
+export declare const WELCOME_HINTS_MIN_HEIGHT = 562;
+/** The narrowest canvas whose menu rows still show their chords. */
+export declare const WELCOME_KBD_MIN_WIDTH = 480;
+/** The arrow that climbs to a toolbar button: its box, and its tip near the top right. */
+export declare const ARROW_UP_BOX: {
+    readonly width: 44;
+    readonly height: 72;
+    readonly tipX: 36;
+    readonly tipY: 3;
+};
+/** The arrow that drops to the floating toolbar: its box, and its tip at the bottom middle. */
+export declare const ARROW_DOWN_BOX: {
+    readonly width: 40;
+    readonly height: 56;
+    readonly tipX: 20;
+    readonly tipY: 53;
+};
+export type WelcomeCenter = 'full' | 'menu' | 'none';
+/** What the room on the canvas lets the welcome screen show. */
+export type WelcomeTiers = {
+    center: WelcomeCenter;
+    hints: boolean;
+    kbd: boolean;
+};
+export type WelcomeSize = {
+    width: number;
+    height: number;
+};
+/**
+ * The parts that fit: the whole centre block, the menu alone or nothing, the
+ * hints only on a canvas with room around the block, and the chords only where
+ * a row is wide enough to carry one beside its label.
+ */
+export declare function welcomeTiers({ width, height }: WelcomeSize): WelcomeTiers;
+/**
+ * A document with no table, no shown memo and no shown group, which is what
+ * the welcome screen stands over: the content bounds count the same, so the
+ * map and the scrollbars leave as the screen comes and come as it leaves.
+ */
+export declare const isEmptyDocument: (state: RootState) => boolean;
+/** Where along the welcome screen's width each hint points, or null where it has nothing to point at. */
+export type WelcomeAnchors = {
+    search: number | null;
+    preferences: number | null;
+};
+/**
+ * Reads where the toolbar buttons the hints point at stand, from the left edge
+ * of the welcome screen. A button the toolbar left out, or clipped past the
+ * edge, has none; the theme and language buttons share one anchor between them.
+ */
+export declare function measureAnchors(container: HTMLElement): WelcomeAnchors;
+/** Which side of its arrow a hint's label takes, read in the direction the text runs. */
+export type HintSide = 'before' | 'after';
+/**
+ * Where a hint stands, as the distance of its outer edge from the left or the
+ * right of the welcome screen; labelFirst puts the label left of the arrow,
+ * which then climbs right to its tip, and otherwise the arrow is drawn mirrored.
+ */
+export type HintPlacement = {
+    labelFirst: boolean;
+    left?: number;
+    right?: number;
+};
+/**
+ * Places a hint so the tip of its arrow meets the anchor, the label on the
+ * side it names: before is left in a left-to-right language and right in a
+ * right-to-left one, so the hints mirror with the toolbar they point at.
+ */
+export declare function hintPlacement(anchorX: number, rootWidth: number, side: HintSide, dir: TextDirection): HintPlacement;
+//# sourceMappingURL=welcomeLayout.d.ts.map