@possibleworlds/tender 0.1.0-rc.1

package/templates/default/styles.css

@@ -0,0 +1,39 @@
+/* Base typography. */
+body {
+  font-family: Georgia, serif;
+  font-size: 11pt;
+  line-height: 1.5;
+}
+h1 { font-size: 22pt; margin: 0 0 0.6em; }
+h2 { font-size: 18pt; margin: 0 0 0.5em; }
+h3 { font-size: 14pt; margin: 0 0 0.4em; }
+p  { margin: 0 0 0.6em; }
+
+/* Markdown tables (GFM `| a | b |` syntax → <table>/<th>/<td>).
+   No `text-align` here: GFM column alignment rides on the cells'
+   presentational `align` attribute, which a stylesheet rule would clobber. */
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0 0 0.8em;
+  font-size: 0.95em;
+}
+th, td {
+  padding: 0.3em 0.6em;
+  vertical-align: top;
+  border-bottom: 0.5pt solid #ccc;
+}
+thead th { border-bottom-width: 1pt; }
+caption { margin-bottom: 0.3em; font-style: italic; }
+
+/* Running-head bookkeeping: lets `{chapter}` in project.yaml's
+   header config resolve to the most recent <h1>. */
+.margin-label, h1, h2, h3 {
+  string-set: chapter content(text);
+}
+
+/* Add component-specific styles below as you create components, or
+   keep them in each component's <style> block for tighter coupling.
+   Either pattern works; the cascade order is project.yaml-generated
+   first, then component <style> blocks (alphabetical), then this
+   file last — so styles.css always wins source-order conflicts. */

package/templates/open-circle/components/ad-lib.tender

@@ -0,0 +1,8 @@
+---
+slots: [suggested]
+---
+
+<div class="ad-lib no-break">
+  <div class="ad-lib__suggested">{{{suggested}}}</div>
+  <div class="ad-lib__box"><span class="ad-lib__label">your version</span></div>
+</div>

package/templates/open-circle/components/cover-byline.tender

@@ -0,0 +1 @@
+<div class="cover-byline">{{{body}}}</div>

package/templates/open-circle/components/cover-spiral.tender

@@ -0,0 +1 @@
+<div class="cover-spiral"><img src="assets/images/spiral.png" alt=""></div>

package/templates/open-circle/components/cover-tagline.tender

@@ -0,0 +1 @@
+<div class="cover-tagline">{{{body}}}</div>

package/templates/open-circle/components/margin-label.tender

@@ -0,0 +1,5 @@
+---
+tag: span
+class: margin-label
+inline: true
+---

package/templates/open-circle/components/participant-name.tender

@@ -0,0 +1,5 @@
+---
+tag: span
+class: participant-name
+inline: true
+---

package/templates/open-circle/components/row.tender

