@refrakt-md/lumina 0.16.0 → 0.16.1

package/contracts/structures.json

@@ -224,6 +224,14 @@
 				"{content}"
 			]
 		},
+		"FileRef": {
+			"block": "file-ref",
+			"root": ".rf-file-ref",
+			"dataRune": "file-ref",
+			"childOrder": [
+				"{content}"
+			]
+		},
 		"Aggregate": {
 			"block": "aggregate",
 			"root": ".rf-aggregate",

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;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAiL1B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBA6L1B,CAAC"}

package/dist/tokens.js

@@ -64,6 +64,17 @@ export const luminaTokens = {
             // alias via `extra` below for downstream CSS that still reads it.
             'inline-bg': '#e6e5e3',
         },
+        // WORK-304 — line-level annotation tokens shared by snippet /
+        // codegroup / diff. `highlight` is the neutral surface tint applied
+        // to `[data-line-status="highlight"]` rows; `highlight-rail` is the
+        // left-edge border colour (left as a soft accent so themes can
+        // repaint just the rail without touching the row background);
+        // `number` is the gutter colour for `pre[data-linenumbers]`.
+        line: {
+            highlight: 'color-mix(in srgb, var(--rf-color-text) 6%, transparent)',
+            'highlight-rail': 'var(--rf-color-primary, var(--rf-color-text))',
+            number: 'var(--rf-color-muted)',
+        },
     },
     radius: {
         sm: '6px',

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":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAsB;IAC9C,IAAI,EAAE;QACL,IAAI,EAAE,mEAAmE;QACzE,IAAI,EAAE,yEAAyE;KAC/E;IAED,KAAK,EAAE;QACN,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;QACjB,EAAE,EAAE,SAAS;QACb,OAAO,EAAE,SAAS;QAClB,eAAe,EAAE,SAAS;QAE1B,yEAAyE;QACzE,0EAA0E;QAC1E,wEAAwE;QACxE,oEAAoE;QACpE,eAAe,EAAE;YAChB,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,SAAS;SAChB;QAED,OAAO,EAAE;YACR,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE,SAAS;SACjB;QAED,0EAA0E;QAC1E,sEAAsE;QACtE,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC9D,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;QAE9D,IAAI,EAAE;YACL,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,wDAAwD;YACxD,sEAAsE;YACtE,kEAAkE;YAClE,WAAW,EAAE,SAAS;SACtB;QAED,8DAA8D;QAC9D,oEAAoE;QACpE,oEAAoE;QACpE,+DAA+D;QAC/D,8DAA8D;QAC9D,6DAA6D;QAC7D,IAAI,EAAE;YACL,SAAS,EAAE,0DAA0D;YACrE,gBAAgB,EAAE,+CAA+C;YACjE,MAAM,EAAE,uBAAuB;SAC/B;KACD;IAED,MAAM,EAAE;QACP,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,QAAQ;KACd;IAED,OAAO,EAAE;QACR,EAAE,EAAE,SAAS;QACb,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,QAAQ;QACZ,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,MAAM;QACb,OAAO,EAAE;YACR,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,MAAM;SACf;KACD;IAED,KAAK,EAAE;QACN,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;KACf;IAED,MAAM,EAAE;QACP,EAAE,EAAE,4BAA4B;QAChC,EAAE,EAAE,wDAAwD;QAC5D,EAAE,EAAE,yDAAyD;QAC7D,EAAE,EAAE,yDAAyD;KAC7D;IAED,wEAAwE;IACxE,oEAAoE;IACpE,qEAAqE;IACrE,aAAa;IACb,MAAM,EAAE;QACP,OAAO,EAAE,SAAS,EAAM,YAAY;QACpC,QAAQ,EAAE,SAAS,EAAK,eAAe;QACvC,MAAM,EAAE,SAAS,EAAO,YAAY;QACpC,QAAQ,EAAE,SAAS,EAAK,gBAAgB;QACxC,OAAO,EAAE,SAAS,EAAM,mCAAmC;QAC3D,WAAW,EAAE,SAAS,EAAE,8BAA8B;QACtD,QAAQ,EAAE,SAAS,EAAK,6BAA6B;KACrD;IAED,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,EAAE,EAAE,SAAS;gBACb,OAAO,EAAE,SAAS;gBAClB,eAAe,EAAE,SAAS;gBAE1B,OAAO,EAAE;oBACR,IAAI,EAAE,SAAS;oBACf,KAAK,EAAE,SAAS;oBAChB,MAAM,EAAE,SAAS;oBACjB,MAAM,EAAE,SAAS;iBACjB;gBAED,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC9D,MAAM,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;gBAE9D,IAAI,EAAE;oBACL,EAAE,EAAE,SAAS;oBACb,IAAI,EAAE,SAAS;oBACf,WAAW,EAAE,SAAS;iBACtB;aACD;YAED,MAAM,EAAE;gBACP,EAAE,EAAE,2BAA2B;gBAC/B,EAAE,EAAE,sDAAsD;gBAC1D,EAAE,EAAE,uDAAuD;gBAC3D,EAAE,EAAE,uDAAuD;aAC3D;YAED,uEAAuE;YACvE,qEAAqE;YACrE,MAAM,EAAE;gBACP,OAAO,EAAE,SAAS,EAAM,aAAa;gBACrC,QAAQ,EAAE,SAAS,EAAK,qBAAqB;gBAC7C,MAAM,EAAE,SAAS,EAAO,aAAa;gBACrC,QAAQ,EAAE,SAAS,EAAK,sBAAsB;gBAC9C,OAAO,EAAE,SAAS,EAAM,sBAAsB;gBAC9C,WAAW,EAAE,SAAS,EAAE,qBAAqB;gBAC7C,QAAQ,EAAE,SAAS,EAAK,oBAAoB;aAC5C;YAED,oEAAoE;YACpE,kEAAkE;YAClE,qEAAqE;YACrE,0BAA0B;YAC1B,KAAK,EAAE;gBACN,yBAAyB,EAAE,SAAS;aACpC;SACD;KACD;IAED;;;;;;;;;qBASiB;IACjB,KAAK,EAAE;QACN,yBAAyB,EAAE,SAAS;KACpC;CACD,CAAC"}

