note
This rune is part of @refrakt-md/plan. Install with npm install @refrakt-md/plan and add "@refrakt-md/plan" to the plugins array in your refrakt.config.json.
Plan Progress
A completion overview built from the plan registry: one block per entity type — a heading, a progress bar showing how far that type has reached its done-state, and a row of per-status badges. It's thin sugar over the generic aggregate rune, so the counting happens at build time against live registry data — no manual tallies.
Each type gets its own bar on purpose: a single mixed bar would conflate different done-states (a work item is done, a bug is fixed, a spec is accepted), which tells you nothing useful.
Default — the actionable set
A bare {% plan-progress /%} covers what you act on day to day: work items and bugs.
{% plan-progress /%}<section data-rune="plan-progress">
<div data-name="group" data-type="work">
<h3 data-name="heading" data-type="work">Work</h3>
<section data-rune="aggregate">
<meta data-field="aggregate-type" content="work">
<meta data-field="aggregate-filter" content="">
<meta data-field="aggregate-value" content="status:done">
<meta data-field="aggregate-group" content="status">
<meta data-field="aggregate-sort" content="">
<meta data-field="aggregate-limit" content="">
<meta data-field="aggregate-empty" content="">
<meta data-field="__aggregate-sentinel" content="true">
<meta data-field="aggregate-body" content="{% progress value=$item.value max=$item.count %}Done{% /progress %}
---
{% badge type="status" sentiment=$item.sentiment %}{% $item.count %} {% humanize($item.key) %}{% /badge %}
---
No items yet.
">
</section>
</div>
<div data-name="group" data-type="bug">
<h3 data-name="heading" data-type="bug">Bugs</h3>
<section data-rune="aggregate">
<meta data-field="aggregate-type" content="bug">
<meta data-field="aggregate-filter" content="">
<meta data-field="aggregate-value" content="status:fixed">
<meta data-field="aggregate-group" content="status">
<meta data-field="aggregate-sort" content="">
<meta data-field="aggregate-limit" content="">
<meta data-field="aggregate-empty" content="">
<meta data-field="__aggregate-sentinel" content="true">
<meta data-field="aggregate-body" content="{% progress value=$item.value max=$item.count %}Fixed{% /progress %}
---
{% badge type="status" sentiment=$item.sentiment %}{% $item.count %} {% humanize($item.key) %}{% /badge %}
---
No items yet.
">
</section>
</div>
</section>Work
Done499/555
1 Blocked
4 In Progress
3 Review
27 Ready
14 Pending
7 Draft
499 Done
Bugs
Fixed12/19
1 In Progress
4 Confirmed
2 Reported
12 Fixed
<section class="rf-plan-progress" data-rune="plan-progress" data-density="full">
<div data-name="group" data-type="work" class="rf-plan-progress__group">
<h3 data-name="heading" data-type="work" class="rf-plan-progress__heading">Work</h3>
<section class="rf-aggregate" data-aggregate="breakdown" data-rune="aggregate" data-density="full">
<div data-name="preamble" class="rf-aggregate__preamble rf-aggregate__preamble">
<p>
<div class="rf-progress" role="progressbar" aria-valuemin="0" aria-valuenow="499" aria-valuemax="555" aria-label="Done" style="--rf-progress: 90%" data-rune="progress" data-density="full">
<span data-name="label" class="rf-progress__label">Done</span>
<span data-name="value" class="rf-progress__value">499/555</span>
<span data-name="track" class="rf-progress__track">
<span data-name="fill" class="rf-progress__fill"></span>
</span>
</div>
</p>
</div>
<div data-name="items" class="rf-aggregate__items rf-aggregate__items">
<div class="rf-aggregate__group" data-group="blocked" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="negative" data-meta-type="status" data-rune="badge" data-density="full">
1
Blocked
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="in-progress" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
4
In Progress
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="review" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="caution" data-meta-type="status" data-rune="badge" data-density="full">
3
Review
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="ready" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
27
Ready
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="pending" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
14
Pending
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="draft" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
7
Draft
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="done" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
499
Done
</span>
</p>
</div>
</div>
</section>
</div>
<div data-name="group" data-type="bug" class="rf-plan-progress__group">
<h3 data-name="heading" data-type="bug" class="rf-plan-progress__heading">Bugs</h3>
<section class="rf-aggregate" data-aggregate="breakdown" data-rune="aggregate" data-density="full">
<div data-name="preamble" class="rf-aggregate__preamble rf-aggregate__preamble">
<p>
<div class="rf-progress" role="progressbar" aria-valuemin="0" aria-valuenow="12" aria-valuemax="19" aria-label="Fixed" style="--rf-progress: 63%" data-rune="progress" data-density="full">
<span data-name="label" class="rf-progress__label">Fixed</span>
<span data-name="value" class="rf-progress__value">12/19</span>
<span data-name="track" class="rf-progress__track">
<span data-name="fill" class="rf-progress__fill"></span>
</span>
</div>
</p>
</div>
<div data-name="items" class="rf-aggregate__items rf-aggregate__items">
<div class="rf-aggregate__group" data-group="in-progress" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
1
In Progress
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="confirmed" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="caution" data-meta-type="status" data-rune="badge" data-density="full">
4
Confirmed
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="reported" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
2
Reported
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="fixed" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
12
Fixed
</span>
</p>
</div>
</div>
</section>
</div>
</section>Every type
Widen to the full plan set with show="all" — or list exactly the types you want via type=:
{% plan-progress show="all" /%}<section data-rune="plan-progress">
<div data-name="group" data-type="work">
<h3 data-name="heading" data-type="work">Work</h3>
<section data-rune="aggregate">
<meta data-field="aggregate-type" content="work">
<meta data-field="aggregate-filter" content="">
<meta data-field="aggregate-value" content="status:done">
<meta data-field="aggregate-group" content="status">
<meta data-field="aggregate-sort" content="">
<meta data-field="aggregate-limit" content="">
<meta data-field="aggregate-empty" content="">
<meta data-field="__aggregate-sentinel" content="true">
<meta data-field="aggregate-body" content="{% progress value=$item.value max=$item.count %}Done{% /progress %}
---
{% badge type="status" sentiment=$item.sentiment %}{% $item.count %} {% humanize($item.key) %}{% /badge %}
---
No items yet.
">
</section>
</div>
<div data-name="group" data-type="bug">
<h3 data-name="heading" data-type="bug">Bugs</h3>
<section data-rune="aggregate">
<meta data-field="aggregate-type" content="bug">
<meta data-field="aggregate-filter" content="">
<meta data-field="aggregate-value" content="status:fixed">
<meta data-field="aggregate-group" content="status">
<meta data-field="aggregate-sort" content="">
<meta data-field="aggregate-limit" content="">
<meta data-field="aggregate-empty" content="">
<meta data-field="__aggregate-sentinel" content="true">
<meta data-field="aggregate-body" content="{% progress value=$item.value max=$item.count %}Fixed{% /progress %}
---
{% badge type="status" sentiment=$item.sentiment %}{% $item.count %} {% humanize($item.key) %}{% /badge %}
---
No items yet.
">
</section>
</div>
<div data-name="group" data-type="spec">
<h3 data-name="heading" data-type="spec">Specs</h3>
<section data-rune="aggregate">
<meta data-field="aggregate-type" content="spec">
<meta data-field="aggregate-filter" content="">
<meta data-field="aggregate-value" content="status:accepted">
<meta data-field="aggregate-group" content="status">
<meta data-field="aggregate-sort" content="">
<meta data-field="aggregate-limit" content="">
<meta data-field="aggregate-empty" content="">
<meta data-field="__aggregate-sentinel" content="true">
<meta data-field="aggregate-body" content="{% progress value=$item.value max=$item.count %}Accepted{% /progress %}
---
{% badge type="status" sentiment=$item.sentiment %}{% $item.count %} {% humanize($item.key) %}{% /badge %}
---
No items yet.
">
</section>
</div>
<div data-name="group" data-type="decision">
<h3 data-name="heading" data-type="decision">Decisions</h3>
<section data-rune="aggregate">
<meta data-field="aggregate-type" content="decision">
<meta data-field="aggregate-filter" content="">
<meta data-field="aggregate-value" content="status:accepted">
<meta data-field="aggregate-group" content="status">
<meta data-field="aggregate-sort" content="">
<meta data-field="aggregate-limit" content="">
<meta data-field="aggregate-empty" content="">
<meta data-field="__aggregate-sentinel" content="true">
<meta data-field="aggregate-body" content="{% progress value=$item.value max=$item.count %}Accepted{% /progress %}
---
{% badge type="status" sentiment=$item.sentiment %}{% $item.count %} {% humanize($item.key) %}{% /badge %}
---
No items yet.
">
</section>
</div>
<div data-name="group" data-type="milestone">
<h3 data-name="heading" data-type="milestone">Milestones</h3>
<section data-rune="aggregate">
<meta data-field="aggregate-type" content="milestone">
<meta data-field="aggregate-filter" content="">
<meta data-field="aggregate-value" content="status:complete">
<meta data-field="aggregate-group" content="status">
<meta data-field="aggregate-sort" content="">
<meta data-field="aggregate-limit" content="">
<meta data-field="aggregate-empty" content="">
<meta data-field="__aggregate-sentinel" content="true">
<meta data-field="aggregate-body" content="{% progress value=$item.value max=$item.count %}Complete{% /progress %}
---
{% badge type="status" sentiment=$item.sentiment %}{% $item.count %} {% humanize($item.key) %}{% /badge %}
---
No items yet.
">
</section>
</div>
</section>Work
Done499/555
1 Blocked
4 In Progress
3 Review
27 Ready
14 Pending
7 Draft
499 Done
Bugs
Fixed12/19
1 In Progress
4 Confirmed
2 Reported
12 Fixed
Specs
Accepted25/125
24 Draft
2 Review
25 Accepted
16 Implemented
57 Shipped
1 Superseded
Decisions
Accepted20/31
11 Proposed
20 Accepted
Milestones
Complete28/35
3 Planning
4 Active
28 Complete
<section class="rf-plan-progress" data-rune="plan-progress" data-density="full">
<div data-name="group" data-type="work" class="rf-plan-progress__group">
<h3 data-name="heading" data-type="work" class="rf-plan-progress__heading">Work</h3>
<section class="rf-aggregate" data-aggregate="breakdown" data-rune="aggregate" data-density="full">
<div data-name="preamble" class="rf-aggregate__preamble rf-aggregate__preamble">
<p>
<div class="rf-progress" role="progressbar" aria-valuemin="0" aria-valuenow="499" aria-valuemax="555" aria-label="Done" style="--rf-progress: 90%" data-rune="progress" data-density="full">
<span data-name="label" class="rf-progress__label">Done</span>
<span data-name="value" class="rf-progress__value">499/555</span>
<span data-name="track" class="rf-progress__track">
<span data-name="fill" class="rf-progress__fill"></span>
</span>
</div>
</p>
</div>
<div data-name="items" class="rf-aggregate__items rf-aggregate__items">
<div class="rf-aggregate__group" data-group="blocked" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="negative" data-meta-type="status" data-rune="badge" data-density="full">
1
Blocked
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="in-progress" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
4
In Progress
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="review" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="caution" data-meta-type="status" data-rune="badge" data-density="full">
3
Review
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="ready" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
27
Ready
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="pending" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
14
Pending
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="draft" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
7
Draft
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="done" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
499
Done
</span>
</p>
</div>
</div>
</section>
</div>
<div data-name="group" data-type="bug" class="rf-plan-progress__group">
<h3 data-name="heading" data-type="bug" class="rf-plan-progress__heading">Bugs</h3>
<section class="rf-aggregate" data-aggregate="breakdown" data-rune="aggregate" data-density="full">
<div data-name="preamble" class="rf-aggregate__preamble rf-aggregate__preamble">
<p>
<div class="rf-progress" role="progressbar" aria-valuemin="0" aria-valuenow="12" aria-valuemax="19" aria-label="Fixed" style="--rf-progress: 63%" data-rune="progress" data-density="full">
<span data-name="label" class="rf-progress__label">Fixed</span>
<span data-name="value" class="rf-progress__value">12/19</span>
<span data-name="track" class="rf-progress__track">
<span data-name="fill" class="rf-progress__fill"></span>
</span>
</div>
</p>
</div>
<div data-name="items" class="rf-aggregate__items rf-aggregate__items">
<div class="rf-aggregate__group" data-group="in-progress" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
1
In Progress
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="confirmed" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="caution" data-meta-type="status" data-rune="badge" data-density="full">
4
Confirmed
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="reported" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
2
Reported
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="fixed" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
12
Fixed
</span>
</p>
</div>
</div>
</section>
</div>
<div data-name="group" data-type="spec" class="rf-plan-progress__group">
<h3 data-name="heading" data-type="spec" class="rf-plan-progress__heading">Specs</h3>
<section class="rf-aggregate" data-aggregate="breakdown" data-rune="aggregate" data-density="full">
<div data-name="preamble" class="rf-aggregate__preamble rf-aggregate__preamble">
<p>
<div class="rf-progress" role="progressbar" aria-valuemin="0" aria-valuenow="25" aria-valuemax="125" aria-label="Accepted" style="--rf-progress: 20%" data-rune="progress" data-density="full">
<span data-name="label" class="rf-progress__label">Accepted</span>
<span data-name="value" class="rf-progress__value">25/125</span>
<span data-name="track" class="rf-progress__track">
<span data-name="fill" class="rf-progress__fill"></span>
</span>
</div>
</p>
</div>
<div data-name="items" class="rf-aggregate__items rf-aggregate__items">
<div class="rf-aggregate__group" data-group="draft" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
24
Draft
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="review" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="caution" data-meta-type="status" data-rune="badge" data-density="full">
2
Review
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="accepted" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
25
Accepted
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="implemented" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
16
Implemented
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="shipped" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
57
Shipped
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="superseded" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="caution" data-meta-type="status" data-rune="badge" data-density="full">
1
Superseded
</span>
</p>
</div>
</div>
</section>
</div>
<div data-name="group" data-type="decision" class="rf-plan-progress__group">
<h3 data-name="heading" data-type="decision" class="rf-plan-progress__heading">Decisions</h3>
<section class="rf-aggregate" data-aggregate="breakdown" data-rune="aggregate" data-density="full">
<div data-name="preamble" class="rf-aggregate__preamble rf-aggregate__preamble">
<p>
<div class="rf-progress" role="progressbar" aria-valuemin="0" aria-valuenow="20" aria-valuemax="31" aria-label="Accepted" style="--rf-progress: 65%" data-rune="progress" data-density="full">
<span data-name="label" class="rf-progress__label">Accepted</span>
<span data-name="value" class="rf-progress__value">20/31</span>
<span data-name="track" class="rf-progress__track">
<span data-name="fill" class="rf-progress__fill"></span>
</span>
</div>
</p>
</div>
<div data-name="items" class="rf-aggregate__items rf-aggregate__items">
<div class="rf-aggregate__group" data-group="proposed" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
11
Proposed
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="accepted" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
20
Accepted
</span>
</p>
</div>
</div>
</section>
</div>
<div data-name="group" data-type="milestone" class="rf-plan-progress__group">
<h3 data-name="heading" data-type="milestone" class="rf-plan-progress__heading">Milestones</h3>
<section class="rf-aggregate" data-aggregate="breakdown" data-rune="aggregate" data-density="full">
<div data-name="preamble" class="rf-aggregate__preamble rf-aggregate__preamble">
<p>
<div class="rf-progress" role="progressbar" aria-valuemin="0" aria-valuenow="28" aria-valuemax="35" aria-label="Complete" style="--rf-progress: 80%" data-rune="progress" data-density="full">
<span data-name="label" class="rf-progress__label">Complete</span>
<span data-name="value" class="rf-progress__value">28/35</span>
<span data-name="track" class="rf-progress__track">
<span data-name="fill" class="rf-progress__fill"></span>
</span>
</div>
</p>
</div>
<div data-name="items" class="rf-aggregate__items rf-aggregate__items">
<div class="rf-aggregate__group" data-group="planning" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="neutral" data-meta-type="status" data-rune="badge" data-density="full">
3
Planning
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="active" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
4
Active
</span>
</p>
</div>
<div class="rf-aggregate__group" data-group="complete" data-block="">
<p>
<span class="rf-badge rf-badge" data-meta-sentiment="positive" data-meta-type="status" data-rune="badge" data-density="full">
28
Complete
</span>
</p>
</div>
</div>
</section>
</div>
</section>Scoping
milestone= lowers to a registry filter, so every bar counts only that milestone's items:
{% plan-progress milestone="v1.0.0" /%}
Scope to a single type with type= — its done-state drives the bar:
{% plan-progress type="spec" /%}
Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
type | string | — | Entity type(s) to chart, comma-separated. Default: work,bug. |
show | string | — | Legacy alias for `type`; `all` expands to the full plan set. |
milestone | string | — | Scope every bar to a milestone — lowers to filter="milestone:…". |
filter | string | — | Raw field:value filter clauses (SPEC-070 grammar); overrides `milestone`. |
value | string | — | Override the achieved-subset clause for every bar (default: each type's terminal-positive status). |
sort | string | — | Sort the status groups (passes through to each aggregate). |
limit | string | — | Cap the number of status groups (passes through to each aggregate). |
Universal attributes
bg
The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient start colour — a semantic token name (→ var(--rf-color-*)) |
bg-gradient | "to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl" | — | Gradient direction (bounded named set) |
bg-gradient-type | "linear" | "radial" | "conic" | — | Gradient type |
bg-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional middle gradient stop — a semantic token name |
scrim | "top" | "bottom" | "left" | "right" | "none" | — | Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim |
scrim-blur | "none" | "sm" | "md" | "lg" | — | Frost scrim blur amount |
scrim-strength | "sm" | "md" | "lg" | — | Gradient scrim strength |
scrim-tone | "dark" | "light" | — | Whether the scrim darkens (for light text) or lightens (for dark text) |
scrim-type | "gradient" | "frost" | — | Scrim treatment: gradient (default) or frost (backdrop blur) |
elevation
The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
elevation | "sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg" | — | Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases |
inset
Internal padding override.
| Attribute | Type | Required | Description |
|---|---|---|---|
inset | "flush" | "tight" | "default" | "loose" | "breathe" | — | Inner padding of this block |
motion
Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade this block's items in as it reveals (no-op on single-child runes) |
spacing
Block-level rhythm override.
| Attribute | Type | Required | Description |
|---|---|---|---|
spacing | "flush" | "tight" | "default" | "loose" | "breathe" | — | Vertical spacing above and below this block |
substrate
Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.
| Attribute | Type | Required | Description |
|---|---|---|---|
substrate | "dots" | "grid" | "lines" | "cross" | "checker" | "none" | — | Generated surface pattern |
substrate-fill | "inherit" | "inset" | — | Surface fill the pattern sits on (full colour stays with tint) |
substrate-opacity | "sm" | "md" | "lg" | — | Pattern ink strength |
substrate-size | "sm" | "md" | "lg" | — | Pattern cell size |
substrate-target | "self" | "media" | — | Which surface the pattern fills (overrides the rune/theme default) |
tint
Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color tint preset applied to this block |
tint-mode | "auto" | "dark" | "light" | — | Whether the tint adapts to auto, dark, or light mode |
width
The track a block rune occupies.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| dropcap, reading | this rune declares no prose body |
| frame | this rune declares neither a `frameTarget` nor a media section |
| prominence | this rune has no page-section header |
How it composes
plan-progress emits one {% aggregate %} per type (group="status", value="status:<that type's done-state>") and lets aggregate resolve the counts. The bar is the progress rune, labelled with the achieved status — Done (work), Fixed (bug), Accepted (spec / decision), Complete (milestone) — with the count shown alongside. The breakdown is one badge per status. (Per-status badge colour is on the roadmap — it needs per-group sentiment projection in aggregate.)