@refrakt-md/lumina 0.8.0 → 0.8.2

package/base.css

@@ -20,3 +20,7 @@
 @import './styles/layouts/on-this-page.css';
 @import './styles/layouts/search.css';
 @import './styles/layouts/version-switcher.css';
+@import './styles/layouts/split.css';
+
+/* Universal Rune Attributes */
+@import './styles/base/attributes.css';

package/contracts/structures.json

@@ -1184,6 +1184,11 @@
 					"tag": "image",
 					"selector": ".rf-feature__image",
 					"source": "autoLabel"
+				},
+				"definitions": {
+					"tag": "dl",
+					"selector": ".rf-feature__definitions",
+					"source": "autoLabel"
 				}
 			},
 			"inlineStyles": {
@@ -1198,15 +1203,6 @@
 				}
 			}
 		},
-		"FeatureDefinition": {
-			"block": "feature-definition",
-			"root": ".rf-feature-definition",
-			"dataRune": "feature-definition",
-			"parent": "Feature",
-			"childOrder": [
-				"{content}"
-			]
-		},
 		"Steps": {
 			"block": "steps",
 			"root": ".rf-steps",
@@ -2423,9 +2419,15 @@
 			"dataRune": "recipe",
 			"childOrder": [
 				"meta",
-				"{content:content}"
+				"{content}"
 			],
 			"modifiers": {
+				"layout": {
+					"source": "meta",
+					"default": "stacked",
+					"classPattern": ".rf-recipe--{value}",
+					"dataAttribute": "data-layout"
+				},
 				"prepTime": {
 					"source": "meta",
 					"classPattern": ".rf-recipe--{value}",
@@ -2446,6 +2448,25 @@
 					"default": "medium",
 					"classPattern": ".rf-recipe--{value}",
 					"dataAttribute": "data-difficulty"
+				},
+				"ratio": {
+					"source": "meta",
+					"default": "1 1",
+					"dataAttribute": "data-ratio"
+				},
+				"valign": {
+					"source": "meta",
+					"default": "top",
+					"dataAttribute": "data-valign"
+				},
+				"gap": {
+					"source": "meta",
+					"default": "default",
+					"dataAttribute": "data-gap"
+				},
+				"collapse": {
+					"source": "meta",
+					"dataAttribute": "data-collapse"
 				}
 			},
 			"elements": {
@@ -2474,10 +2495,46 @@
 					"parent": "meta",
 					"condition": "difficulty"
 				},
-				"content": {
-					"tag": "div",
-					"selector": ".rf-recipe__content",
-					"source": "contentWrapper"
+				"header": {
+					"tag": "header",
+					"selector": ".rf-recipe__header",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-recipe__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-recipe__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-recipe__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-recipe__image",
+					"source": "autoLabel"
+				},
+				"media": {
+					"tag": "media",
+					"selector": ".rf-recipe__media",
+					"source": "autoLabel"
+				}
+			},
+			"inlineStyles": {
+				"ratio": {
+					"prop": "--split-ratio"
+				},
+				"valign": {
+					"prop": "--split-valign"
+				},
+				"gap": {
+					"prop": "--split-gap"
 				}
 			}
 		},

package/html/index.ts

@@ -0,0 +1,28 @@
+import type { HtmlTheme } from '@refrakt-md/html';
+import manifest from '../manifest.json';
+import { defaultLayout, docsLayout, blogArticleLayout } from '@refrakt-md/transform';
+
+// Layout region metadata from the base theme manifest
+const layoutRegions: Record<string, { regions: string[]; requiredRegions?: string[] }> = {
+	default: { regions: ['header', 'footer'] },
+	docs: { regions: ['header', 'nav', 'sidebar', 'footer'], requiredRegions: ['nav'] },
+	'blog-article': { regions: ['header', 'sidebar', 'footer'] },
+};
+
+const layouts: Record<string, any> = {};
+for (const [name, def] of Object.entries(manifest.layouts)) {
+	layouts[name] = { ...layoutRegions[name], ...def };
+}
+
+const mergedManifest = { ...manifest, layouts };
+
+export { mergedManifest as manifest };
+
+export const theme: HtmlTheme = {
+	manifest: mergedManifest as any,
+	layouts: {
+		default: defaultLayout,
+		docs: docsLayout,
+		'blog-article': blogArticleLayout,
+	},
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and framework adapters",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -28,6 +28,10 @@
       "svelte": "./svelte/index.ts",
       "default": "./svelte/index.ts"
     },
