@refrakt-md/lumina 0.8.4 → 0.9.0

package/styles/runes/milestone.css

@@ -0,0 +1,106 @@
+/* Milestone */
+.rf-milestone__target-badge {
+	margin-left: auto;
+}
+.rf-milestone__body {
+	font-size: 0.925rem;
+	line-height: 1.65;
+}
+.rf-milestone__body > header {
+	margin-bottom: 0.75rem;
+}
+.rf-milestone__body > header h1,
+.rf-milestone__body > header h2,
+.rf-milestone__body > header h3 {
+	margin-top: 0;
+}
+.rf-milestone__body ul {
+	padding-left: 1.5rem;
+}
+
+/* Auto-backlog */
+.rf-milestone__backlog {
+	margin-top: 1.25rem;
+	padding-top: 1rem;
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-milestone__backlog-group {
+	margin-bottom: 1rem;
+}
+.rf-milestone__backlog-group-label {
+	font-size: 0.75rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+	margin: 0 0 0.375rem;
+}
+
+/* Backlog tabs */
+.rf-milestone__tabs {
+	display: flex;
+	border-bottom: 1px solid var(--rf-color-border);
+	overflow-x: auto;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+	margin-bottom: 0;
+}
+.rf-milestone__tab {
+	flex: 0 0 auto;
+	padding: 0.5rem 1rem;
+	font-size: 0.8125rem;
+	font-weight: 500;
+	color: var(--rf-color-muted);
+	background: none;
+	border: none;
+	border-bottom: 2px solid transparent;
+	cursor: pointer;
+	transition: color 200ms ease, border-color 200ms ease;
+	white-space: nowrap;
+	font-family: inherit;
+}
+.rf-milestone__tab:hover {
+	color: var(--rf-color-text);
+}
+.rf-milestone__tab--active {
+	color: var(--rf-color-primary);
+	border-bottom-color: var(--rf-color-primary);
+	font-weight: 600;
+}
+.rf-milestone__panels {
+	padding: 0;
+	margin: 0;
+}
+.rf-milestone__panel {
+	padding-top: 0.75rem;
+}
+
+/* Aggregate progress */
+.rf-milestone__progress {
+	display: flex;
+	align-items: center;
+	gap: 0.625rem;
+	margin-bottom: 1rem;
+}
+.rf-milestone__progress-label {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--rf-color-muted);
+	white-space: nowrap;
+}
+.rf-milestone__progress-bar {
+	flex: 1;
+	height: 0.375rem;
+	border-radius: var(--rf-radius-sm);
+	background: var(--rf-color-surface-active);
+	overflow: hidden;
+}
+.rf-milestone__progress-bar::after {
+	content: '';
+	display: block;
+	height: 100%;
+	width: var(--rf-progress, 0%);
+	background: var(--rf-color-success);
+	border-radius: var(--rf-radius-sm);
+	transition: width 0.3s ease;
+}

package/styles/runes/mockup.css

@@ -10,7 +10,6 @@
 	display: block;
 	width: 100%;
 	container-type: inline-size;
-	margin: 1.5rem 0;
 	background-color: transparent;
 }
 

package/styles/runes/organization.css

@@ -1,7 +1,4 @@
 /* Organization */
