@dineug/erd-editor 3.9.2 → 4.0.0

package/dist/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn.styles.d.ts

@@ -1,4 +1,7 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const grip: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const gripSlot: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const orderType: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const mark: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=IndexesColumn.styles.d.ts.map

package/dist/components/erd/table-properties/table-properties-indexes/indexes-index/IndexesIndex.d.ts

@@ -2,7 +2,14 @@ import { FC } from '@dineug/r-html';
 import { Index } from '../../../../../internal-types';
 export type IndexesIndexProps = {
     index: Index;
+    /**
+     * The alternate key this index is, 1 for AK1, which the diagram can mark its
+     * columns with; 0 while it is no unique index over two columns or more.
+     */
+    alternateKey?: number;
     selected: boolean;
+    /** The editor's readonly mode: the row only selects, with no remove button and a name it cannot type in. */
+    readonly?: boolean;
     onSelect: (index: Index | null) => void;
 };
 declare const IndexesIndex: FC<IndexesIndexProps>;

package/dist/components/erd/table-properties/table-properties-indexes/indexes-index/IndexesIndex.styles.d.ts

@@ -1,5 +1,11 @@
+/**
+ * A row of the canvas table's height. Its remove button stays in sight, in
+ * the lock's place on a key row, and a hovered row lines its name field.
+ */
 export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const nameCell: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const input: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const unique: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const alternateKey: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const iconButton: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=IndexesIndex.styles.d.ts.map

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

@@ -0,0 +1,21 @@
+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:
+ * selecting it only shows its columns, and the columns are where it changes.
+ */
+declare const IndexesKey: FC<IndexesKeyProps>;
+export default IndexesKey;
+//# sourceMappingURL=IndexesKey.d.ts.map

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

@@ -0,0 +1,13 @@
+/**
+ * An index row's box, picked as an index is: a bar along its left edge
+ * carries the selection where the light theme's tint is too faint alone.
+ */
+export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * A filled tag, where an index row has its UQ toggle and as wide, so the
+ * names start in one line; filled, it reads as a label and never as a toggle.
+ */
+export declare const tag: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const name: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const lock: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=IndexesKey.styles.d.ts.map

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

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;
-    setKeyBindingMap: (keyBindingMap: Partial<Omit<KeyBindingMap, typeof KeyBindingName.edit | typeof KeyBindingName.stop | typeof KeyBindingName.search | 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;
+    /**
+     * '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: 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/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/export-image/ExportImage.d.ts

@@ -0,0 +1,23 @@
+import { FC } from '@dineug/r-html';
+import { ThemeOptions } from '../../themes/radix-ui-theme';
+export type ExportImageProps = {
+    /** The gray and accent the editor's preset is built from. */
+    themeOptions: ThemeOptions;
+    /** Whether the editor shows its dark appearance now. */
+    isDarkMode: boolean;
+};
+/** Image pixels per scene unit, the factor the size is multiplied by. */
+export declare const EXPORT_SCALES: readonly [1, 2, 3];
+export type ExportScale = (typeof EXPORT_SCALES)[number];
+/** The longest side a preview is drawn at, about twice the box it is shown in. */
+export declare const PREVIEW_MAX_SIDE = 1280;
+/** How long the toggles rest before the preview is drawn again. */
+export declare const PREVIEW_DEBOUNCE_MS = 200;
+/**
+ * The export image dialog: a preview, the options, the buttons that write a png
+ * or an svg or copy a png, and a close button. The options last for the
+ * element's life, and an export leaves the dialog open, its outcome in a toast.
+ */
+declare const ExportImage: FC<ExportImageProps>;
+export default ExportImage;
+//# sourceMappingURL=ExportImage.d.ts.map

package/dist/components/export-image/ExportImage.styles.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The preview beside the options, or above them once the editor is narrow,
+ * kept at its own height so a short editor scrolls the box rather than cut it.
+ * The title row heads the options, and the whole box once the preview stacks.
+ */
+export declare const layout: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * A checkerboard under the image, so a background left out reads as left out.
+ * The image is fitted inside a fixed inset whatever its proportions.
+ */
+export declare const preview: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const image: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const loading: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const panel: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The title and the close button, over the options while the preview is beside
+ * them and over the preview once it stacks, so the button keeps the box's top
+ * corner on the side the title row ends at, either way.
+ */
+export declare const header: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const title: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * A 26px square tool tinted under the pointer, as Table Properties and Find and
+ * Replace close. Tab brings its whole focus ring into a box scrolled down.
+ */
+export declare const close: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const scales: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const scale: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const size: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const warning: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const actions: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const action: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=ExportImage.styles.d.ts.map

