@refrakt-md/lumina 0.15.0 → 0.16.0

package/base.css

@@ -19,6 +19,7 @@
 @import './styles/layouts/blog.css';
 @import './styles/layouts/on-this-page.css';
 @import './styles/layouts/search.css';
+@import './styles/layouts/theme-toggle.css';
 @import './styles/layouts/version-switcher.css';
 @import './styles/layouts/split.css';
 

package/contracts/structures.json

@@ -200,6 +200,69 @@
 				"{content}"
 			]
 		},
+		"Badge": {
+			"block": "badge",
+			"root": ".rf-badge",
+			"dataRune": "badge",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Collection": {
+			"block": "collection",
+			"root": ".rf-collection",
+			"dataRune": "collection",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Relationships": {
+			"block": "relationships",
+			"root": ".rf-relationships",
+			"dataRune": "relationships",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Aggregate": {
+			"block": "aggregate",
+			"root": ".rf-aggregate",
+			"dataRune": "aggregate",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"Progress": {
+			"block": "progress",
+			"root": ".rf-progress",
+			"dataRune": "progress",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"sentiment": {
+					"source": "meta",
+					"classPattern": ".rf-progress--{value}",
+					"dataAttribute": "data-sentiment"
+				}
+			}
+		},
+		"Card": {
+			"block": "card",
+			"root": ".rf-card",
+			"dataRune": "card",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"layout": {
+					"source": "meta",
+					"default": "stacked",
+					"classPattern": ".rf-card--{value}",
+					"dataAttribute": "data-layout"
+				}
+			}
+		},
 		"Embed": {
 			"block": "embed",
 			"root": ".rf-embed",

package/index.css

@@ -19,6 +19,7 @@
 @import './styles/layouts/blog.css';
 @import './styles/layouts/on-this-page.css';
 @import './styles/layouts/search.css';
+@import './styles/layouts/theme-toggle.css';
 @import './styles/layouts/version-switcher.css';
 @import './styles/layouts/split.css';
 @import './styles/layouts/plan.css';
@@ -41,6 +42,7 @@
 @import './styles/runes/annotate.css';
 @import './styles/runes/audio.css';
 @import './styles/runes/api.css';
+@import './styles/runes/card.css';
 @import './styles/runes/badge.css';
 @import './styles/runes/bento.css';
 @import './styles/runes/blog.css';
@@ -49,6 +51,10 @@
 @import './styles/runes/budget.css';
 @import './styles/runes/cast.css';
 @import './styles/runes/character.css';
+@import './styles/runes/collection.css';
+@import './styles/runes/relationships.css';
+@import './styles/runes/aggregate.css';
+@import './styles/runes/progress.css';
 @import './styles/runes/changelog.css';
 @import './styles/runes/chart.css';
 @import './styles/runes/compare.css';
@@ -117,11 +123,6 @@
 @import './styles/runes/bug.css';
 @import './styles/runes/decision.css';
 @import './styles/runes/milestone.css';
-@import './styles/runes/backlog.css';
-@import './styles/runes/decision-log.css';
 @import './styles/runes/plan-progress.css';
-@import './styles/runes/plan-activity.css';
 @import './styles/runes/plan-ref.css';
-@import './styles/runes/plan-relationships.css';
 @import './styles/runes/plan-history.css';
-@import './styles/runes/plan-entity-tabs.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.15.0",
-    "@refrakt-md/transform": "0.15.0",
-    "@refrakt-md/types": "0.15.0"
+    "@refrakt-md/runes": "0.16.0",
+    "@refrakt-md/transform": "0.16.0",
+    "@refrakt-md/types": "0.16.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/layouts/docs.css

@@ -100,6 +100,15 @@
 	background: var(--rf-color-bg, #fff);
 	z-index: 5;
 }
+/* Match the sticky offset in the natural-flow position too. The fixed header
+ * is out of flow so `.rf-docs-body` starts at viewport top; without this
+ * margin, the sidebar's static position sits at Y=0 with its top 3.125rem
+ * hidden under the header — visible only when the page scrolls enough for
+ * sticky to activate. Scoped to `:has(.rf-docs-header)` so layouts without a
+ * header don't gain an unwanted top gap. */
+html:has(.rf-docs-header) .rf-docs-sidebar {
+	margin-top: 3.125rem;
+}
 .rf-docs-sidebar::-webkit-scrollbar {
 	width: 0;
 }
@@ -190,6 +199,8 @@ html:has(.rf-docs-header) {
 	padding: 0.625rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg, #fff);
+	max-width: 100%;
+	overflow: hidden;
 }
 .rf-docs-toolbar__hamburger {
 	background: none;
@@ -206,6 +217,12 @@ html:has(.rf-docs-header) {
 .rf-docs-toolbar__breadcrumb {
 	font-size: 0.8rem;
 	color: var(--rf-color-muted);
+	/* `flex: 1 1 0` (basis 0, not auto) so the breadcrumb shrinks against
+	 * the available space rather than starting at its full content width —
+	 * combined with `min-width: 0` this is what triggers ellipsis on long
+	 * titles. Without basis 0 a long page title overflows the toolbar and
+	 * forces horizontal page scroll on narrow viewports. */
+	flex: 1 1 0;
 	min-width: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;

package/styles/layouts/theme-toggle.css

@@ -0,0 +1,67 @@
+/* Theme-mode toggle button (SPEC-073).
+ *
+ * Layout chrome — a peer of the search trigger, placed in the header/toolbar.
+ * The `theme-toggle` behavior cycles auto → light → dark and reflects the
+ * current preference onto the button as `data-theme-pref`; the icon below
+ * tracks that. Ported verbatim from the former `ThemeToggle.svelte` so the
+ * look is unchanged, with the icon selector rekeyed from a swapped class to
+ * the `data-theme-pref` attribute. */
+.rf-theme-toggle {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 2rem;
+	padding: 0;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	background: transparent;
+	color: var(--rf-color-text);
+	cursor: pointer;
+	transition: background-color 120ms ease, border-color 120ms ease;
+}
+.rf-theme-toggle:hover {
+	background: var(--rf-color-surface-hover);
+}
+.rf-theme-toggle:focus-visible {
+	outline: 2px solid var(--rf-color-primary);
+	outline-offset: 2px;
+}
+
+/* In the header chrome the brand/nav and the controls are flex siblings
+ * arranged by `order` (search is order 1, nav/menu order 3). Without this the
+ * toggle defaults to order 0 and groups with the brand on the left; order 2
+ * places it just after the right-aligned search trigger — matching the former
+ * component. The plan toolbar arranges by DOM order, so it isn't included. */
+.rf-header__inner .rf-theme-toggle,
+.rf-docs-header__inner .rf-theme-toggle,
+.rf-blog-header__inner .rf-theme-toggle {
+	order: 2;
+}
+
+/* Hidden on tint-locked pages: the saved preference is preserved but ignored
+ * while the lock is active (SPEC-052), so a toggle that does nothing would be
+ * confusing. Pure CSS — the lock lands on <html> at SSR and on client nav. */
+html[data-tint-lock="true"] .rf-theme-toggle {
+	display: none;
+}
+
+/* Icon — a currentColor-tinted mask. Defaults to the auto glyph so the SSR'd
+ * button shows an icon before the behavior sets data-theme-pref; the light and
+ * dark glyphs swap in by state. */
+.rf-theme-toggle__icon {
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
+	background: currentColor;
+	mask-size: contain;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2a10 10 0 0 0 0 20Z' fill='currentColor'/></svg>");
+}
+.rf-theme-toggle[data-theme-pref="light"] .rf-theme-toggle__icon {
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/></svg>");
+}
+.rf-theme-toggle[data-theme-pref="dark"] .rf-theme-toggle__icon {
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>");
+}

package/styles/runes/accordion.css

@@ -1,9 +1,6 @@
 /* Accordion */
-.rf-accordion {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	overflow: hidden;
-}
+/* No wrapping border / radius — the only chrome is the divider between items. */
+.rf-accordion {}
 .rf-accordion__preamble {
 	margin-bottom: 1.5rem;
 }
@@ -52,35 +49,69 @@
 .rf-accordion-item__header {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
-	padding: 0.875rem 1.25rem;
+	gap: 0.5rem;
+	padding: 0.875rem 0rem;
 	font-weight: 600;
 	font-size: 0.95rem;
 	cursor: pointer;
 	user-select: none;
-	transition: background-color 200ms ease;
 	list-style: none;
 }
 .rf-accordion-item__header::-webkit-details-marker { display: none; }
 .rf-accordion-item__header::marker { display: none; content: ''; }
-.rf-accordion-item__header:hover {
-	background: var(--rf-color-surface);
-}
-.rf-accordion-item__header::after {
-	content: '▾';
+/* Chevron in front of the label — points right when collapsed, rotates 90°
+ * to point down when expanded. SVG mask so the glyph is crisp at any size
+ * and tints with the muted text color. */
+.rf-accordion-item__header::before {
+	content: '';
 	flex-shrink: 0;
-	color: var(--rf-color-muted);
+	width: 0.75rem;
+	height: 0.75rem;
+	background: var(--rf-color-muted);
+	mask-size: contain;
+	mask-repeat: no-repeat;
+	mask-position: center;
+	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
 	transition: transform 200ms ease;
 }
-.rf-accordion-item[open] .rf-accordion-item__header::after {
-	transform: rotate(180deg);
+.rf-accordion-item[open] .rf-accordion-item__header::before {
+	transform: rotate(90deg);
 }
 .rf-accordion-item__title {
 	flex: 1;
 	min-width: 0;
 }
+/* Per-group count for collection/relationships group-display="accordion".
+ * Inherits the header's font (weight + color) so the count reads as part
+ * of the same label. The header's `gap` handles spacing — no margins needed. */
+.rf-accordion-item__count {
+	flex-shrink: 0;
+}
+/* Animate the panel's collapse / expand. `::details-content` (the auto-generated
+ * wrapper for non-summary content) + `interpolate-size: allow-keywords` lets the
+ * height transition between 0 and auto. `transition-behavior: allow-discrete`
+ * on `content-visibility` keeps the panel reachable during the open animation.
+ * Browsers without `::details-content` support fall back to the native snap. */
+.rf-accordion-item {
+	interpolate-size: allow-keywords;
+}
+.rf-accordion-item::details-content {
+	block-size: 0;
+	overflow: hidden;
+	transition: block-size 250ms ease, content-visibility 250ms allow-discrete;
+}
+.rf-accordion-item[open]::details-content {
+	block-size: auto;
+}
 .rf-accordion-item__body {
 	padding: 0 1.25rem 1rem;
+}
+/* Prose styles for the standalone accordion rune's bodies (paragraphs,
+ * lists, etc.). Scoped to `:not(:has([data-block]))` so they don't bleed into
+ * block-content children like cards inside a collection/relationships
+ * `group-display="accordion"` panel, where the card's own typography
+ * should govern. */
+.rf-accordion-item__body:not(:has([data-block])) {
 	font-size: 0.925rem;
 	line-height: 1.65;
 	color: var(--rf-color-muted);
@@ -88,3 +119,12 @@
 .rf-accordion-item__body p:last-child {
 	margin-bottom: 0;
 }
+/* Block-content children — collection / relationships mark their body-template
+ * items `data-block`. A panel housing them (group-display="accordion") switches
+ * to a flex column with the small gap so cards get the same spacing they'd have
+ * under a heading-grouped layout. */
+.rf-accordion-item__body:has([data-block]) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+}

package/styles/runes/aggregate.css

@@ -0,0 +1,75 @@
+/* Aggregate — counts and per-group breakdowns from the registry (SPEC-076).
+ *
+ * Two modes share the same block class. The no-body inline form is a `<span>`
+ * carrying the integer; the body-zoned form is a `<section>` rendering
+ * preamble / per-group template / fallback. Most of the visual weight inside
+ * the body comes from other runes (`progress`, `badge`, `humanize` text), so
+ * this stylesheet sticks to container chrome and the inline single-number
+ * form.
+ */
+
+/* Block container — vertical rhythm matches collection / relationships. The
+ * bare selector also matches the inline form's `<span>`, but vertical margin
+ * on an inline span has no effect so it's safe to share. */
+.rf-aggregate {
+	margin: var(--rf-spacing-md) 0;
+}
+
+/* Inline single-number form — `<span class="rf-aggregate" data-aggregate="count">`.
+ * Tabular nums keep digits aligned when the count changes between renders;
+ * weight tuned to stand out modestly in prose. */
+.rf-aggregate[data-aggregate='count'] {
+	font-variant-numeric: tabular-nums;
+	font-weight: 600;
+	color: var(--rf-color-text);
+}
+
+/* Preamble — totals chrome above the breakdown (e.g. a progress bar). Trim
+ * first/last-child block margins so the rune's outer rhythm wins over the
+ * template's inner block margins (same pattern collection uses). */
+.rf-aggregate__preamble > :first-child { margin-top: 0; }
+.rf-aggregate__preamble > :last-child { margin-bottom: 0; }
+
+/* Empty state — replaces the breakdown when the query yields nothing. */
+.rf-aggregate__empty {
+	color: var(--rf-color-muted);
+	font-size: 0.9375em;
+}
+.rf-aggregate__empty > :first-child { margin-top: 0; }
+.rf-aggregate__empty > :last-child { margin-bottom: 0; }
+
+/* Items — either the per-group breakdown row, or the ungrouped single-render
+ * slot. Default stack handles the ungrouped case (one block element from the
+ * body). With groups, switch to a wrapping inline row so per-group renders
+ * (badges, pills, …) flow across the page. */
+.rf-aggregate__items {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+	margin-top: var(--rf-spacing-sm);
+}
+.rf-aggregate__items:has(.rf-aggregate__group) {
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+}
+
+/* Direct children of __items (the ungrouped template render) — trim outer
+ * block margins so the rune's outer rhythm wins, same pattern as preamble /
+ * empty. */
+.rf-aggregate__items > :first-child { margin-top: 0; }
+.rf-aggregate__items > :last-child { margin-bottom: 0; }
+
+/* Per-group block — wraps one render of the template. `data-block` is set
+ * by the resolver so we trim its outer block margins (the items-row `gap`
+ * governs inter-group spacing) — same pattern collection / relationships
+ * use for `__item[data-block]`. */
+.rf-aggregate__group {
+	min-width: 0;
+}
+.rf-aggregate__group[data-block] > :first-child {
+	margin-top: 0;
+}
+.rf-aggregate__group[data-block] > :last-child {
+	margin-bottom: 0;
+}

package/styles/runes/badge.css

@@ -1,33 +1,37 @@
-/* Badge rune — standalone inline pill that visually stands out from prose.
+/* Badge rune — standalone inline chip.
  *
- * Unlike the metadata badges that appear inside card chrome (plan items,
- * recipe meta, work item headers), standalone {% badge %} runes are meant
- * to pop. They reuse the universal `--meta-color` set by
- * dimensions/metadata.css's sentiment rules, applied as a sentiment-tinted
- * border, a low-opacity sentiment-tinted background, and sentiment-coloured
- * text. The leading sentiment dot from metadata.css is dropped — the
- * background tint already carries the sentiment cue.
+ * Built atop the metadata pill base (`data-meta-type`), but reshaped to the
+ * compact chip look used by plan-progress status counts: **no border**,
+ * solid-ish sentiment-tinted background, smaller font + tighter padding, and
+ * a small corner radius. Tints come from the universal `--meta-color` set by
+ * `dimensions/metadata.css`'s sentiment rules (positive / caution / negative /
+ * neutral → success / warning / danger / muted). Background is a `color-mix`
+ * of that color, so the chip stays sentiment-flexible — any value the theme
+ * gives `--meta-color` works without per-status selectors.
  *
- * rank="primary" boosts emphasis with a heavier background tint and a
- * bolder weight, useful for "Popular" / "Featured" labels that should
- * dominate over their neighbours.
+ * `rank="primary"` boosts emphasis with a heavier tint and bolder weight,
+ * useful for labels that should dominate over neighbours.
  */
 
 .rf-badge {
 	vertical-align: baseline;
-	border-color: var(--meta-color, var(--rf-color-border));
-	background: color-mix(in srgb, var(--meta-color, transparent) 12%, transparent);
-	color: var(--meta-color, var(--rf-color-text));
+	border: none;
+	background: color-mix(in srgb, var(--meta-color, var(--rf-color-muted)) 10%, transparent);
+	color: var(--meta-color, var(--rf-color-muted));
+	font-size: 0.75rem;
 	font-weight: 500;
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+	white-space: nowrap;
 }
 
 .rf-badge[data-meta-rank="primary"] {
-	background: color-mix(in srgb, var(--meta-color, transparent) 22%, transparent);
+	background: color-mix(in srgb, var(--meta-color, var(--rf-color-muted)) 28%, transparent);
 	font-weight: 600;
 }
 
 /* Drop the sentiment dot — the background tint carries the cue for
- * standalone badges, and the dot competes visually with adjacent prose. */
+ * standalone chips, and the dot competes visually with adjacent prose. */
 .rf-badge::before {
 	display: none;
 }

package/styles/runes/card.css

@@ -0,0 +1,83 @@
+/* card — generic content card (SPEC-070).
+ *
+ * Borderless (no outline) but with a soft surface fill — the surface + the
+ * structure (media split, footer separator) carry the card, no border needed.
+ * The media|content split + responsive collapse + mobile full-bleed media
+ * header come from the shared layouts/split.css (keyed off data-layout /
+ * data-section="media" / data-name="content" / data-media-position).
+ */
+
+.rf-card {
+	position: relative; /* anchor for the stretched link + media bleed */
+	padding: var(--rune-padding, var(--rf-spacing-md));
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+}
+
+.rf-card:hover {
+	background: var(--rf-color-surface-hover);
+}
+
+.rf-card__body > :first-child { margin-top: 0; }
+.rf-card__body > :last-child { margin-bottom: 0; }
+
+/* Eyebrow — a leading paragraph immediately before a heading, the same kicker
+ * treatment as page-section / recipe. */
+.rf-card__eyebrow {
+	font-size: 0.8rem;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.375rem;
+}
+
+/* The body's leading heading is the card title; drop its prose top margin so it
+ * hugs the eyebrow (or the top of the card) instead of opening a gap. */
+.rf-card__title {
+	margin-top: 0;
+}
+
+.rf-card__footer {
+	margin-top: var(--rf-spacing-sm);
+	padding-top: var(--rf-spacing-sm);
+	border-top: 1px solid var(--rf-color-border);
+	font-size: 0.8125em;
+	color: var(--rf-color-muted);
+}
+
+/* In a collection grid, each row stretches its items to the tallest (see
+ * collection.css); these rules make a stacked card spend that height usefully:
+ * the card becomes a column, its content fills the leftover height, and the
+ * body grows so footers drop to a common baseline across the row. Scoped to
+ * stacked cards so a split card's grid (layouts/split.css) is left intact. */
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] {
+	display: flex;
+	flex-direction: column;
+	/* The grid/flex wrapper stretches the card, but a nested flex container
+	 * doesn't always pass that height to its own flex children; pin it so the
+	 * content/body flex:1 reliably fills. */
+	height: 100%;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] > .rf-card__content {
+	flex: 1;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__content {
+	display: flex;
+	flex-direction: column;
+}
+.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__body {
+	flex: 1;
+}
+
+/* Whole-card stretched link — covers the card; real links in body/footer
+ * sit above it via position:relative. */
+.rf-card__link {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+}
+.rf-card a:not(.rf-card__link) {
+	position: relative;
+	z-index: 1;
+}

package/styles/runes/collection.css

@@ -0,0 +1,166 @@
+/* Collection — list / grid / table / cards of registry entities (SPEC-070).
+ *
+ * The block is layout-agnostic; the `data-layout` attribute on the wrapper
+ * selects the arrangement. Built-in items carry `.rf-collection__card` /
+ * `__item`; a body template emits its own markup inside `.rf-collection__item`.
+ */
+
+.rf-collection {
+	margin: var(--rf-spacing-md) 0;
+}
+
+/* Preamble — rendered above items only when the query is non-empty, so a
+ * heading/intro can live inside the rune and vanish with an empty section. */
+.rf-collection__preamble > :first-child { margin-top: 0; }
+
+/* Empty state — shown in place of items when the query yields nothing. */
+.rf-collection__empty {
+	color: var(--rf-color-muted);
+	font-size: 0.9375em;
+}
+
+.rf-collection__items {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+}
+
+/* grid arranges items into responsive columns; list stays a stacked flow.
+ * Item chrome (a card box, bare row, …) comes from the item, not the layout. */
+.rf-collection[data-layout='grid'] .rf-collection__items {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: var(--rf-spacing-md);
+	align-items: stretch;
+}
+
+/* Uniform heights per row: grid stretches each item to the tallest in its row;
+ * a body-template item then lets its card fill that stretched height. */
+.rf-collection[data-layout='grid'] .rf-collection__item {
+	display: flex;
+}
+.rf-collection[data-layout='grid'] .rf-collection__item > * {
+	flex: 1;
+	min-width: 0;
+}
+
+/* Grouped grid: the grid belongs to each group (its items are the cells), not
+ * to __items — whose children are the group blocks (heading groups) or the
+ * accordion wrapper. Left on __items, each group becomes a single cell, i.e. a
+ * column per group. So when __items holds groups it stacks them, and each
+ * group becomes the grid instead, with the group title spanning every column. */
+.rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-collection__group),
+.rf-collection[data-layout='grid'] .rf-collection__items:has(.rf-accordion) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-md);
+}
+.rf-collection[data-layout='grid'] .rf-collection__group {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: var(--rf-spacing-md);
+	align-items: stretch;
+}
+.rf-collection[data-layout='grid'] .rf-collection__group-title {
+	grid-column: 1 / -1;
+}
+
+.rf-collection__item {
+	min-width: 0;
+}
+
+.rf-collection__card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-xs);
+	padding: var(--rf-spacing-md);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+}
+
+.rf-collection__card:hover {
+	background: var(--rf-color-surface-hover);
+}
+
+.rf-collection__title {
+	font-weight: 600;
+	color: var(--rf-color-text);
+	text-decoration: none;
+}
+
+.rf-collection__title:hover {
+	color: var(--rf-color-primary);
+}
+
+.rf-collection__field {
+	font-size: 0.875em;
+	color: var(--rf-color-muted);
+}
+
+/* grouping */
+.rf-collection__group {
+	margin-top: var(--rf-spacing-md);
+	display: flex;
+	flex-direction: column;
+	/* Tight default for short item rows (the built-in title link, no body). */
+	gap: var(--rf-spacing-xs);
+}
+/* Modestly roomier when items carry a body template (block content — a card,
+ * callout, list, …), so they don't collide. Body-template items are marked
+ * `data-block` by the resolver; the built-in inline title rows are not.
+ * Mirrors the rf-relationships rule. */
+.rf-collection__group:has(.rf-collection__item[data-block]) {
+	gap: var(--rf-spacing-sm);
+}
+
+/* Block-content item — let the body template (card / callout / etc.) fill the
+ * container instead of shrink-fitting. No-op in grid mode (items there are
+ * already `display: flex` with `flex: 1` on the child). Trim the outer margins
+ * of the template's first/last block so the group `gap` controls inter-item
+ * spacing — works for any block content, not a wrapper element. */
+.rf-collection__item[data-block] {
+	display: block;
+}
+.rf-collection__item[data-block] > :first-child {
+	margin-top: 0;
+}
+.rf-collection__item[data-block] > :last-child {
+	margin-bottom: 0;
+}
+
+.rf-collection__group-title {
+	margin: 0 0 var(--rf-spacing-sm);
+	font-size: 0.875em;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+
+/* table layout */
+.rf-collection__table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+.rf-collection__table th,
+.rf-collection__table td {
+	padding: var(--rf-spacing-sm);
+	text-align: left;
+	border-bottom: 1px solid var(--rf-color-border);
+}
+
+.rf-collection__table th {
+	font-size: 0.875em;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+
+/* Heading-template cells (`layout="table"` body) wrap their content as
+ * markdown paragraphs, which pick up the global `p { margin-bottom: 1rem }`
+ * and leave dead space inside each row. Drop it inside the table — table
+ * cells don't want paragraph spacing. */
+.rf-collection__table td p {
+	margin: 0;
+}

package/styles/runes/conversation.css

@@ -47,7 +47,12 @@
 }
 .rf-conversation-message__body p { margin: 0; }
 .rf-conversation-message__body p + p { margin-top: 0.5rem; }
-.rf-conversation-message__body > span[property],
+/* The speaker name lives inline-bold inside the bubble (the explicit form
+ * authors it that way, and the named-speakers form injects it the same way),
+ * so the property-carrier span is data only — hide it. Same for the meta
+ * tags the engine consumes. `data-field` is the post-engine attribute set by
+ * createComponentRenderable. */
+.rf-conversation-message > span[data-field="speaker"],
+.rf-conversation-message > meta[data-field] { display: none; }
+.rf-conversation-message__body > span[data-field],
 .rf-conversation-message__body > meta { display: none; }
-.rf-conversation-message > span[property="speaker"],
-.rf-conversation-message > meta[property] { display: none; }

package/styles/runes/nav.css

@@ -67,6 +67,21 @@
 	color: var(--rf-color-muted);
 }
 
+/* Items with an inline badge (recognised by the nav schema and tagged with
+ * data-name="badge") sit on one row so the badge rides alongside the link
+ * instead of wrapping to the next line — the link's `display: block` would
+ * otherwise eat the full row. */
+.rf-nav-item:has(> .rf-badge[data-name="badge"]) {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+	padding: 0;
+}
+.rf-nav-item:has(> .rf-badge[data-name="badge"]) > .rf-nav-item__link {
+	flex: 0 1 auto;
+	min-width: 0;
+}
+
 /* ─── Collapsible groups (vertical sidebar) ───────────────────────────── */
 
 .rf-nav--collapsible .rf-nav-group h2,

package/styles/runes/progress.css

@@ -0,0 +1,49 @@
+/* progress — generic completion bar (SPEC-072 / WORK-285).
+ *
+ * Presentational: the fill width is driven by the `--rf-progress` custom
+ * property set on the root from the computed percent. Generalized from the
+ * former plan milestone progress bar.
+ */
+
+.rf-progress {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+	margin: var(--rf-spacing-sm) 0;
+}
+
+.rf-progress__label {
+	font-weight: 600;
+	color: var(--rf-color-text);
+}
+
+.rf-progress__value {
+	font-weight: 600;
+	color: var(--rf-color-text);
+	margin-left: auto;
+}
+
+.rf-progress__track {
+	flex-basis: 100%;
+	height: 0.5rem;
+	border-radius: var(--rf-radius-pill, 999px);
+	background: var(--rf-color-surface-hover);
+	overflow: hidden;
+}
+
+.rf-progress__fill {
+	display: block;
+	height: 100%;
+	width: var(--rf-progress, 0%);
+	border-radius: inherit;
+	background: var(--rf-color-primary);
+	transition: width 0.3s ease;
+}
+
+/* Sentiment variants tint the fill; the neutral default uses the primary.
+ * Token names follow the sentiment scheme in dimensions/metadata.css
+ * (positive→success, caution→warning, negative→danger). */
+.rf-progress--positive .rf-progress__fill { background: var(--rf-color-success); }
+.rf-progress--caution .rf-progress__fill { background: var(--rf-color-warning); }
+.rf-progress--negative .rf-progress__fill { background: var(--rf-color-danger); }

package/styles/runes/relationships.css

@@ -0,0 +1,132 @@
+/* Relationships — an entity's graph edges, grouped by kind (SPEC-072).
+ *
+ * Generic over kind: the rune emits `data-kind` on each item and a humanized
+ * group heading per kind. Mirrors collection's list chrome.
+ */
+
+.rf-relationships {
+	margin: var(--rf-spacing-md) 0;
+}
+
+.rf-relationships__preamble > :first-child { margin-top: 0; }
+
+.rf-relationships__empty {
+	color: var(--rf-color-muted);
+	font-size: 0.9375em;
+}
+
+.rf-relationships__items {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-sm);
+}
+
+/* grid arranges edges into responsive columns; list stays a stacked flow.
+ * Mirrors collection: item chrome comes from the item (the card built-in, or
+ * a {% card %} in the body template), not the layout. */
+.rf-relationships[data-layout='grid'] .rf-relationships__items {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: var(--rf-spacing-md);
+	align-items: stretch;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__item {
+	display: flex;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__item > * {
+	flex: 1;
+	min-width: 0;
+}
+
+/* Grouped grid: the grid belongs to each group (its items are the cells), not
+ * to __items — whose children are the group blocks (or the accordion wrapper).
+ * Left on __items, each group collapses into a single column. So __items stacks
+ * the groups and each group becomes the grid, with its title spanning. */
+.rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-relationships__group),
+.rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-accordion) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-md);
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__group {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	gap: var(--rf-spacing-md);
+	align-items: stretch;
+}
+.rf-relationships[data-layout='grid'] .rf-relationships__group-title {
+	grid-column: 1 / -1;
+}
+
+.rf-relationships__group {
+	margin-top: var(--rf-spacing-md);
+	display: flex;
+	flex-direction: column;
+	/* Tight default for the built-in inline shape (title + field spans). */
+	gap: var(--rf-spacing-xs);
+}
+.rf-relationships__group:first-child {
+	margin-top: 0;
+}
+/* Modestly roomier when items carry a body template (block content — more than
+ * a one-liner). Body-template items are marked `data-block` by the resolver;
+ * the built-in inline title+field rows are not. */
+.rf-relationships__group:has(.rf-relationships__item[data-block]) {
+	gap: var(--rf-spacing-sm);
+}
+
+.rf-relationships__group-title {
+	margin: 0 0 var(--rf-spacing-sm);
+	font-size: 0.875em;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+
+.rf-relationships__item {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
+}
+/* Block-content item — let the body template (card / callout / etc.) fill the
+ * container width instead of shrink-fitting. Same `data-block` signal as the
+ * group spacing above; trim the template's outer block margins so the group
+ * `gap` governs spacing (works for any block content, not a wrapper element). */
+.rf-relationships__item[data-block] {
+	display: block;
+}
+.rf-relationships__item[data-block] > :first-child {
+	margin-top: 0;
+}
+.rf-relationships__item[data-block] > :last-child {
+	margin-bottom: 0;
+}
+
+/* Card chrome for the grid built-in (mirrors collection's __card). */
+.rf-relationships__card {
+	display: flex;
+	flex-direction: column;
+	gap: var(--rf-spacing-xs);
+	padding: var(--rf-spacing-md);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface);
+}
+.rf-relationships__card:hover {
+	background: var(--rf-color-surface-hover);
+}
+
+.rf-relationships__title {
+	font-weight: 600;
+	color: var(--rf-color-text);
+	text-decoration: none;
+}
+.rf-relationships__title:hover {
+	color: var(--rf-color-primary);
+}
+
+.rf-relationships__field {
+	font-size: 0.875em;
+	color: var(--rf-color-muted);
+}

