@refrakt-md/lumina 0.7.2 → 0.8.0

package/dist/config.d.ts

@@ -1,3 +1,3 @@
-/** Lumina theme configuration — extends base with icon SVGs */
+/** Lumina theme configuration — extends base with icon SVGs and tint presets */
 export declare const luminaConfig: import("@refrakt-md/transform").ThemeConfig;
 //# sourceMappingURL=config.d.ts.map

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAIA,+DAA+D;AAC/D,eAAO,MAAM,YAAY,6CAUvB,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAIA,gFAAgF;AAChF,eAAO,MAAM,YAAY,6CAoFvB,CAAC"}

package/dist/config.js

@@ -1,8 +1,82 @@
 import { baseConfig } from '@refrakt-md/runes';
 import { mergeThemeConfig } from '@refrakt-md/transform';
 import { icons as lucideIcons } from './icons.js';
-/** Lumina theme configuration — extends base with icon SVGs */
+/** Lumina theme configuration — extends base with icon SVGs and tint presets */
 export const luminaConfig = mergeThemeConfig(baseConfig, {
+    tints: {
+        base: {
+            light: {
+                background: '#ffffff',
+                surface: '#f8fafc',
+                primary: '#1a1a2e',
+                secondary: '#64748b',
+                accent: '#0ea5e9',
+                border: '#e2e8f0',
+            },
+            dark: {
+                background: '#0c1222',
+                surface: '#0f172a',
+                primary: '#e2e8f0',
+                secondary: '#94a3b8',
+                accent: '#38bdf8',
+                border: 'rgba(255, 255, 255, 0.1)',
+            },
+        },
+        subtle: {
+            light: {
+                background: '#f8f9fb',
+                surface: '#f8fafc',
+                primary: '#1a1a2e',
+                secondary: '#64748b',
+                accent: '#0ea5e9',
+                border: '#e2e8f0',
+            },
+            dark: {
+                background: '#111827',
+                surface: '#0f172a',
+                primary: '#e2e8f0',
+                secondary: '#94a3b8',
+                accent: '#38bdf8',
+                border: 'rgba(255, 255, 255, 0.1)',
+            },
+        },
+        warm: {
+            light: {
+                background: '#fdf6e3',
+                primary: '#5c4a32',
+                accent: '#c47d3b',
+                border: '#e0d5c0',
+            },
+            dark: {
+                background: '#2a2118',
+                primary: '#e8d5b7',
+                accent: '#e0a86e',
+                border: '#4a3f33',
+            },
+        },
+        cool: {
+            light: {
+                background: '#f0f4ff',
+                primary: '#1e3a5f',
+                accent: '#3b82f6',
+                border: '#c7d7f0',
+            },
+            dark: {
+                background: '#0f1a2e',
+                primary: '#c7d7f0',
+                accent: '#60a5fa',
+                border: '#1e3a5f',
+            },
+        },
+        dark: {
+            mode: 'dark',
+            dark: {
+                background: '#1a1a2e',
+                primary: '#e0e0e0',
+                accent: '#e94560',
+            },
+        },
+    },
     icons: {
         hint: {
             note: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',

package/dist/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAElD,+DAA+D;AAC/D,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAU,EAAE;IACxD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,4SAA4S;YAClT,OAAO,EAAE,iXAAiX;YAC1X,OAAO,EAAE,uSAAuS;YAChT,KAAK,EAAE,qRAAqR;SAC5R;QACD,MAAM,EAAE,WAAW;KACnB;CACD,CAAC,CAAC"}
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAElD,gFAAgF;AAChF,MAAM,CAAC,MAAM,YAAY,GAAG,gBAAgB,CAAC,UAAU,EAAE;IACxD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,SAAS;gBAClB,SAAS,EAAE,SAAS;gBACpB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,SAAS;gBAClB,SAAS,EAAE,SAAS;gBACpB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,0BAA0B;aAClC;SACD;QACD,MAAM,EAAE;YACP,KAAK,EAAE;gBACN,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,SAAS;gBAClB,SAAS,EAAE,SAAS;gBACpB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,SAAS;gBAClB,SAAS,EAAE,SAAS;gBACpB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,0BAA0B;aAClC;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,KAAK,EAAE;gBACN,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;YACD,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,MAAM,EAAE,SAAS;aACjB;SACD;QACD,IAAI,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE;gBACL,UAAU,EAAE,SAAS;gBACrB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;aACjB;SACD;KACD;IACD,KAAK,EAAE;QACN,IAAI,EAAE;YACL,IAAI,EAAE,4SAA4S;YAClT,OAAO,EAAE,iXAAiX;YAC1X,OAAO,EAAE,uSAAuS;YAChT,KAAK,EAAE,qRAAqR;SAC5R;QACD,MAAM,EAAE,WAAW;KACnB;CACD,CAAC,CAAC"}

package/index.css

@@ -20,10 +20,15 @@
 @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';
 
 /* Runes */
 @import './styles/runes/accordion.css';
 @import './styles/runes/annotate.css';
+@import './styles/runes/audio.css';
 @import './styles/runes/api.css';
 @import './styles/runes/bento.css';
 @import './styles/runes/bond.css';
@@ -47,6 +52,7 @@
 @import './styles/runes/faction.css';
 @import './styles/runes/feature.css';
 @import './styles/runes/figure.css';
+@import './styles/runes/gallery.css';
 @import './styles/runes/form.css';
 @import './styles/runes/grid.css';
 @import './styles/runes/hero.css';
@@ -59,6 +65,7 @@
 @import './styles/runes/nav.css';
 @import './styles/runes/organization.css';
 @import './styles/runes/page-section.css';
+@import './styles/runes/playlist.css';
 @import './styles/runes/plot.css';
 @import './styles/runes/preview.css';
 @import './styles/runes/pricing.css';
@@ -74,6 +81,7 @@
 @import './styles/runes/testimonial.css';
 @import './styles/runes/timeline.css';
 @import './styles/runes/toc.css';
+@import './styles/runes/track.css';
 @import './styles/runes/swatch.css';
 @import './styles/runes/palette.css';
 @import './styles/runes/typography.css';
@@ -82,3 +90,6 @@
 @import './styles/runes/pullquote.css';
 @import './styles/runes/textblock.css';
 @import './styles/runes/mediatext.css';
+@import './styles/runes/tint.css';
+@import './styles/runes/showcase.css';
+@import './styles/runes/bg.css';

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.7.2",
+  "version": "0.8.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -46,10 +46,10 @@
     "build": "tsc"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.7.2",
-    "@refrakt-md/transform": "0.7.2",
-    "@refrakt-md/types": "0.7.2",
-    "@refrakt-md/svelte": "0.7.2"
+    "@refrakt-md/runes": "0.8.0",
+    "@refrakt-md/transform": "0.8.0",
+    "@refrakt-md/types": "0.8.0",
+    "@refrakt-md/svelte": "0.8.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",

package/styles/base/attributes.css

@@ -0,0 +1,20 @@
+/* Universal Rune Attributes — spacing & inset
+ *
+ * Compound attribute selectors [data-rune][data-*] give specificity (0,2,0):
+ *   - Overrides rune defaults like .rf-itinerary { margin: 2rem 0 } at (0,1,0)
+ *   - Overridden by layout-level rules in default.css at (0,2,1)
+ *   - Per-rune overrides (e.g. showcase) win via source order (loaded after) */
+
+/* ── Spacing — vertical rhythm ─────────────────────────────────────── */
+
+[data-rune][data-spacing="flush"]   { margin-top: 0; margin-bottom: 0; }
+[data-rune][data-spacing="tight"]   { margin-top: var(--rf-spacing-section-tight, 1.5rem); margin-bottom: var(--rf-spacing-section-tight, 1.5rem); }
+[data-rune][data-spacing="loose"]   { margin-top: var(--rf-spacing-section-loose, 8rem); margin-bottom: var(--rf-spacing-section-loose, 8rem); }
+[data-rune][data-spacing="breathe"] { margin-top: var(--rf-spacing-section-breathe, 12rem); margin-bottom: var(--rf-spacing-section-breathe, 12rem); }
+
+/* ── Inset — horizontal padding ────────────────────────────────────── */
+
+[data-rune][data-inset="flush"]   { padding-inline: 0; }
+[data-rune][data-inset="tight"]   { padding-inline: var(--rf-inset-tight, 1rem); }
+[data-rune][data-inset="loose"]   { padding-inline: var(--rf-inset-loose, 4rem); }
+[data-rune][data-inset="breathe"] { padding-inline: var(--rf-inset-breathe, 8rem); }

package/styles/global.css

@@ -27,8 +27,8 @@ h1, h2, h3, h4, h5, h6 {
 	letter-spacing: -0.015em;
 }
 
-h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; }
-h2 { font-size: 1.5rem; }
+h1 { font-size: 2rem; font-weight: 400; letter-spacing: -0.025em; }
+h2 { font-size: 2.5rem; font-weight: 400; }
 h3 { font-size: 1.25rem; }
 h4 { font-size: 1.1rem; }
 

package/styles/layouts/default.css

@@ -1,5 +1,9 @@
 /* Default layout */
 .rf-header {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	background: var(--rf-color-bg);
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-header__inner {
@@ -57,15 +61,137 @@
 	vertical-align: -0.15em;
 }
 .rf-page-content {
+	--rf-content-max: 80rem;
+	--rf-content-gutter: 1.5rem;
+
 	padding-top: 2.5rem;
 	padding-bottom: 4rem;
-	max-width: 64rem;
-	margin: 0 auto;
-	padding-left: 1.5rem;
-	padding-right: 1.5rem;
-	--rf-content-padding: 1.5rem;
 	container-type: inline-size;
 }
+/* Markdoc wraps content in <article>; make it the grid container.
+   5-track named grid: full | wide | content | wide | full */
+.rf-page-content > article {
+	display: grid;
+	grid-template-columns:
+		[full-start] 1fr
+		[wide-start] minmax(0, var(--rf-wide-inset, 8rem))
+		[content-start] min(var(--rf-content-max), 100% - var(--rf-content-gutter) * 2)
+		[content-end] minmax(0, var(--rf-wide-inset, 8rem))
+		[wide-end] 1fr
+		[full-end];
+}
+.rf-page-content > article > * {
+	grid-column: content;
+}
+
+/* Width constraint via data-width attribute — narrower than content */
+.rf-page-content > article > [data-width="compact"] {
+	max-width: var(--rf-width-compact, 30rem);
+	margin-inline: auto;
+}
+.rf-page-content > article > [data-width="narrow"] {
+	max-width: var(--rf-width-narrow, 40rem);
+	margin-inline: auto;
+}
+/* Width breakout via data-width attribute — wider than content */
+.rf-page-content > article > [data-width="wide"] {
+	grid-column: wide;
+}
+.rf-page-content > article > [data-width="full"] {
+	grid-column: full;
+	padding-inline: max(
+		var(--rf-content-gutter, 1.5rem),
+		calc((100% - var(--rf-content-max, 80rem)) / 2)
+	);
+}
+/* Tinted sections also break out to full width */
+.rf-page-content > article > :is([data-tint], [data-color-scheme]):not([data-width]) {
+	grid-column: full;
+	padding-inline: max(
+		var(--rf-content-gutter, 1.5rem),
+		calc((100% - var(--rf-content-max, 80rem)) / 2)
+	);
+}
+
+/* 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 > * + * {
+	margin-top: var(--rf-spacing-section, 4rem);
+	margin-bottom: var(--rf-spacing-section, 4rem);
+}
+.rf-page-content > article > [data-spacing="flush"] {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+.rf-page-content > article > [data-spacing="tight"] {
+	margin-top: var(--rf-spacing-section-tight, 1.5rem);
+	margin-bottom: var(--rf-spacing-section-tight, 1.5rem);
+}
+.rf-page-content > article > [data-spacing="loose"] {
+	margin-top: var(--rf-spacing-section-loose, 8rem);
+	margin-bottom: var(--rf-spacing-section-loose, 8rem);
+}
+.rf-page-content > article > [data-spacing="breathe"] {
+	margin-top: var(--rf-spacing-section-breathe, 12rem);
+	margin-bottom: var(--rf-spacing-section-breathe, 12rem);
+}
+
+/* Spacing on tinted/dark sections — use padding so space is inside the painted background */
+.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="flush"] {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="tight"] {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: var(--rf-spacing-section-tight, 1.5rem);
+	padding-bottom: var(--rf-spacing-section-tight, 1.5rem);
+}
+.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="default"],
+.rf-page-content > article > :is([data-color-scheme], [data-tint]):not([data-spacing]) {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: var(--rf-spacing-section, 4rem);
+	padding-bottom: var(--rf-spacing-section, 4rem);
+}
+.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="loose"] {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: var(--rf-spacing-section-loose, 8rem);
+	padding-bottom: var(--rf-spacing-section-loose, 8rem);
+}
+.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="breathe"] {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: var(--rf-spacing-section-breathe, 12rem);
+	padding-bottom: var(--rf-spacing-section-breathe, 12rem);
+}
+
+/* Inset — horizontal padding within block runes */
+.rf-page-content > article > [data-inset="flush"] {
+	padding-inline: 0;
+}
+.rf-page-content > article > [data-inset="tight"] {
+	padding-inline: var(--rf-inset-tight, 1rem);
+}
+.rf-page-content > article > [data-inset="loose"] {
+	padding-inline: var(--rf-inset-loose, 4rem);
+}
+.rf-page-content > article > [data-inset="breathe"] {
+	padding-inline: var(--rf-inset-breathe, 8rem);
+}
+
+/* Collapse top/bottom padding when a full-bleed section is first/last */
+.rf-page-content:has(> article > :first-child:is([data-width="full"], [data-tint])) {
+	padding-top: 0;
+}
+.rf-page-content:has(> article > :last-child:is([data-width="full"], [data-tint])) {
+	padding-bottom: 0;
+}
 
 @media (max-width: 768px) {
 	.rf-header__inner p ~ p {

package/styles/layouts/split.css

@@ -0,0 +1,34 @@
+/* Shared split layout — used by Feature, Hero, Step, and any rune with data-layout */
+
+[data-layout="split"],
+[data-layout="split-reverse"] {
+  display: grid;
+  grid-template-columns: var(--split-ratio, 1fr 1fr);
+  align-items: var(--split-valign, start);
+  gap: var(--split-gap, var(--rf-spacing-lg));
+}
+
+[data-layout="split-reverse"] > [data-name="content"] { order: 2; }
+[data-layout="split-reverse"] > [data-name="media"] { order: 1; }
+
+/* Grid so children can use justify-self/align-self (default: stretch) */
+[data-layout="split"] > [data-name="media"],
+[data-layout="split-reverse"] > [data-name="media"] {
+  display: grid;
+}
+
+/* Collapse breakpoints */
+@media (max-width: 640px) {
+  [data-layout^="split"][data-collapse="sm"] { grid-template-columns: 1fr; }
+  [data-layout^="split"][data-collapse="sm"] > * { order: unset; }
+}
+
+@media (max-width: 768px) {
+  [data-layout^="split"][data-collapse="md"] { grid-template-columns: 1fr; }
+  [data-layout^="split"][data-collapse="md"] > * { order: unset; }
+}
+
+@media (max-width: 1024px) {
+  [data-layout^="split"][data-collapse="lg"] { grid-template-columns: 1fr; }
+  [data-layout^="split"][data-collapse="lg"] > * { order: unset; }
+}

package/styles/runes/annotate.css

@@ -73,8 +73,8 @@
 	display: block;
 }
 .rf-annotate-note__body p:last-child { margin-bottom: 0; }
-.rf-annotate-note__body span[property],
-.rf-annotate-note__body meta { display: none; }
+.rf-annotate-note__body > span[property],
+.rf-annotate-note__body > meta { display: none; }
 @media (max-width: 768px) {
 	.rf-annotate--margin .rf-annotate-note {
 		float: none;

package/styles/runes/audio.css

@@ -0,0 +1,199 @@
+/* Audio */
+.rf-audio {
+	margin: 1.5rem 0;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	overflow: hidden;
+}
+.rf-audio rf-audio {
+	display: block;
+}
+.rf-audio__description {
+	padding: 0.75rem 1rem;
+	font-size: 0.875rem;
+	color: var(--rf-color-muted);
+	border-top: 1px solid var(--rf-color-border);
+	line-height: 1.5;
+}
+.rf-audio__description p {
+	margin: 0;
+}
+.rf-audio__description p + p {
+	margin-top: 0.5rem;
+}
+
+/* ── Audio Player (web component internals) ── */
+
+.rf-audio-player {
+	padding: 1rem 1.25rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.625rem;
+}
+
+/* Track info */
+.rf-audio-player__info {
+	display: flex;
+	flex-direction: column;
+	gap: 0.125rem;
+}
+.rf-audio-player__name {
+	font-size: 0.9375rem;
+	font-weight: 600;
+	color: var(--rf-color-text);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.rf-audio-player__artist {
+	font-size: 0.8125rem;
+	color: var(--rf-color-muted);
+}
+
+/* Controls row */
+.rf-audio-player__controls {
+	display: flex;
+	align-items: center;
+	gap: 0.625rem;
+}
+
+/* Play / pause button */
+.rf-audio-player__play {
+	flex-shrink: 0;
+	width: 2.25rem;
+	height: 2.25rem;
+	border-radius: var(--rf-radius-full, 9999px);
+	border: none;
+	background: var(--rf-color-primary);
+	color: #fff;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: opacity 0.15s ease;
+	padding: 0;
+}
+.rf-audio-player__play:hover {
+	opacity: 0.85;
+}
+.rf-audio-player__play:focus-visible {
+	outline: 2px solid var(--rf-color-primary);
+	outline-offset: 2px;
+}
+.rf-audio-player__play:disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+.rf-audio-player__play svg {
+	width: 1rem;
+	height: 1rem;
+	fill: currentColor;
+}
+
+/* Time displays */
+.rf-audio-player__time {
+	font-size: 0.75rem;
+	font-variant-numeric: tabular-nums;
+	color: var(--rf-color-muted);
+	min-width: 2.5rem;
+	user-select: none;
+}
+.rf-audio-player__time--current {
+	text-align: right;
+}
+.rf-audio-player__time--duration {
+	text-align: left;
+}
+
+/* Progress bar */
+.rf-audio-player__progress {
+	flex: 1;
+	height: 6px;
+	background: var(--rf-color-surface-active, #e5e7eb);
+	border-radius: var(--rf-radius-full, 9999px);
+	cursor: pointer;
+	position: relative;
+	overflow: hidden;
+}
+.rf-audio-player__progress:focus-visible {
+	outline: 2px solid var(--rf-color-primary);
+	outline-offset: 2px;
+}
+.rf-audio-player__progress-bar {
+	height: 100%;
+	background: var(--rf-color-primary);
+	border-radius: var(--rf-radius-full, 9999px);
+	width: 0%;
+	transition: width 0.1s linear;
+	pointer-events: none;
+}
+
+/* Waveform container */
+.rf-audio-player__waveform {
+	width: 100%;
+	min-height: 48px;
+	border-radius: var(--rf-radius-sm, 4px);
+	overflow: hidden;
+}
+
+/* Hide standard progress bar when waveform is active */
+.rf-audio[data-waveform="true"] .rf-audio-player__controls .rf-audio-player__progress {
+	display: none;
+}
+
+/* Chapter list */
+.rf-audio-player__chapters {
+	list-style: none;
+	padding: 0;
+	margin: 0.5rem 0 0;
+	border-top: 1px solid var(--rf-color-border);
+	padding-top: 0.5rem;
+}
+.rf-audio-player__chapter {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.375rem 0.5rem;
+	border: none;
+	background: none;
+	cursor: pointer;
+	border-radius: var(--rf-radius-sm, 4px);
+	transition: background 0.15s ease;
+	text-align: left;
+	font-family: inherit;
+}
+.rf-audio-player__chapter:hover {
+	background: var(--rf-color-surface-hover, rgba(0, 0, 0, 0.04));
+}
+.rf-audio-player__chapter:focus-visible {
+	outline: 2px solid var(--rf-color-primary);
+	outline-offset: -2px;
+}
+.rf-audio-player__chapter--active {
+	background: color-mix(in srgb, var(--rf-color-primary) 8%, transparent);
+}
+.rf-audio-player__chapter--active .rf-audio-player__chapter-name {
+	color: var(--rf-color-primary);
+}
+.rf-audio-player__chapter-name {
+	flex: 1;
+	font-size: 0.8125rem;
+	font-weight: 500;
+	color: var(--rf-color-text);
+}
+.rf-audio-player__chapter-time {
+	font-size: 0.75rem;
+	font-variant-numeric: tabular-nums;
+	color: var(--rf-color-muted);
+	flex-shrink: 0;
+}
+
+/* Active track highlight when connected to audio player */
+.rf-track--active {
+	background: color-mix(in srgb, var(--rf-color-primary) 6%, transparent);
+	border-radius: var(--rf-radius-sm, 4px);
+}
+.rf-track--active .rf-track__track-name {
+	color: var(--rf-color-primary);
+}

package/styles/runes/bento.css

@@ -50,6 +50,9 @@
 	background: var(--rf-color-surface);
 	overflow: hidden;
 }
+.rf-bento-cell--full {
+	grid-column: 1 / -1;
+}
 .rf-bento-cell--large {
 	grid-column: span 2;
 	grid-row: span 2;
@@ -60,13 +63,31 @@
 .rf-bento-cell--small {
 	grid-column: span 1;
 }
+/* Span mode: heading level determines column span via CSS variable */
+.rf-bento-cell--span {
+	grid-column: span var(--cell-span, 1);
+}
+.rf-bento-cell__icon {
+	margin-bottom: 0.75rem;
+	line-height: 0;
+}
+.rf-bento-cell__icon svg {
+	width: 1.5rem;
+	height: 1.5rem;
+	color: var(--rf-color-accent);
+}
+.rf-bento-cell__icon .rf-icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	color: var(--rf-color-accent);
+}
 .rf-bento-cell__title {
-	font-size: 1rem;
+	font-size: 1.125rem;
 	font-weight: 600;
 	margin: 0 0 0.5rem;
 }
-.rf-bento-cell__body span[property],
-.rf-bento-cell__body meta { display: none; }
+.rf-bento-cell__body > span[property],
+.rf-bento-cell__body > meta { display: none; }
 .rf-bento-cell__body p:last-child { margin-bottom: 0; }
 .rf-bento-cell img {
 	width: 100%;
@@ -74,13 +95,33 @@
 	border-radius: var(--rf-radius-sm);
 	margin-bottom: 0.75rem;
 }
+/* Remove padding on bleed edges when showcase bleeds inside a cell */
+.rf-bento-cell:has(.rf-showcase[data-bleed="bottom"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]) {
+	padding-bottom: 0;
+}
+.rf-bento-cell:has(.rf-showcase[data-bleed="end"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="bottom-end"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
+	padding-inline-end: 0;
+}
+.rf-bento-cell:has(.rf-showcase[data-bleed="top"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="both"]),
+.rf-bento-cell:has(.rf-showcase[data-bleed="top-end"]) {
+	padding-top: 0;
+}
 @media (max-width: 768px) {
 	.rf-bento__grid { grid-template-columns: repeat(2, 1fr) !important; }
+	.rf-bento-cell--full { grid-column: 1 / -1; }
 	.rf-bento-cell--large { grid-column: span 2; grid-row: span 1; }
 	.rf-bento-cell--medium { grid-column: span 2; }
+	.rf-bento-cell--span { grid-column: span min(var(--cell-span, 1), 2); }
 }
 @media (max-width: 480px) {
 	.rf-bento__grid { grid-template-columns: 1fr !important; }
+	.rf-bento-cell--full,
 	.rf-bento-cell--large,
-	.rf-bento-cell--medium { grid-column: span 1; }
+	.rf-bento-cell--medium,
+	.rf-bento-cell--span { grid-column: span 1; }
 }