-.rf-organization {
-	margin: 1.5rem 0;
-}
 .rf-organization__type {
 	font-size: 0.75rem;
 	font-weight: 400;

package/styles/runes/palette.css

@@ -1,7 +1,4 @@
 /* Palette — color swatch grid */
-.rf-palette {
-	margin: 1.5rem 0;
-}
 .rf-palette__title {
 	font-size: 1.125rem;
 	font-weight: 600;

package/styles/runes/plan-activity.css

@@ -0,0 +1,87 @@
+/* Plan Activity */
+.rf-plan-activity__list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.rf-plan-activity__entry {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	padding: 0.25rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+	font-size: 0.8125rem;
+}
+.rf-plan-activity__entry:nth-child(odd) {
+	background: var(--rf-color-surface);
+}
+.rf-plan-activity__date {
+	font-family: var(--rf-font-mono);
+	font-size: 0.75rem;
+	color: var(--rf-color-muted);
+	white-space: nowrap;
+}
+.rf-plan-activity__type {
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+	min-width: 4rem;
+}
+.rf-plan-activity__id {
+	font-family: var(--rf-font-mono);
+	font-size: 0.75rem;
+	color: var(--rf-color-primary);
+	white-space: nowrap;
+}
+.rf-plan-activity__status {
+	font-size: 0.75rem;
+	padding: 0.0625rem 0.375rem;
+	border-radius: var(--rf-radius-sm);
+	white-space: nowrap;
+}
+
+/* Status badge colors */
+.rf-plan-activity__status[data-status="done"],
+.rf-plan-activity__status[data-status="fixed"],
+.rf-plan-activity__status[data-status="accepted"] {
+	color: var(--rf-color-success);
+	background: var(--rf-color-success-bg);
+}
+.rf-plan-activity__status[data-status="in-progress"],
+.rf-plan-activity__status[data-status="confirmed"],
+.rf-plan-activity__status[data-status="review"] {
+	color: var(--rf-color-warning);
+	background: var(--rf-color-warning-bg);
+}
+.rf-plan-activity__status[data-status="ready"],
+.rf-plan-activity__status[data-status="reported"],
+.rf-plan-activity__status[data-status="proposed"] {
+	color: var(--rf-color-info);
+	background: var(--rf-color-info-bg);
+}
+.rf-plan-activity__status[data-status="blocked"] {
+	color: var(--rf-color-danger);
+	background: var(--rf-color-danger-bg);
+}
+.rf-plan-activity__status[data-status="draft"] {
+	color: var(--rf-color-muted);
+	background: var(--rf-color-surface-active);
+}
+.rf-plan-activity__title {
+	color: var(--rf-color-text);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.rf-plan-activity__link {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	color: inherit;
+	text-decoration: none;
+	width: 100%;
+}
+.rf-plan-activity__link:hover .rf-plan-activity__title {
+	color: var(--rf-color-primary);
+}

package/styles/runes/plan-progress.css

@@ -0,0 +1,69 @@
+/* Plan Progress */
+.rf-plan-progress {
+	background: var(--rf-color-surface);
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	padding: 0.75rem 1.25rem;
+}
+.rf-plan-progress__row {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	padding-block: 0.25rem;
+}
+.rf-plan-progress__row + .rf-plan-progress__row {
+	border-block-start: 1px solid var(--rf-color-border);
+}
+.rf-plan-progress__label {
+	font-weight: 600;
+	font-size: 0.8125rem;
+	color: var(--rf-color-text);
+	min-width: 8rem;
+}
+.rf-plan-progress__counts {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.25rem 0.5rem;
+}
+.rf-plan-progress__count {
+	font-size: 0.75rem;
+	padding: 0.125rem 0.5rem;
+	border-radius: var(--rf-radius-sm);
+	white-space: nowrap;
+}
+
+/* Status-colored counts */
+.rf-plan-progress__count[data-status="done"],
+.rf-plan-progress__count[data-status="fixed"],
+.rf-plan-progress__count[data-status="accepted"],
+.rf-plan-progress__count[data-status="active"],
+.rf-plan-progress__count[data-status="complete"] {
+	color: var(--rf-color-success);
+	background: var(--rf-color-success-bg);
+}
+.rf-plan-progress__count[data-status="in-progress"],
+.rf-plan-progress__count[data-status="confirmed"],
+.rf-plan-progress__count[data-status="review"] {
+	color: var(--rf-color-warning);
+	background: var(--rf-color-warning-bg);
+}
+.rf-plan-progress__count[data-status="ready"],
+.rf-plan-progress__count[data-status="reported"],
+.rf-plan-progress__count[data-status="proposed"],
+.rf-plan-progress__count[data-status="planning"] {
+	color: var(--rf-color-info);
+	background: var(--rf-color-info-bg);
+}
+.rf-plan-progress__count[data-status="blocked"] {
+	color: var(--rf-color-danger);
+	background: var(--rf-color-danger-bg);
+}
+.rf-plan-progress__count[data-status="draft"],
+.rf-plan-progress__count[data-status="pending"],
+.rf-plan-progress__count[data-status="superseded"],
+.rf-plan-progress__count[data-status="deprecated"],
+.rf-plan-progress__count[data-status="wontfix"],
+.rf-plan-progress__count[data-status="duplicate"] {
+	color: var(--rf-color-muted);
+	background: var(--rf-color-surface-active);
+}

package/styles/runes/playlist.css

@@ -1,52 +1,112 @@
 /* Playlist */
-.rf-playlist {
-	margin: 1.5rem 0;
-}
 
-/* Header: title + description */
-.rf-playlist__header {
-	display: flex;
+/* Inner header (headline + description) inside content */
+.rf-playlist__content > .rf-playlist__header {
 	flex-direction: column;
-	gap: 0.5rem;
-	padding: 0 0 1rem;
-}
-.rf-playlist__header h1,
-.rf-playlist__header h2,
-.rf-playlist__header h3,
-.rf-playlist__header h4,
-.rf-playlist__header h5,
-.rf-playlist__header h6 {
+	align-items: flex-start;
+	gap: 0.25rem;
+	margin-bottom: 1rem;
+}
+.rf-playlist__headline {
 	margin: 0;
-	font-size: 1.25rem;
-	font-weight: 700;
-	color: var(--rf-color-text);
 }
-.rf-playlist__header p {
+.rf-playlist__content > .rf-playlist__header p {
 	margin: 0;
-	font-size: 0.875rem;
+	font-size: 0.925rem;
 	color: var(--rf-color-muted);
 	line-height: 1.5;
 }
 
-/* Type badge */
-.rf-playlist__type-badge {
-	display: inline-block;
-	font-size: 0.7rem;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	padding: 0.125rem 0.5rem;
-	border-radius: var(--rf-radius-full);
-	color: var(--rf-color-primary);
-	background: color-mix(in srgb, var(--rf-color-primary) 10%, transparent);
-	width: fit-content;
-}
-
 /* Tracks list wrapper */
 .rf-playlist__tracks {
 	list-style: none;
 	padding: 0;
-	margin: 0.5rem 0 0;
+	margin: 0;
+	counter-reset: track;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-md);
+	overflow: hidden;
+}
+
+/* Track items — override sequence dimension's absolute positioning */
+.rf-playlist__tracks > li {
+	display: flex;
+	align-items: baseline;
+	gap: 0.75rem;
+	padding: 0.75rem 1.25rem;
+	padding-left: 1.25rem;
+	position: static;
+	transition: background 0.15s ease;
+}
+/* Hide meta elements from flex layout */
+.rf-playlist__tracks > li > meta {
+	display: none;
+}
+.rf-playlist__tracks > li + li {
+	border-top: 1px solid var(--rf-color-border);
+}
+.rf-playlist__tracks > li:hover {
+	background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
+}
+.rf-playlist__tracks > li::before {
+	position: static;
+	width: auto;
+	height: auto;
+	min-width: 1.5rem;
+	font-size: 0.8rem;
+	font-variant-numeric: tabular-nums;
+	color: var(--rf-color-muted);
+	background: none;
+	border-radius: 0;
+	text-align: right;
+	flex-shrink: 0;
+}
+
+/* Track name */
+.rf-playlist__tracks [data-name="track-name"] {
+	flex: 1;
+	font-size: 0.9375rem;
+	font-weight: 500;
+	color: var(--rf-color-text);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* Track artist */
+.rf-playlist__tracks [data-name="track-artist"] {
+	font-size: 0.8125rem;
+	color: var(--rf-color-muted);
+	flex-shrink: 0;
+}
+.rf-playlist__tracks [data-name="track-artist"]::before {
+	content: '\00b7';
+	margin-right: 0.5rem;
+	opacity: 0.5;
+}
+
+/* Track duration — pushed right */
+.rf-playlist__tracks [data-name="track-duration"] {
+	font-size: 0.8125rem;
+	color: var(--rf-color-muted);
+	font-variant-numeric: tabular-nums;
+	flex-shrink: 0;
+	margin-left: auto;
+	min-width: 3rem;
+	text-align: right;
+}
+
+/* Track meta (date etc.) */
+.rf-playlist__tracks [data-name="track-meta"] {
+	font-size: 0.75rem;
+	color: var(--rf-color-muted);
+	flex-shrink: 0;
+}
+.rf-playlist__tracks [data-name="track-meta"]::before {
+	content: '\00b7';
+	margin-right: 0.5rem;
+	opacity: 0.5;
 }
 
 /* Player area */
@@ -55,58 +115,16 @@
 	margin-top: 0.5rem;
 }
 
-/* Media zone — cover art */
-.rf-playlist__media {
-	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
-}
+/* Media zone — domain-specific cover art overrides (base styles in split.css) */
 .rf-playlist__media img {
-	display: block;
-	width: 100%;
-	height: auto;
-	border-radius: var(--rf-radius-lg);
 	aspect-ratio: 1;
 	object-fit: cover;
 }
 
-/* Split layout — shared */
-.rf-playlist[data-layout="split"],
-.rf-playlist[data-layout="split-reverse"] {
-	display: grid;
-	grid-template-columns: var(--split-ratio, 1fr 1fr);
-	gap: var(--split-gap, 2rem);
-	align-items: var(--split-valign, start);
-}
-/* Split: content left (col 1), media right (col 2) — DOM order is media first */
-.rf-playlist[data-layout="split"] > .rf-playlist__content {
-	grid-column: 1;
-	grid-row: 2;
-}
-.rf-playlist[data-layout="split"] > .rf-playlist__media {
-	grid-column: 2;
-	grid-row: 2;
-}
-/* Split-reverse: media left (col 1), content right (col 2) — matches DOM order */
-/* Type badge spans full width in split layouts */
-.rf-playlist[data-layout="split"] > .rf-playlist__type-badge,
-.rf-playlist[data-layout="split-reverse"] > .rf-playlist__type-badge {
-	grid-column: 1 / -1;
-}
-/* Collapse to single column on small screens */
-@media (max-width: 640px) {
-	.rf-playlist[data-layout="split"],
-	.rf-playlist[data-layout="split-reverse"] {
-		grid-template-columns: 1fr;
-	}
-	.rf-playlist[data-layout="split"] > .rf-playlist__content,
-	.rf-playlist[data-layout="split"] > .rf-playlist__media {
-		grid-column: auto;
-		grid-row: auto;
+/* Hide secondary columns on narrow screens */
+@media (max-width: 480px) {
+	.rf-playlist__tracks [data-name="track-artist"],
+	.rf-playlist__tracks [data-name="track-meta"] {
+		display: none;
 	}
 }
-
-/* Split layout media gets subtle depth */
-.rf-playlist[data-layout="split"] .rf-playlist__media img,
-.rf-playlist[data-layout="split-reverse"] .rf-playlist__media img {
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}

package/styles/runes/plot.css

@@ -1,6 +1,5 @@
 /* Plot */
 .rf-plot {
-	margin: 1.5rem 0;
 	display: flex;
 	flex-direction: column;
 }
@@ -10,30 +9,8 @@
 	font-weight: 700;
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-heading);
-	order: -1;
 }
 
-/* Meta bar — surface strip */
-.rf-plot__badge {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.75rem 1.25rem;
-	align-items: center;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 0.625rem 1rem;
-	margin-bottom: 1rem;
-}
-.rf-plot__type-badge,
-.rf-plot__structure-badge {
-	font-size: 0.8125rem;
-	font-weight: 500;
-	text-transform: capitalize;
-	color: var(--rf-color-muted);
-}
-.rf-plot__type-badge::before { content: 'Type: '; font-weight: 400; opacity: 0.65; }
-.rf-plot__structure-badge::before { content: 'Structure: '; font-weight: 400; opacity: 0.65; }
-
 /* Description */
 .rf-plot > p {
 	color: var(--rf-color-muted);

package/styles/runes/preview.css

@@ -3,19 +3,6 @@
 	margin: 2rem 0;
 }
 
-/* Width variants */
-@container (min-width: 1008px) {
-	.rf-preview[data-width="wide"] {
-		width: calc(100% + 8rem);
-		margin-left: -4rem;
-		max-width: 76rem;
-	}
-}
-.rf-preview[data-width="full"] {
-	width: 100vw;
-	margin-left: calc(-50vw + 50%);
-}
-
 /* Toolbar — transparent, controls float above the canvas */
 .rf-preview__toolbar {
 	display: flex;
@@ -79,7 +66,7 @@
 	box-shadow: var(--rf-shadow-xs);
 }
 
-/* Canvas — bordered frame for the preview content */
+/* Canvas — framed area for the preview content */
 .rf-preview__canvas {
 	padding: 2rem 2.5rem;
 	background: var(--rf-color-bg);
@@ -170,7 +157,7 @@
 }
 
 /* Small containers: edge-to-edge bleed */
-@container (max-width: 1008px) {
+@container (max-width: 1280px) {
 	.rf-preview__toolbar {
 		padding: 0.25rem var(--rf-content-padding, 1.5rem) 0.5rem;
 	}
@@ -182,7 +169,12 @@
 	}
 	.rf-preview__source {
 		border-radius: 0;
-		border-left: none;
-		border-right: none;
+	}
+	/* Break out of feature's padding-inline to reach viewport edges */
+	.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/pricing.css

@@ -3,7 +3,10 @@
 	padding: 2rem 0;
 }
 .rf-pricing > header,
-.rf-pricing__header {
+.rf-pricing__preamble {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.25rem;
 	text-align: center;
 	margin-bottom: 2rem;
 }