dbml-erd-viewer 0.1.0

package/dist/dbml-erd-viewer.umd.cjs

@@ -0,0 +1,2 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@xyflow/react"),require("@dbml/core"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@xyflow/react`,`@dbml/core`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.DbmlErdViewer={},e.React,e.XYFlowReact,e.DbmlCore,e.jsxRuntime))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};r=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(r,1);var f=r,p=f.Parser??f.default?.Parser;if(!p)throw Error("Could not resolve `Parser` export from @dbml/core.");var m=p,h=`public`,g=class extends Error{diagnostics;constructor(e,t){super(e,t),this.name=`DbmlParseError`,this.diagnostics=t?.diagnostics??[]}};function _(e){let t=e?.diags;return Array.isArray(t)?t.map(e=>({message:e.message??`Unknown error`,line:e.location?.start?.line,column:e.location?.start?.column,code:e.code})):[]}function v(e,t){if(e.length===0)return`Failed to parse DBML: ${t}`;let n=e.map(e=>`  • ${e.line==null?``:`Line ${e.line}${e.column==null?``:`:${e.column}`} — `}${e.message}`);return`${e.length===1?`Failed to parse DBML:`:`Failed to parse DBML (${e.length} errors):`}\n${n.join(`
+`)}`}function y(e){if(e)return typeof e==`string`?e:e.value??void 0}function b(e,t){return e&&e!==h?`${e}.${t}`:t}function x(e){let t=new Set;for(let n of e.fields)n.pk&&t.add(n.name);for(let n of e.indexes??[])if(n.pk)for(let e of n.columns??[])e.type===`column`&&e.value&&t.add(e.value);return t}function S(e){let t;try{t=new m().parse(e,`dbmlv2`)}catch(e){let t=_(e);throw new g(v(t,e instanceof Error?e.message:String(e)),{cause:e,diagnostics:t})}let n=new Map;for(let e of t.schemas)for(let t of e.tables){let r=b(e.name,t.name),i=x(t),a=new Map;for(let e of t.fields){let t=i.has(e.name);a.set(e.name,{pk:t,notNull:t||!!e.not_null,note:y(e.note)})}n.set(r,a)}let r=e=>{let t=n.get(e.tableId);return!t||e.columns.length===0?!1:e.columns.every(e=>t.get(e)?.pk===!0)},i=e=>e.columns.some(t=>{let r=n.get(e.tableId)?.get(t);return r?!r.notNull&&!r.pk:!0}),a=e=>e.columns.some(t=>n.get(e.tableId)?.get(t)?.note?.toLowerCase().includes(`optional`)??!1),o=[],s=new Set;for(let e of t.schemas)for(let t of e.refs){if(t.endpoints.length!==2)continue;let[n,c]=t.endpoints.map(t=>({tableId:b(t.schemaName??e.name,t.tableName),columns:t.fieldNames,relation:t.relation})),l,u,d=n.relation===`*`;if(d!==(c.relation===`*`))l=d?n:c,u=d?c:n;else{let e=r(n),t=r(c);e&&!t?(l=c,u=n):(l=n,u=c)}let f=r(l),p=i(l);l.columns.forEach(e=>s.add(`${l.tableId}::${e}`)),o.push({id:`${l.tableId}.${l.columns.join(`-`)}__${u.tableId}.${u.columns.join(`-`)}`,kind:f?`identifying`:`non-identifying`,from:{...l,optional:a(l)?!0:void 0},to:{...u,optional:p}})}let c=[];for(let e of t.schemas){let t=e.name;for(let n of e.tables){let e=b(t,n.name),r=x(n),i=n.fields.map(t=>({name:t.name,type:t.type?.type_name??`unknown`,pk:r.has(t.name),notNull:r.has(t.name)||!!t.not_null,unique:!!t.unique,increment:!!t.increment,defaultValue:t.dbdefault?.value,note:y(t.note),isForeignKey:s.has(`${e}::${t.name}`)}));c.push({id:e,name:n.name,schema:t===h?void 0:t,note:y(n.note),headerColor:n.headerColor??void 0,columns:i})}}return{tables:c,relations:o}}var C=240,w=40,T=28;function E(e){return 40+Math.max(e.columns.length,1)*28}function D(e){let t=new Map;for(let n of e.tables)t.set(n.id,0);let n=e.relations.map(e=>[e.from.tableId,e.to.tableId]).filter(([e,n])=>e!==n&&t.has(e)&&t.has(n));for(let r=0;r<e.tables.length;r++){let e=!1;for(let[r,i]of n){let n=t.get(r)+1;t.get(i)<n&&(t.set(i,n),e=!0)}if(!e)break}return t}function O(e,t={}){let n=t.horizontalGap??120,r=t.verticalGap??40,i=D(e),a=new Map;for(let t of e.tables){let e=i.get(t.id)??0,n=a.get(e);n||(n=[],a.set(e,n)),n.push(t)}let o=new Map;return[...a.keys()].sort((e,t)=>e-t).forEach((e,t)=>{let i=a.get(e).sort((e,t)=>e.name.localeCompare(t.name)),s=t*(240+n),c=0;for(let e of i){let t=E(e);o.set(e.id,{x:s,y:c,width:240,height:t}),c+=t+r}}),o}async function k(e,t={}){let n=await import(`@dagrejs/dagre`),r=t.horizontalGap??120,i=t.verticalGap??40,a=t.direction===`TB`?`TB`:`LR`,o=new n.graphlib.Graph;o.setGraph({rankdir:a,ranksep:r,nodesep:i}),o.setDefaultEdgeLabel(()=>({}));for(let t of e.tables)o.setNode(t.id,{width:240,height:E(t)});for(let t of e.relations)o.hasNode(t.from.tableId)&&o.hasNode(t.to.tableId)&&o.setEdge(t.from.tableId,t.to.tableId);n.layout(o);let s=new Map;for(let e of o.nodes()){let t=o.node(e);t&&s.set(e,{x:t.x-t.width/2,y:t.y-t.height/2,width:t.width,height:t.height})}return s}async function A(e,t={}){let n=new(await(import(`elkjs/lib/elk.bundled.js`))).default,r=t.horizontalGap??120,i=t.verticalGap??40,a={id:`root`,layoutOptions:{"elk.algorithm":`layered`,"elk.direction":t.direction===`TB`?`DOWN`:`RIGHT`,"elk.layered.spacing.nodeNodeBetweenLayers":String(r),"elk.spacing.nodeNode":String(i)},children:e.tables.map(e=>({id:e.id,width:240,height:E(e)})),edges:e.relations.map((e,t)=>({id:`e${t}`,sources:[e.from.tableId],targets:[e.to.tableId]}))},o=await n.layout(a),s=new Map;for(let e of o.children??[])s.set(e.id,{x:e.x??0,y:e.y??0,width:e.width??240,height:e.height??0});return s}var j=class extends Error{constructor(e,t){super(e,t),this.name=`LayoutError`}};async function M(e,t={}){let n=t.algorithm??`simple`;if(n===`simple`)return O(e,t);try{return n===`dagre`?await k(e,t):await A(e,t)}catch(e){throw new j(`"${n}" layout failed. Is the optional dependency "${n===`dagre`?`@dagrejs/dagre`:`elkjs`}" installed? (${e instanceof Error?e.message:String(e)})`,{cause:e})}}var N=[`--dv-canvas`,`--dv-bg`,`--dv-border`,`--dv-header-bg`,`--dv-header-fg`,`--dv-row-fg`,`--dv-type-fg`,`--dv-row-hover`,`--dv-row-highlight`,`--dv-pk`,`--dv-fk`,`--dv-null`,`--dv-edge`,`--dv-edge-active`,`--dv-font`],P=class extends Error{constructor(e,t){super(e,t),this.name=`ExportError`}};function F(e,t){let n=e.x,r=e.y,i=e.x+e.width,a=e.y+e.height;for(let e of t.querySelectorAll(`.dv-erd-edge`)){let t;try{t=e.getBBox()}catch{continue}t.width===0&&t.height===0||(n=Math.min(n,t.x),r=Math.min(r,t.y),i=Math.max(i,t.x+t.width),a=Math.max(a,t.y+t.height))}return{x:n,y:r,width:i-n,height:a-r}}async function I(e,t,n={}){let{type:r=`png`,padding:i=24,backgroundColor:a,pixelRatio:o=2}=n,s;try{s=await import(`html-to-image`)}catch(e){throw new P(`Export requires the optional dependency "html-to-image". Install it to enable PNG/SVG export.`,{cause:e})}if(typeof document<`u`&&document.fonts?.ready)try{await document.fonts.ready}catch{}let c=Math.ceil(t.width+i*2),l=Math.ceil(t.height+i*2),u=`translate(${-t.x+i}px, ${-t.y+i}px) scale(1)`,d={width:c,height:l,backgroundColor:a,style:{width:`${c}px`,height:`${l}px`,transform:u}},f=L(e,t,i);try{return r===`svg`?await s.toSvg(e,d):await s.toPng(e,{...d,pixelRatio:o})}catch(e){throw new P(`Failed to render diagram image: ${e instanceof Error?e.message:String(e)}`,{cause:e})}finally{f()}}function L(e,t,n){let r=[],i=e.closest(`.dv-viewer`);if(i){let t=getComputedStyle(i);for(let n of N){let i=t.getPropertyValue(n);if(!i)continue;let a=e.style.getPropertyValue(n);e.style.setProperty(n,i),r.push(()=>{a?e.style.setProperty(n,a):e.style.removeProperty(n)})}}let a=`${Math.ceil(t.x+t.width+n)}px`,o=`${Math.ceil(t.y+t.height+n)}px`;for(let t of e.querySelectorAll(`.react-flow__edges svg`)){let{width:e,height:n}=t.style;t.style.width=a,t.style.height=o,r.push(()=>{t.style.width=e,t.style.height=n})}return()=>r.forEach(e=>e())}function R(e,t){let n=document.createElement(`a`);n.href=e,n.download=t,n.click()}function z(e,t,n){return`${e}__${t}__${n}`}function B(e){return 40+e*28+28/2}function V({column:e,top:t}){let r={top:t,opacity:0};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.Handle,{id:z(e,`left`,`target`),type:`target`,position:n.Position.Left,style:r,isConnectable:!1}),(0,i.jsx)(n.Handle,{id:z(e,`left`,`source`),type:`source`,position:n.Position.Left,style:r,isConnectable:!1}),(0,i.jsx)(n.Handle,{id:z(e,`right`,`target`),type:`target`,position:n.Position.Right,style:r,isConnectable:!1}),(0,i.jsx)(n.Handle,{id:z(e,`right`,`source`),type:`source`,position:n.Position.Right,style:r,isConnectable:!1})]})}function H({data:e}){let{table:t,highlightedColumns:n}=e;return(0,i.jsxs)(`div`,{className:`dv-table`,style:{width:240},children:[(0,i.jsxs)(`div`,{className:`dv-table__header`,style:t.headerColor?{background:t.headerColor,height:40}:{height:40},title:t.note,children:[t.schema&&(0,i.jsxs)(`span`,{className:`dv-table__schema`,children:[t.schema,`.`]}),(0,i.jsx)(`span`,{className:`dv-table__name`,children:t.name})]}),(0,i.jsx)(`div`,{className:`dv-table__body`,children:t.columns.map((e,t)=>{let r=n?.has(e.name);return(0,i.jsxs)(`div`,{className:`dv-row${r?` dv-row--highlighted`:``}`,style:{height:28},title:e.note,children:[(0,i.jsxs)(`span`,{className:`dv-row__name${e.pk?` dv-row__name--pk`:``}`,children:[e.pk&&(0,i.jsx)(`span`,{className:`dv-badge dv-badge--pk`,title:`Primary key`,children:`PK`}),e.isForeignKey&&!e.pk&&(0,i.jsx)(`span`,{className:`dv-badge dv-badge--fk`,title:`Foreign key`,children:`FK`}),e.name]}),(0,i.jsxs)(`span`,{className:`dv-row__type`,children:[e.type,(0,i.jsx)(`span`,{className:`dv-row__null${e.notNull?` dv-row__null--notnull`:``}`,title:e.notNull?`Not null`:`Nullable`})]}),(0,i.jsx)(V,{column:e.name,top:B(t)})]},e.name)})})]})}var U=(0,t.memo)(H),W=8,G=13,K=7,q=13,J=16;function Y(e,t,r,a,o,s){let c=-(r===n.Position.Left?1:-1),l=[],u={stroke:o,strokeWidth:s},d=(n,r)=>l.push((0,i.jsx)(`line`,{x1:e+c*n,y1:t-W,x2:e+c*n,y2:t+W,style:u},r)),f=(n,r)=>l.push((0,i.jsx)(`circle`,{cx:e+c*n,cy:t,r:4,style:{stroke:o,strokeWidth:s,fill:`var(--dv-bg)`}},r));if(a.cardinality===`*`){let n=e+c*G;l.push((0,i.jsx)(`line`,{x1:n,y1:t,x2:e,y2:t-W,style:u},`cf1`),(0,i.jsx)(`line`,{x1:n,y1:t,x2:e,y2:t,style:u},`cf2`),(0,i.jsx)(`line`,{x1:n,y1:t,x2:e,y2:t+W,style:u},`cf3`)),a.optional===!0?f(17,`fr`):d(14,`fb`)}else d(K,`b1`),a.optional===!0?f(J,`r`):a.optional===!1&&d(q,`b2`);return(0,i.jsx)(`g`,{className:`dv-erd-marker`,children:l})}function X({sourceX:e,sourceY:t,targetX:r,targetY:a,sourcePosition:o,targetPosition:s,data:c,selected:l}){let[u]=(0,n.getSmoothStepPath)({sourceX:e,sourceY:t,sourcePosition:o,targetX:r,targetY:a,targetPosition:s,borderRadius:8}),d=c,f=d?.kind===`non-identifying`,p=l||d?.hovered,m=p?`var(--dv-edge-active)`:`var(--dv-edge)`,h=p?2:1.5;return(0,i.jsxs)(`g`,{className:`dv-erd-edge${p?` dv-erd-edge--active`:``}`,children:[(0,i.jsx)(`path`,{className:`dv-erd-edge__interaction`,d:u,fill:`none`}),(0,i.jsx)(`path`,{className:`dv-erd-edge__path`,d:u,fill:`none`,style:{stroke:m,strokeWidth:h},strokeDasharray:f?`6 4`:void 0}),d&&Y(e,t,o,d.sourceEnd,m,h),d&&Y(r,a,s,d.targetEnd,m,h)]})}var Z=(0,t.memo)(X);function ee(e,n,r){let[i,a]=(0,t.useState)(null),o=(0,t.useMemo)(()=>{let t=new Map;for(let n of e)t.set(n.id,n);return t},[e]),s=(0,t.useMemo)(()=>{let e=new Map,t=i?o.get(i):void 0;if(!t)return e;for(let n of[t.from,t.to]){let t=e.get(n.tableId)??new Set;n.columns.forEach(e=>t.add(e)),e.set(n.tableId,t)}return e},[i,o]);return{displayNodes:(0,t.useMemo)(()=>i?n.map(e=>{let t=s.get(e.id);return t?{...e,data:{...e.data,highlightedColumns:t}}:e}):n,[n,i,s]),displayEdges:(0,t.useMemo)(()=>i?r.map(e=>e.id===i?{...e,data:{...e.data,hovered:!0},zIndex:1}:e):r,[r,i]),onEdgeMouseEnter:(0,t.useCallback)((e,t)=>a(t.id),[]),onEdgeMouseLeave:(0,t.useCallback)(()=>a(null),[])}}var te={canvas:`--dv-canvas`,background:`--dv-bg`,border:`--dv-border`,headerBackground:`--dv-header-bg`,headerForeground:`--dv-header-fg`,rowForeground:`--dv-row-fg`,typeForeground:`--dv-type-fg`,rowHover:`--dv-row-hover`,rowHighlight:`--dv-row-highlight`,primaryKey:`--dv-pk`,foreignKey:`--dv-fk`,edge:`--dv-edge`,edgeActive:`--dv-edge-active`,fontFamily:`--dv-font`},ne={canvas:`#fafbfc`,background:`#ffffff`,border:`#d9dee5`,headerBackground:`#2d3748`,headerForeground:`#ffffff`,rowForeground:`#1a202c`,typeForeground:`#718096`,rowHover:`#f1f5f9`,rowHighlight:`#dbeafe`,primaryKey:`#b7791f`,foreignKey:`#2b6cb0`,edge:`#94a3b8`,edgeActive:`#2b6cb0`},re={canvas:`#0f172a`,background:`#1e293b`,border:`#334155`,headerBackground:`#334155`,headerForeground:`#f1f5f9`,rowForeground:`#e2e8f0`,typeForeground:`#94a3b8`,rowHover:`#334155`,rowHighlight:`#1e3a5f`,primaryKey:`#d69e2e`,foreignKey:`#4299e1`,edge:`#64748b`,edgeActive:`#60a5fa`};function Q(e){if(!e)return{};let t={};for(let n of Object.keys(e)){let r=e[n];r!=null&&(t[te[n]]=r)}return t}var ie=[],ae={table:U},oe={erd:Z};function se(){return(0,i.jsxs)(`svg`,{viewBox:`0 0 24 24`,width:`100%`,height:`100%`,fill:`currentColor`,"aria-hidden":`true`,children:[(0,i.jsx)(`rect`,{x:`3`,y:`3`,width:`8`,height:`8`,rx:`1.5`}),(0,i.jsx)(`rect`,{x:`13`,y:`3`,width:`8`,height:`8`,rx:`1.5`}),(0,i.jsx)(`rect`,{x:`3`,y:`13`,width:`8`,height:`8`,rx:`1.5`}),(0,i.jsx)(`rect`,{x:`13`,y:`13`,width:`8`,height:`8`,rx:`1.5`})]})}function ce(e,t,n,r){let i=new Map;for(let a of e.tables){let e=t.get(a.id);i.set(a.id,n?.[a.id]??r?.get(a.id)??{x:e?.x??0,y:e?.y??0})}return i}function le(e,t){if(e.length!==t.length)return!1;let n=new Set(e);return t.every(e=>n.has(e))}async function $(e,t,n){try{return await M(e,t)}catch(r){return n(r instanceof j?r:new j(String(r),{cause:r})),O(e,t)}}function ue(e,t){return e.tables.map(e=>({id:e.id,type:`table`,position:t.get(e.id)??{x:0,y:0},data:{table:e}}))}function de(e,t){return e.relations.map(e=>{let n=t.get(e.from.tableId),r=t.get(e.to.tableId),i=(n?.x??0)>(r?.x??0),a=i?`left`:`right`,o=i?`right`:`left`,s=e.from.columns[0]??``,c=e.to.columns[0]??``;return{id:e.id,source:e.from.tableId,target:e.to.tableId,sourceHandle:z(s,a,`source`),targetHandle:z(c,o,`target`),type:`erd`,data:{kind:e.kind,sourceEnd:{cardinality:e.from.relation,optional:e.from.optional},targetEnd:{cardinality:e.to.relation,optional:e.to.optional}}}})}var fe=(0,t.forwardRef)(function({dbml:e,className:r,style:a,theme:o,fitView:s=!0,showControls:c=!0,showMiniMap:l=!1,showBackground:u=!0,layoutOptions:d,onParseError:f,onLayoutError:p,nodePositions:m,onNodePositionsChange:h},_){let v=(0,t.useMemo)(()=>{try{return{ok:!0,schema:S(e)}}catch(e){return{ok:!1,error:e instanceof g?e:new g(String(e),{cause:e})}}},[e]),[y,b,x]=(0,n.useNodesState)([]),[C,w,T]=(0,n.useEdgesState)([]),E=(0,t.useRef)(null),D=(0,t.useRef)(null),O=(0,t.useRef)(y);O.current=y,(0,t.useImperativeHandle)(_,()=>{let e=async e=>{let t=E.current,r=D.current?.querySelector(`.react-flow__viewport`);if(!t||!r)throw new P(`The diagram is not ready to export yet.`);let i=F((0,n.getNodesBounds)(t.getNodes()),r),a=e?.backgroundColor??(D.current?getComputedStyle(D.current).backgroundColor:void 0);return I(r,i,{...e,backgroundColor:a})};return{toDataUrl:e,download:async(t,n)=>{R(await e(n),t)}}},[]);let k=(0,t.useRef)(p);k.current=p;let A=(0,t.useRef)(h);A.current=h;let j=(0,t.useRef)(m);j.current=m;let M=(0,t.useCallback)(()=>{let e=A.current;if(!e)return;let t={};for(let e of O.current)t[e.id]={x:e.position.x,y:e.position.y};e(t)},[]),{algorithm:N=`simple`,direction:L=`LR`,horizontalGap:z,verticalGap:B}=d??{},V=(0,t.useRef)(null),H=`${N}|${L}|${z}|${B}`,U=(0,t.useCallback)((e,t,n,r,i)=>{let a=ce(e,r,i.saved,i.prior);if(b(ue(e,a)),w(de(e,a)),V.current={ids:t,optionsKey:n},i.emit){let e={};a.forEach((t,n)=>{e[n]=t}),A.current?.(e)}i.fit&&requestAnimationFrame(()=>void E.current?.fitView())},[b,w]);(0,t.useEffect)(()=>{if(!v.ok){b([]),w([]),V.current=null;return}let e=v.schema,t={algorithm:N,direction:L,horizontalGap:z,verticalGap:B},n=e.tables.map(e=>e.id),r=new Map(O.current.map(e=>[e.id,{x:e.position.x,y:e.position.y}])),i=V.current,a=n.every(e=>r.has(e));if(i&&i.optionsKey===H&&a&&le(i.ids,n)){U(e,n,H,new Map,{prior:r});return}let o=i&&i.optionsKey===H?r:void 0,c=!1;return $(e,t,e=>k.current?.(e)).then(t=>{c||U(e,n,H,t,{saved:j.current,prior:o,fit:s})}),()=>{c=!0}},[v,N,L,z,B,H,s,U,b,w]);let W=(0,t.useCallback)(()=>{if(!v.ok)return;let e=v.schema,t={algorithm:N,direction:L,horizontalGap:z,verticalGap:B},n=e.tables.map(e=>e.id);$(e,t,e=>k.current?.(e)).then(t=>{U(e,n,H,t,{emit:!0,fit:!0})})},[v,N,L,z,B,H,U]),G=(0,t.useCallback)(()=>{v.ok||f?.(v.error)},[v,f]);(0,t.useEffect)(G,[G]);let{displayNodes:K,displayEdges:q,onEdgeMouseEnter:J,onEdgeMouseLeave:Y}=ee(v.ok?v.schema.relations:ie,y,C),X={width:`100%`,height:`100%`,...Q(o),...a};return v.ok?(0,i.jsx)(`div`,{ref:D,className:`dv-viewer${r?` ${r}`:``}`,style:X,children:(0,i.jsxs)(n.ReactFlow,{nodes:K,edges:q,nodeTypes:ae,edgeTypes:oe,onNodesChange:x,onEdgesChange:T,onEdgeMouseEnter:J,onEdgeMouseLeave:Y,onNodeDragStop:M,onInit:e=>{E.current=e},fitView:s,nodesConnectable:!1,elementsSelectable:!0,minZoom:.1,proOptions:{hideAttribution:!0},children:[u&&(0,i.jsx)(n.Background,{}),c&&(0,i.jsx)(n.Controls,{children:(0,i.jsx)(n.ControlButton,{onClick:W,title:`Auto layout`,"aria-label":`Auto layout`,children:(0,i.jsx)(se,{})})}),l&&(0,i.jsx)(n.MiniMap,{pannable:!0,zoomable:!0})]})}):(0,i.jsx)(`div`,{className:`dv-error${r?` ${r}`:``}`,style:X,children:(0,i.jsx)(`pre`,{className:`dv-error__message`,children:v.error.message})})});e.DbmlParseError=g,e.DbmlViewer=fe,e.ErdEdge=Z,e.ExportError=P,e.HEADER_HEIGHT=w,e.LayoutError=j,e.NODE_WIDTH=C,e.ROW_HEIGHT=T,e.TableNode=U,e.computeLayout=M,e.darkTheme=re,e.downloadDataUrl=R,e.layoutSchema=O,e.lightTheme=ne,e.parseDbml=S,e.renderDiagram=I,e.tableHeight=E,e.themeToCssVars=Q});