+    "./html": {
+      "types": "./html/index.ts",
+      "default": "./html/index.ts"
+    },
     "./styles/runes/*.css": "./styles/runes/*.css",
     "./svelte/tokens.css": "./svelte/tokens.css",
     "./svelte/manifest": "./svelte/manifest.json"
@@ -40,20 +44,22 @@
     "styles",
     "contracts",
     "manifest.json",
-    "svelte"
+    "svelte",
+    "html"
   ],
   "scripts": {
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.8.0",
-    "@refrakt-md/transform": "0.8.0",
-    "@refrakt-md/types": "0.8.0",
-    "@refrakt-md/svelte": "0.8.0"
+    "@refrakt-md/runes": "0.8.2",
+    "@refrakt-md/transform": "0.8.2",
+    "@refrakt-md/types": "0.8.2",
+    "@refrakt-md/svelte": "0.8.2"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@sveltejs/kit": "^2.0.0"
+    "@sveltejs/kit": "^2.0.0",
+    "@refrakt-md/html": "0.8.2"
   },
   "devDependencies": {
     "postcss": "^8.4.0"
@@ -64,6 +70,9 @@
     },
     "@sveltejs/kit": {
       "optional": true
+    },
+    "@refrakt-md/html": {
+      "optional": true
     }
   }
 }

package/styles/layouts/default.css

@@ -113,14 +113,20 @@
 	);
 }
 
-/* Section spacing — vertical rhythm between block runes
- * Symmetric margins collapse between plain sections (no visual change)
- * but ensure correct gaps at plain→tinted boundaries (where tinted
- * sections use padding instead of margin). */
-.rf-page-content > article > * + * {
+/* Section spacing — vertical rhythm around block runes.
+ * Rune blocks (elements with data-rune) get section-level margins.
+ * Prose elements (p, h2, pre, table, etc.) keep their natural flow
+ * spacing from global.css — only gaining section margins when
+ * immediately adjacent to a rune block. */
+.rf-page-content > article > * + [data-rune] {
 	margin-top: var(--rf-spacing-section, 4rem);
 	margin-bottom: var(--rf-spacing-section, 4rem);
 }
+/* Prose after a rune block: section gap above only.
+ * No margin-bottom so subsequent prose keeps natural flow spacing. */
+.rf-page-content > article > [data-rune] + :not([data-rune]) {
+	margin-top: var(--rf-spacing-section, 4rem);
+}
 .rf-page-content > article > [data-spacing="flush"] {
 	margin-top: 0;
 	margin-bottom: 0;

package/styles/layouts/search.css

@@ -200,7 +200,10 @@
 		bottom: 0;
 		transform: none;
 		width: 100%;
+		height: 100vh;
+		height: 100dvh;
 		max-height: 100vh;
+		max-height: 100dvh;
 		border-radius: 0;
 		border: none;
 	}

package/styles/runes/feature.css

@@ -57,7 +57,7 @@
 .rf-feature[data-align="right"] h2 {
 	text-align: right;
 }
-.rf-feature dl {
+.rf-feature__definitions {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 3rem) / 3)), 1fr));
 	gap: 1.5rem;
@@ -74,40 +74,40 @@
 .rf-feature[data-layout="split-reverse"] h2 {
 	text-align: left;
 }
