This rune is part of @refrakt-md/storytelling. Install with npm install @refrakt-md/storytelling and add "@refrakt-md/storytelling" to the packages array in your refrakt.config.json.

Plot

Story arcs, quests, and narrative structures with progress tracking. List items are parsed as beats with status markers — use checkbox syntax to track progress through a storyline.

Basic usage

List items with checkbox markers become plot beats. Use [x] for complete, [>] for active, [ ] for planned, and [-] for abandoned.

{% plot title="The Quest for the Crown" type="quest" structure="linear" %}
The heroes must recover the lost crown before the solstice.

- [x] **Discovery** — Find the ancient map in the library
- [x] **Departure** — Leave the city under cover of darkness
- [>] **Trial** — Cross the Whispering Wastes
- [ ] **Confrontation** — Face the guardian of the vault
- [-] **Return** — Bring the crown back to the capital
{% /plot %}

<section data-field="content-section" data-rune="plot" typeof="CreativeWork">
  <span data-name="title" property="name">The Quest for the Crown</span>
  <meta content="quest" data-field="plot-type" property="genre">
  <meta content="linear" data-field="structure">
  <meta content="" data-field="tags">
  <p>The heroes must recover the lost crown before the solstice.</p>
  <ol data-name="beats">
    <li data-field="beat" data-rune="beat">
      <span data-name="label">Discovery</span>
      <meta content="complete" data-field="status">
      <meta content="" data-field="id">
      <meta content="" data-field="track">
      <meta content="" data-field="follows">
      <div data-name="body">
        <p>Find the ancient map in the library</p>
      </div>
    </li>
    <li data-field="beat" data-rune="beat">
      <span data-name="label">Departure</span>
      <meta content="complete" data-field="status">
      <meta content="" data-field="id">
      <meta content="" data-field="track">
      <meta content="" data-field="follows">
      <div data-name="body">
        <p>Leave the city under cover of darkness</p>
      </div>
    </li>
    <li data-field="beat" data-rune="beat">
      <span data-name="label">Trial</span>
      <meta content="active" data-field="status">
      <meta content="" data-field="id">
      <meta content="" data-field="track">
      <meta content="" data-field="follows">
      <div data-name="body">
        <p>Cross the Whispering Wastes</p>
      </div>
    </li>
    <li data-field="beat" data-rune="beat">
      <span data-name="label">Confrontation</span>
      <meta content="planned" data-field="status">
      <meta content="" data-field="id">
      <meta content="" data-field="track">
      <meta content="" data-field="follows">
      <div data-name="body">
        <p>Face the guardian of the vault</p>
      </div>
    </li>
    <li data-field="beat" data-rune="beat">
      <span data-name="label">Return</span>
      <meta content="abandoned" data-field="status">
      <meta content="" data-field="id">
      <meta content="" data-field="track">
      <meta content="" data-field="follows">
      <div data-name="body">
        <p>Bring the crown back to the capital</p>
      </div>
    </li>
  </ol>
</section>

Type:questStructure:linear

The Quest for the Crown

The heroes must recover the lost crown before the solstice.

Discovery
Find the ancient map in the library
Departure
Leave the city under cover of darkness
Trial
Cross the Whispering Wastes
Confrontation
Face the guardian of the vault
Return
Bring the crown back to the capital