package/index.css

@@ -54,6 +54,7 @@
 @import './styles/runes/collection.css';
 @import './styles/runes/relationships.css';
 @import './styles/runes/aggregate.css';
+@import './styles/runes/file-ref.css';
 @import './styles/runes/progress.css';
 @import './styles/runes/changelog.css';
 @import './styles/runes/chart.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.16.0",
+  "version": "0.16.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -83,9 +83,9 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.16.0",
-    "@refrakt-md/transform": "0.16.0",
-    "@refrakt-md/types": "0.16.0"
+    "@refrakt-md/runes": "0.16.1",
+    "@refrakt-md/transform": "0.16.1",
+    "@refrakt-md/types": "0.16.1"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/elements/code.css

@@ -42,3 +42,75 @@
 	opacity: 1 !important;
 	color: var(--rf-color-success, #4ade80);
 }
+
+/* WORK-304 — fence-level annotations: line numbers + line highlight.
+ *
+ * Shiki renders each line as `<span class="line">…</span>`. The fence
+ * schema forwards `data-linenumbers` / `data-highlight-lines` /
+ * `data-lines` (start offset) from the AST node onto both `<pre>` and
+ * `<code>`; the highlight transform sets `data-line-status="highlight"`
+ * on the matching `span.line` rows post-Shiki (file-coordinate math
+ * lives there, not in CSS).
+ *
+ * The starting line counter is seeded from `--rf-start-line` which the
+ * fence transform inlines on `<pre>` when `data-lines` is set
+ * (e.g. lines="74-125" → --rf-start-line: 73 so the first
+ * counter-increment lands on 74). Defaults to 0 so unannotated fences
+ * count from 1.
+ *
+ * `<code>` becomes a CSS grid so:
+ *   - consecutive `.line` rows tile perfectly with no subpixel cracks
+ *     at non-100% zoom (the previous inline-block stacking left faint
+ *     gaps the rail and bg shone through);
+ *   - line bg + rail extend across the full horizontal scroll region
+ *     (grid track width = max-content keeps lines full-width even
+ *     when the pre scrolls).
+ *
+ * Every line carries a 3px transparent left border so geometry stays
+ * consistent across highlighted and plain rows — matches the diff row
+ * primitive at `runes/diff.css`. Highlighted rows just colour the
+ * border + add the surface tint. */
+.rf-codeblock pre code {
+	display: grid;
+	min-width: max-content;
+}
+
+.rf-codeblock pre code .line {
+	border-left: 3px solid transparent;
+}
+
+/* Line numbers — gutter::before owns the left column. Strip the pre's
+ * horizontal padding when linenumbers are on so the gutter sits flush
+ * against the codeblock edge; the gutter's own padding + right border
+ * provides the visual separation from the code body. */
+.rf-codeblock pre[data-linenumbers] {
+	padding-left: 0;
+}
+
+.rf-codeblock pre[data-linenumbers] code {
+	counter-reset: rf-line var(--rf-start-line, 0);
+}
+
+.rf-codeblock pre[data-linenumbers] code .line::before {
+	counter-increment: rf-line;
+	content: counter(rf-line);
+	display: inline-block;
+	width: 3em;
+	padding-inline: 0.75rem 0.5rem;
+	margin-right: 0.75rem;
+	text-align: right;
+	color: var(--rf-color-line-number);
+	font-variant-numeric: tabular-nums;
+	user-select: none;
+	border-right: 1px solid var(--rf-color-border);
+}
+
+/* Highlighted lines share diff's row template — neutral surface tint
+ * + primary-coloured left rail, no `+`/`-` sigil. The grid layout on
+ * `<code>` above keeps consecutive highlighted rows continuous (no
+ * subpixel gaps between the rails). Border is on every `.line` (above)
+ * so the content alignment doesn't jump when highlighting a row. */
+.rf-codeblock pre code .line[data-line-status="highlight"] {
+	background: var(--rf-color-line-highlight);
+	border-left-color: var(--rf-color-line-highlight-rail);
+}

