removed some constants

Reviewed-on: #16

.gitea/workflows/ci.yaml

@@ -0,0 +1,31 @@
+name: CI
+on:
+  push:
+    branches: [ main, dev ]
+  pull_request:
+    branches: [ main, dev ]
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    container: catthehacker/ubuntu:rust-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install tytanic
+        run: cargo binstall tytanic@0.2.2
+
+      - name: Run test suite
+        run: tt run
+
+      - name: Archive artifacts
+        uses: https://gitea.com/actions/gitea-upload-artifact@v4
+        if: always()
+        with:
+          name: artifacts
+          path: |
+            tests/**/diff/*.png
+            tests/**/out/*.png
+            tests/**/ref/*.png
+          retention-days: 5

README.md

@@ -1,3 +1,150 @@
 # chronos
 
 A Typst package to draw sequence diagrams with CeTZ
+
+---
+
+This package lets you render sequence diagrams directly in Typst. The following boilerplate code creates an empty sequence diagram with two participants:
+
+<table>
+<tr>
+<td><strong>Typst</strong></td>
+<td><strong>Result</strong></td>
+</tr>
+<tr>
+<td>
+
+```typst
+#import "@preview/chronos:0.2.2"
+#chronos.diagram({
+  import chronos: *
+  _par("Alice")
+  _par("Bob")
+})
+```
+
+</td>
+<td><img src="./gallery/readme/boilerplate.png"></td>
+</tr>
+</table>
+
+> *Disclaimer*\
+> The package cannot parse PlantUML syntax for the moment, and thus requires the use of element functions, as shown in the examples.
+> A PlantUML parser is in the TODO list, just not the top priority
+
+## Basic sequences
+
+You can make basic sequences using the `_seq` function:
+
+<table>
+<tr>
+<td><strong>Typst</strong></td>
+<td><strong>Result</strong></td>
+</tr>
+<tr>
+<td>
+
+```typst
+#chronos.diagram({
+  import chronos: *
+  _par("Alice")
+  _par("Bob")
+
+  _seq("Alice", "Bob", comment: "Hello")
+  _seq("Bob", "Bob", comment: "Think")
+  _seq("Bob", "Alice", comment: "Hi")
+})
+```
+
+</td>
+<td><img src="./gallery/readme/simple_sequence.png"></td>
+</tr>
+</table>
+
+You can make lifelines using the following parameters of the `_seq` function:
+ - `enable-dst`: enables the destination lifeline
+ - `create-dst`: creates the destination lifeline and participant
+ - `disable-dst`: disables the destination lifeline
+ - `destroy-dst`: destroys the destination lifeline and participant
+ - `disable-src`: disables the source lifeline
+ - `destroy-src`: destroy the source lifeline and participant
+
+<table>
+<tr>
+<td><strong>Typst</strong></td>
+<td><strong>Result</strong></td>
+</tr>
+<tr>
+<td>
+
+```typst
+#chronos.diagram({
+  import chronos: *
+  _par("A", display-name: "Alice")
+  _par("B", display-name: "Bob")
+  _par("C", display-name: "Charlie")
+  _par("D", display-name: "Derek")
+
+  _seq("A", "B", comment: "hello", enable-dst: true)
+  _seq("B", "B", comment: "self call", enable-dst: true)
+  _seq("C", "B", comment: "hello from thread 2", enable-dst: true, lifeline-style: (fill: rgb("#005500")))
+  _seq("B", "D", comment: "create", create-dst: true)
+  _seq("B", "C", comment: "done in thread 2", disable-src: true, dashed: true)
+  _seq("B", "B", comment: "rc", disable-src: true, dashed: true)
+  _seq("B", "D", comment: "delete", destroy-dst: true)
+  _seq("B", "A", comment: "success", disable-src: true, dashed: true)
+})
+```
+
+</td>
+<td><img src="./gallery/readme/lifelines.png"></td>
+</tr>
+</table>
+
+## Showcase
+
+Several features have already been implemented in Chronos. Don't hesitate to checkout the examples in the [gallery](./gallery) folder to see what you can do. 
+
+#### Quick example reference:
+<table>
+<tr>
+<td><strong>Example</strong></td>
+<td><strong>Features</strong></td>
+</tr>
+<tr>
+<td>
+
+`example1` <br>([PDF](./gallery/example1.pdf)|[Typst](./gallery/example1.typ))
+
+</td>
+<td>Simple cases, color sequences, groups, separators, gaps, self-sequences</td>
+</tr>
+<tr>
+<td>
+
+`example2` <br>([PDF](./gallery/example2.pdf)|[Typst](./gallery/example2.typ))
+
+</td>
+<td>Lifelines, found/lost messages, synchronized sequences, slanted sequences</td>
+</tr>
+<tr>
+<td>
+
+`example3` <br>([PDF](./gallery/example3.pdf)|[Typst](./gallery/example3.typ))
+
+</td>
+<td>Participant shapes, sequence tips, hidden partipicant ends</td>
+</tr>
+<tr>
+<td>
+
+`notes` <br>([PDF](./gallery/notes.pdf)|[Typst](./gallery/notes.typ))
+
+</td>
+<td>Notes (duh), deferred participant creation</td>
+</tr>
+</table>
+
+> [!NOTE]
+> 
+> Many examples were taken/adapted from the PlantUML [documentation](https://plantuml.com/sequence-diagram) on sequence diagrams

TODO.md

@@ -0,0 +1,28 @@
+# TODO
+
+- [x] Basic participants
+- [x] Basic sequences
+- [x] Separators
+- [x] Gaps
+- [x] Groups
+- [x] Self arrows
+- [x] Arrow from start / to end, small arrows
+- [x] Lifelines
+- [x] Different types of participants
+- [x] Notes
+- [x] Synchronized arrows
+- [x] Slanted arrows
+- [x] Different types of arrow tips
+- [x] Sequence comment alignment
+- [x] Fix group size with syncs
+- [ ] Fix column spacing with notes over multiple columns
+- [ ] Fix notes with arrows from start / to end / small arrows
+- [ ] Fix group size with self arrows + notes
+- [ ] Unify styling structure
+- [ ] Add args verification to catch user errors + pretty error messages
+- [ ] PlantUML parser
+- [ ] (Message numbering)
+- [ ] Mainframes
+- [x] Different types of groups (alt/loop/etc.)
+- [ ] Delays
+- [ ] Auto-fit in parent

docs/example.typ

@@ -0,0 +1,39 @@
+#import "../src/lib.typ" as chronos
+
+#let example-preamble = "import \"../src/lib.typ\": *;"
+#let example-scope = (
+  chronos: chronos
+)
+
+#let example(src, show-src: true, vertical: false, fill: false, wrap: true) = {
+  src = src.text
+  let full-src = example-preamble + src
+  let body = eval(full-src, scope: example-scope)
+  let img = if wrap { chronos.diagram(body) } else { body }
+
+  block(width: 100%,
+    align(center,
+      box(
+        stroke: black + 1pt,
+        radius: .5em,
+        fill: if fill {color.white.darken(2%)} else {none},
+        if show-src {
+          let src-block = raw(src, block: true, lang: "typc")
+          table(
+            columns: if vertical {1} else {2},
+            inset: 5pt,
+            align: horizon + center,
+            stroke: none,
+            table.cell(inset: 1em, img),
+            if vertical {table.hline()} else {table.vline()}, src-block
+          )
+        } else {
+          table(
+            inset: 1em,
+            img
+          )
+        }
+      )
+    )
+  )
+}

docs/examples.typ

@@ -0,0 +1,213 @@
+#import "example.typ": example
+
+#let seq-return = example(```
+_seq(
+  "Bob", "Alice",
+  comment: [hello],
+  enable-dst: true
+)
+_seq(
+  "Alice", "Alice",
+  comment: [some action]
+)
+_ret(comment: [bye])
+```)
+
+#let seq-comm-align = example(```
+_par("p1",
+     display-name: "Start participant")
+_par("p2",
+     display-name: "End participant")
+let alignments = (
+  "start", "end",
+  "left", "right",
+  "center"
+)
+for a in alignments {
+  _seq(
+    "p2", "p1",
+    comment: raw(a),
+    comment-align: a
+  )
+}
+```)
+
+#let seq-tips = example(```
+let _seq = _seq.with(comment-align: "center")
+_par("a", display-name: "Alice")
+_par("b", display-name: "Bob")
+
+_seq("a", "b", comment: "Various tips", end-tip: "")
+_seq("a", "b", end-tip: ">", comment: `->`)
+_seq("a", "b", end-tip: ">>", comment: `->>`)
+_seq("a", "b", end-tip: "\\", comment: `-\`)
+_seq("a", "b", end-tip: "\\\\", comment: `-\\`)
+_seq("a", "b", end-tip: "/", comment: `-/`)
+_seq("a", "b", end-tip: "//", comment: `-//`)
+_seq("a", "b", end-tip: "x", comment: `->x`)
+_seq("a", "b", start-tip: "x", comment: `x->`)
+_seq("a", "b", start-tip: "o", comment: `o->`)
+_seq("a", "b", end-tip: ("o", ">"), comment: `->o`)
+_seq("a", "b", start-tip: "o",
+               end-tip: ("o", ">"), comment: `o->o`)
+_seq("a", "b", start-tip: ">",
+               end-tip: ">", comment: `<->`)
+_seq("a", "b", start-tip: ("o", ">"),
+               end-tip: ("o", ">"), comment: `o<->o`)
+_seq("a", "b", start-tip: "x",
+               end-tip: "x", comment: `x<->x`)
+_seq("a", "b", end-tip: ("o", ">>"), comment: `->>o`)
+_seq("a", "b", end-tip: ("o", "\\"), comment: `-\o`)
+_seq("a", "b", end-tip: ("o", "\\\\"), comment: `-\\o`)
+_seq("a", "b", end-tip: ("o", "/"), comment: `-/o`)
+_seq("a", "b", end-tip: ("o", "//"), comment: `-//o`)
+_seq("a", "b", start-tip: "x",
+               end-tip: ("o", ">"), comment: `x->o`)
+```)
+
+#let grp = example(```
+_par("a", display-name: "Alice")
+_par("b", display-name: "Bob")
+
+_grp("Group 1", desc: "Description", {
+  _seq("a", "b", comment: "Authentication")
+  _grp("loop", desc: "1000 times", {
+    _seq("a", "b", comment: "DoS Attack")
+  })
+  _seq("a", "b", end-tip: "x")
+})
+```)
+
+#let alt = example(```
+_par("a", display-name: "Alice")
+_par("b", display-name: "Bob")
+
+_alt(
+  "first encounter", {
+    _seq("a", "b", comment: "Who are you ?")
+    _seq("b", "a", comment: "I'm Bob")
+  },
+
+  "know eachother", {
+    _seq("a", "b", comment: "Hello Bob")
+    _seq("b", "a", comment: "Hello Alice")
+  },
+
+  "best friends", {
+    _seq("a", "b", comment: "Hi !")
+    _seq("b", "a", comment: "Hi !")
+  }
+)
+```)
+
+#let loop = example(```
+_par("a", display-name: "Alice")
+_par("b", display-name: "Bob")
+
+_loop("default loop", {
+  _seq("a", "b", comment: "Are you here?")
+})
+_gap()
+_loop("min loop", min: 1, {
+  _seq("a", "b", comment: "Are you here?")
+})
+_gap()
+_loop("min-max loop", min: 1, max: 5, {
+  _seq("a", "b", comment: "Are you still here?")
+})
+```)
+
+#let sync = example(```
+_par("alice", display-name: "Alice")
+_par("bob", display-name: "Bob")
+_par("craig", display-name: "Craig")
+
+_seq("bob", "alice")  // Unsynchronized
+_seq("bob", "craig")  //  "
+_sync({
+  _seq("bob", "alice")  // Synchronized
+  _seq("bob", "craig")  //  "
+})
+_seq("alice", "bob")  // Unsynchronized
+_seq("craig", "bob")  //  "
+_sync({
+  _seq("alice", "bob")  // Synchronized
+  _seq("craig", "bob")  //  "
+})
+```)
+
+#let gaps = example(```
+_par("a", display-name: "Alice")
+_par("b", display-name: "Bob")
+
+_seq("a", "b", comment: [message 1])
+_seq("b", "a", comment: [ok], dashed: true)
+_gap()
+_seq("a", "b", comment: [message 2])
+_seq("b", "a", comment: [ok], dashed: true)
+_gap(size: 40)
+_seq("a", "b", comment: [message 3])
+_seq("b", "a", comment: [ok], dashed: true)
+```)
+
+#let seps = example(```
+_par("a", display-name: "Alice")
+_par("b", display-name: "Bob")
+
+_sep[Initialization]
+_seq("a", "b", comment: [Request 1])
+_seq(
+  "b", "a",
+  comment: [Response 1],
+  dashed: true
+)
+
+_sep[Repetition]
+_seq("a", "b", comment: [Request 2])
+_seq(
+  "b", "a",
+  comment: [Response 2],
+  dashed: true
+)
+```)
+
+#let delays = example(```
+_par("a", display-name: "Alice")
+_par("b", display-name: "Bob")
+
+_seq("a", "b", comment: [Auth Request])
+_delay()
+_seq(
+  "b", "a",
+  comment: [Auth Response],
+  dashed: true
+)
+_delay(name: [5 minutes later])
+_seq(
+  "b", "a",
+  comment: [Good Bye !],
+  dashed: true
+)
+```)
+
+#let notes-shapes = example(```
+_par("alice", display-name: "Alice")
+_par("bob", display-name: "Bob")
+_note("over", `default`, pos: "alice")
+_note("over", `rect`, pos: "bob", shape: "rect")
+_note("over", `hex`, pos: ("alice", "bob"), shape: "hex")
+```)
+
+#let notes-sides = example(```
+_par("alice", display-name: "Alice")
+_par("bob", display-name: "Bob")
+_par("charlie", display-name: "Charlie")
+_note("left", [`left` of Alice], pos: "alice")
+_note("right", [`right` of Charlie], pos: "charlie")
+_note("over", [`over` Alice and Bob], pos: ("alice", "bob"))
+_note("across", [`across` all participants])
+_seq("alice", "bob")
+_note("left", [linked with sequence])
+_note("over", [A note], pos: "alice")
+_note("over", [Aligned note], pos: "charlie", aligned: true)
+```, vertical: true)

docs/gaps_seps.typ

@@ -0,0 +1,15 @@
+/// Creates a separator before the next element
+/// #examples.seps
+/// - name (content): Name to display in the middle of the separator
+#let _sep(name) = {}
+
+/// Creates a delay before the next element
+/// #examples.delays
+/// - name (content, none): Name to display in the middle of the delay area
+/// - size (int): Size of the delay
+#let _delay(name: none, size: 30) = {}
+
+/// Creates a gap before the next element
+/// #examples.gaps
+/// - size (int): Size of the gap
+#let _gap(size: 20) = {}

docs/groups.typ

@@ -0,0 +1,58 @@
+/// Creates a group of sequences
+/// #examples.grp
+/// - name (content): The group's name
+/// - desc (none, content): Optional description
+/// - type (str): The groups's type (should only be set through other functions like @@_alt() or @@_loop() )
+/// - elmts (array): Elements inside the group (can be sequences, other groups, notes, etc.)
+#let _grp(
+  name,
+  desc: none,
+  type: "default",
+  elmts
+) = {}
+
+/// Creates an alt-else group of sequences
+/// 
+/// It contains at least one section but can have as many as needed
+/// #examples.alt
+/// - desc (content): The alt's label
+/// - elmts (array): Elements inside the alt's first section
+/// - ..args (content, array): Complementary "else" sections.\ You can add as many else sections as you need by passing a content (else section label) followed by an array of elements (see example)
+#let _alt(
+  desc,
+  elmts,
+  ..args
+)
+
+/// Creates a looped group of sequences
+/// #examples.loop
+/// - desc (content): Loop description
+/// - min (none, number): Optional lower bound of the loop
+/// - max (auto, number): Upper bound of the loop. If left as `auto` and `min` is set, it will be infinity (`'*'`)
+/// - elmts (array): Elements inside the group
+#let _loop(
+  desc,
+  min: none,
+  max: auto,
+  elmts
+) = {}
+
+/// Synchronizes multiple sequences\
+/// All elements inside a synchronized group will start at the same time
+/// #examples.sync
+/// - elmts (array): Synchronized elements (generally sequences or notes)
+#let _sync(
+  elmts
+)
+
+/// Creates an optional group\
+/// This is a simple wrapper around @@_grp()
+/// - desc (content): Group description
+/// - elmts (array): Elements inside the group
+#let _opt(desc, elmts) = {}
+
+/// Creates a break group\
+/// This is a simple wrapper around @@_grp()
+/// - desc (content): Group description
+/// - elmts (array): Elements inside the group
+#let _break(desc, elmts) = {}

docs/notes.typ

@@ -0,0 +1,25 @@
+/// Creates a note
+/// - side (str): The side on which to place the note (see @@SIDES for accepted values)
+/// - content (content): The note's content
+/// - pos (none, str, array): Optional participant(s) on which to draw next to / over. If `side` is "left" or "right", sets next to which participant the note is placed. If `side` is "over", sets over which participant(s) it is placed
+/// - color (color): The note's color
+/// - shape (str): The note's shape (see @@SHAPES for accepted values)
+/// - aligned (bool): True if the note is aligned with another note, in which case `side` must be `"over"`, false otherwise
+/// - allow-overlap (bool): If set to `false`, the note will try to reserve space in the column to avoid overlapping with neighboring participants. If set to `true`, the not will overlap other participants
+#let _note(
+  side,
+  content,
+  pos: none,
+  color: rgb("#FEFFDD"),
+  shape: "default",
+  aligned: false,
+  allow-overlap: true
+) = {}
+
+/// Accepted values for `shape` argument of @@_note()
+/// #examples.notes-shapes
+#let SHAPES = ("default", "rect", "hex")
+
+/// Accepted values for `side` argument of @@_note()
+/// #examples.notes-sides
+#let SIDES = ("left", "right", "over", "across")

docs/participants.typ

@@ -0,0 +1,75 @@
+/// Possible participant shapes
+/// #box(width: 100%, align(center)[
+///   #chronos.diagram({
+///     import chronos: *
+///     let _par = _par.with(show-bottom: false)
+///     _par("Foo", display-name: "participant", shape: "participant")
+///     _par("Foo1", display-name: "actor", shape: "actor")
+///     _par("Foo2", display-name: "boundary", shape: "boundary")
+///     _par("Foo3", display-name: "control", shape: "control")
+///     _par("Foo4", display-name: "entity", shape: "entity")
+///     _par("Foo5", display-name: "database", shape: "database")
+///     _par("Foo6", display-name: "collections", shape: "collections")
+///     _par("Foo7", display-name: "queue", shape: "queue")
+///     _par("Foo8", display-name: "custom", shape: "custom", custom-image: TYPST)
+///     _gap()
+///   })
+/// ])
+#let SHAPES = (
+  "participant",
+  "actor",
+  "boundary",
+  "control",
+  "entity",
+  "database",
+  "collections",
+  "queue",
+  "custom"
+)
+
+/// Creates a new participant
+/// - name (str): Unique participant name used as reference in other functions
+/// - display-name (auto, content): Name to display in the diagram. If set to `auto`, `name` is used
+/// - from-start (bool): If set to true, the participant is created at the top of the diagram. Otherwise, it is created at the first reference
+/// - invisible (bool): If set to true, the participant will not be shown
+/// - shape (str): The shape of the participant. Possible values in @@SHAPES
+/// - color (color): The participant's color
+/// - line-stroke (stroke): The participant's line style (defaults to a light gray dashed line)
+/// - custom-image (none, image): If shape is 'custom', sets the custom image to display
+/// - show-bottom (bool): Whether to display the bottom shape
+/// - show-top (bool): Whether to display the top shape
+/// -> array
+#let _par(
+  name,
+  display-name: auto,
+  from-start: true,
+  invisible: false,
+  shape: "participant",
+  color: rgb("#E2E2F0"),
+  line-stroke: (
+    dash: "dashed",
+    paint: gray.darken(40%),
+    thickness: .5pt
+  ),
+  custom-image: none,
+  show-bottom: true,
+  show-top: true,
+) = {}
+
+/// Sets some options for columns between participants
+///
+/// Parameters `p1` and `p2` MUST be consecutive participants (also counting found/lost messages), but they do not need to be in the left to right order
+/// - p1 (str): The first neighbouring participant
+/// - p2 (str): The second neighbouring participant
+/// - width (auto, int, float, length): Optional fixed width of the column\ If the column's content (e.g. sequence comments) is larger, it will overflow
+/// - margin (int, float, length): Additional margin to add to the column\ This margin is not included in `width` and `min-width`, but rather added separately
+/// - min-width (int, float, length): Minimum width of the column\ If set to a larger value than `width`, the latter will be overriden
+/// - max-width (int, float, length, none): Maximum width of the column\ If set to a lower value than `width`, the latter will be overriden\ If set to `none`, no restriction is applied
+#let _col(
+  p1,
+  p2,
+  width: auto,
+  margin: 0,
+  min-width: 0,
+  max-width: none
+) = {}

docs/sequences.typ

@@ -0,0 +1,65 @@
+/// Manually adds an event to the given participant
+/// - participant (str): The participant concerned by the event
+/// - event (str): The event type (see @@EVENTS for ccepted values)
+#let _evt(participant, event) = {}
+
+/// Creates a sequence / message between two participants
+/// - p1 (str): Start participant
+/// - p2 (str): End participant
+/// - comment (none, content): Optional comment to display along the arrow
+/// - comment-align (str): Where to align the comment with respect to the arrow (see @@comment-align for accepted values)
+/// - dashed (bool): Whether the arrow's stroke is dashed or not
+/// - start-tip (str): Start arrow tip (see @@tips for accepted values)
+/// - end-tip (str): End arrow tip (see @@tips for accepted values)
+/// - color (color): Arrow's color
+/// - flip (bool): If true, the arrow is flipped (goes from end to start). This is particularly useful for self calls, to change the side on which the arrow appears
+/// - enable-dst (bool): If true, enables the destination lifeline
+/// - create-dst (bool): If true, creates the destination lifeline and participant
+/// - disable-dst (bool): If true, disables the destination lifeline
+/// - destroy-dst (bool): If true, destroys the destination lifeline and participant
+/// - disable-src (bool): If true, disables the source lifeline
+/// - destroy-src (bool): If true, destroy the source lifeline and participant
+/// - lifeline-style (auto, dict): Optional styling options for lifeline rectangles (see CeTZ documentation for more information on all possible values)
+/// - slant (none, int): Optional slant of the arrow
+/// -> array
+#let _seq(
+  p1,
+  p2,
+  comment: none,
+  comment-align: "left",
+  dashed: false,
+  start-tip: "",
+  end-tip: ">",
+  color: black,
+  flip: false,
+  enable-dst: false,
+  create-dst: false,
+  disable-dst: false,
+  destroy-dst: false,
+  disable-src: false,
+  destroy-src: false,
+  lifeline-style: auto,
+  slant: none
+) = {}
+
+/// Creates a return sequence
+/// #examples.seq-return
+/// - comment (none, content): Optional comment to display along the arrow
+#let _ret(comment: none) = {}
+
+/// Accepted values for `comment-align` argument of @@_seq()
+/// #examples.seq-comm-align
+#let comment-align = (
+  "start", "end", "left", "center", "right"
+)
+
+/// Accepted values for `event` argument of @@_evt()
+/// 
+/// `EVENTS = ("create", "destroy", "enable", "disable")`
+#let EVENTS = ("create", "destroy", "enable", "disable")
+
+/// Accepted values for `start-tip` and `end-tip` arguments of @@_seq()
+/// #examples.seq-tips
+#let tips = (
+  "", ">", ">>", "\\", "\\\\", "/", "//", "x", "o",
+)

gallery/example1.typ

@@ -10,7 +10,7 @@ Alice <-- Bob: Another authentication Response
 
 
 #chronos.diagram({
-  import "/src/diagram.typ": *
+  import chronos: *
   _seq("Alice", "Bob", comment: "Authentication Request")
   _seq("Bob", "Alice", comment: "Authentication Response", dashed: true)
   
@@ -19,33 +19,56 @@ Alice <-- Bob: Another authentication Response
 })
 
 #chronos.diagram({
-  import "/src/diagram.typ": *
+  import chronos: *
   _seq("Bob", "Alice", comment: "bonjour", color: red)
   _seq("Alice", "Bob", comment: "ok", color: blue)
 })
 
 #chronos.diagram({
-  import "/src/diagram.typ": *
+  import chronos: *
   _seq("Alice", "Bob", comment: "This is a test")
   _seq("Alice", "Callum", comment: "This is another test with a long text")
 })
 
 #chronos.diagram({
-  import "/src/diagram.typ": *
+  import chronos: *
   _seq("Alice", "Bob", comment: "Authentication Request")
+
+  _alt(
+    "successful case", {
+      _seq("Bob", "Alice", comment: "Authentication Accepted")
+    },
+    "some kind of failure", {
       _seq("Bob", "Alice", comment: "Authentication Failure")
 
       _grp("My own label", desc: "My own label2", {
         _seq("Alice", "Log", comment: "Log attack start")
-    _grp("loop", desc: "1000 times", {
+        _loop("1000 times", {
           _seq("Alice", "Bob", comment: "DNS Attack")
         })
-    _seq("Alice", "Bob", comment: "Log attack end")
+        _seq("Alice", "Log", comment: "Log attack end")
       })
+    },
+    "Another type of failure", {
+      _seq("Bob", "Alice", comment: "Please repeat")
+    }
+  )
 })
 
 #chronos.diagram({
-  import "/src/diagram.typ": *
+  import chronos: *
+  _par("a", display-name: box(width: 1.5em, height: .5em), show-bottom: false)
+  _par("b", display-name: box(width: 1.5em, height: .5em), show-bottom: false)
+  _col("a", "b", width: 2cm)
+  _loop("a<1", min: 1, {
+    _seq("a", "b", end-tip: ">>")
+    _seq("b", "a", end-tip: ">>")
+  })
+  _seq("a", "b", end-tip: ">>")
+})
+
+#chronos.diagram({
+  import chronos: *
   _sep("Initialization")
   _seq("Alice", "Bob", comment: "Authentication Request")
   _seq("Bob", "Alice", comment: "Authentication Response", dashed: true)
@@ -54,3 +77,30 @@ Alice <-- Bob: Another authentication Response
   _seq("Alice", "Bob", comment: "Another authentication Request")
   _seq("Bob", "Alice", comment: "another authentication Response", dashed: true)
 })
+
+#chronos.diagram({
+  import chronos: *
+  _seq("Alice", "Bob", comment: "Authentication Request")
+  _delay()
+  _seq("Bob", "Alice", comment: "Authentication Response")
+  _delay(name: "5 minutes later")
+  _seq("Bob", "Alice", comment: "Good Bye !")
+})
+
+#chronos.diagram({
+  import chronos: *
+  _seq("Alice", "Bob", comment: "message 1")
+  _seq("Bob", "Alice", comment: "ok", dashed: true)
+  _gap()
+  _seq("Alice", "Bob", comment: "message 2")
+  _seq("Bob", "Alice", comment: "ok", dashed: true)
+  _gap(size: 45)
+  _seq("Alice", "Bob", comment: "message 3")
+  _seq("Bob", "Alice", comment: "ok", dashed: true)
+})
+
+#chronos.diagram({
+  import chronos: *
+  _seq("Alice", "Alice", comment: "On the\nright")
+  _seq("Alice", "Alice", flip: true, comment: "On the\nleft")
+})

gallery/example2.typ

@@ -0,0 +1,169 @@
+#import "/src/lib.typ" as chronos
+
+
+#chronos.diagram({
+  import chronos: *
+  _seq("User", "A", comment: "DoWork", enable-dst: true)
+  _seq("A", "B", comment: [#sym.quote.angle.l createRequest #sym.quote.angle.r], enable-dst: true)
+  _seq("B", "C", comment: "DoWork", enable-dst: true)
+  _seq("C", "B", comment: "WorkDone", destroy-src: true, disable-src: true, dashed: true)
+  _seq("B", "A", comment: "RequestCreated", disable-src: true, dashed: true)
+  _seq("A", "User", comment: "Done", disable-src: true)
+})
+
+#chronos.diagram({
+  import chronos: *
+  _seq("User", "A", comment: "DoWork", enable-dst: true, lifeline-style: (fill: rgb("#FFBBBB")))
+  _seq("A", "A", comment: "Internal call", enable-dst: true, lifeline-style: (fill: rgb("#E9967A")))
+  _seq("A", "B", comment: [#sym.quote.angle.l createRequest #sym.quote.angle.r], enable-dst: true)
+  _seq("B", "A", comment: "RequestCreated", disable-src: true, disable-dst: true, dashed: true)
+  _seq("A", "User", comment: "Done", disable-src: true)
+})
+
+#chronos.diagram({
+  import chronos: *
+  _seq("alice", "bob", comment: "hello", enable-dst: true)
+  _seq("bob", "bob", comment: "self call", enable-dst: true)
+  _seq("bill", "bob", comment: "hello from thread 2", enable-dst: true, lifeline-style: (fill: rgb("#005500")))
+  _seq("bob", "george", comment: "create", create-dst: true)
+  _seq("bob", "bill", comment: "done in thread 2", disable-src: true, dashed: true)
+  _seq("bob", "bob", comment: "rc", disable-src: true, dashed: true)
+  _seq("bob", "george", comment: "delete", destroy-dst: true)
+  _seq("bob", "alice", comment: "success", disable-src: true, dashed: true)
+})
+
+#chronos.diagram({
+  import chronos: *
+  _seq("alice", "bob", comment: "hello1", enable-dst: true)
+  _seq("bob", "charlie", comment: "hello2", enable-dst: true, disable-src: true)
+  _seq("charlie", "alice", comment: "ok", dashed: true, disable-src: true)
+})
+
+#chronos.diagram({
+  import chronos: *
+  _seq("?", "Alice", comment: [?->\ *short* to actor1])
+  _seq("[", "Alice", comment: [\[->\ *from start* to actor1])
+  _seq("[", "Bob", comment: [\[->\ *from start* to actor2])
+  _seq("?", "Bob", comment: [?->\ *short* to actor2])
+  _seq("Alice", "]", comment: [->\]\ from actor1 *to end*])
+  _seq("Alice", "?", comment: [->?\ *short* from actor1])
+  _seq("Alice", "Bob", comment: [->\ from actor1 to actor2])
+})
+
+#chronos.diagram({
+  import chronos: *
+  _par("alice", display-name: "Alice")
+  _par("bob", display-name: "Bob")
+  _par("craig", display-name: "Craig")
+
+  _seq("bob", "alice")
+  _seq("bob", "craig")
+  _gap()
+  
+  _sync({
+    _seq("bob", "alice", comment: "Synched", comment-align: "start")
+    _seq("bob", "craig", comment: "Synched", comment-align: "start")
+  })
+  _gap()
+  
+  _seq("alice", "bob")
+  _seq("craig", "bob")
+  _gap()
+  
+  _sync({
+    _seq("alice", "bob")
+    _seq("craig", "bob")
+  })
+  _gap()
+  
+  _sync({
+    _seq("alice", "bob", enable-dst: true)
+    _seq("craig", "bob")
+  })
+  _gap()
+
+  _evt("bob", "disable")
+})
+
+#chronos.diagram({
+  import chronos: *
+  _par("alice", display-name: "Alice")
+  _par("bob", display-name: "Bob")
+  _par("craig", display-name: "Craig")
+
+  _seq("alice", "bob")
+  _seq("bob", "craig", slant: auto)
+  _seq("alice", "craig", slant: 20)
+
+  _sync({
+    _seq("alice", "bob", slant: 10)
+    _seq("craig", "bob", slant: 20)
+  })
+
+  _sync({
+    _seq("alice", "bob", slant: auto)
+    _seq("bob", "alice", slant: auto)
+  })
+
+  _gap()
+  _evt("bob", "disable")
+})
+
+#grid(columns: 2, column-gutter: 2em,
+  chronos.diagram({
+    import chronos: *
+
+    _par("alice", display-name: "Alice")
+    _par("bob", display-name: "Bob")
+    _seq("alice", "bob", comment: "This is a very long comment")
+
+    // Left to right
+    _seq("alice", "bob", comment: "Start aligned", comment-align: "start")
+    _seq("alice", "bob", comment: "End aligned", comment-align: "end")
+    _seq("alice", "bob", comment: "Left aligned", comment-align: "left")
+    _seq("alice", "bob", comment: "Right aligned", comment-align: "right")
+    _seq("alice", "bob", comment: "Centered", comment-align: "center")
+    _gap()
+
+    // Right to left
+    _seq("bob", "alice", comment: "Start aligned", comment-align: "start")
+    _seq("bob", "alice", comment: "End aligned", comment-align: "end")
+    _seq("bob", "alice", comment: "Left aligned", comment-align: "left")
+    _seq("bob", "alice", comment: "Right aligned", comment-align: "right")
+    _seq("bob", "alice", comment: "Centered", comment-align: "center")
+    _gap()
+
+    // Slant left to right
+    _seq("alice", "bob", comment: "Start aligned", comment-align: "start", slant: 10)
+    _seq("alice", "bob", comment: "End aligned", comment-align: "end", slant: 10)
+    _seq("alice", "bob", comment: "Left aligned", comment-align: "left", slant: 10)
+    _seq("alice", "bob", comment: "Right aligned", comment-align: "right", slant: 10)
+    _seq("alice", "bob", comment: "Centered", comment-align: "center", slant: 10)
+    _gap()
+
+    // Slant right to left
+    _seq("bob", "alice", comment: "Start aligned", comment-align: "start", slant: 10)
+    _seq("bob", "alice", comment: "End aligned", comment-align: "end", slant: 10)
+    _seq("bob", "alice", comment: "Left aligned", comment-align: "left", slant: 10)
+    _seq("bob", "alice", comment: "Right aligned", comment-align: "right", slant: 10)
+    _seq("bob", "alice", comment: "Centered", comment-align: "center", slant: 10)
+  }),
+
+  chronos.diagram({
+    import chronos: *
+
+    _par("alice", display-name: "Alice")
+
+    _seq("alice", "alice", comment: "Start aligned", comment-align: "start")
+    _seq("alice", "alice", comment: "End aligned", comment-align: "end")
+    _seq("alice", "alice", comment: "Left aligned", comment-align: "left")
+    _seq("alice", "alice", comment: "Right aligned", comment-align: "right")
+    _seq("alice", "alice", comment: "Centered", comment-align: "center")
+
+    _seq("alice", "alice", comment: "Start aligned", comment-align: "start", flip: true)
+    _seq("alice", "alice", comment: "End aligned", comment-align: "end", flip: true)
+    _seq("alice", "alice", comment: "Left aligned", comment-align: "left", flip: true)
+    _seq("alice", "alice", comment: "Right aligned", comment-align: "right", flip: true)
+    _seq("alice", "alice", comment: "Centered", comment-align: "center", flip: true)
+  })
+)

gallery/example3.typ

@@ -0,0 +1,166 @@
+#import "/src/lib.typ" as chronos
+
+#set page(width: auto, height: auto)
+
+#let TYPST = image("typst.png", width: 1.5cm, height: 1.5cm, fit: "contain")
+#let FERRIS = image("ferris.png", width: 1.5cm, height: 1.5cm, fit: "contain")
+#let ME = image("me.jpg", width: 1.5cm, height: 1.5cm, fit: "contain")
+
+#chronos.diagram({
+  import chronos: *
+  _par("Foo", display-name: "Participant", shape: "participant")
+  _par("Foo1", display-name: "Actor", shape: "actor")
+  _par("Foo2", display-name: "Boundary", shape: "boundary")
+  _par("Foo3", display-name: "Control", shape: "control")
+  _par("Foo4", display-name: "Entity", shape: "entity")
+  _par("Foo5", display-name: "Database", shape: "database")
+  _par("Foo6", display-name: "Collections", shape: "collections")
+  _par("Foo7", display-name: "Queue", shape: "queue")
+  _par("Foo8", display-name: "Typst", shape: "custom", custom-image: TYPST)
+  _par("Foo9", display-name: "Ferris", shape: "custom", custom-image: FERRIS)
+  _par("Foo10", display-name: "Baryhobal", shape: "custom", custom-image: ME)
+
+  _seq("Foo", "Foo1", comment: "To actor")
+  _seq("Foo", "Foo2", comment: "To boundary")
+  _seq("Foo", "Foo3", comment: "To control")
+  _seq("Foo", "Foo4", comment: "To entity")
+  _seq("Foo", "Foo5", comment: "To database")
+  _seq("Foo", "Foo6", comment: "To collections")
+  _seq("Foo", "Foo7", comment: "To queue")
+  _seq("Foo", "Foo8", comment: "To Typst")
+  _seq("Foo", "Foo9", comment: "To ferris")
+  _seq("Foo", "Foo10", comment: "To Baryhobal")
+})
+
+#pagebreak()
+#chronos.diagram({
+  import chronos: *
+  _par("me", display-name: "Me", shape: "custom", custom-image: ME)
+  _par("typst", display-name: "Typst", shape: "custom", custom-image: TYPST)
+  _par("rust", display-name: "Rust", shape: "custom", custom-image: FERRIS)
+
+  _seq("me", "typst", comment: "opens document", enable-dst: true)
+  _seq("me", "typst", comment: "types document")
+  _seq("typst", "rust", comment: "compiles content", enable-dst: true)
+  _seq("rust", "typst", comment: "renders document", disable-src: true)
+  _seq("typst", "me", comment: "displays document")
+  _evt("typst", "disable")
+})
+
+#pagebreak()
+
+#stack(dir: ltr, spacing: 1em,
+chronos.diagram({
+  import chronos: *
+
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _seq("a", "b", end-tip: ">", comment: `->`)
+  _seq("a", "b", end-tip: ">>", comment: `->>`)
+  _seq("a", "b", end-tip: "\\", comment: `-\`)
+  _seq("a", "b", end-tip: "\\\\", comment: `-\\`)
+  _seq("a", "b", end-tip: "/", comment: `-/`)
+  _seq("a", "b", end-tip: "//", comment: `-//`)
+  _seq("a", "b", end-tip: "x", comment: `->x`)
+  _seq("a", "b", start-tip: "x", comment: `x->`)
+  _seq("a", "b", start-tip: "o", comment: `o->`)
+  _seq("a", "b", end-tip: ("o", ">"), comment: `->o`)
+  _seq("a", "b", start-tip: "o", end-tip: ("o", ">"), comment: `o->o`)
+  _seq("a", "b", start-tip: ">", end-tip: ">", comment: `<->`)
+  _seq("a", "b", start-tip: ("o", ">"), end-tip: ("o", ">"), comment: `o<->o`)
+  _seq("a", "b", start-tip: "x", end-tip: "x", comment: `x<->x`)
+  _seq("a", "b", end-tip: ("o", ">>"), comment: `->>o`)
+  _seq("a", "b", end-tip: ("o", "\\"), comment: `-\o`)
+  _seq("a", "b", end-tip: ("o", "\\\\"), comment: `-\\o`)
+  _seq("a", "b", end-tip: ("o", "/"), comment: `-/o`)
+  _seq("a", "b", end-tip: ("o", "//"), comment: `-//o`)
+  _seq("a", "b", start-tip: "x", end-tip: ("o", ">"), comment: `x->o`)
+}),
+
+chronos.diagram({
+  import chronos: *
+
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _seq("b", "a", end-tip: ">", comment: `->`)
+  _seq("b", "a", end-tip: ">>", comment: `->>`)
+  _seq("b", "a", end-tip: "\\", comment: `-\`)
+  _seq("b", "a", end-tip: "\\\\", comment: `-\\`)
+  _seq("b", "a", end-tip: "/", comment: `-/`)
+  _seq("b", "a", end-tip: "//", comment: `-//`)
+  _seq("b", "a", end-tip: "x", comment: `->x`)
+  _seq("b", "a", start-tip: "x", comment: `x->`)
+  _seq("b", "a", start-tip: "o", comment: `o->`)
+  _seq("b", "a", end-tip: ("o", ">"), comment: `->o`)
+  _seq("b", "a", start-tip: "o", end-tip: ("o", ">"), comment: `o->o`)
+  _seq("b", "a", start-tip: ">", end-tip: ">", comment: `<->`)
+  _seq("b", "a", start-tip: ("o", ">"), end-tip: ("o", ">"), comment: `o<->o`)
+  _seq("b", "a", start-tip: "x", end-tip: "x", comment: `x<->x`)
+  _seq("b", "a", end-tip: ("o", ">>"), comment: `->>o`)
+  _seq("b", "a", end-tip: ("o", "\\"), comment: `-\o`)
+  _seq("b", "a", end-tip: ("o", "\\\\"), comment: `-\\o`)
+  _seq("b", "a", end-tip: ("o", "/"), comment: `-/o`)
+  _seq("b", "a", end-tip: ("o", "//"), comment: `-//o`)
+  _seq("b", "a", start-tip: "x", end-tip: ("o", ">"), comment: `x->o`)
+}),
+
+chronos.diagram({
+  import chronos: *
+
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _seq("a", "a", end-tip: ">", comment: `->`)
+  _seq("a", "a", end-tip: ">>", comment: `->>`)
+  _seq("a", "a", end-tip: "\\", comment: `-\`)
+  _seq("a", "a", end-tip: "\\\\", comment: `-\\`)
+  _seq("a", "a", end-tip: "/", comment: `-/`)
+  _seq("a", "a", end-tip: "//", comment: `-//`)
+  _seq("a", "a", end-tip: "x", comment: `->x`)
+  _seq("a", "a", start-tip: "x", comment: `x->`)
+  _seq("a", "a", start-tip: "o", comment: `o->`)
+  _seq("a", "a", end-tip: ("o", ">"), comment: `->o`)
+  _seq("a", "a", start-tip: "o", end-tip: ("o", ">"), comment: `o->o`)
+  _seq("a", "a", start-tip: ">", end-tip: ">", comment: `<->`)
+  _seq("a", "a", start-tip: ("o", ">"), end-tip: ("o", ">"), comment: `o<->o`)
+  _seq("a", "a", start-tip: "x", end-tip: "x", comment: `x<->x`)
+  _seq("a", "a", end-tip: ("o", ">>"), comment: `->>o`)
+  _seq("a", "a", end-tip: ("o", "\\"), comment: `-\o`)
+  _seq("a", "a", end-tip: ("o", "\\\\"), comment: `-\\o`)
+  _seq("a", "a", end-tip: ("o", "/"), comment: `-/o`)
+  _seq("a", "a", end-tip: ("o", "//"), comment: `-//o`)
+  _seq("a", "a", start-tip: "x", end-tip: ("o", ">"), comment: `x->o`)
+})
+)
+
+#chronos.diagram({
+  import chronos: *
+
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob", show-bottom: false)
+  _par("c", display-name: "Caleb", show-top: false)
+  _par("d", display-name: "Danny", show-bottom: false, show-top: false)
+
+  _gap()
+})
+
+#chronos.diagram({
+  import chronos: *
+
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+  _par("c", display-name: "Caleb")
+  _par("d", display-name: "Danny")
+  _par("e", display-name: "Erika")
+
+  _col("a", "b")
+  _col("b", "c", width: 2cm)
+  _col("c", "d", margin: .5cm)
+  _col("d", "e", min-width: 2cm)
+
+  //_seq("b", "c", comment: [Hello World !])
+  //_seq("c", "d", comment: [Hello World])
+  //_seq("d", "e", comment: [Hello World])
+})

gallery/notes.typ

@@ -0,0 +1,145 @@
+#import "/src/lib.typ" as chronos: *
+
+#set page(width: auto, height: auto)
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _seq("a", "b", comment: [hello])
+  _note("left", [this is a first note])
+
+  _seq("b", "a", comment: [ok])
+  _note("right", [this is another note])
+
+  _seq("b", "b", comment: [I am thinking])
+  _note("left", [a note\ can also be defined\ on several lines])
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _note("left", [This is displayed\ left of Alice.], pos: "a", fill: rgb("#00FFFF"))
+  _note("right", [This is displayed right of Alice.], pos: "a")
+  _note("over", [This is displayed over Alice.], pos: "a")
+  _note("over", [This is displayed\ over Bob and Alice.], pos: ("a", "b"), fill: rgb("#FFAAAA"))
+  _note("over", [This is yet another\ example of\ a long note.], pos: ("a", "b"))
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("caller")
+  _par("server")
+
+  _seq("caller", "server", comment: [conReq])
+  _note("over", [idle], pos: "caller", shape: "hex")
+  _seq("server", "caller", comment: [conConf])
+  _note("over", ["r" as rectangle\ "h" as hexagon], pos: "server", shape: "rect")
+  _note("over", [this is\ on several\ lines], pos: "server", shape: "rect")
+  _note("over", [this is\ on several\ lines], pos: "caller", shape: "hex")
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+  _par("c", display-name: "Charlie")
+
+  _seq("a", "b", comment: [m1])
+  _seq("b", "c", comment: [m2])
+
+  _note("over", [Old method for note over all part. with:\ `note over FirstPart, LastPart`.], pos: ("a", "c"))
+  _note("across", [New method with:\ `note across`.])
+
+  _seq("b", "a")
+
+  _note("across", [Note across all part.], shape: "hex")
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _note("over", [initial state of Alice], pos: "a")
+  _note("over", [initial state of Bob], pos: "b")
+  _seq("b", "a", comment: [hello])
+})
+
+#chronos.diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+  _par("c", display-name: "Charlie")
+  _par("d", display-name: "Donald")
+  _par("e", display-name: "Eddie")
+
+  _note("over", [initial state of Alice], pos: "a")
+  _note("over", [initial state of Bob the builder], pos: "b", aligned: true)
+
+  _note("over", [Note 1], pos: "a")
+  _note("over", [Note 2], pos: "b", aligned: true)
+  _note("over", [Note 3], pos: "c", aligned: true)
+
+  _seq("a", "d")
+  _note("over", [this is an extremely long note], pos: ("d", "e"))
+})
+
+#pagebreak()
+
+#chronos.diagram({
+  _par("a", display-name: [Alice])
+  _par("b", display-name: [The *Famous* Bob])
+
+  _seq("a", "b", comment: [hello #strike([there])])
+
+  _gap()
+  _seq("b", "a", comment: [ok])
+  _note("left", [
+    This is *bold*\
+    This is _italics_\
+    This is `monospaced`\
+    This is #strike([stroked])\
+    This is #underline([underlined])\
+    This is #underline([waved])\
+  ])
+
+  _seq("a", "b", comment: [A _well formatted_ message])
+  _note("right", [
+    This is #box(text([displayed], size: 18pt), fill: rgb("#5F9EA0"))\
+    #underline([left of]) Alice.
+  ], pos: "a")
+  _note("left", [
+    #underline([This], stroke: red) is #text([displayed], fill: rgb("#118888"))\
+    *#text([left of], fill: rgb("#800080")) #strike([Alice], stroke: red) Bob.*
+  ], pos: "b")
+  _note("over", [
+    #underline([This is hosted], stroke: rgb("#FF33FF")) by #box(baseline: 50%, image("gitea.png", width: 1cm, height: 1cm, fit: "contain"))
+  ], pos: ("a", "b"))
+})
+
+// TODO
+/*
+#pagebreak()
+
+#chronos.diagram({
+  _par("a", display-name: [Alice])
+  _par("b", display-name: [Bob])
+
+  _seq("a", "b", comment: [Hello])
+  _note("left", [This is a note])
+
+  _seq("[", "a", comment: [Test])
+  _note("left", [This is also a note])
+})*/
+
+#pagebreak()
+
+#chronos.diagram({
+  _seq("Bob", "Alice", comment: [Hello])
+  _evt("Other", "create")
+})

