@r0kshan/cairn 1.0.0-RC14 → 1.0.0-RC15

package/bin/cairn.mjs

@@ -92340,11 +92340,12 @@ var init_lexer = __esm({
 });
 
 // src/models/ast.ts
-var ATTACH_SIDES, defaultDiagramStyle, explanations;
+var ATTACH_SIDES, ATTACH_ROLES, defaultDiagramStyle, explanations;
 var init_ast = __esm({
   "src/models/ast.ts"() {
     "use strict";
     ATTACH_SIDES = ["left", "right", "top", "bottom"];
+    ATTACH_ROLES = ["producer", "consumer"];
     defaultDiagramStyle = () => ({
       crossingHops: true,
       compact: false,
@@ -92384,7 +92385,9 @@ var init_ast = __esm({
       E0215: "A deployed application (app-instance) must sit on a server or in a zone. It shows WHERE an application runs, without its internal detail (C4 deployment convention).",
       E0216: "Network zones belong to a site (or nest inside a larger zone): DMZ and LAN only mean something relative to a perimeter.",
       W0540: 'C4 container-diagram practice: inter-process relationships should be labelled with their technology/protocol ("the how, not just the what"). Human/actor interactions are exempt. Add `(API_REST, JSON)` after the label, or ignore if the diagram is intentionally functional-only.',
-      E0223: "Unknown attachment side. A flow endpoint may name the side it attaches to \u2014 `APP.right -> DB.left` \u2014 using the diagram as it is read: `left`, `right`, `top`, `bottom`. The side is a hint, not a guarantee: a side the layout cannot reach is dropped with a W0570 warning rather than forced.",
+      E0223: "Unknown endpoint suffix. A flow endpoint may name the side it attaches to \u2014 `APP.right -> DB.left` \u2014 using the diagram as it is read: `left`, `right`, `top`, `bottom`. It may instead name its role towards a queue at the other end: `producer` or `consumer`. A declared side is a hint, not a guarantee: one the layout cannot reach is dropped with a W0570 warning rather than forced.",
+      E0224: "An endpoint role says what this element does with the *queue* at the other end of the flow (`CAPTURE.producer -> EVENTS`), so the other end has to be one. Point the flow at a queue, or drop the role \u2014 between two ordinary elements the arrow already says everything a role would.",
+      E0225: "A flow's queue endpoint carries both a declared side and a role at the other end, and they are two answers to one question: `producer` already means the queue's left cap and `consumer` its right. Keep the role and drop the side, or keep the side and drop the role.",
       E0240: "The infrastructure view requires every flow to carry its protocol (and port if relevant): the flow matrix is the primary output of this view. Add `(HTTPS/443)` after the label.",
       E0221: 'Unknown business-object reference: a flow carries `[AN_ID]` that no `business-object` declaration defines. Declare it once (`business-object ID "Name" "description"`) so the registry and the chips stay consistent.',
       E0222: "Business objects are a logical-view concept (what data circulates between functional blocks). They are not part of the application or infrastructure views \u2014 model the exchange with the flow label and technical tail instead. Remove the `business-object` declaration and its `[refs]`, or switch the diagram to `logical`.",
@@ -93136,56 +93139,60 @@ function parseElement(p, sourceToken, parent) {
   }
   (parent ? parent.children : model.elements).push(element);
 }
-function splitEndpoint(token, flow, role) {
+function splitEndpoint(token, flow, end) {
   const dot = token.text.lastIndexOf(".");
   if (dot <= 0 || dot === token.text.length - 1) return null;
   const base = token.text.slice(0, dot);
-  const side = token.text.slice(dot + 1);
+  const suffix = token.text.slice(dot + 1);
   return {
     flow,
-    role,
+    end,
     raw: token.text,
     rawSpan: token.span,
     base,
     baseSpan: { line: token.span.line, col: token.span.col, len: base.length },
-    side,
-    sideSpan: { line: token.span.line, col: token.span.col + dot + 1, len: side.length }
+    suffix,
+    suffixSpan: { line: token.span.line, col: token.span.col + dot + 1, len: suffix.length }
   };
 }
-function resolveAttachSides(splits, model, diagnostics) {
+function resolveEndpointSuffixes(splits, model, diagnostics) {
   for (const split of splits) {
+    const isSide = ATTACH_SIDES.includes(split.suffix);
+    const isRole = ATTACH_ROLES.includes(split.suffix);
     if (model.index.has(split.raw)) {
-      if (ATTACH_SIDES.includes(split.side))
+      if (isSide || isRole)
         diagnostics.push({
           code: "W0571",
           severity: "warning",
-          message: `\`${split.raw}\` is a declared element, so \`.${split.side}\` is not read as an attachment side`,
+          message: `\`${split.raw}\` is a declared element, so \`.${split.suffix}\` is not read as ${isSide ? "an attachment side" : "a role"}`,
           span: split.rawSpan,
           note: "a declared id always wins over the `ID.side` reading",
-          help: `rename the element if you meant to attach the flow to the ${split.side} side of \`${split.base}\``
+          help: isSide ? `rename the element if you meant to attach the flow to the ${split.suffix} side of \`${split.base}\`` : `rename the element if you meant \`${split.base}\` to be the ${split.suffix} of the queue at the other end`
         });
       continue;
     }
     if (!model.index.has(split.base)) continue;
-    const known = ATTACH_SIDES.includes(split.side);
-    if (!known)
+    if (!isSide && !isRole)
       diagnostics.push({
         code: "E0223",
         severity: "error",
-        message: `unknown attachment side \`${split.side}\``,
-        span: split.sideSpan,
-        note: "sides are named as the diagram is read",
-        help: "use `left`, `right`, `top` or `bottom`, e.g. `APP.right -> DB.left`"
+        message: `unknown endpoint suffix \`${split.suffix}\``,
+        span: split.suffixSpan,
+        note: "an endpoint names either the side it attaches to, as the diagram is read, or its role towards a queue",
+        help: "use `left`, `right`, `top` or `bottom` \u2014 `APP.right -> DB.left` \u2014 or `producer` / `consumer`, e.g. `CAPTURE.producer -> EVENTS`"
       });
-    const side = known ? { value: split.side, span: split.sideSpan } : void 0;
-    if (split.role === "from") {
+    const side = isSide ? { value: split.suffix, span: split.suffixSpan } : void 0;
+    const role = isRole ? { value: split.suffix, span: split.suffixSpan } : void 0;
+    if (split.end === "from") {
       split.flow.from = split.base;
       split.flow.fromSpan = split.baseSpan;
       split.flow.fromSide = side;
+      split.flow.fromRole = role;
     } else {
       split.flow.to = split.base;
       split.flow.toSpan = split.baseSpan;
       split.flow.toSide = side;
+      split.flow.toRole = role;
     }
   }
 }
@@ -93462,7 +93469,7 @@ function parse(src) {
   for (const [id, element] of indexElementsById(model.elements)) {
     if (!model.index.has(id)) model.index.set(id, element);
   }
-  resolveAttachSides(endpointSplits, model, diagnostics);
+  resolveEndpointSuffixes(endpointSplits, model, diagnostics);
   return { model, diags: diagnostics };
 }
 function applyStyleEntry(entry) {
@@ -93694,10 +93701,11 @@ var init_parser = __esm({
 });
 
 // src/views.ts
-var logicalView, applicationView, infrastructureView, views;
+var LINE_STYLES2, logicalView, applicationView, infrastructureView, views;
 var init_views = __esm({
   "src/views.ts"() {
     "use strict";
+    LINE_STYLES2 = ["solid", "dashed", "dotted"];
     logicalView = {
       name: "logical",
       laneKinds: ["external"],
@@ -93729,6 +93737,16 @@ var init_views = __esm({
       },
       legendFlowLabel: "Functional flow (label = exchanged data)",
       legendFlowLabelFr: "Flux fonctionnel (libell\xE9 = donn\xE9es \xE9chang\xE9es)",
+      legendLineStyles: {
+        solid: "Direct exchange",
+        dashed: "Asynchronous or event-driven exchange",
+        dotted: "Dependency \u2014 no data exchanged"
+      },
+      legendLineStylesFr: {
+        solid: "\xC9change direct",
+        dashed: "\xC9change asynchrone ou \xE9v\xE9nementiel",
+        dotted: "D\xE9pendance \u2014 aucune donn\xE9e \xE9chang\xE9e"
+      },
       flowTechRequired: null,
       flowTechRecommended: null,
       businessObjects: true,
@@ -93824,6 +93842,7 @@ var init_views = __esm({
     applicationView = {
       name: "application",
       laneKinds: ["external"],
+      hubKinds: ["queue"],
       kinds: [
         "actor-group",
         "actor",
@@ -93900,6 +93919,16 @@ var init_views = __esm({
       },
       legendFlowLabel: "Application flow \u2014 (protocol, format) under the label",
       legendFlowLabelFr: "Flux applicatif \u2014 (protocole, format) sous le libell\xE9",
+      legendLineStyles: {
+        solid: "Synchronous call (request / response)",
+        dashed: "Asynchronous exchange (message, event)",
+        dotted: "Dependency \u2014 no direct call"
+      },
+      legendLineStylesFr: {
+        solid: "Appel synchrone (requ\xEAte / r\xE9ponse)",
+        dashed: "\xC9change asynchrone (message, \xE9v\xE9nement)",
+        dotted: "D\xE9pendance \u2014 sans appel direct"
+      },
       flowLabelRequired: null,
       flowTechRequired: null,
       flowTechRecommended: {
@@ -94023,6 +94052,7 @@ var init_views = __esm({
     infrastructureView = {
       name: "infrastructure",
       laneKinds: ["external"],
+      hubKinds: ["queue"],
       kinds: [
         "actor",
         "device",
@@ -94085,6 +94115,16 @@ var init_views = __esm({
       },
       legendFlowLabel: "Technical flow (protocol, port)",
       legendFlowLabelFr: "Flux technique (protocole, port)",
+      legendLineStyles: {
+        solid: "Permanent link \u2014 nominal traffic",
+        dashed: "Asynchronous or intermittent link",
+        dotted: "Dependency \u2014 outside nominal traffic"
+      },
+      legendLineStylesFr: {
+        solid: "Lien permanent \u2014 trafic nominal",
+        dashed: "Lien asynchrone ou intermittent",
+        dotted: "D\xE9pendance \u2014 hors trafic nominal"
+      },
       flowLabelRequired: null,
       flowTechRecommended: null,
       flowTechRequired: {
@@ -94423,6 +94463,7 @@ function validate(model) {
     ...checkMissingLabels(elements),
     ...checkNesting(elements, view),
     ...checkFlows(model, view),
+    ...checkEndpointRoles(model, view),
     ...checkLogos(elements, view),
     ...checkBusinessObjects(model, view),
     ...checkMinimumCounts(elements, model, view),
@@ -94541,6 +94582,42 @@ function checkNesting(elements, view) {
   }
   return diagnostics;
 }
+function checkEndpointRoles(model, view) {
+  const diagnostics = [];
+  const hubKinds = new Set(view.hubKinds ?? []);
+  const isHub = (id) => hubKinds.has(model.index.get(id)?.kind ?? "");
+  for (const flow of model.flows) {
+    for (const [role, hubId, hubSide] of [
+      [flow.fromRole, flow.to, flow.toSide],
+      [flow.toRole, flow.from, flow.fromSide]
+    ]) {
+      if (!role) continue;
+      if (!model.index.has(hubId)) continue;
+      if (!isHub(hubId)) {
+        const kinds = [...hubKinds];
+        diagnostics.push({
+          code: "E0224",
+          severity: "error",
+          message: `\`${role.value}\` needs a ${kinds.join(" or ") || "queue"} at the other end of the flow`,
+          span: role.span,
+          note: `\`${hubId}\` is ${model.index.get(hubId)?.kind ? `a \`${model.index.get(hubId).kind}\`` : "not one"}`,
+          help: "a role says what this element does with a queue \u2014 between two ordinary elements the arrow already says it"
+        });
+        continue;
+      }
+      if (hubSide)
+        diagnostics.push({
+          code: "E0225",
+          severity: "error",
+          message: `\`${hubId}.${hubSide.value}\` and \`${role.value}\` both decide where this flow meets the queue`,
+          span: hubSide.span,
+          note: "`producer` means the queue's left cap and `consumer` its right",
+          help: "keep the role and drop the side, or keep the side and drop the role"
+        });
+    }
+  }
+  return diagnostics;
+}
 function checkFlows(model, view) {
   const diagnostics = [];
   const isActor = (id) => {
@@ -96252,13 +96329,34 @@ function compactVertical(scene) {
   }
   scene.height = Math.ceil(heightAfter + bottomMargin);
 }
-var KEEP_GAP, EDGE_MARGIN, MIN_SAVING;
+function fitCanvas(scene) {
+  let maxX = 0;
+  let maxY = 0;
+  for (const node of scene.nodes) {
+    maxX = Math.max(maxX, node.x + node.width);
+    maxY = Math.max(maxY, node.y + node.height);
+  }
+  for (const edge of scene.edges) {
+    for (const point of edge.pts) {
+      maxX = Math.max(maxX, point.x);
+      maxY = Math.max(maxY, point.y);
+    }
+    for (const label of edge.labels) {
+      maxX = Math.max(maxX, label.x + label.width);
+      maxY = Math.max(maxY, label.y + label.height);
+    }
+  }
+  scene.width = Math.max(scene.width, Math.ceil(maxX) + CANVAS_MARGIN);
+  scene.height = Math.max(scene.height, Math.ceil(maxY) + CANVAS_MARGIN);
+}
+var KEEP_GAP, EDGE_MARGIN, MIN_SAVING, CANVAS_MARGIN;
 var init_compact = __esm({
   "src/compact.ts"() {
     "use strict";
     KEEP_GAP = 14;
     EDGE_MARGIN = 22;
     MIN_SAVING = 4;
+    CANVAS_MARGIN = 10;
   }
 });
 
@@ -98936,8 +99034,8 @@ function optimiseRoutes(scene, titleBoxes = [], folded = false) {
       const subject = { ends, edge };
       const out = [];
       const seen = /* @__PURE__ */ new Set();
-      const aSides = edge.pinned?.start ? [ends[0].side] : SIDES;
-      const bSides = edge.pinned?.end ? [ends[1].side] : SIDES;
+      const aSides = sideFixed(edge, "start") ? [ends[0].side] : SIDES;
+      const bSides = sideFixed(edge, "end") ? [ends[1].side] : SIDES;
       for (const aSide of aSides)
         for (const bSide of bSides) {
           const sides = { a: aSide, b: bSide };
@@ -98996,12 +99094,13 @@ function optimiseRoutes(scene, titleBoxes = [], folded = false) {
   }
   for (const edge of scene.edges) if (edge.pts.length >= 2) enforceOrthogonal(edge);
 }
-var ORTHOGONAL_EPSILON, MIN_HUG_SPAN, CHANNEL_INSET, SNAP, JOG_SNAP, SIDE_INSET, MIN_SIDE_INSET, FAN_REACH2, SEAT_OFFSETS, segmentsCross, segmentLength, wouldMerge, seatWithAlong, crossingsOf, SEAT_GRID, SEAT_CLEAR, CHANNEL_MARGIN, CHANNEL_STEP, CHANNEL_CLEAR;
+var sideFixed, ORTHOGONAL_EPSILON, MIN_HUG_SPAN, CHANNEL_INSET, SNAP, JOG_SNAP, SIDE_INSET, MIN_SIDE_INSET, FAN_REACH2, SEAT_OFFSETS, segmentsCross, segmentLength, wouldMerge, seatWithAlong, crossingsOf, SEAT_GRID, SEAT_CLEAR, CHANNEL_MARGIN, CHANNEL_STEP, CHANNEL_CLEAR;
 var init_edge_tidy = __esm({
   "src/edge-tidy.ts"() {
     "use strict";
     init_readability();
     init_geometry();
+    sideFixed = (edge, end) => !!(edge.pinned?.[end] || edge.hubSided?.[end]);
     ORTHOGONAL_EPSILON = 0.5;
     MIN_HUG_SPAN = 24;
     CHANNEL_INSET = 24;
@@ -99660,8 +99759,7 @@ function constrainPorts(graph, scene, flagged, model) {
 }
 function elkPartitionOf(element, index, view, ingressExternal) {
   if (!view.partitionByOrder) return view.partitions[element.kind] ?? 1;
-  if ((view.ingressKinds ?? DEFAULT_INGRESS_KINDS).includes(element.kind))
-    return INGRESS_PARTITION;
+  if ((view.ingressKinds ?? DEFAULT_INGRESS_KINDS).includes(element.kind)) return INGRESS_PARTITION;
   if (element.kind === "external")
     return ingressExternal.has(element.id) ? INGRESS_PARTITION : EGRESS_PARTITION;
   if (view.partitions[element.kind] !== void 0) return 90 + view.partitions[element.kind];
@@ -99710,13 +99808,15 @@ function readingSlots(model, view, ingressExternal) {
   }
   return slotOf;
 }
+function elkEnds(flow) {
+  return laidOutReversed(flow) ? { sources: [flow.to], targets: [flow.from] } : { sources: [flow.from], targets: [flow.to] };
+}
 function elkFlowEdge(flow, ctx, labelWrap) {
   const { compact, numbered, fonts, businessObjectName } = ctx;
   if (numbered)
     return {
       id: flow.id,
-      sources: [flow.from],
-      targets: [flow.to],
+      ...elkEnds(flow),
       labels: [
         {
           text: String(parseInt(flow.id.slice(1), 10)),
@@ -99741,13 +99841,35 @@ function elkFlowEdge(flow, ctx, labelWrap) {
   });
   return {
     id: flow.id,
-    sources: [flow.from],
-    targets: [flow.to],
+    ...elkEnds(flow),
     labels: text || chips.length ? [{ text, ...labelBox }] : []
   };
 }
-function applyDeclaredPorts(graph, model) {
-  const pinned = model.flows.filter((flow) => flow.fromSide || flow.toSide);
+function laidOutReversed(flow) {
+  return flow.fromRole?.value === "consumer" || flow.toRole?.value === "producer";
+}
+function roleCap(role) {
+  if (!role) return null;
+  return role.value === "producer" ? "left" : "right";
+}
+function hubFlowSides(model, view) {
+  const derived = /* @__PURE__ */ new Map();
+  const hubKinds = new Set(view.hubKinds ?? []);
+  if (!hubKinds.size) return derived;
+  const hubs = new Set(
+    indexElementsById(model.elements).filter(([, element]) => hubKinds.has(element.kind)).map(([id]) => id)
+  );
+  if (!hubs.size) return derived;
+  for (const flow of model.flows) {
+    const sides = {};
+    if (hubs.has(flow.to) && !flow.toSide) sides.to = roleCap(flow.fromRole) ?? "left";
+    if (hubs.has(flow.from) && !flow.fromSide) sides.from = roleCap(flow.toRole) ?? "right";
+    if (sides.to || sides.from) derived.set(flow.id, sides);
+  }
+  return derived;
+}
+function applyDeclaredPorts(graph, model, derived) {
+  const pinned = model.flows.filter((flow) => flow.fromSide || flow.toSide || derived.has(flow.id));
   if (!pinned.length) return;
   const elkById = /* @__PURE__ */ new Map();
   const register = (node) => {
@@ -99758,14 +99880,15 @@ function applyDeclaredPorts(graph, model) {
   for (const flow of pinned) {
     const elkEdge = (graph.edges ?? []).find((edge) => edge.id === flow.id);
     if (!elkEdge) continue;
+    const hub = derived.get(flow.id);
     for (const [role, declared, nodeId] of [
-      ["out", flow.fromSide, flow.from],
-      ["in", flow.toSide, flow.to]
+      ["out", flow.fromSide ?? sideRequest(hub?.from), flow.from],
+      ["in", flow.toSide ?? sideRequest(hub?.to), flow.to]
     ]) {
       if (!declared) continue;
       const elkNode = elkById.get(nodeId);
       if (!elkNode) continue;
-      const portId = `${flow.id}#${role}`;
+      const portId = `${flow.id}#${role === "out" !== laidOutReversed(flow) ? "out" : "in"}`;
       elkNode.ports = [
         ...elkNode.ports ?? [],
         {
@@ -99776,7 +99899,7 @@ function applyDeclaredPorts(graph, model) {
         }
       ];
       elkNode.layoutOptions = { ...elkNode.layoutOptions, "elk.portConstraints": "FIXED_SIDE" };
-      if (role === "out") elkEdge.sources = [portId];
+      if (role === "out" !== laidOutReversed(flow)) elkEdge.sources = [portId];
       else elkEdge.targets = [portId];
     }
   }
@@ -99838,7 +99961,7 @@ function buildElkGraph(ctx, direction, options) {
       "elk.edgeRouting": "ORTHOGONAL",
       "elk.partitioning.activate": "true",
       "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
-      "elk.layered.compaction.postCompaction.strategy": "EDGE_LENGTH",
+      "elk.layered.compaction.postCompaction.strategy": options?.postCompaction ?? "EDGE_LENGTH",
       "elk.layered.feedbackEdges": "true",
       "elk.layered.thoroughness": "30",
       "elk.separateConnectedComponents": "false",
@@ -99884,7 +100007,11 @@ function buildElkGraph(ctx, direction, options) {
     }),
     edges: model.flows.map((flow) => elkFlowEdge(flow, ctx, options?.labelWrap))
   };
-  applyDeclaredPorts(graph, model);
+  applyDeclaredPorts(
+    graph,
+    model,
+    options?.hubPorts === false ? /* @__PURE__ */ new Map() : hubFlowSides(model, view)
+  );
   return graph;
 }
 function recordRepairs(scene, routesBefore) {
@@ -99953,7 +100080,9 @@ function snapLanes(scene, laneOf, axis) {
   if (!laneOf.size) return;
   const leaves = leafBoxesOf(scene);
   const tilted = (edges) => edges.reduce(
-    (total, edge) => total + edge.pts.filter((point, i) => i > 0 && Math.abs(point.x - edge.pts[i - 1].x) >= 0.5 && Math.abs(point.y - edge.pts[i - 1].y) >= 0.5).length,
+    (total, edge) => total + edge.pts.filter(
+      (point, i) => i > 0 && Math.abs(point.x - edge.pts[i - 1].x) >= 0.5 && Math.abs(point.y - edge.pts[i - 1].y) >= 0.5
+    ).length,
     0
   );
   const touching = /* @__PURE__ */ new Map();
@@ -99997,7 +100126,9 @@ function snapLanes(scene, laneOf, axis) {
             point[axis] += delta;
       const broke = crossingsAround(scene, edges) > crossingsBefore || shortJogs(edges) > jogsBefore || tilted(edges) > tiltsBefore || edges.some((edge) => crossesLeaf(edge, leaves, attachedTo.get(edge.id) ?? /* @__PURE__ */ new Set())) || // Containers included: a lane member is top-level, so it has no
       // legitimate container ancestor and may not land on one.
-      scene.nodes.some((other) => other !== node && !node.container && other.x < node.x + node.width && node.x < other.x + other.width && other.y < node.y + node.height && node.y < other.y + other.height);
+      scene.nodes.some(
+        (other) => other !== node && !node.container && other.x < node.x + node.width && node.x < other.x + other.width && other.y < node.y + node.height && node.y < other.y + other.height
+      );
       if (broke) {
         node[axis] = target - delta;
         edges.forEach((edge, i) => {
@@ -100032,6 +100163,7 @@ function runGeometryPasses(scene, model, options) {
   clearSideHugs(scene, settledTitles);
   anchorFlowLabels(scene, settledTitles);
   swapCrossingSiblingSeats(scene);
+  fitCanvas(scene);
 }
 function laneAssignment(model, view) {
   const laneOf = /* @__PURE__ */ new Map();
@@ -100089,6 +100221,38 @@ function laneAssignment(model, view) {
   }
   return laneOf;
 }
+async function withHubPortFallback(elk, makeGraph, direction, options) {
+  const run = async (spec) => await elk.layout(makeGraph(direction, spec));
+  const rungs = options?.hubPorts === false ? [] : [
+    { ...options, postCompaction: "EDGE_LENGTH_CONSTRAINT_LOCKING" },
+    { ...options, postCompaction: "NONE" },
+    { ...options, hubPorts: false }
+  ];
+  try {
+    return { result: await run(options), options };
+  } catch (error) {
+    for (const [index, rung] of rungs.entries()) {
+      try {
+        return { result: await run(rung), options: rung };
+      } catch (rungError) {
+        if (index === rungs.length - 1) throw rungError;
+      }
+    }
+    throw error;
+  }
+}
+function markDeclaredTerminals(edges, model, view, hubPorts) {
+  const pinnedFlows = new Map(
+    model.flows.filter((flow) => flow.fromSide || flow.toSide).map((flow) => [flow.id, { start: !!flow.fromSide, end: !!flow.toSide }])
+  );
+  const hubSides = hubPorts ? hubFlowSides(model, view) : /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const pinned = pinnedFlows.get(edge.id);
+    if (pinned) edge.pinned = { ...pinned };
+    const hub = hubSides.get(edge.id);
+    if (hub) edge.hubSided = { start: !!hub.from, end: !!hub.to };
+  }
+}
 async function layout(model, view) {
   const elk = await getElk();
   const businessObjectName = new Map(model.businessObjects.map((bo) => [bo.id, bo.name]));
@@ -100120,7 +100284,7 @@ async function layout(model, view) {
   };
   const makeGraph = (direction, options) => buildElkGraph(graphContext, direction, options);
   const kindOf = new Map(indexElementsById(model.elements));
-  const sceneFromResult = (result2, layoutMs2, lanes = true) => {
+  const sceneFromResult = (result2, layoutMs2, laidOutWith, lanes = true) => {
     const origins = {
       root: { x: 0, y: 0 }
     };
@@ -100128,13 +100292,9 @@ async function layout(model, view) {
     const nodes = walkedNodes.map((walked) => walked.node);
     for (const walked of walkedNodes) origins[walked.id] = { x: walked.x, y: walked.y };
     const edges = collectSceneEdges(result2, origins, numbered, edgeFontSize);
-    const pinnedFlows = new Map(
-      model.flows.filter((flow) => flow.fromSide || flow.toSide).map((flow) => [flow.id, { start: !!flow.fromSide, end: !!flow.toSide }])
-    );
-    for (const edge of edges) {
-      const pinned = pinnedFlows.get(edge.id);
-      if (pinned) edge.pinned = { ...pinned };
-    }
+    const reversed = new Set(model.flows.filter(laidOutReversed).map((flow) => flow.id));
+    for (const edge of edges) if (reversed.has(edge.id)) edge.pts.reverse();
+    markDeclaredTerminals(edges, model, view, laidOutWith?.hubPorts !== false);
     const scene = {
       width: Math.ceil(result2.width),
       height: Math.ceil(result2.height),
@@ -100151,6 +100311,7 @@ async function layout(model, view) {
   };
   const laneOf = laneAssignment(model, view);
   const startTime = Date.now();
+  const layoutGraph = (direction, options) => withHubPortFallback(elk, makeGraph, direction, options);
   let result;
   let winnerDirection;
   let winnerOptions;
@@ -100161,9 +100322,10 @@ async function layout(model, view) {
       { direction: "RIGHT", options: { labelWrap: 14, tight: true } },
       { direction: "RIGHT", options: { labelWrap: 14, tight: true, minLayers: true } }
     ] : [{ direction: "DOWN" }, { direction: "DOWN", options: { labelWrap: 16 } }];
-    const candidates = await Promise.all(
-      graphSpecs.map((spec) => elk.layout(makeGraph(spec.direction, spec.options)))
+    const laidOutSpecs = await Promise.all(
+      graphSpecs.map((spec) => layoutGraph(spec.direction, spec.options))
     );
+    const candidates = laidOutSpecs.map((laidOut) => laidOut.result);
     const preferWide = disposition === "slide";
     const orientedLayouts = candidates.map((layoutResult, index) => ({ layoutResult, index })).filter(
       ({ layoutResult }) => preferWide ? layoutResult.width >= layoutResult.height : layoutResult.height >= layoutResult.width
@@ -100176,7 +100338,7 @@ async function layout(model, view) {
     );
     result = winner.layoutResult;
     winnerDirection = graphSpecs[winner.index].direction;
-    winnerOptions = graphSpecs[winner.index].options;
+    winnerOptions = laidOutSpecs[winner.index].options;
     if (disposition === "slide") {
       const folded = await foldedLayout(model, view, elk);
       if (folded && fitScore(result) >= fitScore(folded) * 1.1) {
@@ -100190,11 +100352,10 @@ async function layout(model, view) {
     }
   } else {
     winnerDirection = disposition === "tall" ? "DOWN" : "RIGHT";
-    winnerOptions = void 0;
-    result = await elk.layout(makeGraph(winnerDirection));
+    ({ result, options: winnerOptions } = await layoutGraph(winnerDirection));
   }
   const layoutMs = Date.now() - startTime;
-  let base = sceneFromResult(result, layoutMs);
+  let base = sceneFromResult(result, layoutMs, winnerOptions);
   const layoutProfile = (candidate) => {
     const everyEdge = new Set(candidate.edges.map((edge) => edge.id));
     const profile = inspect(candidate, titleBoxesOf(candidate, model)).local(everyEdge, /* @__PURE__ */ new Map());
@@ -100204,6 +100365,8 @@ async function layout(model, view) {
   if (!aspectTarget && nodeCoverage(base) < DENSE_ENOUGH) {
     const denser = await denserLayout(base, {
       layout: (spec) => elk.layout(makeGraph(winnerDirection, spec)),
+      // Its specs carry the hub ports (none of them sets `hubPorts: false`), and
+      // a candidate elk refuses is dropped rather than retried without them.
       toScene: (laidOut) => sceneFromResult(laidOut, Date.now() - startTime),
       profile: layoutProfile
     });
@@ -100225,7 +100388,7 @@ async function layout(model, view) {
       const constrained = makeGraph(winnerDirection, winnerOptions);
       constrainPorts(constrained, current, flagged, model);
       const reresult = await elk.layout(constrained);
-      candidate = sceneFromResult(reresult, Date.now() - startTime);
+      candidate = sceneFromResult(reresult, Date.now() - startTime, winnerOptions);
     } catch {
       break;
     }
@@ -100237,7 +100400,7 @@ async function layout(model, view) {
   }
   return best?.scene ?? base;
 }
-var orderOption, semiInteractiveOption, PORT_PASS_ROUNDS, centerOf, DENSE_ENOUGH, DENSITY_GAIN, INGRESS_PARTITION, DEFAULT_INGRESS_KINDS, EGRESS_PARTITION, COMPACT_WRAP, SLOT_SCALE, SIDE_TO_ELK, ASPECT_TARGETS;
+var orderOption, semiInteractiveOption, PORT_PASS_ROUNDS, centerOf, DENSE_ENOUGH, DENSITY_GAIN, INGRESS_PARTITION, DEFAULT_INGRESS_KINDS, EGRESS_PARTITION, COMPACT_WRAP, SLOT_SCALE, SIDE_TO_ELK, sideRequest, ASPECT_TARGETS;
 var init_scene_layout = __esm({
   "src/scene-layout.ts"() {
     "use strict";
@@ -100268,6 +100431,7 @@ var init_scene_layout = __esm({
       top: "NORTH",
       bottom: "SOUTH"
     };
+    sideRequest = (side) => side ? { value: side } : void 0;
     ASPECT_TARGETS = {
       slide: 16 / 9,
       page: 0.71
@@ -100365,6 +100529,19 @@ var init_logo_attribution = __esm({
 });
 
 // src/svg-render.ts
+function bandLines(text, from, right, fontSize) {
+  const chars = Math.floor((right - from) / (fontSize * RENDER_CHAR_WIDTH));
+  return bandWrap(text, Math.max(8, chars));
+}
+function bandWrap(text, maxChars) {
+  return wrapText(text, maxChars).split("\n").flatMap((line) => {
+    if (line.length <= maxChars) return [line];
+    const parts = [];
+    for (let index = 0; index < line.length; index += maxChars)
+      parts.push(line.slice(index, index + maxChars));
+    return parts;
+  });
+}
 function assignSourceHues(model, hues) {
   const sourceHue = /* @__PURE__ */ new Map();
   for (const flow of model.flows) {
@@ -100417,19 +100594,39 @@ function auditRouteRepairs(deps) {
     for (let tier = 0; tier < 5; tier++) if (a[tier] !== b[tier]) return a[tier] < b[tier];
     return false;
   };
+  const flowOfBreach = (key) => {
+    if (key.startsWith("adrift:"))
+      return labels[Number.parseInt(key.slice("adrift:".length), 10)]?.flowId ?? null;
+    const body = key.slice(key.indexOf(":") + 1);
+    const cut = body.search(/[~:]/);
+    return cut < 0 ? body : body.slice(0, cut);
+  };
   const withRepair = stateHarm();
   const breachesWith = breaches();
   const repairedRoutes = repaired.map((edge) => edge.pts);
-  for (const edge of repaired) edge.pts = edge.repairedFrom;
-  resettle();
-  const withoutRepair = stateHarm();
-  const breachesWithout = breaches();
-  const breaksAPromise = [...breachesWith].some((key) => !breachesWithout.has(key));
-  if (!breaksAPromise && !lessDamaged(withoutRepair, withRepair)) {
+  const replacedRoutes = repaired.map((edge) => edge.repairedFrom);
+  const applyKeep = (keep2) => {
     repaired.forEach((edge, index) => {
-      edge.pts = repairedRoutes[index];
+      edge.pts = keep2[index] ? repairedRoutes[index] : replacedRoutes[index];
     });
     resettle();
+  };
+  applyKeep(repaired.map(() => false));
+  const withoutRepair = stateHarm();
+  const breachesWithout = breaches();
+  const broken = [...breachesWith].filter((key) => !breachesWithout.has(key));
+  if (!broken.length) {
+    if (!lessDamaged(withoutRepair, withRepair)) applyKeep(repaired.map(() => true));
+    for (const edge of repaired) edge.repairedFrom = void 0;
+    return;
+  }
+  const blamed = new Set(broken.map(flowOfBreach).filter((id) => id !== null));
+  const keep = repaired.map((edge) => !blamed.has(edge.id));
+  if (keep.some(Boolean) && keep.some((kept) => !kept)) {
+    applyKeep(keep);
+    const partly = stateHarm();
+    const stillBroken = [...breaches()].some((key) => !breachesWithout.has(key));
+    if (stillBroken || lessDamaged(withoutRepair, partly)) applyKeep(repaired.map(() => false));
   }
   for (const edge of repaired) edge.repairedFrom = void 0;
 }
@@ -100693,15 +100890,20 @@ function createLabelSettler(deps) {
       const a = edge.pts[index];
       const b = edge.pts[index + 1];
       const vertical = Math.abs(a.x - b.x) < Math.abs(a.y - b.y);
-      const span = vertical ? Math.abs(b.y - a.y) : Math.abs(b.x - a.x);
-      const room = Math.max(0, (span - (vertical ? label.height : label.width)) / 2);
-      if (room === 0) continue;
-      for (const fraction of [-0.25, 0.25, -0.5, 0.5, -0.75, 0.75, -1, 1]) {
-        const shift = room * fraction;
-        seats.push(
-          vertical ? { x: (a.x + b.x) / 2 - label.width / 2, y: (a.y + b.y) / 2 + shift - lead } : { x: (a.x + b.x) / 2 + shift - label.width / 2, y: (a.y + b.y) / 2 - lead }
-        );
-      }
+      const size = vertical ? label.height : label.width;
+      const start = vertical ? Math.min(a.y, b.y) : Math.min(a.x, b.x);
+      const end = vertical ? Math.max(a.y, b.y) : Math.max(a.x, b.x);
+      const seat = vertical ? (a.y + b.y) / 2 - lead : (a.x + b.x) / 2 - label.width / 2;
+      const back = Math.max(0, seat - start);
+      const ahead = Math.max(0, end - size - seat);
+      if (back === 0 && ahead === 0) continue;
+      for (const fraction of [0.25, 0.5, 0.75, 1])
+        for (const room of [-back, ahead]) {
+          const shift = room * fraction;
+          seats.push(
+            vertical ? { x: (a.x + b.x) / 2 - label.width / 2, y: seat + shift } : { x: seat + shift, y: (a.y + b.y) / 2 - lead }
+          );
+        }
     }
     return seats;
   };
@@ -100748,27 +100950,103 @@ function createLabelSettler(deps) {
     settleLabelPositions
   };
 }
+function kindKeysSvg(paint, kinds, y, x) {
+  const { scene, palette, legendNames, scaled, resolveStyle } = paint;
+  let svg = "";
+  let keyX = x;
+  let bandY = y;
+  const LINE_H = scaled(12);
+  for (const kind of kinds) {
+    const nodeStyle = resolveStyle(kind, "");
+    if (kind === "actor") {
+      const stroke = nodeStyle.stroke?.color ?? palette.actorStroke;
+      svg += `<circle cx="${keyX + scaled(13)}" cy="${bandY + scaled(5)}" r="${scaled(3)}" fill="none" stroke="${stroke}" stroke-width="1.2"/>
+`;
+      svg += `<path d="M ${keyX + scaled(8)} ${bandY + scaled(15)} q ${scaled(5)} ${scaled(-7)} ${scaled(10)} 0" fill="none" stroke="${stroke}" stroke-width="1.2"/>
+`;
+    } else {
+      const dash = dashArray(nodeStyle.stroke?.style);
+      const stroke = nodeStyle.stroke?.color ?? palette.nodeStroke;
+      svg += `<rect x="${keyX}" y="${bandY + 2}" width="${scaled(26)}" height="${scaled(14)}" rx="3" fill="${nodeStyle.fill ?? palette.nodeFill}" stroke="${escAttr(stroke)}"${dash ? ` stroke-dasharray="${dash}"` : ""}/>
+`;
+      const glyphScale = (scaled(14) - scaled(4)) / GLYPH_BOX.height;
+      svg += glyphSvg(kind, escAttr(stroke), {
+        x: keyX + (scaled(26) - GLYPH_BOX.width * glyphScale) / 2,
+        y: bandY + 2 + (scaled(14) - GLYPH_BOX.height * glyphScale) / 2,
+        scale: glyphScale
+      });
+    }
+    const name = legendNames[kind];
+    const lines = bandLines(name, keyX + scaled(32), bandRightMargin(scene), scaled(10));
+    for (const [row, line] of lines.entries())
+      svg += `<text x="${keyX + scaled(32)}" y="${bandY + scaled(13) + row * LINE_H}" font-size="${scaled(10)}" fill="${palette.bandText}">${esc(line)}</text>
+`;
+    keyX += scaled(40) + Math.ceil(name.length * scaled(10) * RENDER_CHAR_WIDTH) + scaled(24);
+    bandY += (lines.length - 1) * LINE_H;
+    if (lines.length > 1 || keyX > scene.width - 220) {
+      keyX = x;
+      bandY += scaled(22);
+    }
+  }
+  return { svg, bandY: kinds.length ? bandY + scaled(24) : bandY };
+}
+function lineStyleKeysSvg(paint, y, x) {
+  const { scene, model, style, palette, legendLineStyles, scaled, defaultEdgeColor, markerName } = paint;
+  const styles = LINE_STYLES2.filter(
+    (lineStyle) => model.flows.some((flow) => lineStyleOf(flow, style) === lineStyle)
+  );
+  if (styles.length < 2) return { svg: "", bandY: y };
+  const maxX = scene.width - 20;
+  let svg = "";
+  let keyX = x;
+  let bandY = y;
+  const LINE_H = scaled(12);
+  for (const [index, lineStyle] of styles.entries()) {
+    const meaning = legendLineStyles[lineStyle];
+    const keyWidth = scaled(40) + Math.ceil(meaning.length * scaled(10) * RENDER_CHAR_WIDTH) + scaled(24);
+    if (keyX > x && keyX + keyWidth > maxX) {
+      keyX = x;
+      bandY += scaled(22);
+    }
+    const dash = dashArray(lineStyle);
+    svg += `<line x1="${keyX}" y1="${bandY + 8}" x2="${keyX + scaled(26)}" y2="${bandY + 8}" stroke="${escAttr(defaultEdgeColor)}" stroke-width="1.3"${dash ? ` stroke-dasharray="${dash}"` : ""} marker-end="url(#${markerName(defaultEdgeColor)})"/>
+`;
+    const lines = bandLines(meaning, keyX + scaled(40), maxX, scaled(10));
+    for (const [row, line] of lines.entries())
+      svg += `<text x="${keyX + scaled(32)}" y="${bandY + scaled(12) + row * LINE_H}" font-size="${scaled(10)}" fill="${palette.bandText}">${esc(line)}</text>
+`;
+    if (lines.length === 1) {
+      keyX += keyWidth;
+      continue;
+    }
+    bandY += (lines.length - 1) * LINE_H;
+    if (index < styles.length - 1) {
+      bandY += scaled(22);
+      keyX = x;
+    }
+  }
+  return { svg, bandY: bandY + scaled(24) };
+}
 function createBandRenderers(paint) {
   const {
     scene,
     model,
-    view,
     style,
     palette,
     annot,
     ui,
-    legendNames,
     legendFlowLabel,
     scaled,
     objectName,
-    resolveStyle,
     defaultEdgeColor,
     markerName,
     numbered
   } = paint;
   let bandY = scene.height;
   let bandsSvg = "";
-  const contentX = 150;
+  const rightMargin = bandRightMargin(scene);
+  const stackedTitle = rightMargin - BAND_CONTENT_X < MIN_BAND_TEXT;
+  const contentX = stackedTitle ? 20 : BAND_CONTENT_X;
   const chip = (x, y, name) => {
     const width = chipW(name, annot.scale);
     return {
@@ -100783,7 +101061,7 @@ function createBandRenderers(paint) {
 `;
     bandsSvg += `<text x="20" y="${bandY + scaled(32)}" font-size="${scaled(11)}" font-weight="bold" fill="${palette.bandTitle}">${esc(title)}</text>
 `;
-    bandY += scaled(20);
+    bandY += scaled(stackedTitle ? 34 : 20);
   };
   const flowChipsSvg = (flow, startX, startY) => {
     if (!flow.objects?.length) return "";
@@ -100815,7 +101093,7 @@ function createBandRenderers(paint) {
       const textW = Math.max(60, colW - BADGE - (chipsW ? chipsW + 6 : 0));
       const maxChars = Math.max(6, Math.floor(textW / (scaled(10) * RENDER_CHAR_WIDTH)));
       const raw = (flow.label ?? "") + (tech ? "  " + tech : "");
-      const lines = raw.split("\n").flatMap((segment) => wrapText(segment, maxChars).split("\n"));
+      const lines = raw.split("\n").flatMap((segment) => bandWrap(segment, maxChars));
       return { flow, lines };
     });
     const rows = Math.ceil(entries.length / cols);
@@ -100842,66 +101120,50 @@ function createBandRenderers(paint) {
   };
   const renderObjectsBand = () => {
     beginBand(ui.objects);
-    for (const bo of model.businessObjects) {
-      const chipResult = chip(contentX, bandY + 2, bo.name);
+    const LINE_H = scaled(12);
+    const chipRow = (name, reading) => {
+      const chipResult = chip(contentX, bandY + 2, name);
       bandsSvg += chipResult.svg;
-      if (bo.description)
-        bandsSvg += `<text x="${contentX + chipResult.width + 10}" y="${bandY + scaled(13)}" font-size="${scaled(10)}" fill="${palette.bandMuted}">\u2014 ${esc(bo.description)}</text>
+      const textX = contentX + chipResult.width + 10;
+      const lines = reading ? bandLines(reading, textX, rightMargin, scaled(10)) : [];
+      for (const [row, line] of lines.entries())
+        bandsSvg += `<text x="${textX}" y="${bandY + scaled(13) + row * LINE_H}" font-size="${scaled(10)}" fill="${palette.bandMuted}">${esc(line)}</text>
 `;
-      bandY += scaled(24);
-    }
-    const keyChip = chip(contentX, bandY + 2, ui.businessObject);
-    bandsSvg += keyChip.svg;
-    bandsSvg += `<text x="${contentX + keyChip.width + 10}" y="${bandY + scaled(13)}" font-size="${scaled(10)}" fill="${palette.bandMuted}">${esc(ui.carriedByFlow)}</text>
-`;
-    bandY += scaled(24) + 6;
+      bandY += scaled(24) + Math.max(0, lines.length - 1) * LINE_H;
+    };
+    for (const bo of model.businessObjects)
+      chipRow(bo.name, bo.description ? `\u2014 ${bo.description}` : "");
+    if (model.flows.some((flow) => flow.objects?.length))
+      chipRow(ui.businessObject, ui.carriedByFlow);
+    bandY += 6;
   };
   const renderLegendBand = () => {
+    const kinds = legendKinds(paint);
+    if (!kinds.length && !model.flows.length && !model.legendNotes.length) return;
     beginBand(ui.legend);
-    let lx = contentX;
-    const kindsUsed = [...new Set(scene.nodes.map((node) => node.kind))].filter(
-      (kind) => legendNames[kind] && (kind !== "actor" || view.actorLegend)
-    );
-    for (const kind of kindsUsed) {
-      const nodeStyle = resolveStyle(kind, "");
-      if (kind === "actor") {
-        const stroke = nodeStyle.stroke?.color ?? palette.actorStroke;
-        bandsSvg += `<circle cx="${lx + scaled(13)}" cy="${bandY + scaled(5)}" r="${scaled(3)}" fill="none" stroke="${stroke}" stroke-width="1.2"/>
-`;
-        bandsSvg += `<path d="M ${lx + scaled(8)} ${bandY + scaled(15)} q ${scaled(5)} ${scaled(-7)} ${scaled(10)} 0" fill="none" stroke="${stroke}" stroke-width="1.2"/>
-`;
-      } else {
-        const dash = dashArray(nodeStyle.stroke?.style);
-        const stroke = nodeStyle.stroke?.color ?? palette.nodeStroke;
-        bandsSvg += `<rect x="${lx}" y="${bandY + 2}" width="${scaled(26)}" height="${scaled(14)}" rx="3" fill="${nodeStyle.fill ?? palette.nodeFill}" stroke="${escAttr(stroke)}"${dash ? ` stroke-dasharray="${dash}"` : ""}/>
+    const kindKeys = kindKeysSvg(paint, kinds, bandY, contentX);
+    bandsSvg += kindKeys.svg;
+    bandY = kindKeys.bandY;
+    if (model.flows.length) {
+      bandsSvg += `<line x1="${contentX}" y1="${bandY + 8}" x2="${contentX + scaled(26)}" y2="${bandY + 8}" stroke="${escAttr(defaultEdgeColor)}" stroke-width="1.3" marker-end="url(#${markerName(defaultEdgeColor)})"/>
 `;
-        const glyphScale = (scaled(14) - scaled(4)) / GLYPH_BOX.height;
-        bandsSvg += glyphSvg(kind, escAttr(stroke), {
-          x: lx + (scaled(26) - GLYPH_BOX.width * glyphScale) / 2,
-          y: bandY + 2 + (scaled(14) - GLYPH_BOX.height * glyphScale) / 2,
-          scale: glyphScale
-        });
-      }
-      const name = legendNames[kind];
-      bandsSvg += `<text x="${lx + scaled(32)}" y="${bandY + scaled(13)}" font-size="${scaled(10)}" fill="${palette.bandText}">${esc(name)}</text>
+      const flowLabelText = (numbered ? legendFlowLabel + " \u2014 " + ui.numberedSuffix : legendFlowLabel) + (style.flowColor === "by-source" ? style.lang === "fr" ? " \u2014 couleur = source" : " \u2014 colour = source" : "");
+      const flowKeyX = contentX + scaled(32);
+      const flowKeyLines = bandLines(flowLabelText, flowKeyX, rightMargin, scaled(10));
+      for (const [row, line] of flowKeyLines.entries())
+        bandsSvg += `<text x="${flowKeyX}" y="${bandY + scaled(12) + row * scaled(12)}" font-size="${scaled(10)}" fill="${palette.bandText}">${esc(line)}</text>
 `;
-      lx += scaled(40) + Math.ceil(name.length * scaled(10) * RENDER_CHAR_WIDTH) + scaled(24);
-      if (lx > scene.width - 220) {
-        lx = contentX;
-        bandY += scaled(22);
-      }
+      bandY += scaled(24) + (flowKeyLines.length - 1) * scaled(12);
+      const lineStyleKeys = lineStyleKeysSvg(paint, bandY, contentX);
+      bandsSvg += lineStyleKeys.svg;
+      bandY = lineStyleKeys.bandY;
     }
-    bandY += scaled(24);
-    bandsSvg += `<line x1="${contentX}" y1="${bandY + 8}" x2="${contentX + scaled(26)}" y2="${bandY + 8}" stroke="${escAttr(defaultEdgeColor)}" stroke-width="1.3" marker-end="url(#${markerName(defaultEdgeColor)})"/>
-`;
-    const flowLabelText = (numbered ? legendFlowLabel + " \u2014 " + ui.numberedSuffix : legendFlowLabel) + (style.flowColor === "by-source" ? style.lang === "fr" ? " \u2014 couleur = source" : " \u2014 colour = source" : "");
-    bandsSvg += `<text x="${contentX + scaled(32)}" y="${bandY + scaled(12)}" font-size="${scaled(10)}" fill="${palette.bandText}">${esc(flowLabelText)}</text>
-`;
-    bandY += scaled(24);
     for (const note of model.legendNotes) {
-      bandsSvg += `<text x="${contentX}" y="${bandY + scaled(12)}" font-size="${scaled(10)}" fill="${palette.bandText}" font-style="italic">${esc(note)}</text>
+      const lines = bandLines(note, contentX, rightMargin, scaled(10));
+      for (const [row, line] of lines.entries())
+        bandsSvg += `<text x="${contentX}" y="${bandY + scaled(12) + row * scaled(12)}" font-size="${scaled(10)}" fill="${palette.bandText}" font-style="italic">${esc(line)}</text>
 `;
-      bandY += scaled(20);
+      bandY += scaled(20) + (lines.length - 1) * scaled(12);
     }
   };
   return {
@@ -101000,7 +101262,7 @@ function createEdgePainter(paint) {
     const flowStyle = flow?.style;
     const color = flowColorOf(flow);
     const headColor = style.flowColor === "by-source" ? color : defaultEdgeColor;
-    const dash = dashArray(flowStyle?.stroke?.style ?? flow?.lineStyle ?? style.flowStroke.style);
+    const dash = dashArray(lineStyleOf(flow, style));
     const width = flowStyle?.stroke?.width ?? style.flowStroke.width;
     return `<path d="${edgePath(edge.pts)}" fill="none" stroke="${escAttr(color)}" stroke-width="${width}"${dash ? ` stroke-dasharray="${dash}"` : ""} marker-end="url(#${markerName(headColor)})"/>
 `;
@@ -101073,6 +101335,7 @@ function render(model, view, scene, options) {
   const ui = UI[style.lang] ?? UI.en;
   const legendNames = style.lang === "fr" ? view.legendNamesFr : view.legendNames;
   const legendFlowLabel = style.lang === "fr" ? view.legendFlowLabelFr : view.legendFlowLabel;
+  const legendLineStyles = style.lang === "fr" ? view.legendLineStylesFr : view.legendLineStyles;
   const elementStyle = /* @__PURE__ */ new Map();
   const elementLogo = /* @__PURE__ */ new Map();
   for (const entry of collectElementStyles(model.elements)) {
@@ -101115,6 +101378,7 @@ function render(model, view, scene, options) {
   });
   const overlapsAfter = countLabelOverlaps();
   compactVertical(scene);
+  fitCanvas(scene);
   const drawnLogos = /* @__PURE__ */ new Set();
   const { renderContainerNode, renderLeafNode } = createNodeRenderers({
     palette,
@@ -101154,6 +101418,7 @@ function render(model, view, scene, options) {
     ui,
     legendNames,
     legendFlowLabel,
+    legendLineStyles,
     scaled,
     objectName,
     resolveStyle,
@@ -101183,10 +101448,11 @@ function render(model, view, scene, options) {
   });
   return { svg, overlapsBefore, overlapsAfter };
 }
-var HOP_RADIUS, LABEL_HALO, RENDER_CHAR_WIDTH, dashArray, round1, ADRIFT_SQ, ATTACHED_SQ, GLYPH_BOX, GLYPHS, LOGO_BOX;
+var HOP_RADIUS, LABEL_HALO, RENDER_CHAR_WIDTH, BAND_CONTENT_X, MIN_BAND_TEXT, bandRightMargin, dashArray, lineStyleOf, round1, ADRIFT_SQ, ATTACHED_SQ, GLYPH_BOX, GLYPHS, LOGO_BOX, legendKinds;
 var init_svg_render = __esm({
   "src/svg-render.ts"() {
     "use strict";
+    init_views();
     init_themes();
     init_localization();
     init_xml_escape();
@@ -101202,7 +101468,11 @@ var init_svg_render = __esm({
     HOP_RADIUS = 5;
     LABEL_HALO = 4;
     RENDER_CHAR_WIDTH = 0.52;
+    BAND_CONTENT_X = 150;
+    MIN_BAND_TEXT = 200;
+    bandRightMargin = (scene) => scene.width - 20;
     dashArray = (lineStyle) => lineStyle === "dashed" ? "5 3" : lineStyle === "dotted" ? "2 2.5" : void 0;
+    lineStyleOf = (flow, style) => flow?.style?.stroke?.style ?? flow?.lineStyle ?? style.flowStroke.style;
     round1 = (n) => Math.round(n * 10) / 10;
     ADRIFT_SQ = 20 * 20;
     ATTACHED_SQ = 6 * 6;
@@ -101222,6 +101492,9 @@ var init_svg_render = __esm({
       device: ({ x, y, r, line }) => `<rect x="${x(2)}" y="${y(1)}" width="${r(14)}" height="${r(9)}" rx="${r(1)}" ${line}/><path d="M ${x(9)} ${y(10)} V ${y(13)}" ${line}/><path d="M ${x(4)} ${y(13)} H ${x(14)}" ${line}/>`
     };
     LOGO_BOX = { size: 18, right: 7, top: 6 };
+    legendKinds = (paint) => [...new Set(paint.scene.nodes.map((node) => node.kind))].filter(
+      (kind) => paint.legendNames[kind] && (kind !== "actor" || paint.view.actorLegend)
+    );
   }
 });
 
@@ -102159,7 +102432,7 @@ CORE_I   -> PARTNER : "Nightly export" (SFTP/22)
     };
     args = process.argv.slice(2);
     command = args[0];
-    version = true ? "1.0.0-RC14" : pkg.version;
+    version = true ? "1.0.0-RC15" : pkg.version;
     VALUE_FLAGS = /* @__PURE__ */ new Set(["-o", "--format", "--theme"]);
     positionalFile = () => {
       for (let index = 0; index < args.length; index++) {