@msdshsk/react-er-canvas 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 msdsh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,48 @@
+# NOTICE
+
+`@msdshsk/react-er-canvas` is distributed under the **MIT License** (see [LICENSE](./LICENSE)).
+
+It uses the following third-party libraries, each governed by its own license. Full license texts are distributed with each dependency's npm package.
+
+## Direct dependencies
+
+These libraries are installed alongside this package when consumers run `npm install @msdshsk/react-er-canvas`. They are referenced as `external` modules in the bundled output (`dist/`), so no portion of their source code is embedded in this project's distributed artifacts.
+
+| Library | Version | License | Copyright |
+|---|---|---|---|
+| [`chevrotain`](https://github.com/Chevrotain/chevrotain) | `^12.0.0` | [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0) | Copyright (c) Shahar Soel and contributors |
+| [`elkjs`](https://github.com/kieler/elkjs) | `^0.11.1` | [EPL-2.0](https://www.eclipse.org/legal/epl-2.0/) | Copyright (c) Eclipse Layout Kernel contributors |
+
+### chevrotain — Apache License 2.0
+
+Used as an unmodified runtime dependency for ER-syntax parsing. Apache-2.0 permits incorporation into MIT-licensed works provided that the original license and any NOTICE files are preserved with redistribution. The chevrotain npm package ships its full Apache-2.0 license text alongside its source, satisfying this requirement under standard npm distribution.
+
+### elkjs — Eclipse Public License 2.0
+
+Used as an unmodified runtime dependency for diagram layout computation. Under EPL-2.0:
+
+- This project does **not** modify, fork, or otherwise alter `elkjs` source code.
+- This project does **not** bundle `elkjs` into its compiled output. The Vite library configuration explicitly excludes `elkjs` (and any subpaths matching `/^elkjs(\/.*)?$/`) from the build via `rollupOptions.external`.
+- Consumers receive `elkjs` through the standard npm dependency mechanism, with the EPL-2.0 license text preserved in the upstream package.
+
+If you fork this project and modify `elkjs` or bundle its source into a redistributable artifact (e.g., a single-file CDN build or an Electron `asar` package), additional EPL-2.0 obligations apply — including making the modified `elkjs` source available under EPL-2.0.
+
+## Peer dependencies
+
+Consumers must provide these themselves; they are not installed by this package.
+
+| Library | Range | License |
+|---|---|---|
+| [`@xyflow/react`](https://github.com/xyflow/xyflow) | `>=12 <13` | MIT |
+| [`react`](https://github.com/facebook/react) | `^18.2.0 \|\| ^19.0.0` | MIT |
+| [`react-dom`](https://github.com/facebook/react) | `^18.2.0 \|\| ^19.0.0` | MIT |
+
+All peer dependencies are MIT-licensed and impose no additional attribution requirements on this project.
+
+## Compliance summary
+
+- All dependency licenses (MIT, Apache-2.0, EPL-2.0) are compatible with MIT redistribution under this project's standard usage pattern (unmodified, externalized, npm-distributed).
+- No third-party source code is embedded in `dist/`.
+- License texts and copyright notices for each dependency travel with their respective npm packages.
+
+If you redistribute this library in a form that bundles its dependencies — for example, a browser CDN build, a single-file bundle, or an Electron application packaged via `asar` — you should include the relevant license texts directly. For unmodified npm-installed usage, the npm distribution mechanism satisfies attribution requirements.

package/README.ja.md

@@ -0,0 +1,216 @@
+# @msdshsk/react-er-canvas
+
+[English README](./README.md)
+
+React / Electron 上で Mermaid 形式の ER 図を描画する Reactコンポーネントライブラリ。Mermaid 標準のレンダラには無い以下の視覚的拡張機能を備えています:
+
+- **カラム単位の FK 接続線** （`users.id` から `orders.user_id` へ、テーブル間ではなく該当カラム行同士を直接結ぶ）
+- **テーブルカードのドラッグ移動** （`positions` / `onPositionsChange` で位置の永続化が可能）
+- **ホバー時の FK 参照ハイライト**
+- **PK / FK / UK / 型 / コメント** をカラム単位で描画
+- **スキーマグループ** （`%% @group` ディレクティブ ─ 標準 Mermaid と互換性のあるコメント形式）
+- **手動 JOIN 作成** （カラム同士のドラッグ＆ドロップ。クエリビルダ UI 用途）
+- **カラム選択** （チェックボックス。クエリビルダ UI 用途）
+
+[`@xyflow/react`](https://reactflow.dev/) と [`elkjs`](https://github.com/kieler/elkjs)、自前実装の [`chevrotain`](https://chevrotain.io/) パーサで構成されています。
+
+## インストール
+
+```sh
+npm install @msdshsk/react-er-canvas @xyflow/react react react-dom
+```
+
+`@xyflow/react`、`react`、`react-dom` は **peer dependency** なので、利用側のアプリで明示的にインストールしてください。
+
+加えて、React Flow のスタイルシートを利用側アプリで **一度** import する必要があります:
+
+```ts
+import '@xyflow/react/dist/style.css';
+```
+
+## 使い方 ─ Mermaid ソースから
+
+```tsx
+import { MermaidER } from '@msdshsk/react-er-canvas';
+
+const source = `
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    CUSTOMER {
+        int id PK "Customer ID"
+        string name
+        string email UK
+    }
+    ORDER {
+        int id PK
+        int customer_id FK
+        decimal amount
+    }
+`;
+
+export function Schema() {
+  return <div style={{ height: '100vh' }}><MermaidER source={source} /></div>;
+}
+```
+
+## 使い方 ─ 構築済みモデルを直接渡す（パース処理を省略）
+
+利用側のアプリが既に構造化スキーマデータを持っている場合（例: `INFORMATION_SCHEMA` から取得した情報）、Mermaid 文字列を経由せずに `model` prop で直接渡せます:
+
+```tsx
+import { MermaidER, type ERModel } from '@msdshsk/react-er-canvas';
+
+const model: ERModel = {
+  tables: [
+    {
+      name: 'users',
+      columns: [
+        { name: 'id', type: 'bigint', keys: { pk: true } },
+        { name: 'email', type: 'varchar(255)', keys: { uk: true } },
+      ],
+    },
+    {
+      name: 'orders',
+      columns: [
+        { name: 'id', type: 'bigint', keys: { pk: true } },
+        { name: 'user_id', type: 'bigint', keys: { fk: true } },
+      ],
+    },
+  ],
+  relations: [
+    {
+      id: 'users-orders',
+      from: 'users',
+      to: 'orders',
+      fromCardinality: 'one',
+      toCardinality: 'zero-or-many',
+      identifying: true,
+      fromColumn: 'id',
+      toColumn: 'user_id',
+    },
+  ],
+  groups: [],
+};
+
+<MermaidER model={model} />;
+```
+
+`source` と `model` は排他です。両方渡された場合は `model` が優先されます。
+
+## 使い方 ─ Query Builder モード
+
+カラムチェックボックスと手動 JOIN を組み合わせて、ビジュアルなクエリ構築 UI を作れます:
+
+```tsx
+import { useState } from 'react';
+import {
+  MermaidER,
+  type ColumnRef,
+  type Join,
+  type PartialColumnRef,
+} from '@msdshsk/react-er-canvas';
+
+function QueryBuilder({ source }: { source: string }) {
+  const [selected, setSelected] = useState<ColumnRef[]>([]);
+  const [joins, setJoins] = useState<Join[]>([]);
+
+  return (
+    <MermaidER
+      source={source}
+      showColumnCheckboxes
+      selectedColumns={selected}
+      onColumnSelectionChange={setSelected}
+      enableManualJoins
+      joins={joins}
+      onJoinConnect={(s, t) => {
+        // ダイアログを開いて JOIN タイプを訊いた上で:
+        // setJoins([...joins, { id: ..., source: s as ColumnRef, target: t as ColumnRef, type: 'INNER' }]);
+      }}
+      onJoinDelete={(id) => setJoins(joins.filter((j) => j.id !== id))}
+    />
+  );
+}
+```
+
+リポジトリ内 `examples/web/` に完全なデモが入っています（サンプル切替・SQL 生成・位置永続化・レイアウトアルゴリズム選択・テーブル削除）。
+
+## Mermaid 互換の拡張ディレクティブ
+
+以下のディレクティブはコメント形式で書かれているため、**標準 Mermaid レンダラに食わせても無害**です:
+
+```mermaid
+%% @group public
+CUSTOMER { int id PK }
+ORDER    { int id PK }
+%% @endgroup
+
+%% @ref CUSTOMER.id -> ORDER.customer_id
+```
+
+- **`%% @group <名前>`** ... **`%% @endgroup`** ─ 内部のテーブルをスキーマ/名前空間としてグルーピング。ヘッダーに色付きバッジが表示されます。
+- **`%% @ref <Table>.<col> -> <Table>.<col>`** ─ FK カラムを明示指定するオーバーライド。直前のリレーションに適用されます。自動推論で曖昧になる場合（例: `users` → `comments` の FK が複数本ある）に使用してください。
+
+## FK カラムの自動推論
+
+`A ||--o{ B` の関係が宣言されると、本ライブラリは `A` （PK 側）のどのカラムが `B` （FK 側）のどのカラムに対応するかを以下の優先順位で推論します:
+
+1. **`%% @ref` ディレクティブ** （常に最優先）
+2. **Laravel 形式のラベル** ─ リレーションのラベルが `<fkテーブル>_<カラム>_foreign` パターンなら FK カラムを特定
+3. **ゆるいラベルマッチ** ─ `<fkテーブル>_<カラム>` パターン
+4. **命名規則** ─ FK 側に `<pkテーブル>_<pkカラム>` または `<pkテーブル>_id` という名前のカラム
+5. **単一 FK フォールバック** ─ FK テーブル内に FK カラムが 1 つしか無ければそれ
+6. **先頭 FK フォールバック** ─ 最終手段として最初の FK カラム
+
+## レイアウト
+
+[elkjs](https://github.com/kieler/elkjs) で実装。以下の prop で調整可能です:
+
+```tsx
+<MermaidER
+  algorithm="layered"     // 'layered' | 'stress' | 'force' | 'mrtree' | 'rectpacking' | 'radial'
+  direction="DOWN"        // 'DOWN' | 'RIGHT' | 'LEFT' | 'UP' (layered/mrtree のみ有効)
+  aspectRatio={16/9}      // 目標アスペクト比 ─ 層を折り返してフィットさせる
+/>
+```
+
+デフォルトは `layered` + `DOWN`。
+
+インタラクティブな編集（textarea で source を編集など）を扱う場合、**利用側で source 更新をデバウンスしてください**。本ライブラリは `source` が変わるたびに同期的に再パース・再レイアウトするためです。
+
+## 位置の永続化
+
+```tsx
+const [positions, setPositions] = useState<NodePositions>(loadFromStorage());
+
+<MermaidER
+  source={source}
+  positions={positions}
+  onPositionsChange={(next) => {
+    setPositions(next);
+    saveToStorage(next);
+  }}
+/>
+```
+
+`positions` に存在しないテーブルは自動レイアウト結果が使われます。複数選択ドラッグ（Shift+drag で範囲選択 → ドラッグ）も対応済みで、`onPositionsChange` には移動した全テーブルの新位置が渡されます。
+
+## 公開 API
+
+```ts
+import {
+  MermaidER,
+  parseMermaidER,
+  layoutER,
+  MermaidERParseError,
+} from '@msdshsk/react-er-canvas';
+```
+
+完全な型は package ルートからエクスポートされます: `MermaidERProps`、`ERModel`、`Table`、`Column`、`Relation`、`Group`、`ColumnRef`、`PartialColumnRef`、`Join`、`JoinType`、`LayoutOptions`、`LayoutAlgorithm`、`LayoutDirection`、`NodePositions`、`NodePosition`、`LayoutResult`、`PositionedNode`、`PositionedEdge`、`EdgePoint`、`Cardinality`、`ColumnKey`。
+
+React 非依存のヘッドレス用途には `@msdshsk/react-er-canvas/core` サブパスが用意されています（パース + レイアウトのみ、レンダリング無し）。
+
+## ライセンス
+
+MIT ─ [LICENSE](./LICENSE) を参照。
+
+依存ライブラリのライセンス（Apache-2.0 / EPL-2.0 / MIT）と帰属表示については [NOTICE](./NOTICE.md) を参照してください。

package/README.md

@@ -0,0 +1,216 @@
+# @msdshsk/react-er-canvas
+
+[日本語 README](./README.ja.md)
+
+Render Mermaid-format ER diagrams in React / Electron, with extended visual features that the stock Mermaid renderer lacks:
+
+- **Column-level FK connections** (lines from `users.id` to `orders.user_id`, not just table-to-table)
+- **Drag-to-position** with optional persistence via `positions` / `onPositionsChange`
+- **Hover-driven FK reference highlighting**
+- **PK / FK / UK / type / comment** rendered per column
+- **Schema groups** (via `%% @group` directive that stays Mermaid-compatible)
+- **Manual JOIN authoring** (column-to-column drag) for query builder UIs
+- **Column selection** (checkboxes) for query builder UIs
+
+Built on [`@xyflow/react`](https://reactflow.dev/), [`elkjs`](https://github.com/kieler/elkjs), and a handwritten [`chevrotain`](https://chevrotain.io/) parser.
+
+## Install
+
+```sh
+npm install @msdshsk/react-er-canvas @xyflow/react react react-dom
+```
+
+`@xyflow/react`, `react`, and `react-dom` are peer dependencies — make sure they're installed in your app.
+
+You also need to import React Flow's stylesheet **once** in your app:
+
+```ts
+import '@xyflow/react/dist/style.css';
+```
+
+## Usage — Mermaid source
+
+```tsx
+import { MermaidER } from '@msdshsk/react-er-canvas';
+
+const source = `
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    CUSTOMER {
+        int id PK "Customer ID"
+        string name
+        string email UK
+    }
+    ORDER {
+        int id PK
+        int customer_id FK
+        decimal amount
+    }
+`;
+
+export function Schema() {
+  return <div style={{ height: '100vh' }}><MermaidER source={source} /></div>;
+}
+```
+
+## Usage — pre-built model (skips parsing)
+
+If your app already has structured schema data (e.g., from `INFORMATION_SCHEMA`), pass it directly via `model`:
+
+```tsx
+import { MermaidER, type ERModel } from '@msdshsk/react-er-canvas';
+
+const model: ERModel = {
+  tables: [
+    {
+      name: 'users',
+      columns: [
+        { name: 'id', type: 'bigint', keys: { pk: true } },
+        { name: 'email', type: 'varchar(255)', keys: { uk: true } },
+      ],
+    },
+    {
+      name: 'orders',
+      columns: [
+        { name: 'id', type: 'bigint', keys: { pk: true } },
+        { name: 'user_id', type: 'bigint', keys: { fk: true } },
+      ],
+    },
+  ],
+  relations: [
+    {
+      id: 'users-orders',
+      from: 'users',
+      to: 'orders',
+      fromCardinality: 'one',
+      toCardinality: 'zero-or-many',
+      identifying: true,
+      fromColumn: 'id',
+      toColumn: 'user_id',
+    },
+  ],
+  groups: [],
+};
+
+<MermaidER model={model} />;
+```
+
+`source` and `model` are mutually exclusive; if both are passed, `model` wins.
+
+## Usage — Query Builder mode
+
+Combine column checkboxes and manual JOINs to build a visual query composer:
+
+```tsx
+import { useState } from 'react';
+import {
+  MermaidER,
+  type ColumnRef,
+  type Join,
+  type PartialColumnRef,
+} from '@msdshsk/react-er-canvas';
+
+function QueryBuilder({ source }: { source: string }) {
+  const [selected, setSelected] = useState<ColumnRef[]>([]);
+  const [joins, setJoins] = useState<Join[]>([]);
+
+  return (
+    <MermaidER
+      source={source}
+      showColumnCheckboxes
+      selectedColumns={selected}
+      onColumnSelectionChange={setSelected}
+      enableManualJoins
+      joins={joins}
+      onJoinConnect={(s, t) => {
+        // open a dialog to ask for JOIN type, then:
+        // setJoins([...joins, { id: ..., source: s as ColumnRef, target: t as ColumnRef, type: 'INNER' }]);
+      }}
+      onJoinDelete={(id) => setJoins(joins.filter((j) => j.id !== id))}
+    />
+  );
+}
+```
+
+See `examples/web/` in the repo for a full demo (sample switcher, SQL generation, position persistence, layout algorithm controls, table removal).
+
+## Mermaid-compatible extensions
+
+These directives are written as comments so they survive a round-trip through stock Mermaid renderers:
+
+```mermaid
+%% @group public
+CUSTOMER { int id PK }
+ORDER    { int id PK }
+%% @endgroup
+
+%% @ref CUSTOMER.id -> ORDER.customer_id
+```
+
+- **`%% @group <name>`** ... **`%% @endgroup`** — visually mark tables as belonging to a schema/namespace; they get a colored header badge.
+- **`%% @ref <Table>.<col> -> <Table>.<col>`** — explicit FK column override, applied to the most recent relation. Use this when automatic inference can't disambiguate (e.g., multiple FKs from `users` to `comments`).
+
+## Automatic FK column inference
+
+When the relation `A ||--o{ B` is declared, the library tries to determine which column on `A` (PK side) connects to which column on `B` (FK side), in this priority:
+
+1. **`%% @ref` directive** (always wins)
+2. **Laravel-style label** — if the relation label matches `<fkTable>_<col>_foreign`, that pinpoints the FK column
+3. **Loose label match** — `<fkTable>_<col>`
+4. **Naming conventions** — `<pkTable>_<pkCol>` or `<pkTable>_id` on the FK side
+5. **Single-FK fallback** — if only one FK column exists on the FK table, use it
+6. **First-FK fallback** — last resort
+
+## Layout
+
+Powered by [elkjs](https://github.com/kieler/elkjs). Configurable via:
+
+```tsx
+<MermaidER
+  algorithm="layered"     // 'layered' | 'stress' | 'force' | 'mrtree' | 'rectpacking' | 'radial'
+  direction="DOWN"        // 'DOWN' | 'RIGHT' | 'LEFT' | 'UP' (only used by layered/mrtree)
+  aspectRatio={16/9}      // hint to wrap layers to fit a target aspect
+/>
+```
+
+Defaults to `layered` + `DOWN`.
+
+For interactive editing, **debounce parse on the consumer side** if your source updates on every keystroke — the library re-parses synchronously on each `source` change.
+
+## Position persistence
+
+```tsx
+const [positions, setPositions] = useState<NodePositions>(loadFromStorage());
+
+<MermaidER
+  source={source}
+  positions={positions}
+  onPositionsChange={(next) => {
+    setPositions(next);
+    saveToStorage(next);
+  }}
+/>
+```
+
+Tables not present in `positions` use the auto-layout result. Multi-select drag (Shift+drag for box select, then drag) is preserved.
+
+## Public API
+
+```ts
+import {
+  MermaidER,
+  parseMermaidER,
+  layoutER,
+  MermaidERParseError,
+} from '@msdshsk/react-er-canvas';
+```
+
+The full type surface is exported from the package root: `MermaidERProps`, `ERModel`, `Table`, `Column`, `Relation`, `Group`, `ColumnRef`, `PartialColumnRef`, `Join`, `JoinType`, `LayoutOptions`, `LayoutAlgorithm`, `LayoutDirection`, `NodePositions`, `NodePosition`, `LayoutResult`, `PositionedNode`, `PositionedEdge`, `EdgePoint`, `Cardinality`, `ColumnKey`.
+
+A headless subpath `@msdshsk/react-er-canvas/core` is also available for environments without React (just parsing + layout, no rendering).
+
+## License
+
+MIT — see [LICENSE](./LICENSE).
+
+For third-party dependency licenses (Apache-2.0 / EPL-2.0 / MIT) and attribution, see [NOTICE](./NOTICE.md).

package/dist/components/JoinEdge.d.ts

@@ -0,0 +1,10 @@
+import { EdgeProps } from '@xyflow/react';
+import { JoinType } from '../core/model';
+export interface JoinEdgeData extends Record<string, unknown> {
+    type: JoinType;
+    color: string;
+    hovered?: boolean;
+    onDelete?: () => void;
+}
+export declare const JoinEdge: import('react').MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected, }: EdgeProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=JoinEdge.d.ts.map

package/dist/components/JoinEdge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JoinEdge.d.ts","sourceRoot":"","sources":["../../src/components/JoinEdge.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,WAAW,YAAa,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,oIAUlB,SAAS,6CAkFV,CAAC"}

package/dist/components/MermaidER.d.ts

@@ -0,0 +1,46 @@
+import { CSSProperties } from 'react';
+import { LayoutAlgorithm, LayoutDirection } from '../core/layout';
+import { ColumnRef, ERModel, Join, PartialColumnRef } from '../core/model';
+export interface NodePosition {
+    x: number;
+    y: number;
+}
+export type NodePositions = Record<string, NodePosition>;
+export interface MermaidERProps {
+    /** Mermaid ER source. Mutually exclusive with `model`. */
+    source?: string;
+    /** Pre-built ER model. Takes precedence over `source`. */
+    model?: ERModel;
+    layout?: 'elk';
+    algorithm?: LayoutAlgorithm;
+    direction?: LayoutDirection;
+    aspectRatio?: number;
+    positions?: NodePositions;
+    onPositionsChange?: (positions: NodePositions) => void;
+    showColumnCheckboxes?: boolean;
+    selectedColumns?: ColumnRef[];
+    onColumnSelectionChange?: (selectedColumns: ColumnRef[]) => void;
+    /** Enable column-to-column / card-to-card drag for manual JOINs. */
+    enableManualJoins?: boolean;
+    /** Existing manual joins to render alongside FK relations. */
+    joins?: Join[];
+    /**
+     * Fired when the user finishes a connect drag. The consumer typically opens
+     * a dialog to ask for join type, then appends a complete `Join` to its state.
+     * `column` may be undefined when the drag landed on a default (table-center) handle.
+     */
+    onJoinConnect?: (source: PartialColumnRef, target: PartialColumnRef) => void;
+    /** Fired when the user removes a manual join via Delete or the trash icon. */
+    onJoinDelete?: (joinId: string) => void;
+    /** When provided, a small × appears on each table header to remove it from the canvas. */
+    onTableRemove?: (table: string) => void;
+    highlightReferencesOnHover?: boolean;
+    onColumnClick?: (table: string, column: string) => void;
+    onTableClick?: (table: string) => void;
+    /** Override the default delete-key code(s). Default is 'Delete' (Backspace ignored to prevent accidents). */
+    deleteKeyCode?: string | string[] | null;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function MermaidER(props: MermaidERProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MermaidER.d.ts.map

package/dist/components/MermaidER.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidER.d.ts","sourceRoot":"","sources":["../../src/components/MermaidER.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAkBf,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,eAAe,EAErB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EACV,SAAS,EACT,OAAO,EACP,IAAI,EACJ,gBAAgB,EAEjB,MAAM,eAAe,CAAC;AAqBvB,MAAM,WAAW,YAAY;IAC3B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,SAAS,EAAE,CAAC;IAC9B,uBAAuB,CAAC,EAAE,CAAC,eAAe,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IACjE,oEAAoE;IACpE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7E,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0FAA0F;IAC1F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,6GAA6G;IAC7G,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA2CD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAmU9C"}

package/dist/components/TableNode.d.ts

@@ -0,0 +1,30 @@
+import { NodeProps } from '@xyflow/react';
+import { Table } from '../core/model';
+export interface TableNodeData extends Record<string, unknown> {
+    table: Table;
+}
+/**
+ * Map from table name -> set of highlighted column names.
+ * Provided by MermaidER, consumed by TableNode for hover-driven highlighting
+ * without forcing the whole node array to recompute on every hover change.
+ */
+export declare const HighlightContext: import('react').Context<ReadonlyMap<string, ReadonlySet<string>>>;
+export interface ColumnSelectionContextValue {
+    enabled: boolean;
+    /** "table.column" keys for fast lookup. */
+    selected: ReadonlySet<string>;
+    onToggle: (table: string, column: string, checked: boolean) => void;
+}
+export declare const ColumnSelectionContext: import('react').Context<ColumnSelectionContextValue>;
+/** When true, column handles become visible/connectable for manual JOIN drawing. */
+export declare const ConnectModeContext: import('react').Context<boolean>;
+export interface TableActionsContextValue {
+    /** When provided, a delete affordance is shown on the table header. */
+    onTableRemove?: (table: string) => void;
+    /** Per-column click handler. Provided via context (not node data) so its
+     *  identity can change without invalidating the React Flow node array. */
+    onColumnClick?: (table: string, column: string) => void;
+}
+export declare const TableActionsContext: import('react').Context<TableActionsContextValue>;
+export declare const TableNode: import('react').MemoExoticComponent<({ data }: NodeProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=TableNode.d.ts.map

package/dist/components/TableNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableNode.d.ts","sourceRoot":"","sources":["../../src/components/TableNode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAU,KAAK,EAAE,MAAM,eAAe,CAAC;AAGnD,MAAM,WAAW,aAAc,SAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC5D,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,mEAAqE,CAAC;AAEnG,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,sBAAsB,sDAIjC,CAAC;AAEH,oFAAoF;AACpF,eAAO,MAAM,kBAAkB,kCAAgC,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;8EAC0E;IAC1E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD;AAED,eAAO,MAAM,mBAAmB,mDAA8C,CAAC;AA+G/E,eAAO,MAAM,SAAS,iDAAqC,SAAS,6CAwJlE,CAAC"}

package/dist/core/index.d.ts

@@ -0,0 +1,5 @@
+export type { Cardinality, ColumnKey, Column, Table, Relation, Group, ERModel, ColumnRef, PartialColumnRef, JoinType, Join, } from './model';
+export { parseMermaidER, MermaidERParseError } from './parser';
+export { layoutER, estimateNodeHeight, NODE_WIDTH, HEADER_HEIGHT, ROW_HEIGHT, VERTICAL_PADDING, } from './layout';
+export type { LayoutOptions, LayoutResult, LayoutDirection, LayoutAlgorithm, PositionedNode, PositionedEdge, EdgePoint, } from './layout';
+//# sourceMappingURL=index.d.ts.map

package/dist/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,WAAW,EACX,SAAS,EACT,MAAM,EACN,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,IAAI,GACL,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/D,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,UAAU,EACV,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAClB,YAAY,EACV,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,EACd,SAAS,GACV,MAAM,UAAU,CAAC"}

package/dist/core/layout.d.ts

@@ -0,0 +1,58 @@
+import { ERModel } from './model';
+export type LayoutDirection = 'RIGHT' | 'DOWN' | 'LEFT' | 'UP';
+export type LayoutAlgorithm = 'layered' | 'stress' | 'force' | 'mrtree' | 'rectpacking' | 'radial';
+export interface LayoutOptions {
+    engine?: 'elk';
+    algorithm?: LayoutAlgorithm;
+    direction?: LayoutDirection;
+    /**
+     * Target aspect ratio (width / height). Combined with the layered algorithm,
+     * enables wrapping so the layout fits common screen sizes.
+     * Example: `16/9`, `Math.SQRT2` for A4 landscape, `1` for square.
+     */
+    aspectRatio?: number;
+    nodeSpacing?: number;
+    rankSpacing?: number;
+    /** Raw ELK layoutOptions, merged after the defaults. */
+    raw?: Record<string, string>;
+}
+export interface PositionedNode {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface EdgePoint {
+    x: number;
+    y: number;
+}
+export interface PositionedEdge {
+    id: string;
+    source: string;
+    target: string;
+    startPoint?: EdgePoint;
+    endPoint?: EdgePoint;
+    bendPoints?: EdgePoint[];
+}
+export interface LayoutResult {
+    nodes: PositionedNode[];
+    edges: PositionedEdge[];
+    width: number;
+    height: number;
+}
+export declare const NODE_WIDTH = 240;
+export declare const HEADER_HEIGHT = 32;
+export declare const ROW_HEIGHT = 22;
+export declare const VERTICAL_PADDING = 8;
+export declare function estimateNodeHeight(columnCount: number): number;
+export declare function buildElkLayoutOptions(opts: {
+    algorithm: LayoutAlgorithm;
+    direction: LayoutDirection;
+    aspectRatio: number | undefined;
+    nodeSpacing: number;
+    rankSpacing: number;
+    raw: Record<string, string>;
+}): Record<string, string>;
+export declare function layoutER(model: ERModel, options?: LayoutOptions): Promise<LayoutResult>;
+//# sourceMappingURL=layout.d.ts.map