<section data-field="content-section" typeof="CreativeWork" class="rf-plot rf-plot--quest rf-plot--linear" data-plot-type="quest" data-structure="linear" data-rune="plot" data-density="full">
  <div data-name="badge" class="rf-plot__badge" data-section="header">
    <span data-name="type-badge" data-meta-type="category" data-meta-rank="primary" class="rf-plot__type-badge">
      <span data-meta-label="">Type:</span>
      <span data-meta-value="">quest</span>
    </span>
    <span data-name="structure-badge" data-meta-type="category" data-meta-rank="secondary" class="rf-plot__structure-badge">
      <span data-meta-label="">Structure:</span>
      <span data-meta-value="">linear</span>
    </span>
  </div>
  <span data-name="title" property="name" class="rf-plot__title" data-section="title">The Quest for the Crown</span>
  <p>The heroes must recover the lost crown before the solstice.</p>
  <ol data-name="beats" class="rf-plot__beats" data-sequence="connected">
    <li data-field="beat" class="rf-beat rf-beat--complete" data-status="complete" data-checked="checked" data-rune="beat" data-density="full">
      <span data-name="label" class="rf-beat__label">Discovery</span>
      <div data-name="body" class="rf-beat__body">
        <p>Find the ancient map in the library</p>
      </div>
    </li>
    <li data-field="beat" class="rf-beat rf-beat--complete" data-status="complete" data-checked="checked" data-rune="beat" data-density="full">
      <span data-name="label" class="rf-beat__label">Departure</span>
      <div data-name="body" class="rf-beat__body">
        <p>Leave the city under cover of darkness</p>
      </div>
    </li>
    <li data-field="beat" class="rf-beat rf-beat--active" data-status="active" data-checked="active" data-rune="beat" data-density="full">
      <span data-name="label" class="rf-beat__label">Trial</span>
      <div data-name="body" class="rf-beat__body">
        <p>Cross the Whispering Wastes</p>
      </div>
    </li>
    <li data-field="beat" class="rf-beat rf-beat--planned" data-status="planned" data-checked="unchecked" data-rune="beat" data-density="full">
      <span data-name="label" class="rf-beat__label">Confrontation</span>
      <div data-name="body" class="rf-beat__body">
        <p>Face the guardian of the vault</p>
      </div>
    </li>
    <li data-field="beat" class="rf-beat rf-beat--abandoned" data-status="abandoned" data-checked="skipped" data-rune="beat" data-density="full">
      <span data-name="label" class="rf-beat__label">Return</span>
      <div data-name="body" class="rf-beat__body">
        <p>Bring the crown back to the capital</p>
      </div>
    </li>
  </ol>
</section>

Plot types

Different narrative structures for various storytelling needs.

{% plot title="The Shadow War" type="campaign" structure="branching" %}
A long-running conflict with multiple factions vying for control.

- [x] **Opening moves** — The assassination of the ambassador
- [>] **Escalation** — Border skirmishes erupt across the north
- [ ] **Alliance** — Unite the free cities against the common threat
- [ ] **Final battle** — Storm the Dark Citadel
{% /plot %}

<section data-field="content-section" data-rune="plot" typeof="CreativeWork">
  <span data-name="title" property="name">The Shadow War</span>
  <meta content="campaign" data-field="plot-type" property="genre">
  <meta content="branching" data-field="structure">
  <meta content="" data-field="tags">
  <p>A long-running conflict with multiple factions vying for control.</p>
  <ol data-name="beats">
    <li data-field="beat" data-rune="beat">
      <span data-name="label">Opening moves</span>
      <meta content="complete" data-field="status">
      <meta content="" data-field="id">
      <meta content="" data-field="track">
      <meta content="" data-field="follows">
      <div data-name="body">
        <p>The assassination of the ambassador</p>
      </div>
    </li>
    <li data-field="beat" data-rune="beat">
      <span data-name="label">Escalation</span>
      <meta content="active" data-field="status">
      <meta content="" data-field="id">
      <meta content="" data-field="track">
      <meta content="" data-field="follows">
      <div data-name="body">
        <p>Border skirmishes erupt across the north</p>
      </div>
    </li>
    <li data-field="beat" data-rune="beat">
      <span data-name="label">Alliance</span>
      <meta content="planned" data-field="status">
      <meta content="" data-field="id">
      <meta content="" data-field="track">
      <meta content="" data-field="follows">
      <div data-name="body">
        <p>Unite the free cities against the common threat</p>
      </div>
    </li>
    <li data-field="beat" data-rune="beat">
      <span data-name="label">Final battle</span>
      <meta content="planned" data-field="status">
      <meta content="" data-field="id">
      <meta content="" data-field="track">
      <meta content="" data-field="follows">
      <div data-name="body">
        <p>Storm the Dark Citadel</p>
      </div>
    </li>
  </ol>