gallery/readme/boilerplate.typ

@@ -0,0 +1,13 @@
+#import "/src/lib.typ" as chronos
+
+#set page(
+  width: auto,
+  height: auto,
+  margin: 0.5cm
+)
+
+#chronos.diagram({
+  import chronos: *
+  _par("Alice")
+  _par("Bob")
+})

gallery/readme/lifelines.typ

@@ -0,0 +1,24 @@
+#import "/src/lib.typ" as chronos
+
+#set page(
+  width: auto,
+  height: auto,
+  margin: 0.5cm
+)
+
+#chronos.diagram({
+  import chronos: *
+  _par("A", display-name: "Alice")
+  _par("B", display-name: "Bob")
+  _par("C", display-name: "Charlie")
+  _par("D", display-name: "Derek")
+
+  _seq("A", "B", comment: "hello", enable-dst: true)
+  _seq("B", "B", comment: "self call", enable-dst: true)
+  _seq("C", "B", comment: "hello from thread 2", enable-dst: true, lifeline-style: (fill: rgb("#005500")))
+  _seq("B", "D", comment: "create", create-dst: true)
+  _seq("B", "C", comment: "done in thread 2", disable-src: true, dashed: true)
+  _seq("B", "B", comment: "rc", disable-src: true, dashed: true)
+  _seq("B", "D", comment: "delete", destroy-dst: true)
+  _seq("B", "A", comment: "success", disable-src: true, dashed: true)
+})

