@yrest/cli 0.10.0 → 0.11.1

package/dist/cli/index.js

@@ -124,11 +124,11 @@ _rel:
     userId: users
     # many2many \u2014 posts can have multiple tags via the post_tags pivot
     tags:
-      type: many2many
-      target: tags
-      through: post_tags
-      foreignKey: postId
-      otherKey: tagId
+      _type: many2many
+      _target: tags
+      _through: post_tags
+      _foreignKey: postId
+      _otherKey: tagId
   comments:
     postId: posts
     userId: users
@@ -136,8 +136,8 @@ _rel:
   # one2one \u2014 each user has exactly one profile
   profiles:
     userId:
-      type: one2one
-      target: users
+      _type: one2one
+      _target: users
 
 users:
   - id: 1
@@ -286,52 +286,52 @@ _rel:
   # many2many \u2014 products belong to multiple categories via pivot
   products:
     categories:
-      type: many2many
-      target: categories
-      through: product_categories
-      foreignKey: productId
-      otherKey: categoryId
+      _type: many2many
+      _target: categories
+      _through: product_categories
+      _foreignKey: productId
+      _otherKey: categoryId
 
 _routes:
   # Login with conditional scenarios
-  - method: POST
-    path: /auth/login
-    scenarios:
-      - when:
+  - _method: POST
+    _path: /auth/login
+    _scenarios:
+      - _when:
           body.email: admin@example.com
           body.password: secret
-        response:
-          status: 200
-          body:
+        _response:
+          _status: 200
+          _body:
             token: tok-admin-abc123
             role: admin
             userId: 1
-      - when:
+      - _when:
           body.email: user@example.com
           body.password: secret
-        response:
-          status: 200
-          body:
+        _response:
+          _status: 200
+          _body:
             token: tok-user-xyz789
             role: user
             userId: 2
-    otherwise:
-      status: 401
-      body:
+    _otherwise:
+      _status: 401
+      _body:
         error: Invalid credentials
 
   # Logout \u2014 always 204
-  - method: POST
-    path: /auth/logout
-    response:
-      status: 204
+  - _method: POST
+    _path: /auth/logout
+    _response:
+      _status: 204
 
   # Static featured products list
-  - method: GET
-    path: /store/featured
-    response:
-      status: 200
-      body:
+  - _method: GET
+    _path: /store/featured
+    _response:
+      _status: 200
+      _body:
         - id: 1
           name: Laptop Pro 15
           price: 1299.99
@@ -346,31 +346,31 @@ _routes:
           badge: On Sale
 
   # Template variables \u2014 echoes the requested product id
-  - method: GET
-    path: /products/:id/summary
-    response:
-      status: 200
-      body:
+  - _method: GET
+    _path: /products/:id/summary
+    _response:
+      _status: 200
+      _body:
         productId: "{{params.id}}"
         requestedAt: "{{now}}"
         source: mock
 
   # Cancel order with simulated latency and template vars
-  - method: POST
-    path: /orders/:id/cancel
-    delay: 500
-    response:
-      status: 200
-      body:
+  - _method: POST
+    _path: /orders/:id/cancel
+    _delay: 500
+    _response:
+      _status: 200
+      _body:
         orderId: "{{params.id}}"
         status: cancelled
         cancelledAt: "{{now}}"
 
   # Simulate a service outage for testing error handling
-  - method: GET
-    path: /store/inventory/sync
-    error: 503
-    errorBody:
+  - _method: GET
+    _path: /store/inventory/sync
+    _error: 503
+    _errorBody:
       message: Inventory service temporarily unavailable
       retryAfter: 30
 
@@ -565,33 +565,143 @@ function parseRelations(raw) {
 }
 function normaliseRelationDef(key, value) {
   if (typeof value === "string") {
-    return { type: "many2one", target: value };
+    return value.includes(":") ? parseDslString(value) : { type: "many2one", target: value };
   }
   if (!value || typeof value !== "object" || Array.isArray(value)) return null;
   const v = value;
-  const type = v["type"];
-  const nested = v["nested"] === true ? true : void 0;
+  const type = v["_type"];
+  const nested = v["_nested"] === true ? true : void 0;
+  const carDirect = typeof v["_car-direct"] === "string" ? v["_car-direct"] : void 0;
+  const carInverse = typeof v["_car-inverse"] === "string" ? v["_car-inverse"] : void 0;
   if (type === "many2one" || type === void 0) {
-    const target = v["target"];
+    const target = v["_target"];
     if (typeof target !== "string") return null;
-    return nested ? { type: "many2one", target, nested } : { type: "many2one", target };
+    const foreignKey = typeof v["_foreignKey"] === "string" ? v["_foreignKey"] : void 0;
+    return compact({ type: "many2one", target, foreignKey, nested, carDirect, carInverse });
   }
   if (type === "one2one") {
-    const target = v["target"];
+    const target = v["_target"];
     if (typeof target !== "string") return null;
-    return nested ? { type: "one2one", target, nested } : { type: "one2one", target };
+    const foreignKey = typeof v["_foreignKey"] === "string" ? v["_foreignKey"] : void 0;
+    return compact({ type: "one2one", target, foreignKey, nested, carDirect, carInverse });
   }
   if (type === "many2many") {
-    const target = typeof v["target"] === "string" ? v["target"] : key;
-    const through = v["through"];
-    const foreignKey = v["foreignKey"];
-    const otherKey = v["otherKey"];
+    const target = typeof v["_target"] === "string" ? v["_target"] : key;
+    const through = v["_through"];
+    const foreignKey = v["_foreignKey"];
+    const otherKey = v["_otherKey"];
     if (typeof through !== "string" || typeof foreignKey !== "string" || typeof otherKey !== "string")
       return null;
-    return nested ? { type: "many2many", target, through, foreignKey, otherKey, nested } : { type: "many2many", target, through, foreignKey, otherKey };
+    return compact({
+      type: "many2many",
+      target,
+      through,
+      foreignKey,
+      otherKey,
+      nested,
+      carDirect,
+      carInverse
+    });
   }
   return null;
 }
