@dineug/erd-editor 4.0.0 → 4.2.0

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

@@ -1,5 +1,5 @@
 import { FC } from '@dineug/r-html';
-import { SceneMouseEvent } from '../../sceneTokens';
+import { ScenePointerEvent } from '../../sceneTokens';
 import { DiffPaths } from '../../../diff-viewer/diff';
 import { Column } from '../../../../../internal-types';
 import { GeometrySource } from '../../../../../utils/draw-relationship/geometrySource';
@@ -22,9 +22,9 @@ export type ColumnProps = {
      */
     diffPaths?: DiffPaths | null;
     /**
-     * How far the light has come up on the card this row is drawn in, which is
-     * what the row tint and the type cell above are both drawn at. One number, so
-     * the two of them come up over the one span of time and a document row reads none of it.
+     * How far the light has come up on the card this row is drawn in, which a
+     * related row's tint is drawn at, so it comes up with the card's border and
+     * glow over the one span of time. A document row reads none of it.
      */
     litAlpha?: number;
     /**
@@ -45,6 +45,10 @@ export type ColumnProps = {
     widthDataType: number;
     widthDefault: number;
     widthComment: number;
+    /** The logical name's own cell, 0 while the name view lays out none. */
+    widthLogicalName?: number;
+    /** The domain's own cell, 0 while its show bit is off. */
+    widthDomain?: 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.
@@ -52,6 +56,11 @@ export type ColumnProps = {
     widthAlternateKey?: number;
     /** The mark this row carries in that room, AK1.2 or several comma joined. */
     alternateKey?: string;
+    /**
+     * The name and type cells' marks, under whichever focus the name view gives
+     * them: the logical view's name cell takes the logical name's, and its type
+     * cell the domain's while the domain has no cell of its own.
+     */
     focusName: boolean;
     focusDataType: boolean;
     focusNotNull: boolean;
@@ -59,6 +68,9 @@ export type ColumnProps = {
     focusComment: boolean;
     focusUnique: boolean;
     focusAutoIncrement: boolean;
+    /** The marks of the logical name and domain cells, which a row lays out in some views alone. */
+    focusLogicalName?: boolean;
+    focusDomain?: boolean;
     sharedFocusName: string | null;
     sharedFocusDataType: string | null;
     sharedFocusNotNull: string | null;
@@ -66,22 +78,37 @@ export type ColumnProps = {
     sharedFocusComment: string | null;
     sharedFocusUnique: string | null;
     sharedFocusAutoIncrement: string | null;
+    sharedFocusLogicalName?: string | null;
+    sharedFocusDomain?: string | null;
     editName: boolean;
     editDataType: boolean;
     editDefault: boolean;
     editComment: boolean;
+    editLogicalName?: boolean;
+    editDomain?: boolean;
     hovered?: boolean;
     /** The placeholder row for a column dragged in from another table. */
     ghost?: boolean;
+    /**
+     * Whether the name cells write what the dictionaries' checks find in their
+     * colours, which the table decides for every row it draws.
+     */
+    checkMarks?: boolean;
     /** Drawn inside a copy of the table, which owns none of its ids. */
     preview?: boolean;
     editorFocused?: boolean;
+    /**
+     * Whether the row carries the handle a column drag starts from, outside the
+     * table's left edge. The table gives it to its focused row alone, and only
+     * where a reader can reorder: the document, unlocked, never a copy.
+     */
+    dragHandle?: boolean;
     /**
      * The one pair of callbacks the scene keeps. A drop lands between siblings,
      * so the table that owns the order is the only thing that can judge one, and
      * the row can only say that a drag of it started and that it ended.
      */
-    onDragstart?: (columnId: string, event: SceneMouseEvent) => void;
+    onDragstart?: (columnId: string, event: ScenePointerEvent) => void;
     onDragend?: () => void;
 };
 declare const Column: FC<ColumnProps>;

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

@@ -0,0 +1,29 @@
+import { DictionaryCheckField, DictionaryCheckLevel } from '../../../../engine/modules/dictionary/checks';
+import { RxStore } from '../../../../engine/rx-store';
+import { Column, Table } from '../../../../internal-types';
+import { Theme } from '../../../../themes/tokens';
+/** The colour a check level writes a cell's text in: red for an error, amber for a warning. */
+export declare const dictionaryMarkFill: (theme: Theme, level: DictionaryCheckLevel | null) => string | null;
+/**
+ * The mark while it reads at 4.5:1 on the header fill under it, else null, so
+ * the header's own black or white takes its place: a group's colour is the
+ * reader's pick, and a mark of a near hue would hide the name it marks.
+ */
+export declare function readableMarkFill(mark: string | null, background: string): string | null;
+/**
+ * The colour a header cell's text takes for what the checks find in the field
+ * it draws, null for nothing found. Empty dictionaries find nothing.
+ *
+ * @example
+ * const fill = tableMarkFill(store, theme, table, 'logicalName');
+ */
+export declare function tableMarkFill(store: RxStore, theme: Theme, table: Table, field: DictionaryCheckField): string | null;
+/**
+ * The colour a row cell's text takes for what the checks find in the field it
+ * draws, null for nothing found, as a header cell's is.
+ *
+ * @example
+ * const fill = columnMarkFill(store, theme, column, 'name');
+ */
+export declare function columnMarkFill(store: RxStore, theme: Theme, column: Column, field: DictionaryCheckField): string | null;
+//# sourceMappingURL=dictionaryMarks.d.ts.map

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

@@ -4,5 +4,6 @@ export declare function useFocusTable(ctx: Ctx, tableId: string): {
     hasFocus: (focusType: FocusType, columnId?: string) => boolean;
     hasEdit: (focusType: FocusType, columnId?: string) => boolean;
     hasSelectColumn: (columnId: string) => boolean;
+    hasFocusColumn: (columnId: string) => boolean;
 };
 //# sourceMappingURL=useFocusTable.d.ts.map

package/dist/components/erd/diff-viewer/diff-tree/DiffTree.d.ts

@@ -0,0 +1,19 @@
+import { FC } from '@dineug/r-html';
+import { AppContext } from '../../../appContext';
+import { DiffEntries } from '../../../../utils/diff';
+export type DiffTreeProps = {
+    prevApp: AppContext;
+    app: AppContext;
+    entries: DiffEntries;
+    /** The width the diff gives the tree, which a drag on its edge asks to change. */
+    width: number;
+    onResize: (width: number) => void;
+};
+/**
+ * What a diff found, on the tree the Explorer draws: the changed entities and
+ * the tables they are in, each named in the colour of what happened to it and
+ * ending on its status letter. A row takes either pane to its entity.
+ */
+declare const DiffTree: FC<DiffTreeProps>;
+export default DiffTree;
+//# sourceMappingURL=DiffTree.d.ts.map

package/dist/components/erd/diff-viewer/diff-tree/DiffTree.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const header: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const filter: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const body: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const empty: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const sash: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const rowIcon: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const name: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const after: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const count: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const status: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const visuallyHidden: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=DiffTree.styles.d.ts.map

package/dist/components/erd/diff-viewer/diff-tree/diffTreeModel.d.ts

@@ -0,0 +1,52 @@
+import { ErdTarget } from '../../goToErdTarget';
+import { TreeNode } from '../../../primitives/tree/treeModel';
+import { I18n } from '../../../../i18n/translate';
+import { DiffEntries, DiffEntry, DiffStatus } from '../../../../utils/diff';
+export type DiffFolder = 'tables' | 'tableGroups' | 'memos' | 'columns' | 'indexes' | 'foreignKeys';
+/** What one row of the diff tree stands for: a folder, or an entry with the table it is in. */
+export type DiffTreeItem = {
+    kind: 'folder';
+    folder: DiffFolder;
+    count: number;
+} | {
+    kind: 'entry';
+    entry: DiffEntry;
+    table: DiffEntry | null;
+};
+export type DiffTreeNode = TreeNode<DiffTreeItem>;
+export type DiffTree = {
+    roots: DiffTreeNode[];
+    /** Every row with children, which the tree shows open unless folded. */
+    branchIds: string[];
+};
+/** A row's id: the current entity's, or the saved one's where it is gone. */
+export declare const entryNodeId: (entry: DiffEntry) => string;
+/**
+ * Whether a name filter keeps an entry: its current name or the saved one,
+ * or either logical name, holds what is typed, in any case and in any view.
+ */
+export declare function matchesFilter(entry: DiffEntry, filter: string): boolean;
+/**
+ * The tree a diff lists: Tables, Table Groups and Memos as the Explorer has
+ * them, holding what changed and the tables what changed is in, and only what
+ * the name filter keeps. Every row with children shows open to begin with.
+ */
+export declare function buildDiffTree(entries: DiffEntries, filter?: string): DiffTree;
+/** The letter a row ends on: its status, or a tilde for a row listed only for what it holds. */
+export declare function statusLetter(item: DiffTreeItem): string;
+export declare const statusLabel: (status: DiffStatus | null, { t }: Pick<I18n, "t">) => string;
+/** How long a text a tooltip line quotes may run before it is cut. */
+export declare const QUOTE_LIMIT = 40;
+/** The tooltip of a row: what it is, then each change as before → after, one a line. */
+export declare function describeEntry(entry: DiffEntry, i18n: Pick<I18n, 't'>): string;
+export type DiffTargets = {
+    prev: ErdTarget | null;
+    next: ErdTarget | null;
+};
+/**
+ * Where a row takes each pane: an added entity the current pane alone, a
+ * removed one the saved pane alone, and anything both hold both; a column or
+ * an index its table, and a folder neither.
+ */
+export declare function diffTargets(item: DiffTreeItem): DiffTargets;
+//# sourceMappingURL=diffTreeModel.d.ts.map

package/dist/components/erd/diff-viewer/diff.d.ts

@@ -1,27 +1,29 @@
-import { RootState } from '../../../engine/state';
-import { Column, Table } from '../../../internal-types';
 import { Theme } from '../../../themes/tokens';
-/**
- * Map<uuid, [tag, Map<path, diff>]>
- */
-export type DiffMap = Map<string, DiffTuple>;
-/** Map<path, diff> for one entity, each path spelled as the FocusType of the cell showing it. */
-export type DiffPaths = Map<string, number>;
-type DiffTuple = [string, DiffPaths];
-type NameToTableMap = Map<string, {
-    table: Table;
-    nameToColumnMap: Map<string, Column>;
-}>;
+/** The kinds of change a diff pane marks, one bit each. */
 export declare const Diff: {
     readonly insert: 1;
     readonly delete: 2;
+    readonly modify: 4;
+    readonly rename: 8;
 };
-export declare function diffState(prevState: RootState, state: RootState): [DiffMap, DiffMap];
-export declare function getNameToTableMap({ doc: { tableIds }, collections, }: RootState): NameToTableMap;
 /**
- * The background a cell of one entity sits on in a diff pane: the insert or the
- * delete colour its own path carries, and null for a path that did not change.
+ * Map<path, diff> for one entity: a cell's path is the FocusType of the cell
+ * showing it, and ENTITY_PATH stands for the entity as a whole.
+ */
+export type DiffPaths = Map<string, number>;
+/** Map<id, paths> for the entities one pane marks. */
+export type DiffMap = Map<string, DiffPaths>;
+/** An entity added or removed, or one only moved, resized, recoloured or regrouped. */
+export declare const ENTITY_PATH = "entity";
+export declare const MEMO_VALUE_PATH = "memoValue";
+/** A column's primary key, which its key icon shows. */
+export declare const COLUMN_KEY_PATH = "columnPrimaryKey";
+export declare const TABLE_GROUP_NAME_PATH = "tableGroupName";
+/**
+ * The colour a cell's text takes in a diff pane: its own change's, else, in a
+ * row, the row's as a whole; null where neither changed.
  */
-export declare function diffFill(theme: Theme, paths: DiffPaths | null | undefined, path: string): string | null;
-export {};
+export declare function diffTextColor(theme: Theme, paths: DiffPaths | null | undefined, path: string, row?: boolean): string | null;
+/** The outline an entity takes in a diff pane, or the colour of a line; null for none. */
+export declare function diffOutline(theme: Theme, paths: DiffPaths | null | undefined): string | null;
 //# sourceMappingURL=diff.d.ts.map

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

@@ -18,8 +18,6 @@ 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;
@@ -34,7 +32,7 @@ export declare function getVisibleSpan(card: Rect, viewport: Viewport): {
  * 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;
+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,

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

@@ -0,0 +1,22 @@
+import { AppContext } from '../../../appContext';
+import { NameViewMode } from '../../../../constants/schema';
+import { I18n, PlainMessageKey } from '../../../../i18n/translate';
+import { ValuesType } from '../../../../internal-types';
+type Menu = {
+    labelKey: PlainMessageKey;
+    value: ValuesType<typeof NameViewMode>;
+};
+/** The three name views, by the name a reader picks each one by. */
+export declare const menus: ReadonlyArray<Menu>;
+/**
+ * The Name View rows, the view in force checked. A pick switches the reader's
+ * own view, and the document's once its lock is off in an editor that is not
+ * readonly.
+ */
+export declare function createNameViewMenus({ store }: AppContext, i18n?: Pick<I18n, 't'>): {
+    checked: boolean;
+    name: string;
+    onClick: () => void;
+}[];
+export {};
+//# sourceMappingURL=nameViewMenus.d.ts.map

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, the name view, 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/nameViewDropdown.d.ts

@@ -0,0 +1,16 @@
+import { DOMTemplateLiterals } from '@dineug/r-html';
+import { Ctx } from '../../../internal-types';
+export type NameViewDropdown = {
+    /** The button in the bar, which names the view in force. */
+    trigger: () => DOMTemplateLiterals;
+    /** The menu over it, drawn beside the bar, whose transform would move it. */
+    menu: () => DOMTemplateLiterals | null;
+    close: () => void;
+};
+/**
+ * The Name View list a floating bar offers over itself, the view in force
+ * checked. A pick switches the reader's own view, and the document's once its
+ * lock is off, as the canvas menu's does (toNameViewModeAction).
+ */
+export declare function useNameViewDropdown(ctx: Ctx): NameViewDropdown;
+//# sourceMappingURL=nameViewDropdown.d.ts.map

package/dist/components/erd/floating-toolbar/nameViewDropdown.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const trigger: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const label: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const hidden: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const menu: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=nameViewDropdown.styles.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/readerNameView.d.ts

@@ -0,0 +1,15 @@
+import { RootState } from '../../engine/state';
+/**
+ * The switch that shows a store opened from the file in the name view its
+ * reader is looking at, since the file holds the view its lock keeps. It
+ * changes that store's screen alone, as a readonly reader's switch does.
+ *
+ * @example
+ * store.dispatchSync(initialLoadJsonAction$(json), readerNameViewAction(store.state, reader));
+ */
+export declare const readerNameViewAction: (opened: RootState, reader: RootState) => import('@dineug/r-html').AnyAction<{
+    value: import('../../internal-types').ValuesType<typeof import('../../constants/schema').NameViewMode>;
+    shared: boolean;
+    editorId: string;
+}>;
+//# sourceMappingURL=readerNameView.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/welcome-screen/welcome-hints/WelcomeHints.styles.d.ts

@@ -4,6 +4,11 @@
  * 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.

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

@@ -16,6 +16,8 @@ export declare const WELCOME_MENU_MIN_HEIGHT = 294;
  */
 export declare const WELCOME_HINTS_MIN_WIDTH = 720;
 export declare const WELCOME_HINTS_MIN_HEIGHT = 562;
+/** The widest a hint's label runs before it wraps, as WelcomeHints.styles.ts sets it. */
+export declare const HINT_LABEL_MAX_WIDTH = 220;
 /** 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. */
@@ -75,13 +77,15 @@ export type HintSide = 'before' | 'after';
  */
 export type HintPlacement = {
     labelFirst: boolean;
+    /** The label hangs under the arrow's tail, as the side it names has no room for it. */
+    stacked: 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.
+ * Places a hint so its arrow's tip meets the anchor, the label on the side it
+ * names (before: left to right, left; right to left, right), or under the
+ * arrow where that side has no room for a whole label, as beside the Explorer.
  */
 export declare function hintPlacement(anchorX: number, rootWidth: number, side: HintSide, dir: TextDirection): HintPlacement;
 //# sourceMappingURL=welcomeLayout.d.ts.map

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

@@ -1,3 +1,7 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const scope: import('@dineug/r-html').CSSTemplateLiterals;
+/** The ERD tab's row: the Explorer, when shown, and the canvas beside it. */
+export declare const erdRow: import('@dineug/r-html').CSSTemplateLiterals;
+/** The canvas's share of the row, all of it the Explorer leaves. */
+export declare const erdScope: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=ErdEditor.styles.d.ts.map

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

@@ -0,0 +1,52 @@
+import { RxStore } from '../../engine/rx-store';
+import { RootState } from '../../engine/state';
+import { Unsubscribe } from '../../internal-types';
+export type Layout = {
+    /** The root as the ResizeObserver last measured it. */
+    observed: {
+        width: number;
+        height: number;
+    };
+    /** How much of the root's width a panel docked beside the canvas takes. */
+    reach: number;
+};
+/** The root's measured size and the panel reach, one per editor, kept until the element goes. */
+export declare function layoutOf(store: RxStore): Layout;
+/**
+ * Whether the toolbar is drawn. Zen mode takes it away over the canvas it was
+ * entered from alone, or the tab that turned the mode on would be the only one
+ * it could be turned off from.
+ */
+export declare const hasToolbar: ({ editor, settings }: RootState) => boolean;
+/**
+ * The editor's own width, panel included, which decides whether a dialog
+ * stacks: the viewport plus the reach a docked panel takes from it, so a spec
+ * that sets the viewport alone reads that width.
+ */
+export declare function editorWidthOf(store: RxStore): number;
+/**
+ * Applies the viewport from what decides it: the measured root, the toolbar
+ * zen mode takes away, the tab and the Explorer. It compares those first and
+ * returns when none moved, writes the reach first, and dispatches only a new viewport.
+ */
+export declare function applyViewport(store: RxStore): void;
+/**
+ * Applies the viewport inside every batch that moves its inputs, so a tab,
+ * zen mode or takeover change has it before anything renders. The inputs as
+ * they stand now are the first ones, so a batch that moves none writes nothing.
+ */
+export declare function observeViewport(store: RxStore): Unsubscribe;
+/** Records what the ResizeObserver measured and applies the viewport from it. */
+export declare function measureRoot(store: RxStore, observed: {
+    width: number;
+    height: number;
+}): void;
+/** How far in from the canvas's left edge the theme builder and the locale picker stand. */
+export declare const PICKER_INSET = 16;
+/**
+ * Where the theme builder and the locale picker stand left to right while the
+ * Explorer takes the left of the root: past it, at the canvas's own left edge.
+ * Right to left they keep their place at the other end.
+ */
+export declare function insetPastExplorer(store: RxStore, dir: 'ltr' | 'rtl'): Record<string, string>;
+//# sourceMappingURL=viewportLayout.d.ts.map

package/dist/components/explorer/Explorer.d.ts

@@ -0,0 +1,12 @@
+import { FC } from '@dineug/r-html';
+export type ExplorerProps = {
+    readonly: boolean;
+};
+/**
+ * The Explorer's place beside the canvas: the panel at the width the layout
+ * reaches, or nothing. It reads the reach alone, so a drag of the edge renders
+ * the shell and the panel's root and nothing of the tree.
+ */
+declare const Explorer: FC<ExplorerProps>;
+export default Explorer;
+//# sourceMappingURL=Explorer.d.ts.map

package/dist/components/explorer/explorer-controller/ExplorerController.d.ts

@@ -0,0 +1,11 @@
+import { FC } from '@dineug/r-html';
+/** How long the edits must pause before an edit of a searched text searches again. */
+export declare const EDIT_SEARCH_DELAY = 100;
+/**
+ * What opens the Explorer's search and keeps it current, mounted beside the
+ * panel whether it shows or not: the find chord, the palette row's and the
+ * context menu's openings, and the searches an edit asks for.
+ */
+declare const ExplorerController: FC;
+export default ExplorerController;
+//# sourceMappingURL=ExplorerController.d.ts.map

package/dist/components/explorer/explorer-panel/ExplorerPanel.d.ts

@@ -0,0 +1,14 @@
+import { FC } from '@dineug/r-html';
+export type ExplorerPanelProps = {
+    /** The width the layout gives the panel, which a drag on its edge asks to change. */
+    width: number;
+    readonly: boolean;
+};
+/**
+ * The Explorer docked left of the canvas: a read-only tree of the document
+ * that jumps to what a row stands for on a click or Enter. Escape hands the
+ * keyboard back to the canvas and leaves the panel open.
+ */
+declare const ExplorerPanel: FC<ExplorerPanelProps>;
+export default ExplorerPanel;
+//# sourceMappingURL=ExplorerPanel.d.ts.map