forma-diagrams 0.5.2

package/packages/core/src/layout.ts

@@ -0,0 +1,450 @@
+import { resolveNodeStyle, resolveEdgeStyle, resolveGroupStyle } from './resolve-style';
+import type { ElkNode, ElkExtendedEdge, ELK } from 'elkjs';
+import { fingerprint, parseDocument, type Diagram, type Point } from './document';
+import { nodeText, styledNodeText, textWidth, wrapText } from './text';
+import type { Box, Scene, SceneEdge, SceneGroup, SceneNode } from './scene';
+import {
+  arriveSide,
+  attachmentPoint,
+  departSide,
+  isOrthogonal,
+  overlaps,
+  retargetRoute,
+  routeBetween,
+  routesCross,
+  routeThrough,
+  segmentHitsBox,
+  shapeBoundary,
+  simplify,
+} from './geometry';
+let elkPromise: Promise<ELK> | undefined;
+const groupMinWidth = (label: string) =>
+  Math.max(180, Math.ceil(textWidth(label.toUpperCase(), 11, 600) + label.length * 1.2 + 64));
+
+export async function layoutDiagram(input: Diagram): Promise<Scene> {
+  const elk = await (elkPromise ??= import('elkjs/lib/elk.bundled.js').then(
+    (module) => new module.default(),
+  ));
+  const doc = parseDocument(input),
+    compact = doc.layout.spacing === 'compact';
+  const system = doc.presentation.designSystem;
+  const nodeStyles = new Map(doc.nodes.map((n) => [n.id, resolveNodeStyle(doc, n)]));
+  const measured = new Map(
+    doc.nodes.map((n) => {
+      const style = nodeStyles.get(n.id)!;
+      return [
+        n.id,
+        Object.keys(style).length
+          ? styledNodeText(n.label, n.description, style)
+          : nodeText(n.label, n.description),
+      ];
+    }),
+  );
+  const buildChildren = (parent?: string): ElkNode[] => [
+    ...doc.groups
+      .filter((g) => g.parent === parent)
+      .map((g) => ({
+        id: g.id,
+        children: buildChildren(g.id),
+        width: groupMinWidth(g.label),
+        height: 100,
+        layoutOptions: {
+          'elk.padding': '[top=64,left=24,bottom=24,right=24]',
+          'elk.nodeSize.constraints': 'MINIMUM_SIZE',
+          'elk.nodeSize.minimum': `(${groupMinWidth(g.label)},100)`,
+        },
+      })),
+    ...doc.nodes
+      .filter((n) => n.group === parent)
+      .map((n) => ({
+        id: n.id,
+        width: measured.get(n.id)!.width,
+        height: measured.get(n.id)!.height,
+      })),
+  ];
+  const graph = await elk.layout({
+    id: '__forma_root__',
+    layoutOptions: {
+      'elk.algorithm': 'layered',
+      'elk.direction': doc.layout.direction,
+      'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+      'elk.edgeRouting': 'ORTHOGONAL',
+      'elk.spacing.nodeNode': String(system?.spacing?.node ?? (compact ? 32 : 48)),
+      'elk.layered.spacing.nodeNodeBetweenLayers': String(
+        system?.spacing?.layer ?? (compact ? 56 : 88),
+      ),
+      'elk.layered.spacing.edgeNodeBetweenLayers': '28',
+      'elk.spacing.edgeNode': '24',
+      'elk.spacing.edgeEdge': '0',
+      'elk.layered.spacing.edgeEdgeBetweenLayers': '0',
+      'elk.padding': '[top=0,left=0,bottom=0,right=0]',
+      'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES',
+      'elk.randomSeed': '1',
+      'elk.separateConnectedComponents': 'true',
+    },
+    children: buildChildren(),
+    edges: doc.edges.map((e) => ({
+      id: e.id,
+      sources: [e.source],
+      targets: [e.target],
+      ...(e.label
+        ? { labels: [{ text: e.label, width: textWidth(e.label, 11) + 20, height: 24 }] }
+        : {}),
+    })),
+  });
+  const nodes: SceneNode[] = [],
+    groups: SceneGroup[] = [],
+    edges: SceneEdge[] = [];
+  const nodeMap = new Map(doc.nodes.map((n) => [n.id, n])),
+    groupMap = new Map(doc.groups.map((g) => [g.id, g]));
+  const rawEdges: { edge: ElkExtendedEdge; x: number; y: number }[] = [];
+  function walk(container: ElkNode, x: number, y: number, depth: number) {
+    for (const e of container.edges ?? []) rawEdges.push({ edge: e, x, y });
+    for (const child of container.children ?? []) {
+      const box = {
+        x: x + (child.x ?? 0),
+        y: y + (child.y ?? 0),
+        width: child.width ?? 224,
+        height: child.height ?? 120,
+      };
+      const semantic = nodeMap.get(child.id);
+      if (semantic) {
+        const override = doc.presentation.nodes[child.id];
+        nodes.push({
+          ...box,
+          ...measured.get(child.id)!,
+          id: child.id,
+          semantic,
+          style: nodeStyles.get(child.id),
+          accent:
+            override?.color ??
+            (semantic.emphasis === 'primary'
+              ? 'blue'
+              : semantic.group
+                ? groupMap.get(semantic.group)!.color
+                : doc.type === 'flow'
+                  ? 'blue'
+                  : 'slate'),
+          pinned: !!override?.position,
+        });
+      } else {
+        const semantic = groupMap.get(child.id)!;
+        groups.push({
+          ...box,
+          id: child.id,
+          semantic,
+          depth,
+          style: resolveGroupStyle(doc, semantic),
+        });
+        walk(child, box.x, box.y, depth + 1);
+      }
+    }
+  }
+  walk(graph, 0, 0, 0);
+  const allNodes = new Map(nodes.map((n) => [n.id, n]));
+  const rawMap = new Map(
+    rawEdges.map((e) => {
+      const container = groups.find(
+        (g) => g.id === (e.edge as ElkExtendedEdge & { container?: string }).container,
+      );
+      return [e.edge.id, { ...e, x: container?.x ?? e.x, y: container?.y ?? e.y }];
+    }),
+  );
+  const labelBoxes: Box[] = [];
+  // ELK reserves generous compound boundary channels. Compress only wholly empty
+  // bands between top-level containers, keeping enough space for labels.
+  const axis = doc.layout.direction === 'RIGHT' ? 'x' : 'y';
+  const extent = axis === 'x' ? 'width' : 'height';
+  const occupied = [
+    ...groups.filter((g) => !g.semantic.parent),
+    ...nodes.filter((n) => !n.semantic.group),
+  ]
+    .map((b) => [b[axis], b[axis] + b[extent]])
+    .sort((a, b) => a[0] - b[0]);
+  const bands: { start: number; end: number; remove: number }[] = [];
+  let end = occupied[0]?.[1] ?? 0;
+  for (const interval of occupied.slice(1)) {
+    if (interval[0] - end > 120)
+      bands.push({ start: end, end: interval[0], remove: interval[0] - end - 120 });
+    end = Math.max(end, interval[1]);
+  }
+  const mapAxis = (value: number) =>
+    value -
+    bands.reduce(
+      (sum, b) =>
+        sum +
+        (value >= b.end
+          ? b.remove
+          : value > b.start
+            ? ((value - b.start) / (b.end - b.start)) * b.remove
+            : 0),
+      0,
+    );
+  const composePoint = (point: Point) => ({
+    ...point,
+    [axis]: Math.round(mapAxis(point[axis]) * 100) / 100,
+  });
+  for (const box of [...nodes, ...groups]) {
+    const max = mapAxis(box[axis] + box[extent]);
+    box[axis] = mapAxis(box[axis]);
+    box[extent] = max - box[axis];
+  }
+  if (doc.layout.mode === 'grid') {
+    const columns = new Map<number, number>(),
+      rows = new Map<number, number>();
+    for (const [i, n] of nodes.entries()) {
+      const p = n.semantic.placement ?? {
+        column: doc.nodes.findIndex((item) => item.id === n.id),
+        row: 0,
+      };
+      columns.set(p.column, Math.max(columns.get(p.column) ?? 0, n.width));
+      rows.set(p.row, Math.max(rows.get(p.row) ?? 0, n.height));
+    }
+    const offset = (map: Map<number, number>, index: number, gap: number) =>
+      [...map].filter(([key]) => key < index).reduce((sum, [, size]) => sum + size + gap, 0);
+    for (const [i, n] of nodes.entries()) {
+      const p = n.semantic.placement ?? {
+        column: doc.nodes.findIndex((item) => item.id === n.id),
+        row: 0,
+      };
+      n.x =
+        offset(columns, p.column, system?.spacing?.layer ?? 88) +
+        ((columns.get(p.column) ?? n.width) - n.width) / 2;
+      n.y =
+        offset(rows, p.row, system?.spacing?.node ?? 64) +
+        ((rows.get(p.row) ?? n.height) - n.height) / 2;
+    }
+  }
+  for (const n of nodes)
+    if (doc.presentation.nodes[n.id]?.position)
+      Object.assign(n, doc.presentation.nodes[n.id].position);
+  // Bounds follow human-moved descendants, preserving the semantic container.
+  if (nodes.some((n) => n.pinned) || doc.layout.mode === 'grid') {
+    for (const g of [...groups].sort((a, b) => b.depth - a.depth)) {
+      const children: Box[] = [
+        ...nodes.filter((n) => n.semantic.group === g.id),
+        ...groups.filter((c) => c.semantic.parent === g.id),
+      ];
+      if (!children.length) continue;
+      const x = Math.min(...children.map((c) => c.x)) - 24,
+        y = Math.min(...children.map((c) => c.y)) - 64;
+      Object.assign(g, {
+        x,
+        y,
+        width: Math.max(
+          groupMinWidth(g.semantic.label),
+          Math.max(...children.map((c) => c.x + c.width)) + 24 - x,
+        ),
+        height: Math.max(...children.map((c) => c.y + c.height)) + 24 - y,
+      });
+    }
+  }
+  const down = doc.layout.direction === 'DOWN';
+  const routed: { points: Point[]; custom: boolean; straight: boolean }[] = [];
+  const commit = (points: Point[], custom: boolean, straight: boolean) => {
+    routed.push({ points, custom, straight });
+    return points;
+  };
+  for (const semantic of doc.edges) {
+    const edgeStyle = resolveEdgeStyle(doc, semantic);
+    const source = allNodes.get(semantic.source)!,
+      target = allNodes.get(semantic.target)!;
+    const skip = new Set([source.id, target.id]);
+    const blocked = (points: Point[]) =>
+      nodes.some(
+        (n) =>
+          !skip.has(n.id) && points.some((p, i) => i > 0 && segmentHitsBox(points[i - 1], p, n)),
+      );
+    const peers = () => routed.filter((r) => !r.straight).map((r) => r.points);
+    const raw = rawMap.get(semantic.id),
+      sections = raw?.edge.sections;
+    const elkPoints = sections?.length
+      ? simplify(
+          sections
+            .flatMap((s) => [s.startPoint, ...(s.bendPoints ?? []), s.endPoint])
+            .map((p) => ({
+              x: Math.round((p.x + raw!.x) * 100) / 100,
+              y: Math.round((p.y + raw!.y) * 100) / 100,
+            }))
+            .map(composePoint),
+        )
+      : null;
+    const explicitSide = !!(edgeStyle.sourcePort || edgeStyle.targetPort);
+    const elkUsable = !!(elkPoints && elkPoints.length > 1 && doc.layout.mode !== 'grid');
+    const sourceSide =
+      edgeStyle.sourcePort ??
+      (elkUsable ? departSide(elkPoints![0], elkPoints![1]) : undefined) ??
+      (down ? 'bottom' : 'right');
+    const targetSide =
+      edgeStyle.targetPort ??
+      (elkUsable ? arriveSide(elkPoints!.at(-2)!, elkPoints!.at(-1)!) : undefined) ??
+      (down ? 'top' : 'left');
+    const from = attachmentPoint(
+      source,
+      source.semantic.ports,
+      sourceSide,
+      edgeStyle.sourceIndex,
+      sourceSide,
+    );
+    const to = attachmentPoint(
+      target,
+      target.semantic.ports,
+      targetSide,
+      edgeStyle.targetIndex,
+      targetSide,
+    );
+    let points: Point[];
+    const straight = edgeStyle.routing === 'straight' && source.id !== target.id;
+    if (straight) {
+      if (semantic.path?.length)
+        points = routeThrough(from.point, semantic.path, to.point, from.side, to.side);
+      else {
+        const center = (b: Box) => ({ x: b.x + b.width / 2, y: b.y + b.height / 2 });
+        points =
+          edgeStyle.sourcePort || edgeStyle.targetPort
+            ? [from.point, to.point]
+            : [
+                shapeBoundary(source, center(target), source.style?.shape),
+                shapeBoundary(target, center(source), target.style?.shape),
+              ];
+      }
+      commit(points, !!semantic.path?.length, true);
+    } else if (semantic.path?.length && source.id !== target.id) {
+      points = commit(
+        routeThrough(from.point, semantic.path, to.point, from.side, to.side),
+        true,
+        false,
+      );
+    } else if (source.id === target.id) {
+      points = commit(
+        routeBetween(
+          source,
+          target,
+          nodes,
+          down,
+          true,
+          from.side,
+          to.side,
+          from.index,
+          to.index,
+          from.count,
+          to.count,
+        ),
+        false,
+        false,
+      );
+    } else {
+      let kept: Point[] | null = null;
+      if (elkPoints && doc.layout.mode !== 'grid') {
+        const adjusted =
+          retargetRoute(elkPoints, from.point, to.point, from.side, to.side) ??
+          (explicitSide ? null : elkPoints);
+        if (
+          adjusted &&
+          isOrthogonal(adjusted) &&
+          !blocked(adjusted) &&
+          !peers().some((route) => routesCross(adjusted, route))
+        )
+          kept = adjusted;
+      }
+      points = commit(
+        kept ??
+          routeBetween(
+            source,
+            target,
+            nodes,
+            down,
+            false,
+            from.side,
+            to.side,
+            from.index,
+            to.index,
+            from.count,
+            to.count,
+            peers(),
+          ),
+        false,
+        false,
+      );
+    }
+    const style = edgeStyle;
+    const edge: SceneEdge = { id: semantic.id, semantic, points, style };
+    if (semantic.label) {
+      const lines = wrapText(semantic.label, 156, 11),
+        width = Math.max(...lines.map((l) => textWidth(l, 11))) + 16,
+        height = lines.length * 15 + 8;
+      const candidates: { box: Box; score: number }[] = [];
+      for (let i = 1; i < points.length; i++) {
+        const a = points[i - 1],
+          b = points[i],
+          length = Math.hypot(b.x - a.x, b.y - a.y);
+        for (const ratio of [0.5, 0.3, 0.7]) {
+          const x = a.x + (b.x - a.x) * ratio,
+            y = a.y + (b.y - a.y) * ratio;
+          const horizontal = a.y === b.y;
+          const box = {
+            x: horizontal ? x - width / 2 : x + 9,
+            y: horizontal ? y - height - 7 : y - height / 2,
+            width,
+            height,
+          };
+          const collisions = [
+            ...nodes,
+            ...labelBoxes,
+            ...groups.map((g) => ({ x: g.x, y: g.y, width: g.width, height: 48 })),
+          ].filter((n) => overlaps(n, box, 4)).length;
+          candidates.push({
+            box,
+            score:
+              collisions * 100000 +
+              (length < (horizontal ? width : height) + 12 ? 5000 : 0) -
+              length +
+              Math.abs(0.5 - ratio),
+          });
+        }
+      }
+      candidates.sort((a, b) => a.score - b.score);
+      const box = candidates[0]?.box ?? {
+        x: points[0]?.x ?? 0,
+        y: points[0]?.y ?? 0,
+        width,
+        height,
+      };
+      edge.label = { ...box, lines };
+      labelBoxes.push(box);
+    }
+    edges.push(edge);
+  }
+  const content: Box[] = [
+    ...nodes,
+    ...groups,
+    ...labelBoxes,
+    ...edges.flatMap((e) => e.points.map((p) => ({ ...p, width: 0, height: 0 }))),
+  ];
+  const minX = Math.min(0, ...content.map((c) => c.x)),
+    minY = Math.min(0, ...content.map((c) => c.y));
+  const maxX = Math.max(620, ...content.map((c) => c.x + c.width)),
+    maxY = Math.max(
+      doc.version === 1 || !nodes.length ? 240 : 0,
+      ...content.map((c) => c.y + c.height),
+    );
+  const width = maxX - minX + 112;
+  const titleLines = wrapText(doc.title, width - 112, 30, 600),
+    descriptionLines = wrapText(doc.description ?? '', width - 112, 13);
+  const header = Math.max(128, 48 + titleLines.length * 38 + descriptionLines.length * 19 + 28);
+  return {
+    document: doc,
+    fingerprint: fingerprint(doc),
+    nodes,
+    groups,
+    edges,
+    bounds: {
+      x: minX - 56,
+      y: minY - header,
+      width,
+      height: maxY - minY + header + (doc.presentation.footer?.hidden ? 28 : 76),
+    },
+    titleLines,
+    descriptionLines,
+  };
+}

