@dineug/erd-editor 4.0.0 → 4.1.0

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

package/dist/components/{find-replace → explorer}/matchTarget.d.ts

@@ -5,22 +5,20 @@ import { RootState } from '../../engine/state';
 import { FindMatch } from '../../utils/find-replace';
 /**
  * Where on the ERD canvas the text of a match is edited: its table, its column
- * cell or its memo, with the match itself, which a cell too wide for the
- * canvas is scrolled to by.
+ * cell, its memo or its table group, with the match itself, which a cell too
+ * wide for the canvas is scrolled to by. An index goes to the table it is on.
  */
 export declare function toErdTarget(match: FindMatch): ErdTarget;
 /**
  * The state as a jump measures it once a replacement is in: the field holding
- * the new text at the width its reducer gives it. A memo's text sizes nothing,
- * and a table or column the document no longer holds is left as it is.
+ * the new text at the width its reducer gives it. A memo, an index or a group
+ * name sizes no table, and one the document no longer holds is left as it is.
  */
 export declare function withReplacement(state: RootState, { toWidth }: EngineContext, { field, id, tableId }: FindMatch, value: string): RootState;
 /**
  * The jump Replace makes to the next match, in the replacement's own dispatch.
  * A batch is read against the state before it, so the jump measures the table
  * the replacement widens or narrows from what the replacement writes.
- *
- * @param covered How far in from the left edge the panel hides the canvas.
  */
-export declare const showNextMatchAction$: (next: FindMatch, replaced: FindMatch, value: string, covered: number) => GeneratorAction;
+export declare const showNextMatchAction$: (next: FindMatch, replaced: FindMatch, value: string) => GeneratorAction;
 //# sourceMappingURL=matchTarget.d.ts.map

package/dist/components/primitives/icon/icons.d.ts