package/dist/components/export-image/exportImageActions.d.ts

@@ -0,0 +1,48 @@
+import { DOMTemplateLiterals } from '@dineug/r-html';
+import { AppContext } from '../appContext';
+import { DocumentPngOptions, ResolutionReduction } from '../../services/export-png';
+/** What an image is drawn from; each action hooks up the reporters itself. */
+export type ImageRequest = Omit<DocumentPngOptions, 'onResolutionReduced' | 'onProgress'>;
+/** What an svg is drawn from: the request less the scale, which a vector has no use for. */
+export type SvgRequest = Omit<ImageRequest, 'pixelRatio'>;
+type AskedPixels = Pick<ResolutionReduction, 'askedWidth' | 'askedHeight'>;
+/**
+ * The dialog's warning before any file exists: the pixels the scale asks for,
+ * which a canvas ceiling cuts. The toast after it opens alike.
+ */
+export declare function describeAskedSize({ askedWidth, askedHeight }: AskedPixels): DOMTemplateLiterals;
+/**
+ * Says what was lost and why, in the pixels the dialog warned of: what the
+ * scale asked for, then what was written. A box that fits at 1x can still
+ * outrun a canvas at 2x, so the document's own size explains nothing.
+ */
+export declare function describeReduction({ askedWidth, askedHeight, width, height, }: ResolutionReduction): DOMTemplateLiterals;
+/**
+ * Draws the document into a png file, saying so while it draws and reporting
+ * afterwards. The two messages are sequenced rather than stacked, so what
+ * became of the file replaces the message about making it.
+ *
+ * @example
+ * await exportImagePng(app, { doc, theme, toWidth, pixelRatio: 2 }, databaseName);
+ */
+export declare function exportImagePng({ emitter }: AppContext, request: ImageRequest, databaseName: string): Promise<void>;
+/**
+ * Draws the document into an svg file at 100%, the scale left out, saying so
+ * while it draws. An svg holds no canvas, so nothing is ever reduced, and only
+ * a failure is reported once the file is done.
+ *
+ * @example
+ * await exportImageSvg(app, { doc, theme, toWidth, i18n }, databaseName);
+ */
+export declare function exportImageSvg({ emitter }: AppContext, { doc, theme, toWidth, i18n }: SvgRequest, databaseName: string): Promise<void>;
+/**
+ * Puts the document on the clipboard as a png. The clipboard write starts in
+ * the click that called this, before any await, so call it from the handler
+ * itself; a host that refuses is told to save a PNG instead.
+ *
+ * @example
+ * copyImagePng(app, { doc, theme, toWidth, pixelRatio: 2 });
+ */
+export declare function copyImagePng({ emitter }: AppContext, request: ImageRequest): Promise<void>;
+export {};
+//# sourceMappingURL=exportImageActions.d.ts.map

package/dist/components/find-replace/FindReplace.d.ts

@@ -0,0 +1,13 @@
+import { FC } from '@dineug/r-html';
+export type FindReplaceProps = {
+    readonly: boolean;
+};
+/** How many result rows the list draws at once; the rest are reached by moving through them. */
+export declare const MATCH_ROW_LIMIT = 200;
+/** The rows drawn for a list longer than the limit: a window kept around the current match. */
+export declare function rowWindow(current: number, total: number, limit?: number): [number, number];
+/** How long the panel waits for typing to pause before it searches a regular expression. */
+export declare const REGEX_INPUT_DELAY = 150;
+declare const FindReplace: FC<FindReplaceProps>;
+export default FindReplace;
+//# sourceMappingURL=FindReplace.d.ts.map

package/dist/components/find-replace/FindReplace.styles.d.ts

