@dineug/erd-editor 3.6.0 → 3.7.0

package/README.md

@@ -34,10 +34,11 @@ npm install @dineug/erd-editor
 
 The package ships ES modules with its dependencies left as bare imports, so any bundler
 (Vite, webpack, Rspack, esbuild, …) resolves, dedupes and tree-shakes them like the rest of
-your app. Two features run in shared workers — schema garbage collection and the PNG export —
-constructed as `new SharedWorker(new URL('./workers/…', import.meta.url))`, which those bundlers
-emit as worker files beside your chunks; a strict CSP needs `worker-src 'self'`. Without a
-bundler, use the UMD file described under [Script tag](#script-tag) instead.
+your app. Four features run in shared workers — schema garbage collection, the PNG export, the
+automatic table placement and the syntax highlighting — constructed as
+`new SharedWorker(new URL('./workers/…', import.meta.url))`, which those bundlers emit as worker
+files beside your chunks; a strict CSP needs `worker-src 'self'`. Without a bundler, use the UMD
+file described under [Script tag](#script-tag) instead.
 
 ## Usage
 
@@ -79,7 +80,7 @@ that step; a production build needs nothing.
 // vite.config.js
 export default {
   optimizeDeps: {
-    exclude: ['@dineug/erd-editor', '@dineug/erd-editor-shiki-worker'],
+    exclude: ['@dineug/erd-editor'],
   },
 };
 ```
@@ -87,16 +88,12 @@ export default {
 ### Script tag
 
 `dist/erd-editor.umd.js` is a self-contained build for a plain `<script>` tag: every
-dependency and both workers are inside it, and it registers `<erd-editor>` and exposes the
-three callbacks as `window.ErdEditor`. It is what `unpkg` and `jsdelivr` serve.
+dependency and all four workers are inside it, and it registers `<erd-editor>` and exposes the
+two file callbacks as `window.ErdEditor`. It is what `unpkg` and `jsdelivr` serve.
 
 ```html
 <erd-editor style="display: block; width: 100%; height: 100vh"></erd-editor>
 <script src="https://cdn.jsdelivr.net/npm/@dineug/erd-editor/dist/erd-editor.umd.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@dineug/erd-editor-shiki-worker/dist/erd-editor-shiki-worker.umd.js"></script>
-<script>
-  ErdEditor.setGetShikiServiceCallback(ErdEditorShikiWorker.getShikiService);
-</script>
 ```
 
 The workers travel inside the file as `data:` URLs, so a strict CSP needs `worker-src data:`
@@ -165,22 +162,22 @@ erd-editor {
 
 ## Syntax highlighting
 
-The SQL and code-generation panels render as plain text unless a highlighter is supplied.
-[`@dineug/erd-editor-shiki-worker`](https://www.npmjs.com/package/@dineug/erd-editor-shiki-worker)
-runs one in a shared worker. It is a separate install:
+The SQL and code-generation panels are highlighted by [Shiki](https://shiki.style), in a shared
+worker of its own. There is nothing to install or register: the worker is built the first time a
+code panel renders, so a page that opens none never fetches the grammars.
 
-```sh
-npm install @dineug/erd-editor-shiki-worker
-```
+| | |
+| --- | --- |
+| Languages | SQL, TypeScript, GraphQL, C#, Java, Kotlin, Scala, Go, Python |
+| Themes | `github-dark`, `github-light`, picked from the editor's light / dark appearance |
 
-```js
-import { setGetShikiServiceCallback } from '@dineug/erd-editor';
+Those are exactly the languages the panels emit — the JPA generator emits Java, the SQLAlchemy
+generator emits Python, the TypeORM, Sequelize and Drizzle generators emit TypeScript, and the
+DBML and AML generators are highlighted as SQL, the closest grammar shiki ships.
 
-// deferred, so the highlighter never lands in your main chunk
-import('@dineug/erd-editor-shiki-worker').then(({ getShikiService }) => {
-  setGetShikiServiceCallback(getShikiService);
-});
-```
+Where `SharedWorker` is missing — Chrome on Android, Safari before 16.4 — the underlying error is
+logged and the panels render as plain text; nothing else is affected. The regex engine is plain
+JavaScript, so no host CSP needs `wasm-unsafe-eval`.
 
 ## File dialogs
 

package/dist/components/erd/automatic-table-placement/AutomaticTablePlacement.d.ts

@@ -24,6 +24,11 @@ export declare const PREVIEW_ZOOM_MAX = 0.7;
  * between the floor every zoom has and the ceiling above.
  */
 export declare function previewZoomLevel(content: Rect, viewport: Viewport): number;
+/** How far the simulation has cooled, from 0 to 1. */
+export type PlacementToastState = {
+    progress: number;
+};
+export declare function placementDescription({ progress, }: PlacementToastState): string;
 declare const AutomaticTablePlacement: FC<AutomaticTablePlacementProps>;
 export default AutomaticTablePlacement;
 //# sourceMappingURL=AutomaticTablePlacement.d.ts.map

package/dist/components/erd/automatic-table-placement/runElkPlacement.d.ts

@@ -0,0 +1,12 @@
+import { AppContext } from '../../appContext';
+import { ElkLayoutPoint, ElkPlacement } from '../../../services/elk-layout';
+/**
+ * Places every table by ELK and hands the layout straight over. No preview
+ * overlay: one layout arrives at once, there is nothing to weigh before it
+ * lands, and a single undo puts every table back.
+ *
+ * @example
+ * runElkPlacement(app.value, placement, handleChangeAutomaticTablePlacement);
+ */
+export declare function runElkPlacement(app: AppContext, placement: ElkPlacement, onChange: (tables: ElkLayoutPoint[]) => void): Promise<void>;
+//# sourceMappingURL=runElkPlacement.d.ts.map

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

@@ -0,0 +1,24 @@
+import { AppContext } from '../../../appContext';
+import { IconName } from '../../../primitives/icon/icons';
+import { TablePlacement } from '../../../../constants/tablePlacement';
+type Menu = {
+    name: string;
+    iconName: IconName;
+    placement: TablePlacement;
+};
+export declare const menus: Menu[];
+/**
+ * The placements the author can ask for. Each one emits the same action, and
+ * the editor reads the placement to decide between the preview it watches
+ * settle and the layout ELK answers in one go.
+ *
+ * @example
+ * createTablePlacementMenus(app.value, props.onClose).map(menu => ...);
+ */
+export declare function createTablePlacementMenus({ emitter }: AppContext, onClose: () => void): {
+    name: string;
+    iconName: IconName;
+    onClick: () => void;
+}[];
+export {};
+//# sourceMappingURL=tablePlacementMenus.d.ts.map

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

@@ -1,8 +1,8 @@
 import { FC } from '@dineug/r-html';
-import { ShikiService } from '../../../services/shikiService';
+import { Lang } from '../../../constants/language';
 export type CodeBlockProps = {
     value: string;
-    lang: Parameters<ShikiService['codeToHtml']>[1]['lang'];
+    lang: Lang;
     theme?: 'dark' | 'light';
     onCopy?: (value: string) => void;
 };

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

@@ -4,6 +4,8 @@ export declare const ICON_VIEW_BOX = "0 0 24 24";
 export declare const ICON_STROKE_WIDTH = 2;
 export type IconNodeChild = IconNode[number];
 declare const LUCIDE_ICON: {
+    'align-horizontal-distribute-center': IconNode;
+    'align-vertical-distribute-center': IconNode;
     'arrow-right': IconNode;
     atom: IconNode;
     braces: IconNode;
@@ -43,6 +45,8 @@ declare const LUCIDE_ICON: {
     table: IconNode;
     'table-properties': IconNode;
     'undo-2': IconNode;
+    'wand-sparkles': IconNode;
+    waypoints: IconNode;
     workflow: IconNode;
     x: IconNode;
 };

package/dist/constants/tablePlacement.d.ts

@@ -0,0 +1,15 @@
+import { ValuesType } from '../internal-types';
+/**
+ * How the editor lays a document out when the author asks it to. Force is the
+ * simulation the editor has always run, and the three below it are ELK
+ * algorithms answered off the main thread.
+ */
+export declare const TablePlacement: {
+    readonly force: "force";
+    readonly layeredHorizontal: "layeredHorizontal";
+    readonly layeredVertical: "layeredVertical";
+    readonly flow: "flow";
+};
+export type TablePlacement = ValuesType<typeof TablePlacement>;
+export declare const DEFAULT_TABLE_PLACEMENT: TablePlacement;
+//# sourceMappingURL=tablePlacement.d.ts.map