package/styles/runes/backlog.css

@@ -1,108 +0,0 @@
-/* Backlog */
-
-/* Group sections */
-.rf-backlog__group {
-	margin-bottom: 1.5rem;
-}
-.rf-backlog__group-title {
-	font-size: 0.8125rem;
-	font-weight: 700;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--rf-color-muted);
-	margin: 0 0 0.5rem;
-	padding-bottom: 0.375rem;
-	border-bottom: 1px solid var(--rf-color-border);
-}
-
-/* Cards — mini rune surface */
-.rf-backlog__card {
-	display: flex;
-	flex-direction: column;
-	gap: 0.375rem;
-	padding: 0.75rem 1rem;
-	border-radius: var(--rf-radius-md);
-	background: var(--rf-color-surface);
-	margin-bottom: 0.5rem;
-	transition: box-shadow 200ms ease;
-}
-.rf-backlog__card:hover {
-	box-shadow: var(--rf-shadow-md);
-}
-
-/* Card link — suppress underline */
-.rf-backlog__card-link {
-	text-decoration: none;
-	color: inherit;
-	display: flex;
-	flex-direction: column;
-	gap: 0.375rem;
-}
-.rf-backlog__card-link:hover {
-	text-decoration: none;
-}
-
-/* ─── Header row: ID left, status + progress right ──────────────────── */
-.rf-backlog__card [data-section="header"] {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 0.5rem;
-	margin-bottom: 0;
-}
-.rf-backlog__card-header-left,
-.rf-backlog__card-header-right {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.5rem;
-}
-
-/* Strip borders and pill styling from header badges — doubled class for specificity */
-.rf-backlog__card [data-section="header"] [data-meta-type][data-meta-type] {
-	border: none;
-	padding: 0;
-	border-radius: 0;
-}
-
-/* Suppress sentiment circles in header */
-.rf-backlog__card [data-section="header"] [data-meta-sentiment]::before {
-	display: none;
-}
-
-/* ─── Body: title ───────────────────────────────────────────────────── */
-.rf-backlog__card [data-section="title"] {
-	font-size: 0.9375rem;
-	font-weight: 600;
-}
-
-/* ─── Footer row: uniform secondary pills ───────────────────────────── */
-.rf-backlog__card [data-section="footer"] {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: 0.375rem;
-}
-
-/* Normalize all footer pills to same size regardless of rank/type */
-.rf-backlog__card [data-section="footer"] [data-meta-type] {
-	font-size: 0.75rem;
-	padding: 0.25em 0.75em;
-	opacity: 1;
-}
-
-/* Checklist progress badge — plain text in header.
-   Override checklist dimension styles that match [data-checked]. */
-.rf-backlog__card-progress {
-	font-family: var(--rf-font-mono);
-	font-size: 0.75rem;
-	font-weight: 600;
-	color: var(--rf-color-muted);
-	border: none;
-	padding: 0;
-	padding-left: 0;
-	margin-left: 0;
-	position: static;
-}
-.rf-backlog__card-progress::before {
-	display: none;
-}

