@refrakt-md/lumina 0.24.0 → 0.24.1

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.24.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.24.0",
-    "@refrakt-md/skeleton": "0.24.0",
-    "@refrakt-md/transform": "0.24.0",
-    "@refrakt-md/types": "0.24.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/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/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/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"] {