@draftably/runtime 0.5.0 → 0.6.0

package/dist/types/src/model/labels.d.ts

@@ -62,6 +62,12 @@ export interface NodeLabel {
 export declare function nodeLabel(doc: Diagram, id: string, title: string, r: Rect): NodeLabel;
 /** Bounds of a shape together with its label. */
 export declare function visualBounds(doc: Diagram, id: string, title: string, r: Rect): Rect;
+/** Text width a sequence phase's label wraps to, so a long one does not push the lanes right. */
+export declare const PHASE_WRAP = 96;
+/** Inset of a phase label from its band's top left corner. */
+export declare const PHASE_TAB = 8;
+/** A phase label's lines, in the annotation type. */
+export declare const phaseLabelLines: (label: string, r: ResolvedAppearance) => string[];
 /** Text width a sequence message's label wraps to; the gap between participants follows it. */
 export declare const MESSAGE_WRAP = 168;
 /**
@@ -93,6 +99,23 @@ export declare function edgeLabelSize(label: string, r?: ResolvedAppearance, mes
     w: number;
     h: number;
 };
+/**
+ * An activation bar: its width, how far a nested bar steps to the right, how far it runs past
+ * its first and last rows, and the length of a bar whose call gets no reply.
+ */
+export declare const ACTIVATION: {
+    w: number;
+    step: number;
+    over: number;
+    stub: number;
+};
+/** Room between a local action's label and its box, on each side. */
+export declare const ACTION_PAD = 5;
+/** The box of a local action: its label and `ACTION_PAD` round it, centred on the lifeline. */
+export declare function actionSize(label: string, r: ResolvedAppearance): {
+    w: number;
+    h: number;
+};
 /**
  * What a self-message draws, measured from where its row meets the lifeline: how far right, how
  * far above the row and how far below it.

package/dist/types/src/model/markers.d.ts

@@ -30,10 +30,17 @@ export declare const markerBox: (kind: Exclude<EndMarker, "none">, tail: boolean
 };
 /** The fill a marker takes on this line and surface. */
 export declare function markerFill(kind: Exclude<EndMarker, 'none'>, ink: string, surface: string): string;
+/**
+ * What `message=` accepts on a sequence message, plus `action`, which an `action` line makes.
+ * Each says what the author means; none is read from a line's style.
+ */
+export declare const MESSAGE_KINDS: readonly ["interaction", "call", "send", "reply", "outcome"];
+export type MessageKind = (typeof MESSAGE_KINDS)[number] | 'action';
 type Ends = {
     directed?: boolean;
     head?: EndMarker;
     tail?: EndMarker;
+    message?: MessageKind;
 };
 /** An undirected edge has no marks, whatever else it holds. */
 export declare const headOf: (e: Ends) => EndMarker;

package/dist/types/src/model/note.d.ts

@@ -46,13 +46,22 @@ export declare function noteBox(look: ResolvedAppearance, note: Note): PlacedNot
  * Spots in a sequence's side margins, by index in `notes`, for notes on the messages in `rows`.
  * `left` and `right` are the margins' inner edges and `top` the highest a note goes. A note is
  * level with its row, or pushed down clear of the note above it. The panel grows round these, so
- * no note here can cover the drawing.
+ * no note here can cover the drawing. A note on a message in a phase stays inside that phase's
+ * band (`bands`, by message), which `marginNoteRoom` makes tall enough for its notes.
  */
 export declare function marginNotes(look: ResolvedAppearance, notes: readonly Note[], rows: ReadonlyMap<string, number>, { left, right, top }: {
     left: number;
     right: number;
     top: number;
-}): (Rect | null)[];
+}, bands?: ReadonlyMap<string, {
+    y: number;
+    h: number;
+}>): (Rect | null)[];
+/**
+ * The height a phase band needs for the margin notes on its messages (`ids`): the taller of its
+ * two sides, each a stack of its notes.
+ */
+export declare function marginNoteRoom(look: ResolvedAppearance, notes: readonly Note[], ids: string[]): number;
 /**
  * Place every anchored note beside its object or message, clear of shapes, group borders, lines
  * and earlier notes when a nearby spot allows it. Frame notes, and notes whose object is not drawn,

package/dist/types/src/model/routes.d.ts

@@ -132,6 +132,8 @@ export declare function routeInput(doc: Diagram, vg: VisibleGraph, all: Map<stri
         tail?: import("./markers.js").EndMarker;
         emphasis: boolean;
         dashed: boolean;
+        message?: import("./markers.js").MessageKind;
+        replyTo?: string;
         status?: import("./status.js").Status;
         spot?: import("./status.js").Spot;
     }[];

package/dist/types/src/model/status.d.ts

@@ -82,3 +82,21 @@ export declare function withState(doc: Diagram, id: string): Diagram;
 export declare function usedStatuses(doc: Diagram): StatusCount[];
 /** The color key's rows: a diff draws no family colors, so it lists only its statuses. */
 export declare const drawnLegend: (doc: Diagram) => LegendEntry[];
