@dineug/erd-editor 3.10.0 → 4.1.0

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/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/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

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

@@ -0,0 +1,36 @@
+/** Hue in degrees 0 to 360, saturation and value 0 to 1, kept unrounded. */
+export type Hsv = {
+    h: number;
+    s: number;
+    v: number;
+};
+export type Rgb = [number, number, number];
+/** The channels of a color, rounded to whole 0 to 255 values; a hue of 360 is red again. */
+export declare function hsvToRgb({ h, s, v }: Hsv): Rgb;
+/**
+ * A color's hue, saturation and value, kept from the one before where the
+ * channels hold none: a gray keeps the hue it had, and black keeps both.
+ */
+export declare function rgbToHsv([r, g, b]: Rgb, previous: Hsv): Hsv;
+/** A color as the lower-case #rrggbb it is handed on as. */
+export declare function hsvToHex(hsv: Hsv): string;
+/** A #rrggbb as hue, saturation and value, keeping what it lacks from the one before. */
+export declare function hexToHsv(hex: string, previous: Hsv): Hsv;
+/**
+ * What the Hex field reads as a color: digits with or without the mark, 3, 4,
+ * 6 or 8 of them, or a pasted rgb() or hsl(), any alpha dropped; else null.
+ */
+export declare function parseHexInput(text: string): string | null;
+/** Whether the Hex field holds a whole color already, which it applies while typed. */
+export declare function isCompleteHexInput(text: string): boolean;
+/** A channel field's whole number, 255 at most; null for anything else. */
+export declare function parseChannelInput(text: string): number | null;
+/**
+ * Where a key moves the saturation and brightness area, from the whole
+ * percent nearest: left and right move saturation, the rest brightness, Home
+ * and End take saturation to either end; null for a key it does not take.
+ */
+export declare function stepArea(hsv: Hsv, key: string, coarse: boolean): Hsv | null;
+/** Where a key moves the hue, from the whole degree nearest, held to 0 to 360; null for a key it does not take. */
+export declare function stepHue(h: number, key: string, coarse: boolean): number | null;
+//# sourceMappingURL=colorModel.d.ts.map

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

@@ -0,0 +1,13 @@
+import { PlainMessageKey } from '../../../i18n/translate';
+export type ColorSwatch = {
+    color: string;
+    label: string;
+};
+/** A preset swatch, named by the key of its hue's name, which a screen reader hears in the reader's language. */
+export type PresetSwatch = {
+    color: string;
+    labelKey: PlainMessageKey;
+};
+/** Sixteen Radix step 9 colors, two rows of eight, in their light values, which a document keeps whatever the theme. */
+export declare const PRESET_COLORS: ReadonlyArray<PresetSwatch>;
+//# sourceMappingURL=presetColors.d.ts.map

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

@@ -0,0 +1,7 @@
+/**
+ * A CSS color as an opaque lower-case #rrggbb, any alpha dropped: the forms toOpaqueHex
+ * reads, then any a canvas fillStyle reads, a name such as red or an oklch(); null for
+ * an empty or unreadable one, or one in the canvas's own syntax that paints nothing.
+ */
+export declare function resolveColor(color: string): string | null;
+//# sourceMappingURL=resolveColor.d.ts.map

package/dist/components/primitives/context-menu/ContextMenu.d.ts

@@ -1,9 +1,11 @@
 import { default as ContextMenuItem } from './context-menu-item/ContextMenuItem';
 import { default as ContextMenuRoot } from './context-menu-root/ContextMenuRoot';
+import { default as ContextMenuSeparator } from './context-menu-separator/ContextMenuSeparator';
 import { default as Menu } from './menu/Menu';
 type CompositionContextMenu = {
     Root: typeof ContextMenuRoot;
     Item: typeof ContextMenuItem;
+    Separator: typeof ContextMenuSeparator;
     Menu: typeof Menu;
 };
 declare const ContextMenu: CompositionContextMenu;

package/dist/components/primitives/context-menu/context-menu-content/ContextMenuContent.d.ts

@@ -5,6 +5,7 @@ export type ContextMenuContentProps = {
     y: number;
     fit?: boolean;
     flipX?: number;
+    openLeft?: boolean;
     children?: DOMTemplateLiterals;
 };
 declare const ContextMenuContent: FC<ContextMenuContentProps>;

package/dist/components/primitives/context-menu/context-menu-content/fitMenu.d.ts

@@ -9,11 +9,11 @@ export type WindowSize = {
     height: number;
 };
 /**
- * How far a menu drawn at box moves into the window: back from the right and
- * bottom edges, never past the left and top. A submenu the right edge cuts
- * flips to end at flipRight instead, unless the left edge would cut it more.
+ * How far a menu drawn at box moves into the window, never past its left and
+ * top. A submenu opens right of its row, or left to end at flipRight for a
+ * right-to-left reader, and switches only when its side cuts it more.
  */
-export declare function fitMenu(box: MenuBox, view: WindowSize, flipRight?: number): {
+export declare function fitMenu(box: MenuBox, view: WindowSize, flipRight?: number, openLeft?: boolean): {
     dx: number;
     dy: number;
 };