@refrakt-md/lumina 0.23.0 → 0.24.1

package/base.css

@@ -40,3 +40,8 @@
  * loader before base.css), so it has no skin remainder to import here (WORK-438). */
 @import './styles/dimensions/checklist.css';
 @import './styles/dimensions/sequence.css';
+/* Motion is a universal dimension (keys on [data-reveal]/[data-animate], not a
+ * rune block), so it must live in this no-runes base entry — the one the
+ * production loader imports. In index.css only, motion ships in dev (full
+ * barrel) but vanishes from builds (base.css + tree-shaken rune blocks). */
+@import './styles/dimensions/motion.css';

package/contracts/structures.json

@@ -868,6 +868,18 @@
 				"stacked": {
 					"source": "meta",
 					"dataAttribute": "data-stacked"
+				},
+				"tick-count": {
+					"source": "meta",
+					"dataAttribute": "data-tick-count"
+				},
+				"tick-step": {
+					"source": "meta",
+					"dataAttribute": "data-tick-step"
+				},
+				"label-angle": {
+					"source": "meta",
+					"dataAttribute": "data-label-angle"
 				}
 			}
 		},
@@ -3827,6 +3839,531 @@
 			"childOrder": [
 				"{content}"
 			]
+		},
+		"Spec": {
+			"block": "spec",
+			"root": ".rf-spec",
+			"dataRune": "spec",
+			"childOrder": [
+				"eyebrow",
+				"title",
+				"blurb",
+				"metadata",
+				"tags",
+				"body",
+				"{content}"
+			],
+			"modifiers": {
+				"id": {
+					"source": "meta",
+					"classPattern": ".rf-spec--{value}",
+					"dataAttribute": "data-id"
+				},
+				"status": {
+					"source": "meta",
+					"default": "draft",
+					"classPattern": ".rf-spec--{value}",
+					"dataAttribute": "data-status"
+				},
+				"version": {
+					"source": "meta",
+					"classPattern": ".rf-spec--{value}",
+					"dataAttribute": "data-version"
+				},
+				"supersedes": {
+					"source": "meta",
+					"classPattern": ".rf-spec--{value}",
+					"dataAttribute": "data-supersedes"
+				},
+				"tags": {
+					"source": "meta",
+					"dataAttribute": "data-tags"
+				},
+				"created": {
+					"source": "meta",
+					"dataAttribute": "data-created"
+				},
+				"modified": {
+					"source": "meta",
+					"dataAttribute": "data-modified"
+				}
+			},
+			"elements": {
+				"eyebrow": {
+					"tag": "div",
+					"selector": ".rf-spec__eyebrow",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"id",
+						"status"
+					]
+				},
+				"metadata": {
+					"tag": "dl",
+					"selector": ".rf-spec__metadata",
+					"source": "block",
+					"layout": "definition-list",
+					"fields": [
+						"version",
+						"supersedes",
+						"created",
+						"modified"
+					]
+				},
+				"tags": {
+					"tag": "div",
+					"selector": ".rf-spec__tags",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"tags"
+					]
+				}
+			}
+		},
+		"Work": {
+			"block": "work",
+			"root": ".rf-work",
+			"dataRune": "work",
+			"childOrder": [
+				"eyebrow",
+				"title",
+				"blurb",
+				"metadata",
+				"tags",
+				"body",
+				"{content}"
+			],
+			"modifiers": {
+				"id": {
+					"source": "meta",
+					"classPattern": ".rf-work--{value}",
+					"dataAttribute": "data-id"
+				},
+				"status": {
+					"source": "meta",
+					"default": "draft",
+					"classPattern": ".rf-work--{value}",
+					"dataAttribute": "data-status"
+				},
+				"priority": {
+					"source": "meta",
+					"default": "medium",
+					"classPattern": ".rf-work--{value}",
+					"dataAttribute": "data-priority"
+				},
+				"complexity": {
+					"source": "meta",
+					"default": "unknown",
+					"classPattern": ".rf-work--{value}",
+					"dataAttribute": "data-complexity"
+				},
+				"assignee": {
+					"source": "meta",
+					"dataAttribute": "data-assignee"
+				},
+				"milestone": {
+					"source": "meta",
+					"dataAttribute": "data-milestone"
+				},
+				"source": {
+					"source": "meta",
+					"dataAttribute": "data-source"
+				},
+				"tags": {
+					"source": "meta",
+					"dataAttribute": "data-tags"
+				},
+				"created": {
+					"source": "meta",
+					"dataAttribute": "data-created"
+				},
+				"modified": {
+					"source": "meta",
+					"dataAttribute": "data-modified"
+				}
+			},
+			"elements": {
+				"eyebrow": {
+					"tag": "div",
+					"selector": ".rf-work__eyebrow",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"id",
+						"status"
+					]
+				},
+				"metadata": {
+					"tag": "dl",
+					"selector": ".rf-work__metadata",
+					"source": "block",
+					"layout": "definition-list",
+					"fields": [
+						"priority",
+						"complexity",
+						"assignee",
+						"milestone",
+						"source",
+						"created",
+						"modified"
+					]
+				},
+				"tags": {
+					"tag": "div",
+					"selector": ".rf-work__tags",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"tags"
+					]
+				}
+			}
+		},
+		"Bug": {
+			"block": "bug",
+			"root": ".rf-bug",
+			"dataRune": "bug",
+			"childOrder": [
+				"eyebrow",
+				"title",
+				"blurb",
+				"metadata",
+				"tags",
+				"body",
+				"{content}"
+			],
+			"modifiers": {
+				"id": {
+					"source": "meta",
+					"classPattern": ".rf-bug--{value}",
+					"dataAttribute": "data-id"
+				},
+				"status": {
+					"source": "meta",
+					"default": "reported",
+					"classPattern": ".rf-bug--{value}",
+					"dataAttribute": "data-status"
+				},
+				"severity": {
+					"source": "meta",
+					"default": "major",
+					"classPattern": ".rf-bug--{value}",
+					"dataAttribute": "data-severity"
+				},
+				"assignee": {
+					"source": "meta",
+					"dataAttribute": "data-assignee"
+				},
+				"milestone": {
+					"source": "meta",
+					"dataAttribute": "data-milestone"
+				},
+				"source": {
+					"source": "meta",
+					"dataAttribute": "data-source"
+				},
+				"tags": {
+					"source": "meta",
+					"dataAttribute": "data-tags"
+				},
+				"created": {
+					"source": "meta",
+					"dataAttribute": "data-created"
+				},
+				"modified": {
+					"source": "meta",
+					"dataAttribute": "data-modified"
+				}
+			},
+			"elements": {
+				"eyebrow": {
+					"tag": "div",
+					"selector": ".rf-bug__eyebrow",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"id",
+						"status"
+					]
+				},
+				"metadata": {
+					"tag": "dl",
+					"selector": ".rf-bug__metadata",
+					"source": "block",
+					"layout": "definition-list",
+					"fields": [
+						"severity",
+						"assignee",
+						"milestone",
+						"source",
+						"created",
+						"modified"
+					]
+				},
+				"tags": {
+					"tag": "div",
+					"selector": ".rf-bug__tags",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"tags"
+					]
+				}
+			}
+		},
+		"Decision": {
+			"block": "decision",
+			"root": ".rf-decision",
+			"dataRune": "decision",
+			"childOrder": [
+				"eyebrow",
+				"title",
+				"blurb",
+				"metadata",
+				"tags",
+				"body",
+				"{content}"
+			],
+			"modifiers": {
+				"id": {
+					"source": "meta",
+					"classPattern": ".rf-decision--{value}",
+					"dataAttribute": "data-id"
+				},
+				"status": {
+					"source": "meta",
+					"default": "proposed",
+					"classPattern": ".rf-decision--{value}",
+					"dataAttribute": "data-status"
+				},
+				"date": {
+					"source": "meta",
+					"dataAttribute": "data-date"
+				},
+				"supersedes": {
+					"source": "meta",
+					"dataAttribute": "data-supersedes"
+				},
+				"source": {
+					"source": "meta",
+					"dataAttribute": "data-source"
+				},
+				"tags": {
+					"source": "meta",
+					"dataAttribute": "data-tags"
+				},
+				"created": {
+					"source": "meta",
+					"dataAttribute": "data-created"
+				},
+				"modified": {
+					"source": "meta",
+					"dataAttribute": "data-modified"
+				}
+			},
+			"elements": {
+				"eyebrow": {
+					"tag": "div",
+					"selector": ".rf-decision__eyebrow",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"id",
+						"status"
+					]
+				},
+				"metadata": {
+					"tag": "dl",
+					"selector": ".rf-decision__metadata",
+					"source": "block",
+					"layout": "definition-list",
+					"fields": [
+						"date",
+						"supersedes",
+						"source",
+						"created",
+						"modified"
+					]
+				},
+				"tags": {
+					"tag": "div",
+					"selector": ".rf-decision__tags",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"tags"
+					]
+				}
+			}
+		},
+		"Milestone": {
+			"block": "milestone",
+			"root": ".rf-milestone",
+			"dataRune": "milestone",
+			"childOrder": [
+				"eyebrow",
+				"title",
+				"blurb",
+				"metadata",
+				"body",
+				"{content}"
+			],
+			"modifiers": {
+				"name": {
+					"source": "meta",
+					"classPattern": ".rf-milestone--{value}",
+					"dataAttribute": "data-name"
+				},
+				"status": {
+					"source": "meta",
+					"default": "planning",
+					"classPattern": ".rf-milestone--{value}",
+					"dataAttribute": "data-status"
+				},
+				"target": {
+					"source": "meta",
+					"dataAttribute": "data-target"
+				},
+				"created": {
+					"source": "meta",
+					"dataAttribute": "data-created"
+				},
+				"modified": {
+					"source": "meta",
+					"dataAttribute": "data-modified"
+				}
+			},
+			"elements": {
+				"eyebrow": {
+					"tag": "div",
+					"selector": ".rf-milestone__eyebrow",
+					"source": "block",
+					"layout": "bar",
+					"fields": [
+						"name",
+						"status"
+					]
+				},
+				"metadata": {
+					"tag": "dl",
+					"selector": ".rf-milestone__metadata",
+					"source": "block",
+					"layout": "definition-list",
+					"fields": [
+						"target",
+						"created",
+						"modified"
+					]
+				}
+			}
+		},
+		"Backlog": {
+			"block": "backlog",
+			"root": ".rf-backlog",
+			"dataRune": "backlog",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"filter": {
+					"source": "meta",
+					"dataAttribute": "data-filter"
+				},
+				"sort": {
+					"source": "meta",
+					"dataAttribute": "data-sort"
+				},
+				"group": {
+					"source": "meta",
+					"dataAttribute": "data-group"
+				},
+				"show": {
+					"source": "meta",
+					"dataAttribute": "data-show"
+				}
+			},
+			"childDensity": "minimal"
+		},
+		"DecisionLog": {
+			"block": "decision-log",
+			"root": ".rf-decision-log",
+			"dataRune": "decision-log",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"filter": {
+					"source": "meta",
+					"dataAttribute": "data-filter"
+				},
+				"sort": {
+					"source": "meta",
+					"dataAttribute": "data-sort"
+				}
+			},
+			"childDensity": "minimal"
+		},
+		"PlanProgress": {
+			"block": "plan-progress",
+			"root": ".rf-plan-progress",
+			"dataRune": "plan-progress",
+			"childOrder": [
+				"{content}"
+			]
+		},
+		"PlanActivity": {
+			"block": "plan-activity",
+			"root": ".rf-plan-activity",
+			"dataRune": "plan-activity",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"limit": {
+					"source": "meta",
+					"dataAttribute": "data-limit"
+				}
+			}
+		},
+		"PlanHistory": {
+			"block": "plan-history",
+			"root": ".rf-plan-history",
+			"dataRune": "plan-history",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"id": {
+					"source": "meta",
+					"dataAttribute": "data-id"
+				},
+				"limit": {
+					"source": "meta",
+					"dataAttribute": "data-limit"
+				},
+				"type": {
+					"source": "meta",
+					"dataAttribute": "data-type"
+				},
+				"since": {
+					"source": "meta",
+					"dataAttribute": "data-since"
+				},
+				"group": {
+					"source": "meta",
+					"dataAttribute": "data-group"
+				}
+			}
+		},
+		"PlanEntityTabs": {
+			"block": "plan-entity-tabs",
+			"root": ".rf-plan-entity-tabs",
+			"dataRune": "plan-entity-tabs",
+			"childOrder": [
+				"{content}"
+			]
 		}
 	}
 }

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAoO1B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAgP1B,CAAC"}

