@erd-studio/renderer 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -2,6 +2,55 @@
 
 All notable changes to `@erd-studio/renderer`. While `0.x`, a breaking change bumps the minor version.
 
+## 0.4.1
+
+### Added
+- **`ErdCanvas` prop `routingWorkerUrl`** (optional) and the routing worker as its own file, **`@erd-studio/renderer/edge-routing-worker.js`** (a new `exports` entry; the same code the canvas inlines). A host whose CSP refuses a blob worker but allows its own scripts (`script-src 'self'` with no `worker-src`, as some app-hosting platforms set) serves that file from its own origin and passes its URL, and diagrams over 100 lines route in the worker again instead of keeping simple lines past 150 lines. Without the prop nothing changes: the worker starts from the inlined code through a blob URL. The canvas store gains the optional `routingWorkerUrl` (absent or null by default, so a host that hand-builds `CanvasState` needs no change). No `DisplaySubjectArea` change, no new `--vscode-*` variables, and the viewer still posts nothing.
+
+## 0.4.0
+
+### Added
+- **Lines route around the tables.** Every FK line is routed in one pass over the whole diagram (an orthogonal router that goes around every card, spaces lines that share a channel and may move a line to a better side of its card), then drawn in one of two styles. `ErdCanvas` prop `lineStyle` (optional, `'curved'` by default, or `'hops'`) picks it; `LINE_STYLES`, `DEFAULT_LINE_STYLE`, `isLineStyle` and the `LineStyle` type are exported from `.` (and `/editor`). `curved`: soft corners, a halo casing under each line with the line underneath cut at a crossing, and a dashed x-ray drawn above a card where a line has to pass under it. `hops`: rounded square corners and a hop where two lines cross. The canvas store gains `lineStyle` (`'curved'`) and `edgeRoutes` (`null`) with `setLineStyle` / `setEdgeRoutes` (a host that hand-builds `CanvasState` instead of using `createCanvasSlice` must add them); `CanvasBackdrop` renders the router, so a host on `/editor` gets it with no change. Each canvas has its own router. Diagrams over 100 lines route in a Web Worker the canvas starts from a blob URL (the code is inlined in `dist`; a page whose CSP has no `worker-src blob:` routes on the main thread instead), so the canvas never pauses for routing: the lines appear on smooth step and switch to routed when the worker answers. Diagrams over 150 cards route each line on a local grid round its two cards, so a 2,000-card diagram routes in about 2.3 s with bounded memory (a cold pass made out of date by a newer request, such as the one before the cards are measured, is stopped rather than waited for); with the worker there is no size limit. Self-loops, lines the router leaves out, every line when there is no worker and more than 150 lines, and a pass too slow keep the smooth-step path; on a slow diagram a dragged card's lines take it until the drag ends. The React Flow root carries `data-edge-routing` (the last pass, for tests and debugging). `FkEdge` portals its labels into the label layer itself (`EdgeLabels`, one lookup per canvas) instead of `<EdgeLabelRenderer>`, whose per-edge DOM search on every store update was ~45% of a drag on 2,000 tables; the labels land in the same element. No `DisplaySubjectArea` change, no new `--vscode-*` variables, and the viewer still posts nothing.
+- **Context fields in the Detail panel.** One **Fields** section, drawn from core's `resolveTableFields` / `resolveColumnFields` over `DisplaySubjectArea.fields` (the project's `fields.yml`), or core's `STARTING_FIELD_LIST` when it is absent (no file, or an older core, so a cached `DisplaySubjectArea` renders as before plus Decisions and Open questions). Each field renders by its type (text: a text box with its guidance as the placeholder; value: a one-line box; choice: a dropdown of its values, a value outside them kept and marked; yes-no: Yes / No / Not set) and posts the message its home always used: `updateModelRationale` with one key (`''` clears it), `updateMeta` (a clear removes the key), `updateModelGrain`, `updateModelRole`. The editor shows the list in order, a retired field (`design`, `role_choice`, `grain_choice`) with a **Retired** badge, **from dbt** (only when the store's `logicalOnly` is unset) and **people only** badges, values the list does not name under **Not in your list**, Import DBML's `meta.dbml` as one read-only **Kept from DBML import** row, **+ Add field** (a free-form `meta` key; reserved keys and built-ins are refused, a retired built-in with its guidance rather than a pointer to fields.yml) and a **Customise fields** link that posts `{ type: 'openFieldsFile' }`. A field type, `filledBy`, `showFor` or home from a newer core is shown read-only, never dropped. A column's expanded row has a compact section for the fields kept in its `meta`. No new `--vscode-*` variables.
+- `ColumnRowEditor` (`/editor`) has an optional `fieldVisibility` prop (`ColumnFieldVisibility { scdType?, additiveType?, naturalKey? }`, exported as a type): the SCD type and additivity dropdowns show exactly when it says so (the Detail panel works it out from the field list: on the list and suiting the role, or set). Without the prop the old `modelRole` gating is kept. The natural-key badge always shows. The Detail panel passes it in the editor only; in the viewer and on a read-only (physical) stage it shows a dropdown only when the column has that value, so a table with no role (an imported or plain DBML table, a physical-only dbt model) gains no empty **SCD Type** or **Additive** rows there.
+- Theme tokens `--star-gold`, `--star-gold-light`, `--star-gold-dark`, `--star-gold-fg`, `--star-gold-glow` and `--star-gold-shine` (GitHub's star gold, for the extension's Star on GitHub button). Fixed colours: no new `--vscode-*` variables, and nothing in the canvas uses them.
+- A table's own layer on the canvas: with `DisplayTable.layer` and `DisplaySubjectArea.layerConfigs` (core 0.4.0), a table node is badged and striped (`--model-node-layer-color`) with its own layer, marked `model-node--other-layer` when that is not the diagram's, and reads `schema.name` (the schema only when it is not the layer's own name) with its alias after it (`as orders`). `TableNodeData` gains the optional `tableLayer`, `tableLayerConfig`, `otherLayer`, `shownSchema` and `alias`. Without those fields (YAML, the physical stage, an older core) the node is badged with the diagram's layer (see Changed); the schema shows only as the `schema.` prefix and in the badge's hover card. No new `--vscode-*` variables.
+- Re-exports core's rich DBML export: `toDbmlRich`, `DBML_RICH_EXPORT_HEADER` and the `DbmlRichOptions` type. A rich export is one file per diagram, its table and sticky-note positions in its `Project`'s `erd_layout`.
+- Hover focus and relationship flow: `useHoverFocus()` (hover preview handlers and a root class; a host that builds on `/editor` must call it, or nothing flows even on click), `EdgeFlow` / `EdgeFlowGlyphs`, `usePrefersReducedMotion`, `computeCanvasFocus`. `CanvasState` gains the ephemeral `hoverFocus` and `flowFocus` (a host that hand-builds `CanvasState` instead of using `createCanvasSlice` must add them). No `DisplaySubjectArea` change and no new `--vscode-*` variables.
+- The canvas store has a `canvasContext` (null by default, from `createCanvasSlice`) and a `setCanvasContext` action. With a context, an editing host's detail panel shows the table's File line (**Open** posts `openModelFile`), Reviewed by, and **Not on this diagram (n)** with **+ Add** and **Add all related**, and the node header shows a muted `+n` chip. Without a context, and always in the viewer, none of these appear.
+- `ErdCanvas` prop `logicalOnly` (optional, default false) and canvas-store field `logicalOnly` (false by default, from `createCanvasSlice`). When set, the canvas root gets `editor-canvas--neutral`: tables, lines, end labels, flow arrows, the hover ring, the minimap and the legend samples use neutral theme colours (new tokens `--canvas-neutral-line`, `--canvas-neutral-border`, `--canvas-neutral-ring`, `--canvas-selection`, `--canvas-selection-glow`, all built from existing `--vscode-*` variables, so the README's variable list is unchanged), and the legend leaves out the Physical, ghost, provenance and comparison entries. Without the prop the viewer looks as before.
+- `TableNodeData.singleLayer` (optional) and the helpers `isSingleLayerProject`, `layerAbbreviation` and `LAYER_BADGE_FALLBACK` (from `@erd-studio/renderer/editor`). When `layerConfigs` lists one layer at most and every table is in the diagram's layer, the badge and colour strip are left off and the legend drops its layer-badge row. A domain with no `layerConfigs` (an older core) renders as before.
+- **Table and relationship counts beside the legend.** `StatusBar` (moved from the extension's webview into the renderer, exported from `/editor` with the pure `statusBarStats` and the `StatusBarStats` / `StatusBarLayer` types): "5 tables | 4 relationships" plus the layer key when tables come from several layers, a composite foreign key counted once and a relationship whose other end is not on the diagram not counted (as the canvas draws them; the webview's bar used to count those). The counts are one group (`status-bar__counts`) that never breaks inside an item. The extension renders it as before; `ErdCanvas` now renders it too, as a bottom-left panel beside the legend's `?` button (`status-bar--viewer`): the counts on one row and the layer key under them (no divider between), the box only as wide as its widest row, never under the minimap, and moved beside the open legend (`status-bar--beside-legend`), where a canvas under 720px wide hides it until the legend closes. The `ErdCanvas` root is now a size container (`container-type: inline-size`) so this follows the canvas's width, not the window's. Theme tokens only; no new `--vscode-*` variables.
+- **The viewer's Fields fold.** In `ErdCanvas` a table's Fields section is a fold: its heading is a button (`aria-expanded`, `aria-controls`) with the count of filled fields in parentheses, as the Columns and Relationships headings give theirs, closed by default (the section sits above Columns, so a few long rationale values would otherwise push the columns and relationships out of a short canvas) and kept open or closed from table to table while the panel stays mounted. The editor and the read-only (physical) stage in the editor have no fold.
+- **Closing the viewer's detail panel keeps the table selected.** In `ErdCanvas` the panel's close button hides the panel but keeps the selection: the table's relationships stay lit, the rest stays dimmed and its flow arrows settle as after a click. A click on the selected table (or another one) opens the panel again; a click on the empty canvas, or Escape (pressed in the canvas, or with nothing focused), clears the selection. Escape is new in the viewer. Closing it moves the focus to the selected table's node, so a keyboard user keeps their place and Enter opens the panel again. With several canvases on a page, an Escape with nothing focused clears only the canvas last clicked, pointed at or focused. The editor's close still clears the selection.
+
+### Changed
+- **Line routing changes how every diagram draws its lines** (see Added): they now go around the cards, in the `curved` style unless `lineStyle` says otherwise. This is a visible rendering change in the viewer: a host that caches rendered diagrams should bump its cache key.
+- On a `logicalOnly` canvas, lines and their labels stay neutral grey at rest, and the lines of the hovered or selected table (their `*` / `1` and role labels, flow arrows and x-ray) take the diagram's layer colour (`layerConfig.color`, set on the React Flow root as `--diagram-layer-color`), else the grey. Table borders stay neutral; a stage-coloured canvas is unchanged.
+- **The viewer's legend lists only what its diagram can show.** On a logical-stage domain `ErdCanvas`'s legend leaves out the Physical stage, both ghosts, the provenance chips and the "Line colour follows the stage" samples; on a physical-stage domain it leaves out the Logical card and the line-colour samples, and draws its line, end-label and flow samples in the physical colour (`legend--stage-physical`). Neither shows the comparison entries: the viewer never compares stages. Unlike `logicalOnly`, the stage colours are kept. New export `legendEntries` (`/editor`). The editor's legend is unchanged.
+- The viewer's detail panel: relationship rows wrap onto a second line instead of cutting a long table or column name off with an ellipsis (`detail-panel__relationship--wrap`), show the relationship's role (`detail-panel__rel-role`, as the line's label reads), and the panel (`detail-panel--viewer`) is never taller than the canvas it floats over and stops above the bottom-right minimap, scrolling instead and never sideways. A long name breaks after a `_`, `.` or `, ` (`<wbr>`) before it is cut mid-word, the `→` stays with the name it points at, and the cardinality sits under the text so the text has the row's full width; a long header value (Warehouse name) wraps. The editor's rows are unchanged.
+- `dist/styles.css` now includes the Fields section's stylesheet, which it had left out (the viewer drew the Fields section unstyled); a test now holds every component stylesheet to the package stylesheet.
+- The Detail panel's **Design Rationale** (six fixed fields), table and column **Metadata** editors and the separate **Table type** and **Grain** editors are replaced by the Fields section. Labels come from the field definitions: the role picker is **Table role** (plain role names unchanged), SCD Strategy is **History**, and **Modelling detail (optional)** now opens when any field has a value. The viewer and a read-only (physical) stage show only the fields with a value, as label / value rows in two columns (muted sentence-case label, as the header's Schema and Warehouse name labels read, and a wrapped value) in the old sections' place, with no badges, guidance or edit affordances, and post nothing; in the viewer the section is a fold (see Added); a read-only stage shows the fold only when a field has a value (it used to offer **+ Add Rationale**, which the host then rejected). This is a visible rendering change in the viewer (Table role and Grain now appear there when set): a host that caches rendered diagrams should bump its cache key.
+- `TableNodeData.hasRationale` is true when any rationale field (every catalogue key, `RATIONALE_FIELD_KEYS`) has non-blank text.
+- The Detail panel's add-button hover uses the theme's `--ai-fg` / `--ai-bg` instead of a hard-coded purple.
+- After a domain update, the canvas keeps the existing React Flow node and edge objects for everything that came out the same, so dragging a table re-renders only the tables that moved and their edges instead of every node. What is drawn is unchanged; no API change.
+- A table whose file cannot be read says which format failed: "DBML error on line N" for a `.dbml` table file (ERD Studio 2.0's native DBML storage), and "YAML error on line N" as before for a `.yml` one. A `DisplaySubjectArea` from an older core never carries the DBML kinds, so its nodes read exactly as before.
+- The table node badge always shows the layer the table lives in (`DisplayTable.layer`, else the diagram's `layer`): its text is the layer's abbreviation, then BRZ/SLV/GLD for the default layers, then the first three letters. The schema-abbreviation fallback and the `model-node__badge--layer` class are gone. The badge tooltip reads `Layer: …` and `Schema: …`, plus a line on the physical stage when no dbt schema is resolved; a domain with no `layer` draws no badge. This is a visible rendering change in the viewer.
+- `shownSchema` (the dim `schema.` prefix) is set on every stage whenever the schema differs from the badge's layer id, and `estimateNodeWidth` reserves its width.
+- The selection ring takes the colour of the stage being viewed (`--model-node-ring`, new class `model-node--stage-<stage>`), so a ghost on the physical stage rings green; it replaces React Flow's focusBorder ring, and the amber discrepancy-extra glow again wins over the selection.
+- Outside the viewer, the detail panel puts Description, Columns and Relationships first and folds Table type, Grain, Meta and Design Rationale under **Modelling detail (optional)**, which opens on its own when any is set; **Remove from Diagram** (was Remove from Subject Area) moved to the bottom. Its confirmation says a table's relationships stay in the Table Library unless the diagram file holds them (`relationshipsInDiagramFile`; an older core keeps the old warning). The role picker is **Table type**, with plain names (Pre-joined fact, Flattened dimension, Local dimension; stored values unchanged). The viewer keeps its old layout and shows none of these.
+- Legend: the layer badge is explained as “The layer the table lives in”, a schema-prefix row is added, and “Annotations” / “Build Note” now read “Notes” / “Note”.
+- Outside the viewer, with the store's `logicalOnly` set (no dbt project), the detail panel shows the **Warehouse name** row only for a table that already has an alias, and words its hint and tooltip without dbt ("The table's name in the warehouse (its alias)…"). Without `logicalOnly` the editor's row reads as before. No API change.
+- The viewer (`ErdCanvas`) never names dbt, since a page embedding it cannot know whether the project uses dbt: the **Warehouse name** tooltip reads "Named X in the warehouse…" (was "Built as X (dbt alias)…"), and on a physical-stage domain the "Columns from" row, the provenance chip and its hover text (the manifest chip reads `MNF`, was `DBT`), the ghost hover text and the layer badge's no-schema line ("No schema resolved.", without the dbt commands) use neutral words, as do the legend's Physical, ghost and provenance entries. The editor (no `viewer`) is unchanged. New exports from `lib/badgeLabels` (`/editor`): `SOURCE_LABEL_NEUTRAL`, `SOURCE_PHRASE_NEUTRAL`, `SOURCE_LEGEND_DESC_NEUTRAL`. This is a visible wording change in the viewer; no `DisplaySubjectArea` change and no new `--vscode-*` variables.
+
+### Fixed
+- The detail panel no longer warns "Multiple primary keys detected" on a composite primary key (two or more PK columns are one key), in the editor and the viewer.
+- A long column type in the detail panel is cut with an ellipsis instead of squeezing the column name out (the name keeps a minimum width; theme variables only), and the type's tooltip (`title`) now shows it whole: the type alone on a read-only row, `<type> — double-click to edit` on an editable one. No `DisplaySubjectArea` change and no new `--vscode-*` variables.
+
+### Changed (breaking)
+- `CanvasState` gains the required members `logicalOnly` and `canvasContext`, and `CanvasActions` the required `setCanvasContext`. A store built with `createCanvasSlice` has them; a host that hand-builds `CanvasState` instead must add them (as for `hoverFocus` / `flowFocus`).
+- Pins `@erd-studio/core` 0.4.0, whose `TableLoadErrorKind` gains three DBML kinds and whose `@dbml/parse` runtime dependency is loaded only by its `@erd-studio/core/dbml` subpath (the renderer never imports it). The re-exported `DiagramExportFormat` gains `'dbml-rich'` and `DIAGRAM_EXPORT_FORMATS` now ends with it, so a page that offers every format offers it too, and a `Record<DiagramExportFormat, …>` (a label or hint per format) or an exhaustive `switch` over it needs a case.
+
 ## 0.3.0
 
 ### Changed

package/README.md

@@ -9,7 +9,7 @@ Peer dependencies: `react` and `react-dom` 18.3+, `@xyflow/react` 12.4+.
 | Import | What it is for |
 |---|---|
 | `@erd-studio/renderer` | Showing a domain: the `ErdCanvas` viewer component (below), plus `transformSubjectArea` (a `DisplaySubjectArea` to React Flow nodes and edges), `pickHandleSides`, `repickHandleSides` / `nodeRect`, the diagram exporters re-exported from `@erd-studio/core` (below), and the display, domain and graph types (`DisplaySubjectArea`, `TableFlowNode`, `FkFlowEdge`, …). |
-| `@erd-studio/renderer/editor` | Everything above plus what a host needs to build a full editor around the canvas, as the extension's webview does: the store (below), the host adapter, `useCanvasGraph`, `CanvasBackdrop`, `canvasNodeTypes` / `canvasEdgeTypes`, the components (`TableNode`, `FkEdge`, `AnnotationNode`, `AnnotationEdge`, `DetailPanel`, `Legend`, `KeyBadge`, `KeyBadgeGroup`, `DataTypeSelect`, `ColumnRowEditor`), the canvas hooks and the pure helpers. |
+| `@erd-studio/renderer/editor` | Everything above plus what a host needs to build a full editor around the canvas, as the extension's webview does: the store (below), the host adapter, `useCanvasGraph`, `useHoverFocus` (hover preview and relationship flow: spread its `hoverHandlers` onto `<ReactFlow>` and pass its `flowClassName` as the `className`; without it nothing flows, even on click), `CanvasBackdrop`, `canvasNodeTypes` / `canvasEdgeTypes`, the components (`TableNode`, `FkEdge`, `EdgeFlow` / `EdgeFlowGlyphs` (the moving direction glyphs on a line), `AnnotationNode`, `AnnotationEdge`, `DetailPanel`, `Legend`, `StatusBar`, `KeyBadge`, `KeyBadgeGroup`, `DataTypeSelect`, `ColumnRowEditor`), the canvas hooks and the pure helpers. |
 | `@erd-studio/renderer/store` | The canvas store on its own, with no React Flow runtime: `createCanvasSlice`, `createCanvasStore`, `CanvasStoreProvider`, `useEditorStore`, `useEditorStoreApi` and their types. |
 | `@erd-studio/renderer/sizing` | Model node size estimation (`NODE_WIDTH`, `estimateNodeWidth`, `estimateNodeHeight`, `countVisibleColumnRows`, `resolveNodeDimensions`), for layout code that needs node sizes before React Flow has measured them. No components. |
 | `@erd-studio/renderer/styles.css` | The stylesheet: every component's CSS in cascade order, then the theme tokens. It `@import`s `@xyflow/react/dist/style.css`, which your bundler resolves. |
@@ -18,7 +18,7 @@ All four JavaScript entry points share their modules, so a store or context crea
 
 ## Viewer: `ErdCanvas`
 
-`ErdCanvas` renders a `DisplaySubjectArea` read-only, the way the extension shows a read-only domain: model nodes with their columns and key badges, FK edges, annotations, the minimap, the legend, and the detail panel a click on a model opens. It presents no editing affordances and posts nothing anywhere.
+`ErdCanvas` renders a `DisplaySubjectArea` read-only, the way the extension shows a read-only domain: model nodes with their columns and key badges, FK edges, annotations, the minimap, the legend with the table and relationship counts beside it, and the detail panel a click on a model opens. Closing the panel keeps the table selected (its relationships stay lit, unlike the extension); a click on the empty canvas, or Escape, clears the selection. Escape is heard on `window` and acts only when it is pressed inside the canvas, or with nothing focused for the canvas last clicked, pointed at or focused, so with several canvases on a page it clears only that one's selection. It presents no editing affordances and posts nothing anywhere.
 
 ```tsx
 import { useRef, useState } from 'react';
@@ -43,15 +43,20 @@ function Diagram({ domain }: { domain: DisplaySubjectArea }) {
 | `nodesDraggable` | Let readers move model and annotation nodes (default `false`). Moves are never saved; the edges on a moved node re-pick their sides as it moves. |
 | `onLayoutModifiedChange(modified)` | Called when the layout starts or stops differing from the domain's positions (a node moved; `resetLayout()`, a new domain, or a node moved back). |
 | `onReady()` | Called once, after the first nodes are measured and fitted into view (straight away for an empty domain). |
+| `logicalOnly` | Draw the diagram of a project with no dbt project (default `false`): tables, lines and the selection ring take neutral theme colours instead of the logical stage's blue, so the layer badge carries the colour, and the legend leaves out the Physical stage, ghosts, provenance chips and comparison colours. |
+| `lineStyle` | How relationship lines are drawn (default `'curved'`; `LINE_STYLES` lists both, `LineStyle` is the type). Both route every line around the tables in its way. `'curved'`: soft curves, a halo where two lines cross (the line underneath is cut), and a faint dashed "x-ray" where a line has no way round a table. `'hops'`: square corners and a small hop where two lines cross. Any other value reads as `'curved'`. A view preference: readers cannot change it, and nothing is posted. Diagrams over 100 lines are routed in a Web Worker: from `routingWorkerUrl` when given, else from a blob URL (allow `worker-src blob:` in the page's CSP). With a worker any size is routed (2,000 tables in about 1.5 s) without pausing the page; without one, diagrams up to 150 lines route on the main thread and larger ones keep simple lines. |
+| `routingWorkerUrl` | The URL of your copy of `@erd-studio/renderer/edge-routing-worker.js` (the routing worker as a classic script), served from the page's own origin. Set it when your CSP refuses a blob worker but allows your own scripts (`script-src 'self'` and no `worker-src`, as some app-hosting platforms set): diagrams over 100 lines then route in that worker. With Vite: `import routingWorkerUrl from '@erd-studio/renderer/edge-routing-worker.js?url'`. Read once, when the canvas mounts; if the file cannot start a worker, the canvas falls back to the blob, then to the main thread. |
 | `className`, `style` | Applied to the canvas's wrapper element, which fills its parent. |
 
 The ref exposes `resetLayout()`, which puts every node back at its position in the domain with its original edge sides.
 
 Each `ErdCanvas` has its own store, so several can share a page.
 
+**Line routing.** Every FK line is routed in one pass over the whole diagram, on the frame after a node moves or is measured; each canvas has its own router, so diagrams on one page never share its state. A self-loop, a line the router cannot place and every line on a diagram too large or too slow to route draw the smooth-step path older versions drew. While a node is dragged on a slow diagram, its lines take that path until the drag ends. On a `logicalOnly` canvas the lines are neutral grey at rest, and the lines of the hovered or selected table (with their end labels, role labels, flow arrows and x-ray) take the diagram's layer colour (`layerConfig.color`, else the grey). Nothing here reads a new field: a `DisplaySubjectArea` from an older core routes the same way.
+
 ## Exporting a diagram
 
-The `.` entry re-exports `@erd-studio/core`'s one-way exporters, so a page that shows a diagram with `ErdCanvas` can offer it as text without depending on core itself: `toMermaid`, `toDbml`, `exportDiagram`, `diagramExportFileName`, `DIAGRAM_EXPORT_FORMATS`, `DIAGRAM_EXPORT_FILE_EXTENSIONS` and the `DiagramExportFormat` type. They are pure functions with no React or DOM use; the same `DisplaySubjectArea` gives the same text everywhere ERD Studio exports it.
+The `.` entry re-exports `@erd-studio/core`'s exporters, so a page that shows a diagram with `ErdCanvas` can offer it as text without depending on core itself: `toMermaid`, `toDbml`, `toDbmlRich`, `DBML_RICH_EXPORT_HEADER`, `exportDiagram`, `diagramExportFileName`, `DIAGRAM_EXPORT_FORMATS`, `DIAGRAM_EXPORT_FILE_EXTENSIONS` and the `DiagramExportFormat` and `DbmlRichOptions` types. Rich DBML is one file per diagram: its Project carries the table positions in `erd_layout`. The exporters are pure functions with no React or DOM use; the same `DisplaySubjectArea` gives the same text everywhere ERD Studio exports it.
 
 ```ts
 import { exportDiagram, diagramExportFileName, type DisplaySubjectArea } from '@erd-studio/renderer';

package/dist/{chunk-DUQ2TTQH.js → chunk-64BVOHOR.js}

@@ -1,6 +1,6 @@
 import {
   useEditorStore
-} from "./chunk-WOTSQZCQ.js";
+} from "./chunk-YLXBIRPE.js";
 
 // src/hooks/useColumnExpansion.ts
 import { useCallback } from "react";
@@ -65,8 +65,9 @@ var WIDTH_SAFETY_MARGIN = 24;
 var MIN_NODE_WIDTH = 220;
 var MAX_NODE_WIDTH = 560;
 function estimateNodeWidth(data) {
-  const { modelName, label, columns, provenance } = data;
-  const headerWidth = HEADER_PADDING + (label ? label.length * CHAR_WIDTH_BODY + ID_GAP + modelName.length * CHAR_WIDTH_ID : modelName.length * CHAR_WIDTH_BODY) + LAYER_BADGE_WIDTH + (provenance ? SOURCE_BADGE_WIDTH : 0);
+  const { modelName, label, columns, provenance, shownSchema, alias, singleLayer } = data;
+  const nameWidth = shownSchema || alias ? ((shownSchema ? shownSchema.length + 1 : 0) + modelName.length) * CHAR_WIDTH_BODY + (alias ? ID_GAP + (alias.length + 3) * CHAR_WIDTH_ID : 0) : label ? label.length * CHAR_WIDTH_BODY + ID_GAP + modelName.length * CHAR_WIDTH_ID : modelName.length * CHAR_WIDTH_BODY;
+  const headerWidth = HEADER_PADDING + nameWidth + (singleLayer ? 0 : LAYER_BADGE_WIDTH) + (provenance ? SOURCE_BADGE_WIDTH : 0);
   let maxColWidth = 0;
   for (const col of columns) {
     const keyBadges = (col.isPrimaryKey ? 1 : 0) + (col.isForeignKey ? 1 : 0) + (col.isNaturalKey ? 1 : 0);