+var TYPE_ALIASES = {
+  many2one: "many2one",
+  m2o: "many2one",
+  one2one: "one2one",
+  o2o: "one2one",
+  many2many: "many2many",
+  m2m: "many2many"
+};
+function parseDslString(raw) {
+  const nested = raw.endsWith("+nested") ? true : void 0;
+  let s = nested ? raw.slice(0, -7) : raw;
+  let carDirect;
+  let carInverse;
+  const carMatch = s.match(/\[([^[\]]+)->([^[\]]+)\]$/);
+  if (carMatch) {
+    carDirect = carMatch[1];
+    carInverse = carMatch[2];
+    s = s.slice(0, s.length - carMatch[0].length);
+  }
+  const colonIdx = s.indexOf(":");
+  if (colonIdx === -1) return null;
+  const typeAlias = s.slice(0, colonIdx);
+  const body = s.slice(colonIdx + 1);
+  const type = TYPE_ALIASES[typeAlias];
+  if (!type) return null;
+  if (type === "many2many") {
+    const m = body.match(/^([^@()[\]]+)@([^@()[\]]+)\(([^,)]+),\s*([^,)]+)\)$/);
+    if (!m) return null;
+    const [, target2, through, foreignKey2, otherKey] = m;
+    return compact({
+      type: "many2many",
+      target: target2,
+      through,
+      foreignKey: foreignKey2,
+      otherKey,
+      nested,
+      carDirect,
+      carInverse
+    });
+  }
+  const atIdx = body.indexOf("@");
+  const target = atIdx === -1 ? body : body.slice(0, atIdx);
+  const foreignKey = atIdx === -1 ? void 0 : body.slice(atIdx + 1);
+  if (!target) return null;
+  return compact({ type, target, foreignKey, nested, carDirect, carInverse });
+}
+function compact(obj) {
+  return Object.fromEntries(Object.entries(obj).filter(([, v]) => v !== void 0));
+}
+
+// src/storage/parseRoutes.ts
+function parseRoutes(raw) {
+  if (!Array.isArray(raw)) return [];
+  return raw.map(normaliseRoute).filter((r) => r !== null);
+}
+function normaliseRoute(raw) {
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return null;
+  const v = raw;
+  const method = v["_method"];
+  const path = v["_path"];
+  if (typeof method !== "string" || typeof path !== "string") return null;
+  const route = { method, path };
+  if (typeof v["_handler"] === "string") route.handler = v["_handler"];
+  if (typeof v["_delay"] === "number") route.delay = v["_delay"];
+  if (typeof v["_error"] === "number") route.error = v["_error"];
+  if (v["_errorBody"] !== void 0) route.errorBody = v["_errorBody"];
+  const response = normaliseResponse(v["_response"]);
+  if (response) route.response = response;
+  const otherwise = normaliseResponse(v["_otherwise"]);
+  if (otherwise) route.otherwise = otherwise;
+  const scenarios = normaliseScenarios(v["_scenarios"]);
+  if (scenarios.length > 0) route.scenarios = scenarios;
+  return route;
+}
+function normaliseResponse(raw) {
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return void 0;
+  const v = raw;
+  const response = {};
+  if (typeof v["_status"] === "number") response.status = v["_status"];
+  if (v["_body"] !== void 0) response.body = v["_body"];
+  if (v["_headers"] && typeof v["_headers"] === "object" && !Array.isArray(v["_headers"]))
+    response.headers = v["_headers"];
+  return Object.keys(response).length > 0 ? response : void 0;
+}
+function normaliseScenarios(raw) {
+  if (!Array.isArray(raw)) return [];
+  return raw.map(normaliseScenario).filter((s) => s !== null);
+}
+function normaliseScenario(raw) {
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return null;
+  const v = raw;
+  const when = v["_when"];
+  if (!when || typeof when !== "object") return null;
+  const response = normaliseResponse(v["_response"]);
+  if (!response) return null;
+  return { when, response };
+}
 
 // src/storage/parseSchema.ts
 function parseSchema(raw) {
@@ -613,13 +723,13 @@ function normaliseFieldDef(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) return null;
   const v = value;
   const def = {};
-  if (v["required"] === true || v["required"] === false) def.required = v["required"];
-  if (typeof v["type"] === "string" && ["string", "integer", "number", "boolean", "object", "array"].includes(v["type"]))
-    def.type = v["type"];
-  if (typeof v["format"] === "string") def.format = v["format"];
-  if (Array.isArray(v["enum"])) def.enum = v["enum"];
-  if (typeof v["description"] === "string") def.description = v["description"];
-  if (v["default"] !== void 0) def.default = v["default"];
+  if (v["_required"] === true || v["_required"] === false) def.required = v["_required"];
+  if (typeof v["_type"] === "string" && ["string", "integer", "number", "boolean", "object", "array"].includes(v["_type"]))
+    def.type = v["_type"];
+  if (typeof v["_format"] === "string") def.format = v["_format"];
+  if (Array.isArray(v["_enum"])) def.enum = v["_enum"];
+  if (typeof v["_description"] === "string") def.description = v["_description"];
+  if (v["_default"] !== void 0) def.default = v["_default"];
   return def;
 }
 
@@ -631,12 +741,66 @@ function deepCopyData(source) {
 }
 
 // src/storage/yrestStorage.ts