@@ -0,0 +1,12 @@
+---
+params: [label, icon, speaker, no-break]
+---
+
+<div class="row{{#if no-break}} no-break{{/if}}">
+  <div class="col-l">
+    {{#if speaker}}<span class="speaker-name">{{speaker}}</span>{{/if}}
+    {{#if label}}<span class="margin-label">{{label}}</span>{{/if}}
+    {{#if icon}}<img src="assets/images/{{icon}}.png" alt="" class="margin-icon">{{/if}}
+  </div>
+  <div class="col-r">{{{body}}}</div>
+</div>

package/templates/open-circle/components/spanning-row.tender

@@ -0,0 +1 @@
+<div class="spanning-row">{{{body}}}<hr class="spanning-rule"></div>

package/templates/open-circle/components/speaker-name.tender

@@ -0,0 +1,5 @@
+---
+tag: span
+class: speaker-name
+inline: true
+---

package/templates/open-circle/components/stage-direction.tender

@@ -0,0 +1,5 @@
+---
+tag: span
+class: stage-direction
+inline: true
+---

package/templates/open-circle/components/yellow-tag.tender

@@ -0,0 +1,5 @@
+---
+tag: span
+class: yellow-tag
+inline: true
+---

package/templates/open-circle/content.md

@@ -0,0 +1,157 @@
+=== page{template=cover}
+
+<div class="cover-title">
+
+# Open Circle
+
+</div>
+
+<div class="cover-tags">
+  <div><span class="yellow-tag">A facilitator's playbook for<br>community story workshops</span></div>
+  <div><span class="yellow-tag">By Mara Ellison and Devin Park</span></div>
+</div>
+
+<row>
+
+Open Circle is a participatory workshop format for groups of 15–20 people. Over three hours, participants share short stories from their neighbourhood, listen attentively to each other, and weave threads from one telling into the next — building a portrait of a place that no single voice could draw alone.
+
+The workshop sits somewhere between a sharing circle and a writing exercise. Participants do most of the talking; facilitators hold the time, the prompts, and the rhythm.
+
+The form is open, attentive, and unhurried. Make room for silence. Let stories find each other. Trust the circle.
+
+</row>
+
+<cover-spiral />
+
+=== page
+
+<spanning-row>
+
+## Introducing The Four Workshop Stages
+
+</spanning-row>
+
+<row>
+
+The session is shaped around four stages. The time allocations below are guidance, not law — a circle that's finding its rhythm is worth more than a stage finished on the clock. Keep an eye on the whole arc.
+
+</row>
+
+<row label="Approx 30 minutes" icon=clock no-break>
+
+#### Stage 1. Arrival, Names, and Setting the Circle
+
+People arrive, write their name on a label, and find a seat in the circle. Facilitators offer a short welcome, name the agreement of the room, and lead a one-breath check-in so every voice has been heard once.
+
+</row>
+
+<row label="Approx 30 minutes" icon=clock no-break>
+
+#### Stage 2. Preparation for the Sharing
+
+Each participant takes a prompt card and five minutes of quiet to jot down notes for the story they'd like to bring. Prompts point at place — a corner, a building, a route, a season — not at biography.
+
+</row>
+
+<row label="90 minutes" icon=clock no-break>
+
+#### Stage 3. The Sharing
+
+The circle takes turns. Each person speaks for up to three minutes, holding a small stone while it is their turn. The stone passes left. Listeners do not interrupt; the only response, between turns, is a moment of held quiet.
+
+</row>
+
+<row label="30 minutes" icon=clock no-break>
+
+#### Stage 4. Reflection and Threads
+
+Once the circle has completed, facilitators invite participants to name a thread they noticed running between stories. The aim is recognition, not summary — the work of weaving belongs to the room.
+
+</row>
+
+=== page
+
+<spanning-row>
+
+## Stage 1. Arrival
+
+</spanning-row>
+
+<row label="5 minutes" icon=clock no-break>
+
+Participants arrive and are welcomed at the door. <span class="stage-direction">Facilitator A stands near the entrance with the name labels. Facilitator B sets out the prompt cards and the stone on the central table.</span> A small bowl of pebbles by the door doubles as a tally — one in the bowl per person seated.
+
+</row>
+
+<row speaker="Facilitator A" icon=speaker no-break>
+
+<p class="stage-direction">Speaking to the room as people settle.</p>
+
+Welcome, everyone. We're glad you're here. We're going to spend the next three hours in a circle together — telling, listening, and noticing the threads that run between our stories about this place.
+
+</row>
+
+<ad-lib>
+
+@@ suggested
+
+"Before we begin, a few words about where we are and why we're gathered. [Name your location.] This is a place with its own long story — of the people who have lived and worked here, of the buildings and routes and corners that hold the years, of the seasons and weather that have shaped it. Tonight we're adding to that record, one telling at a time…"
+
+</ad-lib>
+
+<row speaker="Facilitator B" icon=speaker no-break>
+
+I'll be keeping a soft eye on the time so you don't have to. <span class="stage-direction">Holds up the small stone.</span> And this is the talking stone — it's how we'll know whose turn it is.
+
+</row>
+
+<row label="Note" icon=pointer no-break>
+
+The warmth here is intentional. A short, slightly playful opening eases tension at the start of the sharing and models a dynamic of care between the two facilitators — making the circle feel inviting rather than procedural.
+
+</row>
+
+=== page
+
+<spanning-row>
+
+## What You Need to Run the Workshop
+
+</spanning-row>
+
+<row label="The Prompt Cards" icon=check no-break>
+
+Print one set of prompt cards per workshop — short questions pointing at place, not biography. Download Prompt Card Template, or write your own to suit the location.
+
+</row>
+
+<row label="The Talking Stone" icon=check no-break>
+
+Any small object that fits the palm will do; the function is ceremonial, not technical. A river-smoothed stone or a wooden bead works well — heavy enough to feel deliberate when it passes.
+
+</row>
+
+<row label="Stationery" icon=check no-break>
+
+- Index cards or postcards (one per participant)
+- Soft pencils or felt-tip pens
+- Name labels and a marker pen
+- A small bowl of pebbles by the door (for the seated-person tally)
+
+</row>
+
+<row label="Furniture & Room Setup" icon=check no-break>
+
+- Chairs arranged in a single circle, no table in the middle
+- A side table for the prompt cards, the stone, and the bowl of pebbles
+- Soft lighting if you can; overhead fluorescents tend to flatten the room
+- A clock visible to facilitators only
+
+</row>
+
+<row label="Refreshments" icon=check no-break>
+
+- Water, tea, and coffee on a side table
+- Something simple to share — flatbread, fruit, biscuits
+
+</row>

package/templates/open-circle/project.yaml

@@ -0,0 +1,40 @@
+page-templates:
+  default:
+    size: A4
+    margin: { top: 12mm, bottom: 12mm, inner: 12mm, outer: 12mm }
+  cover:
+    size: A4
+    margin: { top: 12mm, bottom: 12mm, inner: 12mm, outer: 12mm }
+
+design-tokens:
+  font:
+    display: "'P22 Mackinac', Georgia, serif"
+    body: "'Inter', system-ui, sans-serif"
+    mono: "'JetBrains Mono', monospace"
+  color:
+    ink: '#1a1a1a'
+    page: '#ffffff'
+    accent: '#FFE600'
+  size:
+    h1: 24pt
+    h2: 20pt
+    h3: 16pt
+    h4: 12pt
+    body: 12pt
+    mono: 10pt
+    tag: 9pt
+  leading:
+    body: 1.6
+    head: 1.2
+  col:
+    gap: 8mm
+  space:
+    baseline-offset: 0px
+
+typography:
+  lang: en
+  hyphenation:
+    enabled: true
+    min-word-length: 6
+    min-chars-before: 3
+    min-chars-after: 3

package/templates/open-circle/styles.css

@@ -0,0 +1,216 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
+
+/* ── Tokens ──
+   Design tokens live in project.yaml under `design-tokens:` and compile
+   to a :root { --token: value; } block prepended to this stylesheet.
+   See docs for the full token list; --space-baseline-offset is the
+   baseline offset between JetBrains Mono and Inter (start at 0, tune
+   in 0.5px increments after loading real fonts).
+*/
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--color-page);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+/* ── Base Type ── */
+h1, h2, h3 {
+  font-family: var(--font-display);
+  font-weight: 400;
+  line-height: var(--leading-head);
+  margin: 0;
+}
+h1 { font-size: var(--size-h1); }
+h2 { font-size: var(--size-h2); }
+h3 { font-size: var(--size-h3); }
+
+h4 {
+  font-family: var(--font-body);
+  font-size: var(--size-h4);
+  font-weight: 600;
+  line-height: var(--leading-head);
+  margin: 0 0 0.3em 0;
+}
+
+p {
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+  margin: 0 0 0.75em 0;
+  orphans: 3;
+  widows: 3;
+}
+p:last-child { margin-bottom: 0; }
+
+ul {
+  margin: 0 0 0.75em 0;
+  padding-left: 1.2em;
+}
+ul li {
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+  margin-bottom: 0.2em;
+}
+ul li:last-child { margin-bottom: 0; }
+
+strong { font-weight: 600; }
+
+/* ── Page Breaks ── */
+.no-break { break-inside: avoid; }
+.break-before { break-before: page; }
+
+/* ── Two-Column Row ── */
+/*
+  .row is the core layout unit.
+  Each row: l-col (3fr) + r-col (5fr), baseline-aligned.
+  align-items: first baseline aligns the mono label
+  with the first line of body copy in r-col.
+*/
+.row {
+  display: grid;
+  grid-template-columns: 3fr 5fr;
+  column-gap: var(--col-gap);
+  align-items: first baseline;
+  margin-bottom: 1.5em;
+}
+.row:last-child { margin-bottom: 0; }
+
+/* l-col inner: label left, icon right */
+.col-l {
+  display: flex;
+  justify-content: space-between;
+  align-items: first baseline;
+  margin-top: var(--space-baseline-offset);
+}
+
+/* ── Spanning Header ── */
+.spanning-row {
+  margin-bottom: 1.5em;
+}
+.spanning-row h1,
+.spanning-row h2,
+.spanning-row h3 {
+  margin-bottom: 0.2em;
+}
+.spanning-rule {
+  border: none;
+  border-top: 0.5px solid var(--color-ink);
+  margin: 0.3em 0 0 0;
+}
+
+/* ── Margin Label ── */
+.margin-label {
+  font-family: var(--font-mono);
+  font-size: var(--size-mono);
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  line-height: var(--leading-body);
+  color: var(--color-ink);
+}
+
+/* All l-col icons: same size as label text, baseline-offset */
+.margin-icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  margin-left: 0.5em;
+  position: relative;
+  top: 0.15em; /* optical baseline correction */
+}
+
+/* ── Speaker ── */
+.speaker-name {
+  font-family: var(--font-mono);
+  font-size: var(--size-mono);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: var(--leading-body);
+  color: var(--color-ink);
+}
+/* speaker icon inherits .margin-icon */
+
+/* ── Inline Text Styles ── */
+
+/* block — sits between paragraphs as its own <p> */
+p.stage-direction { font-style: italic; }
+
+/* inline — <span> within a body paragraph */
+span.stage-direction { font-style: italic; }
+
+/* inline semibold within body copy */
+.participant-name { font-weight: 600; }
+
+/* ── Ad-lib ── */
+/*
+  L-col: suggested script text, italic.
+  R-col: ruled boxout for handwriting.
+  Box height = l-col height (set by content) × 1.5.
+  Achieved by making the grid row stretch, then adding
+  50% extra via padding-bottom on the box.
+*/
+.ad-lib {
+  display: grid;
+  grid-template-columns: 3fr 5fr;
+  column-gap: var(--col-gap);
+  align-items: stretch;
+  margin-bottom: 1.5em;
+}
+.ad-lib__suggested {
+  font-style: italic;
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+}
+.ad-lib__box {
+  border: 1.5px solid var(--color-ink);
+  padding: 0.5em 0.75em;
+  /* stretch to grid row height, then add 50% more via padding */
+  padding-bottom: 50%;
+  box-sizing: border-box;
+}
+.ad-lib__label {
+  font-family: var(--font-body);
+  font-size: var(--size-body);
+  line-height: var(--leading-body);
+  color: #aaaaaa;
+  display: block;
+}
+
+/* ── Yellow Tag ── */
+.yellow-tag {
+  display: inline-block;
+  background: var(--color-accent);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: var(--size-tag);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 3px 7px;
+  line-height: 1.3;
+}
+
+/* ── Cover layout ── */
+/*
+  Cover page is a flex column filling the printable area, so we can push
+  the spiral to the bottom-left with margin-top: auto.
+*/
+.page[data-page-template="cover"] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.cover-title { margin-bottom: 2em; }
+.cover-tags {
+  display: grid;
+  grid-template-columns: 3fr 5fr;
+  column-gap: var(--col-gap);
+  margin-bottom: 3em;
+}
+.cover-spiral { margin-top: auto; }
+.cover-spiral img { width: 25%; }