package/styles/layouts/split.css

@@ -43,22 +43,40 @@
 
 /* ─── Media zone base styles ──────────────────────────────────────── */
 
-/* Only clip overflow when media zone contains an image. Interactive content
-   (preview, juxtapose) needs overflow visible for bleed effects. */
-[data-section="media"]:has(> img) {
+/* Clip overflow + round corners when the media zone holds media-like
+   content: an image, or a self-contained block rune that wants the same
+   "fills the slot" treatment (codegroup, snippet, chart, sandbox). Anything
+   else keeps overflow visible so interactive bleed effects (preview,
+   juxtapose) still work. Add new rune-typed media here when they should
+   participate in the same chrome. */
+[data-section="media"]:where(
+  :has(> img),
+  :has(> [data-rune="code-group"]),
+  :has(> [data-rune="snippet"]),
+  :has(> [data-rune="chart"]),
+  :has(> [data-rune="sandbox"])
+) {
   border-radius: var(--rf-radius-lg);
   overflow: hidden;
 }
-[data-section="media"] img {
+[data-section="media"] > :where(
+  img,
+  [data-rune="code-group"],
+  [data-rune="snippet"],
+  [data-rune="chart"],
+  [data-rune="sandbox"]
+) {
   display: block;
   width: 100%;
   height: auto;
   border-radius: var(--rf-radius-lg);
+  margin: 0;
 }
 
-/* Split layout media gets subtle depth */
-[data-layout="split"] > [data-section="media"] img,
-[data-layout="split-reverse"] > [data-section="media"] img {
+/* Split layout images get subtle depth. Block runes carry their own visual
+   weight (topbars, frames) so the shadow is image-only. */
+[data-layout="split"] > [data-section="media"] > img,
+[data-layout="split-reverse"] > [data-section="media"] > img {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
@@ -109,7 +127,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"] > [data-section="media"] img {
+  [data-media-position="top"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
 
@@ -134,7 +158,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"][data-collapse="sm"] > [data-section="media"] img {
+  [data-media-position="top"][data-collapse="sm"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
   /* Reset grid placement on collapse for header/content */
@@ -157,7 +187,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"][data-collapse="md"] > [data-section="media"] img {
+  [data-media-position="top"][data-collapse="md"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
   [data-media-position="top"][data-collapse="md"] > [data-section="header"],
@@ -179,7 +215,13 @@
     margin-bottom: var(--rune-padding, var(--rf-spacing-md));
     border-radius: 0;
   }
-  [data-media-position="top"][data-collapse="lg"] > [data-section="media"] img {
+  [data-media-position="top"][data-collapse="lg"] > [data-section="media"] > :where(
+    img,
+    [data-rune="code-group"],
+    [data-rune="snippet"],
+    [data-rune="chart"],
+    [data-rune="sandbox"]
+  ) {
     border-radius: var(--rf-radius-md) var(--rf-radius-md) 0 0;
   }
   [data-media-position="top"][data-collapse="lg"] > [data-section="header"],

package/styles/runes/codegroup.css

@@ -95,6 +95,19 @@
 	word-break: break-word;
 	overflow-x: hidden;
 }
+/* WORK-304 — the standalone codeblock CSS at `elements/code.css`
+ * sets `display: grid; min-width: max-content` on `pre code` so
+ * row tints + line numbers extend across the horizontal scroll
+ * region. That sizing actively prevents wrapping (the code track
+ * is locked at max-content). Inside `overflow="wrap"` codegroups
+ * we WANT wrapping, so revert the code element back to a plain
+ * block with no min-width constraint. Lines stay block-flow so
+ * Shiki's `<span class="line">` children wrap with the pre's
+ * `white-space: pre-wrap`. */
+.rf-codegroup[data-overflow="wrap"] pre code {
+	display: block;
+	min-width: 0;
+}
 .rf-codegroup[data-overflow="hide"] pre {
 	overflow-x: hidden;
 }

package/styles/runes/diff.css

@@ -2,7 +2,19 @@
 .rf-diff {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
+	/* WORK-304 — horizontal scroll lives on `.rf-diff` itself, not on
+	 * `.rf-diff__split-container`. On mobile the split-container's
+	 * `min-width: 40rem` makes it wider than the viewport; previously
+	 * `.rf-diff { overflow: hidden }` clipped the right panel and the
+	 * touch scroll had nowhere to land. Moving the scroll affordance
+	 * up one level lets users swipe the entire diff sideways to
+	 * reveal the off-screen panel; the border-radius still clips the
+	 * children at the rounded corners because `overflow-x: auto` is
+	 * non-visible. `overflow-y: hidden` keeps the vertical clip for
+	 * the rounded top/bottom. */
+	overflow-x: auto;
+	overflow-y: hidden;
+	overscroll-behavior-x: contain;
 	font-size: 0.875rem;
 	background: var(--rf-color-code-bg);
 }
@@ -14,12 +26,19 @@
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
+	/* `.rf-diff` is the horizontal scroll container (so mobile users
+	 * can swipe to reveal the off-screen split panel). Without
+	 * sticky, the header would scroll horizontally along with the
+	 * content and the filename label would slide off-screen.
+	 * `position: sticky; left: 0` pins the header to the visible left
+	 * edge of the scroll viewport at all scroll positions. WORK-304. */
+	position: sticky;
+	left: 0;
 }
 .rf-diff__split-container {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	min-width: 40rem;
-	overflow-x: auto;
 }
 .rf-diff__split-container .rf-diff__panel:first-child {
 	border-right: 1px solid var(--rf-color-border);
@@ -31,25 +50,68 @@
 	border-radius: 0;
 	background: var(--rf-color-code-bg);
 	overflow-x: auto;
+	overscroll-behavior-x: contain;
 	font-family: var(--rf-font-mono);
 	font-size: 0.8125rem;
 	line-height: 1.6;
 }
+
+/* WORK-304 — inner rows wrapper, sized as `display: grid; min-width:
+ * max-content` so every `.rf-diff__line` (grid item) spans the
+ * widest line's intrinsic width. The pre is the scroll container
+ * (`overflow-x: auto`); this wrapper is what actually expands past
+ * the pre's visible width when a line overflows, triggering the
+ * pre's scroll and keeping the row tint (+/-/highlight) contiguous
+ * across the full scroll region. Mirrors the
+ * `pre code { display: grid; min-width: max-content }` pattern in
+ * the standalone codeblock at `elements/code.css`. */
+.rf-diff__rows {
+	display: grid;
+	min-width: max-content;
+}
+/* WORK-304 — annotated line primitive. Three states share one row
+ * shape (`add`, `remove`, `highlight`); only the tint token and the
+ * gutter rail colour change. The same selector form is reused by the
+ * standalone code block for `data-line-status="highlight"` via the
+ * `.rf-codeblock` rules below.
+ *
+ * `display: block` + inline-block children (not `display: flex`) for
+ * the line container so the line's intrinsic max-content is the
+ * unambiguous sum of children's intrinsic widths — flex container
+ * max-content was being clipped by the flex-basis / flex-grow /
+ * flex-shrink combination depending on browser, leaving the row
+ * tint cut off at the text width when the user scrolled
+ * horizontally. `white-space: nowrap` keeps the inline-block
+ * children on a single row (the children themselves preserve their
+ * own `white-space: pre` for the code). `min-width: max-content`
+ * keeps the line at least as wide as its content (full row tint
+ * when content overflows the visible viewport); default width =
+ * 100% of pre keeps it filling the visible width on short rows. */
 .rf-diff__line {
+	/* `display: flex` for internal layout (gutters + content side
+	 * by side). The line's WIDTH is determined by the parent grid
+	 * track (`.rf-diff__code`'s `grid-template-columns:
+	 * minmax(100%, max-content)`), not by the flex sizing here —
+	 * so the row tint covers the full grid column regardless of
+	 * how flex sizing would have resolved. */
 	display: flex;
 	min-height: 1.6em;
 	border-left: 3px solid transparent;
 }
-.rf-diff__line[data-type="equal"]  { background: transparent; }
-.rf-diff__line[data-type="remove"] {
+.rf-diff__line[data-line-status="equal"]  { background: transparent; }
+.rf-diff__line[data-line-status="remove"] {
 	background: color-mix(in srgb, var(--rf-color-danger) 18%, transparent);
 	border-left-color: var(--rf-color-danger);
 }
-.rf-diff__line[data-type="add"] {
+.rf-diff__line[data-line-status="add"] {
 	background: color-mix(in srgb, var(--rf-color-success) 18%, transparent);
 	border-left-color: var(--rf-color-success);
 }
-.rf-diff__line[data-type="empty"]  { background: transparent; }
+.rf-diff__line[data-line-status="highlight"] {
+	background: var(--rf-color-line-highlight);
+	border-left-color: var(--rf-color-line-highlight-rail, var(--rf-color-primary));
+}
+.rf-diff__line[data-line-status="empty"]  { background: transparent; }
 .rf-diff__gutter-num {
 	flex-shrink: 0;
 	padding: 0 0.5rem;
@@ -65,17 +127,23 @@
  * Remove lines colour the before-number; add lines colour the after-number.
  * The opposite side renders empty (no number) which itself signals "nothing
  * here on this side". */
-.rf-diff__line[data-type="remove"] .rf-diff__gutter-num[data-side="before"] {
+.rf-diff__line[data-line-status="remove"] .rf-diff__gutter-num[data-side="before"] {
 	color: var(--rf-color-danger);
 }
-.rf-diff__line[data-type="add"] .rf-diff__gutter-num[data-side="after"] {
+.rf-diff__line[data-line-status="add"] .rf-diff__gutter-num[data-side="after"] {
 	color: var(--rf-color-success);
 }
 .rf-diff .rf-codeblock {
 	margin: 0;
 }
 .rf-diff__line-content {
-	flex: 1;
+	/* `flex: 1 0 auto` so line-content contributes its
+	 * `white-space: pre` text width to the line's intrinsic
+	 * max-content (which the parent grid track reads from); grow:1
+	 * lets it fill any free space in the row beyond the gutters
+	 * when the grid track is wider than the line's natural size
+	 * (short content / wide visible viewport). WORK-304. */
+	flex: 1 0 auto;
 	white-space: pre;
 	padding-right: 1rem;
 	/* Pin the row to 1.6em even when the text is empty — the highlighted

package/styles/runes/drawer.css

@@ -70,8 +70,26 @@ section.rf-drawer .rf-drawer__title {
 section.rf-drawer .rf-drawer__body > :first-child { margin-top: 0; }
 section.rf-drawer .rf-drawer__body > :last-child { margin-bottom: 0; }
 
+/* In-flow footer — small text, top divider, mirrors the dialog-mode look so
+ * authors get the same chrome whether JS is enhancing or not. */
+section.rf-drawer .rf-drawer__footer {
+	display: block;
+	margin-top: var(--rf-spacing-md);
+	padding-top: var(--rf-spacing-sm);
+	border-top: 1px solid var(--rf-drawer-border);
+	font-size: 0.875rem;
+	color: var(--rf-color-muted);
+}
+section.rf-drawer .rf-drawer__footer > :first-child { margin-top: 0; }
+section.rf-drawer .rf-drawer__footer > :last-child { margin-bottom: 0; }
+
 /* ─── JS / dialog mode ─────────────────────────────────────────── */
 
+/* Dialog base. Crucially the `display: flex` rule below is scoped to the
+ * `[open]` state — without that scope, declaring `display: flex` on the
+ * bare `dialog.rf-drawer` overrides the browser UA's `display: none` for
+ * closed dialogs, so the closed dialog renders visibly as an empty box
+ * positioned by the side `inset` rules. */
 dialog.rf-drawer {
 	box-sizing: border-box;
 	background: var(--rf-drawer-bg);
@@ -81,28 +99,36 @@ dialog.rf-drawer {
 	box-shadow: var(--rf-drawer-shadow);
 	padding: 0;
 	margin: 0;
-	overflow: auto;
+	overflow: hidden;
 	max-width: calc(100vw - 2 * var(--rf-drawer-gutter));
 	max-height: calc(100vh - 2 * var(--rf-drawer-gutter));
 }
 
+/* Flex column layout only when the dialog is actually open. The header
+ * and footer pin via `flex: 0 0 auto`; the body scrolls via `flex: 1 1
+ * auto; overflow-y: auto`. The dialog's `max-height` cap on the dialog
+ * provides the scroll context. */
+dialog.rf-drawer[open] {
+	display: flex;
+	flex-direction: column;
+}
+
 dialog.rf-drawer::backdrop {
 	background: rgb(0 0 0 / 0.35);
 	backdrop-filter: blur(2px);
 }
 
 dialog.rf-drawer .rf-drawer__header {
+	flex: 0 0 auto;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: var(--rf-spacing-md);
 	padding: var(--rf-spacing-md) var(--rf-spacing-lg);
 	border-bottom: 1px solid var(--rf-drawer-border);
-	position: sticky;
-	top: 0;
 	background: var(--rf-drawer-bg);
-	z-index: 1;
-}dialog.rf-drawer .rf-drawer__title {
+}
+dialog.rf-drawer .rf-drawer__title {
 	margin: 0;
 	font-size: 1.05rem;
 	font-weight: 600;
@@ -126,8 +152,26 @@ dialog.rf-drawer .rf-drawer__close:hover {
 }
 
 dialog.rf-drawer .rf-drawer__body {
+	flex: 1 1 auto;
+	overflow-y: auto;
 	padding: var(--rf-spacing-md) var(--rf-spacing-lg);
+	min-height: 0;
+}
+
+/* Dialog footer — small text, top divider, pinned at bottom via flex.
+ * Stays visible regardless of body scroll depth so links like "View
+ * source on GitHub →" (the SPEC-078 use case) are always one tap away. */
+dialog.rf-drawer .rf-drawer__footer {
+	flex: 0 0 auto;
+	padding: var(--rf-spacing-sm) var(--rf-spacing-lg);
+	border-top: 1px solid var(--rf-drawer-border);
+	background: var(--rf-drawer-bg);
+	font-size: 0.875rem;
+	color: var(--rf-color-muted);
 }
+dialog.rf-drawer .rf-drawer__footer > :first-child { margin-top: 0; }
+dialog.rf-drawer .rf-drawer__footer > :last-child { margin-bottom: 0; }
+dialog.rf-drawer .rf-drawer__footer p { margin: 0; }
 
 /* Collapse the vertical margins of first / last children inside the body
  * so the drawer's own padding is what spaces content from the chrome —
@@ -282,7 +326,8 @@ dialog.rf-drawer[data-state="closing"]::backdrop {
  */
 @media (max-width: 640px) {
 	dialog.rf-drawer .rf-drawer__header,
-	dialog.rf-drawer .rf-drawer__body {
+	dialog.rf-drawer .rf-drawer__body,
+	dialog.rf-drawer .rf-drawer__footer {
 		padding: 0.75rem 1rem;
 	}
 }

package/styles/runes/file-ref.css

@@ -0,0 +1,31 @@
+/* file-ref — path-based inline reference to a project file (SPEC-078).
+ *
+ * Renders as `<span class="rf-file-ref"><a>label</a></span>` in prose
+ * (plus an invisible hoist sentinel `<meta>` when preview="drawer").
+ * The span carries the data-rune class; the inner `<a>` is the click
+ * target with its own visual treatment.
+ *
+ * Without preview, the link points at the canonical GitHub URL — give
+ * it a small external-link affordance so readers know they're about to
+ * leave the page. With preview, it points at the hoisted drawer's
+ * fragment id; visually the same inline-link affordance — what makes
+ * it a "preview link" rather than a "navigate-away link" is the drawer
+ * that opens on click, not extra inline chrome.
+ */
+
+.rf-file-ref {
+	display: inline;
+}
+
+.rf-file-ref > a {
+	color: var(--rf-color-primary);
+	text-decoration: underline;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 2px;
+	font-family: var(--rf-font-mono, ui-monospace, SFMono-Regular, monospace);
+	font-size: 0.9375em;
+}
+
+.rf-file-ref > a:hover {
+	text-decoration-thickness: 2px;
+}

package/tokens/base.css

@@ -52,6 +52,20 @@
 	--rf-color-success-bg: #e0eee4;
 	--rf-color-success-border: #b8d4be;
 
+	/* WORK-304 — neutral tint for line highlight (the third
+	 * `[data-line-status]` value that snippet / codegroup / diff share).
+	 * Subtle surface tint so highlighted rows read as emphasized but not
+	 * status-coloured (which would compete with diff's add/remove channel
+	 * and the semantic palette above). `*-rail` is the optional left-edge
+	 * border colour; falls back to the primary accent via the consuming
+	 * CSS for themes that don't override it. */
+	--rf-color-line-highlight: color-mix(in srgb, var(--rf-color-text) 6%, transparent);
+	--rf-color-line-highlight-rail: var(--rf-color-primary, var(--rf-color-text));
+	/* Gutter colour for `pre[data-linenumbers]` line counter. Defers to
+	 * the existing muted text token by default; themes can pin a
+	 * dedicated hue without overriding muted. */
+	--rf-color-line-number: var(--rf-color-muted);
+
 	/* Radii */
 	--rf-radius-sm: 6px;
 	--rf-radius-md: 10px;