-.rf-feature[data-layout="split"] dl,
-.rf-feature[data-layout="split-reverse"] dl {
+.rf-feature[data-layout="split"] .rf-feature__definitions,
+.rf-feature[data-layout="split-reverse"] .rf-feature__definitions {
 	display: block;
 }
-.rf-feature[data-layout="split"] .rf-feature-definition,
-.rf-feature[data-layout="split-reverse"] .rf-feature-definition {
+.rf-feature[data-layout="split"] .rf-feature__feature-item,
+.rf-feature[data-layout="split-reverse"] .rf-feature__feature-item {
 	border: none;
 	background: none;
 	padding: 0.75rem 0;
 }
-.rf-feature-definition {
+.rf-feature__feature-item {
 	padding: 1.75rem;
 	border-radius: var(--rf-radius-md);
 	border: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg);
 }
-.rf-feature-definition dt {
+.rf-feature__feature-item dt {
 	font-weight: 650;
 	font-size: 1.125rem;
 	margin-bottom: 0.75rem;
 	letter-spacing: -0.01em;
 	color: var(--rf-color-text);
 }
-.rf-feature-definition dt:has(> .rf-icon) {
+.rf-feature__feature-item dt:has(> .rf-icon) {
 	display: flex;
 	flex-direction: column;
 }
-.rf-feature-definition dt > .rf-icon {
+.rf-feature__feature-item dt > .rf-icon {
 	width: 1.5rem;
 	height: 1.5rem;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-accent);
 }
-.rf-feature-definition dd {
+.rf-feature__feature-item dd {
 	margin: 0;
 	color: var(--rf-color-muted);
 	font-size: 0.9rem;
@@ -118,7 +118,7 @@
 .rf-feature--in-hero {
 	padding-top: 0;
 }
-.rf-feature--in-hero .rf-feature-definition {
+.rf-feature--in-hero .rf-feature__feature-item {
 	background: transparent;
 	border-color: rgba(255, 255, 255, 0.15);
 }

package/styles/runes/recipe.css

@@ -5,6 +5,28 @@
 	padding: 2rem;
 	margin: 1.5rem 0;
 }
+.rf-recipe__header {
+	margin-bottom: 1.5rem;
+}
+.rf-recipe .rf-recipe__eyebrow {
+	font-size: 0.875rem;
+	font-weight: 600;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.5rem;
+}
+.rf-recipe__headline {
+	margin-top: 0;
+}
+.rf-recipe .rf-recipe__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+	max-width: 40rem;
+}
+.rf-recipe__image {
+	margin-bottom: 1rem;
+}
 .rf-recipe__meta {
 	display: flex;
 	flex-wrap: wrap;
@@ -45,3 +67,18 @@
 .rf-recipe__content ol li {
 	padding: 0.25rem 0;
 }
+/* Media zone */
+.rf-recipe__media {
+	border-radius: var(--rf-radius-lg);
+}
+.rf-recipe__media img {
+	display: block;
+	width: 100%;
+	height: auto;
+	border-radius: var(--rf-radius-lg);
+}
+/* Split layout: meta bar spans full width above the grid */
+.rf-recipe[data-layout="split"] > .rf-recipe__meta,
+.rf-recipe[data-layout="split-reverse"] > .rf-recipe__meta {
+	grid-column: 1 / -1;
+}

package/styles/runes/tabs.css

@@ -42,13 +42,7 @@
 .rf-tabs__image {
 	margin-bottom: 1rem;
 }
-.rf-tabs__tabs,
-.rf-tabs__panels {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
-.rf-tabs__bar {
+.rf-tabs__tabs {
 	display: flex;
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
@@ -56,7 +50,11 @@
 	overflow-y: hidden;
 	-webkit-overflow-scrolling: touch;
 }
-.rf-tabs__button {
+.rf-tabs__panels {
+	padding: 0;
+	margin: 0;
+}
+.rf-tab {
 	flex: 0 0 auto;
 	padding: 0.625rem 1.25rem;
 	font-size: 0.85rem;
@@ -71,11 +69,11 @@
 	margin-bottom: -1px;
 	font-family: inherit;
 }
-.rf-tabs__button:hover {
+.rf-tab:hover {
 	color: var(--rf-color-text);
 	background: var(--rf-color-surface-hover);
 }
-.rf-tabs__button--active {
+.rf-tab--active {
 	color: var(--rf-color-primary);
 	border-bottom-color: var(--rf-color-primary);
 	font-weight: 600;