@dineug/erd-editor 3.10.0 → 4.0.0

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

@@ -3,7 +3,10 @@ import { RootState } from '../../engine/state';
 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, while a dialog it would paint over is up. */
+/**
+ * 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;

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 {};

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

@@ -3,10 +3,18 @@ type Menu = {
     name: string;
     value: number;
 };
+/**
+ * The menu's three groups, a rule between each two, every group ascending by
+ * name ignoring case: the languages, the ORMs, and the schemas, which hold the
+ * tables written in another schema language or library.
+ */
+export declare const menuGroups: ReadonlyArray<ReadonlyArray<Menu>>;
+/** Every language in menu order, with no rule, which the palette and the Settings lock row read. */
 export declare const menus: Menu[];
 export declare function createLanguageMenus({ store }: AppContext): {
     checked: boolean;
     name: string;
+    separated: boolean;
     onClick: () => void;
 }[];
 export {};

package/dist/components/generator-code/generator-code-context-menu/menus/tableNameCaseMenus.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 createTableNameCaseMenus({ store }: AppContext): {
     checked: boolean;
     name: string;
+    labelKey: PlainMessageKey | undefined;
     onClick: () => void;
 }[];
 export {};

package/dist/components/generator-code/generator-code-options/GeneratorCodeOptions.d.ts

@@ -0,0 +1,17 @@
+import { FC } from '@dineug/r-html';
+/** The panel's id, which the button folding it away controls. */
+export declare const GENERATOR_CODE_OPTIONS_ID = "generator-code-options";
+export type GeneratorCodeOptionsProps = {
+    isDarkMode: boolean;
+    onHide: () => void;
+    onSave: () => void;
+    onCopy: () => void;
+};
+/**
+ * The options beside the generated code: the settings the document saves that
+ * change it, each dimmed while the language ignores it, then the buttons that
+ * save and copy the text.
+ */
+declare const GeneratorCodeOptions: FC<GeneratorCodeOptionsProps>;
+export default GeneratorCodeOptions;
+//# sourceMappingURL=GeneratorCodeOptions.d.ts.map

package/dist/components/generator-code/generator-code-options/GeneratorCodeOptions.styles.d.ts

@@ -0,0 +1,5 @@
+/** A setting's name over its list, broken anywhere sooner than past the panel. */
+export declare const name: import('@dineug/r-html').CSSTemplateLiterals;
+/** A setting the language ignores: its name dimmed, as its list dims its value, still to be changed. */
+export declare const unused: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=GeneratorCodeOptions.styles.d.ts.map

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

@@ -0,0 +1,12 @@
+import { AppContext } from '../appContext';
+import { PanelView } from '../schema-sql/schemaSQLView';
+/** Whether the Code Generator's options panel shows, apart from the Schema SQL tab's. */
+export type GeneratorCodeView = PanelView;
+/**
+ * The window's own Code Generator state: never in the store, the file or a
+ * change event, kept across tab switches until the element goes, one per editor.
+ */
+export declare function generatorCodeViewOf({ store, }: Pick<AppContext, 'store'>): GeneratorCodeView;
+/** Folds the Code Generator panel away or opens it; one not measured yet opens. */
+export declare function toggleGeneratorCodePanel(app: Pick<AppContext, 'store'>): void;
+//# sourceMappingURL=generatorCodeView.d.ts.map

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

@@ -0,0 +1,14 @@
+/**
+ * The extension each language's code is saved under. Java and JPA save their
+ * classes in one .java file as is, which works as a paste (an owner decision).
+ */
+export declare const LanguageToExtensionMap: Readonly<Record<number, string>>;
+/** The extension a language's code saves under, .txt for a language this editor does not know. */
+export declare const codeFileExtension: (language: number) => string;
+/** Whether a language's code follows the database. */
+export declare const readsDatabase: (language: number) => boolean;
+/** Whether a language's code follows the table and column name cases, which go together. */
+export declare const readsNameCases: (language: number) => boolean;
+/** Whether the panel, the context menu and the palette offer a language the bracket type. */
+export declare const readsBracket: (language: number) => boolean;
+//# sourceMappingURL=languageSettings.d.ts.map

package/dist/components/locale-picker/LocalePicker.d.ts

@@ -0,0 +1,13 @@
+import { FC } from '@dineug/r-html';
+import { LocaleCode, LocaleOption } from '../../i18n/locales';
+export type LocalePickerProps = {
+    /** The option in force, which the panel checks. */
+    option: LocaleOption;
+    /** The language System stands for now, named beside it. */
+    systemLocale: LocaleCode;
+};
+/** The row a key moves to from the one at index, round either end; null for any other key. */
+export declare function stepOption(index: number, length: number, key: string): number | null;
+declare const LocalePicker: FC<LocalePickerProps>;
+export default LocalePicker;
+//# sourceMappingURL=LocalePicker.d.ts.map

package/dist/components/locale-picker/LocalePicker.styles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Hung where the theme builder hangs, on the reading side of the editor, and
+ * never taller than the editor below the toolbar: the list scrolls instead.
+ */
+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;
+/**
+ * A 26px square tool tinted under the pointer, as the editor's other panels
+ * close; the panel's own keys keep Space and Enter from the canvas.
+ */
+export declare const close: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const list: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const pinned: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const option: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const check: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const label: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const hint: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=LocalePicker.styles.d.ts.map

