renderreport 0.2.5

Data-driven report generation with Typst as embedded render engine — no CLI dependency
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

// ProcessFlow Component
// Linear process visualization with numbered steps

#let process-flow(data) = {
  let dir = if data.direction != none { data.direction } else { "horizontal" }

  block(width: 100%)[
    #if data.title != none [
      #text(weight: "semibold", size: font-size-lg)[#data.title]
      #v(spacing-3)
    ]

    #if dir == "vertical" [
      // Vertical layout: stacked steps with arrow below each
      #for (i, step) in data.steps.enumerate() [
        #block(
          width: 100%,
          fill: color-surface,
          stroke: (paint: color-border, thickness: component-card-border-width),
          radius: 8pt,
          inset: spacing-4,
        )[
          #grid(
            columns: (auto, 1fr),
            column-gutter: spacing-3,
            align: (top, top),

            // Step number circle
            block(
              width: 24pt,
              height: 24pt,
              fill: color-primary,
              radius: 50%,
              inset: 0pt,
            )[
              #align(center + horizon)[
                #text(size: font-size-xs, weight: "bold", fill: white)[#(i + 1)]
              ]
            ],

            stack(
              spacing: 2pt,
              text(weight: "bold", size: font-size-base)[
                #if step.icon != none [#step.icon #h(4pt)]
                #step.label
              ],
              if step.description != none {
                text(size: font-size-sm, fill: color-text-muted)[#step.description]
              },
            ),
          )
        ]
        #if i < data.steps.len() - 1 [
          #align(center)[#text(size: font-size-lg, fill: color-text-muted)[↓]]
        ]
      ]
    ] else [
      // Horizontal layout: row of boxes with → between
      #grid(
        columns: range(data.steps.len() * 2 - 1).map(i => if calc.rem(i, 2) == 0 { 1fr } else { auto }),
        align: center,
        column-gutter: spacing-2,

        ..{
          let cells = ()
          for (i, step) in data.steps.enumerate() {
            cells.push(
              block(
                width: 100%,
                fill: color-surface,
                stroke: (paint: color-border, thickness: component-card-border-width),
                radius: 8pt,
                inset: spacing-3,
              )[
                #align(center)[
                  #block(
                    width: 20pt,
                    height: 20pt,
                    fill: color-primary,
                    radius: 50%,
                  )[
                    #align(center + horizon)[
                      #text(size: font-size-xs, weight: "bold", fill: white)[#(i + 1)]
                    ]
                  ]
                  #v(spacing-1)
                  #if step.icon != none [#text(size: font-size-base)[#step.icon] #linebreak()]
                  #text(weight: "bold", size: font-size-sm)[#step.label]
                  #if step.description != none [
                    #linebreak()
                    #text(size: font-size-xs, fill: color-text-muted)[#step.description]
                  ]
                ]
              ]
            )
            if i < data.steps.len() - 1 {
              cells.push(
                align(center + horizon)[
                  #text(size: font-size-base, fill: color-text-muted)[→]
                ]
              )
            }
          }
          cells
        },
      )
    ]
  ]
}