package/dist/tokens.js

@@ -153,6 +153,17 @@ export const luminaTokens = {
         punctuation: '#6b6661', // tonal — same as color.muted
         variable: '#1c1a17', // tonal — same as color.text
     },
+    // SPEC-105 — scroll-reveal motion physics. The single source of truth for the
+    // `--rf-reveal-*` tokens `dimensions/motion.css` reads; a site retunes the feel
+    // via `refrakt.config.json` `theme.tokens.reveal.*`. A gentle, unhurried default.
+    reveal: {
+        duration: '1.3s',
+        easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+        distance: '2rem',
+        'scale-start': '0.94',
+        blur: '8px',
+        stagger: '220ms',
+    },
     modes: {
         dark: {
             color: {

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/index.css

@@ -49,6 +49,7 @@
  * tabs/codegroup structure it depends on (WORK-438). */
 @import './styles/dimensions/checklist.css';
 @import './styles/dimensions/sequence.css';
+@import './styles/dimensions/motion.css';
 
 /* Runes */
 @import './styles/runes/accordion.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.23.0",
+  "version": "0.24.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -84,10 +84,10 @@
     "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.23.0",
-    "@refrakt-md/skeleton": "0.23.0",
-    "@refrakt-md/transform": "0.23.0",
-    "@refrakt-md/types": "0.23.0"
+    "@refrakt-md/runes": "0.24.1",
+    "@refrakt-md/skeleton": "0.24.1",
+    "@refrakt-md/transform": "0.24.1",
+    "@refrakt-md/types": "0.24.1"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/frame.css

@@ -80,8 +80,10 @@
  *      We push the root with negative margins so it can spill past its
  *      parent's edge for a true breakout. */
 
-/* — Case 1: media-zone displace → translate the inner guest, zone clips. */
-[data-section="media"][data-displace] > :is(img, video, .rf-placeholder, [data-rune]) {
+/* — Case 1a: media-zone displace, default `peek` mode → translate the inner
+ *   guest inside the slot. The zone's `overflow: hidden` clips the displaced
+ *   guest into a peek (card / bento-cell behaviour). */
+[data-section="media"][data-displace]:not([data-displace-mode="bleed"]) > :is(img, video, .rf-placeholder, [data-rune]) {
 	transform: translate(var(--displace-x, 0), var(--displace-y, 0));
 }
 [data-section="media"][data-displace="top"]        { --displace-y: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
@@ -90,6 +92,18 @@
 [data-section="media"][data-displace="top-end"]    { --displace-x: var(--frame-offset, var(--rf-spacing-lg)); --displace-y: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
 [data-section="media"][data-displace="bottom-end"] { --displace-x: var(--frame-offset, var(--rf-spacing-lg)); --displace-y: var(--frame-offset, var(--rf-spacing-lg)); }
 
+/* — Case 1b: media-zone displace, `bleed` mode → negative margin on the media
+ *   zone itself, so following layout pulls up and the guest extends past the
+ *   host's edge (hero / cta behaviour). The guest renders at its natural
+ *   position inside the zone — no translate, no artificial gap above. The
+ *   margin needs to exceed the host's padding for the guest to clear the host
+ *   edge; the offset scale tops out at `3xl` (6rem) for this. */
+[data-section="media"][data-displace="top"][data-displace-mode="bleed"]        { margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-section="media"][data-displace="bottom"][data-displace-mode="bleed"]     { margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-section="media"][data-displace="end"][data-displace-mode="bleed"]        { margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-section="media"][data-displace="top-end"][data-displace-mode="bleed"]    { margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+[data-section="media"][data-displace="bottom-end"][data-displace-mode="bleed"] { margin-bottom: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); margin-inline-end: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }
+
 /* — Case 2: self-target (showcase, etc.) → root moves; parent decides. */
 [data-displace]:not([data-section="media"]) { position: relative; z-index: 1; }
 [data-displace="top"]:not([data-section="media"])        { margin-top: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }

package/styles/dimensions/motion.css

@@ -0,0 +1,102 @@
+/* ─── Motion Dimension — skin (SPEC-105) ───────────────────────────────────
+ * Scroll-reveal entrance choreography. The split that keeps motion from leaking
+ * author concerns into theme concerns:
+ *   • Author declares *intent* — `data-reveal` / `data-stagger` (the engine, WORK-431).
+ *   • The behaviour owns *when* — `data-in-view` + the root `data-animate` gate (WORK-433).
+ *   • This file owns *how* — the physics, keyed on `data-reveal` × `data-in-view`.
+ *
+ * It covers every section rune from ONE stylesheet: it keys on the generic
+ * attributes + the `--rf-reveal-index` marker, never on a rune's structure, so no
+ * rune's own CSS gains a motion block. Motion is theme choreography (skin); the
+ * framework structure (@refrakt-md/skeleton) has none — a different theme ships its
+ * own motion.css. Retune calm↔punchy purely via the tokens below.
+ *
+ * Reduced motion is handled by the global reset (WORK-352, global.css), which
+ * neutralises transition/animation durations; the behaviour also marks everything
+ * in-view immediately. */
+
+@layer skin {
+	/* Physics tokens (`--rf-reveal-duration` / `-easing` / `-distance` /
+	 * `-scale-start` / `-blur` / `-stagger`) are part of the theme TokenContract
+	 * (SPEC-105), defined in `src/tokens.ts` and emitted into `tokens/base.css`.
+	 * A site retunes the feel via `refrakt.config.json` `theme.tokens.reveal.*`;
+	 * this file only *consumes* them. The fallbacks below keep motion sensible if a
+	 * theme ships this stylesheet without the reveal token group. */
+
+	/* Per-character offsets — set on the `[data-reveal]` container and inherited by
+	 * staggered children, so the single hidden-state block below covers every
+	 * character. `none` carries no offsets (it never animates). */
+	[data-reveal="fade"]  { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: 1;                       --reveal-blur: 0; }
+	[data-reveal="slide"] { --reveal-x: 0; --reveal-y: var(--rf-reveal-distance, 1.5rem); --reveal-scale: 1;             --reveal-blur: 0; }
+	[data-reveal="scale"] { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: var(--rf-reveal-scale-start, 0.95); --reveal-blur: 0; }
+	/* `blur` is focus-led; it animates `filter` (not compositor-cheap), so a theme
+	 * or low-power path may downgrade it to `fade` by zeroing the blur token. */
+	[data-reveal="blur"]  { --reveal-x: 0; --reveal-y: 0;                      --reveal-scale: 1;                       --reveal-blur: var(--rf-reveal-blur, 8px); }
+
+	/* The animated unit:
+	 *   • non-staggered → the `[data-reveal]` element itself,
+	 *   • staggered     → its indexed children (`[style*="--rf-reveal-index"]`).
+	 * Everything is gated under the root `[data-animate]` flag the behaviour sets on
+	 * boot — no JS → no flag → fully visible, nothing hidden (SSR-complete).
+	 *
+	 * CRITICAL: reveal animates the INDIVIDUAL `translate`/`scale` properties, never
+	 * the `transform` shorthand, so it composes with the rune transforms Lumina
+	 * already uses (hover-lifts on card/cta/feature, frame displacement, drawer/nav
+	 * slides) instead of clobbering them. */
+	[data-animate] :where(
+		[data-reveal]:not([data-reveal="none"]):not([data-stagger]),
+		[data-stagger]:not([data-reveal="none"]) [style*="--rf-reveal-index"]
+	) {
+		transition:
+			opacity   var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			translate var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			scale     var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out),
+			filter    var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);
+	}
+
+	/* Pre-entrance (hidden) — until the unit's trigger fires. */
+	[data-animate] :where(
+		[data-reveal]:not([data-reveal="none"]):not([data-stagger]):not([data-in-view]),
+		[data-stagger]:not([data-reveal="none"]):not([data-in-view]) [style*="--rf-reveal-index"]
+	) {
+		opacity: 0;
+		translate: var(--reveal-x) var(--reveal-y);
+		scale: var(--reveal-scale);
+		filter: blur(var(--reveal-blur));
+	}
+
+	/* Revealed (resting) — explicit IDENTITY values, never the `none` default.
+	 * This is what makes the entrance interpolate in WebKit: Safari does not
+	 * transition `translate`/`scale`/`filter` to-or-from `none`, so reverting to
+	 * the default would snap (no motion on iOS) — only opacity would animate.
+	 * Transitioning between two explicit values animates everywhere. */
+	[data-animate] :where(
+		[data-reveal]:not([data-reveal="none"]):not([data-stagger])[data-in-view],
+		[data-stagger][data-in-view] [style*="--rf-reveal-index"]
+	) {
+		opacity: 1;
+		translate: 0 0;
+		scale: 1;
+		filter: blur(0);
+	}
+
+	/* Stagger — each child's entrance offset from the container's single in-view
+	 * trigger by its engine-stamped index against the interval token. */
+	[data-animate] [data-stagger][data-in-view] [style*="--rf-reveal-index"] {
+		transition-delay: calc(var(--rf-reveal-index) * var(--rf-reveal-stagger, 140ms));
+	}
+
+	/* Per-part choreography (opt-in polish, not required): on a non-staggered
+	 * sliding section, let the media arrive a beat behind the content for a subtle
+	 * two-part entrance. Demonstrated on the named anatomy the theme already styles;
+	 * a theme adds or drops this freely. */
+	[data-animate] [data-reveal="slide"]:not([data-stagger]):not([data-in-view]) > * > [data-section="media"] {
+		translate: 0 calc(var(--rf-reveal-distance, 1.5rem) * 1.5);
+	}
+	[data-animate] [data-reveal="slide"]:not([data-stagger])[data-in-view] > * > [data-section="media"] {
+		translate: 0 0;  /* explicit identity end-state — see the WebKit note above */
+	}
+	[data-animate] [data-reveal="slide"]:not([data-stagger]) > * > [data-section="media"] {
+		transition: translate var(--rf-reveal-duration, 0.9s) var(--rf-reveal-easing, ease-out);
+	}
+}

package/styles/dimensions/surfaces.css

@@ -25,7 +25,12 @@
    Layout-chrome navs (menubar in header, columns in footer) are excluded
    so they sit flush with the surrounding header/footer container. */
 
-[data-rune]:not([data-rune] [data-rune]):not(:where([data-layout="menubar"], [data-layout="columns"])) {
+/* `:where(...)` zeros the selector specificity so per-rune CSS, the
+ * `[data-rune][data-spacing="..."]` attribute rules, and per-instance overrides
+ * all win cleanly. Without `:where()` the `:not([data-rune] [data-rune])` clause
+ * inflates this default to (0,3,0) — beating the (0,2,0) spacing attribute and
+ * masking `spacing="flush"` on top-level runes like hero. */
+:where([data-rune]:not([data-rune] [data-rune]):not([data-layout="menubar"]):not([data-layout="columns"])) {
 	margin: var(--rf-spacing-md) 0;
 }
 

package/styles/layouts/split.css

@@ -4,7 +4,19 @@
  * The layout *structure* (start/end grid, top/bottom stack, 3-section placement,
  * the media-zone fill/clip mechanism, responsive collapse) lives in
  * @refrakt-md/skeleton (layouts/split.css). What remains here is skin: the media
- * radius tier, the beside-image depth shadow, and the codegroup radius alignment. */
+ * radius tier, the beside-image depth shadow, the codegroup radius alignment,
+ * and the default side-by-side spacing rhythm. */
+
+/* Default side-by-side spacing — applies to every rune using the split layout
+ * (hero, feature, step, realm, faction, etc.). Contained-chrome runes
+ * (card, recipe, bento-cell, playlist) override `column-gap` / `row-gap` with
+ * higher-specificity selectors to hug their internal media well; everything
+ * else inherits this comfortable default so columns don't sit flush. */
+[data-media-position="start"],
+[data-media-position="end"] {
+	column-gap: var(--rf-spacing-lg);
+	row-gap: var(--rf-spacing-lg);
+}
 
 /* Media guests use the smaller media radius tier so they never read as more
  * rounded than the (larger-radius) container they sit in. */

package/styles/runes/chart.css

@@ -11,24 +11,48 @@
 	--rf-chart-series-5: #a855f7;
 	--rf-chart-series-6: #ec4899;
 	--rf-chart-bar-ratio: 0.75;
-	--rf-chart-bar-thickness: 48px;
+	--rf-chart-bar-thickness: 12px;
 	--rf-chart-bar-gap: 0.15;
-	--rf-chart-bar-radius: 2px;
+	--rf-chart-bar-cluster-gap: 4px;
+	--rf-chart-bar-radius: var(--rf-radius-sm);
+	--rf-chart-area-opacity: 0.3;
 	--rf-chart-point-radius: 4px;
 	--rf-chart-line-width: 2px;
 	--rf-chart-label-size: 12px;
 	--rf-chart-label-color: var(--rf-color-muted);
 	--rf-chart-grid-color: var(--rf-color-border);
+	--rf-chart-grid-dash-color: var(--rf-color-muted);
 	--rf-chart-grid-width: 1px;
+	--rf-chart-grid-dash: 3 3;
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
 	margin: 0;
 }
 .rf-chart__axis { stroke: var(--rf-chart-grid-color); stroke-width: var(--rf-chart-grid-width); }
+/* Dotted horizontal grid lines behind the data — text-tier muted colour so the
+ * scale is legible at a glance. Opacity still keeps them quieter than the data,
+ * which stays the figure-ground emphasis. */
+.rf-chart__grid {
+	stroke: var(--rf-chart-grid-dash-color);
+	stroke-width: var(--rf-chart-grid-width);
+	stroke-dasharray: var(--rf-chart-grid-dash);
+	opacity: 0.2;
+}
 .rf-chart__label { fill: var(--rf-chart-label-color); font-size: var(--rf-chart-label-size); }
+.rf-chart__tick-label { fill: var(--rf-chart-label-color); font-size: var(--rf-chart-label-size); }
 .rf-chart__bar { rx: var(--rf-chart-bar-radius); fill: var(--rf-chart-series-1); }
 .rf-chart__point { fill: var(--rf-chart-series-1); }
 .rf-chart__line { fill: none; stroke: var(--rf-chart-series-1); stroke-width: var(--rf-chart-line-width); }
+/* Area-under-line gradient stops. The `--rf-chart-area-opacity` knob drives the
+ * top alpha; the bottom is always 0 so the gradient fades into the chart floor. */
+.rf-chart__area-stop { stop-color: var(--rf-chart-series-1); }
+.rf-chart__area-stop[data-series="1"] { stop-color: var(--rf-chart-series-2); }
+.rf-chart__area-stop[data-series="2"] { stop-color: var(--rf-chart-series-3); }
+.rf-chart__area-stop[data-series="3"] { stop-color: var(--rf-chart-series-4); }
+.rf-chart__area-stop[data-series="4"] { stop-color: var(--rf-chart-series-5); }
+.rf-chart__area-stop[data-series="5"] { stop-color: var(--rf-chart-series-6); }
+.rf-chart__area-stop[data-position="top"]    { stop-opacity: var(--rf-chart-area-opacity); }
+.rf-chart__area-stop[data-position="bottom"] { stop-opacity: 0; }
 .rf-chart__bar[data-series="1"], .rf-chart__point[data-series="1"] { fill: var(--rf-chart-series-2); }
 .rf-chart__bar[data-series="2"], .rf-chart__point[data-series="2"] { fill: var(--rf-chart-series-3); }
 .rf-chart__bar[data-series="3"], .rf-chart__point[data-series="3"] { fill: var(--rf-chart-series-4); }

package/styles/runes/juxtapose.css

@@ -3,7 +3,7 @@
  * divider/handle positioning, toggle-bar flex, and meta/label hides live in
  * @refrakt-md/skeleton (styles/runes/juxtapose.css). */
 .rf-juxtapose__panels {
-	border-radius: var(--rf-radius-md);
+	border-radius: var(--rf-radius-lg);
 	border: 1px solid var(--rf-color-border);
 	background: var(--rf-color-surface);
 }

package/styles/runes/mockup.css

@@ -414,6 +414,18 @@
 	margin: 0;
 }
 
+/* ── Mockup as a media guest ──
+ * In a card / bento-cell media zone the mockup sits in the recessed well. Its
+ * `flush` elevation gives it vertical breathing room (padding-block) but leaves
+ * it hugging the well's sides; add matching inline padding so the inset reads
+ * even on all four edges. Because `.rf-mockup` is the size container, the inline
+ * padding also narrows `100cqi` — and the device, which fills the slot width as
+ * a media guest (skeleton's uncapped frame zoom), then fills the padded box, so
+ * the gap stays even with the top/bottom margin at any slot width. */
+[data-section="media"] > .rf-mockup {
+	padding-inline: var(--rune-padding, var(--rf-spacing-sm));
+}
+
 /* ═══════════════════════════════════════
    DARK MODE
    ═══════════════════════════════════════ */

package/styles/runes/preview.css

@@ -156,6 +156,13 @@
 		border-left: none;
 		border-right: none;
 	}
+	/* Break out of the feature's padding-inline to reach the viewport edges. Stays
+	 * skin (not skeleton): this overrides the skin rule `.rf-preview { margin: 2rem 0 }`
+	 * by specificity, and that only wins within the same cascade layer — in
+	 * @layer skeleton it loses to the skin margin and the bleed is nullified. */
+	.rf-preview--in-feature {
+		margin-inline: calc(-1 * var(--rf-content-gutter, 1.5rem));
+	}
 	.rf-preview--in-feature .rf-preview__toolbar {
 		padding-inline: var(--rf-content-gutter, 1.5rem);
 	}

package/styles/runes/sandbox.css

@@ -1,9 +1,6 @@
 @layer skin {
 /* Sandbox — skin. The iframe clip/fill + banner/poster/activate layout live in
  * @refrakt-md/skeleton (styles/runes/sandbox.css). */
-.rf-sandbox {
-	border-radius: var(--rf-radius-md);
-}
 .rf-sandbox iframe {
 	border: none;
 }
@@ -14,7 +11,6 @@
 /* When inside preview, remove sandbox margin */
 .rf-preview .rf-sandbox {
 	margin: 0;
-	border-radius: 0;
 }
 /* Untrusted-mode affordance. */
 .rf-sandbox[data-security-mode="untrusted"] {

package/tokens/base.css

@@ -90,6 +90,12 @@
 	--rf-syntax-comment: #8a857d;
 	--rf-syntax-punctuation: #6b6661;
 	--rf-syntax-variable: #1c1a17;
+	--rf-reveal-duration: 1.3s;
+	--rf-reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
+	--rf-reveal-distance: 2rem;
+	--rf-reveal-scale-start: 0.94;
+	--rf-reveal-blur: 8px;
+	--rf-reveal-stagger: 220ms;
 	--rf-syntax-token-keyword: #2a5c63;
 	--rf-syntax-token-tag: #2a5c63;
 	--rf-syntax-token-function: #4a3b6e;