package/dist/components/localeContext.d.ts

@@ -0,0 +1,10 @@
+import { I18n } from '../i18n/translate';
+import { Ctx } from '../internal-types';
+/**
+ * The language the editor's own text is shown in. The element provides one it
+ * changes in place, never through the provider, so a component mounted after a
+ * switch reads the new language; where nothing provides one, English.
+ */
+export declare const localeContext: import('@dineug/r-html').Context<I18n>;
+export declare const useI18n: (ctx: Ctx) => import('@dineug/r-html').Ref<I18n>;
+//# sourceMappingURL=localeContext.d.ts.map

package/dist/components/localized/Localized.d.ts

@@ -0,0 +1,18 @@
+import { DOMTemplateLiterals, FC } from '@dineug/r-html';
+import { MessageArgs, MessageKey, MessageValues } from '../../i18n/translate';
+export type LocalizedProps = {
+    messageKey: MessageKey;
+    params?: MessageValues;
+};
+/** A key read in the language of the element it renders in, which a switch re-renders. */
+declare const Localized: FC<LocalizedProps>;
+export default Localized;
+/**
+ * A message as a template, for code outside a component that hands one on, a
+ * toast's text say: it is read where it renders, so it follows a switch too.
+ *
+ * @example
+ * openToastAction({ message: <Toast title={localized('common.toast.copied')} /> });
+ */
+export declare function localized<K extends MessageKey>(key: K, ...args: MessageArgs<K>): DOMTemplateLiterals;
+//# sourceMappingURL=Localized.d.ts.map

package/dist/components/map-columns/MapColumnsBody.d.ts

@@ -0,0 +1,24 @@
+import { FC } from '@dineug/r-html';
+import { ColumnPick, MapColumnsView } from '../../utils/map-columns';
+export type MapColumnsBodyProps = {
+    mode: 'create' | 'edit';
+    view: MapColumnsView;
+    /** Whether the editor is too narrow for the two columns side by side. */
+    stacked: boolean;
+    isDarkMode: boolean;
+    onKeyChange: (keyId: string) => void;
+    onPick: (parentColumnId: string, pick: ColumnPick | null) => void;
+    onCancel: () => void;
+    onConfirm: () => void;
+};
+/** A pick as an option's value, which a column id never collides with. */
+export declare function toOptionValue(pick: ColumnPick | null): string;
+export declare function toPick(value: string): ColumnPick | null;
+/**
+ * The body of Map Columns: the parent's key, a row per key column with a list
+ * of the child's columns, one line saying what stands in the way, and Cancel
+ * beside the button that writes the mapping.
+ */
+declare const MapColumnsBody: FC<MapColumnsBodyProps>;
+export default MapColumnsBody;
+//# sourceMappingURL=MapColumnsBody.d.ts.map

package/dist/components/map-columns/MapColumnsDialog.d.ts

@@ -0,0 +1,13 @@
+import { FC } from '@dineug/r-html';
+export type MapColumnsDialogProps = {
+    readonly: boolean;
+    isDarkMode: boolean;
+};
+/**
+ * Maps a parent's key onto the child's columns, for a relationship drawn or
+ * held. Built from the document on every render, it shows a peer's change at
+ * once and closes on its own once what it maps between is gone.
+ */
+declare const MapColumnsDialog: FC<MapColumnsDialogProps>;
+export default MapColumnsDialog;
+//# sourceMappingURL=MapColumnsDialog.d.ts.map

package/dist/components/map-columns/MapColumnsDialog.styles.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The dialog's one column, its native lists drawn in the editor's appearance
+ * through color-scheme, which they inherit, and ringed 2px off as its buttons
+ * are, the doubled class outweighing the list box's own ring.
+ */
+export declare const body: import('@dineug/r-html').CSSTemplateLiterals;
+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 Export image and Table
+ * Properties close. Tab brings its whole focus ring into a box scrolled down.
+ */
+export declare const close: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const subtitle: import('@dineug/r-html').CSSTemplateLiterals;
+/** A list as wide as its cell, narrowing with the box. */
+export declare const select: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const references: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * The parent column, an arrow to its list and the note under the list; side by
+ * side unless stacked, where the parent takes a line over the arrow and list.
+ */
+export declare const grid: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const heading: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const headingIcon: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const tableName: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const role: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const arrow: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const parent: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const dim: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const dataType: import('@dineug/r-html').CSSTemplateLiterals;
+/**
+ * A line under the list it is about, whose child column the mapping changes
+ * or leaves of another type, marked so it reads as more than a hint.
+ */
+export declare const note: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const message: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const actions: import('@dineug/r-html').CSSTemplateLiterals;
+//# sourceMappingURL=MapColumnsDialog.styles.d.ts.map

package/dist/components/map-columns/mapColumnsAction.d.ts

