@dineug/erd-editor 3.10.0 → 4.1.0

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

@@ -0,0 +1,91 @@
+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 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. */
+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;
+    /** 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 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.d.ts

@@ -1,8 +1,10 @@
 import { DatabaseVendor } from '../../constants/sql/database';
 import { SharedStore, SharedStoreConfig } from '../../engine/shared-store';
-import { ThemeOptions } from '../../themes/radix-ui-theme';
+import { LocaleOption } from '../../i18n/locales';
+import { Appearance, ThemeOptions } from '../../themes/radix-ui-theme';
 import { Theme as ThemeType } from '../../themes/tokens';
 import { KeyBindingMap, KeyBindingName } from '../../utils/keyboard-shortcut';
+import { SchemaSQLOptions } from '../../utils/schema-sql';
 declare global {
     interface HTMLElementTagNameMap {
         'erd-editor': ErdEditorElement;
@@ -12,22 +14,80 @@ export type ErdEditorProps = {
     readonly: boolean;
     systemDarkMode: boolean;
     enableThemeBuilder: boolean;
+    enableLocalePicker: boolean;
+    enableWelcomeScreen: boolean;
+};
+export type SchemaImportOptions = {
+    /**
+     * Where the imported tables land: 'auto' lays them out by their
+     * relationships before the document is replaced, as an import from the
+     * menu does, and 'grid', the default, replaces it at once with them in rows.
+     */
+    placement?: 'auto' | 'grid';
+    /**
+     * Whether the import takes the document's place, 'replace', the default, or
+     * joins it below the diagram as new tables, 'append', as Import and Add does.
+     */
+    mode?: 'replace' | 'append';
+};
+export type SchemaJSONImportOptions = {
+    /**
+     * Whether the document takes this one's place, 'replace', the default, or
+     * joins it below the diagram as new tables and memos, 'append'.
+     */
+    mode?: 'replace' | 'append';
+};
+/**
+ * Replaces the document with an import, or adds the import to it for an
+ * append, returning a Promise when it places first.
+ */
+export type SetSchema = {
+    (value: string, options: SchemaImportOptions & {
+        placement: 'auto';
+    }): Promise<void>;
+    (value: string, options?: SchemaImportOptions & {
+        placement?: 'grid';
+    }): void;
+    (value: string, options?: SchemaImportOptions): Promise<void> | void;
 };
 export interface ErdEditorElement extends ErdEditorProps, HTMLElement {
+    /** The document in the form a file saves; setting it replaces the document. */
     value: string;
+    /**
+     * The document as this editor holds it, removed entities and their order
+     * included, which a collaborator's setInitialValue takes so undo can bring
+     * them back. Never written to a file.
+     */
+    readonly runtimeValue: string;
     focus: () => void;
     blur: () => void;
     clear: () => void;
     destroy: () => void;
     setInitialValue: (value: string) => void;
     setPresetTheme: (themeOptions: Partial<ThemeOptions>) => void;
+    /** What the system appearance shows, for a host with its own light and dark; null follows the OS. */
+    setSystemAppearance: (appearance: Appearance | null) => void;
     setTheme: (theme: Partial<ThemeType>) => void;
+    /**
+     * 'system' follows the host's or the browser's language; a code fixes one.
+     * Emits nothing. Before any call the editor shows English, or follows system
+     * while enableLocalePicker is on.
+     */
+    setLocale: (locale: LocaleOption) => void;
+    /** What system means: the host UI language as a BCP 47 tag; null reads navigator.languages. */
+    setSystemLocale: (locale: string | null) => void;
     setKeyBindingMap: (keyBindingMap: Partial<Omit<KeyBindingMap, typeof KeyBindingName.edit | typeof KeyBindingName.stop | typeof KeyBindingName.undo | typeof KeyBindingName.redo | typeof KeyBindingName.zoomIn | typeof KeyBindingName.zoomOut | typeof KeyBindingName.zoomReset>>) => void;
-    setSchemaSQL: (value: string) => void;
-    setSchemaGraphQL: (value: string) => void;
-    setSchemaDBML: (value: string) => void;
-    setSchemaAML: (value: string) => void;
-    getSchemaSQL: (databaseVendor?: DatabaseVendor) => string;
+    setSchemaSQL: SetSchema;
+    setSchemaGraphQL: SetSchema;
+    setSchemaDBML: SetSchema;
+    setSchemaAML: SetSchema;
+    setSchemaJSON: (value: string, options?: SchemaJSONImportOptions) => void;
+    /**
+     * The document's DDL: the vendor given or the document's own, created as
+     * the options ask, a choice the vendor lacks falling back as the Schema SQL
+     * tab does; the document's before and after scripts are always in it.
+     */
+    getSchemaSQL: (databaseVendor?: DatabaseVendor, options?: SchemaSQLOptions) => string;
     getSharedStore: (config?: SharedStoreConfig & {
         mouseTracker?: boolean;
         focusTracker?: boolean;

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

@@ -1,7 +1,9 @@
 import { Ref } from '@dineug/r-html';
 import { AppContext } from '../appContext';
+import { LocaleCode, LocaleOption } from '../../i18n/locales';
+import { I18n } from '../../i18n/translate';
 import { Unsubscribe } from '../../internal-types';
-import { ThemeOptions } from '../../themes/radix-ui-theme';
+import { Appearance, ThemeOptions } from '../../themes/radix-ui-theme';
 import { Theme } from '../../themes/tokens';
 import { ErdEditorElement, ErdEditorProps } from './ErdEditor';
 type Props = {
@@ -14,9 +16,20 @@ export declare function useErdEditorAttachElement({ props, ctx, app, root }: Pro
     theme: Theme;
     themeState: {
         options: ThemeOptions;
+        /** What system shows once a host names it; null follows the OS color scheme. */
+        systemAppearance: Appearance | null;
         preset: Theme;
         custom: Partial<Theme>;
     };
+    i18n: I18n;
+    localeState: {
+        /** The option a host or a pick last set; null until either sets one. */
+        option: LocaleOption | null;
+        /** What system means once a host names its own language; null reads the browser's. */
+        systemTag: string | null;
+    };
+    resolveLocaleOption: () => LocaleOption;
+    resolveSystemLocale: () => LocaleCode;
     destroySet: Set<Unsubscribe>;
     hasDarkMode: () => boolean;
 };

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

package/dist/components/explorer/explorer-panel/ExplorerPanel.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 title: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const tool: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const body: 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 muted: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const count: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const dot: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const mark: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=ExplorerPanel.styles.d.ts.map

package/dist/components/explorer/explorer-search/ExplorerSearch.d.ts

@@ -0,0 +1,12 @@
+import { FC } from '@dineug/r-html';
+export type ExplorerSearchProps = {
+    readonly: boolean;
+};
+/**
+ * The Explorer's search above its tree: the find field and its options, the
+ * Replace row folded away to begin with, the place in the matches with the
+ * steps through them, and the kinds of text searched past the three dots.
+ */
+declare const ExplorerSearch: FC<ExplorerSearchProps>;
+export default ExplorerSearch;
+//# sourceMappingURL=ExplorerSearch.d.ts.map

package/dist/components/explorer/explorer-search/ExplorerSearch.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const fields: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const rows: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const field: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const input: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const toggle: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const twisty: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const status: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const count: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const scopes: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const scope: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=ExplorerSearch.styles.d.ts.map

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

@@ -0,0 +1,28 @@
+import { RxStore } from '../../engine/rx-store';
+import { Emitter } from '../../utils/emitter';
+/**
+ * Whether the toolbar shows the Explorer's button pressed: open on the ERD
+ * tab and not hidden by zen mode. A panel the canvas width hides for now
+ * still counts, so a press there closes it.
+ */
+export declare function isExplorerPressed(store: RxStore): boolean;
+/** Whether the panel is drawn now, as opposed to open but stood aside. */
+export declare const isExplorerShown: (store: RxStore) => boolean;
+/**
+ * Opens the Explorer on the ERD tab, from whichever tab is up. Under zen mode
+ * it shows the panel and leaves zen on (an owner decision of 2026-10-13).
+ * Under a takeover it does nothing.
+ */
+export declare function openExplorer(store: RxStore): void;
+export declare function closeExplorer(store: RxStore): void;
+/** The toolbar button: closes a pressed button's panel, opens any other, and does nothing under a takeover. */
+export declare function toggleExplorer(store: RxStore): void;
+/**
+ * The palette's and the context menu's Toggle Explorer, which do what the find
+ * chord does: close a pressed button's panel, or ask for the search otherwise.
+ * Under a takeover it does nothing.
+ */
+export declare function toggleExplorerSearch(store: RxStore, emitter: Emitter): void;
+/** Sets the width a drag on the edge asks for, held between the least and the most. */
+export declare function setExplorerWidth(store: RxStore, width: number): void;
+//# sourceMappingURL=explorerCommands.d.ts.map

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

@@ -0,0 +1,14 @@
+import { ErdTarget } from '../erd/goToErdTarget';
+import { RxStore } from '../../engine/rx-store';
+import { ExplorerNode } from './explorerTree';
+/** Where on the canvas a row goes: none for a folder, which only folds and unfolds. */
+export declare function targetOf(node: ExplorerNode): ErdTarget | null;
+/**
+ * Goes to a row's or a match's target by the one jump rule, and lights a
+ * foreign key's relationship once there. Table Properties gives way first, so
+ * nothing is left under it (an owner decision of 2026-10-13).
+ */
+export declare function jumpTo(store: RxStore, target: ErdTarget): void;
+/** Goes where a row stands for; a folder goes nowhere. */
+export declare function activateNode(store: RxStore, node: ExplorerNode): void;
+//# sourceMappingURL=explorerNavigation.d.ts.map

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

@@ -0,0 +1,71 @@
+import { AnyAction } from '@dineug/r-html';
+import { RxStore } from '../../engine/rx-store';
+import { I18n } from '../../i18n/translate';
+import { Emitter } from '../../utils/emitter';
+import { FindField, FindMatch, Matcher, ReplaceRun } from '../../utils/find-replace';
+/** How long typing must pause before a regular expression is searched, as one can be slow. */
+export declare const REGEX_INPUT_DELAY = 150;
+/** What the search holds that no render reads: the matcher, the run, the timers. */
+type SearchRuntime = {
+    matcher: Matcher | null;
+    pendingSearch: ReturnType<typeof setTimeout> | null;
+    /** Set while the search dispatches its own edit, whose matches it has worked out already. */
+    replacing: boolean;
+    /** Set by an edit of a searched text the tree does not show yet, one made while it stood aside say. */
+    stale: boolean;
+    /** Where the presses of Replace since the last jump or change of search began. */
+    run: ReplaceRun | null;
+    /** Set once that run has come back to where it began, which holds until a new run. */
+    stopped: boolean;
+    /** The last focus request the find field took or let go. */
+    focusTaken: number;
+};
+export declare function searchRuntimeOf(store: RxStore): SearchRuntime;
+/** Whether a query is being searched, which puts the tree in its search form. */
+export declare const isSearching: (store: RxStore) => boolean;
+/** What the line under the fields says: the place in the matches, how many there are, or why none. */
+export declare function countText(store: RxStore, i18n: Pick<I18n, 't'>): string;
+/** Drops a regular expression's search still waiting for typing to pause. */
+export declare function cancelPendingSearch(store: RxStore): void;
+/** Whether the find field may take the keyboard now, which it marks as taken. */
+export declare function takeSearchFocus(store: RxStore): boolean;
+/** Whether a dialog the search trades for itself is up, which the chord then trades. */
+export declare const hasSearchDialog: (store: RxStore) => boolean;
+/**
+ * Brings the keyboard back to the search of a panel shown already, keeping
+ * its current match and its run, as every host's find does pressed again.
+ */
+export declare function focusSearch(store: RxStore): void;
+/**
+ * Opens the Explorer on its search, handing it the keyboard. A canvas too
+ * narrow says so rather than show nothing (an owner decision of 2026-10-13).
+ */
+export declare function openSearch(store: RxStore, emitter: Emitter): void;
+export declare function goToNext(store: RxStore): void;
+export declare function goToPrevious(store: RxStore): void;
+/** A row picked before a regular expression's pause goes to its match among those of what is typed, if any. */
+export declare function goToMatch(store: RxStore, match: FindMatch): void;
+/**
+ * Replaces the current match and takes the canvas to the next one in the same
+ * dispatch, so one undo takes back both. A run that comes back to where it
+ * began stops there rather than go round to what it wrote.
+ */
+export declare function replaceOne(store: RxStore): void;
+/** Replaces every match in one dispatch: one history entry and one batch to every peer. */
+export declare function replaceAll(store: RxStore): void;
+/** Searches plain text at once, as it is quick, and a regular expression once typing pauses. */
+export declare function setQuery(store: RxStore, query: string): void;
+export declare function setReplacement(store: RxStore, replacement: string): void;
+/** Match Case, Whole Word and Regex search again; Preserve Case only shapes what Replace writes. */
+export declare function toggleOption(store: RxStore, key: 'matchCase' | 'wholeWord' | 'regex' | 'preserveCase'): void;
+export declare function toggleField(store: RxStore, field: FindField): void;
+/**
+ * An edit of a searched text leaves the matches stale: searched again once
+ * the edits pause while the panel is shown, or at once by the batch that shows
+ * it again. A hover, a selection or a scroll edits none and searches nothing.
+ */
+export declare function noteBatch(store: RxStore, actions: AnyAction[]): boolean;
+/** Searches again when an edit left the matches stale and the search is on screen. */
+export declare function searchIfStale(store: RxStore): void;
+export {};
+//# sourceMappingURL=explorerSearch.d.ts.map

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

@@ -0,0 +1,90 @@
+import { TreeNode } from '../primitives/tree/treeModel';
+import { RootState } from '../../engine/state';
+import { FindMatch } from '../../utils/find-replace';
+export type ExplorerFolder = 'tables' | 'tableGroups' | 'memos' | 'columns' | 'indexes' | 'foreignKeys';
+/** The matches a search found in a row's own name, which it marks; none outside a search. */
+type NameMatches = {
+    matches?: ReadonlyArray<FindMatch>;
+};
+/** What one row of the Explorer stands for, and what it shows of it. */
+export type ExplorerNode = {
+    kind: 'folder';
+    folder: ExplorerFolder;
+    count: number;
+} | ({
+    kind: 'table';
+    tableId: string;
+    name: string;
+} & NameMatches) | ({
+    kind: 'column';
+    tableId: string;
+    columnId: string;
+    name: string;
+    dataType: string;
+    primaryKey: boolean;
+    foreignKey: boolean;
+} & NameMatches) | ({
+    kind: 'index';
+    tableId: string;
+    indexId: string;
+    name: string;
+    unique: boolean;
+    columns: string;
+} & NameMatches) | {
+    kind: 'foreignKey';
+    relationshipId: string;
+    tableId: string;
+    /** Whether its columns key the child too, which the connector draws in the PK and FK colour. */
+    identification: boolean;
+    columns: string;
+    parent: string;
+    parentColumns: string;
+} | ({
+    kind: 'tableGroup';
+    tableGroupId: string;
+    name: string;
+    color: string;
+} & NameMatches) | {
+    kind: 'groupTable';
+    tableGroupId: string;
+    tableId: string;
+    name: string;
+} | {
+    kind: 'memo';
+    memoId: string;
+    text: string;
+}
+/** One match in a comment or a memo, shown as the stretch of text around it. */
+ | {
+    kind: 'excerpt';
+    match: FindMatch;
+};
+export type ExplorerTreeNode = TreeNode<ExplorerNode>;
+/**
+ * The Explorer's folders, Tables, Table Groups and Memos, each only while it
+ * holds something and groups and memos only while shown. Tables and groups go
+ * by name, memos as the document has them; a table's folders wait for its expanding.
+ */
+export declare function buildExplorerTree(state: RootState): ExplorerTreeNode[];
+/**
+ * The row a match shows on in the search's tree: a name's own row, or the
+ * excerpt row of a comment or memo, one for each match there.
+ */
+export declare function matchRowId(match: FindMatch): string;
+/** The rows above a match's row in the search's tree, which must be open for the row to be drawn. */
+export declare function matchAncestorIds({ field, id, tableId }: FindMatch): string[];
+export type SearchTree = {
+    roots: ExplorerTreeNode[];
+    /** Every row with children, which a search shows open unless folded. */
+    branchIds: string[];
+};
+/**
+ * The tree a search shows: the rows that hold a match and the rows above
+ * them, in the order the search walked, with a comment's or memo's matches as
+ * rows of their own. A group's tables are left out, found under Tables alone.
+ */
+export declare function buildSearchTree(state: RootState, matches: ReadonlyArray<FindMatch>): SearchTree;
+/** What a search shows open: every row with children but those folded. */
+export declare function searchExpanded(branchIds: ReadonlyArray<string>, collapsed: Readonly<Record<string, true>>): Record<string, true>;
+export {};
+//# sourceMappingURL=explorerTree.d.ts.map

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

@@ -0,0 +1,54 @@
+import { RxStore } from '../../engine/rx-store';
+import { FieldOrder, FindField, FindMatch } from '../../utils/find-replace';
+/** The folder the tree shows open as the Explorer first opens. */
+export declare const TABLES_FOLDER_ID = "f:tables";
+export type ExplorerView = {
+    open: boolean;
+    /** Set by an opening while zen mode is on, which shows the panel without leaving zen. */
+    zenReveal: boolean;
+    width: number;
+    /** Replaced whole on every change: r-html tracks no Set, Map or frozen value. */
+    expanded: Record<string, true>;
+    /** The row the keyboard is on, kept by node id so a row added before it moves nothing. */
+    activeId: string | null;
+    query: string;
+    replacement: string;
+    matchCase: boolean;
+    wholeWord: boolean;
+    regex: boolean;
+    preserveCase: boolean;
+    /** Replaced whole on every change, a copy of the frozen default to begin with. */
+    fields: FindField[];
+    /** Whether the Replace row is unfolded, and the row of scopes past the three dots. */
+    replaceOpen: boolean;
+    scopesOpen: boolean;
+    /** The match the canvas was last taken to, by its place in the matches; -1 for none. */
+    current: number;
+    status: PressStatus | null;
+    matches: FindMatch[];
+    error: 'empty' | 'invalid' | null;
+    /** The walk's order: by name, or the one a run of Replace presses began with. */
+    order: FieldOrder | null;
+    /** The folders and rows folded while a search shows, every other one open. */
+    searchCollapsed: Record<string, true>;
+    /** Raised to ask the find field for the keyboard; dropped unless a drawn panel takes it. */
+    focusRequest: number;
+};
+/**
+ * What the last press of Replace or Replace All said, kept as what it means
+ * rather than as text, so a switch of language reads it again in the new one.
+ */
+export type PressStatus = 'noMoreMatches' | 'noChanges' | {
+    replaced: number;
+};
+/**
+ * The Explorer's own state, one per editor, kept until the element goes:
+ * never in the store, the file, the history or a peer, so it survives a tab
+ * change and a reload of the document alike.
+ */
+export declare function explorerViewOf(store: RxStore): ExplorerView;
+/** Where the tree is scrolled to, unobserved, so a scroll renders nothing outside the tree. */
+export declare function explorerScrollOf(store: RxStore): {
+    top: number;
+};
+//# sourceMappingURL=explorerView.d.ts.map