</section>

Type:campaignStructure:branching

The Shadow War

A long-running conflict with multiple factions vying for control.

Opening moves
The assassination of the ambassador
Escalation
Border skirmishes erupt across the north
Alliance
Unite the free cities against the common threat
Final battle
Storm the Dark Citadel

<section data-field="content-section" typeof="CreativeWork" class="rf-plot rf-plot--campaign rf-plot--branching" data-plot-type="campaign" data-structure="branching" data-rune="plot" data-density="full">
  <div data-name="badge" class="rf-plot__badge" data-section="header">
    <span data-name="type-badge" data-meta-type="category" data-meta-rank="primary" class="rf-plot__type-badge">
      <span data-meta-label="">Type:</span>
      <span data-meta-value="">campaign</span>
    </span>
    <span data-name="structure-badge" data-meta-type="category" data-meta-rank="secondary" class="rf-plot__structure-badge">
      <span data-meta-label="">Structure:</span>
      <span data-meta-value="">branching</span>
    </span>
  </div>
  <span data-name="title" property="name" class="rf-plot__title" data-section="title">The Shadow War</span>
  <p>A long-running conflict with multiple factions vying for control.</p>
  <ol data-name="beats" class="rf-plot__beats">
    <li data-field="beat" class="rf-beat rf-beat--complete" data-status="complete" data-checked="checked" data-rune="beat" data-density="full">
      <span data-name="label" class="rf-beat__label">Opening moves</span>
      <div data-name="body" class="rf-beat__body">
        <p>The assassination of the ambassador</p>
      </div>
    </li>
    <li data-field="beat" class="rf-beat rf-beat--active" data-status="active" data-checked="active" data-rune="beat" data-density="full">
      <span data-name="label" class="rf-beat__label">Escalation</span>
      <div data-name="body" class="rf-beat__body">
        <p>Border skirmishes erupt across the north</p>
      </div>
    </li>
    <li data-field="beat" class="rf-beat rf-beat--planned" data-status="planned" data-checked="unchecked" data-rune="beat" data-density="full">
      <span data-name="label" class="rf-beat__label">Alliance</span>
      <div data-name="body" class="rf-beat__body">
        <p>Unite the free cities against the common threat</p>
      </div>
    </li>
    <li data-field="beat" class="rf-beat rf-beat--planned" data-status="planned" data-checked="unchecked" data-rune="beat" data-density="full">
      <span data-name="label" class="rf-beat__label">Final battle</span>
      <div data-name="body" class="rf-beat__body">
        <p>Storm the Dark Citadel</p>
      </div>
    </li>
  </ol>
</section>

Attributes

Attribute	Type	Default	Description
`title`	`string`	—	Plot title (required)
`type`	`string`	`arc`	Plot type: `arc`, `quest`, `subplot`, `campaign`, `episode`, `act`, or `chapter`
`structure`	`string`	`linear`	Narrative structure: `linear`, `parallel`, `branching`, or `web`
`tags`	`string`	—	Comma-separated metadata tags

Beat markers

Marker	Status	Description
`[x]`	Complete	This beat has been resolved
`[>]`	Active	Currently in progress
`[ ]`	Planned	Not yet started
`[-]`	Abandoned	Dropped from the storyline

Common attributes

All block runes share these attributes for layout and theming.

Attribute	Type	Default	Description
`width`	`string`	`content`	Page grid width: `content`, `wide`, or `full`
`spacing`	`string`	—	Vertical spacing: `flush`, `tight`, `default`, `loose`, or `breathe`
`inset`	`string`	—	Horizontal padding: `flush`, `tight`, `default`, `loose`, or `breathe`
`tint`	`string`	—	Named colour tint from theme configuration
`tint-mode`	`string`	`auto`	Colour scheme override: `auto`, `dark`, or `light`
`bg`	`string`	—	Named background preset from theme configuration

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan