@dineug/erd-editor 3.3.1 → 3.5.0

package/dist/components/erd/canvas/sceneTokens.d.ts

@@ -0,0 +1,67 @@
+import { KonvaEventObject } from 'konva/lib/Node';
+/** A pointer event as konva hands it to a listener bound on a scene node. */
+export type SceneMouseEvent = KonvaEventObject<MouseEvent>;
+export type SceneTouchEvent = KonvaEventObject<TouchEvent>;
+export type ScenePointerEvent = SceneMouseEvent | SceneTouchEvent;
+/**
+ * The face utils/text.ts measures a string with. Drawing in anything else would
+ * make a cell wider or narrower than the width the layout reserved for it.
+ */
+export declare const SCENE_FONT_FAMILY: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Open Sans', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+/** The px behind font-size-1, which is what typography.paragraph resolves to. */
+export declare const SCENE_FONT_SIZE = 12;
+/** The css font shorthand konva builds for a cell's text, and measures it with. */
+export declare const SCENE_FONT: string;
+/** The pair a canvas centres a drawn line by, which no line box is involved in. */
+export type SceneFontMetrics = {
+    ascent: number;
+    descent: number;
+};
+/**
+ * The ascent and descent konva centres a drawn line by, read with the measure
+ * call konva makes itself. A canvas has no line box to lean on, so this pair is
+ * the whole of where a baseline lands, and the editor has to read the same one.
+ *
+ * @example
+ * const { ascent, descent } = getSceneFontMetrics();
+ */
+export declare function getSceneFontMetrics(): SceneFontMetrics;
+/**
+ * The px behind font-size-5 through font-size-9, in the order HighLevelTable
+ * steps through them as the zoom falls. The scale itself is a CSS custom
+ * property, and a canvas has no way to read one.
+ */
+export declare const HIGH_LEVEL_FONT_SIZES: readonly [20, 24, 28, 35, 60];
+/** Border plus padding on one side, which is where a table's own content starts. */
+export declare const TABLE_INSET: number;
+/** The radius Table.styles rounds a table box with. */
+export declare const TABLE_CORNER_RADIUS = 6;
+/** The min-height Table.styles gives the colour bar across a table header. */
+export declare const HEADER_COLOR_HEIGHT = 4;
+/** The 1.5px underline EditInput draws for a focused, edited or shared cell. */
+export declare const FOCUS_BORDER_HEIGHT = 1.5;
+/** What the ring outside a table box costs, as outline and box-shadow both do. */
+export declare const RING_WIDTH = 1;
+/** The side of the square viewBox every icon is authored in. */
+export declare const ICON_VIEW_SIZE: number;
+/** What a colour is when the scene paints nothing, as a CSS keyword konva takes. */
+export declare const TRANSPARENT = "transparent";
+/**
+ * A fill that paints nothing and still answers a hit test, which is how a cell
+ * keeps the whole padded box clickable the way its div did.
+ */
+export declare const HIT_FILL = "transparent";
+/** The hand a clickable scene node asks for, as the dom scene spelt it in css. */
+export declare const CURSOR_POINTER = "pointer";
+/** The beam a textarea carried on its own, which a drawn body has to ask for. */
+export declare const CURSOR_TEXT = "text";
+/** What a node hands back on the way out, leaving the container its own cursor. */
+export declare const CURSOR_INHERIT = "";
+/**
+ * Points the stage container at a cursor. A konva node carries none of its own,
+ * so the container is where the css the dom scene put on an element now lives.
+ *
+ * @example
+ * on:mouseenter={(event) => setSceneCursor(event, CURSOR_POINTER)}
+ */
+export declare function setSceneCursor(event: ScenePointerEvent, cursor: string): void;

package/dist/components/erd/canvas/shared-drag-select/SharedDragSelect.d.ts

@@ -0,0 +1,8 @@
+import { FC } from '@dineug/r-html';
+export type SharedDragSelectProps = {};
+/**
+ * A peer's marquee, in the schema coordinates their editor shared. Fainter than
+ * the local one because several may be open at once over the same tables.
+ */
+declare const SharedDragSelect: FC<SharedDragSelectProps>;
+export default SharedDragSelect;

package/dist/components/erd/canvas/shared-mouse-tracker/SharedMouseTracker.d.ts

@@ -1,4 +1,5 @@
 import { FC } from '@dineug/r-html';
 export type SharedMouseTrackerProps = {};
+/** One cursor per peer sharing a pointer, on the presence layer. */
 declare const SharedMouseTracker: FC<SharedMouseTrackerProps>;
 export default SharedMouseTracker;

package/dist/components/erd/canvas/shared-mouse-tracker/shared-mouse-cursor/SharedMouseCursor.d.ts

@@ -3,5 +3,10 @@ import { SharedMouseTracker } from '../../../../../engine/modules/editor/state';
 export type SharedMouseCursorProps = {
     tracker: SharedMouseTracker;
 };
+/**
+ * One peer's pointer and nickname, eased toward the position they last shared.
+ * The colour identifies the editor rather than the theme, so it comes from the
+ * shared palette instead of a resolved token.
+ */
 declare const SharedMouseCursor: FC<SharedMouseCursorProps>;
 export default SharedMouseCursor;

package/dist/components/erd/canvas/table/Table.d.ts

@@ -2,6 +2,14 @@ import { FC } from '@dineug/r-html';
 import { Table } from '../../../../internal-types';
 export type TableProps = {
     table: Table;
+    /** A drawn copy rather than the table itself, so nothing in it takes an id. */
+    preview?: boolean;
+    hovered?: boolean;
+    hoveredColumnId?: string | null;
+    ghostColumnId?: string | null;
+    editorFocused?: boolean;
+    /** Off while the table is kept built but scrolled out of the culling rect. */
+    visible?: boolean;
 };
 declare const Table: FC<TableProps>;
 export default Table;

package/dist/components/erd/canvas/table/cellLayout.d.ts

@@ -0,0 +1,63 @@
+import { FocusType } from '../../../../engine/modules/editor/state';
+import { RootState } from '../../../../engine/state';
+import { Table } from '../../../../internal-types';
+import { Theme } from '../../../../themes/tokens';
+import { ColumnWidth } from '../../../../utils/calcTable';
+/** The four widths a column row measures from its table; the rest are fixed. */
+export type ColumnCellWidths = Pick<ColumnWidth, 'comment' | 'dataType' | 'default' | 'name'>;
+/** One editable box on a table, positioned inside the table's own group. */
+export type CellSlot = {
+    focusType: FocusType;
+    x: number;
+    width: number;
+};
+export type ColumnCellSlot = CellSlot & {
+    columnType: number;
+};
+/** Where the header cell row starts inside a table group. */
+export declare const HEADER_CELLS_X: number;
+export declare const HEADER_CELLS_Y: number;
+/** The text line inside a header cell and inside a column cell. */
+export declare const HEADER_TEXT_Y = 2;
+export declare const COLUMN_TEXT_Y = 2;
+/** Where the scene runs its focus rect inside a cell, header and column both. */
+export declare const CELL_UNDERLINE_Y: number;
+/**
+ * The paint that focus rect takes, header and column both: the input colour
+ * while the cell is being edited, and greyed out with the rest of the focus
+ * while the editor is not the one holding the keyboard.
+ */
+export declare function focusBorderFill(theme: Theme, edit: boolean, editorFocused: boolean | undefined): string;
+/**
+ * The baseline one line of cell text is drawn on, down from the top of the
+ * cell. Blink puts a painted baseline on the device grid before the zoom scales
+ * it, so only a whole pixel survives both rasterisers unchanged.
+ *
+ * @example
+ * const baseline = getCellTextBaseline();
+ */
+export declare function getCellTextBaseline(): number;
+/**
+ * The box one line of cell text is centred in. The scene hands konva this
+ * height with verticalAlign middle and the editor gives its input the same one,
+ * which is what puts the two baselines on one whole pixel instead of two.
+ *
+ * @example
+ * const height = getCellTextHeight();
+ */
+export declare function getCellTextHeight(): number;
+/** Where a column row's cells start, past the key badge. */
+export declare const COLUMN_CELLS_X: number;
+/** The comment width a table draws at, clamped by the setting when it is set. */
+export declare function getWidthComment(state: RootState, table: Table): number;
+/**
+ * The name and comment boxes across a table header. One list feeds both the
+ * scene that draws them and the overlay that edits them, so an editor can never
+ * sit anywhere but on the text it replaces.
+ */
+export declare function getHeaderCellSlots(state: RootState, table: Table): CellSlot[];
+/**
+ * The cells of one column row, in the order the settings put them and at the x
+ * each lands on once the ones before it have taken their width.
+ */
+export declare function getColumnCellSlots(state: RootState, widths: ColumnCellWidths): ColumnCellSlot[];

package/dist/components/erd/canvas/table/column/Column.d.ts

@@ -1,9 +1,10 @@
-import { FC, Ref } from '@dineug/r-html';
-import { AppContext } from '../../../../appContext';
+import { FC } from '@dineug/r-html';
+import { SceneMouseEvent } from '../../sceneTokens';
 import { Column } from '../../../../../internal-types';
 export type ColumnProps = {
-    app: Ref<AppContext>;
     column: Column;
+    y: number;
+    width: number;
     selected: boolean;
     widthName: number;
     widthDataType: number;
@@ -16,14 +17,30 @@ export type ColumnProps = {
     focusComment: boolean;
     focusUnique: boolean;
     focusAutoIncrement: boolean;
+    sharedFocusName: string | null;
+    sharedFocusDataType: string | null;
+    sharedFocusNotNull: string | null;
+    sharedFocusDefault: string | null;
+    sharedFocusComment: string | null;
+    sharedFocusUnique: string | null;
+    sharedFocusAutoIncrement: string | null;
     editName: boolean;
     editDataType: boolean;
     editDefault: boolean;
     editComment: boolean;
-    draggable?: boolean;
+    hovered?: boolean;
+    /** The placeholder row for a column dragged in from another table. */
     ghost?: boolean;
-    onDragstart?: (event: DragEvent) => void;
-    onDragend?: (event: DragEvent) => void;
+    /** Drawn inside a copy of the table, which owns none of its ids. */
+    preview?: boolean;
+    editorFocused?: boolean;
+    /**
+     * The one pair of callbacks the scene keeps. A drop lands between siblings,
+     * so the table that owns the order is the only thing that can judge one, and
+     * the row can only say that a drag of it started and that it ended.
+     */
+    onDragstart?: (columnId: string, event: SceneMouseEvent) => void;
+    onDragend?: () => void;
 };
 declare const Column: FC<ColumnProps>;
 export default Column;

package/dist/components/erd/canvas/table/doubleClick.d.ts

@@ -0,0 +1,14 @@
+import { SceneMouseEvent } from '../sceneTokens';
+import { FocusType } from '../../../../engine/modules/editor/state';
+export type DoubleClickGuard = {
+    /** Records the cell a click opened a pair on. */
+    track(cell: FocusType, event: SceneMouseEvent): void;
+    /** Whether a konva dblclick closes a pair that began on this same cell. */
+    isDouble(cell: FocusType, event: SceneMouseEvent): boolean;
+};
+/**
+ * Tells a real double click from the one konva invents. Konva fires dblclick on
+ * whatever the second click of any pair inside its window lands on, wherever
+ * the first one was, so the cell that opened the pair is remembered here.
+ */
+export declare function createDoubleClickGuard(): DoubleClickGuard;

package/dist/components/erd/canvas/table/useMoveTable.d.ts

@@ -2,5 +2,5 @@ import { Ctx, Table } from '../../../../internal-types';
 export declare function useMoveTable(ctx: Ctx, props: {
     table: Table;
 }): {
-    onMoveStart: (event: MouseEvent | TouchEvent) => void;
+    onMoveStart: (event: import('../sceneTokens').ScenePointerEvent) => void;
 };

package/dist/components/erd/canvas/table/useSharedFocusTable.d.ts

@@ -0,0 +1,6 @@
+import { FocusType } from '../../../../engine/modules/editor/state';
+import { Ctx } from '../../../../internal-types';
+export declare function useSharedFocusTable(ctx: Ctx, tableId: string): {
+    sharedFocusTableColor: () => string | null;
+    sharedFocusColor: (focusType: FocusType, columnId?: string) => string | null;
+};

package/dist/components/erd/canvas/useMoveEntity.d.ts

@@ -0,0 +1,18 @@
+import { ScenePointerEvent } from './sceneTokens';
+import { SelectType } from '../../../engine/modules/editor/state';
+import { Ctx } from '../../../internal-types';
+export type MoveEntityOptions = {
+    /** Read late, because repeat hands a component a new entity in place. */
+    entityId: () => string;
+    selectType: SelectType;
+    /** The scene kinds a drag never starts from, as closest read their classes. */
+    blockedKinds: readonly string[];
+};
+/**
+ * The pointer start every draggable entity shares: select it, hand an Alt drag
+ * to the duplicate ghost, and otherwise move the whole selection with the
+ * pointer. Only the entity kind and the blocked areas differ between them.
+ */
+export declare function useMoveEntity(ctx: Ctx, options: MoveEntityOptions): {
+    onMoveStart: (event: ScenePointerEvent) => void;
+};

package/dist/components/erd/canvas/useSharedSelectEntity.d.ts

@@ -0,0 +1,4 @@
+import { Ctx } from '../../../internal-types';
+export declare function useSharedSelectEntity(ctx: Ctx, entityId: string): {
+    sharedSelectColor: () => string | null;
+};

package/dist/components/erd/erd-context-menu/ErdContextMenu.d.ts

@@ -1,4 +1,4 @@
-import { FC, Ref } from '@dineug/r-html';
+import { FC } from '@dineug/r-html';
 import { ValuesType } from '../../../internal-types';
 export declare const ErdContextMenuType: {
     readonly ERD: "ERD";
@@ -8,7 +8,6 @@ export declare const ErdContextMenuType: {
 export type ErdContextMenuType = ValuesType<typeof ErdContextMenuType>;
 export type ErdContextMenuProps = {
     type: ErdContextMenuType;
-    canvas: Ref<HTMLDivElement>;
     relationshipId?: string;
     tableId?: string;
     onClose: () => void;

package/dist/components/erd/erd-context-menu/menus/drawRelationshipMenus.d.ts

@@ -1,14 +1,15 @@
 import { AppContext } from '../../../appContext';
+import { NotationIconName } from '../../../primitives/icon/icons';
 import { KeyBindingName } from '../../../../utils/keyboard-shortcut';
 type Menu = {
-    iconName: string;
+    iconName: NotationIconName;
     name: string;
     keyBindingName: KeyBindingName;
     relationshipType: number;
 };
 export declare const menus: Menu[];
 export declare function createDrawRelationshipMenus({ store, keyBindingMap }: AppContext, onClose: () => void): {
-    iconName: string;
+    iconName: "ZeroOneN" | "ZeroOne" | "ZeroN" | "OneOnly" | "OneN" | "One" | "N";
     name: string;
     shortcut: string;
     onClick: () => void;

package/dist/components/erd/erd-context-menu/menus/exportMenus.d.ts

@@ -1,9 +1,10 @@
 import { AppContext } from '../../../appContext';
-export declare function createExportMenus(app: AppContext, onClose: () => void, root: HTMLElement): {
-    icon: {
-        prefix: string;
-        name: string;
-    };
+import { IconName } from '../../../primitives/icon/icons';
+import { Theme } from '../../../../themes/tokens';
+type Menu = {
+    icon: IconName;
     name: string;
     onClick: () => void;
-}[];
+};
+export declare function createExportMenus(app: AppContext, onClose: () => void, theme: Theme): Menu[];
+export {};

package/dist/components/erd/erd-context-menu/menus/importMenus.d.ts

@@ -1,9 +1,9 @@
 import { AppContext } from '../../../appContext';
-export declare function createImportMenus(app: AppContext, onClose: () => void): {
-    icon: {
-        prefix: string;
-        name: string;
-    };
+import { IconName } from '../../../primitives/icon/icons';
+type Menu = {
+    icon: IconName;
     name: string;
     onClick: () => void;
-}[];
+};
+export declare function createImportMenus(app: AppContext, onClose: () => void): Menu[];
+export {};

package/dist/components/erd/erd-context-menu/menus/relationshipMenus.d.ts

@@ -1,7 +1,7 @@
 import { AppContext } from '../../../appContext';
 export declare function createRelationshipMenus({ store }: AppContext, relationshipId?: string): {
     checked: boolean;
-    iconName: string;
+    iconName: "ZeroOneN" | "ZeroOne" | "ZeroN" | "OneOnly" | "OneN" | "One" | "N";
     name: string;
     onClick: () => void;
 }[];

package/dist/components/erd/hide-sign/hideSignBounds.d.ts

@@ -0,0 +1,9 @@
+import { Viewport } from '../../../engine/modules/editor/state';
+import { ScrollTransform } from '../../../engine/modules/settings/atom.actions';
+import { Rect } from '../../../utils/dragSelect';
+/**
+ * The scene a reader can still get to: what the screen shows, taken over every
+ * scroll offset the current zoom allows. A magnifying zoom sees less at once
+ * but reaches the same document, so the bound has to follow the travel.
+ */
+export declare function getReachableRect(settings: ScrollTransform, viewport: Viewport): Rect;

package/dist/components/erd/hitTest.d.ts

@@ -0,0 +1,22 @@
+import { Stage } from 'konva/lib/Stage';
+/** The scene entities the erd routing tells apart from one another. */
+export type SceneEntityKind = 'table' | 'memo' | 'relationship';
+export type SceneHit = {
+    kind: SceneEntityKind;
+    id: string;
+};
+/**
+ * Records the entity konva hit for every press a stage dispatches, and returns
+ * the teardown. Konva resolves the node while the hit canvas still matches the
+ * scene, so the walk up to the entity runs there too.
+ *
+ * @example
+ * addUnsubscribe(trackSceneHits(stage));
+ */
+export declare function trackSceneHits(stage: Stage): () => void;
+/**
+ * The scene entity a pointer event landed on, or null for bare canvas and for a
+ * target outside the stage. Konva resolved it as it dispatched that same event,
+ * because the press has re-rendered the scene by the time this is asked.
+ */
+export declare function sceneHit(container: HTMLElement | null | undefined, event: MouseEvent | TouchEvent): SceneHit | null;

package/dist/components/erd/minimap/Minimap.styles.d.ts

@@ -1,3 +1,2 @@
 export declare const minimap: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const border: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const canvasSvg: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/erd/minimap/MinimapScene.d.ts

@@ -0,0 +1,16 @@
+import { FC } from '@dineug/r-html';
+import { Stage } from 'konva/lib/Stage';
+export type MinimapSceneProps = {};
+/**
+ * The whole document on one layer, with no culling: a thumbnail that dropped
+ * what is off screen would stop being a map of where the rest of it is. Boxes
+ * only, because a connector between two of them is noise at this size.
+ */
+declare const MinimapScene: FC<MinimapSceneProps>;
+/**
+ * Renders the minimap scene as the root of its Stage. Named in lower case on
+ * purpose: an all-upper-case export list makes r-html's refresh treat this as a
+ * component module and self-accept it, which kills hmr for the whole scene.
+ */
+export declare function renderMinimapScene(stage: Stage): void;
+export default MinimapScene;

package/dist/components/erd/minimap/memo/Memo.d.ts

@@ -3,5 +3,10 @@ import { Memo } from '../../../../internal-types';
 export type MemoProps = {
     memo: Memo;
 };
+/**
+ * A memo as the minimap draws it: the box and nothing in it. The id rides in
+ * the name, the way a relationship carries its own, because an id on a second
+ * stage would make an id scan over the live stages ambiguous.
+ */
 declare const Memo: FC<MemoProps>;
 export default Memo;

package/dist/components/erd/minimap/minimapGeometry.d.ts

@@ -0,0 +1,52 @@
+import { Point } from '../../../internal-types';
+import { SceneTransform } from '../../../konva/scene/viewport';
+/** The canvas box the minimap draws, plus the screen that is looking at it. */
+export type MinimapTransform = SceneTransform & {
+    viewportWidth: number;
+    viewportHeight: number;
+};
+export type MinimapRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * The whole canvas box scaled into the minimap square, with no zoom term. Fixed
+ * on purpose: the thumbnail stays a map of the document at one size, and the
+ * zoom shows up in the rectangle drawn over it instead.
+ */
+export declare function getMinimapRatio(width: number): number;
+/**
+ * The canvas the screen actually covers, read back through the very origin
+ * getSceneOrigin places the scene layer at. One screen pixel buys one over the
+ * zoom in canvas units, so zooming out widens this with the scroll standing still.
+ */
+export declare function getVisibleCanvasRect(transform: MinimapTransform): MinimapRect;
+/** That same rectangle in the minimap's own pixels, which is where it is drawn. */
+export declare function getMinimapViewportRect(transform: MinimapTransform): MinimapRect;
+/** The thumbnail's own box: the canvas box at the minimap ratio, 150 wide. */
+export declare function getMinimapBoxSize(width: number, height: number): {
+    width: number;
+    height: number;
+};
+/**
+ * The rectangle as drawn, trimmed to the thumbnail box. Zooming out far enough
+ * makes the screen reach past the canvas on every side, and this box is a
+ * pointer target, so what leaves the map is dropped instead of laid over it.
+ */
+export declare function getMinimapHandleRect(transform: MinimapTransform): MinimapRect;
+/**
+ * A canvas distance as the scroll that travels it. Scroll is measured in screen
+ * pixels and moves the view the opposite way, so it carries both the zoom and
+ * the sign that a minimap coordinate does not.
+ */
+export declare function toScrollDistance(distance: number, zoomLevel: number): number;
+/** Minimap travel as the scroll that keeps the rectangle under the pointer. */
+export declare function toScrollMovement(movement: number, ratio: number, zoomLevel: number): number;
+/**
+ * The scroll that puts a canvas point in the middle of the screen. Stated as a
+ * step away from where the scroll stands now, so the origin is read once through
+ * getVisibleCanvasRect rather than restated inverted here.
+ */
+export declare function getScrollToCenter(transform: MinimapTransform, center: Point): Point;

package/dist/components/erd/minimap/table/Table.d.ts

@@ -3,5 +3,10 @@ import { Table } from '../../../../internal-types';
 export type TableProps = {
     table: Table;
 };
+/**
+ * A table as the minimap draws it: the box and nothing in it. The id stays off
+ * the node because two stages spelling one id make an id scan ambiguous, so a
+ * minimap node is found by its name and the table it carries.
+ */
 declare const Table: FC<TableProps>;
 export default Table;

package/dist/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.d.ts

@@ -2,7 +2,7 @@ import { FC } from '@dineug/r-html';
 import { Index } from '../../../../../internal-types';
 export type IndexesCheckboxColumnProps = {
     tableId: string;
-    index: Index;
+    index: Index | null;
 };
 declare const IndexesCheckboxColumn: FC<IndexesCheckboxColumnProps>;
 export default IndexesCheckboxColumn;

package/dist/components/erd/virtual-scroll/useVirtualScroll.d.ts

@@ -1,4 +1,21 @@
+import { ScrollRange } from '../../../engine/modules/settings/atom.actions';
 import { Ctx } from '../../../internal-types';
+/** One scrollbar as drawn: a track a viewport wide over the content behind it. */
+export type ScrollbarTrack = {
+    range: ScrollRange;
+    ratio: number;
+    thumb: number;
+    offset: number;
+    scrollable: boolean;
+};
+/**
+ * The bar for one axis, sized from the travel the engine allows rather than from
+ * the canvas box. The content behind the track is a viewport plus that travel,
+ * which is the only place the zoom enters, and at zoom 1 the two read the same.
+ */
+export declare function getScrollbarTrack(range: ScrollRange, scroll: number, viewportLength: number): ScrollbarTrack;
+/** The scroll that centres the viewport on a point pressed on a track. */
+export declare function trackPointToScroll({ range, ratio }: ScrollbarTrack, point: number, viewportLength: number): number;
 export declare function useVirtualScroll(ctx: Ctx): {
     state: {
         selected: null | "horizontal" | "vertical";
@@ -7,4 +24,6 @@ export declare function useVirtualScroll(ctx: Ctx): {
     onScrollTopStart: (event: MouseEvent) => void;
     getWidthRatio: () => number;
     getHeightRatio: () => number;
+    getHorizontalTrack: () => ScrollbarTrack;
+    getVerticalTrack: () => ScrollbarTrack;
 };

package/dist/components/erd-editor/ErdEditor.d.ts

@@ -24,9 +24,13 @@ export interface ErdEditorElement extends ErdEditorProps, HTMLElement {
     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>>) => void;
     setSchemaSQL: (value: string) => void;
+    setSchemaGraphQL: (value: string) => void;
+    setSchemaDBML: (value: string) => void;
+    setSchemaAML: (value: string) => void;
     getSchemaSQL: (databaseVendor?: DatabaseVendor) => string;
     getSharedStore: (config?: SharedStoreConfig & {
         mouseTracker?: boolean;
+        focusTracker?: boolean;
     }) => SharedStore;
     setDiffValue: (value: string) => void;
 }

package/dist/components/erd-editor/ErdEditor.stories.d.ts

@@ -1,4 +1,4 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { ErdEditorProps } from './ErdEditor';
 declare const meta: {
     title: string;

package/dist/components/global-styles/GlobalStyles.d.ts

@@ -1,4 +1,9 @@
 import { FC } from '@dineug/r-html';
 export type GlobalStylesProps = {};
+/**
+ * Renders nothing, and stays anyway. What is left is the setGlobalStyleOrder
+ * call above, a module side effect, and being a component is what keeps its
+ * import load-bearing on its face rather than a naked side-effect import.
+ */
 declare const GlobalStyles: FC<GlobalStylesProps>;
 export default GlobalStyles;

package/dist/components/primitives/button/Button.stories.d.ts

@@ -1,19 +1,19 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { ButtonProps } from './Button';
 declare const meta: {
     title: string;
     render: (args: ButtonProps) => DocumentFragment;
     argTypes: {
         size: {
-            control: string;
+            control: "radio";
             options: string[];
         };
         variant: {
-            control: string;
+            control: "radio";
             options: string[];
         };
         text: {
-            control: string;
+            control: "text";
         };
         onClick: {
             action: string;

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

@@ -1,18 +1,18 @@
-import { StoryObj } from '@storybook/html';
+import { StoryObj } from '@storybook/html-vite';
 import { CodeBlockProps } from './CodeBlock';
 declare const meta: {
     title: string;
     render: (args: CodeBlockProps) => DocumentFragment;
     argTypes: {
         value: {
-            control: string;
+            control: "text";
         };
         lang: {
-            control: string;
+            control: "select";
             options: string[];
         };
         theme: {
-            control: string;
+            control: "radio";
             options: string[];
         };
         onCopy: {

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

@@ -1,3 +1,8 @@
 export declare const clipboard: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const code: import('@dineug/r-html').CSSTemplateLiterals;
+/** Out of flow, the root loses its content height and collapses to min-height. */
+export declare const scroller: import('@dineug/r-html').CSSTemplateLiterals;
+/** Sized by the preview, so the overlay stretched onto it has no scroll of its own to desync. */
+export declare const layers: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const preview: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const textarea: import('@dineug/r-html').CSSTemplateLiterals;

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

@@ -4,7 +4,7 @@ export type ColorPickerProps = {
     x: number;
     y: number;
     color: string;
-    viewport?: Viewport;
+    viewport?: Viewport | null;
     onChange?: (color: string) => void;
     onLastUpdate?: (color: string) => void;
 };