package/dist/index.d.ts

@@ -0,0 +1,367 @@
+import { CSSProperties } from 'react';
+import { EdgeProps } from '@xyflow/react';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX } from 'react';
+import { MemoExoticComponent } from 'react';
+import { Node as Node_2 } from '@xyflow/react';
+import { NodeProps } from '@xyflow/react';
+import { Rect } from '@xyflow/react';
+import { RefAttributes } from 'react';
+
+/** Cardinality of one side of a relation. `'1'` = one, `'*'` = many. */
+export declare type Cardinality = '1' | '*';
+
+/** A single column within a table. */
+export declare interface ColumnInfo {
+    /** Column name. */
+    name: string;
+    /** Data type as written in the DBML (e.g. `varchar`, `int`, `timestamp`). */
+    type: string;
+    /** Whether the column is part of the primary key. */
+    pk: boolean;
+    /** Whether the column is `not null`. */
+    notNull: boolean;
+    /** Whether the column has a unique constraint. */
+    unique: boolean;
+    /** Whether the column auto-increments. */
+    increment: boolean;
+    /** Default value, if any. */
+    defaultValue?: string | number | boolean | null;
+    /** Inline note/comment for the column. */
+    note?: string;
+    /** True when this column participates as an endpoint of a relation. */
+    isForeignKey: boolean;
+}
+
+/**
+ * Compute node positions using the requested algorithm. Always async so the three
+ * strategies share one interface (`'simple'` resolves synchronously under the hood).
+ *
+ * @throws {LayoutError} when `'dagre'`/`'elk'` fails — typically because the optional
+ *   dependency (`@dagrejs/dagre` / `elkjs`) is not installed.
+ */
+export declare function computeLayout(schema: ParsedSchema, options?: LayoutOptions): Promise<Map<string, NodeBox>>;
+
+/** Dark theme preset (neutral slate palette). Pass directly: `<DbmlViewer theme={darkTheme} />`. */
+export declare const darkTheme: DbmlViewerTheme;
+
+/** A single parse diagnostic (one syntax/semantic problem found in the DBML). */
+export declare interface DbmlDiagnostic {
+    /** Human-readable description of the problem. */
+    message: string;
+    /** 1-based line number, when the parser reported a location. */
+    line?: number;
+    /** 1-based column number, when the parser reported a location. */
+    column?: number;
+    /** Parser error code, when available. */
+    code?: string | number;
+}
+
+/**
+ * Thrown when DBML text cannot be parsed. `diagnostics` holds the structured problems
+ * (line/column/message) and the original parser error is attached as `cause`.
+ */
+export declare class DbmlParseError extends Error {
+    readonly diagnostics: DbmlDiagnostic[];
+    constructor(message: string, options?: {
+        cause?: unknown;
+        diagnostics?: DbmlDiagnostic[];
+    });
+}
+
+/**
+ * Render a DBML schema as an interactive diagram. Tables become draggable nodes and
+ * foreign-key relations become edges connecting the related columns.
+ *
+ * Pass a `ref` to access the imperative {@link DbmlViewerHandle} (image export).
+ */
+export declare const DbmlViewer: ForwardRefExoticComponent<DbmlViewerProps & RefAttributes<DbmlViewerHandle>>;
+
+/** Imperative handle exposed via `ref` for exporting the diagram as an image. */
+export declare interface DbmlViewerHandle {
+    /**
+     * Render the full diagram to an image data URL (`'png'` or `'svg'`).
+     * @throws {ExportError} when the optional `html-to-image` dependency is missing.
+     */
+    toDataUrl(options?: DiagramExportOptions): Promise<string>;
+    /** Render the diagram and trigger a browser download. */
+    download(filename: string, options?: DiagramExportOptions): Promise<void>;
+}
+
+export declare interface DbmlViewerProps {
+    /** DBML source text to render. */
+    dbml: string;
+    /** Class applied to the wrapping element. */
+    className?: string;
+    /** Inline style for the wrapping element. Defaults to filling its container. */
+    style?: CSSProperties;
+    /** Theme tokens applied as CSS variables on the viewer (partial overrides allowed). */
+    theme?: DbmlViewerTheme;
+    /** Fit the diagram into view on load. Default `true`. */
+    fitView?: boolean;
+    /** Show the zoom/pan controls. Default `true`. */
+    showControls?: boolean;
+    /** Show the minimap. Default `false`. */
+    showMiniMap?: boolean;
+    /** Show the dotted background. Default `true`. */
+    showBackground?: boolean;
+    /** Layout tuning: algorithm (`'simple'` | `'dagre'` | `'elk'`), direction, gaps. */
+    layoutOptions?: LayoutOptions;
+    /** Called when the DBML fails to parse. */
+    onParseError?: (error: DbmlParseError) => void;
+    /** Called when a non-default layout fails (e.g. optional dependency missing). */
+    onLayoutError?: (error: LayoutError) => void;
+    /**
+     * Saved table positions (`id → {x, y}`) to restore. Applied when the schema/layout
+     * (re)builds; tables without a saved position fall back to auto-layout. To return to a
+     * fresh auto-layout, pass `undefined`/`{}`.
+     */
+    nodePositions?: NodePositions;
+    /** Called after the user finishes dragging a table, with the full positions map to persist. */
+    onNodePositionsChange?: (positions: NodePositions) => void;
+}
+
+/**
+ * Theme tokens for {@link DbmlViewer}. Every field maps to a `--dv-*` CSS custom
+ * property scoped to the viewer, so a partial theme overrides only the keys you set.
+ * For finer control, target the `.dv-*` classes in your own stylesheet.
+ */
+export declare interface DbmlViewerTheme {
+    /** Diagram canvas (pane) background. → `--dv-canvas` */
+    canvas?: string;
+    /** Table body background. → `--dv-bg` */
+    background?: string;
+    /** Table and row borders. → `--dv-border` */
+    border?: string;
+    /** Table header background. → `--dv-header-bg` */
+    headerBackground?: string;
+    /** Table header text color. → `--dv-header-fg` */
+    headerForeground?: string;
+    /** Column name text color. → `--dv-row-fg` */
+    rowForeground?: string;
+    /** Column type text color. → `--dv-type-fg` */
+    typeForeground?: string;
+    /** Row background on hover. → `--dv-row-hover` */
+    rowHover?: string;
+    /** Row background when highlighted by a hovered relation. → `--dv-row-highlight` */
+    rowHighlight?: string;
+    /** Primary-key badge color. → `--dv-pk` */
+    primaryKey?: string;
+    /** Foreign-key badge color. → `--dv-fk` */
+    foreignKey?: string;
+    /** Relation edge color. → `--dv-edge` */
+    edge?: string;
+    /** Relation edge color when hovered/selected. → `--dv-edge-active` */
+    edgeActive?: string;
+    /** Font family for table contents. → `--dv-font` */
+    fontFamily?: string;
+}
+
+export declare interface DiagramExportOptions {
+    /** Output format. Default `'png'`. */
+    type?: ExportFormat;
+    /** Padding (px) around the diagram bounds. Default `24`. */
+    padding?: number;
+    /** Background color. Defaults to the viewer's current canvas color. */
+    backgroundColor?: string;
+    /** Device pixel ratio for PNG (higher = sharper). Default `2`. */
+    pixelRatio?: number;
+}
+
+/** Trigger a browser download of a data URL. */
+export declare function downloadDataUrl(dataUrl: string, filename: string): void;
+
+/** Cardinality + optionality of one rendered edge end. */
+export declare interface EdgeEndSpec {
+    cardinality: Cardinality;
+    /** `true` = optional, `false` = mandatory, `undefined` = unspecified (pure cardinality). */
+    optional?: boolean;
+}
+
+export declare const ErdEdge: MemoExoticComponent<typeof ErdEdgeComponent>;
+
+declare function ErdEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected, }: EdgeProps): JSX.Element;
+
+export declare interface ErdEdgeData {
+    kind: RelationKind;
+    /** Glyph at the source point. */
+    sourceEnd: EdgeEndSpec;
+    /** Glyph at the target point. */
+    targetEnd: EdgeEndSpec;
+    /** Set while the relation is hovered, to emphasize the edge. */
+    hovered?: boolean;
+    [key: string]: unknown;
+}
+
+/** Thrown when export fails — typically the optional `html-to-image` dependency is missing. */
+export declare class ExportError extends Error {
+    constructor(message: string, options?: {
+        cause?: unknown;
+    });
+}
+
+/** Image format for diagram export. */
+export declare type ExportFormat = 'png' | 'svg';
+
+export declare const HEADER_HEIGHT = 40;
+
+/** Layout algorithm to position the table nodes. */
+export declare type LayoutAlgorithm = 'simple' | 'dagre' | 'elk';
+
+/** Primary flow direction of the layout. */
+export declare type LayoutDirection = 'LR' | 'TB';
+
+/** Thrown when a non-default layout algorithm fails (often a missing optional dependency). */
+export declare class LayoutError extends Error {
+    constructor(message: string, options?: {
+        cause?: unknown;
+    });
+}
+
+export declare interface LayoutOptions {
+    /**
+     * Algorithm used to place nodes. Default `'simple'` (built-in, no dependency).
+     * `'dagre'` requires `@dagrejs/dagre`; `'elk'` requires `elkjs` — both optional
+     * peer dependencies, loaded on demand.
+     */
+    algorithm?: LayoutAlgorithm;
+    /** Primary direction: `'LR'` (left→right, default) or `'TB'` (top→bottom). */
+    direction?: LayoutDirection;
+    /** Horizontal gap between layers. */
+    horizontalGap?: number;
+    /** Vertical gap between stacked tables. */
+    verticalGap?: number;
+}
+
+/**
+ * Compute node positions for the parsed schema.
+ *
+ * Tables are arranged left-to-right by their layer in the FK graph and stacked
+ * vertically within each layer. The result is keyed by {@link TableInfo.id}.
+ */
+export declare function layoutSchema(schema: ParsedSchema, options?: LayoutOptions): Map<string, NodeBox>;
+
+/**
+ * Light theme — matches the built-in stylesheet defaults. Useful as a base to spread
+ * and tweak: `{ ...lightTheme, headerBackground: '#1e3a8a' }`.
+ */
+export declare const lightTheme: DbmlViewerTheme;
+
+/** Visual sizing used both for layout math and for the node component. */
+export declare const NODE_WIDTH = 240;
+
+/** Position and measured size of a laid-out table node. */
+export declare interface NodeBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+/** Map of table id → position, used to persist and restore where the user dragged tables. */
+export declare type NodePositions = Record<string, XYPosition>;
+
+/**
+ * Parse a DBML document into a normalized {@link ParsedSchema} of tables and relations.
+ *
+ * @param dbml - DBML source text.
+ * @throws {DbmlParseError} when the input is not valid DBML.
+ */
+export declare function parseDbml(dbml: string): ParsedSchema;
+
+/** Result of parsing a DBML document. */
+export declare interface ParsedSchema {
+    tables: TableInfo[];
+    relations: RelationInfo[];
+}
+
+/** One end of a relation. */
+export declare interface RelationEndpoint {
+    /** Id of the table this endpoint belongs to (matches {@link TableInfo.id}). */
+    tableId: string;
+    /** Column name(s) involved on this side. */
+    columns: string[];
+    /** Cardinality on this side. */
+    relation: Cardinality;
+    /**
+     * Participation, derived from foreign-key nullability — only meaningful on the referenced
+     * ("one"/parent) side: `true` = optional (nullable FK → "zero or one"), `false` = mandatory
+     * (`not null` FK → "one and only one"). `undefined` on the FK-holder side, whose minimum
+     * participation isn't expressible in DBML, so it renders pure cardinality with no ring.
+     */
+    optional?: boolean;
+}
+
+/** A relation (foreign key reference) between two tables. */
+export declare interface RelationInfo {
+    /** Stable id for the relation. */
+    id: string;
+    /** Identifying vs non-identifying — controls solid vs dashed line. */
+    kind: RelationKind;
+    /** Child endpoint: the table that holds the foreign key (the "many" side of a 1:N). */
+    from: RelationEndpoint;
+    /** Parent endpoint: the referenced table (the "one" side of a 1:N). */
+    to: RelationEndpoint;
+}
+
+/**
+ * Relationship kind, mirroring MySQL Workbench's EER notation:
+ * - `identifying` — the child's foreign key is part of its primary key (drawn as a solid line).
+ * - `non-identifying` — the foreign key is not part of the primary key (drawn as a dashed line).
+ */
+export declare type RelationKind = 'identifying' | 'non-identifying';
+
+/**
+ * Render the React Flow viewport element to an image data URL, framing the full
+ * diagram (all nodes) at 100% scale. Requires the optional `html-to-image` dependency.
+ *
+ * @throws {ExportError} when `html-to-image` is unavailable or rendering fails.
+ */
+export declare function renderDiagram(viewport: HTMLElement, bounds: Rect, options?: DiagramExportOptions): Promise<string>;
+
+export declare const ROW_HEIGHT = 28;
+
+/** Height of a table node given its column count. */
+export declare function tableHeight(table: TableInfo): number;
+
+/** A table parsed from the DBML schema. */
+export declare interface TableInfo {
+    /** Stable id: `schema.table` when a non-default schema is present, otherwise `table`. */
+    id: string;
+    /** Table name. */
+    name: string;
+    /** Schema name, when not the default `public` schema. */
+    schema?: string;
+    /** Table-level note/comment. */
+    note?: string;
+    /** Optional header color set in the DBML (`headercolor`). */
+    headerColor?: string;
+    /** Columns in declaration order. */
+    columns: ColumnInfo[];
+}
+
+export declare const TableNode: MemoExoticComponent<typeof TableNodeComponent>;
+
+declare function TableNodeComponent({ data }: NodeProps<TableNodeType>): JSX.Element;
+
+export declare type TableNodeData = {
+    table: TableInfo;
+    /** Columns currently highlighted (e.g. endpoints of a hovered relation). */
+    highlightedColumns?: Set<string>;
+};
+
+export declare type TableNodeType = Node_2<TableNodeData, 'table'>;
+
+/**
+ * Convert a {@link DbmlViewerTheme} into inline CSS custom properties. Only the keys
+ * present in `theme` are emitted, so unset tokens keep their stylesheet defaults.
+ */
+export declare function themeToCssVars(theme?: DbmlViewerTheme): CSSProperties;
+
+/** A 2D position. */
+export declare interface XYPosition {
+    x: number;
+    y: number;
+}
+
+export { }

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "dbml-erd-viewer",
+  "version": "0.1.0",
+  "description": "React component library that renders DBML database schemas as an interactive diagram.",
+  "keywords": [
+    "database",
+    "dbml",
+    "erd",
+    "react",
+    "react-flow",
+    "schema",
+    "viewer",
+    "xyflow"
+  ],
+  "homepage": "https://github.com/usingsky/dbml-erd-viewer#readme",
+  "bugs": {
+    "url": "https://github.com/usingsky/dbml-erd-viewer/issues"
+  },
+  "license": "MIT",
+  "author": "Jinil Lee <usingsky@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/usingsky/dbml-erd-viewer.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/dbml-erd-viewer.umd.cjs",
+  "module": "./dist/dbml-erd-viewer.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/dbml-erd-viewer.js",
+      "require": "./dist/dbml-erd-viewer.umd.cjs"
+    },
+    "./styles.css": "./dist/dbml-erd-viewer.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -p tsconfig.build.json && vite build",
+    "build:demo": "vite build --config vite.config.demo.ts",
+    "preview": "vite preview",
+    "preview:demo": "vite preview --config vite.config.demo.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "format": "oxfmt --write",
+    "format:check": "oxfmt --check",
+    "check": "oxlint && oxfmt --check && tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@dbml/core": "^8.2.5",
+    "@xyflow/react": "^12.3.0"
+  },
+  "devDependencies": {
+    "@dagrejs/dagre": "^3.0.0",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@microsoft/api-extractor": "^7.58.8",
+    "@types/node": "^25.9.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "elkjs": "^0.11.1",
+    "html-to-image": "^1.11.13",
+    "oxfmt": "^0.54.0",
+    "oxlint": "^1.69.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-dts": "^5.0.2"
+  },
+  "peerDependencies": {
+    "@dagrejs/dagre": "^3.0.0",
+    "elkjs": "^0.11.0",
+    "html-to-image": "^1.11.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@dagrejs/dagre": {
+      "optional": true
+    },
+    "elkjs": {
+      "optional": true
+    },
+    "html-to-image": {
+      "optional": true
+    }
+  }
+}