+/** What every sequence says under its drawing. */
+export declare const SEQUENCE_CAPTION = "Rows show order, not elapsed time.";
+/**
+ * The events that belong with one event of a sequence: a message, the reply that answers it,
+ * and the message a reply answers. Only pairs the file states, never a guess from direction.
+ */
+export declare function replyPair(doc: Diagram, id: string): string[];
+/**
+ * A sequence in words, for a reader who cannot see it: the participants, then each event in
+ * order with its kind. An exported SVG carries it as its description unless the host gives one.
+ */
+export declare function sequenceDescription(doc: Diagram): string | undefined;
+/**
+ * The key a sequence draws for its kinds of message: one row for each mark in use, so a reader
+ * never has to guess what a solid head or a box means. Nothing unless a message has a kind. A
+ * plain message and a shown result draw the same arrow, so they share a row.
+ */
+export declare function messageKey(doc: Diagram): LegendEntry[];

package/dist/types/src/model/types.d.ts

@@ -13,7 +13,7 @@ export type PortSide = Side | 'auto';
 export type Direction = 'RIGHT' | 'DOWN';
 export type Theme = 'light' | 'dark';
 import type { DiagramAppearance, Shade } from './appearance.js';
-import type { EndMarker } from './markers.js';
+import type { EndMarker, MessageKind } from './markers.js';
 import type { Spot, Status } from './status.js';
 export type ShapeKind = 'box' | 'pill' | 'circle' | 'diamond' | 'text' | 'icon' | 'image'
 /** A seam between two cells of a `cells` group. */