+function serializeRelations(relations) {
+  const out = {};
+  for (const [col, fields] of Object.entries(relations)) {
+    out[col] = {};
+    for (const [key, def] of Object.entries(fields)) {
+      out[col][key] = serializeRelationDef(def);
+    }
+  }
+  return out;
+}
+function serializeRelationDef(def) {
+  if (def.type === "many2many") {
+    const entry2 = {
+      _type: def.type,
+      _target: def.target,
+      _through: def.through,
+      _foreignKey: def.foreignKey,
+      _otherKey: def.otherKey
+    };
+    if (def.nested) entry2._nested = true;
+    if (def.carDirect) entry2["_car-direct"] = def.carDirect;
+    if (def.carInverse) entry2["_car-inverse"] = def.carInverse;
+    return entry2;
+  }
+  const entry = { _type: def.type, _target: def.target };
+  if (def.foreignKey) entry._foreignKey = def.foreignKey;
+  if (def.nested) entry._nested = true;
+  if (def.carDirect) entry["_car-direct"] = def.carDirect;
+  if (def.carInverse) entry["_car-inverse"] = def.carInverse;
+  return entry;
+}
+function serializeRoutes(routes) {
+  return routes.map((r) => {
+    const entry = { _method: r.method, _path: r.path };
+    if (r.handler) entry._handler = r.handler;
+    if (r.delay !== void 0) entry._delay = r.delay;
+    if (r.error !== void 0) entry._error = r.error;
+    if (r.errorBody !== void 0) entry._errorBody = r.errorBody;
+    if (r.response) entry._response = serializeResponse(r.response);
+    if (r.otherwise) entry._otherwise = serializeResponse(r.otherwise);
+    if (r.scenarios?.length) entry._scenarios = r.scenarios.map(serializeScenario);
+    return entry;
+  });
+}
+function serializeResponse(res) {
+  const out = {};
+  if (res.status !== void 0) out._status = res.status;
+  if (res.body !== void 0) out._body = res.body;
+  if (res.headers) out._headers = res.headers;
+  return out;
+}
+function serializeScenario(s) {
+  return { _when: s.when, _response: serializeResponse(s.response) };
+}
 function createYrestStorage(filePath) {
   const absPath = (0, import_node_path2.resolve)(filePath);
   const raw = (0, import_yaml.parse)((0, import_node_fs2.readFileSync)(absPath, "utf8")) ?? {};
   const RESERVED = /* @__PURE__ */ new Set(["_rel", "_routes", "_schema"]);
   const relations = parseRelations(raw["_rel"]);
-  const routes = Array.isArray(raw["_routes"]) ? raw["_routes"] : [];
+  const routes = parseRoutes(raw["_routes"]);
   const schema = parseSchema(raw["_schema"]);
   const data = Object.fromEntries(
     Object.entries(raw).filter(([key]) => !RESERVED.has(key))
@@ -667,8 +831,8 @@ function createYrestStorage(filePath) {
     },
     persist() {
       const payload = {};
-      if (Object.keys(relations).length > 0) payload._rel = relations;
-      if (routes.length > 0) payload._routes = routes;
+      if (Object.keys(relations).length > 0) payload._rel = serializeRelations(relations);
+      if (routes.length > 0) payload._routes = serializeRoutes(routes);
       Object.assign(payload, data);
       const tmp = (0, import_node_path2.resolve)((0, import_node_path2.dirname)(absPath), `.yrest-${(0, import_node_crypto.randomUUID)()}.tmp`);
       (0, import_node_fs2.writeFileSync)(tmp, (0, import_yaml.stringify)(payload), "utf8");
@@ -1045,12 +1209,582 @@ curl ${curlFlag}${fullPath}`);
   return `<pre>${highlighted}</pre>`;
 }
 
+// src/router/templates/about.diagram.ts
+function inferType(value) {
+  if (value === null || value === void 0) return "string";
+  if (typeof value === "boolean") return "boolean";
+  if (typeof value === "number") return Number.isInteger(value) ? "integer" : "number";
+  if (Array.isArray(value)) return "array";
+  if (typeof value === "object") return "object";
+  return "string";
+}
+function generateERData(storage) {
+  const data = storage.getData();
+  const relations = storage.getRelations();
+  const schema = storage.getSchema();
+  const pivotTables = /* @__PURE__ */ new Set();
+  const pivotFKs = /* @__PURE__ */ new Map();
+  for (const fields of Object.values(relations)) {
+    for (const def of Object.values(fields)) {
+      if (def.type === "many2many") {
+        pivotTables.add(def.through);
+        if (!pivotFKs.has(def.through)) pivotFKs.set(def.through, /* @__PURE__ */ new Set());
+        pivotFKs.get(def.through).add(def.foreignKey);
+        pivotFKs.get(def.through).add(def.otherKey);
+      }
+    }
+  }
+  const fkFields = /* @__PURE__ */ new Map();
+  for (const [source, fields] of Object.entries(relations)) {
+    for (const [key, def] of Object.entries(fields)) {
+      if (def.type !== "many2many") {
+        if (!fkFields.has(source)) fkFields.set(source, /* @__PURE__ */ new Set());
+        fkFields.get(source).add(key);
+      }
+    }
+  }
+  const entities = Object.entries(data).map(([name, items]) => {
+    const sample = items[0] ?? {};
+    const schemaFields = schema[name] ?? {};
+    const allFields = /* @__PURE__ */ new Set([...Object.keys(sample), ...Object.keys(schemaFields)]);
+    const fields = [...allFields].map((fieldName) => ({
+      name: fieldName,
+      type: schemaFields[fieldName]?.type ?? inferType(sample[fieldName]),
+      pk: fieldName === "id",
+      fk: fkFields.get(name)?.has(fieldName) ?? false,
+      required: schemaFields[fieldName]?.required ?? false
+    }));
+    fields.sort((a, b) => {
+      if (a.pk) return -1;
+      if (b.pk) return 1;
+      if (a.fk && !b.fk) return 1;
+      if (!a.fk && b.fk) return -1;
+      return 0;
+    });
+    return { name, fields, isPivot: pivotTables.has(name) };
+  });
+  const erRelations = [];
+  for (const [source, fields] of Object.entries(relations)) {
+    for (const [key, def] of Object.entries(fields)) {
+      if (def.type === "many2many") {
+        const throughRels = relations[def.through] ?? {};
+        const fkRel = throughRels[def.foreignKey];
+        const otherRel = throughRels[def.otherKey];
+        erRelations.push({
+          source,
+          target: def.target,
+          type: "many2many",
+          label: def.through,
+          through: def.through,
+          foreignKey: def.foreignKey,
+          otherKey: def.otherKey,
+          fkCarDirect: fkRel?.carDirect,
+          fkCarInverse: fkRel?.carInverse,
+          otherCarDirect: otherRel?.carDirect,
+          otherCarInverse: otherRel?.carInverse
+        });
+      } else {
+        if (pivotFKs.get(source)?.has(key)) continue;
+        erRelations.push({
+          source,
+          target: def.target,
+          type: def.type,
+          label: key,
+          carDirect: def.carDirect,
+          carInverse: def.carInverse
+        });
+      }
+    }
+  }
+  return { entities, relations: erRelations };
+}
+
+// src/router/templates/about.diagram.canvas.ts
+function erDiagramSection(data) {
+  if (!data.entities.length) return "";
+  const json = JSON.stringify(data);
+  return (
+    /*html*/
+    `
+  <h2>Data Model</h2>
+
+  <div class="card" style="padding:0;overflow:hidden;position:relative;">
+    <canvas id="er-canvas" style="width:100%;display:block;cursor:grab;"></canvas>
+    <div style="position:absolute;top:10px;right:14px;display:flex;gap:6px;align-items:center;">
+      <select id="er-scale" title="Download quality" style="background:#161b22;border:1px solid #30363d;color:#7d8590;padding:3px 6px;border-radius:6px;font-size:11px;cursor:pointer;">
+        <option value="1">1\xD7</option>
+        <option value="2">2\xD7</option>
+        <option value="3" selected>3\xD7</option>
+        <option value="4">4\xD7</option>
+      </select>
+      <button id="er-dl" title="Download PNG" style="background:#161b22;border:1px solid #30363d;color:#7d8590;padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;line-height:1.4;">\u2193 PNG</button>
+    </div>
+  </div>
+
+  <script>${/*js*/
+    `
+    (function(){
+
+    var D=${json};
+
+    // \u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    var NW=178,HH=34,FH=22,FP=10,ROW_GAP=44,COL_GAP=100,BR=12,BO=16,LGH=84,MIN_GAP=10;
+
+    var C={bg:'#0d1117',nb:'#161b22',nh:'#1c2128',pb:'#0d1117',ph:'#161b22',
+      bo:'#30363d',bs:'#58a6ff',tx:'#e6edf3',mu:'#7d8590',
+      pk:'#e3b341',fk:'#79c0ff',m2o:'#58a6ff',o2o:'#34d399',m2m:'#818cf8'};
+
+    // \u2500\u2500 Canvas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    var cv = document.getElementById('er-canvas');
+    var dpr = window.devicePixelRatio||1;
+    var ctx = cv.getContext('2d');
+
+    function resize(h){
+      if(h)cv.style.height = h + 'px';
+      var r = cv.getBoundingClientRect();
+      cv.width = Math.round(r.width*dpr);
+      cv.height = Math.round(r.height*dpr);
+    }
+
+    // \u2500\u2500 Nodes & adjacency \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    var nodes = D.entities.map(function(e){
+      return{e:e,x:0,y:0,w:NW,h:HH+e.fields.length*FH+6};
+    });
+
+    var nIdx={};D.entities.forEach(function(e,i){nIdx[e.name]=i;});
+
+    var adj=nodes.map(function(){return[];}); // forward
+    var radj=nodes.map(function(){return[];}); // reverse
+
+    D.relations.forEach(function(r){
+      if(r.type==='many2many'&&r.through&&nIdx[r.through]!=null){
+        var s=nIdx[r.source],p=nIdx[r.through],t=nIdx[r.target];
+        if(s!=null&&p!=null&&s!==p){adj[s].push(p);radj[p].push(s);}
+        if(t!=null&&p!=null&&t!==p){adj[t].push(p);radj[p].push(t);}
+      }else{
+        var s=nIdx[r.source],t=nIdx[r.target];
+        if(s==null||t==null||s===t)return;
+        adj[s].push(t);radj[t].push(s);
+      }
+    });
+
+    // \u2500\u2500 Dynamic node width \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    function computeNodeWidths(){
+      nodes.forEach(function(n){
+        var e=n.e;
+        ctx.font='600 12px -apple-system,BlinkMacSystemFont,sans-serif';
+        var hdrW=FP+ctx.measureText(e.name).width+FP;
+        if(e.isPivot){
+          ctx.font='9px monospace';
+          hdrW+=ctx.measureText('pivot').width+FP;
+        }
+        var maxRow=hdrW;
+        e.fields.forEach(function(f){
+          var leftPad=FP+(f.pk||f.fk?16:0);
+          var rightPad=(f.required&&!f.pk?14:0)+FP;
+          ctx.font=(f.required&&!f.pk?'600 ':'')+'11px monospace';
+          var nw=ctx.measureText(f.name).width;
+          ctx.font='10px monospace';
+          var tw=ctx.measureText(f.type).width;
+          maxRow=Math.max(maxRow,leftPad+nw+MIN_GAP+tw+rightPad);
+        });
+        n.w=Math.max(NW,Math.ceil(maxRow));
+      });
+    }
+
+    // \u2500\u2500 Layered layout (simplified Sugiyama) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    var groups=[];
+
+    function median(arr){
+      if(!arr.length)return 0;
+      var s=[].concat(arr).sort(function(a,b){return a-b;});
+      return s[Math.floor(s.length/2)];
+    }
+
+    function computeLayout(W,H){
+      var layer=nodes.map(function(){return 0;});
+      var inDeg=nodes.map(function(){return 0;});
+      adj.forEach(function(ts){ts.forEach(function(t){inDeg[t]++;});});
+      var q=[],qi=0;
+      for(var i=0;i<nodes.length;i++)if(inDeg[i]===0)q.push(i);
+      if(!q.length)for(var i=0;i<nodes.length;i++)q.push(i);
+      while(qi<q.length){
+        var u=q[qi++];
+        adj[u].forEach(function(v){if(layer[v]<=layer[u]){layer[v]=layer[u]+1;q.push(v);}});
+      }
+      var maxL=layer.reduce(function(m,l){return Math.max(m,l);},0);
+      groups=[];
+      for(var l=0;l<=maxL;l++)groups.push([]);
+      for(var i=0;i<nodes.length;i++)groups[layer[i]].push(i);
+      for(var l=1;l<=maxL;l++){
+        var pp={};groups[l-1].forEach(function(i,p){pp[i]=p;});
+        groups[l].sort(function(a,b){
+          return median(radj[a].map(function(x){return pp[x]!=null?pp[x]:0;}))-
+                median(radj[b].map(function(x){return pp[x]!=null?pp[x]:0;}));
+        });
+      }
+      for(var l=maxL-1;l>=0;l--){
+        var np={};groups[l+1].forEach(function(i,p){np[i]=p;});
+        groups[l].sort(function(a,b){
+          return median(adj[a].map(function(x){return np[x]!=null?np[x]:0;}))-
+                median(adj[b].map(function(x){return np[x]!=null?np[x]:0;}));
+        });
+      }
+      var maxNW=nodes.reduce(function(m,n){return Math.max(m,n.w);},NW);
+      var colW=maxNW+COL_GAP;
+      var totalW=(maxL+1)*colW-COL_GAP;
+      var startX=Math.max(20,(W-totalW)/2);
+      for(var l=0;l<=maxL;l++){
+        var g=groups[l];
+        var totalH=g.reduce(function(s,i){return s+nodes[i].h;},0)+(g.length-1)*ROW_GAP;
+        var y=Math.max(20,(H-totalH)/2);
+        g.forEach(function(i){nodes[i].x=startX+l*colW;nodes[i].y=y;y+=nodes[i].h+ROW_GAP;});
+      }
+    }
+
+    function requiredH(){
+      return Math.max(340,Math.min(720,groups.reduce(function(m,g){
+        return Math.max(m,g.reduce(function(s,i){return s+nodes[i].h;},0)+(g.length-1)*ROW_GAP+LGH+70);
+      },300)));
+    }
+
+    // \u2500\u2500 View \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    var pan={x:0,y:0},zm=1;
+    var origPos=[];
+
+    function savePos(){origPos=nodes.map(function(n){return{x:n.x,y:n.y};});}
+
+    function fitView(W,H){
+      var x0=1e9,y0=1e9,x1=-1e9,y1=-1e9;
+      nodes.forEach(function(n){x0=Math.min(x0,n.x);y0=Math.min(y0,n.y);x1=Math.max(x1,n.x+n.w);y1=Math.max(y1,n.y+n.h);});
+      var pad=28,gW=x1-x0+pad*2,gH=y1-y0+pad*2;
+      zm=Math.min(W/gW,(H-LGH)/gH,1);
+      pan.x=(W-gW*zm)/2+pad*zm-x0*zm;
+      pan.y=((H-LGH)-gH*zm)/2+pad*zm-y0*zm;
+    }
+
+    // \u2500\u2500 Rendering \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    function rr(x,y,w,h,r){
+      if(ctx.roundRect){ctx.beginPath();ctx.roundRect(x,y,w,h,r);return;}
+      ctx.beginPath();ctx.moveTo(x+r,y);ctx.arcTo(x+w,y,x+w,y+h,r);
+      ctx.arcTo(x+w,y+h,x,y+h,r);ctx.arcTo(x,y+h,x,y,r);ctx.arcTo(x,y,x+w,y,r);ctx.closePath();
+    }
+
+    function edgePt(n,tx,ty){
+      var cx=n.x+n.w/2,cy=n.y+n.h/2,dx=tx-cx,dy=ty-cy;
+      if(!dx&&!dy)return{x:cx,y:cy};
+      var s=Math.min((n.w/2)/Math.abs(dx||.001),(n.h/2)/Math.abs(dy||.001));
+      return{x:cx+dx*s,y:cy+dy*s};
+    }
+
+    var badges=[];
+
+    // \u2500\u2500 SVG cardinality badges via Path2D \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    // SVG orientation: LEFT side touches the node, RIGHT side connects to the line.
+    // Rotation = Math.atan2(uy,ux) aligns local +x with the outward (away-from-node) direction.
+    var P2D={
+      '1..1':new Path2D('M75 40C75 59.33 59.33 75 40 75C20.67 75 5 59.33 5 40C5 20.67 20.67 5 40 5C59.33 5 75 20.67 75 40ZM41 26C41 24.3431 39.6569 23 38 23C36.3431 23 35 24.3431 35 26V37H26V26C26 24.3431 24.6569 23 23 23C21.3431 23 20 24.3431 20 26V37H15C13.3431 37 12 38.3431 12 40C12 41.6569 13.3431 43 15 43H20V54C20 55.6569 21.3431 57 23 57C24.6569 57 26 55.6569 26 54V43H35V54C35 55.6569 36.3431 57 38 57C39.6569 57 41 55.6569 41 54V43H66C67.6569 43 69 41.6569 69 40C69 38.3431 67.6569 37 66 37H41V26Z'),
+      '1..n':new Path2D('M40 75C59.33 75 75 59.33 75 40C75 20.67 59.33 5 40 5C20.67 5 5 20.67 5 40C5 59.33 20.67 75 40 75ZM44.9862 42.9025L18.6801 58.0904C17.2452 58.9188 15.4105 58.4272 14.582 56.9923C13.7536 55.5574 14.2452 53.7227 15.6801 52.8942L32.9862 42.9025H17C15.3431 42.9025 14 41.5594 14 39.9025C14 38.2457 15.3431 36.9025 17 36.9025H32.9862L15.5981 26.5986C14.1632 25.7702 13.6716 23.9354 14.5 22.5005C15.3284 21.0656 17.1632 20.574 18.5981 21.4024L44.9862 36.9025H46V26C46 24.3431 47.3431 23 49 23C50.6569 23 52 24.3431 52 26V36.9025H68C69.6569 36.9025 71 38.2457 71 39.9025C71 41.5594 69.6569 42.9025 68 42.9025H52V53C52 54.6569 50.6569 56 49 56C47.3431 56 46 54.6569 46 53V42.9025H44.9862Z'),
+      '0..1':new Path2D('M75 40C75 59.33 59.33 75 40 75C20.67 75 5 59.33 5 40C5 20.67 20.67 5 40 5C59.33 5 75 20.67 75 40ZM23 57C24.6569 57 26 55.6569 26 54V43H33.3781C34.7102 48.1757 39.4085 52 45 52C50.5915 52 55.2898 48.1757 56.6219 43H66C67.6569 43 69 41.6569 69 40C69 38.3431 67.6569 37 66 37H56.6219C55.2898 31.8243 50.5915 28 45 28C39.4085 28 34.7102 31.8243 33.3781 37H26V26C26 24.3431 24.6569 23 23 23C21.3431 23 20 24.3431 20 26V37H15C13.3431 37 12 38.3431 12 40C12 41.6569 13.3431 43 15 43H20V54C20 55.6569 21.3431 57 23 57ZM51 40C51 41.0929 50.7078 42.1175 50.1973 43C49.1599 44.7934 47.2208 46 45 46C42.7792 46 40.8401 44.7934 39.8027 43C39.2922 42.1175 39 41.0929 39 40C39 38.9071 39.2922 37.8825 39.8027 37C40.8401 35.2066 42.7792 34 45 34C47.2208 34 49.1599 35.2066 50.1973 37C50.7078 37.8825 51 38.9071 51 40Z'),
+      '0..n':new Path2D('M40 75C59.33 75 75 59.33 75 40C75 20.67 59.33 5 40 5C20.67 5 5 20.67 5 40C5 59.33 20.67 75 40 75ZM17 42.9025C15.3431 42.9025 14 41.5594 14 39.9025C14 38.2457 15.3431 36.9025 17 36.9025H32.9862L15.5981 26.5986C14.1632 25.7702 13.6716 23.9354 14.5 22.5005C15.3284 21.0656 17.1632 20.574 18.5981 21.4024L45.4091 36.8818L45.4036 36.9025H45.445L45.4091 36.8818C46.7819 31.7662 51.4511 28 57 28C62.579 28 67.2687 31.8072 68.6129 36.9652C69.9758 37.2481 71 38.4557 71 39.9025C71 41.331 70.0017 42.5262 68.6647 42.8286C67.3931 48.091 62.6531 52 57 52C51.3734 52 46.6513 48.1276 45.3534 42.9025H44.9862L18.6801 58.0904C17.2452 58.9188 15.4105 58.4272 14.582 56.9923C13.7536 55.5574 14.2452 53.7227 15.6801 52.8942L32.9862 42.9025H17ZM62.1397 36.9025C61.0891 35.163 59.1804 34 57 34C54.8196 34 52.9109 35.163 51.8603 36.9025C51.3142 37.8067 51 38.8667 51 40C51 41.0529 51.2712 42.0424 51.7475 42.9025C52.7704 44.7496 54.7392 46 57 46C59.2608 46 61.2296 44.7496 62.2525 42.9025C62.7288 42.0424 63 41.0529 63 40C63 38.8667 62.6858 37.8067 62.1397 36.9025Z'),
+      'n':new Path2D('M40 75C59.33 75 75 59.33 75 40C75 20.67 59.33 5 40 5C20.67 5 5 20.67 5 40C5 59.33 20.67 75 40 75ZM17 36.9025H33.0677L15.5981 26.5986C14.1632 25.7702 13.6716 23.9354 14.5 22.5005C15.3284 21.0656 17.1632 20.574 18.5981 21.4024L44.9862 36.9025H68C69.6569 36.9025 71 38.2457 71 39.9025C71 41.5594 69.6569 42.9025 68 42.9025H44.9862L18.6801 58.0904C17.2452 58.9188 15.4105 58.4272 14.582 56.9923C13.7536 55.5574 14.2452 53.7227 15.6801 52.8942L32.9862 42.9025H17C15.3431 42.9025 14 41.5594 14 39.9025C14 38.2457 15.3431 36.9025 17 36.9025Z')
+    };
+
+    function pushBadge(x,y,ux,uy,car,col){
+      badges.push({x:x,y:y,ux:ux,uy:uy,car:car,col:col});
+    }
+
+    function drawBadge(b){
+      var p=P2D[b.car]||P2D['n'],sc=BR/40;
+      ctx.save();
+      ctx.translate(b.x+b.ux*BO,b.y+b.uy*BO);
+      ctx.rotate(Math.atan2(b.uy,b.ux));
+      ctx.scale(sc,sc);
+      ctx.translate(-40,-40);
+      ctx.fillStyle=b.col;
+      ctx.fill(p,'evenodd');
+      ctx.restore();
+    }
+
+    function ecol(t){return t==='one2one'?C.o2o:t==='many2many'?C.m2m:C.m2o;}
+
+    // offset: pixels to shift perpendicular to the edge direction (for parallel edges)
+    function drawEdgeLine(a,b,col,dashed,label,carA,carB,off){
+      var p1=edgePt(a,b.x+b.w/2,b.y+b.h/2);
+      var p2=edgePt(b,a.x+a.w/2,a.y+a.h/2);
+      var dx=p2.x-p1.x,dy=p2.y-p1.y,d=Math.sqrt(dx*dx+dy*dy)||1;
+      var ux=dx/d,uy=dy/d;
+      var px=-uy*off,py=ux*off; // perpendicular shift
+      var q1x=p1.x+px,q1y=p1.y+py,q2x=p2.x+px,q2y=p2.y+py;
+      ctx.strokeStyle=col+'55';ctx.lineWidth=1.5;
+      ctx.setLineDash(dashed?[5,4]:[]);
+      ctx.beginPath();ctx.moveTo(q1x,q1y);ctx.lineTo(q2x,q2y);ctx.stroke();
+      ctx.setLineDash([]);
+      pushBadge(q1x,q1y,ux,uy,carA,col);
+      pushBadge(q2x,q2y,-ux,-uy,carB,col);
+      if(label){
+        var mx=(q1x+q2x)/2,my=(q1y+q2y)/2;
+        var la=Math.atan2(uy,ux);
+        if(la>Math.PI/2||la<-Math.PI/2)la+=Math.PI; // keep text readable
+        var ls=off>0?11:-11; // alternate above/below for parallel edges
+        ctx.save();
+        ctx.translate(mx,my);
+        ctx.rotate(la);
+        ctx.fillStyle=C.mu;ctx.font='10px monospace';ctx.textAlign='center';ctx.textBaseline='middle';
+        ctx.fillText(label,0,ls);
+        ctx.restore();
+      }
+    }
+
+    // canonical key for a node pair regardless of direction
+    function pairKey(a,b){
+      var ai=nodes.indexOf(a),bi=nodes.indexOf(b);
+      return ai<bi?ai+'-'+bi:bi+'-'+ai;
+    }
+
+    function collectEdges(){
+      var edges=[];
+      D.relations.forEach(function(r){
+        var col=ecol(r.type);
+        if(r.type==='many2many'&&r.through&&nIdx[r.through]!=null){
+          var sn=nodes[nIdx[r.source]],pn=nodes[nIdx[r.through]],tn=nodes[nIdx[r.target]];
+          if(sn&&pn)edges.push({a:sn,b:pn,col:col,dashed:true,label:r.foreignKey||'',carA:r.fkCarDirect||'1..1',carB:r.fkCarInverse||'0..n',off:0});
+          if(tn&&pn)edges.push({a:tn,b:pn,col:col,dashed:true,label:r.otherKey||'',carA:r.otherCarDirect||'1..1',carB:r.otherCarInverse||'0..n',off:0});
+        }else{
+          var sn=nodes[nIdx[r.source]],tn=nodes[nIdx[r.target]];
+          if(sn&&tn&&sn!==tn){
+            var carA=r.carInverse||(r.type!=='one2one'?'1..n':'1..1');
+            var carB=r.carDirect||(r.type==='many2many'?'1..n':'1..1');
+            edges.push({a:sn,b:tn,col:col,dashed:false,label:r.label,carA:carA,carB:carB,off:0});
+          }
+        }
+      });
+      // assign perpendicular offsets to parallel edges (same node pair)
+      var cnt={},idx={};
+      edges.forEach(function(e){var k=pairKey(e.a,e.b);cnt[k]=(cnt[k]||0)+1;});
+      edges.forEach(function(e){
+        var k=pairKey(e.a,e.b),n=cnt[k];
+        var i=idx[k]=(idx[k]||0);
+        e.off=n>1?(i-(n-1)/2)*16:0;
+        idx[k]++;
+      });
+      return edges;
+    }
+
+    function drawNode(n){
+      var x=n.x,y=n.y,w=n.w,h=n.h,e=n.e;
+      var bg=e.isPivot?C.pb:C.nb,hd=e.isPivot?C.ph:C.nh;
+      ctx.save();ctx.shadowColor='rgba(0,0,0,0.45)';ctx.shadowBlur=14;ctx.shadowOffsetY=4;
+      ctx.fillStyle=bg;rr(x,y,w,h,7);ctx.fill();ctx.restore();
+      ctx.fillStyle=bg;rr(x,y,w,h,7);ctx.fill();
+      ctx.strokeStyle=n===drag?C.bs:C.bo;ctx.lineWidth=1.2;rr(x,y,w,h,7);ctx.stroke();
+      ctx.fillStyle=hd;rr(x,y,w,HH,7);ctx.fill();ctx.fillRect(x,y+HH-7,w,7);
+      ctx.strokeStyle=C.bo;ctx.lineWidth=1;
+      ctx.beginPath();ctx.moveTo(x,y+HH);ctx.lineTo(x+w,y+HH);ctx.stroke();
+      ctx.fillStyle=e.isPivot?C.mu:C.tx;
+      ctx.font='600 12px -apple-system,BlinkMacSystemFont,sans-serif';
+      ctx.textAlign='left';ctx.textBaseline='middle';
+      ctx.fillText(e.name,x+FP,y+HH/2);
+      if(e.isPivot){
+        ctx.fillStyle='#3d444d';ctx.font='9px monospace';ctx.textAlign='right';
+        ctx.fillText('pivot',x+w-FP,y+HH/2);
+      }
+      e.fields.forEach(function(f,fi){
+        var fy=y+HH+fi*FH+FH/2+3;
+        ctx.fillStyle=C.mu;ctx.font='10px monospace';ctx.textAlign='right';ctx.textBaseline='middle';
+        ctx.fillText(f.type,x+w-FP-(f.required&&!f.pk?14:0),fy);
+        if(f.pk||f.fk){
+          var tag=f.pk?'PK':'FK',tc=f.pk?C.pk:C.fk;
+          ctx.fillStyle=tc+'22';ctx.strokeStyle=tc+'66';ctx.lineWidth=1;
+          rr(x+FP,fy-6,12,12,2);ctx.fill();ctx.stroke();
+          ctx.fillStyle=tc;ctx.font='7px monospace';ctx.textAlign='center';
+          ctx.fillText(tag,x+FP+6,fy+0.5);
+        }
+        ctx.fillStyle=f.pk?C.pk:f.fk?C.fk:C.tx;
+        ctx.font=(f.required&&!f.pk?'600 ':'')+'11px monospace';
+        ctx.textAlign='left';ctx.textBaseline='middle';
+        ctx.fillText(f.name,x+FP+(f.pk||f.fk?16:0),fy);
+        if(f.required&&!f.pk){
+          ctx.fillStyle='#f85149';ctx.beginPath();
+          ctx.arc(x+w-FP-6,fy,2.5,0,Math.PI*2);ctx.fill();
+        }
+      });
+      ctx.textBaseline='alphabetic';
+    }
+
+    function drawLegend(){
+      var cvW=cv.width/dpr,cvH=cv.height/dpr;
+      var yL=cvH-LGH,y1=yL+13,y2=yL+35,y3=yL+62;
+
+      ctx.fillStyle='#161b22';
+      ctx.fillRect(0,yL,cvW,LGH);
+      ctx.strokeStyle='#30363d';ctx.lineWidth=1;
+      ctx.beginPath();ctx.moveTo(0,yL);ctx.lineTo(cvW,yL);ctx.stroke();
+
+      function legendBadge(cx,cy,car,col,angle){
+        var p=P2D[car]||P2D['n'],sc=8/40;
+        ctx.save();
+        ctx.translate(cx,cy);
+        ctx.rotate(angle);
+        ctx.scale(sc,sc);
+        ctx.translate(-40,-40);
+        ctx.fillStyle=col;
+        ctx.fill(p,'evenodd');
+        ctx.restore();
+      }
+
+      // Row 1: relation line types
+      var types=[
+        {c:C.m2o,l:'many2one',d:false},
+        {c:C.o2o,l:'one2one',d:false},
+        {c:C.m2m,l:'many2many',d:true}
+      ];
+      ctx.textAlign='left';ctx.textBaseline='middle';ctx.font='10px monospace';
+      var x=14;
+      types.forEach(function(it){
+        ctx.strokeStyle=it.c;ctx.lineWidth=1.5;ctx.setLineDash(it.d?[4,3]:[]);
+        ctx.beginPath();ctx.moveTo(x,y1);ctx.lineTo(x+14,y1);ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.fillStyle=C.mu;
+        ctx.fillText(it.l,x+18,y1);
+        x+=18+ctx.measureText(it.l).width+22;
+      });
+
+      // Row 2: relation type examples (pair of badges + line)
+      x=14;
+      var pairs=[
+        {carA:'1..n',carB:'1..1',col:C.m2o,l:'many2one (N:1)'},
+        {carA:'1..1',carB:'1..1',col:C.o2o,l:'one2one (1:1)'},
+        {carA:'1..1',carB:'0..n',col:C.m2m,l:'pivot edge (1:0..N)'}
+      ];
+      pairs.forEach(function(p){
+        ctx.strokeStyle=p.col+'55';ctx.lineWidth=1.2;ctx.setLineDash(p.col===C.m2m?[4,3]:[]);
+        ctx.beginPath();ctx.moveTo(x+8,y2);ctx.lineTo(x+56,y2);ctx.stroke();
+        ctx.setLineDash([]);
+        legendBadge(x+8,y2,p.carA,p.col,0);
+        legendBadge(x+56,y2,p.carB,p.col,Math.PI);
+        ctx.fillStyle=C.mu;ctx.font='10px monospace';ctx.textAlign='left';ctx.textBaseline='middle';
+        ctx.fillText(p.l,x+66,y2);
+        x+=66+ctx.measureText(p.l).width+24;
+      });
+
+      // Row 3: individual symbol meanings
+      var symbols=[
+        {car:'1..1',l:'exactly one'},
+        {car:'0..1',l:'zero or one'},
+        {car:'1..n',l:'one or more'},
+        {car:'0..n',l:'zero or more'},
+        {car:'n',  l:'many (pivot)'}
+      ];
+      x=14;
+      ctx.font='10px monospace';ctx.textAlign='left';ctx.textBaseline='middle';
+      symbols.forEach(function(s){
+        legendBadge(x+8,y3,s.car,C.mu,0);
+        ctx.fillStyle=C.mu;
+        ctx.fillText(s.l,x+20,y3);
+        x+=20+ctx.measureText(s.l).width+18;
+      });
+
+      ctx.fillStyle='#3d444d';ctx.font='10px monospace';ctx.textAlign='right';ctx.textBaseline='middle';
+      ctx.fillText('drag  \xB7  scroll to zoom  \xB7  dbl-click to reset',cvW-14,y1);
+      ctx.textBaseline='alphabetic';
+    }
+
+    function draw(){
+      var W=cv.width/dpr,H=cv.height/dpr;
+      ctx.setTransform(dpr,0,0,dpr,0,0);
+      ctx.clearRect(0,0,W,H);
+      ctx.fillStyle=C.bg;ctx.fillRect(0,0,W,H);
+      ctx.save();ctx.translate(pan.x,pan.y);ctx.scale(zm,zm);
+      badges=[];
+      var edges=collectEdges();
+      edges.forEach(function(e){drawEdgeLine(e.a,e.b,e.col,e.dashed,e.label,e.carA,e.carB,e.off);});
+      nodes.forEach(function(n){drawNode(n);});
+      badges.forEach(function(b){drawBadge(b);});
+      ctx.restore();
+      drawLegend();
+    }
+
+    // \u2500\u2500 Interaction \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    var drag=null,dox=0,doy=0,isPan=false,ps={x:0,y:0};
+
+    function toW(mx,my){return{x:(mx-pan.x)/zm,y:(my-pan.y)/zm};}
+    function hitTest(wx,wy){
+      for(var i=nodes.length-1;i>=0;i--){var n=nodes[i];if(wx>=n.x&&wx<=n.x+n.w&&wy>=n.y&&wy<=n.y+n.h)return n;}
+      return null;
+    }
+
+    cv.addEventListener('mousedown',function(ev){
+      var r=cv.getBoundingClientRect(),mx=ev.clientX-r.left,my=ev.clientY-r.top;
+      var w=toW(mx,my),h=hitTest(w.x,w.y);
+      if(h){drag=h;dox=w.x-h.x;doy=w.y-h.y;}else{isPan=true;ps={x:mx-pan.x,y:my-pan.y};}
+      cv.style.cursor='grabbing';
+    });
+    window.addEventListener('mousemove',function(ev){
+      if(!drag&&!isPan)return;
+      var r=cv.getBoundingClientRect(),mx=ev.clientX-r.left,my=ev.clientY-r.top;
+      if(drag){var w=toW(mx,my);drag.x=w.x-dox;drag.y=w.y-doy;}
+      else{pan.x=mx-ps.x;pan.y=my-ps.y;}
+      draw();
+    });
+    window.addEventListener('mouseup',function(){drag=null;isPan=false;cv.style.cursor='grab';});
+    cv.addEventListener('wheel',function(ev){
+      ev.preventDefault();
+      var r=cv.getBoundingClientRect(),mx=ev.clientX-r.left,my=ev.clientY-r.top;
+      var d=ev.deltaY<0?1.1:0.91,nz=Math.max(0.25,Math.min(3,zm*d));
+      pan.x=mx-(mx-pan.x)*(nz/zm);pan.y=my-(my-pan.y)*(nz/zm);zm=nz;draw();
+    },{passive:false});
+    cv.addEventListener('dblclick',function(){
+      nodes.forEach(function(n,i){n.x=origPos[i].x;n.y=origPos[i].y;});
+      var r=cv.getBoundingClientRect();fitView(r.width,r.height);draw();
+    });
+    window.addEventListener('resize',function(){
+      resize();var r=cv.getBoundingClientRect();
+      computeLayout(r.width,r.height);savePos();fitView(r.width,r.height);draw();
+    });
+
+    document.getElementById('er-dl').addEventListener('click',function(){
+      var SCALE=parseInt(document.getElementById('er-scale').value,10)||3;
+      var pad=36;
+      var bx0=1e9,by0=1e9,bx1=-1e9,by1=-1e9;
+      nodes.forEach(function(n){
+        bx0=Math.min(bx0,n.x);by0=Math.min(by0,n.y);
+        bx1=Math.max(bx1,n.x+n.w);by1=Math.max(by1,n.y+n.h);
+      });
+      var cw=bx1-bx0+pad*2,ch=by1-by0+pad*2+LGH;
+      var oc=document.createElement('canvas');
+      oc.width=Math.round(cw*SCALE);oc.height=Math.round(ch*SCALE);
+      var sav={cv:cv,ctx:ctx,dpr:dpr,px:pan.x,py:pan.y,zm:zm};
+      cv=oc;ctx=oc.getContext('2d');dpr=SCALE;
+      pan.x=pad-bx0;pan.y=pad-by0;zm=1;
+      draw();
+      cv=sav.cv;ctx=sav.ctx;dpr=sav.dpr;pan.x=sav.px;pan.y=sav.py;zm=sav.zm;
+      var a=document.createElement('a');
+      a.download='er-diagram.png';a.href=oc.toDataURL('image/png');a.click();
+    });
+
+    // \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    requestAnimationFrame(function(){
+      resize();
+      computeNodeWidths();
+      var r=cv.getBoundingClientRect();
+      computeLayout(r.width,r.height);
+      var h=requiredH();
+      resize(h);r=cv.getBoundingClientRect();
+      computeLayout(r.width,r.height);
+      savePos();fitView(r.width,r.height);draw();
+    });
+    })();
+      `}</script>`
+  );
+}
+
 // src/router/templates/about.template.ts
 var _dir = (0, import_node_path3.dirname)((0, import_node_url.fileURLToPath)(importMetaUrl));
 var LOGO_SRC = (() => {
   try {
-    const buf = (0, import_node_fs3.readFileSync)((0, import_node_path3.join)(_dir, "../../assets/logo-color.png"));
-    return `data:image/png;base64,${buf.toString("base64")}`;
+    const buf = (0, import_node_fs3.readFileSync)((0, import_node_path3.join)(_dir, "../../assets/yrest-lockup.svg"));
+    return `data:image/svg+xml;base64,${buf.toString("base64")}`;
   } catch {
     return "";
   }
@@ -1061,6 +1795,7 @@ function generateAboutHtml(storage, options, handlers = /* @__PURE__ */ new Map(
   const customRoutes = storage.getRoutes();
   const base = options.base;
   const host = `http://${options.host}:${options.port}`;
+  const swaggerUrl = `https://petstore.swagger.io/?url=${encodeURIComponent(`${host}/_openapi.json`)}`;
   const modes = [];
   if (options.watch) modes.push(badge("watch", "#38bdf8", "#38bdf818"));
   if (options.readonly) modes.push(badge("readonly", "#94a3b8", "#94a3b818"));
@@ -1071,9 +1806,12 @@ function generateAboutHtml(storage, options, handlers = /* @__PURE__ */ new Map(
   if (handlers.size > 0) modes.push(badge(`handlers \xB7 ${handlers.size}`, "#f0883e", "#f0883e18"));
   if (options.idStrategy !== "increment")
     modes.push(badge(`id \xB7 ${options.idStrategy}`, "#a371f7", "#a371f718"));
+  const erDiagram = erDiagramSection(generateERData(storage));
   const accordions = collections.map((col, i) => resourceAccordion(col, base, i === 0)).join("");
   const paginationDesc = options.pageable.enabled ? `Pageable mode active \u2014 default limit <code>${options.pageable.limit}</code>. Response wrapped in <code>{ data, pagination }</code>.` : `Returns the requested slice. <code>X-Total-Count</code> header reflects the total before pagination.`;
-  return `<!DOCTYPE html>
+  return (
+    /*html*/
+    `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -1100,20 +1838,30 @@ function generateAboutHtml(storage, options, handlers = /* @__PURE__ */ new Map(
       width: 100%;
       background: linear-gradient(135deg, #0d1117 0%, #161b22 40%, #1a2332 100%);
       border-bottom: 1px solid var(--border);
-      padding: 48px 32px 40px;
+      padding: 20px 32px 16px;
     }
-    .banner-inner { max-width: 1100px; margin: 0 auto; }
-    .banner h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 800; letter-spacing: -2px; line-height: 1; }
+    .banner-inner { margin: 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
+    .banner-left { flex:1; min-width:0; }
+    .banner h1 { font-size: clamp(24px, 4vw, 40px); font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
     .banner h1 .y { color: var(--text); }
     .banner h1 .rest { color: var(--accent); }
-    .banner p { color: var(--text-muted); margin-top: 10px; font-size: 15px; }
-    .banner-meta { display: flex; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
-    .banner-meta span { color: var(--text-muted); font-size: 13px; }
+    .banner p { color: var(--text-muted); margin-top: 6px; font-size: 14px; }
+    .banner-meta { display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
+    .banner-meta span { color: var(--text-muted); font-size: 12px; }
     .banner-meta span strong { color: var(--text); font-family: monospace; }
+    .api-links { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
+    .btn-api { display:inline-block; padding:5px 12px; border-radius:6px; border:1px solid var(--border); color:var(--text-muted); text-decoration:none; font-size:12px; font-weight:500; background:var(--bg-card); white-space:nowrap; transition:border-color .15s,color .15s; }
+    .btn-api:hover { border-color:var(--border-hi); color:var(--text); }
+    .btn-swagger { border-color:var(--accent); color:var(--accent); }
+    .btn-swagger:hover { background:#58a6ff18; }
 
     /* \u2500\u2500 Layout \u2500\u2500 */
-    .wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 48px; }
+    .wrap { padding: 24px 32px 48px; }
     h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 32px 0 12px; }
+    .about-grid { display:grid; grid-template-columns:5fr 7fr; gap:28px; align-items:start; }
+    @media(max-width:960px) { .about-grid { grid-template-columns:1fr; } }
+    .col-left, .col-right { min-width:0; }
+    .col-left > h2:first-child, .col-right > h2:first-child { margin-top:0; }
 
     /* \u2500\u2500 Cards \u2500\u2500 */
     .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
@@ -1129,10 +1877,8 @@ function generateAboutHtml(storage, options, handlers = /* @__PURE__ */ new Map(
     .modes { display: flex; gap: 8px; flex-wrap: wrap; min-height: 28px; align-items: center; }
     .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
 
-    /* \u2500\u2500 Endpoints grid (2 cols on wide, 1 col on narrow) \u2500\u2500 */
-    .endpoints-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
-    @media (max-width: 860px) { .endpoints-grid { grid-template-columns: 1fr; } }
-    .nested-card { grid-column: 1 / -1; }
+    /* \u2500\u2500 Endpoints list \u2500\u2500 */
+    .endpoints-grid { display: flex; flex-direction: column; gap: 10px; }
 
     /* \u2500\u2500 Accordion (details/summary) \u2500\u2500 */
     .resource-card {
@@ -1197,64 +1943,80 @@ function generateAboutHtml(storage, options, handlers = /* @__PURE__ */ new Map(
 
   <div class="banner">
     <div class="banner-inner">
-      ${LOGO_SRC ? `<img src="${LOGO_SRC}" alt="yRest" height="68" style="display:block;margin-bottom:0px" />` : `<h1><span class="y">y</span><span class="rest">Rest</span></h1>`}
-      <p>Zero-config REST API mock server</p>
-      <div class="banner-meta">
-        <span>URL <strong>${host}</strong></span>
-        <span>Base <strong>${base || "/"}</strong></span>
-        <span>File <strong>${options.file}</strong></span>
-        <span>Collections <strong>${collections.length}</strong></span>
+      <div class="banner-left">
+        ${LOGO_SRC ? `<img src="${LOGO_SRC}" alt="yRest" height="36" style="display:block;margin-bottom:4px" />` : `<h1><span class="y">y</span><span class="rest">Rest</span></h1>`}
+        <p>Zero-config REST API mock server</p>
+        <div class="banner-meta">
+          <span>URL <strong>${host}</strong></span>
+          <span>Base <strong>${base || "/"}</strong></span>
+          <span>File <strong>${options.file}</strong></span>
+          <span>Collections <strong>${collections.length}</strong></span>
+        </div>
+      </div>
+      <div class="api-links">
+        <a href="/_openapi" target="_blank" class="btn-api">OpenAPI YAML</a>
+        <a href="/_openapi.json" target="_blank" class="btn-api">OpenAPI JSON</a>
+        <a href="${swaggerUrl}" target="_blank" class="btn-api btn-swagger">Swagger UI \u2197</a>
       </div>
     </div>
   </div>
 
   <div class="wrap">
+    <div class="about-grid">
+
+      <div class="col-left">
+        <h2>Active Modes</h2>
+        <div class="card">
+          <div class="modes">${modes.length ? modes.join(" ") : `<span style="color:var(--text-muted);font-size:13px">none</span>`}</div>
+          ${options.watch ? `<div class="warn">\u26A0 <strong>Watch mode:</strong> data changes in existing collections reload automatically. Adding or removing entire collections requires a server restart.</div>` : ""}
+        </div>
+
+        <h2>Endpoints</h2>
+        <div class="endpoints-grid">
+          ${accordions}
+          ${nestedRoutesAccordion(relations, base)}
+          ${options.snapshot ? snapshotAccordion() : ""}
+          ${customRoutesAccordion(customRoutes, base, handlers)}
+          ${handlersAccordion(handlers, customRoutes, base)}
+        </div>
+
+        <h2>Query Parameters</h2>
+        <div class="card">
+          <table class="param-table">
+            <thead><tr><th>Param</th><th>Example</th><th>Description</th></tr></thead>
+            <tbody>
+              <tr><td><code>?field=value</code></td><td><code>?name=Ana&amp;role=admin</code></td><td>Filter by any field. Multiple params are ANDed.</td></tr>
+              <tr><td><code>?field_gte / _lte</code></td><td><code>?price_gte=10&amp;price_lte=50</code></td><td>Numeric or lexicographic range. Works with any comparable field.</td></tr>
+              <tr><td><code>?field_ne</code></td><td><code>?status_ne=inactive</code></td><td>Exclude items where the field equals the value.</td></tr>
+              <tr><td><code>?field_like</code></td><td><code>?name_like=ana</code></td><td>Case-insensitive substring match.</td></tr>
+              <tr><td><code>?field_start</code></td><td><code>?name_start=A</code></td><td>Case-insensitive prefix match.</td></tr>
+              <tr><td><code>?field_regex</code></td><td><code>?email_regex=gmail</code></td><td>Case-insensitive regular expression match.</td></tr>
+              <tr><td><code>?_q</code></td><td><code>?_q=ana</code></td><td>Full-text search across all scalar fields (case-insensitive substring).</td></tr>
+              <tr><td><code>?_sort &amp; ?_order</code></td><td><code>?_sort=name&amp;_order=desc</code></td><td>Sort by field. <code>_order</code>: <code>asc</code> (default) or <code>desc</code>.</td></tr>
+              <tr><td><code>?_page &amp; ?_limit</code></td><td><code>?_page=2&amp;_limit=10</code></td><td>${paginationDesc}</td></tr>
+              <tr><td><code>?_expand</code></td><td><code>?_expand=user</code></td><td>Embed a related parent object inline. Requires <code>_rel</code> in the YAML file.</td></tr>
+              <tr><td><code>?_embed</code></td><td><code>?_embed=posts</code></td><td>Embed child collections into each parent item. Requires <code>_rel</code> in the YAML file.</td></tr>
+              <tr><td><code>?_fields</code></td><td><code>?_fields=id,name</code></td><td>Return only the specified fields. Applied last \u2014 can include embedded/expanded keys.</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
 
-    <h2>Active Modes</h2>
-    <div class="card">
-      <div class="modes">${modes.length ? modes.join(" ") : `<span style="color:var(--text-muted);font-size:13px">none</span>`}</div>
-      ${options.watch ? `<div class="warn">\u26A0 <strong>Watch mode:</strong> data changes in existing collections reload automatically. Adding or removing entire collections requires a server restart.</div>` : ""}
-    </div>
-
-    <h2>Endpoints</h2>
-    <div class="endpoints-grid">
-      ${accordions}
-      ${nestedRoutesAccordion(relations, base)}
-      ${options.snapshot ? snapshotAccordion() : ""}
-      ${customRoutesAccordion(customRoutes, base, handlers)}
-      ${handlersAccordion(handlers, customRoutes, base)}
-    </div>
+      <div class="col-right">
+        ${erDiagram}
+        ${collections.length ? `<h2>Examples</h2><div class="card">${examplesBlock(collections, relations, base, host, options, customRoutes[0])}</div>` : ""}
+      </div>
 
-    <h2>Query Parameters</h2>
-    <div class="card">
-      <table class="param-table">
-        <thead><tr><th>Param</th><th>Example</th><th>Description</th></tr></thead>
-        <tbody>
-          <tr><td><code>?field=value</code></td><td><code>?name=Ana&amp;role=admin</code></td><td>Filter by any field. Multiple params are ANDed.</td></tr>
-          <tr><td><code>?field_gte / _lte</code></td><td><code>?price_gte=10&amp;price_lte=50</code></td><td>Numeric or lexicographic range. Works with any comparable field.</td></tr>
-          <tr><td><code>?field_ne</code></td><td><code>?status_ne=inactive</code></td><td>Exclude items where the field equals the value.</td></tr>
-          <tr><td><code>?field_like</code></td><td><code>?name_like=ana</code></td><td>Case-insensitive substring match.</td></tr>
-          <tr><td><code>?field_start</code></td><td><code>?name_start=A</code></td><td>Case-insensitive prefix match.</td></tr>
-          <tr><td><code>?field_regex</code></td><td><code>?email_regex=gmail</code></td><td>Case-insensitive regular expression match.</td></tr>
-          <tr><td><code>?_q</code></td><td><code>?_q=ana</code></td><td>Full-text search across all scalar fields (case-insensitive substring).</td></tr>
-          <tr><td><code>?_sort &amp; ?_order</code></td><td><code>?_sort=name&amp;_order=desc</code></td><td>Sort by field. <code>_order</code>: <code>asc</code> (default) or <code>desc</code>.</td></tr>
-          <tr><td><code>?_page &amp; ?_limit</code></td><td><code>?_page=2&amp;_limit=10</code></td><td>${paginationDesc}</td></tr>
-          <tr><td><code>?_expand</code></td><td><code>?_expand=user</code></td><td>Embed a related parent object inline. Requires <code>_rel</code> in the YAML file.</td></tr>
-          <tr><td><code>?_embed</code></td><td><code>?_embed=posts</code></td><td>Embed child collections into each parent item. Requires <code>_rel</code> in the YAML file.</td></tr>
-          <tr><td><code>?_fields</code></td><td><code>?_fields=id,name</code></td><td>Return only the specified fields. Applied last \u2014 can include embedded/expanded keys.</td></tr>
-        </tbody>
-      </table>
     </div>
 
-    ${collections.length ? `<h2>Examples</h2><div class="card">${examplesBlock(collections, relations, base, host, options, customRoutes[0])}</div>` : ""}
-
     <footer>
       Powered by <a href="https://github.com/aggiovato/yRest" target="_blank">@yrest/cli</a> &nbsp;\xB7&nbsp; <a href="/_about">/_about</a>
     </footer>
 
   </div>
 </body>
-</html>`;
+</html>`
+  );
 }
 
 // src/router/routes/about.routes.ts
@@ -1842,12 +2604,23 @@ var NestedRouteCommand = class {
   relations;
   base;
   register(server) {
+    const registered = /* @__PURE__ */ new Set();
     for (const [source, fields] of Object.entries(this.relations)) {
       for (const [key, def] of Object.entries(fields)) {
         if (def.type === "many2many") {
-          this.registerMany2Many(server, source, key, def);
+          const fwd = `${this.base}/${source}/:id/${key}`;
+          const inv = `${this.base}/${def.target}/:id/${source}`;
+          if (!registered.has(fwd) && !registered.has(inv)) {
+            registered.add(fwd);
+            registered.add(inv);
+            this.registerMany2Many(server, source, key, def);
+          }
         } else {
-          this.registerFkRelation(server, source, key, def.target, def.type);
+          const collPath = `${this.base}/${def.target}/:id/${source}`;
+          if (!registered.has(collPath)) {
+            registered.add(collPath);
+            this.registerFkRelation(server, source, key, def.target, def.type);
+          }
         }
       }
     }