gallery/readme/simple_sequence.typ

@@ -0,0 +1,17 @@
+#import "/src/lib.typ" as chronos
+
+#set page(
+  width: auto,
+  height: auto,
+  margin: 0.5cm
+)
+
+#chronos.diagram({
+  import chronos: *
+  _par("Alice")
+  _par("Bob")
+
+  _seq("Alice", "Bob", comment: "Hello")
+  _seq("Bob", "Bob", comment: "Think")
+  _seq("Bob", "Alice", comment: "Hi")
+})

justfile

@@ -0,0 +1,18 @@
+# Local Variables:
+# mode: makefile
+# End:
+gallery_dir := "./gallery"
+set shell := ["bash", "-uc"]
+
+manual:
+  typst c manual.typ manual.pdf
+
+gallery:
+  for f in "{{gallery_dir}}"/*.typ; do typst c --root . "$f" "${f%typ}pdf"; done
+  for f in "{{gallery_dir}}"/readme/*.typ; do typst c --root . "$f" "${f%typ}png"; done
+
+test *filter:
+  tt run {{filter}}
+
+update-test *filter:
+  tt update {{filter}}

manual.typ

@@ -0,0 +1,238 @@
+#import "@preview/tidy:0.4.2"
+#import "@preview/codly:1.2.0": codly-init, codly
+#import "@preview/codly-languages:0.1.8": codly-languages
+#import "src/lib.typ" as chronos
+#import "src/participant.typ" as mod-par
+#import "docs/examples.typ"
+#import "docs/example.typ": example
+
+#let TYPST = image("gallery/typst.png", width: 1.5cm, height: 1.5cm, fit: "contain")
+
+#show: codly-init
+#codly(
+  languages: codly-languages
+)
+
+#set text(font: "Source Sans 3")
+
+#set heading(numbering: (..num) => if num.pos().len() < 4 {
+  numbering("1.1", ..num)
+})
+
+#align(center)[
+  #v(2cm)
+  #text(size: 2em)[*Chronos*]
+  
+  _v#chronos.version;_
+  #v(1cm)
+  #chronos.diagram({
+    import chronos: *
+    _par("u", display-name: [User], shape: "actor")
+    _par("wa", display-name: [Web App])
+    _par("tu", display-name: [Typst Universe], shape: "database")
+
+    _seq("u", "wa", comment: [Compile document], enable-dst: true)
+    _seq("wa", "tu", comment: [Fetch Chronos])
+    _seq("tu", "wa", dashed: true, slant: 10)
+    _seq("wa", "wa", comment: [Render])
+    _ret(comment: [Nice sequence diagram])
+  })
+]
+
+#pagebreak()
+
+#{
+  outline(indent: auto, depth: 3)
+}
+#show link: set text(fill: blue)
+
+#set page(numbering: "1/1", header: align(right)[chronos #sym.dash.em v#chronos.version])
+#set page(
+  header: align(left)[chronos #sym.dash.em v#chronos.version],
+  footer: context align(center, counter(page).display("1/1", both: true))
+)
+
+= Introduction
+
+This package lets you create nice sequence diagrams using the CeTZ package.
+
+= Usage
+
+#let import-stmt = "#import \"@preview/chronos:" + str(chronos.version) + "\""
+
+Simply import #link("https://typst.app/universe/package/chronos/")[chronos] and call the `diagram` function:
+#raw(block:true, lang: "typ", ```typ
+$import
+#chronos.diagram({
+  import chronos: *
+  ...
+})
+```.text.replace("$import", import-stmt))
+
+= Examples
+
+You can find the following examples and more in the #link("https://git.kb28.ch/HEL/chronos/src/branch/main/gallery")[gallery] directory
+
+== Some groups and sequences
+
+#example(```
+chronos.diagram({
+  import chronos: *
+  _seq("Alice", "Bob", comment: "Authentication Request")
+  _seq("Bob", "Alice", comment: "Authentication Failure")
+
+  _grp("My own label", desc: "My own label2", {
+    _seq("Alice", "Log", comment: "Log attack start")
+    _grp("loop", desc: "1000 times", {
+      _seq("Alice", "Bob", comment: "DNS Attack")
+    })
+    _seq("Alice", "Bob", comment: "Log attack end")
+  })
+})
+```, wrap: false, vertical: true)
+
+#pagebreak(weak: true)
+
+== Lifelines
+
+#example(```
+chronos.diagram({
+  import chronos: *
+  _seq("alice", "bob", comment: "hello", enable-dst: true)
+  _seq("bob", "bob", comment: "self call", enable-dst: true)
+  _seq(
+    "bill", "bob",
+    comment: "hello from thread 2",
+    enable-dst: true,
+    lifeline-style: (fill: rgb("#005500"))
+  )
+  _seq("bob", "george", comment: "create", create-dst: true)
+  _seq(
+    "bob", "bill",
+    comment: "done in thread 2",
+    disable-src: true,
+    dashed: true
+  )
+  _seq("bob", "bob", comment: "rc", disable-src: true, dashed: true)
+  _seq("bob", "george", comment: "delete", destroy-dst: true)
+  _seq("bob", "alice", comment: "success", disable-src: true, dashed: true)
+})
+```, wrap: false, vertical: true)
+
+#pagebreak(weak: true)
+
+== Found and lost messages
+
+#example(```
+chronos.diagram({
+  import chronos: *
+  _seq("?", "Alice", comment: [?->\ *short* to actor1])
+  _seq("[", "Alice", comment: [\[->\ *from start* to actor1])
+  _seq("[", "Bob", comment: [\[->\ *from start* to actor2])
+  _seq("?", "Bob", comment: [?->\ *short* to actor2])
+  _seq("Alice", "]", comment: [->\]\ from actor1 *to end*])
+  _seq("Alice", "?", comment: [->?\ *short* from actor1])
+  _seq("Alice", "Bob", comment: [->\ from actor1 to actor2])
+})
+```, wrap: false, vertical: true)
+
+#pagebreak(weak: true)
+
+== Custom images
+
+#example(```
+let load-img(path) = image(
+  path,
+  width: 1.5cm, height: 1.5cm,
+  fit:"contain"
+)
+let TYPST = load-img("../gallery/typst.png")
+let FERRIS = load-img("../gallery/ferris.png")
+let ME = load-img("../gallery/me.jpg")
+
+chronos.diagram({
+  import chronos: *
+  _par("me", display-name: "Me", shape: "custom", custom-image: ME)
+  _par("typst", display-name: "Typst", shape: "custom", custom-image: TYPST)
+  _par("rust", display-name: "Rust", shape: "custom", custom-image: FERRIS)
+
+  _seq("me", "typst", comment: "opens document", enable-dst: true)
+  _seq("me", "typst", comment: "types document")
+  _seq("typst", "rust", comment: "compiles content", enable-dst: true)
+  _seq("rust", "typst", comment: "renders document", disable-src: true)
+  _seq("typst", "me", comment: "displays document", disable-src: true)
+})
+```, wrap: false, vertical: true)
+
+#pagebreak(weak: true)
+
+= Reference
+
+#let par-docs = tidy.parse-module(
+  read("docs/participants.typ"),
+  name: "Participants",
+  require-all-parameters: true,
+  old-syntax: true,
+  scope: (
+    chronos: chronos,
+    mod-par: mod-par,
+    TYPST: TYPST
+  )
+)
+#tidy.show-module(par-docs, show-outline: false, sort-functions: none)
+
+#pagebreak(weak: true)
+
+#let seq-docs = tidy.parse-module(
+  read("docs/sequences.typ"),
+  name: "Sequences",
+  require-all-parameters: true,
+  old-syntax: true,
+  scope: (
+    chronos: chronos,
+    examples: examples
+  )
+)
+#tidy.show-module(seq-docs, show-outline: false, sort-functions: none)
+
+#pagebreak(weak: true)
+
+#let grp-docs = tidy.parse-module(
+  read("docs/groups.typ"),
+  name: "Groups",
+  require-all-parameters: true,
+  old-syntax: true,
+  scope: (
+    chronos: chronos,
+    examples: examples
+  )
+)
+#tidy.show-module(grp-docs, show-outline: false, sort-functions: none)
+
+#pagebreak(weak: true)
+
+#let gap-sep-docs = tidy.parse-module(
+  read("docs/gaps_seps.typ"),
+  name: "Gaps and separators",
+  require-all-parameters: true,
+  old-syntax: true,
+  scope: (
+    chronos: chronos,
+    examples: examples
+  )
+)
+#tidy.show-module(gap-sep-docs, show-outline: false, sort-functions: none)
+
+#pagebreak(weak: true)
+
+#let notes-docs = tidy.parse-module(
+  read("docs/notes.typ"),
+  name: "Notes",
+  require-all-parameters: true,
+  old-syntax: true,
+  scope: (
+    chronos: chronos,
+    examples: examples
+  )
+)
+#tidy.show-module(notes-docs, show-outline: false)

src/cetz.typ

@@ -0,0 +1 @@
+#import "@preview/cetz:0.4.0": *

src/consts.typ

@@ -0,0 +1,36 @@
+#let Y-SPACE = 10
+#let PAR-SPACE = 10
+#let COMMENT-PAD = 8
+#let LIFELINE-W = 10
+#let CREATE-OFFSET = 15
+#let DEFAULT-SLANT = 10
+#let CROSS-TIP-SIZE = 4
+#let CIRCLE-TIP-RADIUS = 3
+
+#let SYM-GAP = 5
+#let PAR-PAD = (5pt, 3pt)
+#let ACTOR-WIDTH = 20
+#let BOUNDARY-HEIGHT = 20
+#let CONTROL-HEIGHT = 20
+#let ENTITY-HEIGHT = 20
+#let DATABASE-WIDTH = 24
+#let COLLECTIONS-PAD = (5pt, 3pt)
+#let COLLECTIONS-DX = 3
+#let COLLECTIONS-DY = 3
+#let QUEUE-PAD = (5pt, 3pt)
+
+#let NOTE-PAD = (6, 3)
+#let NOTE-CORNER-SIZE = 6
+#let NOTE-GAP = 3
+#let NOTE-HEX-PAD = (6, 8)
+
+#let COL-DESTRUCTION = rgb("#A80238")
+#let COL-GRP-NAME = rgb("#EEEEEE")
+#let COL-SEP-NAME = rgb("#EEEEEE")
+#let COL-NOTE = rgb("#FEFFDD")
+
+#let default-style = (
+  y-space: 10pt,
+  fill: rgb("#EEEEEE"),
+  stroke: black + 1pt,
+)

src/core/draw/delay.typ

@@ -0,0 +1,45 @@
+#import "/src/cetz.typ": draw, styles
+
+#import "/src/core/utils.typ": get-ctx, normalize-units, set-ctx
+
+#let delay-default-style = (
+  stroke: (
+    dash: "loosely-dotted",
+    paint: gray.darken(40%),
+    thickness: .8pt
+  ),
+  size: 30pt
+)
+
+#let render(delay) = get-ctx(ctx => {
+  let style = styles.resolve(
+    ctx.style,
+    merge: delay.style,
+    root: "delay",
+    base: delay-default-style
+  )
+  let size = normalize-units(style.size)
+
+  let y0 = ctx.y
+  let y1 = ctx.y - size
+  for (i, line) in ctx.lifelines.enumerate() {
+    line.events.push((type: "delay-start", y: y0))
+    line.events.push((type: "delay-end", y: y1, style: style))
+    ctx.lifelines.at(i) = line
+  }
+  if delay.name != none {
+    let x0 = ctx.x-pos.first()
+    let x1 = ctx.x-pos.last()
+    draw.content(
+      ((x0 + x1) / 2, (y0 + y1) / 2),
+      anchor: "mid",
+      delay.name
+    )
+  }
+  
+  set-ctx(c => {
+    c.y = y1
+    c.lifelines = ctx.lifelines
+    return c
+  })
+})

src/core/draw/event.typ

@@ -0,0 +1,39 @@
+#import "/src/cetz.typ": styles
+
+#import "/src/consts.typ": *
+#import "/src/core/utils.typ": get-ctx, set-ctx
+
+#let render(evt) = get-ctx(ctx => {
+  let style = styles.resolve(
+    ctx.style,
+    merge: evt.style,
+    root: "event",
+    base: ()
+  )
+
+  let par-name = evt.participant
+  let i = ctx.pars-i.at(par-name)
+  let par = ctx.participants.at(i)
+  let line = ctx.lifelines.at(i)
+  let entry = (type: evt.event, y: ctx.y, style: style)
+
+  if evt.event == "disable" {
+    line.level -= 1
+  } else if evt.event == "enable" {
+    line.level += 1
+  } else if evt.event == "create" {
+    ctx.y -= CREATE-OFFSET
+    entry.y = ctx.y
+    (par.draw)(par, y: ctx.y)
+  } else if evt.event == "destroy" {
+  } else {
+    panic("Unknown event '" + evt.event + "'")
+  }
+
+  line.events.push(entry)
+  set-ctx(c => {
+    c.lifelines.at(i) = line
+    c.y = ctx.y
+    return c
+  })
+})

src/core/draw/group.typ

@@ -0,0 +1,190 @@
+#import "/src/cetz.typ": draw, styles
+
+#import "/src/consts.typ": *
+#import "/src/core/utils.typ": expand-parent-group, get-ctx, normalize-units, set-ctx
+
+#let group-default-style = (
+  name: (
+    inset: (
+      x: 5pt,
+      y: 3pt
+    ),
+    stroke: auto,
+    fill: auto
+  ),
+  desc: (
+    inset: 3pt
+  ),
+  divider: (dash: (2pt, 1pt), thickness: .5pt),
+  padding: 10pt,
+  stroke: auto
+)
+
+#let render-start(grp) = get-ctx(ctx => {
+  let style = styles.resolve(
+    ctx.style,
+    merge: grp.style,
+    root: "group",
+    base: group-default-style
+  )
+
+  let grp = grp
+  grp.insert("resolved-style", style)
+  ctx.y -= ctx.style.y-space
+
+  let name = box(
+    text(grp.name, weight: "bold"),
+    inset: style.name.inset
+  )
+  grp.insert("rendered-name", name)
+
+  let desc = box(
+    text([\[#grp.desc\]], weight: "bold", size: .8em),
+    inset: style.desc.inset
+  )
+  grp.insert("rendered-desc", desc)
+
+  let m = measure(name)
+  ctx.groups = ctx.groups.map(g => {
+    if g.group.min-i == grp.min-i { g.start-lvl += 1 }
+    if g.group.max-i == grp.max-i { g.end-lvl += 1 }
+    g
+  })
+  if grp.grp-type == "alt" {
+    grp.insert("elses", ())
+  }
+  ctx.groups.push((
+    start-y: ctx.y,
+    group: grp,
+    start-lvl: 0,
+    end-lvl: 0,
+    min-x: ctx.x-pos.at(grp.min-i) - 10,
+    max-x: ctx.x-pos.at(grp.max-i) + 10
+  ))
+  ctx.y -= m.height / 1pt
+  ctx.y += ctx.style.y-space / 2
+
+  set-ctx(c => {
+    c.y = ctx.y
+    c.groups = ctx.groups
+    return c
+  })
+})
+
+
+#let draw-group(x0, x1, y0, y1, group) = {
+  let style = group.resolved-style
+  let name = group.rendered-name
+  let desc = group.rendered-desc
+  let m = measure(name)
+  let w = m.width / 1pt
+  let h = m.height / 1pt
+  draw.rect(
+    (x0, y0),
+    (x1, y1),
+    stroke: style.stroke
+  )
+
+  let x1 = x0 + w
+  let x2 = x1 + 5
+  draw.line(
+    (x0, y0),
+    (x2, y0),
+    (x2, y0 - h / 2),
+    (x1, y0 - h),
+    (x0, y0 - h),
+    stroke: style.name.stroke,
+    fill: style.name.fill,
+    close: true
+  )
+  draw.content(
+    (x0, y0),
+    name,
+    anchor: "north-west"
+  )
+
+  if group.desc != none {
+    draw.content(
+      (x2, y0),
+      desc,
+      anchor: "north-west"
+    )
+  }
+}
+
+#let draw-else(x0, x1, y, elmt) = {
+  let style = elmt.resolved-style
+  draw.line(
+    (x0, y),
+    (x1, y),
+    stroke: style.divider
+  )
+  draw.content(
+    (x0, y),
+    elmt.rendered-desc,
+    anchor: "north-west"
+  )
+}
+
+#let render-end(group) = get-ctx(ctx => {
+  let y = ctx.y - ctx.style.y-space / 2
+  ctx.y -= ctx.style.y-space / 2
+  let (
+    start-y,
+    group,
+    start-lvl,
+    end-lvl,
+    min-x,
+    max-x
+  ) = ctx.groups.pop()
+  let padding = normalize-units(group.resolved-style.padding)
+  let x0 = min-x - padding
+  let x1 = max-x + padding
+  
+  draw-group(x0, x1, start-y, y, group)
+
+  if group.grp-type == "alt" {
+    for (else-y, else-elmt) in group.elses {
+      draw-else(x0, x1, else-y, else-elmt)
+    }
+  }
+
+  set-ctx(c => {
+    c.y = ctx.y
+    c.groups = ctx.groups
+    return c
+  })
+
+  expand-parent-group(x0, x1)
+})
+
+#let render-else(else_) = get-ctx(ctx => {
+  let group = ctx.groups.last().group
+  let style = styles.resolve(
+    ctx.style,
+    merge: group.style,
+    root: "group",
+    base: group-default-style
+  )
+  ctx.y -= ctx.style.y-space / 2
+
+  let desc = box(
+    text([\[#else_.desc\]], weight: "bold", size: .8em),
+    inset: style.desc.inset
+  )
+  let m = measure(desc)
+  let else_ = else_
+  else_.insert("resolved-style", style)
+  else_.insert("rendered-desc", desc)
+  ctx.groups.last().group.elses.push((
+    ctx.y, else_
+  ))
+  ctx.y -= m.height / 1pt
+  ctx.y += ctx.style.y-space / 2
+  
+  set-ctx(c => {
+    c.y = ctx.y
+    c.groups = ctx.groups
+    return c
+  })
+})

src/core/draw/note.typ

@@ -0,0 +1,208 @@
+#import "/src/cetz.typ": draw, styles
+
+#import "/src/consts.typ": *
+#import "/src/core/utils.typ": get-ctx, is-elmt, set-ctx, expand-parent-group, normalize-measure
+
+#let note-default-style = (
+  shape: "default",
+  fill: rgb("#FEFFDD"),
+  stroke: black + .5pt
+)
+
+#let resolve-style(ctx, note) = {
+  return styles.resolve(
+    ctx.style,
+    merge: note.style,
+    root: "note",
+    base: note-default-style
+  )
+}
+
+#let pre-resolve-styles() = get-ctx(ctx => {
+  let ctx = ctx
+  let notes = ctx.setup.notes
+
+  for (i, elmt) in ctx.setup.elements.enumerate() {
+    if type(elmt) == function {
+      ctx = elmt(ctx).ctx
+    } else if is-elmt(elmt) {
+      if elmt.type == "note" {
+        let style = resolve-style(ctx, elmt)
+        notes.at(elmt.id).insert("resolved-style", style)
+      }
+    }
+  }
+
+  set-ctx(c => {
+    c.setup.notes = notes
+    return c
+  })
+})
+
+#let get-size(note) = {
+  let style = note.resolved-style
+  let PAD = if style.shape == "hex" {NOTE-HEX-PAD} else {NOTE-PAD}
+  let m = normalize-measure(box(note.content))
+  let w = m.width + PAD.last() * 2
+  let h = m.height + PAD.first() * 2
+  if style.shape == "default" {
+    w += NOTE-CORNER-SIZE
+  }
+  return (
+    width: w,
+    height: h
+  )
+}
+
+#let get-base-x(pars-i, x-pos, note) = {
+  if note.side == "across" {
+    return (x-pos.first() + x-pos.last()) / 2
+  }
+  if note.side == "over" {
+    if type(note.pos) == array {
+      let xs = note.pos.map(par => x-pos.at(pars-i.at(par)))
+      return (calc.min(..xs) + calc.max(..xs)) / 2
+    }
+  }
+  return x-pos.at(pars-i.at(note.pos))
+}
+
+#let get-box(note) = {
+  let style = note.resolved-style
+  let PAD = if style.shape == "hex" {NOTE-HEX-PAD} else {NOTE-PAD}
+  let inset = (
+    left: PAD.last() * 1pt,
+    right: PAD.last() * 1pt,
+    top: PAD.first() * 1pt,
+    bottom: PAD.first() * 1pt,
+  )
+  if style.shape == "default" {
+    inset.right += NOTE-CORNER-SIZE * 1pt
+  }
+  if note.side == "left" {
+    inset.right += NOTE-GAP * 1pt
+  } else if note.side == "right" {
+    inset.left += NOTE-GAP * 1pt
+  }
+  return box(note.content, inset: inset)
+}
+
+#let render(note, y: auto, forced: false) = {
+  if not note.linked {
+    if not note.aligned {
+      get-ctx(ctx => {
+        set-ctx(c => {
+          c.y -= ctx.style.y-space
+          return c
+        })
+      })
+    }
+  } else if not forced {
+    return ()
+  }
+
+  get-ctx(ctx => {
+    let note = ctx.notes.at(note.id)
+    let y = y
+    if y == auto {
+      y = ctx.y
+    }
+
+    let style = note.resolved-style
+    let shape = style.shape
+    
+    let PAD = if shape == "hex" {NOTE-HEX-PAD} else {NOTE-PAD}
+    let m = normalize-measure(box(note.content))
+    let w = m.width + PAD.last() * 2
+    let h = m.height + PAD.first() * 2
+    let total-w = w
+    if shape == "default" {
+      total-w += NOTE-CORNER-SIZE
+    }
+
+    let base-x = get-base-x(ctx.pars-i, ctx.x-pos, note)
+
+    let i = none
+    if note.pos != none and type(note.pos) == str {
+      i = ctx.pars-i.at(note.pos)
+    }
+    let x0 = base-x
+    if note.side == "left" {
+      x0 -= NOTE-GAP
+      x0 -= total-w
+      if ctx.lifelines.at(i).level != 0 {
+        x0 -= LIFELINE-W / 2
+      }
+    } else if note.side == "right" {
+      x0 += NOTE-GAP
+      x0 += ctx.lifelines.at(i).level * LIFELINE-W / 2
+    } else if note.side == "over" or note.side == "across" {
+      x0 -= total-w / 2
+    }
+
+    let x1 = x0 + w
+    let x2 = x0 + total-w
+    let y0 = y
+
+    if note.linked {
+      y0 += h / 2
+    }
+    let y1 = y0 - h
+
+    if shape == "default" {
+      draw.line(
+        (x0, y0),
+        (x1, y0),
+        (x2, y0 - NOTE-CORNER-SIZE),
+        (x2, y1),
+        (x0, y1),
+        stroke: style.stroke,
+        fill: style.fill,
+        close: true
+      )
+      draw.line(
+        (x1, y0),
+        (x1, y0 - NOTE-CORNER-SIZE),
+        (x2, y0 - NOTE-CORNER-SIZE),
+        stroke: style.stroke
+      )
+    } else if shape == "rect" {
+      draw.rect(
+        (x0, y0),
+        (x2, y1),
+        stroke: style.stroke,
+        fill: style.fill
+      )
+    } else if shape == "hex" {
+      let lx = x0 + PAD.last()
+      let rx = x2 - PAD.last()
+      let my = (y0 + y1) / 2
+      draw.line(
+        (lx, y0),
+        (rx, y0),
+        (x2, my),
+        (rx, y1),
+        (lx, y1),
+        (x0, my),
+        stroke: style.stroke,
+        fill: style.fill,
+        close: true
+      )
+    }
+
+    draw.content(
+      ((x0 + x1)/2, (y0 + y1)/2),
+      note.content,
+      anchor: "center"
+    )
+
+    if note.aligned-with == none and (note.pos != none or note.side == "across") {
+      set-ctx(c => {
+        c.y -= h
+        return c
+      })
+    }
+
+    expand-parent-group(x0, x2)
+  })
+}

src/core/draw/participant.typ

@@ -0,0 +1,194 @@
+#import "/src/cetz.typ": draw, styles
+
+#import "/src/consts.typ": *
+#import "/src/core/utils.typ": get-ctx, get-style, is-elmt, set-ctx
+
+#let shapes = {
+  let from-module(path) = {
+    import path as mod
+    return (mod.name: (
+      get-size: mod.get-size,
+      render: mod.render,
+      default-style: mod.default-style
+    ))
+  }
+  from-module("participant/default.typ")
+  from-module("participant/actor.typ")
+  from-module("participant/boundary.typ")
+  from-module("participant/control.typ")
+  from-module("participant/entity.typ")
+  from-module("participant/database.typ")
+  from-module("participant/collections.typ")
+  from-module("participant/queue.typ")
+  from-module("participant/custom.typ")
+}
+
+#let participant-default-style = (
+  fill: rgb("#E2E2F0"),
+  stroke: black + .5pt,
+  from-start: true,
+  show-bottom: true,
+  show-top: true,
+  shape: "participant",
+  track: (
+    dash: "dashed",
+    paint: gray.darken(40%),
+    thickness: .5pt
+  )
+)
+
+#let resolve-style(ctx, par) = {
+  let style = styles.resolve(
+    ctx.style,
+    merge: par.style,
+    root: "participant",
+    base: participant-default-style
+  )
+  let shape-style = shapes.at(style.shape, default: (:))
+                          .at("default-style", default: (:))
+  style = styles.resolve(
+    ctx.style,
+    merge: style,
+    base: shape-style
+  )
+  return style
+}
+
+#let pre-resolve-styles() = get-ctx(ctx => {
+  let idx = (:)
+  let elements = ctx.setup.elements
+  let participants = ctx.setup.participants
+  for (i, par) in participants.enumerate() {
+    par.insert("resolved-style", resolve-style(ctx, par))
+    participants.at(i) = par
+    idx.insert(par.name, i)
+  }
+  for (i, elmt) in elements.enumerate() {
+    if type(elmt) == function {
+      ctx = elmt(ctx).ctx
+    } else if is-elmt(elmt) {
+      if elmt.type == "par" {
+        let style = resolve-style(ctx, elmt)
+        elements.at(i).insert("resolved-style", style)
+        let i = idx.at(elmt.name)
+        participants.at(i).resolved-style = style
+      }
+    }
+  }
+  
+  set-ctx(c => {
+    c.setup.elements = elements
+    c.setup.participants = participants
+    return c
+  })
+})
+
+#let get-size(par) = {
+  if par.invisible {
+    return (width: 0, height: 0)
+  }
+  let style = par.resolved-style
+  let func = shapes.at(style.shape).get-size
+  return func(par)
+}
+
+#let render(par, y: 0, bottom: false) = get-ctx(ctx => {
+  let style = resolve-style(ctx, par)
+  let func = shapes.at(style.shape).render
+  let par = par
+  par.resolved-style = style
+  func(ctx.x-pos.at(par.i), y, par, bottom)
+},)
+
+#let render-lifelines() = get-ctx(ctx => {
+  let participants = ctx.participants
+  for p in participants.filter(p => not p.invisible) {
+    let style = p.resolved-style
+    let x = ctx.x-pos.at(p.i)
+
+    // Draw vertical line
+    let last-y = 0
+
+    let rects = ()
+    let destructions = ()
+    let stack = ()
+
+    // Compute lifeline rectangles + destruction positions
+    for event in ctx.lifelines.at(p.i).events {
+      if event.type == "create" {
+        last-y = event.y
+
+      } else if event.type == "enable" {
+        if stack.len() == 0 {
+          draw.line(
+            (x, last-y),
+            (x, event.y),
+            stroke: style.track
+          )
+        }
+        stack.push(event)
+      
+      } else if event.type == "disable" or event.type == "destroy" {
+        let lvl = 0
+        if stack.len() != 0 {
+          let e = stack.pop()
+          lvl = stack.len()
+          rects.push((
+            x + lvl * LIFELINE-W / 2,
+            e.y,
+            event.y,
+            e.style
+          ))
+          last-y = event.y
+        }
+
+        if event.type == "destroy" {
+          destructions.push((x + lvl * LIFELINE-W / 2, event.y))
+        }
+      } else if event.type == "delay-start" {
+        draw.line(
+          (x, last-y),
+          (x, event.y),
+          stroke: style.track
+        )
+        last-y = event.y
+      } else if event.type == "delay-end" {
+        draw.line(
+          (x, last-y),
+          (x, event.y),
+          stroke: event.style.stroke
+        )
+        last-y = event.y
+      }
+    }
+
+    draw.line(
+      (x, last-y),
+      (x, ctx.y),
+      stroke: style.track
+    )
+
+    // Draw lifeline rectangles (reverse for bottom to top)
+    for rect in rects.rev() {
+      let (cx, y0, y1, style) = rect
+      let style = get-style("lifeline", style)
+      draw.rect(
+        (cx - LIFELINE-W / 2, y0),
+        (cx + LIFELINE-W / 2, y1),
+        ..style
+      )
+    }
+
+    // Draw lifeline destructions
+    for dest in destructions {
+      let (cx, cy) = dest
+      draw.line((cx - 8, cy - 8), (cx + 8, cy + 8), stroke: COL-DESTRUCTION + 2pt)
+      draw.line((cx - 8, cy + 8), (cx + 8, cy - 8), stroke: COL-DESTRUCTION + 2pt)
+    }
+
+    // Draw participants (end)
+    if style.show-bottom {
+      (p.draw)(p, y: ctx.y, bottom: true)
+    }
+  }
+},)

src/core/draw/participant/actor.typ

@@ -0,0 +1,75 @@
+#import "/src/cetz.typ": draw
+
+#import "/src/core/utils.typ": normalize-measure, normalize-units
+
+#let name = "actor"
+
+#let render(x, y, p, bottom) = {
+  let m = normalize-measure(p.display-name)
+  let style = p.resolved-style
+  let spacing = normalize-units(style.spacing)
+  let width = normalize-units(style.width)
+  let height = width * 2
+  let w2 = width / 2
+  let head-r = width / 4
+  let arms-y = height * 0.375
+
+  let y0 = if bottom {
+    y - m.height - spacing
+  } else {
+    y + m.height + height + spacing
+  }
+
+  // Head
+  draw.circle(
+    (x, y0 - head-r),
+    radius: head-r,
+    fill: style.fill,
+    stroke: style.stroke
+  )
+
+  // Body
+  draw.line(
+    (x, y0 - head-r * 2),
+    (x, y0 - height + w2),
+    stroke: style.stroke
+  )
+  
+  // Arms
+  draw.line(
+    (x - w2, y0 - arms-y),
+    (x + w2, y0 - arms-y),
+    stroke: style.stroke
+  )
+
+  // Legs
+  draw.line(
+    (x - w2, y0 - height),
+    (x, y0 - height + w2),
+    (x + w2, y0 - height),
+    stroke: style.stroke
+  )
+  draw.content(
+    (x, y),
+    p.display-name,
+    anchor: if bottom {"north"} else {"base"}
+  )
+}
+
+#let get-size(par) = {
+  let m = normalize-measure(par.display-name)
+
+  let width = normalize-units(par.resolved-style.width)
+  let height = width * 2
+  let spacing = normalize-units(par.resolved-style.spacing)
+
+  return (
+    width: calc.max(m.width, width),
+    height: height + spacing + m.height
+  )
+}
+
+#let default-style = (
+  width: 20pt,
+  spacing: 5pt
+)

src/core/draw/participant/boundary.typ

@@ -0,0 +1,59 @@
+#import "/src/cetz.typ": draw
+
+#import "/src/core/utils.typ": normalize-measure, normalize-units
+
+#let name = "boundary"
+
+#let render(x, y, p, bottom) = {
+  let m = normalize-measure(p.display-name)
+  let style = p.resolved-style
+  let height = normalize-units(style.height)
+  let spacing = normalize-units(style.spacing)
+  let circle-r = height / 2
+  let y0 = if bottom {
+    y - m.height - spacing
+  } else {
+    y + m.height + height + spacing
+  }
+  let x0 = x - height
+  let y1 = y0 - circle-r
+  let y2 = y0 - height
+
+  draw.circle(
+    (x + circle-r, y1),
+    radius: circle-r,
+    fill: style.fill,
+    stroke: style.stroke
+  )
+  draw.line(
+    (x0, y0), (x0, y2),
+    stroke: style.stroke
+  )
+  draw.line(
+    (x0, y1), (x, y1),
+    stroke: style.stroke
+  )
+  draw.content(
+    (x, y),
+    p.display-name,
+    anchor: if bottom {"north"} else {"base"}
+  )
+}
+
+#let get-size(par) = {
+  let m = normalize-measure(par.display-name)
+
+  let height = normalize-units(par.resolved-style.height)
+  let width = height * 2
+  let spacing = normalize-units(par.resolved-style.spacing)
+
+  return (
+    width: calc.max(m.width, width),
+    height: height + spacing + m.height
+  )
+}
+
+#let default-style = (
+  height: 20pt,
+  spacing: 5pt
+)

src/core/draw/participant/collections.typ

@@ -0,0 +1,108 @@
+#import "/src/cetz.typ": draw
+
+#import "/src/core/utils.typ": normalize-measure, normalize-units
+
+#let name = "collections"
+
+#let normalize-offset(offset) = {
+  let dx = 0pt
+  let dy = 0pt
+  if type(offset) == array {
+    if offset.len() >= 2 {
+      dx = offset.at(0)
+      dy = offset.at(1)
+    }
+  } else if type(offset) == dictionary {
+    dx = offset.at("dx", default: dx)
+    dy = offset.at("dx", default: dy)
+  } else {
+    dx = offset
+    dy = offset
+  }
+  return (
+    x: normalize-units(dx),
+    y: normalize-units(dy)
+  )
+}
+
+#let render(x, y, p, bottom) = {
+  let style = p.resolved-style
+  let name = box(
+    p.display-name,
+    inset: style.inset,
+    fill: style.fill,
+    stroke: style.stroke
+  )
+  let m = normalize-measure(name)
+  let offset = normalize-offset(style.offset)
+
+  let w = m.width
+  let h = m.height
+  let dx = offset.x
+  let dy = offset.y
+  let total-w = w + calc.abs(dx)
+  let total-h = h + calc.abs(dy)
+
+  let x0 = x - total-w / 2
+  let x1 = x0 + calc.abs(dx)
+  let x3 = x0 + total-w
+  let x2 = x3 - calc.abs(dx)
+  
+  let y0 = if bottom {y} else {y + total-h}
+  let y1 = y0 - calc.abs(dy)
+  let y3 = y0 - total-h
+  let y2 = y3 + calc.abs(dy)
+
+  let r1 = (x1, y0, x3, y2)
+  let r2 = (x0, y1, x2, y3)
+
+  if dx < 0 {
+    r1.at(0) = x0
+    r1.at(2) = x2
+    r2.at(0) = x1
+    r2.at(2) = x3
+  }
+
+  if dy < 0 {
+    r1.at(1) = y1
+    r1.at(3) = y3
+    r2.at(1) = y0
+    r2.at(3) = y2
+  }
+  draw.rect(
+    (r1.at(0), r1.at(1)),
+    (r1.at(2), r1.at(3)),
+    fill: style.fill,
+    stroke: style.stroke
+  )
+  
+  draw.content(
+    (
+      (r2.at(0) + r2.at(2)) / 2,
+      (r2.at(1) + r2.at(3)) / 2
+    ),
+    name,
+    anchor: "mid"
+  )
+}
+
+#let get-size(par) = {
+  let m = normalize-measure(box(
+    par.display-name,
+    inset: par.resolved-style.inset
+  ))
+  
+  let offset = normalize-offset(par.resolved-style.offset)
+  let dx = offset.x
+  let dy = offset.y
+
+  return (
+    width: m.width + calc.abs(dx),
+    height: m.height + calc.abs(dy)
+  )
+}
+
+#let default-style = (
+  inset: (x: 3pt, y: 5pt),
+  offset: (3pt, 3pt)
+)

src/core/draw/participant/control.typ

@@ -0,0 +1,54 @@
+#import "/src/cetz.typ": draw
+
+#import "/src/core/utils.typ": normalize-measure, normalize-units
+
+#let name = "control"
+
+#let render(x, y, p, bottom) = {
+  let m = normalize-measure(p.display-name)
+  let style = p.resolved-style
+  let size = normalize-units(style.size)
+  let spacing = normalize-units(style.spacing)
+  let r = size / 2
+  let y0 = if bottom {
+    y - m.height - spacing
+  } else {
+    y + m.height + size + spacing
+  }
+
+  draw.circle(
+    (x, y0 - r),
+    radius: r,
+    fill: style.fill,
+    stroke: style.stroke
+  )
+  let s = stroke(style.stroke)
+  draw.mark(
+    (x, y0), (x - r / 2, y0),
+    symbol: "stealth",
+    fill: s.paint,
+    stroke: s.paint
+  )
+  draw.content(
+    (x, y),
+    p.display-name,
+    anchor: if bottom {"north"} else {"base"}
+  )
+}
+
+#let get-size(par) = {
+  let m = normalize-measure(par.display-name)
+
+  let size = normalize-units(par.resolved-style.size)
+  let spacing = normalize-units(par.resolved-style.spacing)
+
+  return (
+    width: calc.max(m.width, size),
+    height: size + spacing + m.height
+  )
+}
+
+#let default-style = (
+  size: 20pt,
+  spacing: 5pt
+)

src/core/draw/participant/custom.typ

@@ -0,0 +1,43 @@
+#import "/src/cetz.typ": draw
+
+#import "/src/core/utils.typ": normalize-measure, normalize-units
+
+#let name = "custom"
+
+#let render(x, y, p, bottom) = {
+  let style = p.resolved-style
+  let elmts = (style.image, p.display-name)
+  if bottom {
+    elmts = elmts.rev()
+  }
+  let shape = align(
+    center,
+    stack(
+      dir: ttb,
+      spacing: normalize-units(style.spacing) * 1pt,
+      ..elmts
+    )
+  )
+  let anchor = if bottom {"north"} else {"base"}
+  draw.content(
+    (x, y),
+    shape,
+    anchor: anchor
+  )
+}
+
+#let get-size(par) = {
+  let name-m = normalize-measure(par.display-name)
+  let img-m = normalize-measure(par.resolved-style.image)
+  let spacing = normalize-units(par.resolved-style.spacing)
+
+  return (
+    width: calc.max(name-m.width, img-m.width),
+    height: name-m.height + spacing + img-m.height
+  )
+}
+
+#let default-style = (
+  image: none,
+  spacing: 5pt
+)

src/core/draw/participant/database.typ

@@ -0,0 +1,64 @@
+#import "/src/cetz.typ": draw
+
+#import "/src/core/utils.typ": normalize-measure, normalize-units
+
+#let name = "database"
+
+#let render(x, y, p, bottom) = {
+  let m = normalize-measure(p.display-name)
+  let style = p.resolved-style
+  let width = normalize-units(style.width)
+  let spacing = normalize-units(style.spacing)
+  let height = width * 4 / 3
+  let rx = width / 2
+  let ry = rx / 2
+  let y0 = if bottom {
+    y - m.height - spacing
+  } else {
+    y + m.height + height + spacing
+  }
+  let y1 = y0 - height
+
+  draw.merge-path(
+    close: true,
+    fill: style.fill,
+    stroke: style.stroke,
+    {
+      draw.bezier((x - rx, y0 - ry), (x, y0), (x - rx, y0 - ry/2), (x - rx/2, y0))
+      draw.bezier((), (x + rx, y0 - ry), (x + rx/2, y0), (x + rx, y0 - ry/2))
+      draw.line((), (x + rx, y1 + ry))
+      draw.bezier((), (x, y1), (x + rx, y1 + ry/2), (x + rx/2, y1))
+      draw.bezier((), (x - rx, y1 + ry), (x - rx/2, y1), (x - rx, y1 + ry/2))
+    }
+  )
+  draw.merge-path(
+    stroke: style.stroke,
+    {
+      draw.bezier((x - rx, y0 - ry), (x, y0 - ry*2), (x - rx, y0 - 3*ry/2), (x - rx/2, y0 - ry*2))
+      draw.bezier((), (x + rx, y0 - ry), (x + rx/2, y0 - ry*2), (x + rx, y0 - 3*ry/2))
+    }
+  )
+  draw.content(
+    (x, y),
+    p.display-name,
+    anchor: if bottom {"north"} else {"base"}
+  )
+}
+
+#let get-size(par) = {
+  let m = normalize-measure(par.display-name)
+
+  let width = normalize-units(par.resolved-style.width)
+  let height = width * 4 / 3
+  let spacing = normalize-units(par.resolved-style.spacing)
+
+  return (
+    width: calc.max(m.width, width),
+    height: height + spacing + m.height
+  )
+}
+
+#let default-style = (
+  width: 24pt,
+  spacing: 5pt
+)

src/core/draw/participant/default.typ

@@ -0,0 +1,37 @@
+#import "/src/cetz.typ": draw
+
+#import "/src/core/utils.typ": normalize-measure
+
+#let name = "participant"
+
+#let render(x, y, p, bottom) = {
+  let style = p.resolved-style
+  let name = box(
+    p.display-name,
+    inset: style.inset,
+    radius: style.radius,
+    fill: style.fill,
+    stroke: style.stroke
+  )
+  let anchor = if bottom {"north"} else {"base"}
+  draw.content(
+    (x, y),
+    name,
+    anchor: anchor
+  )
+}
+
+#let get-size(par) = {
+  return normalize-measure(box(
+    par.display-name,
+    inset: par.resolved-style.inset
+  ))
+}
+
+#let default-style = (
+  inset: (
+    x: 3pt,
+    y: 5pt
+  ),
+  radius: 2pt
+)

src/core/draw/participant/entity.typ

@@ -0,0 +1,55 @@
+#import "/src/cetz.typ": draw
+
+#import "/src/core/utils.typ": normalize-measure, normalize-units
+
+#let name = "entity"
+
+#let render(x, y, p, bottom) = {
+  let m = normalize-measure(p.display-name)
+  let style = p.resolved-style
+  let size = normalize-units(style.size)
+  let spacing = normalize-units(style.spacing)
+  let gap = normalize-units(style.gap)
+  let r = size / 2
+  let y0 = if bottom {
+    y - m.height - spacing
+  } else {
+    y + m.height + size + spacing
+  }
+  let y1 = y0 - size - gap
+
+  draw.circle(
+    (x, y0 - r),
+    radius: r,
+    fill: style.fill,
+    stroke: style.stroke
+  )
+  draw.line(
+    (x - r, y1),
+    (x + r, y1),
+    stroke: style.stroke
+  )
+  draw.content(
+    (x, y),
+    p.display-name,
+    anchor: if bottom {"north"} else {"base"}
+  )
+}
+
+#let get-size(par) = {
+  let m = normalize-measure(par.display-name)
+
+  let size = normalize-units(par.resolved-style.size)
+  let spacing = normalize-units(par.resolved-style.spacing)
+
+  return (
+    width: calc.max(m.width, size),
+    height: size + spacing + m.height
+  )
+}
+
+#let default-style = (
+  size: 20pt,
+  gap: 1.5pt,
+  spacing: 5pt
+)

src/core/draw/participant/queue.typ

@@ -0,0 +1,120 @@
+#import "/src/cetz.typ": draw
+
+#import "/src/core/utils.typ": normalize-measure
+
+#let name = "queue"
+
+#let render(x, y, p, bottom) = {
+  let style = p.resolved-style
+  let m = normalize-measure(box(
+    p.display-name,
+    inset: style.inset
+  ))
+  
+  let w = m.width
+  let h = m.height
+  let ry = h / 2
+  let rx = ry / 2
+  let total-w = w + 3 * rx
+
+  let y0 = if bottom {y} else {y + h}
+  let y1 = y0 - h
+  let ym = y0 - ry
+
+  let xll = x - total-w / 2
+  let xrr = x + total-w / 2
+  let xlm = xll + rx
+  let xrm = xrr - rx
+  let xrl = xrm - rx
+  
+  /*
+   /A----------/B\   --- y0
+   Fh          G C   --- ym
+   \E----------\D/   --- y1
+  
+   ||          |||
+   ||          ||\-- xrr
+   ||          |\--- xrm
+   ||          \---- xrl
+   |\--------------- xlm
+   \---------------- xll
+  
+  h <-> G == w
+  F <-> h == rx
+  G <-> C == 2 * rx == ry
+  A <-> E == B <-> D == 2 * ry == h
+  */
+
+  draw.merge-path(
+    close: true,
+    fill: style.fill,
+    stroke: style.stroke,
+    {
+      draw.bezier(
+        (xrm, y0),
+        (xrr, ym),
+        (xrm + rx/2, y0),
+        (xrr, ym + ry/2)
+      )
+      draw.bezier(
+        (),
+        (xrm, y1),
+        (xrr, ym - ry/2),
+        (xrm + rx/2, y1)
+      )
+      draw.line((), (xlm, y1))
+      draw.bezier(
+        (),
+        (xll, ym),
+        (xlm - rx/2, y1),
+        (xll, ym - ry/2)
+      )
+      draw.bezier(
+        (),
+        (xlm, y0),
+        (xll, ym + ry/2),
+        (xlm - rx/2, y0)
+      )
+    }
+  )
+  draw.merge-path(
+    stroke: style.stroke,
+    {
+      draw.bezier(
+        (xrm, y0),
+        (xrl, ym),
+        (xrm - rx/2, y0),
+        (xrl, ym + ry/2)
+      )
+      draw.bezier(
+        (),
+        (xrm, y1),
+        (xrl, ym - ry/2),
+        (xrm - rx/2, y1)
+      )
+    }
+  )
+  draw.content(
+    ((xlm + xrl) / 2, ym),
+    p.display-name,
+    anchor: "mid"
+  )
+}
+
+#let get-size(par) = {
+  let m = normalize-measure(box(
+    par.display-name,
+    inset: par.resolved-style.inset
+  ))
+
+  let rx = m.height / 4
+
+  return (
+    width: m.width + 3 * rx,
+    height: m.height
+  )
+}
+
+#let default-style = (
+  inset: (x: 3pt, y: 5pt)
+)