package/packages/core/src/render.ts

@@ -0,0 +1,182 @@
+import { dashArray } from './styles';
+import type { Scene, SceneNode, SceneGroup, SceneEdge } from './scene';
+import { accents, themes } from './theme';
+import { polylinePath } from './geometry';
+export const escapeXml = (v: string | number) =>
+  String(v)
+    .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, '')
+    .replace(
+      /[&<>"']/g,
+      (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&apos;' })[c]!,
+    );
+const t = (
+  x: number,
+  y: number,
+  value: string,
+  size: number,
+  fill: string,
+  weight = 400,
+  extra = '',
+) =>
+  `<text x="${x}" y="${y}" font-size="${size}" font-weight="${weight}" fill="${fill}" ${extra}>${escapeXml(value)}</text>`;
+const icons: Record<string, string> = {
+  service:
+    '<rect x="3" y="3" width="18" height="7" rx="2"/><rect x="3" y="14" width="18" height="7" rx="2"/><path d="M7 6.5h.01M7 17.5h.01M12 6.5h5M12 17.5h5"/>',
+  database:
+    '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 4 16 4 16 0V5M4 12c0 4 16 4 16 0"/>',
+  queue:
+    '<rect x="2" y="6" width="5" height="12" rx="1.5"/><rect x="9.5" y="6" width="5" height="12" rx="1.5"/><rect x="17" y="6" width="5" height="12" rx="1.5"/>',
+  client:
+    '<rect x="2" y="3" width="20" height="15" rx="2"/><path d="M8 22h8M12 18v4M2 8h20M6 5.5h.01M9 5.5h.01"/>',
+  person: '<circle cx="12" cy="7" r="4"/><path d="M4 22v-3a8 8 0 0 1 16 0v3"/>',
+  process: '<path d="m13 2-9 12h7l-1 8 10-12h-8z"/>',
+  decision: '<path d="m12 2 10 10-10 10L2 12zM12 7v6M12 17h.01"/>',
+};
+export function iconMarkup(kind: string, color: string, x = 0, y = 0, size = 20): string {
+  return `<g transform="translate(${x} ${y}) scale(${size / 24})" fill="none" stroke="${color}" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">${icons[kind] ?? icons.service}</g>`;
+}
+export function nodeMarkup(n: SceneNode, themeName: 'paper' | 'midnight'): string {
+  if (n.style && Object.keys(n.style).length) return styledNodeMarkup(n, themeName);
+  const theme = themes[themeName],
+    accent = accents[n.accent],
+    dark = themeName === 'midnight',
+    primary = n.semantic.emphasis === 'primary';
+  const ink = dark ? accent.dark : accent.ink,
+    fill = dark ? '#2b394e' : accent.fill;
+  const body = `<rect x="0.5" y="1.5" width="${n.width - 1}" height="${n.height - 1}" rx="10" fill="${theme.shadow}" opacity=".04"/>
+    <rect x=".5" y=".5" width="${n.width - 1}" height="${n.height - 1}" rx="10" fill="${primary ? fill : theme.card}" stroke="${primary ? (dark ? ink : accent.border) : theme.border}"/>
+    <rect x="20" y="18" width="32" height="32" rx="8" fill="${fill}"/>
+    ${iconMarkup(n.semantic.kind, ink, 26, 24, 20)}
+    ${t(n.width - 20, 38, n.semantic.kind.toUpperCase(), 9, theme.secondary, 500, 'text-anchor="end" letter-spacing="1.1"')}
+    ${n.titleLines.map((line, i) => t(20, 76 + i * 22, line, 16, theme.text, 600)).join('')}
+    ${n.descriptionLines.map((line, i) => t(20, 76 + n.titleLines.length * 22 + 4 + i * 17, line, 12, theme.secondary)).join('')}`;
+  return `<g opacity="${n.semantic.emphasis === 'muted' ? 0.62 : 1}">${body}</g>`;
+}
+function styledNodeMarkup(n: SceneNode, themeName: 'paper' | 'midnight'): string {
+  const s = n.style!,
+    theme = themes[themeName],
+    w = n.width,
+    h = n.height;
+  const shape = s.shape ?? 'rect',
+    radius = shape === 'pill' ? h / 2 : (s.radius ?? 10);
+  const attrs = `fill="${s.fill ?? theme.card}" stroke="${s.stroke ?? theme.border}" stroke-width="${s.strokeWidth ?? 1}" stroke-dasharray="${dashArray(s.dash)}"`;
+  let body = `<rect x=".5" y=".5" width="${w - 1}" height="${h - 1}" rx="${radius}" ${attrs}/>`;
+  if (shape === 'diamond')
+    body = `<path d="M${w / 2} 0 L${w} ${h / 2} L${w / 2} ${h} L0 ${h / 2}Z" ${attrs}/>`;
+  if (shape === 'ellipse')
+    body = `<ellipse cx="${w / 2}" cy="${h / 2}" rx="${w / 2 - 0.5}" ry="${h / 2 - 0.5}" ${attrs}/>`;
+  if (shape === 'cylinder')
+    body = `<path d="M0 14 C0 -4 ${w} -4 ${w} 14 V${h - 14} C${w} ${h + 4} 0 ${h + 4} 0 ${h - 14}Z M0 14 C0 32 ${w} 32 ${w} 14" ${attrs}/>`;
+  if (shape === 'text') body = '';
+  const size = s.fontSize ?? 16,
+    weight = s.fontWeight ?? 600;
+  const align = s.align ?? (['diamond', 'ellipse', 'pill'].includes(shape) ? 'center' : 'left');
+  const inset = shape === 'diamond' ? w * 0.23 : shape === 'ellipse' ? w * 0.16 : (s.padding ?? 20);
+  const x = align === 'center' ? w / 2 : align === 'right' ? w - inset : inset;
+  const anchor =
+    align === 'center' ? 'text-anchor="middle"' : align === 'right' ? 'text-anchor="end"' : '';
+  const blockHeight =
+    n.titleLines.length * size * 1.4 +
+    (n.descriptionLines.length ? 8 + n.descriptionLines.length * 17 : 0);
+  const valign = s.verticalAlign ?? 'middle';
+  const vInset = shape === 'diamond' ? h * 0.28 : shape === 'ellipse' ? h * 0.2 : (s.padding ?? 20);
+  const blockTop =
+    valign === 'top'
+      ? vInset
+      : valign === 'bottom'
+        ? h - vInset - blockHeight
+        : (h - blockHeight) / 2;
+  const top = blockTop + size;
+  body += n.titleLines
+    .map((line, i) => t(x, top + i * size * 1.4, line, size, s.text ?? theme.text, weight, anchor))
+    .join('');
+  body += n.descriptionLines
+    .map((line, i) =>
+      t(
+        x,
+        top + n.titleLines.length * size * 1.4 + 8 + i * 17,
+        line,
+        12,
+        s.secondary ?? theme.secondary,
+        400,
+        anchor,
+      ),
+    )
+    .join('');
+  return `<g font-family="${escapeXml(s.fontFamily ?? 'IBM Plex Sans')}" opacity="${s.opacity ?? (n.semantic.emphasis === 'muted' ? 0.62 : 1)}">${body}</g>`;
+}
+export function groupMarkup(g: SceneGroup, themeName: 'paper' | 'midnight'): string {
+  const theme = themes[themeName],
+    accent = accents[g.semantic.color],
+    s = g.style ?? {};
+  const ink = s.text ?? (themeName === 'midnight' ? accent.dark : accent.ink);
+  return `<g opacity="${s.opacity ?? 1}" font-family="${escapeXml(s.fontFamily ?? 'IBM Plex Sans')}"><rect x="${g.x}" y="${g.y}" width="${g.width}" height="${g.height}" rx="${s.radius ?? 14}" fill="${s.fill ?? theme.group}" stroke="${s.stroke ?? theme.border}" stroke-width="${s.strokeWidth ?? 1}" stroke-dasharray="${dashArray(s.dash ?? 'dashed')}"/><rect x="${g.x + 24}" y="${g.y + 26}" width="6" height="6" rx="2" fill="${ink}"/>${t(g.x + 39, g.y + 33, g.semantic.label.toUpperCase(), 11, ink, 600, 'letter-spacing="1.2"')}</g>`;
+}
+export function edgeMarkup(e: SceneEdge, themeName: 'paper' | 'midnight'): string {
+  const s = e.style ?? {},
+    ink = s.stroke ?? themes[themeName].line,
+    width = s.strokeWidth ?? 1.5;
+  const arrow = (start: boolean) => {
+    const kind = start ? (s.arrowStart ?? 'none') : (s.arrowEnd ?? 'open');
+    if (kind === 'none' || e.points.length < 2) return '';
+    const b = start ? e.points[0] : e.points.at(-1)!,
+      a = start ? e.points[1] : e.points.at(-2)!;
+    const angle = (Math.atan2(b.y - a.y, b.x - a.x) * 180) / Math.PI;
+    const path =
+      kind === 'diamond'
+        ? 'M0 0 L-6 -4 L-12 0 L-6 4Z'
+        : kind === 'filled'
+          ? 'M0 0 L-8 -4 L-8 4Z'
+          : 'M-7 -3.5 L0 0 L-7 3.5';
+    return `<g transform="translate(${b.x} ${b.y}) rotate(${angle})" stroke="${ink}" stroke-width="${width}" fill="${kind === 'open' ? 'none' : ink}">${kind === 'circle' ? '<circle cx="-4" cy="0" r="4"/>' : `<path d="${path}"/>`}</g>`;
+  };
+  return `<g opacity="${s.opacity ?? 1}"><path d="${polylinePath(e.points)}" fill="none" stroke="${ink}" stroke-width="${width}" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="${dashArray(s.dash ?? e.semantic.style)}"/>${arrow(true)}${arrow(false)}</g>`;
+}
+export function edgeLabelMarkup(e: SceneEdge, themeName: 'paper' | 'midnight'): string {
+  if (!e.label) return '';
+  const theme = themes[themeName],
+    b = e.label;
+  return `<rect x="${b.x}" y="${b.y}" width="${b.width}" height="${b.height}" rx="4" fill="${e.style?.fill ?? theme.background}" fill-opacity=".96"/>${b.lines.map((l, i) => t(b.x + b.width / 2, b.y + 15 + i * 15, l, 11, e.style?.text ?? theme.secondary, 400, 'text-anchor="middle"')).join('')}`;
+}
+export function frameMarkup(scene: Scene): string {
+  const { bounds: b, document: doc } = scene,
+    theme = { ...themes[doc.presentation.theme], ...doc.presentation.designSystem?.canvas };
+  const x = b.x + 56,
+    titleY = b.y + 54;
+  const heading = `${scene.titleLines.map((l, i) => t(x, titleY + i * 38, l, 30, theme.text, 600, 'letter-spacing="-.7"')).join('')}
+  ${scene.descriptionLines.map((l, i) => t(x, titleY + scene.titleLines.length * 38 - 7 + i * 19, l, 13, theme.secondary)).join('')}`;
+  const footer = doc.presentation.footer;
+  if (footer?.hidden) return heading;
+  const label = footer?.label ?? `FORMA  /  ${doc.type.toUpperCase()}`;
+  const detail =
+    footer?.detail ?? `${scene.nodes.length} components  ·  ${scene.edges.length} relationships`;
+  return `${heading}
+  <line x1="${x}" y1="${b.y + b.height - 44}" x2="${b.x + b.width - 56}" y2="${b.y + b.height - 44}" stroke="${theme.border}"/>
+  ${label ? t(x, b.y + b.height - 22, label, 9, theme.secondary, 500, 'letter-spacing="1.6"') : ''}
+  ${detail ? t(b.x + b.width - 56, b.y + b.height - 22, detail, 10, theme.secondary, 400, 'text-anchor="end"') : ''}`;
+}
+export interface SvgOptions {
+  fontDataUri?: string;
+  boldFontDataUri?: string;
+}
+export function renderSvg(scene: Scene, options: SvgOptions = {}): string {
+  const b = scene.bounds,
+    theme = scene.document.presentation.theme;
+  const font = options.fontDataUri
+    ? `<style>@font-face{font-family:'IBM Plex Sans';src:url('${options.fontDataUri}') format('truetype');font-weight:400;} ${options.boldFontDataUri ? `@font-face{font-family:'IBM Plex Sans';src:url('${options.boldFontDataUri}') format('truetype');font-weight:600;}` : ''}</style>`
+    : '';
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${Math.ceil(b.width)}" height="${Math.ceil(b.height)}" viewBox="${b.x} ${b.y} ${b.width} ${b.height}" role="img" aria-labelledby="diagram-title diagram-description"><title id="diagram-title">${escapeXml(scene.document.title)}</title><desc id="diagram-description">${escapeXml(scene.document.description ?? '')}</desc>${font}<g font-family="${escapeXml(scene.document.presentation.designSystem?.canvas?.fontFamily ?? 'IBM Plex Sans, Arial, sans-serif')}"><rect x="${b.x}" y="${b.y}" width="${b.width}" height="${b.height}" fill="${scene.document.presentation.designSystem?.canvas?.background ?? themes[theme].background}"/>${frameMarkup(scene)}${scene.groups.map((g) => groupMarkup(g, theme)).join('')}${scene.edges.map((e) => edgeMarkup(e, theme)).join('')}${scene.nodes.map((n) => `<g transform="translate(${n.x} ${n.y})">${nodeMarkup(n, theme)}</g>`).join('')}${scene.edges.map((e) => edgeLabelMarkup(e, theme)).join('')}</g></svg>`;
+}
+/** Adapters can emit native editable shapes from Scene, without parsing SVG. */
+export interface Exporter<T> {
+  id: string;
+  mimeType: string;
+  extension: string;
+  export(scene: Scene): Promise<T> | T;
+}
+export const svgExporter: Exporter<string> = {
+  id: 'svg',
+  mimeType: 'image/svg+xml',
+  extension: '.svg',
+  export: renderSvg,
+};

package/packages/core/src/resolve-style.ts

@@ -0,0 +1,29 @@
+import type { Diagram, DiagramNode, DiagramEdge, DiagramGroup } from './document';
+import type { ElementStyle } from './styles';
+
+/** Shared by layout and editing controls; renderer consumes the resolved scene style. */
+export function resolveNodeStyle(doc: Diagram, node: DiagramNode): ElementStyle {
+  const system = doc.presentation.designSystem;
+  const role =
+    node.role ??
+    (node.emphasis === 'primary' ? 'emphasis' : node.emphasis === 'muted' ? 'quiet' : '');
+  return {
+    ...system?.node,
+    ...system?.roles?.[role],
+    ...node.style,
+    ...doc.presentation.nodes[node.id]?.style,
+  };
+}
+export function resolveEdgeStyle(doc: Diagram, edge: DiagramEdge): ElementStyle {
+  const system = doc.presentation.designSystem;
+  return {
+    ...(system?.canvas ? { fill: system.canvas.background, text: system.canvas.secondary } : {}),
+    ...system?.edge,
+    ...system?.roles?.[edge.role ?? ''],
+    ...edge.appearance,
+  };
+}
+export function resolveGroupStyle(doc: Diagram, group: DiagramGroup): ElementStyle {
+  const system = doc.presentation.designSystem;
+  return { ...system?.group, ...system?.roles?.[group.role ?? ''], ...group.style };
+}