@@ -12,22 +12,25 @@ declare const LUCIDE_ICON: {
     braces: IconNode;
     brackets: IconNode;
     'case-sensitive': IconNode;
+    'case-upper': IconNode;
     check: IconNode;
     'chevron-down': IconNode;
     'chevron-right': IconNode;
+    'chevrons-down-up': IconNode;
     code: IconNode;
-    'columns-2': IconNode;
     contrast: IconNode;
     copy: IconNode;
     database: IconNode;
-    diff: IconNode;
     download: IconNode;
+    ellipsis: IconNode;
     'external-link': IconNode;
     eye: IconNode;
     'file-diff': IconNode;
     'file-image': IconNode;
     'file-input': IconNode;
     'file-output': IconNode;
+    folder: IconNode;
+    'folder-open': IconNode;
     fullscreen: IconNode;
     'grip-vertical': IconNode;
     group: IconNode;
@@ -36,9 +39,12 @@ declare const LUCIDE_ICON: {
     'key-round': IconNode;
     languages: IconNode;
     link: IconNode;
+    list: IconNode;
+    'list-tree': IconNode;
     'loader-circle': IconNode;
     lock: IconNode;
     'lock-open': IconNode;
+    logs: IconNode;
     maximize: IconNode;
     'message-square': IconNode;
     minimize: IconNode;
@@ -62,14 +68,12 @@ declare const LUCIDE_ICON: {
     'rotate-ccw-clock': IconNode;
     search: IconNode;
     settings: IconNode;
-    'settings-2': IconNode;
     'share-2': IconNode;
     spline: IconNode;
     'sticky-note': IconNode;
     sun: IconNode;
     'table-2': IconNode;
     'table-properties': IconNode;
-    'text-search': IconNode;
     'triangle-alert': IconNode;
     'undo-2': IconNode;
     ungroup: IconNode;

package/dist/components/primitives/sash/Sash.d.ts

@@ -22,6 +22,7 @@ export type SashProps = {
     left?: number;
     onMove?: (dragMove: DragMove) => void;
     onMousedown?: (event: MouseEvent) => void;
+    onDblclick?: (event: MouseEvent) => void;
 };
 declare const Sash: FC<SashProps>;
 export default Sash;

package/dist/components/primitives/tree/Tree.d.ts

@@ -0,0 +1,30 @@
+import { DOMTemplateLiterals, FC } from '@dineug/r-html';
+import { TreeRow } from './treeModel';
+export declare const TREE_ROW_HEIGHT = 22;
+export declare const TREE_OVERSCAN = 8;
+export type TreeProps<T = any> = {
+    rows: ReadonlyArray<TreeRow<T>>;
+    /** The row the keyboard is on, named to a reader by aria-activedescendant. */
+    activeId: string | null;
+    /** The row a host marks as the current one, such as the match it jumped to. */
+    currentId?: string | null;
+    /** Scrolls this row into view each time a different id arrives; a null between two arrivals of one id scrolls it again. */
+    revealId?: string | null;
+    label: string;
+    dir?: 'ltr' | 'rtl';
+    /** Read once as the tree mounts, so a scroll position kept outside comes back. */
+    getScrollTop: () => number;
+    onScroll?: (top: number) => void;
+    onToggle?: (id: string, expanded: boolean) => void;
+    onActivate?: (row: TreeRow<T>) => void;
+    onActiveChange?: (id: string) => void;
+    renderRow: (row: TreeRow<T>) => DOMTemplateLiterals;
+};
+/**
+ * A virtualized tree with fixed-height rows. It renders the rows in view, the
+ * overscan and the active row, answers the tree keys and leaves every policy to
+ * its host: what a row shows, what activating one does, Escape and the chords.
+ */
+declare const Tree: FC<TreeProps>;
+export default Tree;
+//# sourceMappingURL=Tree.d.ts.map

package/dist/components/primitives/tree/Tree.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const space: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const twisty: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=Tree.styles.d.ts.map

package/dist/components/primitives/tree/treeModel.d.ts

@@ -0,0 +1,42 @@
+/**
+ * One node of a tree a host builds. Its children are asked for only while it
+ * is expanded, so a host can hand over a large document without building rows
+ * for what stays folded.
+ */
+export type TreeNode<T = unknown> = {
+    id: string;
+    hasChildren: boolean;
+    children: () => ReadonlyArray<TreeNode<T>>;
+    data: T;
+};
+/** A node as the tree lays it out: its depth and its place among its siblings. */
+export type TreeRow<T = unknown> = {
+    node: TreeNode<T>;
+    /** One for a root. */
+    level: number;
+    setSize: number;
+    /** One for the first sibling. */
+    posInSet: number;
+    expanded: boolean;
+    parentId: string | null;
+};
+export type ExpandedIds = Readonly<Record<string, true>>;
+/** The rows a tree shows: every root, and the children of each expanded node, depth first. */
+export declare function flattenTree<T>(roots: ReadonlyArray<TreeNode<T>>, expanded: ExpandedIds): TreeRow<T>[];
+/** What a key asks of the tree: move the active row, or fold or unfold one. */
+export type TreeMove = {
+    type: 'focus';
+    id: string;
+    index: number;
+} | {
+    type: 'toggle';
+    id: string;
+    expanded: boolean;
+};
+/**
+ * Reads a tree key the way the WAI-ARIA tree pattern does. Up and Down step,
+ * Home and End go to either end, the inline end unfolds or steps into the
+ * first child and the inline start folds or steps out, mirrored right to left.
+ */
+export declare function moveFocus<T>(rows: ReadonlyArray<TreeRow<T>>, activeId: string | null, key: string, dir?: 'ltr' | 'rtl'): TreeMove | null;
+//# sourceMappingURL=treeModel.d.ts.map

package/dist/components/quick-search/QuickSearch.styles.d.ts

@@ -8,6 +8,7 @@ export declare const hintItem: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const empty: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const prefix: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const list: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const space: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const action: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const icon: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const name: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/quick-search/actions.d.ts

@@ -5,7 +5,6 @@ import { LocaleOption } from '../../i18n/locales';
 import { LabeledMenu } from '../../i18n/menuLabel';
 import { I18n, PlainMessageKey } from '../../i18n/translate';
 import { AppearanceOption } from '../../themes/radix-ui-theme';
-import { FindReplaceQuery } from '../../utils/emitter';
 import { FindMatch } from '../../utils/find-replace';
 export type Action = {
     icon?: DOMTemplateLiterals | null;
@@ -65,8 +64,6 @@ export declare function createScopeActions(app: AppContext, i18n?: I18n, prefere
 export declare function createPreferenceActions(i18n: I18n, { appearance, locale }: PalettePreferences): Action[];
 /** The row for one field a search found, saying where it is, which stands the reader on it when chosen. */
 export declare function createMatchAction(state: RootState, match: FindMatch, i18n?: I18n): Action;
-/** The row handing a search to Find and Replace, named with the count the panel opens on. */
-export declare function createShowAllAction(count: number, payload: FindReplaceQuery, i18n?: I18n): Action;
 /** The five tabs the Tab row opens, each but the one shown. */
 export declare function createTabActions(i18n?: I18n): Action[];
 export {};

package/dist/components/quick-search/paletteList.d.ts

@@ -0,0 +1,7 @@
+/** The height of one palette row, which the list lays out every row at. */
+export declare const PALETTE_ROW_HEIGHT = 45;
+/** The tallest the list stands before it scrolls. */
+export declare const PALETTE_LIST_MAX_HEIGHT = 400;
+/** How tall the list stands for so many rows: all of them, up to its tallest. */
+export declare const paletteListHeight: (count: number) => number;
+//# sourceMappingURL=paletteList.d.ts.map

package/dist/components/quick-search/scopedActions.d.ts

@@ -3,8 +3,6 @@ import { I18n } from '../../i18n/translate';
 import { FindField } from '../../utils/find-replace';
 import { Action } from './actions';
 import { PaletteQuery, PaletteScope } from './paletteQuery';
-/** How many rows a prefixed list shows, few enough to draw at once. */
-export declare const SCOPED_ACTION_LIMIT = 100;
 /** What the colon searches: the free text, never a name. */
 export declare const TEXT_FIELDS: FindField[];
 /**
@@ -19,16 +17,12 @@ export declare function scopeBase(actions: Action[], scope: PaletteScope | null)
  * read from the document for the columns, the free text and the help.
  */
 export declare function paletteRows(app: AppContext, found: Action[], { scope, keyword, table }: PaletteQuery, i18n?: I18n): Action[];
+/** The table rows the keyword fuzzes to, every one, those holding it as typed or by its Hangul letters first. */
+export declare function rankTableActions(found: Action[], keyword: string): Action[];
 /**
- * The table rows the keyword fuzzes to, those holding it as typed or by its
- * Hangul letters first, up to the scoped limit, past which a table whose name
- * the panel finds it in hands the search to Find and Replace over the names.
- */
-export declare function rankTableActions(app: AppContext, found: Action[], keyword: string, i18n?: I18n): Action[];
-/**
- * One row a field of the kinds given holding the keyword, Hangul letters too,
- * or every column or text, up to the scoped limit, past which one holding it as
- * typed hands it to Find and Replace over those kinds, without the table part.
+ * One row for each field of the kinds given holding the keyword, Hangul letters
+ * too, or for every column or text that is not empty while there is none, the
+ * table part narrowing a column search; the list draws only the rows in view.
  */
 export declare function createFieldActions(app: AppContext, fields: FindField[], keyword: string, table?: string | null, i18n?: I18n): Action[];
 /** The prefixes as rows, each typing its character into the input when chosen; a keyword fuzzes them. */

package/dist/components/theme-builder/ThemeBuilder.styles.d.ts

@@ -1,7 +1,7 @@
 /**
- * A panel placed over whichever tab is up, padded as Find and Replace is. The
- * tab wrapper raises no stacking context, so a raised descendant would paint
- * over an unraised sibling; the same step later in the root keeps this on top.
+ * A panel placed over whichever tab is up. The tab wrapper raises no stacking
+ * context, so a raised descendant would paint over an unraised sibling; the
+ * same step later in the root keeps this on top.
  */
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const header: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/toolbar/Toolbar.styles.d.ts

@@ -1,5 +1,4 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const vertical: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const menu: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const tableCount: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=Toolbar.styles.d.ts.map

package/dist/constants/layout.d.ts

@@ -141,7 +141,13 @@ export declare const TOOLBAR_DATABASE_NAME_WIDTH = 150;
 export declare const TABLE_PROPERTIES_BODY_PADDING = 12;
 /** How many rows the Table Properties index order shows before it scrolls the rest. */
 export declare const INDEX_ORDER_MAX_ROWS = 3;
-export declare const DIFF_TREE_WIDTH = 200;
+/** The Explorer's width as it first opens, and the width a double press on its edge gives back. */
+export declare const EXPLORER_WIDTH = 260;
+/** The narrowest and the widest a drag on the Explorer's edge sets it; narrower than the least, it hides. */
+export declare const EXPLORER_MIN_WIDTH = 200;
+export declare const EXPLORER_MAX_WIDTH = 480;
+/** The least of the canvas the Explorer leaves beside it, whatever its width asks. */
+export declare const EXPLORER_CANVAS_MIN_WIDTH = 320;
 /** The width of the options panel beside the code, on the Schema SQL and Code Generator tabs. */
 export declare const SCHEMA_SQL_PANEL_WIDTH = 300;
 /** An editor narrower than this opens the Schema SQL and Code Generator tabs with their panels folded away. */

package/dist/constants/open.d.ts

@@ -7,7 +7,6 @@ export declare const Open: {
     readonly localePicker: "localePicker";
     readonly diffViewer: "diffViewer";
     readonly timeTravel: "timeTravel";
-    readonly findReplace: "findReplace";
     readonly exportImage: "exportImage";
     readonly mapColumns: "mapColumns";
 };

package/dist/engine/index.js

@@ -1,18 +1,18 @@
-import { $ as e, Bo as t, Jn as n, c as r, ds as i, mn as a, n as o, ps as s, r as c, t as l, u, v as d, y as f } from "../loadValue-B3EFSe9k.js";
+import { $ as e, Jn as t, Vo as n, c as r, fs as i, mn as a, ms as o, n as s, r as c, t as l, u, v as d, y as f } from "../loadValue-BKvXDYoC.js";
 import { Observable as p, Subject as m, debounceTime as h, map as g } from "rxjs";
 import { omit as _ } from "es-toolkit";
 //#region src/engine/replication-store.ts
-var v = t(f), y = { change: "change" };
-function b(t) {
+var v = n(f), y = { change: "change" };
+function b(n) {
 	let b = /* @__PURE__ */ new Set(), x = u({
-		...t,
+		...n,
 		routes: !1
 	}), { clock: S } = x, C = c(x, !1);
-	C.dispatchSync(n({
+	C.dispatchSync(t({
 		width: 0,
 		height: 0
 	}));
-	let w = o(C), T = new m(), E = new p((e) => C.subscribe((t) => e.next(t))).pipe(r(f), h(200)), D = /* @__PURE__ */ new Set(), O = null, k = (e) => (D.has(e) || D.add(e), () => {
+	let w = s(C), T = new m(), E = new p((e) => C.subscribe((t) => e.next(t))).pipe(r(f), h(200)), D = /* @__PURE__ */ new Set(), O = null, k = (e) => (D.has(e) || D.add(e), () => {
 		D.delete(e);
 	}), A = (e, t) => {
 		D.forEach((n) => {
@@ -39,7 +39,7 @@ function b(t) {
 			return i(C.state);
 		},
 		get runtimeValue() {
-			return s(C.state);
+			return o(C.state);
 		},
 		on: k,
 		setInitialValue: j,