src/core/draw/separator.typ

@@ -0,0 +1,65 @@
+#import "/src/cetz.typ": draw, styles
+
+#import "/src/consts.typ": *
+#import "/src/core/utils.typ": get-ctx, normalize-units, set-y
+
+#let separator-default-style = (
+  inset: (
+    x: 3pt, y: 5pt
+  ),
+  fill: auto,
+  stroke: auto,
+  gap: 3pt,
+  outset: 20pt
+)
+
+#let render(sep) = get-ctx(ctx => {
+  let style = styles.resolve(
+    ctx.style,
+    merge: sep.style,
+    root: "separator",
+    base: separator-default-style
+  )
+  let gap = normalize-units(style.gap)
+  let outset = normalize-units(style.outset)
+
+  ctx.y -= ctx.style.y-space
+
+  let x0 = ctx.x-pos.first() - outset
+  let x1 = ctx.x-pos.last() + outset
+  let name = box(
+    sep.name,
+    inset: style.inset,
+    stroke: style.stroke,
+    fill: style.fill
+  )
+  let m = measure(name)
+  let w = m.width / 1pt
+  let h = m.height / 1pt
+  let cx = (x0 + x1) / 2
+  let xl = cx - w / 2
+  let xr = cx + w / 2
+
+  let y0 = ctx.y
+  let y2 = y0 - h
+  let y1 = (y0 + y2) / 2
+
+  let gap-y0 = y1 + gap / 2
+  let gap-y1 = gap-y0 - gap
+
+  draw.rect(
+    (x0, gap-y0),
+    (x1, gap-y1),
+    stroke: none,
+    fill: style.fill
+  )
+  draw.line((x0, gap-y0), (x1, gap-y0))
+  draw.line((x0, gap-y1), (x1, gap-y1))
+  draw.content(
+    (cx, y1),
+    name,
+    anchor: "mid"
+  )
+
+  set-y(y2)
+})

