@erd-studio/renderer 0.1.0 → 0.1.2

package/dist/{chunk-HOQPSLHQ.js → chunk-DUQ2TTQH.js}

@@ -57,14 +57,16 @@ var COL_ROW_PADDING = 20;
 var COL_ROW_GAPS = 46;
 var EXTRA_BADGE_WIDTH = 30;
 var HEADER_PADDING = 20;
+var CHAR_WIDTH_ID = 6;
+var ID_GAP = 8;
 var LAYER_BADGE_WIDTH = 36;
 var SOURCE_BADGE_WIDTH = 30;
 var WIDTH_SAFETY_MARGIN = 24;
 var MIN_NODE_WIDTH = 220;
 var MAX_NODE_WIDTH = 560;
 function estimateNodeWidth(data) {
-  const { modelName, columns, provenance } = data;
-  const headerWidth = HEADER_PADDING + modelName.length * CHAR_WIDTH_BODY + LAYER_BADGE_WIDTH + (provenance ? SOURCE_BADGE_WIDTH : 0);
+  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);
   let maxColWidth = 0;
   for (const col of columns) {
     const keyBadges = (col.isPrimaryKey ? 1 : 0) + (col.isForeignKey ? 1 : 0) + (col.isNaturalKey ? 1 : 0);

package/dist/editor.js

@@ -28,8 +28,10 @@ import {
   applyNodeOverlays,
   canvasEdgeTypes,
   canvasNodeTypes,
+  computeModelLabels,
   edgeHoverText,
   getDataTypeColor,
+  matchesModelSearch,
   nodeRect,
   pickHandleSides,
   repickHandleSides,
@@ -43,7 +45,7 @@ import {
   useIsViewer,
   useLongPressDrag,
   useSend
-} from "./chunk-3PJCC7BX.js";
+} from "./chunk-5OQLRX7R.js";
 import "./chunk-QZGU5NZH.js";
 import "./chunk-6XQXDZ4R.js";
 import {
@@ -55,7 +57,7 @@ import {
   estimateNodeWidth,
   resolveNodeDimensions,
   useColumnExpansion
-} from "./chunk-HOQPSLHQ.js";
+} from "./chunk-DUQ2TTQH.js";
 import {
   CanvasStoreProvider,
   createCanvasSlice,
@@ -97,6 +99,7 @@ export {
   applyNodeOverlays,
   canvasEdgeTypes,
   canvasNodeTypes,
+  computeModelLabels,
   countVisibleColumnRows,
   createCanvasSlice,
   createCanvasStore,
@@ -104,6 +107,7 @@ export {
   estimateNodeHeight,
   estimateNodeWidth,
   getDataTypeColor,
+  matchesModelSearch,
   nodeRect,
   pickHandleSides,
   repickHandleSides,

package/dist/index.js

@@ -4,8 +4,8 @@ import {
   pickHandleSides,
   repickHandleSides,
   transformDomain
-} from "./chunk-3PJCC7BX.js";
-import "./chunk-HOQPSLHQ.js";
+} from "./chunk-5OQLRX7R.js";
+import "./chunk-DUQ2TTQH.js";
 import "./chunk-WOTSQZCQ.js";
 export {
   ErdCanvas,

package/dist/sizing.js

@@ -5,7 +5,7 @@ import {
   estimateNodeHeight,
   estimateNodeWidth,
   resolveNodeDimensions
-} from "./chunk-HOQPSLHQ.js";
+} from "./chunk-DUQ2TTQH.js";
 import "./chunk-WOTSQZCQ.js";
 export {
   NODE_WIDTH,

package/dist/styles.css

@@ -219,6 +219,30 @@
 .column-tooltip__value {
   font-size: 13px;
 }
+.column-tooltip__meta {
+  padding-top: 6px;
+  border-top: 1px solid var(--vscode-editorHoverWidget-border, var(--panel-border, #454545));
+  display: grid;
+  grid-template-columns: minmax(52px, max-content) minmax(0, 1fr);
+  column-gap: 10px;
+  row-gap: 4px;
+}
+.column-tooltip__meta > .column-tooltip__label {
+  grid-column: 1 / -1;
+}
+.column-tooltip__meta .column-tooltip__row {
+  display: contents;
+}
+.column-tooltip__details + .column-tooltip__meta {
+  margin-top: 6px;
+}
+.column-tooltip__meta-key {
+  max-width: 190px;
+  overflow-wrap: break-word;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground, #888);
+}
 
 /* src/components/Graph/HoverTip.css */
 .hover-tip {
@@ -242,6 +266,24 @@
 .hover-tip--visible {
   opacity: 1;
 }
+.hover-tip__rows {
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--vscode-editorHoverWidget-border, var(--panel-border, #454545));
+  display: grid;
+  grid-template-columns: minmax(52px, max-content) minmax(0, 1fr);
+  column-gap: 10px;
+  row-gap: 3px;
+}
+.hover-tip__row {
+  display: contents;
+}
+.hover-tip__label {
+  max-width: 190px;
+  overflow-wrap: break-word;
+  font-family: var(--vscode-editor-font-family, monospace);
+  color: var(--vscode-descriptionForeground, #888);
+}
 
 /* src/components/Graph/ModelNode.css */
 .model-node {
@@ -306,6 +348,13 @@
   flex: 1;
   white-space: nowrap;
 }
+.model-node__model-id {
+  margin-left: 8px;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 10px;
+  font-weight: 400;
+  color: var(--dim-fg);
+}
 .model-node__badge {
   flex-shrink: 0;
   padding: 1px 5px;
@@ -634,6 +683,36 @@
   font-style: italic;
   text-align: center;
 }
+.model-node__load-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: var(--warning-bg);
+  color: var(--warning-fg);
+  text-align: center;
+}
+.model-node__load-error-text {
+  font-size: 11px;
+  line-height: 1.4;
+}
+.model-node__load-error-open {
+  padding: 2px 10px;
+  border: none;
+  border-radius: 3px;
+  background: var(--button-bg);
+  color: var(--button-fg);
+  font-size: 11px;
+  cursor: pointer;
+}
+.model-node__load-error-open:hover {
+  background: var(--button-hover-bg);
+}
+.model-node__load-error-open:focus-visible {
+  outline: 1px solid var(--focus-border);
+  outline-offset: 1px;
+}
 .model-node__expand-button {
   display: block;
   width: 100%;
@@ -2046,6 +2125,45 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
 .detail-panel__label--wide {
   min-width: 84px;
 }
+.detail-panel__value--muted {
+  color: var(--dim-fg);
+}
+.detail-panel__metadata-row--alias .detail-panel__alias-edit-btn {
+  width: 18px;
+  height: 18px;
+  font-size: 11px;
+}
+.detail-panel__metadata-row--alias:hover .detail-panel__alias-edit-btn {
+  opacity: 1;
+}
+.detail-panel__alias-edit {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+.detail-panel__alias-input {
+  padding: 2px 6px;
+  font-family: var(--vscode-editor-font-family, monospace);
+  font-size: 11px;
+  color: var(--input-fg, var(--editor-fg));
+  background: var(--input-bg);
+  border: 1px solid var(--focus-border);
+  border-radius: 3px;
+  outline: none;
+}
+.detail-panel__alias-input--error {
+  border-color: var(--error-fg);
+}
+.detail-panel__alias-hint {
+  font-size: 10px;
+  line-height: 1.3;
+  color: var(--dim-fg);
+}
+.detail-panel__alias-hint--error {
+  color: var(--error-fg);
+}
 .detail-panel__value--provenance {
   font-family: inherit;
   color: var(--dim-fg);
@@ -2559,6 +2677,122 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
 .detail-panel__grain-section:hover .detail-panel__rationale-edit-btn {
   opacity: 1;
 }
+.meta-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.meta-editor__title {
+  margin: 0;
+}
+.meta-editor__label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--vscode-descriptionForeground, #888);
+}
+.meta-editor__list {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.meta-editor__row {
+  display: grid;
+  grid-template-columns: minmax(70px, 35%) 1fr auto;
+  align-items: baseline;
+  gap: 8px;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+.meta-editor__row:hover {
+  background: var(--input-bg);
+}
+.meta-editor__key {
+  font-family: var(--vscode-editor-font-family);
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground, #888);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.meta-editor__value {
+  margin: 0;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--editor-fg);
+}
+.meta-editor__text {
+  overflow-wrap: anywhere;
+}
+.meta-editor__text--structured {
+  font-family: var(--vscode-editor-font-family);
+  font-size: 11px;
+  color: var(--dim-fg);
+}
+.meta-editor__actions {
+  display: flex;
+  gap: 2px;
+  visibility: hidden;
+}
+.meta-editor__row:hover .meta-editor__actions,
+.meta-editor__row:focus-within .meta-editor__actions {
+  visibility: visible;
+}
+.meta-editor__icon-btn {
+  border: none;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  padding: 1px 3px;
+}
+.meta-editor__icon-btn:hover,
+.meta-editor__icon-btn:focus-visible {
+  color: var(--editor-fg);
+}
+.meta-editor__input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 3px 6px;
+  border: 1px solid var(--panel-border);
+  border-radius: 3px;
+  background: var(--input-bg);
+  color: var(--input-fg);
+  font-size: 12px;
+}
+.meta-editor__input:focus {
+  outline: none;
+  border-color: var(--focus-border);
+}
+.meta-editor__input--key {
+  font-family: var(--vscode-editor-font-family);
+}
+.meta-editor__new {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.meta-editor__new-actions {
+  display: flex;
+  gap: 6px;
+}
+.meta-editor__error {
+  font-size: 11px;
+  color: var(--error-fg);
+}
+.meta-editor__add-btn {
+  align-self: flex-start;
+}
+.meta-editor--compact {
+  margin-top: 6px;
+  gap: 4px;
+}
+.meta-editor--compact .meta-editor__add-btn {
+  padding: 3px 8px;
+  font-size: 10px;
+}
 
 /* src/components/Legend/Legend.css */
 .legend-toggle {

package/dist/types/components/DetailPanel/AliasEditor.d.ts

@@ -0,0 +1,19 @@
+/**
+ * AliasEditor — the "Table name" row of the detail panel's metadata.
+ *
+ * A model's name is its identity; its alias is the table dbt builds it as.
+ * Setting one is how two layers can each have a `date` table: the models are
+ * `silver_date` and `gold_date`, both with the alias `date`.
+ *
+ * Read mode shows the table name (the model name, dimmed, when there is no
+ * alias). Edit mode is a single input: Enter saves, Escape cancels, and an
+ * empty value clears the alias.
+ */
+interface AliasEditorProps {
+    modelName: string;
+    alias?: string;
+    /** Physical stage and the viewer: show the value, offer no edit. */
+    readOnly: boolean;
+}
+export declare function AliasEditor({ modelName, alias, readOnly }: AliasEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/DetailPanel/MetaEditor.d.ts

@@ -0,0 +1,21 @@
+/**
+ * MetaEditor — the structured metadata (`meta:`) of a model or a column.
+ *
+ * Top-level text values are edited in place; a nested map, a list, `true` /
+ * `false` or an empty value is shown as it is and edited in the model file,
+ * so the canvas never rewrites a value it cannot represent. Every change is
+ * posted as an `updateMeta` patch (set or remove one key), never the whole map.
+ */
+import type { Meta } from '@erd-studio/core';
+import { formatMetaValue } from '../../lib/metaFormat.js';
+export { formatMetaValue };
+interface MetaEditorProps {
+    modelName: string;
+    /** Edit this column's `meta` instead of the model's. */
+    columnName?: string;
+    meta?: Meta;
+    readOnly?: boolean;
+    /** Smaller layout for a column row. */
+    compact?: boolean;
+}
+export declare function MetaEditor({ modelName, columnName, meta, readOnly, compact }: MetaEditorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/components/Graph/HoverTip.d.ts

@@ -14,12 +14,15 @@
  * a callback ref rather than in an effect that would re-render.
  */
 import './HoverTip.css';
+/** Label/value pairs shown under the text, e.g. a model's `meta:` entries. */
+export type HoverTipRows = ReadonlyArray<readonly [string, string]>;
 interface HoverTipProps {
     text: string;
+    rows?: HoverTipRows;
     anchorRef: React.RefObject<HTMLElement | null>;
     visible: boolean;
 }
-export declare function HoverTip({ text, anchorRef, visible }: HoverTipProps): import("react").ReactPortal | null;
+export declare function HoverTip({ text, rows, anchorRef, visible }: HoverTipProps): import("react").ReactPortal | null;
 export interface UseHoverTipReturn<T extends HTMLElement> {
     /**
      * Spread onto the element the tip describes.
@@ -40,8 +43,8 @@ export interface UseHoverTipReturn<T extends HTMLElement> {
 /**
  * Attach a hover tip to one element.
  *
- * `aria-label` carries the same text, so the explanation is not lost to a
- * screen reader that will never fire a mouseenter.
+ * `aria-label` carries the same text (and rows), so the explanation is not
+ * lost to a screen reader that will never fire a mouseenter.
  */
-export declare function useHoverTip<T extends HTMLElement = HTMLElement>(text: string): UseHoverTipReturn<T>;
+export declare function useHoverTip<T extends HTMLElement = HTMLElement>(text: string, rows?: HoverTipRows): UseHoverTipReturn<T>;
 export {};

package/dist/types/components/common/ColumnRowEditor.d.ts

@@ -71,5 +71,7 @@ export interface ColumnRowEditorProps {
     onSelect?: (e: React.MouseEvent) => void;
     /** Whether the store says this column should enter edit mode (F2). */
     isEditingActive?: boolean;
+    /** Rendered at the foot of the expanded area — the column's metadata editor. */
+    metaSlot?: React.ReactNode;
 }
-export declare function ColumnRowEditor({ column, mode, existingColumnNames, onUpdate, onDelete, onCancel, showIndicators, showDelete, onTogglePK, onToggleFK, onToggleNK, showMultiplePKWarning, modelRole, expanded, onToggleExpand, dragHandleProps, isDragOver, isBeingDragged, isSelected, onSelect, isEditingActive, }: ColumnRowEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnRowEditor({ column, mode, existingColumnNames, onUpdate, onDelete, onCancel, showIndicators, showDelete, onTogglePK, onToggleFK, onToggleNK, showMultiplePKWarning, modelRole, expanded, onToggleExpand, dragHandleProps, isDragOver, isBeingDragged, isSelected, onSelect, isEditingActive, metaSlot, }: ColumnRowEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/editor.d.ts

@@ -24,4 +24,5 @@ export * from './lib/stageColors.js';
 export * from './lib/dataTypeColors.js';
 export * from './lib/badgeLabels.js';
 export { swapCardinality } from './lib/cardinalityUtils.js';
+export { computeModelLabels, matchesModelSearch, type LabelledModel } from './lib/modelLabels.js';
 export { ANNOTATION_COLORS } from './lib/annotationColors.js';

package/dist/types/lib/metaFormat.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Plain-text rendering of a `meta` map for the canvas hover tips. The value
+ * formatter itself is core's, shared with the Detail panel and the CLI.
+ */
+import { formatMetaValue, type Meta } from '@erd-studio/core';
+export { formatMetaValue };
+/** `[key, text]` pairs in file order; empty for a missing or empty map. */
+export declare function metaRows(meta: Meta | undefined): [string, string][];

package/dist/types/lib/modelLabels.d.ts

@@ -0,0 +1,26 @@
+/**
+ * What a model node's header says.
+ *
+ * A model's NAME is its identity (domain files, relationships, positions); its
+ * LABEL is what a person reads. They differ when the model sets an `alias` —
+ * the table name dbt builds it as — which is how `silver_date` and `gold_date`
+ * can both be the table `date`. Two models on one canvas that would read the
+ * same are told apart by schema (`silver.date`, `gold.date`).
+ */
+/** The fields a label is computed from. */
+export interface LabelledModel {
+    name: string;
+    schema?: string;
+    alias?: string;
+}
+/**
+ * Header label per model name, for the models whose label differs from their
+ * name. A model absent from the map is labelled with its name, exactly as
+ * before aliases existed.
+ */
+export declare function computeModelLabels(models: readonly LabelledModel[]): Map<string, string>;
+/** Whether a search query (already lower-cased) matches a model by name or label. */
+export declare function matchesModelSearch(data: {
+    modelName: string;
+    label?: string;
+}, query: string): boolean;

package/dist/types/lib/nodeSizing.d.ts

@@ -47,4 +47,4 @@ export declare function resolveNodeDimensions(node: Pick<ModelFlowNode, 'data' |
  * slightly more space than the minimum estimate, preventing overlap
  * when font rendering or badge widths differ from the approximation.
  */
-export declare function estimateNodeWidth(data: Pick<ModelNodeData, 'modelName' | 'columns' | 'provenance'>): number;
+export declare function estimateNodeWidth(data: Pick<ModelNodeData, 'modelName' | 'label' | 'columns' | 'provenance'>): number;

package/dist/types/types/graph.d.ts

@@ -6,7 +6,7 @@
  * these shapes.
  */
 import type { Node, Edge } from '@xyflow/react';
-import type { AnnotationColor, Cardinality, Layer, ModelRole, Stage } from '@erd-studio/core';
+import type { AnnotationColor, Cardinality, Layer, Meta, ModelLoadError, ModelRole, Stage } from '@erd-studio/core';
 import type { LayerConfig } from '@erd-studio/core';
 import type { ModelDiscrepancy } from '@erd-studio/core';
 import type { PhysicalProvenance } from '@erd-studio/core';
@@ -25,11 +25,19 @@ export interface ColumnDisplay {
     scdType?: 0 | 1 | 2;
     /** Additive type for fact measure columns. */
     additiveType?: 'additive' | 'semi-additive' | 'non-additive';
+    /** Structured metadata (`meta:`) — shown in the tooltip. Absent when empty. */
+    meta?: Meta;
 }
 /** Data payload for a ModelNode React Flow node. */
 export type ModelNodeData = {
     /** Model name (unique within a domain). */
     modelName: string;
+    /**
+     * Header label when it differs from `modelName`: the model's table name
+     * (`alias`), qualified by schema when another model on the canvas would read
+     * the same. See `computeModelLabels`.
+     */
+    label?: string;
     /** The active design stage. */
     stage: Stage;
     /** Data warehouse layer. */
@@ -56,6 +64,8 @@ export type ModelNodeData = {
     grain?: string;
     /** Model's role in the data warehouse architecture. Shown as badge on node. */
     modelRole?: ModelRole;
+    /** Structured metadata (`meta:`) — shown in the name's hover tip. Absent when empty. */
+    meta?: Meta;
     /** Whether this stage is read-only (physical). */
     readOnly?: boolean;
     /**
@@ -77,6 +87,11 @@ export type ModelNodeData = {
      * off the logical canvas without a stage check.
      */
     provenance?: PhysicalProvenance;
+    /**
+     * The model's file exists but could not be read (logical stage only): the
+     * node shows the error and an "Open file" button instead of "No columns".
+     */
+    loadError?: ModelLoadError;
     /** Whether this model is in stub display mode (PK/NK columns only). */
     isStub: boolean;
     /** Per-model discrepancy data when a cross-stage comparison report is active. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erd-studio/renderer",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "ERD Studio's React Flow canvas: the entity-relationship diagram renderer shared by the VS Code extension, with a read-only viewer mode.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -46,7 +46,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@erd-studio/core": "0.1.0",
+    "@erd-studio/core": "0.1.2",
     "zustand": "^5.0.0"
   },
   "peerDependencies": {