package/styles/runes/decision-log.css

@@ -1,46 +0,0 @@
-/* Decision Log */
-
-/* Entry list */
-.rf-decision-log__list {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-.rf-decision-log__entry {
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-	padding: 0.75rem 1rem;
-	border-radius: var(--rf-radius-md);
-	background: var(--rf-color-surface);
-	margin-bottom: 0.5rem;
-	transition: box-shadow 200ms ease;
-}
-.rf-decision-log__entry:hover {
-	box-shadow: var(--rf-shadow-md);
-}
-
-/* Entry link — suppress underline */
-.rf-decision-log__link {
-	text-decoration: none;
-	color: inherit;
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-}
-.rf-decision-log__link:hover {
-	text-decoration: none;
-}
-
-/* Entry title — smaller than full rune */
-.rf-decision-log__entry [data-section="title"] {
-	font-size: 0.9375rem;
-	font-weight: 600;
-}
-
-/* Superseded/deprecated entries — muted with strikethrough */
-.rf-decision-log__entry[data-status="superseded"] [data-section="title"],
-.rf-decision-log__entry[data-status="deprecated"] [data-section="title"] {
-	color: var(--rf-color-muted);
-	text-decoration: line-through;
-}

package/styles/runes/plan-activity.css

@@ -1,87 +0,0 @@
-/* Plan Activity */
-.rf-plan-activity__list {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-.rf-plan-activity__entry {
-	display: flex;
-	align-items: baseline;
-	gap: 0.5rem;
-	padding: 0.25rem 0.5rem;
-	border-radius: var(--rf-radius-sm);
-	font-size: 0.8125rem;
-}
-.rf-plan-activity__entry:nth-child(odd) {
-	background: var(--rf-color-surface);
-}
-.rf-plan-activity__date {
-	font-family: var(--rf-font-mono);
-	font-size: 0.75rem;
-	color: var(--rf-color-muted);
-	white-space: nowrap;
-}
-.rf-plan-activity__type {
-	font-size: 0.75rem;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--rf-color-muted);
-	min-width: 4rem;
-}
-.rf-plan-activity__id {
-	font-family: var(--rf-font-mono);
-	font-size: 0.75rem;
-	color: var(--rf-color-primary);
-	white-space: nowrap;
-}
-.rf-plan-activity__status {
-	font-size: 0.75rem;
-	padding: 0.0625rem 0.375rem;
-	border-radius: var(--rf-radius-sm);
-	white-space: nowrap;
-}
-
-/* Status badge colors */
-.rf-plan-activity__status[data-status="done"],
-.rf-plan-activity__status[data-status="fixed"],
-.rf-plan-activity__status[data-status="accepted"] {
-	color: var(--rf-color-success);
-	background: var(--rf-color-success-bg);
-}
-.rf-plan-activity__status[data-status="in-progress"],
-.rf-plan-activity__status[data-status="confirmed"],
-.rf-plan-activity__status[data-status="review"] {
-	color: var(--rf-color-warning);
-	background: var(--rf-color-warning-bg);
-}
-.rf-plan-activity__status[data-status="ready"],
-.rf-plan-activity__status[data-status="reported"],
-.rf-plan-activity__status[data-status="proposed"] {
-	color: var(--rf-color-info);
-	background: var(--rf-color-info-bg);
-}
-.rf-plan-activity__status[data-status="blocked"] {
-	color: var(--rf-color-danger);
-	background: var(--rf-color-danger-bg);
-}
-.rf-plan-activity__status[data-status="draft"] {
-	color: var(--rf-color-muted);
-	background: var(--rf-color-surface-active);
-}
-.rf-plan-activity__title {
-	color: var(--rf-color-text);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.rf-plan-activity__link {
-	display: flex;
-	align-items: baseline;
-	gap: 0.5rem;
-	color: inherit;
-	text-decoration: none;
-	width: 100%;
-}
-.rf-plan-activity__link:hover .rf-plan-activity__title {
-	color: var(--rf-color-primary);
-}

package/styles/runes/plan-entity-tabs.css

@@ -1,88 +0,0 @@
-/* Plan Entity Tabs — page-level tab navigation for spec/work/bug/decision pages */
-
-.rf-plan-entity-tabs {
-	margin-block-start: var(--rf-spacing-lg, 1.5rem);
-}
-
-/* Tab bar — underline style matching the core tabs rune */
-.rf-plan-entity-tabs__tabs {
-	display: flex;
-	border-bottom: 1px solid var(--rf-color-border, #dee2e6);
-	gap: 0;
-}
-
-/* Tab buttons */
-.rf-plan-entity-tabs__tab {
-	flex: 0 0 auto;
-	padding: 0.625rem 1.25rem;
-	font-size: 0.875rem;
-	font-weight: 500;
-	font-family: inherit;
-	color: var(--rf-color-muted, #868e96);
-	background: none;
-	border: none;
-	border-bottom: 2px solid transparent;
-	cursor: pointer;
-	transition: color 200ms ease, border-color 200ms ease;
-	white-space: nowrap;
-}
-
-.rf-plan-entity-tabs__tab:hover {
-	color: var(--rf-color-text, #212529);
-}
-
-.rf-plan-entity-tabs__tab--active,
-.rf-plan-entity-tabs__tab[data-state="active"] {
-	color: var(--rf-color-primary, #228be6);
-	border-bottom-color: var(--rf-color-primary, #228be6);
-	font-weight: 600;
-}
-
-/* Panels container */
-.rf-plan-entity-tabs__panels {
-	padding: 0;
-	margin: 0;
-}
-
-/* Individual panel */
-.rf-plan-entity-tabs__panel {
-	padding-block-start: var(--rf-spacing-lg, 1.5rem);
-}
-
-.rf-plan-entity-tabs__panel > *:first-child {
-	margin-top: 0;
-}
-
-.rf-plan-entity-tabs__panel > *:last-child {
-	margin-bottom: 0;
-}
-
-/* When inside entity tabs, relationships and history sections don't need
-   their own heading — the tab label provides the context */
-.rf-plan-entity-tabs__panel .rf-plan-relationships__heading,
-.rf-plan-entity-tabs__panel .rf-plan-history__heading {
-	display: none;
-}
-
-/* Remove top margin, padding, and border from relationships/history sections when inside a tab panel */
-.rf-plan-entity-tabs__panel .rf-plan-relationships,
-.rf-plan-entity-tabs__panel .rf-plan-history {
-	margin-block-start: 0;
-	padding-block-start: 0;
-	border-block-start: none;
-}
-
-/* ---- TOC dimming when non-Overview tab is active ---- */
-
-/* Desktop TOC: dim when a non-overview tab is active */
-:has([data-active-tab]:not([data-active-tab="overview"])) .rf-plan-toc {
-	opacity: 0.3;
-	pointer-events: none;
-	transition: opacity 200ms ease;
-}
-
-:has([data-active-tab="overview"]) .rf-plan-toc {
-	opacity: 1;
-	pointer-events: auto;
-	transition: opacity 200ms ease;
-}

package/styles/runes/plan-relationships.css

@@ -1,40 +0,0 @@
-/* Plan relationships section */
-
-.rf-plan-relationships {
-	margin-top: 2rem;
-	padding-top: 1.5rem;
-	border-top: 1px solid var(--rf-color-border, #dee2e6);
-}
-
-.rf-plan-relationships__heading {
-	font-size: 1.125rem;
-	font-weight: 600;
-	color: var(--rf-color-text, #212529);
-	margin: 0 0 1rem;
-}
-
-.rf-plan-relationships__group {
-	margin-bottom: 1rem;
-}
-
-.rf-plan-relationships__group-title {
-	font-size: 0.8125rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-	color: var(--rf-color-muted, #6c757d);
-	margin: 0 0 0.375rem;
-}
-
-.rf-plan-relationships__group[data-kind="blocked-by"] .rf-plan-relationships__group-title {
-	color: var(--rf-color-danger, #ff6b6b);
-}
-
-.rf-plan-relationships__group[data-kind="blocks"] .rf-plan-relationships__group-title {
-	color: var(--rf-color-warning, #f59f00);
-}
-
-.rf-plan-relationships__cards {
-	display: flex;
-	flex-direction: column;
-}