src/core/draw/sequence.typ

@@ -0,0 +1,370 @@
+#import "/src/cetz.typ": draw, vector
+
+#import "note.typ"
+#import "/src/consts.typ": *
+#import "/src/core/utils.typ": get-ctx, set-ctx
+
+#let get-arrow-marks(sym, color) = {
+  if sym == none {
+    return none
+  }
+  if type(sym) == array {
+    return sym.map(s => get-arrow-marks(s, color))
+  }
+  (
+    "": none,
+    ">": (symbol: ">", fill: color),
+    ">>": (symbol: "straight"),
+    "\\": (symbol: ">", fill: color, harpoon: true),
+    "\\\\": (symbol: "straight", harpoon: true),
+    "/": (symbol: ">", fill: color, harpoon: true, flip: true),
+    "//": (symbol: "straight", harpoon: true, flip: true),
+    "x": none,
+    "o": none,
+  ).at(sym)
+}
+
+#let reverse-arrow-mark(mark) = {
+  if type(mark) == array {
+    return mark.map(m => reverse-arrow-mark(m))
+  }
+  let mark2 = mark
+  if type(mark) == dictionary and mark.at("harpoon", default: false) {
+    let flipped = mark.at("flip", default: false)
+    mark2.insert("flip", not flipped)
+  }
+  return mark2
+}
+
+#let is-tip-of-type(type_, tip) = {
+  if type(tip) == str and tip == type_ {
+    return true
+  }
+  if type(tip) == array and tip.contains(type_) {
+    return true
+  }
+  return false
+}
+#let is-circle-tip = is-tip-of-type.with("o")
+#let is-cross-tip = is-tip-of-type.with("x")
+
+#let render(seq) = get-ctx(ctx => {
+  ctx.y -= ctx.style.y-space
+
+  let i1 = ctx.pars-i.at(seq.p1)
+  let i2 = ctx.pars-i.at(seq.p2)
+  let width = calc.abs(ctx.x-pos.at(i1) - ctx.x-pos.at(i2))
+
+  let h = 0
+  let comment = if seq.comment == none {none} else {
+    let w = calc.min(width * 1pt, measure(seq.comment).width)
+    box(
+      width: if i1 == i2 {auto} else {w},
+      seq.comment
+    )
+  }
+  // Reserve space for comment
+  if comment != none {
+    h = calc.max(h, measure(comment).height / 1pt + 6)
+  }
+  h = calc.max(
+    h,
+    ..seq.linked-notes.map(n => {
+      let nt = ctx.notes.at(n.id)
+      note.get-size(nt).height / 2
+    })
+  )
+  ctx.y -= h
+
+  let start-info = (
+    i: i1,
+    x: ctx.x-pos.at(i1),
+    y: ctx.y,
+    ll-lvl: ctx.lifelines.at(i1).level * LIFELINE-W / 2
+  )
+  let end-info = (
+    i: i2,
+    x: ctx.x-pos.at(i2),
+    y: ctx.y,
+    ll-lvl: ctx.lifelines.at(i2).level * LIFELINE-W / 2
+  )
+  let slant = if seq.slant == auto {
+    DEFAULT-SLANT
+  } else if seq.slant != none {
+    seq.slant
+  } else {
+    0
+  }
+  end-info.y -= slant
+  if seq.p1 == seq.p2 {
+    end-info.y -= 10
+  }
+
+  if seq.disable-src {
+    let src-line = ctx.lifelines.at(i1)
+    src-line.level -= 1
+    src-line.events.push((type: "disable", y: start-info.y))
+    ctx.lifelines.at(i1) = src-line
+  }
+  if seq.destroy-src {
+    let src-line = ctx.lifelines.at(i1)
+    src-line.events.push((type: "destroy", y: start-info.y))
+    ctx.lifelines.at(i1) = src-line
+  }
+  if seq.disable-dst {
+    let dst-line = ctx.lifelines.at(i2)
+    dst-line.level -= 1
+    dst-line.events.push((type: "disable", y: end-info.y))
+    ctx.lifelines.at(i2) = dst-line
+  }
+  if seq.destroy-dst {
+    let dst-line = ctx.lifelines.at(i2)
+    dst-line.events.push((type: "destroy", y: end-info.y))
+    ctx.lifelines.at(i2) = dst-line
+  }
+  if seq.enable-dst {
+    let dst-line = ctx.lifelines.at(i2)
+    dst-line.level += 1
+    ctx.lifelines.at(i2) = dst-line
+  }
+  if seq.create-dst {
+    let par = ctx.participants.at(i2)
+    let m = measure(box(par.display-name))
+    let f = if i1 > i2 {-1} else {1}
+    end-info.x -= (m.width + PAR-PAD.last() * 2) / 2pt * f
+    (par.draw)(par, y: end-info.y)
+  }
+
+  end-info.ll-lvl = ctx.lifelines.at(i2).level * LIFELINE-W / 2
+
+  // Compute left/right position at start/end
+  start-info.insert("lx", start-info.x)
+  if start-info.ll-lvl != 0 { start-info.lx -= LIFELINE-W / 2 }
+  end-info.insert("lx", end-info.x)
+  if end-info.ll-lvl != 0 { end-info.lx -= LIFELINE-W / 2 }
+
+  start-info.insert("rx", start-info.x + start-info.ll-lvl)
+  end-info.insert("rx", end-info.x + end-info.ll-lvl)
+
+  // Choose correct points to link
+  let x1 = start-info.rx
+  let x2 = end-info.lx
+
+  if (start-info.i > end-info.i) {
+    x1 = start-info.lx
+    x2 = end-info.rx
+  }
+
+  let style = (
+    mark: (
+      start: get-arrow-marks(seq.start-tip, seq.color),
+      end: get-arrow-marks(seq.end-tip, seq.color),
+      scale: 1.2
+    ),
+    stroke: (
+      dash: if seq.dashed {(2pt,2pt)} else {"solid"},
+      paint: seq.color,
+      thickness: .5pt
+    )
+  )
+
+  let y0 = start-info.y
+  for n in seq.linked-notes {
+    (n.draw)(n, y: start-info.y, forced: true)
+  }
+
+  let flip-mark = end-info.i <= start-info.i
+  if seq.flip {
+    flip-mark = not flip-mark
+  }
+  if flip-mark {
+    style.mark.end = reverse-arrow-mark(style.mark.end)
+  }
+
+  let pts
+  let comment-pt
+  let comment-anchor
+  let comment-angle = 0deg
+
+  if seq.p1 == seq.p2 {
+    if seq.flip {
+      x1 = start-info.lx
+    } else {
+      x2 = end-info.rx
+    }
+
+    let x-mid = if seq.flip {
+      calc.min(x1, x2) - 20
+    } else {
+      calc.max(x1, x2) + 20
+    }
+
+    pts = (
+      (x1, start-info.y),
+      (x-mid, start-info.y),
+      (x-mid, end-info.y),
+      (x2, end-info.y)
+    )
+
+    if comment != none {
+      comment-anchor = (
+        start: if x-mid < x1 {"south-east"} else {"south-west"},
+        end: if x-mid < x1 {"south-west"} else {"south-east"},
+        left: "south-west",
+        right: "south-east",
+        center: "south",
+      ).at(seq.comment-align)
+
+      comment-pt = (
+        start: pts.first(),
+        end: pts.at(1),
+        left: if x-mid < x1 {pts.at(1)} else {pts.first()},
+        right: if x-mid < x1 {pts.first()} else {pts.at(1)},
+        center: (pts.first(), 50%, pts.at(1))
+      ).at(seq.comment-align)
+    }
+
+  } else {
+    pts = (
+      (x1, start-info.y),
+      (x2, end-info.y)
+    )
+
+    if comment != none {
+      let start-pt = pts.first()
+      let end-pt = pts.last()
+      if seq.start-tip != "" {
+        start-pt = (pts.first(), COMMENT-PAD, pts.last())
+      }
+      if seq.end-tip != "" {
+        end-pt = (pts.last(), COMMENT-PAD, pts.first())
+      }
+
+      comment-pt = (
+        start: start-pt,
+        end: end-pt,
+        left: if x2 < x1 {end-pt} else {start-pt},
+        right: if x2 < x1 {start-pt} else {end-pt},
+        center: (start-pt, 50%, end-pt)
+      ).at(seq.comment-align)
+
+      comment-anchor = (
+        start: if x2 < x1 {"south-east"} else {"south-west"},
+        end: if x2 < x1 {"south-west"} else {"south-east"},
+        left: "south-west",
+        right: "south-east",
+        center: "south",
+      ).at(seq.comment-align)
+    }
+
+    let (p1, p2) = pts
+    if x2 < x1 {
+      (p1, p2) = (p2, p1)
+    }
+    comment-angle = vector.angle2(p1, p2)
+  }
+
+  // Start circle tip
+  if is-circle-tip(seq.start-tip) {
+    draw.circle(
+      pts.first(),
+      radius: CIRCLE-TIP-RADIUS,
+      stroke: none,
+      fill: seq.color,
+      name: "_circle-start-tip"
+    )
+    pts.at(0) = "_circle-start-tip"
+  
+  // Start cross tip
+  } else if is-cross-tip(seq.start-tip) {
+    let size = CROSS-TIP-SIZE
+    let cross-pt = (
+      pts.first(),
+      size * 2,
+      pts.at(1)
+    )
+    draw.line(
+      (rel: (-size, -size), to: cross-pt),
+      (rel: (size, size), to: cross-pt),
+      stroke: seq.color + 1.5pt
+    )
+    draw.line(
+      (rel: (-size, size), to: cross-pt),
+      (rel: (size, -size), to: cross-pt),
+      stroke: seq.color + 1.5pt
+    )
+    pts.at(0) = cross-pt
+  }
+
+  // End circle tip
+  if is-circle-tip(seq.end-tip) {
+    draw.circle(
+      pts.last(),
+      radius: 3,
+      stroke: none,
+      fill: seq.color,
+      name: "_circle-end-tip"
+    )
+    pts.at(pts.len() - 1) = "_circle-end-tip"
+  
+  // End cross tip
+  } else if is-cross-tip(seq.end-tip) {
+    let size = CROSS-TIP-SIZE
+    let cross-pt = (
+      pts.last(),
+      size * 2,
+      pts.at(pts.len() - 2)
+    )
+    draw.line(
+      (rel: (-size, -size), to: cross-pt),
+      (rel: (size, size), to: cross-pt),
+      stroke: seq.color + 1.5pt
+    )
+    draw.line(
+      (rel: (-size, size), to: cross-pt),
+      (rel: (size, -size), to: cross-pt),
+      stroke: seq.color + 1.5pt
+    )
+    pts.at(pts.len() - 1) = cross-pt
+  }
+
+  draw.line(..pts, ..style)
+
+  if comment != none {
+    draw.content(
+      comment-pt,
+      comment,
+      anchor: comment-anchor,
+      angle: comment-angle,
+      padding: 3pt
+    )
+  }
+
+  if seq.create-dst {
+    let dst-line = ctx.lifelines.at(i2)
+    dst-line.events.push((type: "create", y: end-info.y))
+    ctx.lifelines.at(i2) = dst-line
+  }
+  if seq.enable-dst {
+    let dst-line = ctx.lifelines.at(i2)
+    dst-line.events.push((type: "enable", y: end-info.y, style: seq.lifeline-style))
+    ctx.lifelines.at(i2) = dst-line
+  }
+
+  if seq.linked-notes.len() != 0 {
+    end-info.y = calc.min(
+      end-info.y,
+      y0 - calc.max(..seq.linked-notes.map(n => {
+        let nt = ctx.notes.at(n.id)
+        let m = note.get-size(nt)
+        return m.height / 2
+      }))
+    )
+  }
+
+  set-ctx(c => {
+    c.y = end-info.y
+    c.lifelines = ctx.lifelines
+    return c
+  })
+})