@@ -0,0 +1,13 @@
+import { GeneratorAction } from '../../engine/generator.actions';
+import { MapColumnsDraft } from '../../utils/map-columns';
+export type MapColumnsActionOptions = {
+    /** Called once, during the dispatch, when the diagram no longer takes the mapping. */
+    onRefuse: () => void;
+};
+/**
+ * Writes the mapping the dialog confirmed in one batch, judged by the state it
+ * lands on: a result the diagram already holds writes nothing and says nothing,
+ * while a table or relationship gone, or any issue, refuses it.
+ */
+export declare const mapColumnsAction$: (draft: MapColumnsDraft, { onRefuse }: MapColumnsActionOptions) => GeneratorAction;
+//# sourceMappingURL=mapColumnsAction.d.ts.map

package/dist/components/map-columns/nameOf.d.ts

@@ -0,0 +1,6 @@
+import { I18n } from '../../i18n/translate';
+/** A table's or column's name as Map Columns and the draw-target buttons write it, unnamed where it has none. */
+export declare const nameOf: (entity: {
+    name: string;
+} | undefined, { t }: Pick<I18n, "t">) => string;
+//# sourceMappingURL=nameOf.d.ts.map

package/dist/components/map-columns/openMapColumns.d.ts

@@ -0,0 +1,9 @@
+import { AppContext } from '../appContext';
+import { MapColumnsOpening } from '../../utils/emitter';
+/**
+ * Opens Map Columns on what the opening names: the dialog takes its session
+ * from the emitter, then the open map shows it, so it never shows the session
+ * of an earlier opening.
+ */
+export declare function openMapColumns({ store, emitter }: Pick<AppContext, 'store' | 'emitter'>, opening: MapColumnsOpening): void;
+//# sourceMappingURL=openMapColumns.d.ts.map

package/dist/components/primitives/code-block/CodeBlock.d.ts

@@ -1,10 +1,15 @@
-import { FC } from '@dineug/r-html';
+import { DOMTemplateLiterals, FC } from '@dineug/r-html';
 import { Lang } from '../../../constants/language';
 export type CodeBlockProps = {
     value: string;
     lang: Lang;
     theme?: 'dark' | 'light';
     onCopy?: (value: string) => void;
+    /**
+     * Buttons after the copy button in the top corner, shown with or without a
+     * hover; --code-block-background there holds the colour the code sits on.
+     */
+    tools?: DOMTemplateLiterals | null;
 };
 declare const CodeBlock: FC<CodeBlockProps>;
 export default CodeBlock;

package/dist/components/primitives/code-block/CodeBlock.styles.d.ts

@@ -1,3 +1,5 @@
+/** The top corner the copy button and any tools stand in, over the code. */
+export declare const tools: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const clipboard: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
 /** Out of flow, the root loses its content height and collapses to min-height. */

package/dist/components/primitives/color-picker/ColorPicker.d.ts

@@ -1,12 +1,21 @@
 import { FC } from '@dineug/r-html';
 import { Viewport } from '../../../engine/modules/editor/state';
+import { KeyBindingMap } from '../../../utils/keyboard-shortcut';
 export type ColorPickerProps = {
     x: number;
     y: number;
+    /** The color it opens on, in any form a document holds; an empty or unreadable one shows no value. */
     color: string;
     viewport?: Viewport | null;
+    /** The editor's live bindings, which decide what a press inside keeps from the editor. */
+    keyBindingMap: KeyBindingMap;
+    /** Opaque #rrggbb colors the document already uses, most used first. */
+    documentColors?: ReadonlyArray<string>;
     onChange?: (color: string) => void;
-    onLastUpdate?: (color: string) => void;
+    /** Shows a No color row at the foot of the panel, which calls this when pressed. */
+    onClear?: () => void;
+    /** Called on Escape; the parent closes the picker. */
+    onClose?: () => void;
 };
 declare const ColorPicker: FC<ColorPickerProps>;
 export default ColorPicker;

package/dist/components/primitives/color-picker/ColorPicker.styles.d.ts

@@ -1,2 +1,27 @@
 export declare const container: import('@dineug/r-html').CSSTemplateLiterals;
+/** Stacks over the floating toolbar, z-index 1, as the context menu does. */
+export declare const panel: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const body: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const area: import('@dineug/r-html').CSSTemplateLiterals;
+/** White ringed in black reads on any color under it, so it ignores the theme. */
+export declare const areaThumb: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const controls: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const iconButton: import('@dineug/r-html').CSSTemplateLiterals;
+/** The bar is 10px tall; its ::before takes a press anywhere in the 24px row. */
+export declare const hue: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const hueThumb: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const preview: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const fields: import('@dineug/r-html').CSSTemplateLiterals;
+/** One of R, G and B; Hex takes hexField, never both, as two sheets would race. */
+export declare const field: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const hexField: import('@dineug/r-html').CSSTemplateLiterals;
+/** A real border, which forced colors keeps where it drops a box shadow. */
+export declare const input: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const fieldLabel: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const swatchArea: import('@dineug/r-html').CSSTemplateLiterals;
+/** Eight 16px columns and seven 10px gaps fill the 198px inside the panel exactly. */
+export declare const swatches: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const caption: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const swatch: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const clear: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=ColorPicker.styles.d.ts.map