umlimator 0.21.0 → 0.22.0

package/lib/umlimator.d.ts

@@ -44,7 +44,7 @@ export interface MapNode {
 /** A typed element in schema version 2's envelope (docs/diagrams/model.md §1): a node, a member, a typed edge, a
  *  fragment. Nodes, edges, members and fragments share one id space; an id never contains "->". A typed edge is an
  *  Element with `from` and `to`, which may name a member. A typed view is a MapView with `diagram` (uml.class), and may
- *  have `subject`, `direction` ('right' | 'down'), `notation`, `present`, `fragments` and `timeline`. umlimator/all draws `uml.class` (0.18.0), `uml.object` and `uml.package` (0.19.0), `uml.sequence` and `uml.communication` (0.20.0), `uml.use-case`, `uml.activity`, `uml.state-machine` and `uml.interaction-overview` (0.21.0); other types draw as plain cards.
+ *  have `subject`, `direction` ('right' | 'down'), `notation`, `present`, `fragments` and `timeline`. umlimator/all draws `uml.class` (0.18.0), `uml.object` and `uml.package` (0.19.0), `uml.sequence` and `uml.communication` (0.20.0), `uml.use-case`, `uml.activity`, `uml.state-machine` and `uml.interaction-overview` (0.21.0), `uml.component`, `uml.deployment` and `uml.composite-structure` (0.22.0); other types draw as plain cards.
  *  From 0.19.0 the class, object and package types draw a shown package that owns something the view shows as a box holding it (`parent`), and
  *  qualify names (`sales::Order`) from the nearest shown owner, the view's `subject`, or the top. */
 export interface Element {
@@ -157,6 +157,43 @@ export interface UmlTransitionProps { trigger?: string; guard?: string; effect?:
 export type UmlInteractionOverviewElementType = 'uml.InitialNode' | 'uml.ActivityFinalNode' | 'uml.FlowFinalNode' | 'uml.DecisionNode'
   | 'uml.MergeNode' | 'uml.ForkNode' | 'uml.JoinNode' | 'uml.InteractionUse' | 'uml.Interaction' | 'uml.Comment';
 export type UmlInteractionOverviewLineType = 'uml.ControlFlow' | 'uml.CommentLink';
+/** The component diagram's vocabulary (a view with `diagram: 'uml.component'`, umlimator/all from 0.22.0;
+ *  docs/conformance/uml-component.md). A component's `parent` is a component (drawn nested, a box) or a package; its
+ *  ports (a class's too) are members, drawn on its border. A provided interface is always an `uml.Interface` node, joined
+ *  to its provider (a component, a class or a port) by a realization and to its requirers by usages; `present.<id>.as:
+ *  'ball'` draws it as a ball, a usage to it ending in a socket. */
+export type UmlComponentElementType = 'uml.Component' | 'uml.Interface' | 'uml.Artifact' | 'uml.Package' | 'uml.Comment';
+export type UmlComponentMemberType = 'uml.Port';
+export type UmlComponentLineType = 'uml.InterfaceRealization' | 'uml.ComponentRealization' | 'uml.Usage' | 'uml.Connector' | 'uml.Dependency'
+  | 'uml.Manifestation' | 'uml.CommentLink';
+/** A port's props: its type, drawn `name : Type` beside it. */
+export interface UmlPortProps { valueType?: string; stereotypes?: string[]; [key: string]: unknown }
+/** A connector's props: in a component view its kind (an assembly when left out); in a composite structure view, an end
+ *  through a part (UML's partWithPort): `ends.from.part` or `ends.to.part` names the part, `from` or `to` the port of its type. */
+export interface UmlConnectorProps { kind?: 'assembly' | 'delegation'; ends?: { from?: { part?: string }; to?: { part?: string } }; stereotypes?: string[]; [key: string]: unknown }
+/** What a component or composite structure view shows of one element, beside UmlPresent: an interface as a ball; a port's
+ *  side; on a part, each of its type's ports' sides. */
+export interface UmlStructurePresent { as?: 'ball'; side?: 'left' | 'right' | 'top' | 'bottom'; ports?: Record<string, { side?: 'left' | 'right' | 'top' | 'bottom' }> }
+/** The deployment diagram's vocabulary (a view with `diagram: 'uml.deployment'`, umlimator/all from 0.22.0;
+ *  docs/conformance/uml-deployment.md). A node, device or execution environment that holds something shown is a box drawn
+ *  as a cube; an artifact or deployment specification whose `parent` is one is deployed on it, a `uml.Deployment` line
+ *  from it to one is the other form. */
+export type UmlDeploymentElementType = 'uml.Node' | 'uml.Device' | 'uml.ExecutionEnvironment' | 'uml.Artifact' | 'uml.DeploymentSpecification'
+  | 'uml.Component' | 'uml.Comment';
+export type UmlDeploymentLineType = 'uml.Deployment' | 'uml.Manifestation' | 'uml.CommunicationPath' | 'uml.Dependency' | 'uml.CommentLink';
+/** The composite structure diagram's vocabulary (a view with `diagram: 'uml.composite-structure'`, umlimator/all from
+ *  0.22.0; docs/conformance/uml-composite-structure.md). The view's `subject` (a class, component or collaboration, listed
+ *  in `nodeIds`) is drawn as a box holding its parts (`uml.Property` members) and collaboration uses (`parent` the
+ *  subject); a part shows the ports of the class or component its `valueType` names by label, each drawn under the id
+ *  `<part>-><port>`. An open collaboration (listed in `nodeIds`) is a dashed ellipse round its roles. A role binding runs
+ *  from a part to a collaboration use, its `label` the role. */
+export type UmlCompositeStructureElementType = 'uml.Class' | 'uml.Component' | 'uml.Collaboration' | 'uml.CollaborationUse' | 'uml.Comment';
+export type UmlCompositeStructureMemberType = 'uml.Property' | 'uml.Port';
+export type UmlCompositeStructureLineType = 'uml.Connector' | 'uml.RoleBinding' | 'uml.CommentLink';
+/** A part's (or role's) props: the class or component it is, by label; its multiplicity; shared parts are drawn dashed. */
+export interface UmlPartProps { valueType?: string; multiplicity?: string; aggregation?: 'composite' | 'shared'; stereotypes?: string[]; [key: string]: unknown }
+/** A collaboration use's props: the collaboration it uses, by label. */
+export interface UmlCollaborationUseProps { collaboration?: string; stereotypes?: string[]; [key: string]: unknown }
 /** What a line means, drawn as its colour: calls (the default), feeds (hands work on), triggers (suggests, offers, fires),
  *  state (reads or writes a file, board or config: a thinner line, a muted label, no flow) and guard (a hook steps in).
  *  Colours are --um-w-<kind>. An edge's `style` (emphasis, dashed, security) wins over its kind's colour. */

package/lib/umlimator.js

@@ -123,7 +123,7 @@ function registerDiagramType(name, def = {}) {
      reroute is no registry field: reroute: false goes in the dg the type's own layout passes to layoutTyped (src/typed/layout.js).
    Stage 4's (notes/stage-4.md §12.1, §15): edits.rename(model, view, id, text); a hook's { pick, then }; name: false and
    opens on a palette entry; a line's cut, its label's width (150); rows(model, view, id) and word(model, id), the PDF's.
-   Stage 5's: a line's fromPort, toPort, inner, portRank, a box's pad, round, a view's labelGaps (src/typed/layout.js);
+   Stage 5's: a line's fromPort, toPort, inner, portRank, a box's pad, round, head, a view's labelGaps (src/typed/layout.js);
    edits.member, edits.key (src/typed/edit.js). */
 
 /* A view's type: the map for a view with no diagram, the registered type, or null for one this release does not draw */
@@ -131,7 +131,9 @@ const diagramOf = view => TYPES.get(view && view.diagram != null ? view.diagram
 
 /* What only a registered type's geometry uses, installed at load time by the files under src/typed/, which only
    lib/umlimator-all.js holds (tools/build.mjs): rows, rooms and routes in layoutPass, a typed line's ends in svgOf, the
-   gestures of edit.js it takes over (edit). Empty in umlimator.js, where no view is laid out but as a map (risks.md C5) */
+   gestures of edit.js it takes over (edit), diff()'s words for typed models (diff, order: src/uml/diff.js). Empty in
+   umlimator.js, where no view is laid out but as a map (risks.md C5).
+   Stage 6's: across(model), validate()'s rules on the whole model; fields(model, x), more panel fields (notes/stage-6.md §5) */
 const TYPED = {};
 
 const propRefs = type => Object.assign({}, ...[...TYPES.values()].map(T => T.refs && Object.hasOwn(T.refs, type) && T.refs[type]));
@@ -248,6 +250,7 @@ function refs(m, ids, only) {
     arr(v.nodes).forEach((n, j) => element(n, [...at, 'nodes', j], false));
     arr(v.edges).forEach((e, j) => { if (has(e)) say([...at, 'edges', j], 'view'); else element(e, [...at, 'edges', j], true); });
     arr(v.fragments).forEach((f, j) => element(f, [...at, 'fragments', j], false));
+    ['changes', 'constraints'].forEach(k => arr(isObj(v.timeline) && v.timeline[k]).forEach((c, j) => isObj(c) && ['lifeline', 'from', 'to'].forEach(f => { if (has(c[f])) say([...at, 'timeline', k, j, f], 'end'); })));
     [['layout', 'pin'], ['present', 'present'], ['nodeOverrides', 'override']].forEach(([k, kind]) => Object.keys(isObj(v[k]) ? v[k] : {}).forEach(id => { if (has(id)) say([...at, k, id], kind); }));
     if (has(v.subject)) say([...at, 'subject'], 'subject');
     if (!only) ['parent', 'node'].forEach(k => { if (has(v[k])) say([...at, k], 'parent'); }); // a view opened from a card
@@ -374,9 +377,9 @@ function run(m, c, gone) {
       const take = id => { const r = at.get(id); if (!r || now.has(id)) return; now.add(id);
         arr(r.x.members).forEach(y => isObj(y) && take(y.id)); arr(kids.get(id)).forEach(take); }; // what it owns goes with it
       take(c.id);
-      // lines to what is gone go too, lines to those lines, and what a type's refs cascade (a reply with its call)
+      // lines to what is gone go too, lines to those lines, a timeline's items, and what a type's refs cascade (a reply with its call)
       const cascade = x => Object.entries(propRefs(x.type)).some(([p, how]) => how === 'cascade' && [].concat(dig(x, p)).some(id => now.has(id)));
-      for (let more = true; more;) { more = false; for (const [k, o] of at) if (!now.has(k) && (o.kind === 'edge' && (now.has(o.x.from) || now.has(o.x.to)) || cascade(o.x))) { take(k); more = true; } }
+      for (let more = true; more;) { more = false; for (const [k, o] of at) if (!now.has(k) && (o.kind === 'edge' && (now.has(o.x.from) || now.has(o.x.to)) || o.kind === 'time' && [o.x.lifeline, o.x.from, o.x.to].some(i => now.has(i)) || cascade(o.x))) { take(k); more = true; } }
       // what stays in something gone goes to its nearest owner left; an operand's messages to its fragment's parent
       const above = id => { const r = at.get(id); return r && (r.x.parent ?? (r.owner && above(r.owner.id))); };
       for (const [k, o] of at) if (!now.has(k) && now.has(o.x.parent)) { let p = o.x.parent;
@@ -1035,7 +1038,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
   // A typed view's boxes (notes/stage-2.md §3.2) take the same code as a map's: their title is the type's (`title`), and a box
   // grows to hold it; laid out turned (direction down), the 24 px header room goes left, the side that becomes the top
   const familyDefs = dg.containers || [], tagged = n => map && (n.author || n.k === 'm-ext'), TB = !map && dg.turned; // tagged: a name tag hangs under the card
-  const headW = f => textW(!map && f.title || f.label || f.id, 11) + 16; // a box's title, as the audit measures it
+  const headW = f => textW(!map && f.title || f.label || f.id, !map && f.head ? 12 : 11) + 16; // a box's title, as the audit measures it (two lines: at 12 px)
   const framesNow = () => { const cache = Object.create(null); // a box may be named 'constructor'
     const frameOf = (f, trail = new Set()) => {
       if (cache[f.id]) return cache[f.id];
@@ -1048,7 +1051,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
       const p = 12, x = Math.min(...rects.map(r => r.x)) - p - (TB ? 24 : 0), y = Math.min(...rects.map(r => r.y)) - p - (TB ? 0 : 24);
       const b = {...f, x, y, w:Math.max(...rects.map(r => r.x+r.w)) + p - x, h:Math.max(...rects.map(r => r.y+r.h)) + p - y};
       if (!map) b[TB ? 'h' : 'w'] = Math.max(b[TB ? 'h' : 'w'], headW(f) + 16);
-      return cache[f.id] = dg.typed ? TYPED.frame(b) : b;
+      return cache[f.id] = dg.typed ? TYPED.frame(b, TB) : b;
     };
     const out = familyDefs.map(f => frameOf(f)).filter(Boolean);
     if (map) out.forEach(f => { // the box fits its title and its badges, which are tabs on its top border, at the right
@@ -1450,7 +1453,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
   const runRouting = order => {
     routed.length = 0; reserved.length = 0; placed.length = 0; stats = {};
     (dg.blocks || []).forEach(b => { reserved.push(b); placed.push(b); });
-    families.forEach(f => { const h = TB ? { x: f.x + 3, y: f.y + 8, w: 22, h: headOf(f) } : { x: f.x + 8, y: f.y + 3, w: headOf(f), h: 22 }; reserved.push(h); placed.push(h);
+    families.forEach(f => { const t = 22 + (!map && f.head || 0), h = TB ? { x: f.x + 3, y: f.y + 8, w: t, h: headOf(f) } : { x: f.x + 8, y: f.y + 3, w: headOf(f), h: t }; reserved.push(h); placed.push(h);
       placed.push(...[{ x: f.x, y: f.y - 3, w: f.w, h: 6 }, { x: f.x, y: f.y + f.h - 3, w: f.w, h: 6 }, { x: f.x - 3, y: f.y, w: 6, h: f.h }, { x: f.x + f.w - 3, y: f.y, w: 6, h: f.h }].map(r => ({ ...r, band: true }))); }); // lane headers and arrows stay clear
     edges.filter(e => e.fixed).forEach(e => { routed.push(e); if (e.under || e[OWN_ROUTE]) { placeLabel(e); stats[e.how] = (stats[e.how] || 0) + 1; return; } if (e.lbl) { placed.push(e.lbl); reserved.push({ x: e.lbl.x - 3, y: e.lbl.y - 3, w: e.lbl.w + 6, h: e.lbl.h + 6 }); } stats.comb = (stats.comb || 0) + 1; });
     order.forEach(e => {
@@ -1687,7 +1690,7 @@ function routeAudit(geo, where, only, refs) { // only: a set of edges; counts ju
     if (f.parent && (!parent || !inside(parent,f))) say(`${where}: family "${f.label}" sticks out of its parent`, f);
     (f.nodeIds || []).forEach(id => { const n = geo.byId[id]; if (n && !inside(f,n)) say(`${where}: family "${f.label}" does not contain "${n.label}"`, f, n); });
     families.filter(g => g !== f && g.parent === f.parent && g.id > f.id).forEach(g => { if (hit(f,g,-1)) say(`${where}: families "${f.label}" and "${g.label}" overlap`, f, g); });
-    geo.edges.forEach((e,i) => { if (segHit({x:f.x+8,y:f.y+3,w:Math.min(f.w-16,textW(f.label || f.id,11)+16),h:22},i)) say(`${where}: family "${f.label}": header crossed by edge ${name(e)}`, f, e); });
+    geo.edges.forEach((e,i) => { if (segHit({x:f.x+8,y:f.y+3,w:Math.min(f.w-16,textW(f.label || f.id,11)+16),h:22+(!geo.map&&f.head||0)},i)) say(`${where}: family "${f.label}": header crossed by edge ${name(e)}`, f, e); });
     geo.edges.forEach((e,i) => { if (segs[i].some(([a,b]) => { const v = a[0] === b[0], c = v ? a[0] : a[1], p = v ? [a[1], b[1]] : [a[0], b[0]];
       const lo = Math.max(Math.min(...p), v ? f.y : f.x), hi = Math.min(Math.max(...p), v ? f.y + f.h : f.x + f.w);
       return hi - lo > 40 && (v ? [f.x, f.x + f.w] : [f.y, f.y + f.h]).some(u => Math.abs(c - u) < 8); })) say(`${where}: edge ${name(e)} runs along the border of family "${f.label}"`, e, f); });
@@ -1702,7 +1705,7 @@ const box = n => ({ x: n.x, y: n.y, w: n.w, h: n.h });
 function overlapIssues(geo, where, refs) {
   const issues = [], nodes = geo.nodes, say = teller(issues, refs);
   const inside = (a, b) => a.x >= b.x - 1 && a.y >= b.y - 1 && a.x + a.w <= b.x + b.w + 1 && a.y + a.h <= b.y + b.h + 1;
-  const holds = (a, b) => (a.holder && inside(b, a)) || (b.holder && inside(a, b)); // a holder (a sequence's frame) may hold what it meets, not cross it
+  const holds = (a, b) => (a.holder && inside(b, a)) || (b.holder && inside(a, b)) || !geo.map && ((a.owner || 0) === b.id || (b.owner || 0) === a.id); // a holder (a sequence's frame) may hold what it meets, not cross it; a port its owner
   for (let i = 0; i < nodes.length; i++) for (let j = i + 1; j < nodes.length; j++) if (hit(box(nodes[i]), box(nodes[j]), -1) && !holds(nodes[i], nodes[j])) say(`${where}: nodes "${nodes[i].label}" and "${nodes[j].label}" overlap`, nodes[i], nodes[j]);
   return issues;
 }
@@ -2614,9 +2617,10 @@ export function validate(model) {
     out.push(...typedProblems(m).filter(p => !(p.level === 'error' && said.has(p.path))));
     views.forEach((v, i) => { const at = `views[${i}].diagram`; // a well-formed name of a type this release does not draw (M13)
       if (typedView(v) && !diagramOf(v) && !out.some(p => p.path === at)) warn(at, `diagram "${v.diagram}" is not drawn by this release: its nodes are drawn as plain cards`); });
-    const once = new Set(); // each view's type's rules, a problem once; a validate(model) that takes no view, once a type
-    views.filter(typedView).forEach(v => { const T = diagramOf(v); if (!T || !T.validate || once.has(T)) return; if (T.validate.length < 2) once.add(T);
-      T.validate(m, v).forEach(p => { const k = JSON.stringify([p.level, p.path, p.message]); if (!once.has(k)) { once.add(k); out.push(p); } }); });
+    const once = new Set(), say = p => { const k = JSON.stringify([p.level, p.path, p.message]); if (!once.has(k)) { once.add(k); out.push(p); } };
+    // each view's type's rules, a problem once; a validate(model) that takes no view, once a type
+    views.filter(typedView).forEach(v => { const T = diagramOf(v); if (!T || !T.validate || once.has(T)) return; if (T.validate.length < 2) once.add(T); T.validate(m, v).forEach(say); });
+    if (TYPED.across) arrOf(TYPED.across(m)).forEach(say);
   }
   return out;
 }
@@ -2773,14 +2777,16 @@ export function diff(before, after) {
     if (h === 'removed') said.push(`removes ${name(n.id)}`);
     if (h === 'changed') { const [o, x] = was.get(n), keys = diffKeys([o, x]), rest = keys.filter(k => k !== 'label'), p0 = o.parent ?? null, p1 = x.parent ?? null;
       if (keys.join() === 'parent' && p0 !== p1 && A.schemaVersion === 2 && out.schemaVersion === 2) return said.push(`moves ${name(n.id)} ${p1 != null ? 'into ' + name(p1) : 'out of ' + name(p0)}`); // a re-own (schema version 2; absent or null is no owner)
+      const t = TYPED.diff && TYPED.diff(o, x, name, [A, out]); if (t) return said.push(...t); // a typed element's own words (src/uml/diff.js)
       said.push((keys.includes('label') ? `renames ${o.label || o.id} to ${x.label || x.id}` : `changes ${name(n.id)}`) + (rest.length ? ` (${rest.join(', ')})` : '')); } });
   lines.forEach(e => { const h = how.get(e); if (!h || cardHow.get(e.from) === h && h !== 'changed' || cardHow.get(e.to) === h && h !== 'changed') return;
     const ends = `${name(e.from)} to ${name(e.to)}`, lab = e.label ? ` (${e.label})` : '';
     if (h === 'added') said.push(`adds a line from ${ends}${lab}`);
     if (h === 'removed') said.push(`removes the line from ${ends}${lab}`);
-    if (h === 'changed') { const [o, x] = was.get(e);
+    if (h === 'changed') { const [o, x] = was.get(e), t = TYPED.diff && TYPED.diff(o, x, name, [A, out]); if (t) return said.push(...t);
       said.push(`changes the line from ${ends} (${diffKeys([o, x]).map(k => k === 'label' ? `label ${o.label ?? '-'} → ${x.label ?? '-'}` : k).join(', ')})`); } });
   moved.forEach(([verb, id, v]) => said.push(`${verb} ${name(id)} ${verb === 'puts' ? 'in' : 'out of'} the view ${v.title || v.id}`));
+  if (TYPED.order) TYPED.order(A, out, views, V0, said, touched, name);
 
   // the views that show a change: a card or line the diff marks, or a card it put in or took out
   const changed = views.filter(v => v && (touched.has(v.id) || arr(v.nodeIds).some(id => cardHow.has(id)) || linesOf(out, v).some(e => how.has(e)))).map(v => v.id);
@@ -2834,9 +2840,11 @@ const walkFrom = (edges, start, back) => { const seen = new Set([start]); // bre
   for (let q = [start]; q.length;) { const u = q.shift(); edges.forEach(e => { const [a, b] = back ? [e.to, e.from] : [e.from, e.to]; if (a === u && !seen.has(b)) { seen.add(b); q.push(b); } }); }
   return seen; };
 
+const viewType = (model, viewId) => model && model.schemaVersion === 2 && diagramOf(arrOf(model.views).find(v => v && v.id === viewId));
 /** Every card and line on a path from one card to another, following lines forward: the cards both reachable from `from`
  *  and leading to `to`, and the lines between them. [] when no path joins them. */
 export function paths(model, viewId, from, to) {
+  const T = viewType(model, viewId); if (T && T.paths) return T.paths(model, viewId, from, to); // a type's own walk (a sequence's, in time)
   const { ids, edges } = lineGraph(model, viewId);
   if (!ids.includes(from) || !ids.includes(to)) return [];
   const F = walkFrom(edges, from), B = walkFrom(edges, to, true), on = id => F.has(id) && B.has(id);
@@ -2861,7 +2869,7 @@ export function reach(model, viewId, from, options = {}) {
 /** A view in plain sentences: its cards and their kinds, its boxes, what each card's lines do (in run order on a sequence
  *  view), and the cards with no line. The same model gives the same words: a text alternative, docs, or an AI's context. */
 export function describe(model, viewId) {
-  const T = model && model.schemaVersion === 2 && diagramOf(arrOf(model.views).find(v => v && v.id === viewId)); if (T && T.describe) return T.describe(model, viewId); // a type's own words (1.9)
+  const T = viewType(model, viewId); if (T && T.describe) return T.describe(model, viewId); // a type's own words (1.9)
   const { ctx, v, ids, edges } = lineGraph(model, viewId), boxes = (v.containers || []).filter(c => c && c.id);
   const name = id => ctx.N[id] ? ctx.nodeIn(id, viewId).label || id : (boxes.find(c => c.id === id) || {}).label || id;
   const list = xs => xs.length < 3 ? xs.join(' and ') : xs.slice(0, -1).join(', ') + ' and ' + xs[xs.length - 1];
@@ -3642,7 +3650,7 @@ function typedEditor(api) {
   function props() {
     const at = elementsOf(model()), id = selId(at), e = id && at.get(id);
     if (!e) return '<h3>Properties</h3><p class="um-note">Select a card or a line</p>';
-    const x = e.x, P = isRec(x.props) ? x.props : {}, schema = arrOf(isRec(def().props) ? def().props[x.type] : null).filter(f => isRec(f) && typeof f.key === 'string');
+    const x = e.x, P = isRec(x.props) ? x.props : {}, F = a => arrOf(a).filter(f => isRec(f) && typeof f.key === 'string'), own = F(isRec(def().props) ? def().props[x.type] : null), schema = [...own, ...F(TYPED.fields && TYPED.fields(model(), x))];
     const off = can('rename') ? '' : ' disabled'; // the editable flags: a field the host does not offer is shown, to read
     const text = (f, v, name, more = '') => `<label>${esc(name)}<input data-f="${esc(f)}" data-was="${esc(v)}" value="${esc(v)}"${more}${off}></label>`;
     let h = `<h3>Properties${x.type != null ? ': ' + esc(x.type) : ''}</h3>` + text('label', x.label ?? '', 'Name');
@@ -3657,7 +3665,7 @@ function typedEditor(api) {
     const offer = Array.isArray(os) && [{ id: '', label: 'none' }, ...os.filter(o => isRec(o) && o.id != null && !under(o.id))];
     if (offer && x.parent != null && !offer.some(o => o.id === x.parent)) offer.push({ id: x.parent, label: (at.get(x.parent) || { x: {} }).x.label });
     if (offer) h += `<label>Owner<select data-f="owner" data-owner${can('move') ? '' : ' disabled'}>${offer.map(o => `<option value="${esc(o.id)}"${o.id === (x.parent ?? '') ? ' selected' : ''}>${esc(o.label ?? o.id)}</option>`).join('')}</select></label>`;
-    const rest = schema.length ? [] : Object.entries(P); // no schema: what it holds, to read
+    const rest = own.length ? [] : Object.entries(P); // no schema: what it holds, to read
     if (rest.length) h += '<dl>' + rest.map(([k, v]) => `<dt>${esc(k)}</dt><dd>${esc(typeof v === 'string' ? v : JSON.stringify(v))}</dd>`).join('') + '</dl>';
     const M = def().member;
     if (e.kind === 'node' && !(M && M.holds && !M.holds(x))) { // a comment holds none
@@ -3843,7 +3851,7 @@ export function render(container, model, options = {}) {
   const emitSel = (again = false) => {
     const now = JSON.stringify(picked()); if (now === said && !again) return; said = now;
     say(!sel ? 'Nothing selected' : (sel.type === 'node' ? nameOf(sel.id) : sel.type === 'edge' ? (e => e ? `Line from ${nameOf(e.from)} to ${nameOf(e.to)}` : 'Line')(geo.edges[edgeIndex(sel)])
-      : `Box ${(svg.querySelector(`.family[data-family="${CSS.escape(sel.id)}"] .family-title`) || {}).textContent || sel.id}`) + (more.length ? `, ${more.length + 1} ${picked().every(r => r.type === 'node') ? 'cards ' : ''}selected` : ', selected'));
+      : `Box ${[...svg.querySelectorAll(`.family[data-family="${CSS.escape(sel.id)}"] .family-title`)].map(t => t.textContent).join(' ') || sel.id}`) + (more.length ? `, ${more.length + 1} ${picked().every(r => r.type === 'node') ? 'cards ' : ''}selected` : ', selected'));
     emit('select', { target: copyRef(sel), targets: picked() });
   };
   const edgeRef = e => ({ type: 'edge', ids: edgeRefIds(e), view: cur });
@@ -4288,7 +4296,7 @@ export function render(container, model, options = {}) {
     if (ref.type === 'node') { const n = geo.byId[ref.id]; return n ? { x: n.x + 50, y: n.y + n.h / 2 - 13, w: n.w - 58, h: 26 } : null; }
     if (ref.type === 'edge') { const e = geo.edges[edgeIndex(ref)]; if (!e) return null; const L = e.lbl, m = e.pts[Math.floor(e.pts.length / 2)];
       return L ? { x: L.x - 8, y: L.y - 2, w: L.w + 16, h: L.h + 4 } : { x: m[0] - 60, y: m[1] - 12, w: 120, h: 24 }; }
-    const f = ref.type === 'container' && (geo.families || []).find(x => x.id === ref.id); return f ? { x: f.x + 8, y: f.y + 2, w: Math.min(f.w - 16, 220), h: 24 } : null; };
+    const f = ref.type === 'container' && (geo.families || []).find(x => x.id === ref.id); return f ? { x: f.x + 8, y: f.y + 2 + (f.head || 0), w: Math.min(f.w - 16, 220), h: 24 } : null; };
   function editor(where, text, done, ref = null) { // where: a box in map units (a new card's), or ref names what the field sits over
     if (naming) naming.close(false);
     const inp = document.createElement('input');

package/lib/umlimator.schema.json

@@ -411,7 +411,7 @@
      }
     },
     "type": {
-     "description": "Schema version 2: the element's type, <notation>.<Name> (uml.Class). validate() checks typed fields only in a model with schemaVersion 2. The class diagram (uml.class, 0.18.0): uml.Class, uml.Interface, uml.Enumeration, uml.DataType, uml.PrimitiveType, uml.Package and uml.Comment; their members uml.Property, uml.Operation and uml.EnumerationLiteral. The object diagram (uml.object, 0.19.0): uml.InstanceSpecification and uml.Comment; an instance's members uml.Slot. The package diagram (uml.package, 0.19.0): uml.Package and the class diagram's classifiers, and uml.Comment. The sequence and communication diagrams (uml.sequence, uml.communication, 0.20.0): uml.Lifeline. The use case diagram (uml.use-case, 0.21.0): uml.Actor, uml.UseCase, uml.Subject and uml.Comment; a use case's members uml.ExtensionPoint. The activity diagram (uml.activity, 0.21.0): uml.InitialNode, uml.ActivityFinalNode, uml.FlowFinalNode, uml.Action, uml.CallBehaviorAction, uml.SendSignalAction, uml.AcceptEventAction, uml.DecisionNode, uml.MergeNode, uml.ForkNode, uml.JoinNode, uml.ObjectNode, uml.DataStoreNode, uml.ActivityPartition and uml.Comment. The state machine diagram (uml.state-machine, 0.21.0): uml.State, uml.Pseudostate, uml.FinalState and uml.Comment; a state's members uml.Region and uml.InternalTransition. The interaction overview diagram (uml.interaction-overview, 0.21.0): the activity's control nodes, uml.InteractionUse, uml.Interaction (an inline interaction) and uml.Comment.",
+     "description": "Schema version 2: the element's type, <notation>.<Name> (uml.Class). validate() checks typed fields only in a model with schemaVersion 2. The class diagram (uml.class, 0.18.0): uml.Class, uml.Interface, uml.Enumeration, uml.DataType, uml.PrimitiveType, uml.Package and uml.Comment; their members uml.Property, uml.Operation and uml.EnumerationLiteral. The object diagram (uml.object, 0.19.0): uml.InstanceSpecification and uml.Comment; an instance's members uml.Slot. The package diagram (uml.package, 0.19.0): uml.Package and the class diagram's classifiers, and uml.Comment. The sequence and communication diagrams (uml.sequence, uml.communication, 0.20.0): uml.Lifeline. The use case diagram (uml.use-case, 0.21.0): uml.Actor, uml.UseCase, uml.Subject and uml.Comment; a use case's members uml.ExtensionPoint. The activity diagram (uml.activity, 0.21.0): uml.InitialNode, uml.ActivityFinalNode, uml.FlowFinalNode, uml.Action, uml.CallBehaviorAction, uml.SendSignalAction, uml.AcceptEventAction, uml.DecisionNode, uml.MergeNode, uml.ForkNode, uml.JoinNode, uml.ObjectNode, uml.DataStoreNode, uml.ActivityPartition and uml.Comment. The state machine diagram (uml.state-machine, 0.21.0): uml.State, uml.Pseudostate, uml.FinalState and uml.Comment; a state's members uml.Region and uml.InternalTransition. The interaction overview diagram (uml.interaction-overview, 0.21.0): the activity's control nodes, uml.InteractionUse, uml.Interaction (an inline interaction) and uml.Comment. The component diagram (uml.component, 0.22.0): uml.Component, uml.Interface, uml.Artifact, uml.Package and uml.Comment; a component's (or class's) members uml.Port. The deployment diagram (uml.deployment, 0.22.0): uml.Node, uml.Device, uml.ExecutionEnvironment, uml.Artifact, uml.DeploymentSpecification, uml.Component and uml.Comment. The composite structure diagram (uml.composite-structure, 0.22.0): the view's subject (a uml.Class, uml.Component or uml.Collaboration), uml.Collaboration, uml.CollaborationUse and uml.Comment; the subject's members uml.Property (its parts) and uml.Port, a collaboration's uml.Property (its roles).",
      "examples": [
       "uml.Class",
       "uml.Interface",
@@ -432,14 +432,22 @@
       "uml.Pseudostate",
       "uml.FinalState",
       "uml.InteractionUse",
-      "uml.Interaction"
+      "uml.Interaction",
+      "uml.Component",
+      "uml.Artifact",
+      "uml.Node",
+      "uml.Device",
+      "uml.ExecutionEnvironment",
+      "uml.DeploymentSpecification",
+      "uml.Collaboration",
+      "uml.CollaborationUse"
      ]
     },
     "parent": {
-     "description": "Schema version 2: the element that owns it (a package, a composite state, a lane). From 0.19.0 a class, object or package view draws a shown package that owns something it shows as a box holding it. A use case's: a subject or a package. An activity node's: its partition (lane); a partition's: the partition it is nested in. A substate's or pseudostate's: a state, or a region (a member) of one."
+     "description": "Schema version 2: the element that owns it (a package, a composite state, a lane). From 0.19.0 a class, object or package view draws a shown package that owns something it shows as a box holding it. A use case's: a subject or a package. An activity node's: its partition (lane); a partition's: the partition it is nested in. A substate's or pseudostate's: a state, or a region (a member) of one. A component's: a component (drawn nested) or a package. A node's, device's or execution environment's: one of the three (UML's nestedNode); an artifact's or deployment specification's: the target it is deployed on. A collaboration use's: the subject of its composite structure view (0.22.0)."
     },
     "props": {
-     "description": "Schema version 2: the type's own properties. The class diagram (uml.class, 0.18.0): isAbstract and stereotypes on a classifier; on a member, the fields of its UML text (docs/conformance/uml-class.md). The object diagram (uml.object, 0.19.0): an instance's classifier and stereotypes; a slot's value (docs/conformance/uml-object.md). The sequence and communication diagrams (uml.sequence, uml.communication, 0.20.0): a lifeline's represents, and stereotypes (actor draws «actor» over its name). The state machine diagram (uml.state-machine, 0.21.0): a state's entry, do and exit, a pseudostate's kind (docs/conformance/uml-state-machine.md).",
+     "description": "Schema version 2: the type's own properties. The class diagram (uml.class, 0.18.0): isAbstract and stereotypes on a classifier; on a member, the fields of its UML text (docs/conformance/uml-class.md). The object diagram (uml.object, 0.19.0): an instance's classifier and stereotypes; a slot's value (docs/conformance/uml-object.md). The sequence and communication diagrams (uml.sequence, uml.communication, 0.20.0): a lifeline's represents, and stereotypes (actor draws «actor» over its name). The state machine diagram (uml.state-machine, 0.21.0): a state's entry, do and exit, a pseudostate's kind (docs/conformance/uml-state-machine.md). The composite structure diagram (uml.composite-structure, 0.22.0): a collaboration use's collaboration (docs/conformance/uml-composite-structure.md).",
      "anyOf": [
       {
        "type": "object",
@@ -477,6 +485,9 @@
           "deepHistory",
           "terminate"
          ]
+        },
+        "collaboration": {
+         "description": "uml.CollaborationUse: the collaboration it uses, by label, as text; drawn name : Collaboration."
         }
        }
       },
@@ -484,7 +495,7 @@
      ]
     },
     "members": {
-     "description": "Schema version 2: owned parts, in display order (attributes, ports, regions, lanes), each a typed element. The class diagram (uml.class, 0.18.0): a classifier's attributes (uml.Property) and operations (uml.Operation), an enumeration's literals (uml.EnumerationLiteral). The object diagram (uml.object, 0.19.0): an instance's slots (uml.Slot), each a feature = value row. The use case diagram (uml.use-case, 0.21.0): a use case's extension points (uml.ExtensionPoint, by name). The state machine diagram (uml.state-machine, 0.21.0): a state's regions (uml.Region, by name) and internal transitions (uml.InternalTransition, trigger [guard] / effect).",
+     "description": "Schema version 2: owned parts, in display order (attributes, ports, regions, lanes), each a typed element. The class diagram (uml.class, 0.18.0): a classifier's attributes (uml.Property) and operations (uml.Operation), an enumeration's literals (uml.EnumerationLiteral). The object diagram (uml.object, 0.19.0): an instance's slots (uml.Slot), each a feature = value row. The use case diagram (uml.use-case, 0.21.0): a use case's extension points (uml.ExtensionPoint, by name). The state machine diagram (uml.state-machine, 0.21.0): a state's regions (uml.Region, by name) and internal transitions (uml.InternalTransition, trigger [guard] / effect). The component diagram (uml.component, 0.22.0): a component's or class's ports (uml.Port), drawn on its border. The composite structure diagram (uml.composite-structure, 0.22.0): the subject's parts (uml.Property, name : Type [multiplicity]) and ports (uml.Port); a collaboration's roles (uml.Property).",
      "anyOf": [
       {
        "type": "array",
@@ -498,7 +509,7 @@
             "description": "Unique among every node, edge and member of the model."
            },
            "type": {
-            "description": "uml.Property, uml.Operation or uml.EnumerationLiteral in a class diagram; uml.Slot in an object diagram. uml.ExtensionPoint in a use case diagram; uml.Region or uml.InternalTransition in a state machine diagram."
+            "description": "uml.Property, uml.Operation or uml.EnumerationLiteral in a class diagram; uml.Slot in an object diagram. uml.ExtensionPoint in a use case diagram; uml.Region or uml.InternalTransition in a state machine diagram. uml.Port on a component or class (component and composite structure diagrams); uml.Property as a part or a role in a composite structure diagram (0.22.0)."
            },
            "label": {
             "description": "The member's name (a slot's: the feature it gives a value); the rest of its UML text is in props."
@@ -519,7 +530,7 @@
                 "description": "uml.Property, uml.Operation: public, private, protected or package (+ - # ~)."
                },
                "valueType": {
-                "description": "uml.Property, and each of an operation's parameters: its type, as text (Money, String[], Map<K, V>)."
+                "description": "uml.Property, and each of an operation's parameters: its type, as text (Money, String[], Map<K, V>). uml.Port: its type, drawn name : Type beside it (0.22.0). A part's or role's: the class or component it is, by label (a part shows that type's ports)."
                },
                "multiplicity": {
                 "description": "uml.Property: 1, *, n..m or n..* (0..1, 1..*), kept as written."
@@ -550,6 +561,13 @@
                },
                "effect": {
                 "description": "uml.InternalTransition: its effect, as text, drawn after /."
+               },
+               "aggregation": {
+                "description": "uml.Property as a part (composite structure, 0.22.0): composite (the default) or shared, drawn dashed.",
+                "examples": [
+                 "composite",
+                 "shared"
+                ]
                }
               }
              },
@@ -852,7 +870,7 @@
      "description": "When the line is used."
     },
     "type": {
-     "description": "Schema version 2: the element's type, <notation>.<Name> (uml.Class). The class diagram (uml.class, 0.18.0): uml.Association, uml.Generalization (from the specific to the general), uml.InterfaceRealization (to the interface), uml.Dependency (from the client) and uml.CommentLink (from the comment). The object diagram (uml.object, 0.19.0): uml.Link and uml.CommentLink. The package diagram (uml.package, 0.19.0): uml.PackageImport and uml.PackageMerge (from the importing or merging package), uml.Dependency and uml.CommentLink. The sequence diagram (uml.sequence, 0.20.0): uml.Message, inline in its view's edges, in time order. The communication diagram (uml.communication, 0.20.0): uml.Connector and uml.Message, model lines its view lists, connectors first; only the messages' order means anything. The use case diagram (uml.use-case, 0.21.0): uml.Association (an actor and a use case), uml.Include and uml.Extend (from the including or extending use case), uml.Generalization (from the specific to the general) and uml.CommentLink. The activity diagram (uml.activity, 0.21.0): uml.ControlFlow, uml.ObjectFlow and uml.CommentLink. The state machine diagram (uml.state-machine, 0.21.0): uml.Transition and uml.CommentLink. The interaction overview diagram (uml.interaction-overview, 0.21.0): uml.ControlFlow and uml.CommentLink.",
+     "description": "Schema version 2: the element's type, <notation>.<Name> (uml.Class). The class diagram (uml.class, 0.18.0): uml.Association, uml.Generalization (from the specific to the general), uml.InterfaceRealization (to the interface), uml.Dependency (from the client) and uml.CommentLink (from the comment). The object diagram (uml.object, 0.19.0): uml.Link and uml.CommentLink. The package diagram (uml.package, 0.19.0): uml.PackageImport and uml.PackageMerge (from the importing or merging package), uml.Dependency and uml.CommentLink. The sequence diagram (uml.sequence, 0.20.0): uml.Message, inline in its view's edges, in time order. The communication diagram (uml.communication, 0.20.0): uml.Connector and uml.Message, model lines its view lists, connectors first; only the messages' order means anything. The use case diagram (uml.use-case, 0.21.0): uml.Association (an actor and a use case), uml.Include and uml.Extend (from the including or extending use case), uml.Generalization (from the specific to the general) and uml.CommentLink. The activity diagram (uml.activity, 0.21.0): uml.ControlFlow, uml.ObjectFlow and uml.CommentLink. The state machine diagram (uml.state-machine, 0.21.0): uml.Transition and uml.CommentLink. The interaction overview diagram (uml.interaction-overview, 0.21.0): uml.ControlFlow and uml.CommentLink. The component diagram (uml.component, 0.22.0): uml.InterfaceRealization (from a component, a class or a port to the interface: a plain stem to a ball), uml.Usage (to the interface: a socket at a ball, else a dashed «use» arrow), uml.ComponentRealization (from the realizing classifier to the component), uml.Connector (props.kind assembly or delegation; from or to a port), uml.Dependency, uml.Manifestation (from an artifact) and uml.CommentLink. The deployment diagram (uml.deployment, 0.22.0): uml.Deployment (from an artifact or deployment specification to its target), uml.Manifestation, uml.CommunicationPath (between two targets), uml.Dependency and uml.CommentLink. The composite structure diagram (uml.composite-structure, 0.22.0): uml.Connector (between parts and ports; an end through a part keeps props.ends.<end>.part), uml.RoleBinding (from a part to a collaboration use; its label the role) and uml.CommentLink.",
      "examples": [
       "uml.Association",
       "uml.Generalization",
@@ -868,20 +886,26 @@
       "uml.Extend",
       "uml.ControlFlow",
       "uml.ObjectFlow",
-      "uml.Transition"
+      "uml.Transition",
+      "uml.Usage",
+      "uml.ComponentRealization",
+      "uml.Manifestation",
+      "uml.Deployment",
+      "uml.CommunicationPath",
+      "uml.RoleBinding"
      ]
     },
     "parent": {
      "description": "Schema version 2: the element that owns it (a package, a composite state, a lane). In a sequence view: the operand (uml.InteractionOperand) of one of its fragments that holds the message; none at the top level."
     },
     "props": {
-     "description": "Schema version 2: the type's own properties. The class diagram (uml.class, 0.18.0): an association's ends, and stereotypes on any line («use» on a dependency). The object diagram (uml.object, 0.19.0): a link's association and the roles at its ends. The package diagram (uml.package, 0.19.0): a package import's visibility. The sequence and communication diagrams (0.20.0): a message's sort and replyTo. The use case diagram (0.21.0): an extend's extensionPoints and condition. The activity and interaction overview diagrams (0.21.0): a flow's guard (its label is its name). The state machine diagram (0.21.0): a transition's trigger, guard and effect, drawn trigger [guard] / effect.",
+     "description": "Schema version 2: the type's own properties. The class diagram (uml.class, 0.18.0): an association's ends, and stereotypes on any line («use» on a dependency). The object diagram (uml.object, 0.19.0): a link's association and the roles at its ends. The package diagram (uml.package, 0.19.0): a package import's visibility. The sequence and communication diagrams (0.20.0): a message's sort and replyTo. The use case diagram (0.21.0): an extend's extensionPoints and condition. The activity and interaction overview diagrams (0.21.0): a flow's guard (its label is its name). The state machine diagram (0.21.0): a transition's trigger, guard and effect, drawn trigger [guard] / effect. The component diagram (0.22.0): a connector's kind (assembly or delegation). The composite structure diagram (0.22.0): a connector end's part (ends.from.part, ends.to.part), UML's partWithPort.",
      "anyOf": [
       {
        "type": "object",
        "properties": {
         "ends": {
-         "description": "uml.Association: { from, to }, each end's role, multiplicity, aggregation and navigability. uml.Link: each end's role.",
+         "description": "uml.Association: { from, to }, each end's role, multiplicity, aggregation and navigability. uml.Link: each end's role. uml.Connector (composite structure, 0.22.0): an end through a part, { part }: the end (from or to) is a port of the part's type, reached through that part.",
          "anyOf": [
           {
            "type": "object",
@@ -903,6 +927,9 @@
                 },
                 "navigable": {
                  "description": "true draws an open arrowhead at this end."
+                },
+                "part": {
+                 "description": "uml.Connector (composite structure, 0.22.0): the part (a member id of the subject) this end's port is reached through."
                 }
                }
               },
@@ -926,6 +953,9 @@
                 },
                 "navigable": {
                  "description": "true draws an open arrowhead at this end."
+                },
+                "part": {
+                 "description": "uml.Connector (composite structure, 0.22.0): the part (a member id of the subject) this end's port is reached through."
                 }
                }
               },
@@ -973,6 +1003,13 @@
         },
         "effect": {
          "description": "uml.Transition: its effect, as text, drawn after /."
+        },
+        "kind": {
+         "description": "uml.Connector in a component diagram (0.22.0): assembly (two components or their ports, neither inside the other) or delegation (a component's port and something inside it; an open arrow at its to end). Left out: an assembly.",
+         "examples": [
+          "assembly",
+          "delegation"
+         ]
         }
        }
       },
@@ -1254,7 +1291,7 @@
      "description": "Guess a line's kind from its label's words when its edges name none (render() and layout(); the standalone page always does)."
     },
     "diagram": {
-     "description": "Schema version 2: the view's diagram type; without it the view is a map. uml.class draws a class diagram (0.18.0, lib/umlimator-all.js), uml.object an object diagram and uml.package a package diagram (0.19.0), uml.sequence a sequence diagram and uml.communication a communication diagram (0.20.0), uml.use-case a use case diagram, uml.activity an activity diagram, uml.state-machine a state machine diagram and uml.interaction-overview an interaction overview diagram (0.21.0); a type this release does not draw is drawn as plain cards, with a warning.",
+     "description": "Schema version 2: the view's diagram type; without it the view is a map. uml.class draws a class diagram (0.18.0, lib/umlimator-all.js), uml.object an object diagram and uml.package a package diagram (0.19.0), uml.sequence a sequence diagram and uml.communication a communication diagram (0.20.0), uml.use-case a use case diagram, uml.activity an activity diagram, uml.state-machine a state machine diagram and uml.interaction-overview an interaction overview diagram (0.21.0), uml.component a component diagram, uml.deployment a deployment diagram and uml.composite-structure a composite structure diagram (0.22.0); a type this release does not draw is drawn as plain cards, with a warning.",
      "examples": [
       "uml.class",
       "uml.object",
@@ -1264,11 +1301,14 @@
       "uml.use-case",
       "uml.activity",
       "uml.state-machine",
-      "uml.interaction-overview"
+      "uml.interaction-overview",
+      "uml.component",
+      "uml.deployment",
+      "uml.composite-structure"
      ]
     },
     "subject": {
-     "description": "Schema version 2: the element this diagram is the inside of. In a class, object or package view, the package names are qualified from (sales::Order without sales:: in a view of sales); not drawn unless the view lists it."
+     "description": "Schema version 2: the element this diagram is the inside of. In a class, object or package view, the package names are qualified from (sales::Order without sales:: in a view of sales); not drawn unless the view lists it. In a composite structure view (0.22.0): the class, component or collaboration whose parts and ports it draws, listed in nodeIds."
     },
     "direction": {
      "description": "Schema version 2: a typed view's layout direction (default right). A map stays left to right. A sequence view is always down; another direction is a warning."
@@ -1277,7 +1317,7 @@
      "description": "Schema version 2: a skin of the diagram type (crowsfoot for er)."
     },
     "present": {
-     "description": "Schema version 2: what the layout cannot derive, per element: collapsed compartments, rows shown before +n more.",
+     "description": "Schema version 2: what the layout cannot derive, per element: collapsed compartments, rows shown before +n more. A component view's interface drawn as a ball (as: 'ball'), and a port's side (side); a port on a part, by the part's id: ports.<port>.side (0.22.0).",
      "anyOf": [
       {
        "type": "object",
@@ -1292,6 +1332,24 @@
            },
            "rows": {
             "description": "At most this many rows in each compartment, then \"+k more\"."
+           },
+           "as": {
+            "description": "uml.Interface in a component view (0.22.0): 'ball' draws it as a ball (a 16 px circle); left out, a rectangle with «interface».",
+            "examples": [
+             "ball"
+            ]
+           },
+           "side": {
+            "description": "uml.Port (0.22.0): the side of its owner it is drawn on; left out, the side facing most of its lines.",
+            "examples": [
+             "left",
+             "right",
+             "top",
+             "bottom"
+            ]
+           },
+           "ports": {
+            "description": "A part in a composite structure view (0.22.0): by port id, { side }, the side of the part each of its type's ports is drawn on."
            }
           }
          },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umlimator",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Embeddable, layered architecture maps: layout, orthogonal routing and an interactive canvas in one ES module.",
   "keywords": ["architecture", "diagram", "c4", "map", "svg", "layout", "orthogonal-routing", "drill-down"],
   "homepage": "https://zintaen.github.io/umlimator/",