src/core/draw/sync.typ

@@ -0,0 +1,32 @@
+#import "/src/core/utils.typ": get-ctx, is-elmt, set-ctx
+
+#let render(sync) = get-ctx(ctx => {
+  set-ctx(c => {
+    c.sync-ys = ()
+    return c
+  })
+
+  for e in sync.elmts {
+    assert(is-elmt(e), message: "Sync element can only contain chronos elements, found " + repr(e))
+    assert(
+      e.type == "seq",
+      message: "Sync element can only contain sequences, found '" + e.type + "'"
+    )
+
+    set-ctx(c => {
+      c.y = ctx.y
+      return c
+    })
+    (e.draw)(e)
+    set-ctx(c => {
+      c.sync-ys.push(c.y)
+      return c
+    })
+  }
+
+  set-ctx(c => {
+    c.y = calc.min(..c.sync-ys)
+    c.remove("sync-ys")
+    return c
+  })
+})

src/core/renderer.typ

@@ -0,0 +1,439 @@
+#import "/src/cetz.typ": canvas, draw
+
+#import "draw/note.typ"
+#import "draw/participant.typ"
+#import "utils.typ": *
+#import "/src/consts.typ": *
+
+#let DEBUG-INVISIBLE = false
+
+#let init-lifelines() = set-ctx(ctx => {
+  ctx.setup.participants = ctx.setup.participants.map(p => {
+    p.insert("lifeline-lvl", 0)
+    p.insert("max-lifelines", 0)
+    p
+  })
+  return ctx
+})
+
+#let set-participants-i() = set-ctx(ctx => {
+  ctx.setup.insert(
+    "pars-i",
+    get-participants-i(ctx.setup.participants)
+  )
+  return ctx
+})
+
+#let unwrap-syncs(elements) = {
+  let i = 0
+  while i < elements.len() {
+    let elmt = elements.at(i)
+    if elmt.type == "sync" {
+      elements = (
+        elements.slice(0, i + 1) +
+        elmt.elmts +
+        elements.slice(i + 1)
+      )
+    }
+    i += 1
+  }
+  return elements
+}
+
+#let seq-update-lifelines(participants, pars-i, seq) = {
+  let participants = participants
+  let com = if seq.comment == none {""} else {seq.comment}
+  let i1 = pars-i.at(seq.p1)
+  let i2 = pars-i.at(seq.p2)
+  let cell = (
+    elmt: seq,
+    i1: calc.min(i1, i2),
+    i2: calc.max(i1, i2),
+    cell: box(com, inset: 3pt)
+  )
+
+  if seq.disable-src or seq.destroy-src {
+    let p = participants.at(i1)
+    p.lifeline-lvl -= 1
+    participants.at(i1) = p
+  }
+  if seq.disable-dst {
+    let p = participants.at(i2)
+    p.lifeline-lvl -= 1
+    participants.at(i2) = p
+  }
+  if seq.enable-dst {
+    let p = participants.at(i2)
+    p.lifeline-lvl += 1
+    p.max-lifelines = calc.max(p.max-lifelines, p.lifeline-lvl)
+    participants.at(i2) = p
+  }
+
+  return (participants, cell)
+}
+
+#let evt-update-lifelines(participants, pars-i, evt) = {
+  let par-name = evt.participant
+  let i = pars-i.at(par-name)
+  let par = participants.at(i)
+  if evt.event == "disable" or evt.event == "destroy" {
+    par.lifeline-lvl -= 1
+  
+  } else if evt.event == "enable" {
+    par.lifeline-lvl += 1
+    par.max-lifelines = calc.max(par.max-lifelines, par.lifeline-lvl)
+  }
+  participants.at(i) = par
+  return participants
+}
+
+#let note-get-cell(notes, pars-i, n) = {
+  let (p1, p2) = (none, none)
+  let cell = none
+  if n.side == "left" {
+    p1 = n.pos2
+    p2 = n.pos
+    cell = note.get-box(n)
+  } else if n.side == "right" {
+    p1 = n.pos
+    p2 = n.pos2
+    cell = note.get-box(n)
+  } else if n.side == "over" and n.aligned-with != none {
+    let aligned-with = notes.at(n.aligned-with.id)
+    let box1 = note.get-box(n)
+    let box2 = note.get-box(aligned-with)
+    let m1 = measure(box1)
+    let m2 = measure(box2)
+    cell = box(
+      width: (m1.width + m2.width) / 2,
+      height: calc.max(m1.height, m2.height)
+    )
+    p1 = n.pos
+    p2 = n.aligned-with.pos
+  } else {
+    return none
+  }
+
+  let i1 = pars-i.at(p1)
+  let i2 = pars-i.at(p2)
+  cell = (
+    elmt: n,
+    i1: calc.min(i1, i2),
+    i2: calc.max(i1, i2),
+    cell: cell
+  )
+
+  return cell
+}
+
+#let compute-max-lifeline-levels(participants, elements, notes, pars-i) = {
+  let cells = ()
+  for elmt in elements {
+    if elmt.type == "seq" {
+      let cell
+      (participants, cell) = seq-update-lifelines(
+        participants,
+        pars-i,
+        elmt
+      )
+      cells.push(cell)
+    } else if elmt.type == "evt" {
+      participants = evt-update-lifelines(
+        participants,
+        pars-i,
+        elmt
+      )
+    
+    } else if elmt.type == "note" {
+      let cell = note-get-cell(notes, pars-i, notes.at(elmt.id))
+      if cell != none {
+        cells.push(cell)
+      }
+    }
+  }
+
+  return (participants, cells)
+}
+
+/// Compute minimum widths for participant names and shapes
+#let participants-min-col-widths(participants) = {
+  let widths = ()
+  for i in range(participants.len() - 1) {
+    let p1 = participants.at(i)
+    let p2 = participants.at(i + 1)
+    let m1 = participant.get-size(p1)
+    let m2 = participant.get-size(p2)
+    let w1 = m1.width
+    let w2 = m2.width
+    widths.push(w1 / 2 + w2 / 2 + PAR-SPACE)
+  }
+  return widths
+}
+
+/// Compute minimum width for over notes
+#let notes-min-col-widths(notes, widths, pars-i) = {
+  let widths = widths
+  for n in notes.filter(e => (e.side == "over" and 
+                              type(e.pos) == str)) {
+    
+    let m = note.get-size(n)
+    let i = pars-i.at(n.pos)
+
+    if i < widths.len() {
+      widths.at(i) = calc.max(
+        widths.at(i),
+        m.width / 2 + NOTE-GAP
+      )
+    }
+    if i > 0 {
+      widths.at(i - 1) = calc.max(
+        widths.at(i - 1),
+        m.width / 2 + NOTE-GAP
+      )
+    }
+  }
+  return widths
+}
+
+/// Compute minimum width for simple sequences (spanning 1 column)
+#let simple-seq-min-col-widths(cells, widths) = {
+  let widths = widths
+  for cell in cells.filter(c => c.i2 - c.i1 == 1) {
+    let m = measure(cell.cell)
+    widths.at(cell.i1) = calc.max(
+      widths.at(cell.i1),
+      m.width / 1pt + COMMENT-PAD
+    )
+  }
+  return widths
+}
+
+/// Compute minimum width for self sequences
+#let self-seq-min-col-widths(cells, widths) = {
+  let widths = widths
+  for cell in cells.filter(c => (c.elmt.type == "seq" and
+                                 c.i1 == c.i2)) {
+    let m = measure(cell.cell)
+    let i = cell.i1
+    if cell.elmt.flip {
+      i -= 1
+    }
+    if 0 <= i and i < widths.len() {
+      widths.at(i) = calc.max(
+        widths.at(i),
+        m.width / 1pt + COMMENT-PAD
+      )
+    }
+  }
+  return widths
+}
+
+/// Compute remaining widths for longer sequences (spanning multiple columns)
+#let long-seq-min-col-widths(participants, cells, widths) = {
+  let widths = widths
+  let multicol-cells = cells.filter(c => c.i2 - c.i1 > 1)
+  multicol-cells = multicol-cells.sorted(key: c => {
+    c.i1 * 1000 + c.i2
+  })
+  for cell in multicol-cells {
+    let m = measure(cell.cell)
+
+    let i1 = cell.i1
+    let i2 = cell.i2 - 1
+    let i = i2
+    if cell.i1 == 0 and participants.at(0).name == "[" {
+      i = 0
+      i1 += 1
+      i2 += 1
+    }
+    let width = (
+      m.width / 1pt +
+      COMMENT-PAD -
+      widths.slice(i1, i2).sum()
+    )
+    
+    widths.at(i) = calc.max(
+      widths.at(i), width
+    )
+  }
+  return widths
+}
+
+/// Add lifeline widths
+#let col-widths-add-lifelines(participants, widths) = {
+  return widths.enumerate().map(((i, w)) => {
+    let p1 = participants.at(i)
+    let p2 = participants.at(i + 1)
+    w += p1.max-lifelines * LIFELINE-W / 2
+    if p2.max-lifelines != 0 {
+      w += LIFELINE-W / 2
+    }
+    return w
+  })
+}
+
+#let process-col-elements(elements, widths, pars-i) = {
+  let widths = widths
+  let cols = elements.filter(e => e.type == "col")
+  for col in cols {
+    let i1 = pars-i.at(col.p1)
+    let i2 = pars-i.at(col.p2)
+    if calc.abs(i1 - i2) != 1 {
+      let i-min = calc.min(i1, i2)
+      let i-max = calc.max(i1, i2)
+      let others = pars-i.pairs()
+                         .sorted(key: p => p.last())
+                         .slice(i-min + 1, i-max)
+                         .map(p => "'" + p.first() + "'")
+                         .join(", ")
+      panic(
+        "Column participants must be consecutive (participants (" +
+        others +
+        ") are in between)"
+      )
+    }
+    let i = calc.min(i1, i2)
+
+    let width = widths.at(i)
+
+    if col.width != auto {
+      width = normalize-units(col.width)
+    }
+
+    width = calc.max(
+      width,
+      normalize-units(col.min-width)
+    )
+    if col.max-width != none {
+      width = calc.min(
+        width,
+        normalize-units(col.max-width)
+      )
+    }
+    widths.at(i) = width + normalize-units(col.margin)
+  }
+  return widths
+}
+
+#let compute-columns-width() = set-ctx(ctx => {
+  let elements = ctx.setup.elements.filter(is-elmt)
+  let participants = ctx.setup.participants
+  let notes = ctx.setup.notes
+  let pars-i = ctx.setup.pars-i
+  elements = unwrap-syncs(elements)
+
+  let cells
+  (participants, cells) = compute-max-lifeline-levels(participants, elements, notes, pars-i)
+
+  let widths = participants-min-col-widths(participants)
+  widths = notes-min-col-widths(notes, widths, pars-i)
+  widths = simple-seq-min-col-widths(cells, widths)
+  widths = self-seq-min-col-widths(cells, widths)
+  widths = long-seq-min-col-widths(participants, cells, widths)
+  widths = col-widths-add-lifelines(participants, widths)
+  widths = process-col-elements(elements, widths, pars-i)
+
+  let ctx = ctx
+  ctx.insert("widths", widths)
+
+  let x-pos = (0,)
+  for width in widths {
+    x-pos.push(x-pos.last() + width)
+  }
+  ctx.insert("x-pos", x-pos)
+
+  return ctx
+})
+
+#let setup-ctx(participants, elements, notes) = draw.get-ctx(_ => {
+  set-ctx(c => {
+    c.insert("participants", participants)
+    c.insert("setup", (
+      elements: elements,
+      participants: participants,
+      notes: notes
+    ))
+    return c
+  })
+
+  participant.pre-resolve-styles()
+
+  init-lifelines()
+  set-participants-i()
+  
+  note.pre-resolve-styles()
+  compute-columns-width()
+
+  set-ctx(c => {
+    let setup = c.setup
+    c += (
+      participants: setup.participants,
+      pars-i: setup.pars-i,
+      y: 0,
+      groups: (),
+      lifelines: setup.participants.map(_ => (
+        level: 0,
+        events: ()
+      )),
+      notes: setup.notes
+    )
+    c.remove("setup")
+    return c
+  })
+},)
+
+#let render-debug() = get-ctx(ctx => {
+  for p in ctx.participants.filter(p => p.invisible) {
+    let color = if p.name.starts-with("?") {green} else if p.name.ends-with("?") {red} else {blue}
+    let x = ctx.x-pos.at(p.i)
+    draw.line(
+      (x, 0),
+      (x, ctx.y),
+      stroke: (paint: color, dash: "dotted")
+    )
+    draw.content(
+      (x, 0),
+      p.display-name,
+      anchor: "west",
+      angle: 90deg
+    )
+  }
+})
+
+#let render(participants, elements, notes) = context canvas(length: 1pt, {
+  setup-ctx(participants, elements, notes)
+
+  // Draw participants (start)
+  get-ctx(ctx => {
+    for p in ctx.participants {
+      let style = p.resolved-style
+      if style.from-start and not p.invisible and style.show-top {
+        (p.draw)(p)
+      }
+    }
+  })
+
+  // Draw elements
+  for elmt in elements {
+    if not is-elmt(elmt) {
+      (elmt,)
+    } else if "draw" in elmt and elmt.type != "par" {
+      (elmt.draw)(elmt)
+    }
+  }
+
+  get-ctx(ctx => {
+    set-ctx(c => {
+      c.y -= ctx.style.y-space
+      return c
+    })
+  })
+
+  draw.on-layer(-1, {
+    if DEBUG-INVISIBLE {
+      render-debug()
+    }
+    
+    participant.render-lifelines()
+  })
+})

src/core/setup.typ