@@ -70,6 +70,13 @@ export interface DiagramEdge {
     tail?: EndMarker;
     emphasis: boolean;
     dashed: boolean;
+    /**
+     * A sequence message's meaning, from `message=`, or `action` for work one participant does
+     * (an `action` line; `from` and `to` are that participant). Unset for a plain message.
+     */
+    message?: MessageKind;
+    /** With `message: 'reply'`: the earlier message this one answers, from `answers=`. */
+    replyTo?: string;
     /** How it differs between two versions of the diagram. */
     status?: Status;
     /** How the drawn emphasis state treats it; see `withState`. */
@@ -93,6 +100,8 @@ export interface EdgeLayout {
     toOffset?: number;
     /** A sequence message: drawn straight between the two lifelines at this height, not routed. */
     row?: number;
+    /** A message between distant lanes: the middle of the gap between lifelines its label sits in. */
+    labelX?: number;
     /**
      * Set by the compiler for a forward line in a `flow` scope: its route planned from the ranks.
      * The quick router takes it as it is when it clears every box.
@@ -274,8 +283,18 @@ export interface SequenceLayout {
         rows: Record<string, number>;
         phases: SequencePhase[];
         grow: number;
+        activations?: Activation[];
     };
+    /** With `activations=on`: the bars on the lifelines of participants at work on a call. */
+    activations?: Activation[];
+    /** The `activations=on` switch itself, which the Inspector turns on and off. */
+    bars?: true;
 }
+/** One activation bar: its participant, the call that opened it, and its box. */
+export type Activation = Rect & {
+    node: string;
+    call: string;
+};
 export type SequencePhase = {
     id: string;
     label: string;

package/dist/types/src/runtime/svg-renderer.d.ts

@@ -3,6 +3,7 @@
  * same appearance, shapes and title wrapping as the canvas and embeds the fonts it uses.
  */
 import { type ResolvedAppearance } from '../model/appearance.js';
+import { PHASE_TAB } from '../model/labels.js';
 import { computeRoutes } from '../model/routes.js';
 import type { Diagram, Rect } from '../model/types.js';
 /** How an object's `href` is written into the file; as written unless the caller says. */
@@ -41,10 +42,10 @@ export type Route = ReturnType<typeof computeRoutes>['routes'][number];
  */
 export declare function sequenceBackdrop(doc: Diagram, look: ResolvedAppearance): {
     panel: string[];
+    bars: string[];
     phases: string[];
 };
-/** Inset of a phase label from its band's top left corner. */
-export declare const PHASE_TAB = 8;
+export { PHASE_TAB };
 /** A thin stripe across the top of a box, inside its rounded corners. */
 export declare function accentPath(r: Rect, radius: number): string;
 export declare function renderSvg(doc: Diagram, opts?: SvgOptions): string;

package/dist/version-D7YCY2pU.js

@@ -0,0 +1,4 @@
+const n = "0.6.0", o = n;
+export {
+  o as r
+};

package/dist/viewer.js

@@ -1,8 +1,8 @@
-import { i as Ne, F as Oe } from "./geometry-DfUVE8b2.js";
+import { i as Ne, F as Re } from "./geometry-DfUVE8b2.js";
 import { f as kt } from "./geometry-DfUVE8b2.js";
-import { r as St } from "./version-CO7i33cq.js";
+import { r as St } from "./version-D7YCY2pU.js";
 const $e = 0.02, ze = 8, He = 32, ye = (n, t = $e, i = ze) => Math.min(Math.max(n, Math.max($e, t)), Math.min(ze, i));
-function Re(n = {}) {
+function Oe(n = {}) {
   const t = n.padding ?? He;
   return typeof t == "number" ? { top: t, right: t, bottom: t, left: t } : t;
 }
@@ -12,7 +12,7 @@ function Ge(n) {
   return { x: t, y: i, width: r - t, height: c - i };
 }
 function Ie(n, t, i = {}) {
-  const r = Re(i), c = Math.max(1, t.width - r.left - r.right), d = Math.max(1, t.height - r.top - r.bottom), m = ye(
+  const r = Oe(i), c = Math.max(1, t.width - r.left - r.right), d = Math.max(1, t.height - r.top - r.bottom), m = ye(
     Math.min(c / Math.max(1, n.width), d / Math.max(1, n.height)),
     i.minZoom,
     i.maxZoom ?? 1
@@ -24,7 +24,7 @@ function Ie(n, t, i = {}) {
   };
 }
 function Ue(n, t, i, r = {}) {
-  const c = Re(r), d = { width: i.width - c.left - c.right, height: i.height - c.top - c.bottom };
+  const c = Oe(r), d = { width: i.width - c.left - c.right, height: i.height - c.top - c.bottom };
   let { centerX: m, centerY: s, zoom: f } = n;
   if (t.width * f > d.width || t.height * f > d.height)
     return Ie(t, i, { ...r, maxZoom: f });
@@ -97,14 +97,14 @@ function et(n, t = {}) {
     let M;
     const _ = (S) => {
       M ??= new Map(
-        [s.nodes, s.groups, s.edges].flatMap(Object.keys).map((R, N) => [R, N])
+        [s.nodes, s.groups, s.edges].flatMap(Object.keys).map((O, N) => [O, N])
       );
       const z = S.dataset.draftAnchor;
       return M.get(z.slice(z.indexOf(":") + 1)) ?? 1 / 0;
     };
     for (const S of m) {
-      const z = S.indexOf(":"), R = S.slice(0, z), N = S.slice(z + 1), B = s ? Qe(s, N) : void 0;
-      if (!s || !B || R !== "body" && R !== "overlay" || R === "body" && B !== "node" || w.has(S)) {
+      const z = S.indexOf(":"), O = S.slice(0, z), N = S.slice(z + 1), B = s ? Qe(s, N) : void 0;
+      if (!s || !B || O !== "body" && O !== "overlay" || O === "body" && B !== "node" || w.has(S)) {
         f && !w.has(S) && g.push(S);
         continue;
       }
@@ -114,7 +114,7 @@ function et(n, t = {}) {
       if (!$ || $.kind !== B) {
         $ && ($.el.remove(), k($));
         const I = n.createElement("div");
-        I.className = `draft-anchor draft-anchor--${R}`, I.dataset.draftAnchor = S, $ = { el: I, id: N, kind: B, body: R === "body", box: D }, d.set(S, $);
+        I.className = `draft-anchor draft-anchor--${O}`, I.dataset.draftAnchor = S, $ = { el: I, id: N, kind: B, body: O === "body", box: D }, d.set(S, $);
         const Q = $.body ? r : c, Z = Q.children, ue = _(I);
         let ee = 0, H = Z.length;
         for (; ee < H; ) {
@@ -130,7 +130,7 @@ function et(n, t = {}) {
     }
     for (const [S, z] of d) {
       if (w.has(S)) continue;
-      const R = ne(), N = !!R && (z.el.contains(R) || U(z.el).some((B) => B.contains(R)));
+      const O = ne(), N = !!O && (z.el.contains(O) || U(z.el).some((B) => B.contains(O)));
       z.el.remove(), k(z), d.delete(S), p.delete(S), l = !0, N && i.dispatchEvent(new CustomEvent("draft-anchor-focus-lost"));
     }
     return h && L && P(), l;
@@ -214,7 +214,7 @@ const De = Math.max(
   Math.min(4, (globalThis.navigator?.hardwareConcurrency || 2) - 1)
 ), ot = 3e4, Fe = /* @__PURE__ */ new Map();
 let st = 0;
-const _e = "The worker is the module next to @draftably/runtime's viewer. With Vite 5–7, add optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] } to vite.config.", it = () => new Worker(new URL("./assets/render.worker-D11vTqoO.js", import.meta.url), { type: "module" });
+const _e = "The worker is the module next to @draftably/runtime's viewer. With Vite 5–7, add optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] } to vite.config.", it = () => new Worker(new URL("./assets/render.worker-CDf818A5.js", import.meta.url), { type: "module" });
 function le(n, t, i) {
   n.slots.splice(n.slots.indexOf(t), 1), clearTimeout(t.timer), clearTimeout(t.idle), t.worker.terminate();
   const r = t.job;
@@ -318,7 +318,7 @@ function gt(n) {
   const t = /* @__PURE__ */ new Map();
   for (const i of Array.from(n.querySelectorAll("text[font-family]"))) {
     const r = (i.getAttribute("font-family") ?? "").split(",")[0].trim().replace(/^['"]|['"]$/g, ""), c = i.getAttribute("font-weight") ?? "400";
-    if (!Object.values(Oe).some((d) => d.family === r && String(d.weight) === c))
+    if (!Object.values(Re).some((d) => d.family === r && String(d.weight) === c))
       throw new Error("Runtime SVG requested an unknown bundled font face.");
     t.set(`${r}:${c}`, { family: r, weight: c });
   }
@@ -330,7 +330,7 @@ function wt(n, t) {
     const c = r.textContent ?? "";
     for (const [, d] of c.matchAll(/@font-face\s*\{([^{}]{1,200000})\}/g)) {
       const m = /font-family\s*:\s*['"]([^'"]+)['"]/i.exec(d)?.[1], s = /font-weight\s*:\s*(\d{1,4})/i.exec(d)?.[1], f = /src\s*:\s*url\((data:font\/woff2;base64,[A-Za-z0-9+/=]+)\)/i.exec(d)?.[1];
-      !m || !s || !f || Object.values(Oe).some((g) => g.family === m && String(g.weight) === s) && i.set(`${m}:${s}`, { family: m, weight: s, data: f });
+      !m || !s || !f || Object.values(Re).some((g) => g.family === m && String(g.weight) === s) && i.set(`${m}:${s}`, { family: m, weight: s, data: f });
     }
   }
   return t.map((r) => {
@@ -450,7 +450,7 @@ function bt(n, t = {}) {
   }, z = (e, a, o) => {
     const v = { ...e, zoom: ye(e.zoom) };
     return re = o, Ke(E, v) ? "unchanged" : (E = v, ne(), S(a), "moved");
-  }, R = () => {
+  }, O = () => {
     const [e, a, o, v] = k.viewBox;
     return { x: e, y: a, width: o, height: v };
   };
@@ -458,7 +458,7 @@ function bt(n, t = {}) {
   const B = (e) => N ? Ne(N, e) : void 0;
   let D;
   const $ = (e) => L ? "unchanged" : !k || !Y.width || !Y.height ? (D = e, "pending") : (D = void 0, e()), I = (e, a, o) => $(() => {
-    const v = e ? Ge(e.flatMap((A) => B(A) ?? [])) : R();
+    const v = e ? Ge(e.flatMap((A) => B(A) ?? [])) : O();
     return v ? z(Ie(v, Y, a), o, !!e) : "missing";
   }), Q = (e = "fit") => I(void 0, void 0, e), Z = (e) => z({ ...E, zoom: E.zoom * e }, "user", !0), ue = () => z({ ...E, zoom: 1 }, "user", !0);
   U("Zoom in", () => Z(1.2)), U("Zoom out", () => Z(1 / 1.2)), U("Fit diagram", () => Q()), U("Actual size", ue), m.hidden = t.toolbar === !1;
@@ -501,7 +501,7 @@ function bt(n, t = {}) {
   }, Ce = async (e, a, o) => {
     const v = t.execution ?? { mode: "worker" };
     if (v.mode === "main") {
-      const { renderSvg: A } = await import("./render-CsJYFD3o.js");
+      const { renderSvg: A } = await import("./render-DU-eRw6k.js");
       return A(e, { ...a, signal: o });
     }
     return ct(e, a, {
@@ -510,7 +510,7 @@ function bt(n, t = {}) {
       signal: o
     });
   };
-  let O;
+  let R;
   const qe = (e) => {
     const a = s.querySelector("svg"), o = a?.querySelector(":scope > rect");
     return e === s || e === a || e === o;
@@ -522,7 +522,7 @@ function bt(n, t = {}) {
     },
     { passive: !1 }
   ), s.addEventListener("pointerdown", (e) => {
-    !qe(e.target) || !k || (O = {
+    !qe(e.target) || !k || (R = {
       pointerId: e.pointerId,
       x: e.clientX,
       y: e.clientY,
@@ -531,10 +531,10 @@ function bt(n, t = {}) {
       scale: E.zoom
     }, s.setPointerCapture(e.pointerId));
   }), s.addEventListener("pointermove", (e) => {
-    O && z(
+    R && z(
       {
-        centerX: O.centerX - (e.clientX - O.x) / O.scale,
-        centerY: O.centerY - (e.clientY - O.y) / O.scale,
+        centerX: R.centerX - (e.clientX - R.x) / R.scale,
+        centerY: R.centerY - (e.clientY - R.y) / R.scale,
         zoom: E.zoom
       },
       "user",
@@ -542,12 +542,12 @@ function bt(n, t = {}) {
     );
   });
   const be = () => {
-    if (O) {
+    if (R) {
       try {
-        s.releasePointerCapture(O.pointerId);
+        s.releasePointerCapture(R.pointerId);
       } catch {
       }
-      O = void 0;
+      R = void 0;
     }
   };
   s.addEventListener("pointerup", be), s.addEventListener("pointercancel", be), s.addEventListener("click", (e) => {
@@ -781,12 +781,12 @@ function bt(n, t = {}) {
     },
     destroy() {
       if (!L) {
-        if (L = !0, x.stop(), P++, D = void 0, M && (c.cancelAnimationFrame ?? c.clearTimeout)(M), O) {
+        if (L = !0, x.stop(), P++, D = void 0, M && (c.cancelAnimationFrame ?? c.clearTimeout)(M), R) {
           try {
-            s.releasePointerCapture(O.pointerId);
+            s.releasePointerCapture(R.pointerId);
           } catch {
           }
-          O = void 0;
+          R = void 0;
         }
         for (const [e, a] of J)
           a.resolve({ status: "destroyed", revision: e });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftably/runtime",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": false,
   "description": "Portable native Draftably SVG rendering, validation, and optional viewer.",
   "type": "module",