@@ -0,0 +1,27 @@
+/** What the panel's box adds to the height of its controls: its padding and border, above and below. */
+export declare const PANEL_CHROME_HEIGHT: number;
+/**
+ * A panel over the top left of the canvas, clear of the minimap in the other
+ * corner. Its top and height are set inline, since zen mode takes the toolbar
+ * above it away; on a short canvas the list gives up its height first.
+ */
+export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const controls: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const header: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const row: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const actions: 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 scopes: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const scope: 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 list: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const match: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const icon: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const body: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const text: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const mark: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const location: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const more: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=FindReplace.styles.d.ts.map

package/dist/components/find-replace/fieldIcon.d.ts

@@ -0,0 +1,5 @@
+import { DOMTemplateLiterals } from '@dineug/r-html';
+import { FindField } from '../../utils/find-replace';
+/** The icon a result row carries for the kind of text it was found in. */
+export declare function fieldIcon(field: FindField, size?: number): DOMTemplateLiterals;
+//# sourceMappingURL=fieldIcon.d.ts.map

package/dist/components/find-replace/matchTarget.d.ts

@@ -0,0 +1,26 @@
+import { ErdTarget } from '../erd/goToErdTarget';
+import { EngineContext } from '../../engine/context';
+import { GeneratorAction } from '../../engine/generator.actions';
+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.
+ */
+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.
+ */
+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;
+//# sourceMappingURL=matchTarget.d.ts.map

package/dist/components/find-replace/panelLayout.d.ts

@@ -0,0 +1,20 @@
+import { RootState } from '../../engine/state';
+/** The overlays that take the whole canvas over, under which the panel stands down and opens on nothing. */
+export declare const TAKEOVERS: ("automaticTablePlacement" | "diffViewer" | "timeTravel")[];
+/** Whether an overlay that takes the canvas over is up, which keeps Find and Replace shut. */
+export declare const isTakenOver: ({ editor }: RootState) => boolean;
+/**
+ * Whether the panel is drawn: it stands aside, still open, off the ERD tab and
+ * under a takeover, and draws over no dialog, which closes it as it opens.
+ */
+export declare const isPanelShown: (state: RootState) => boolean;
+/** How far in from the left of the canvas the panel stands, and how wide it is at most, as FindReplace.styles draws it. */
+export declare const PANEL_LEFT = 16;
+export declare const PANEL_WIDTH = 380;
+/**
+ * How far in from the left edge of the canvas the panel hides it, read from
+ * the state rather than the panel's box, so a jump that brings the panel back
+ * with the ERD tab lands clear of it too. None while the panel is not drawn.
+ */
+export declare function coveredWidth(state: RootState): number;
+//# sourceMappingURL=panelLayout.d.ts.map

package/dist/components/generator-code/GeneratorCode.d.ts

@@ -1,6 +1,7 @@
 import { FC } from '@dineug/r-html';
 export type GeneratorCodeProps = {
     isDarkMode: boolean;
+    /** One table's code, as Table Properties shows it, with no panel. */
     tableId?: string;
 };
 declare const GeneratorCode: FC<GeneratorCodeProps>;

package/dist/components/generator-code/generator-code-context-menu/GeneratorCodeContextMenu.d.ts

@@ -1,5 +1,8 @@
 import { FC } from '@dineug/r-html';
 export type GeneratorCodeContextMenuProps = {
+    /** The whole document's tab, which adds the panel and Save file to the menu. */
+    full?: boolean;
+    onSave?: () => void;
     onClose: () => void;
 };
 declare const GeneratorCodeContextMenu: FC<GeneratorCodeContextMenuProps>;

package/dist/components/generator-code/generator-code-context-menu/menus/columnNameCaseMenus.d.ts

@@ -1,12 +1,15 @@
 import { AppContext } from '../../../appContext';
+import { PlainMessageKey } from '../../../../i18n/translate';
 type Menu = {
     name: string;
+    labelKey?: PlainMessageKey;
     value: number;
 };
 export declare const menus: Menu[];
 export declare function createColumnNameCaseMenus({ store }: AppContext): {
     checked: boolean;
     name: string;
+    labelKey: PlainMessageKey | undefined;
     onClick: () => void;
 }[];
 export {};