@@ -0,0 +1,338 @@
+#import "draw/group.typ": render-end as grp-render-end
+#import "utils.typ": get-group-span, is-elmt
+#import "/src/participant.typ": _exists as par-exists, _par
+#import "/src/sequence.typ": _seq
+
+#let flatten-group(elmts, i) = {
+  let group = elmts.at(i)
+  elmts.at(i) = group
+  return (
+    elmts.slice(0, i + 1) +
+    group.elmts +
+    ((
+      type: "grp-end",
+      draw: grp-render-end,
+      start-i: i
+    ),) +
+    elmts.slice(i+1)
+  )
+}
+
+#let update-group-children(elmts, i) = {
+  let elmts = elmts
+  let group-end = elmts.at(i)
+  
+  elmts.at(group-end.start-i).elmts = elmts.slice(group-end.start-i + 1, i)
+  return elmts
+}
+
+#let convert-return(elmts, i, activation-history) = {
+  if activation-history.len() == 0 {
+    panic("Cannot return if no lifeline is activated")
+  }
+  let elmts = elmts
+  let activation-history = activation-history
+  let ret = elmts.at(i)
+  let seq = activation-history.pop()
+  elmts.at(i) = _seq(
+    seq.p2, seq.p1,
+    comment: ret.comment,
+    disable-src: true,
+    dashed: true
+  ).first()
+  return (elmts, activation-history)
+}
+
+#let unwrap-containers(elmts) = {
+  let elmts = elmts
+  let i = 0
+  let activation-history = ()
+
+  // Flatten groups + convert returns
+  while i < elmts.len() {
+    let elmt = elmts.at(i)
+    if not is-elmt(elmt) {
+      i += 1
+      continue
+    }
+
+    if elmt.type == "grp" {
+      elmts = flatten-group(elmts, i)
+
+    } else if elmt.type == "seq" {
+      if elmt.enable-dst {
+        activation-history.push(elmt)
+      }
+    
+    } else if elmt.type == "evt" {
+      if elmt.event == "enable" {
+        for elmt2 in elmts.slice(0, i).rev() {
+          if elmt2.type == "seq" {
+            activation-history.push(elmt2)
+            break
+          }
+        }
+      }
+    
+    } else if elmt.type == "ret" {
+      (elmts, activation-history) = convert-return(elmts, i, activation-history)
+    }
+    i += 1
+  }
+
+  return (elmts, activation-history)
+}
+
+
+#let prepare-seq-participants(ctx, seq) = {
+  let ctx = ctx
+  if not par-exists(ctx.participants, seq.p1) {
+    ctx.participants.push(_par(seq.p1).first())
+  }
+  if not par-exists(ctx.participants, seq.p2) {
+    ctx.participants.push(_par(
+      seq.p2,
+      from-start: not seq.create-dst
+    ).first())
+  
+  } else if seq.create-dst {
+    let i = ctx.participants.position(p => p.name == seq.p2)
+    ctx.participants.at(i).from-start = false
+  }
+
+  let p1 = seq.p1
+  let p2 = seq.p2
+  if seq.p1 == "?" {
+    p1 = "?" + seq.p2
+  }
+  if seq.p2 == "?" {
+    p2 = seq.p1 + "?"
+  }
+  ctx.linked.push(p1)
+  ctx.linked.push(p2)
+  ctx.last-seq = (
+    seq: seq,
+    i: ctx.i,
+    p1: p1,
+    p2: p2
+  )
+  return ctx
+}
+
+#let prepare-note-participants(ctx, note) = {
+  let ctx = ctx
+  let note = note
+  note.insert(
+    "linked",
+    note.pos == none and note.side != "across"
+  )
+  note.insert("id", ctx.notes.len())
+  let names = ctx.participants.map(p => p.name)
+  if note.pos == none and note.side != "across" {
+    let i1 = names.position(n => n == ctx.last-seq.p1)
+    let i2 = names.position(n => n == ctx.last-seq.p2)
+    let pars = (
+      (i1, ctx.last-seq.p1),
+      (i2, ctx.last-seq.p2)
+    ).sorted(key: p => p.first())
+
+    if note.side == "left" {
+      note.pos = pars.first().last()
+    } else if note.side == "right" {
+      note.pos = pars.last().last()
+    }
+
+    let seq = ctx.elmts.at(ctx.last-seq.i)
+    seq.linked-notes.push(note)
+    ctx.elmts.at(ctx.last-seq.i) = seq
+  }
+  if note.aligned {
+    let n = ctx.last-note.note
+    n.aligned-with = note
+    ctx.elmts.at(ctx.last-note.i) = n
+    ctx.notes.at(ctx.last-note.note.id) = n
+  }
+
+  if note.side in ("left", "right") {
+    let i = names.position(n => n == note.pos)
+    let pos2 = note.pos
+    if note.side == "left" {
+      if i <= 0 or note.allow-overlap {
+        ctx.linked.push("[")
+        pos2 = "["
+      } else {
+        pos2 = names.at(i - 1)
+      }
+    } else if note.side == "right" {
+      if i >= names.len() - 1 or note.allow-overlap {
+        ctx.linked.push("]")
+        pos2 = "]"
+      } else {
+        pos2 = names.at(i + 1)
+      }
+    }
+    note.insert("pos2", pos2)
+  }
+
+  let pars = none
+  if type(note.pos) == str {
+    pars = (note.pos,)
+  } else if type(note.pos) == array {
+    pars = note.pos
+  }
+  if pars != none {
+    for par in pars {
+      if not par-exists(ctx.participants, par) {
+        participants.push(_par(par).first())
+      }
+    }
+  }
+
+  ctx.notes.push(note)
+
+  ctx.elmts.at(ctx.i) = note
+
+  ctx.last-note = (
+    note: note,
+    i: ctx.i
+  )
+
+  return ctx
+}
+
+#let prepare-evt-participants(ctx, evt) = {
+  let par = evt.participant
+  if not par-exists(ctx.participants, par) {
+    let p = _par(
+      par,
+      from-start: evt.event != "create"
+    ).first()
+    ctx.participants.push(p)
+  
+  } else if evt.event == "create" {
+    let i = ctx.participants.position(p => p.name == par)
+    ctx.participants.at(i).from-start = false
+  }
+  return ctx
+}
+
+#let normalize-special-participants(elmt) = {
+  if elmt.p1 == "?" {
+    elmt.p1 = "?" + elmt.p2
+  } else if elmt.p2 == "?" {
+    elmt.p2 = elmt.p1 + "?"
+  }
+  return elmt
+}
+
+#let prepare-participants(elmts) = {
+  let ctx = (
+    linked: (),
+    last-seq: none,
+    last-note: none,
+    notes: (),
+    participants: (),
+    elmts: elmts,
+    i: 0
+  )
+
+  for (i, elmt) in ctx.elmts.enumerate() {
+    ctx.i = i
+    if not is-elmt(elmt) {
+      continue
+    }
+
+    if elmt.type == "par" {
+      ctx.participants.push(elmt)
+
+    } else if elmt.type == "seq" {
+      ctx = prepare-seq-participants(ctx, elmt)
+    
+    } else if elmt.type == "note" {
+      ctx = prepare-note-participants(ctx, elmt)
+    
+    } else if elmt.type == "evt" {
+      ctx = prepare-evt-participants(ctx, elmt)
+    }
+  }
+  ctx.linked = ctx.linked.dedup()
+
+  let pars = ctx.participants
+  let participants = ()
+  
+  if "[" in ctx.linked {
+    participants.push(_par("[", invisible: true).first())
+  }
+  
+  for (i, p) in pars.enumerate() {
+    let before = _par(
+      "?" + p.name,
+      invisible: true
+    ).first()
+    let after = _par(
+      p.name + "?",
+      invisible: true
+    ).first()
+    
+    if before.name in ctx.linked {
+      if participants.len() == 0 or not participants.last().name.ends-with("?") {
+        participants.push(before)
+      } else {
+        participants.insert(-1, before)
+      }
+    }
+
+    participants.push(p)
+
+    if after.name in ctx.linked {
+      participants.push(after)
+    }
+  }
+  if "]" in ctx.linked {
+    participants.push(_par(
+      "]",
+      invisible: true
+    ).first())
+  }
+
+  return (ctx.elmts, participants, ctx.notes)
+}
+
+#let finalize-setup(elmts, participants, notes) = {
+  for (i, p) in participants.enumerate() {
+    p.insert("i", i)
+    participants.at(i) = p
+  }
+
+  let containers = ()
+
+  for (i, elmt) in elmts.enumerate() {
+    if not is-elmt(elmt) {
+      continue
+    }
+    if elmt.type == "seq" {
+      elmts.at(i) = normalize-special-participants(elmt)
+    } else if elmt.type == "grp-end" {
+      // Put back elements in group because they might have changed
+      elmts = update-group-children(elmts, i)
+    } else if elmt.type in ("grp", "alt") {
+      containers.push(i)
+    }
+  }
+
+  // Compute groups spans (horizontal)
+  for i in containers {
+    let elmt = elmts.at(i)
+    let (min-i, max-i) = get-group-span(participants, elmt)
+    elmts.at(i).insert("min-i", min-i)
+    elmts.at(i).insert("max-i", max-i)
+  }
+
+  return (elmts, participants, notes)
+}
+
+#let setup(elements) = {
+  let (elmts, activation-history) = unwrap-containers(elements)
+  let (elmts, participants, notes) = prepare-participants(elmts)
+  return finalize-setup(elmts, participants, notes)
+}

src/core/utils.typ

@@ -0,0 +1,153 @@
+#import "/src/cetz.typ": draw, styles
+
+#import "/src/consts.typ": default-style
+
+#let is-elmt(elmt) = {
+  if type(elmt) != dictionary {
+    return false
+  }
+  if "type" not in elmt {
+    return false
+  }
+  return true
+}
+
+#let normalize-units(value) = {
+  if type(value) == int or type(value) == float {
+    return value
+  }
+  if type(value) == length {
+    return value / 1pt
+  }
+  panic("Unsupported type '" + str(type(value)) + "'")
+}
+
+#let normalize-measure(body) = {
+  let m = measure(body)
+  return (
+    width: normalize-units(m.width),
+    height: normalize-units(m.height)
+  )
+}
+
+#let get-participants-i(participants) = {
+  let pars-i = (:)
+  for (i, p) in participants.enumerate() {
+    pars-i.insert(p.name, i)
+  }
+  return pars-i
+}
+
+#let get-group-span(participants, group) = {
+  let min-i = participants.len() - 1
+  let max-i = 0
+  let pars-i = get-participants-i(participants)
+
+  for elmt in group.elmts {
+    if not is-elmt(elmt) {
+      continue
+    }
+    if elmt.type == "seq" {
+      let i1 = pars-i.at(elmt.p1)
+      let i2 = pars-i.at(elmt.p2)
+      min-i = calc.min(min-i, i1, i2)
+      max-i = calc.max(max-i, i1, i2)
+    } else if elmt.type == "grp" {
+      let (i0, i1) = get-group-span(participants, elmt)
+      min-i = calc.min(min-i, i0)
+      max-i = calc.max(max-i, i1)
+    } else if elmt.type == "sync" {
+      let (i0, i1) = get-group-span(participants, elmt)
+      min-i = calc.min(min-i, i0)
+      max-i = calc.max(max-i, i1)
+    }
+  }
+  if max-i < min-i {
+    (min-i, max-i) = (max-i, min-i)
+  }
+  return (min-i, max-i)
+}
+
+#let get-style(base-name, mods) = {
+  let style = if base-name == "lifeline" {(
+    fill: white,
+    stroke: black + 1pt
+  )}
+
+  if mods == auto {
+    return style
+  }
+  if type(mods) == dictionary {
+    return style + mods
+  }
+
+  panic("Invalid type for parameter mods, expected auto or dictionary, got " + str(type(mods)))
+}
+
+#let fit-canvas(canvas, width: auto) = layout(size => {
+  let m = measure(canvas)
+  let w = m.width
+  let h = m.height
+  let r = if w == 0pt {0} else {
+    if width == auto {1}
+    else if type(width) == length {
+      width / w
+    } else {
+      size.width * width / w
+    }
+  }
+  let new-w = w * r
+  let new-h = h * r
+  r *= 100%
+  
+  box(
+    width: new-w,
+    height: new-h,
+    scale(x: r, y: r, reflow: true, canvas)
+  )
+})
+
+#let extract-ctx(cetz-ctx, with-style: false) = {
+  let state = cetz-ctx.at("shared-state", default: (:))
+  let ctx = state.at("chronos", default: (:))
+  if with-style {
+    ctx.style = styles.resolve(
+      cetz-ctx.style,
+      root: "chronos",
+      base: default-style
+    )
+    // Normalize because it is used very frequently
+    ctx.style.y-space = normalize-units(ctx.style.y-space)
+  }
+  return ctx
+}
+
+#let set-ctx(func) = draw.set-ctx(c => {
+  let ctx = extract-ctx(c)
+  let new-ctx = func(ctx)
+  assert(new-ctx != none, message: "set-ctx must return a context!")
+  let state = c.at("shared-state", default: (:))
+  state.chronos = new-ctx
+  c.shared-state = state
+  return c
+})
+
+#let get-ctx(func) = draw.get-ctx(c => {
+  let ctx = extract-ctx(c, with-style: true)
+  func(ctx)
+})
+
+#let set-y(new-y) = set-ctx(c => {
+  c.y = new-y
+  return c
+})
+
+#let expand-parent-group(x0, x1) = set-ctx(ctx => {
+  if ctx.groups.len() != 0 {
+    let group = ctx.groups.last()
+    group.min-x = calc.min(group.min-x, x0)
+    group.max-x = calc.max(group.max-x, x1)
+    ctx.groups.last() = group
+  }
+  return ctx
+})

src/diagram.typ

@@ -1,101 +1,16 @@
-#import "utils.typ": get-group-span
+#import "core/renderer.typ": render
-#import "renderer.typ": render
+#import "core/setup.typ": setup
+#import "core/utils.typ": fit-canvas
 
-#let _seq(
+#let diagram(elements, width: auto) = {
-  p1,
+  if elements == none {
-  p2,
+    return
-  comment: none,
-  dashed: false,
-  tip: "default",
-  color: black
-) = {
-  return ((
-    type: "seq",
-    p1: p1,
-    p2: p2,
-    comment: comment,
-    dashed: dashed,
-    tip: tip,
-    color: color,
-  ),)
-}
-
-#let _par(name, display-name: auto, start-at: 0) = {
-  return ((
-    type: "par",
-    name: name,
-    display-name: if display-name == auto {name} else {display-name},
-    start-at: start-at
-  ),)
-}
-
-#let _par-exists(participants, name) = {
-  for p in participants {
-    if name == p.name {
-      return true
-    }
-  }
-  return false
-}
-
-#let _grp(name, desc: none, type: "default", elmts) = {
-  return ((
-    type: "grp",
-    name: name,
-    desc: desc,
-    grp-type: type,
-    elmts: elmts
-  ),)
-}
-
-#let _sep(name) = {
-  return ((
-    type: "sep",
-    name: name
-  ),)
-}
-
-#let diagram(elements) = {
-  let participants = ()
-  let elmts = elements
-  let i = 0
-  while i < elmts.len() {
-    let elmt = elmts.at(i)
-    if elmt.type == "grp" {
-      elmts = (
-        elmts.slice(0, i + 1) +
-        elmt.elmts +
-        ((
-          type: "grp-end"
-        ),) +
-        elmts.slice(i+1)
-      )
-    }
-    i += 1
   }
   
-  for elmt in elmts {
+  let (elmts, participants, notes) = setup(elements)
-    if elmt.type == "par" {
-      participants.push(elmt)
-    } else if elmt.type == "seq" {
-      if not _par-exists(participants, elmt.p1) {
-        participants.push(_par(elmt.p1).first())
-      }
-      if not _par-exists(participants, elmt.p2) {
-        participants.push(_par(elmt.p2).first())
-      }
-    }
-  }
 
-  for (i, elmt) in elmts.enumerate() {
+  let canvas = render(participants, elmts, notes)
-    if elmt.type == "grp" {
+  fit-canvas(canvas, width: width)
-      let (min-i, max-i) = get-group-span(participants, elmt)
-      elmts.at(i).insert("min-i", min-i)
-      elmts.at(i).insert("max-i", max-i)
-    }
-  }
-
-  render(participants, elmts)
 }
 
 #let from-plantuml(code) = {

src/group.typ

@@ -0,0 +1,45 @@
+#import "core/draw/group.typ"
+
+#let _grp(name, desc: none, type: "default", elmts, ..style) = {
+  return ((
+    type: "grp",
+    draw: group.render-start,
+    name: name,
+    desc: desc,
+    grp-type: type,
+    elmts: elmts,
+    style: style.named()
+  ),)
+}
+
+#let _alt(desc, elmts, ..elses-style) = {
+  let all-elmts = ()
+  all-elmts += elmts
+  let elses = elses-style.pos()
+  let style = elses-style.named()
+  for i in range(0, elses.len(), step: 2) {
+    let else-desc = elses.at(i)
+    let else-elmts = elses.at(i + 1, default: ())
+    all-elmts.push((
+      type: "else",
+      draw: group.render-else,
+      desc: else-desc
+    ))
+    all-elmts += else-elmts
+  }
+
+  return _grp("alt", desc: desc, type: "alt", all-elmts, ..style)
+}
+
+#let _loop(desc, min: none, max: auto, elmts, ..style) = {
+  let name = "loop"
+  if min != none {
+    if max == auto {
+      max = "*"
+    }
+    name += "(" + str(min) + "," + str(max) + ")"
+  }
+  _grp(name, desc: desc, type: "loop", elmts, ..style)
+}
+#let _opt(desc, elmts, ..style) = _grp("opt", desc: desc, type: "opt", elmts, ..style.named())
+#let _break(desc, elmts, ..style) = _grp("break", desc: desc, type: "break", elmts, ..style.named())

src/lib.typ

@@ -1 +1,8 @@
+#let version = version(0, 2, 2)
 #import "diagram.typ": diagram, from-plantuml
+
+#import "sequence.typ": _seq, _ret
+#import "group.typ": _grp, _loop, _alt, _opt, _break
+#import "participant.typ": _par
+#import "misc.typ": _sep, _delay, _sync, _gap, _evt, _col
+#import "note.typ": _note

src/misc.typ

@@ -0,0 +1,78 @@
+#import "cetz.typ": styles
+
+#import "core/draw/delay.typ"
+#import "core/draw/event.typ": render as evt-render
+#import "core/draw/separator.typ"
+#import "core/draw/sync.typ"
+#import "core/utils.typ": get-ctx, normalize-units, set-y
+
+#let _sep(name, ..style) = {
+  return ((
+    type: "sep",
+    draw: separator.render,
+    name: name,
+    style: style.named()
+  ),)
+}
+
+#let _delay(name: none, ..style) = {
+  return ((
+    type: "delay",
+    draw: delay.render,
+    name: name,
+    style: style.named()
+  ),)
+}
+
+#let _sync(elmts) = {
+  return ((
+    type: "sync",
+    draw: sync.render,
+    elmts: elmts
+  ),)
+}
+
+#let gap-default-style = (
+  size: 20pt
+)
+
+#let gap-render(gap) = get-ctx(ctx => {
+  let style = styles.resolve(
+    ctx.style,
+    merge: gap.style,
+    root: "gap",
+    base: gap-default-style
+  )
+  let size = normalize-units(style.size)
+  set-y(ctx.y - size)
+})
+
+#let _gap(..style) = {
+  return ((
+    type: "gap",
+    draw: gap-render,
+    style: style.named()
+  ),)
+}
+
+#let _evt(participant, event, ..style) = {
+  return ((
+    type: "evt",
+    draw: evt-render,
+    participant: participant,
+    event: event,
+    style: style.named()
+  ),)
+}
+
+#let _col(p1, p2, width: auto, margin: 0, min-width: 0, max-width: none) = {
+  return ((
+    type: "col",
+    p1: p1,
+    p2: p2,
+    width: width,
+    margin: margin,
+    min-width: min-width,
+    max-width: max-width
+  ),)
+}

src/note.typ

@@ -0,0 +1,46 @@
+#import "consts.typ": *
+#import "core/draw/note.typ"
+
+#let SIDES = (
+  "left",
+  "right",
+  "over",
+  "across"
+)
+
+#let SHAPES = (
+  "default",
+  "rect",
+  "hex"
+)
+
+#let _note(
+  side,
+  content,
+  pos: none,
+  aligned: false,
+  allow-overlap: true,
+  ..style
+) = {
+  if side == "over" {
+    if pos == none {
+      panic("Pos cannot be none with side 'over'")
+    }
+  }
+  if aligned {
+    if side != "over" {
+      panic("Aligned notes can only be over a participant (got side '" + side + "')")
+    }
+  }
+  return ((
+    type: "note",
+    draw: note.render,
+    side: side,
+    content: content,
+    pos: pos,
+    aligned: aligned,
+    aligned-with: none,
+    allow-overlap: allow-overlap,
+    style: style.named()
+  ),)
+}

src/participant.typ

@@ -0,0 +1,44 @@
+#import "core/draw/participant.typ"
+
+#let PAR-SPECIALS = ("?", "[", "]")
+#let SHAPES = (
+  "participant",
+  "actor",
+  "boundary",
+  "control",
+  "entity",
+  "database",
+  "collections",
+  "queue",
+  "custom"
+)
+#let DEFAULT-COLOR = rgb("#E2E2F0")
+
+#let _par(
+  name,
+  display-name: auto,
+  invisible: false,
+  ..style
+) = {
+  return ((
+    type: "par",
+    draw: participant.render,
+    name: name,
+    display-name: if display-name == auto {name} else {display-name},
+    invisible: invisible,
+    style: style.named()
+  ),)
+}
+
+#let _exists(participants, name) = {
+  if name in PAR-SPECIALS {
+    return true
+  }
+
+  for p in participants {
+    if name == p.name {
+      return true
+    }
+  }
+  return false
+}

src/renderer.typ

@@ -1,225 +0,0 @@
-#import "@preview/cetz:0.2.2": canvas, draw
-#import "utils.typ": get-participants-i
-
-#let Y-SPACE = 10
-#let PAR-PAD = (5pt, 3pt)
-#let PAR-SPACE = 10
-
-
-#let get-columns-width(participants, elements) = {
-  let pars-i = get-participants-i(participants)
-  let cells = ()
-  for elmt in elements {
-    if elmt.type == "seq" {
-      let com = if elmt.comment == none {""} else {elmt.comment}
-      let i1 = pars-i.at(elmt.p1)
-      let i2 = pars-i.at(elmt.p2)
-      cells.push(
-        (
-          elmt: elmt,
-          i1: calc.min(i1, i2),
-          i2: calc.max(i1, i2),
-          cell: box(com, inset: 3pt)
-        )
-      )
-    }
-  }
-
-  let widths = ()
-  for i in range(participants.len() - 1) {
-    let p1 = participants.at(i)
-    let p2 = participants.at(i + 1)
-    let w1 = measure(box(p1.display-name)).width + PAR-PAD.last() * 2
-    let w2 = measure(box(p2.display-name)).width + PAR-PAD.last() * 2
-    widths.push(w1 / 2pt + w2 / 2pt + PAR-SPACE)
-  }
-
-  for cell in cells.filter(c => c.i2 - c.i1 == 1) {
-    let m = measure(cell.cell)
-    widths.at(cell.i1) = calc.max(
-      widths.at(cell.i1),
-      m.width / 1pt
-    )
-  }
-
-  let multicol-cells = cells.filter(c => c.i2 - c.i1 > 1)
-  multicol-cells = multicol-cells.sorted(key: c => {
-    c.i1 * 1000 + c.i2
-  })
-  for cell in multicol-cells {
-    let m = measure(cell.cell)
-    widths.at(cell.i2 - 1) = calc.max(
-      widths.at(cell.i2 - 1),
-      m.width / 1pt - widths.slice(0, cell.i2 - 1).sum()
-    )
-  }
-  return widths
-}
-
-#let draw-group(x0, x1, y0, y1, group) = {
-  let m = measure(box(group.name))
-  let w = m.width / 1pt + 15
-  let h = m.height / 1pt + 6
-  draw.rect(
-    (x0, y0),
-    (x1, y1)
-  )
-  draw.merge-path(
-    fill: gray.lighten(20%),
-    close: true,
-    {
-      draw.line(
-        (x0, y0),
-        (x0 + w, y0),
-        (x0 + w, y0 - h / 2),
-        (x0 + w - 5, y0 - h),
-        (x0, y0 - h)
-      )
-    }
-  )
-  draw.content(
-    (x0, y0),
-    group.name,
-    anchor: "north-west",
-    padding: (left: 5pt, right: 10pt, top: 3pt, bottom: 3pt)
-  )
-
-  if group.desc != none {
-    draw.content(
-      (x0 + w, y0),
-      text([\[#group.desc\]], weight: "bold"),
-      anchor: "north-west",
-      padding: 3pt
-    )
-  }
-}
-
-#let render(participants, elements) = context canvas(length: 1pt, {
-  let pars-i = get-participants-i(participants)
-
-  let widths = get-columns-width(participants, elements)
-
-  let x-pos = (0,)
-  for width in widths {
-    x-pos.push(x-pos.last() + width)
-  }
-  
-  // Draw participants
-  for (i, p) in participants.enumerate() {
-    draw.content(
-      (x-pos.at(i), 0),
-      p.display-name,
-      name: p.name,
-      frame: "rect",
-      padding: PAR-PAD,
-      anchor: "south"
-    )
-  }
-
-  let y = -Y-SPACE
-  let groups = ()
-
-  // Draw sequences
-  for elmt in elements {
-    if elmt.type == "seq" {
-      let x1 = x-pos.at(pars-i.at(elmt.p1))
-      let x2 = x-pos.at(pars-i.at(elmt.p2))
-      let style = (
-        mark: (end: "straight"),
-        stroke: (
-          dash: if elmt.dashed {"dashed"} else {"solid"},
-          paint: elmt.color
-        )
-      )
-
-      if elmt.comment != none {
-        y -= measure(box(elmt.comment)).height / 1pt + 6
-        draw.content(
-          (calc.min(x1, x2), y),
-          elmt.comment,
-          anchor: "south-west",
-          padding: 3pt
-        )
-      }
-
-      draw.line(
-        (x1, y),
-        (x2, y),
-        ..style
-      )
-      y -= Y-SPACE
-    } else if elmt.type == "grp" {
-      let m = measure(
-        box(
-          inset: (left: 5pt, right: 5pt, top: 3pt, bottom: 3pt),
-        )
-      )
-      groups = groups.map(g => {
-        if g.at(1).min-i == elmt.min-i { g.at(2) += 1 }
-        if g.at(1).max-i == elmt.max-i { g.at(3) += 1 }
-        g
-      })
-      groups.push((y, elmt, 0, 0))
-      y -= m.height / 1pt + Y-SPACE
-    
-    } else if elmt.type == "grp-end" {
-      let (start-y, group, start-lvl, end-lvl) = groups.pop()
-      let x0 = x-pos.at(group.min-i) - start-lvl * 10 - 20
-      let x1 = x-pos.at(group.max-i) + end-lvl * 10 + 20
-      draw-group(x0, x1, start-y, y, group)
-
-      y -= Y-SPACE
-
-    } else if elmt.type == "sep" {
-      let x0 = x-pos.first() - 20
-      let x1 = x-pos.last() + 20
-      let m = measure(
-        box(
-          elmt.name,
-          inset: (left: 3pt, right: 3pt, top: 5pt, bottom: 5pt)
-        )
-      )
-      let w = m.width / 1pt
-      let h = m.height / 1pt
-      let cx = (x0 + x1) / 2
-      let xl = cx - w / 2
-      let xr = cx + w / 2
-
-      y -= h / 2
-      draw.line((x0, y), (xl, y))
-      draw.line((xr, y), (x1, y))
-      y -= 3
-      draw.line((x0, y), (xl, y))
-      draw.line((xr, y), (x1, y))
-      draw.content(
-        ((x0 + x1) / 2, y + 1.5),
-        elmt.name,
-        anchor: "center",
-        padding: (5pt, 3pt),
-        frame: "rect"
-      )
-      y -= h / 2
-      y -= Y-SPACE
-    }
-  }
-
-  // Draw vertical lines + end participants
-  draw.on-layer(-1, {
-    for (i, p) in participants.enumerate() {
-      let x = x-pos.at(i)
-      draw.line(
-        (x, 0),
-        (x, y),
-        stroke: (dash: "dashed", paint: gray.darken(40%))
-      )
-      draw.content(
-        (x, y),
-        p.display-name,
-        name: p.name,
-        frame: "rect",
-        padding: PAR-PAD,
-        anchor: "north"
-      )
-    }
-  })
-})

src/sequence.typ

@@ -0,0 +1,51 @@
+#import "core/draw/sequence.typ"
+
+#let _seq(
+  p1,
+  p2,
+  comment: none,
+  comment-align: "left",
+  dashed: false,
+  start-tip: "",
+  end-tip: ">",
+  color: black,
+  flip: false,
+  enable-dst: false,
+  create-dst: false,
+  disable-dst: false,
+  destroy-dst: false,
+  disable-src: false,
+  destroy-src: false,
+  lifeline-style: auto,
+  slant: none
+) = {
+  return ((
+    type: "seq",
+    draw: sequence.render,
+    p1: p1,
+    p2: p2,
+    comment: comment,
+    comment-align: comment-align,
+    dashed: dashed,
+    start-tip: start-tip,
+    end-tip: end-tip,
+    color: color,
+    flip: flip,
+    enable-dst: enable-dst,
+    create-dst: create-dst,
+    disable-dst: disable-dst,
+    destroy-dst: destroy-dst,
+    disable-src: disable-src,
+    destroy-src: destroy-src,
+    lifeline-style: lifeline-style,
+    slant: slant,
+    linked-notes: ()
+  ),)
+}
+
+#let _ret(comment: none) = {
+  return ((
+    type: "ret",
+    comment: comment
+  ),)
+}

src/utils.typ

@@ -1,27 +0,0 @@
-#let get-participants-i(participants) = {
-  let pars-i = (:)
-  for (i, p) in participants.enumerate() {
-    pars-i.insert(p.name, i)
-  }
-  return pars-i
-}
-
-#let get-group-span(participants, group) = {
-  let min-i = participants.len() - 1
-  let max-i = 0
-  let pars-i = get-participants-i(participants)
-
-  for elmt in group.elmts {
-    if elmt.type == "seq" {
-      let i1 = pars-i.at(elmt.p1)
-      let i2 = pars-i.at(elmt.p2)
-      min-i = calc.min(min-i, i1, i2)
-      max-i = calc.max(max-i, i1, i2)
-    } else if elmt.type == "grp" {
-      let (i0, i1) = get-group-span(participants, elmt)
-      min-i = calc.min(min-i, i0)
-      max-i = calc.max(max-i, i1)
-    }
-  }
-  return (min-i, max-i)
-}

tests/empty/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**

tests/empty/test.typ

@@ -0,0 +1,6 @@
+#set page(width: auto, height: auto)
+#import "/src/lib.typ": *
+
+#diagram({})
+
+#diagram(())

tests/group/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**

tests/group/test.typ

@@ -0,0 +1,51 @@
+#set page(width: auto, height: auto)
+#import "/src/lib.typ": *
+
+#diagram({
+  _seq("Alice", "Bob", comment: "Authentication Request")
+
+  _alt(
+    "successful case", {
+      _seq("Bob", "Alice", comment: "Authentication Accepted")
+    },
+    "some kind of failure", {
+      _seq("Bob", "Alice", comment: "Authentication Failure")
+
+      _grp("My own label", desc: "My own label2", {
+        _seq("Alice", "Log", comment: "Log attack start")
+        _loop("1000 times", {
+          _seq("Alice", "Bob", comment: "DNS Attack")
+        })
+        _seq("Alice", "Log", comment: "Log attack end")
+      })
+    },
+    "Another type of failure", {
+      _seq("Bob", "Alice", comment: "Please repeat")
+    }
+  )
+})
+
+#pagebreak()
+
+#diagram({
+  _par("a", display-name: box(width: 1.5em, height: .5em), show-bottom: false)
+  _par("b", display-name: box(width: 1.5em, height: .5em), show-bottom: false)
+  _col("a", "b", width: 2cm)
+  _loop("a<1", min: 1, {
+    _seq("a", "b", end-tip: ">>")
+    _seq("b", "a", end-tip: ">>")
+  })
+  _seq("a", "b", end-tip: ">>")
+})
+
+#pagebreak()
+
+#diagram({
+  _par("A")
+  _par("B")
+  _col("A", "B", width: 3cm)
+  _seq("A", "B", enable-dst: true)
+  _alt([desc], {
+    _ret()
+  })
+})

tests/note/color/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**

tests/note/color/test.typ

@@ -0,0 +1,13 @@
+#set page(width: auto, height: auto)
+#import "/src/lib.typ": *
+
+#diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _note("left", [This is displayed\ left of Alice.], pos: "a", fill: rgb("#00FFFF"))
+  _note("right", [This is displayed right of Alice.], pos: "a")
+  _note("over", [This is displayed over Alice.], pos: "a")
+  _note("over", [This is displayed\ over Bob and Alice.], pos: ("a", "b"), fill: rgb("#FFAAAA"))
+  _note("over", [This is yet another\ example of\ a long note.], pos: ("a", "b"))
+})

tests/note/position/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**

tests/note/position/test.typ

@@ -0,0 +1,49 @@
+#set page(width: auto, height: auto)
+#import "/src/lib.typ": *
+
+#diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _seq("a", "b", comment: [hello])
+  _note("left", [this is a first note])
+
+  _seq("b", "a", comment: [ok])
+  _note("right", [this is another note])
+
+  _seq("b", "b", comment: [I am thinking])
+  _note("left", [a note\ can also be defined\ on several lines])
+})
+
+#pagebreak()
+
+#diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+
+  _note("over", [initial state of Alice], pos: "a")
+  _note("over", [initial state of Bob], pos: "b")
+  _seq("b", "a", comment: [hello])
+})
+
+#pagebreak()
+
+#diagram({
+  _par("a", display-name: "Alice")
+  _par("b", display-name: "Bob")
+  _par("c", display-name: "Charlie")
+  _par("d", display-name: "Donald")
+  _par("e", display-name: "Eddie")
+
+  _note("across", [This note float above all participants])
+
+  _note("over", [initial state of Alice], pos: "a")
+  _note("over", [initial state of Bob the builder], pos: "b", aligned: true)
+
+  _note("over", [Note 1], pos: "a")
+  _note("over", [Note 2], pos: "b", aligned: true)
+  _note("over", [Note 3], pos: "c", aligned: true)
+
+  _seq("a", "d")
+  _note("over", [this is an extremely long note], pos: ("d", "e"))
+})

tests/note/shape/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**

tests/note/shape/test.typ

@@ -0,0 +1,14 @@
+#set page(width: auto, height: auto)
+#import "/src/lib.typ": *
+
+#diagram({
+  _par("caller")
+  _par("server")
+
+  _seq("caller", "server", comment: [conReq])
+  _note("over", [idle], pos: "caller", shape: "hex")
+  _seq("server", "caller", comment: [conConf])
+  _note("over", ["r" as rectangle\ "h" as hexagon], pos: "server", shape: "rect")
+  _note("over", [this is\ on several\ lines], pos: "server", shape: "rect")
+  _note("over", [this is\ on several\ lines], pos: "caller", shape: "hex")
+})

tests/note/styled-body/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**

tests/note/styled-body/test.typ

@@ -0,0 +1,33 @@
+#set page(width: auto, height: auto)
+#import "/src/lib.typ": *
+
+#diagram({
+  _par("a", display-name: [Alice])
+  _par("b", display-name: [The *Famous* Bob])
+
+  _seq("a", "b", comment: [hello #strike([there])])
+
+  _gap()
+  _seq("b", "a", comment: [ok])
+  _note("left", [
+    This is *bold*\
+    This is _italics_\
+    This is `monospaced`\
+    This is #strike([stroked])\
+    This is #underline([underlined])\
+    This is #underline([waved])\
+  ])
+
+  _seq("a", "b", comment: [A _well formatted_ message])
+  _note("right", [
+    This is #box(text([displayed], size: 18pt), fill: rgb("#5F9EA0"))\
+    #underline([left of]) Alice.
+  ], pos: "a")
+  _note("left", [
+    #underline([This], stroke: red) is #text([displayed], fill: rgb("#118888"))\
+    *#text([left of], fill: rgb("#800080")) #strike([Alice], stroke: red) Bob.*
+  ], pos: "b")
+  _note("over", [
+    #underline([This is hosted], stroke: rgb("#FF33FF")) by #box(baseline: 50%, image("/gallery/gitea.png", width: 1cm, height: 1cm, fit: "contain"))
+  ], pos: ("a", "b"))
+})

tests/participant/shapes/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**

tests/participant/shapes/test.typ

@@ -0,0 +1,21 @@
+#set page(width: auto, height: auto)
+#import "/src/lib.typ": *
+
+
+#let TYPST = image("/gallery/typst.png", width: 1.5cm, height: 1.5cm, fit: "contain")
+#let FERRIS = image("/gallery/ferris.png", width: 1.5cm, height: 1.5cm, fit: "contain")
+#let ME = image("/gallery/me.jpg", width: 1.5cm, height: 1.5cm, fit: "contain")
+
+#diagram({
+  _par("Foo", display-name: "Participant", shape: "participant")
+  _par("Foo1", display-name: "Actor", shape: "actor")
+  _par("Foo2", display-name: "Boundary", shape: "boundary")
+  _par("Foo3", display-name: "Control", shape: "control")
+  _par("Foo4", display-name: "Entity", shape: "entity")
+  _par("Foo5", display-name: "Database", shape: "database")
+  _par("Foo6", display-name: "Collections", shape: "collections")
+  _par("Foo7", display-name: "Queue", shape: "queue")
+  _par("Foo8", display-name: "Typst", shape: "custom", image: TYPST)
+  _par("Foo9", display-name: "Ferris", shape: "custom", image: FERRIS)
+  _par("Foo10", display-name: "Baryhobal", shape: "custom", image: ME)
+})

tests/sequence/comment-align/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**

tests/sequence/comment-align/test.typ

@@ -0,0 +1,57 @@
+#set page(width: auto, height: auto)
+#import "/src/lib.typ": *
+
+#diagram({
+  _par("alice", display-name: "Alice")
+  _par("bob", display-name: "Bob")
+  _seq("alice", "bob", comment: "This is a very long comment")
+
+  // Left to right
+  _seq("alice", "bob", comment: "Start aligned", comment-align: "start")
+  _seq("alice", "bob", comment: "End aligned", comment-align: "end")
+  _seq("alice", "bob", comment: "Left aligned", comment-align: "left")
+  _seq("alice", "bob", comment: "Right aligned", comment-align: "right")
+  _seq("alice", "bob", comment: "Centered", comment-align: "center")
+  _gap()
+
+  // Right to left
+  _seq("bob", "alice", comment: "Start aligned", comment-align: "start")
+  _seq("bob", "alice", comment: "End aligned", comment-align: "end")
+  _seq("bob", "alice", comment: "Left aligned", comment-align: "left")
+  _seq("bob", "alice", comment: "Right aligned", comment-align: "right")
+  _seq("bob", "alice", comment: "Centered", comment-align: "center")
+  _gap()
+
+  // Slant left to right
+  _seq("alice", "bob", comment: "Start aligned", comment-align: "start", slant: 10)
+  _seq("alice", "bob", comment: "End aligned", comment-align: "end", slant: 10)
+  _seq("alice", "bob", comment: "Left aligned", comment-align: "left", slant: 10)
+  _seq("alice", "bob", comment: "Right aligned", comment-align: "right", slant: 10)
+  _seq("alice", "bob", comment: "Centered", comment-align: "center", slant: 10)
+  _gap()
+
+  // Slant right to left
+  _seq("bob", "alice", comment: "Start aligned", comment-align: "start", slant: 10)
+  _seq("bob", "alice", comment: "End aligned", comment-align: "end", slant: 10)
+  _seq("bob", "alice", comment: "Left aligned", comment-align: "left", slant: 10)
+  _seq("bob", "alice", comment: "Right aligned", comment-align: "right", slant: 10)
+  _seq("bob", "alice", comment: "Centered", comment-align: "center", slant: 10)
+})
+
+#pagebreak()
+
+#diagram({
+  _par("alice", display-name: "Alice")
+
+  _seq("alice", "alice", comment: "Start aligned", comment-align: "start")
+  _seq("alice", "alice", comment: "End aligned", comment-align: "end")
+  _seq("alice", "alice", comment: "Left aligned", comment-align: "left")
+  _seq("alice", "alice", comment: "Right aligned", comment-align: "right")
+  _seq("alice", "alice", comment: "Centered", comment-align: "center")
+
+  _seq("alice", "alice", comment: "Start aligned", comment-align: "start", flip: true)
+  _seq("alice", "alice", comment: "End aligned", comment-align: "end", flip: true)
+  _seq("alice", "alice", comment: "Left aligned", comment-align: "left", flip: true)
+  _seq("alice", "alice", comment: "Right aligned", comment-align: "right", flip: true)
+  _seq("alice", "alice", comment: "Centered", comment-align: "center", flip: true)
+})

tests/sequence/special-par/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**

tests/sequence/special-par/test.typ

@@ -0,0 +1,12 @@
+#set page(width: auto, height: auto)
+#import "/src/lib.typ": *
+
+#diagram({
+  _seq("?", "Alice", comment: [?->\ *short* to actor1])
+  _seq("[", "Alice", comment: [\[->\ *from start* to actor1])
+  _seq("[", "Bob", comment: [\[->\ *from start* to actor2])
+  _seq("?", "Bob", comment: [?->\ *short* to actor2])
+  _seq("Alice", "]", comment: [->\]\ from actor1 *to end*])
+  _seq("Alice", "?", comment: [->?\ *short* from actor1])
+  _seq("Alice", "Bob", comment: [->\ from actor1 to actor2])
+})

tests/sequence/tips/.gitignore

@@ -0,0 +1,4 @@
+# generated by tytanic, do not edit
+
+diff/**
+out/**