@refrakt-md/lumina 0.9.4 → 0.9.6

package/styles/runes/budget.css

@@ -47,7 +47,7 @@
 	align-items: center;
 	margin-bottom: 0.5rem;
 }
-.rf-budget-category--estimate .rf-budget-category__header::after {
+.rf-budget-category--estimate .rf-budget-category__subtotal::before {
 	content: 'est.';
 	font-size: 0.6875rem;
 	font-weight: 600;
@@ -57,7 +57,8 @@
 	background: var(--rf-color-warning-bg);
 	padding: 0.0625rem 0.375rem;
 	border-radius: var(--rf-radius-full);
-	margin-left: 0.5rem;
+	margin-right: 0.5rem;
+	vertical-align: middle;
 }
 .rf-budget-category__label {
 	font-size: 0.9375rem;

package/styles/runes/bug.css

@@ -1,4 +1,26 @@
 /* Bug */
+
+/* Primary badges: ID left, status right */
+.rf-bug__header-primary {
+	justify-content: space-between;
+	margin-bottom: 0.75rem;
+}
+
+/* Preamble: title + optional description between badge groups */
+.rf-bug__preamble {
+	margin-bottom: 0.75rem;
+}
+.rf-bug__title h1,
+.rf-bug__title h2,
+.rf-bug__title h3 {
+	margin-top: 0;
+}
+
+/* Secondary badges: pill row below preamble */
+.rf-bug__header-secondary {
+	margin-bottom: 1.5rem;
+}
+
 .rf-bug__assignee-badge {
 	margin-left: auto;
 }
@@ -7,19 +29,11 @@
 	font-size: 0.925rem;
 	line-height: 1.65;
 }
-.rf-bug__body > header {
-	margin-bottom: 0.75rem;
-}
-.rf-bug__body > header h1,
-.rf-bug__body > header h2,
-.rf-bug__body > header h3 {
-	margin-top: 0;
-}
-.rf-bug__body > div > section {
+.rf-bug__body > section {
 	margin-top: 1rem;
 	padding-top: 0.75rem;
 	border-top: 1px solid var(--rf-color-border);
 }
-.rf-bug__body > div > section:first-child {
+.rf-bug__body > section:first-child {
 	margin-top: 0.75rem;
 }

package/styles/runes/codegroup.css

@@ -30,6 +30,7 @@
 	font-family: var(--rf-font-mono);
 	font-size: 0.8rem;
 	font-weight: normal;
+	color: inherit;
 	opacity: 0.7;
 }
 .rf-codegroup ul {

package/styles/runes/decision.css

@@ -1,21 +1,35 @@
 /* Decision */
-.rf-decision__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+
+/* Primary badges: ID left, status right */
+.rf-decision__header-primary {
+	justify-content: space-between;
+	margin-bottom: 0.75rem;
 }
-.rf-decision__body > header {
+
+/* Preamble: title + optional description between badge groups */
+.rf-decision__preamble {
 	margin-bottom: 0.75rem;
 }
-.rf-decision__body > header h1,
-.rf-decision__body > header h2,
-.rf-decision__body > header h3 {
+.rf-decision__title h1,
+.rf-decision__title h2,
+.rf-decision__title h3 {
 	margin-top: 0;
 }
-.rf-decision__body > div > section {
+
+/* Secondary badges: pill row below preamble */
+.rf-decision__header-secondary {
+	margin-bottom: 1.5rem;
+}
+
+.rf-decision__body {
+	font-size: 0.925rem;
+	line-height: 1.65;
+}
+.rf-decision__body > section {
 	margin-top: 1rem;
 	padding-top: 0.75rem;
 	border-top: 1px solid var(--rf-color-border);
 }
-.rf-decision__body > div > section:first-child {
+.rf-decision__body > section:first-child {
 	margin-top: 0.75rem;
 }

package/styles/runes/diagram.css

@@ -1,9 +1,10 @@
 /* Diagram */
 .rf-diagram {
-	border: 1px solid var(--rf-color-border);
+	display: block;
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
 	text-align: center;
+	overflow: hidden;
 }
 .rf-diagram__title {
 	font-weight: 600;
@@ -24,3 +25,16 @@
 	font-size: 0.875rem;
 	margin: 0;
 }
+
+/* Mermaid SVG overrides */
+.rf-diagram__container .label {
+	font-family: var(--rf-font-sans) !important;
+	color: var(--rf-color-text) !important;
+}
+.rf-diagram__container .edgeLabel {
+	background-color: var(--rf-color-surface) !important;
+}
+.rf-diagram__container .marker {
+	fill: var(--rf-color-muted) !important;
+	stroke: var(--rf-color-muted) !important;
+}

package/styles/runes/embed.css

@@ -1,5 +1,6 @@
 /* Embed */
 .rf-embed {
+	margin: 0;
 	padding: 0;
 }
 .rf-embed__wrapper {

package/styles/runes/event.css

@@ -14,7 +14,7 @@
 	font-weight: 500;
 	font-size: 0.875rem;
 	text-decoration: none;
-	margin-left: auto;
+	margin-top: 1.5rem;
 }
 .rf-event__register:hover {
 	background: var(--rf-color-primary-hover);

package/styles/runes/juxtapose.css

@@ -122,35 +122,36 @@
 /* ─── Toggle bar (injected by behavior) ─── */
 .rf-juxtapose__toggle-bar {
 	display: flex;
-	gap: 0.25rem;
-	padding: 0.25rem;
+	gap: 0.125rem;
+	padding: 0.125rem;
 	margin-bottom: 0.75rem;
-	background: var(--rf-color-surface);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
+	background: var(--rf-color-surface-active);
+	border-radius: var(--rf-radius-full);
 	width: fit-content;
 }
 
-.rf-juxtapose__toggle-btn {
-	padding: 0.375rem 1rem;
+.rf-juxtapose__toggle-btn,
+.rf-juxtapose__toggle-btn[data-state] {
+	padding: 0.25rem 0.75rem;
 	border: none;
-	border-radius: var(--rf-radius-sm);
+	border-radius: var(--rf-radius-full);
 	background: transparent;
 	color: var(--rf-color-muted);
-	font-size: 0.875rem;
+	font-size: 0.75rem;
 	font-weight: 500;
 	cursor: pointer;
-	transition: background 0.15s, color 0.15s;
+	transition: background 150ms ease, color 150ms ease;
 }
 
 .rf-juxtapose__toggle-btn:hover {
 	color: var(--rf-color-text);
 }
 
-.rf-juxtapose__toggle-btn--active {
-	background: var(--rf-color-bg, #fff);
+.rf-juxtapose__toggle-btn--active,
+.rf-juxtapose__toggle-btn[data-state="active"] {
+	background: var(--rf-color-bg);
 	color: var(--rf-color-text);
-	box-shadow: var(--rf-shadow-sm);
+	box-shadow: var(--rf-shadow-xs);
 }
 
 /* ─── Fade variant cursor hint ─── */

package/styles/runes/mediatext.css

@@ -36,9 +36,17 @@
 
 /* Wrap mode — float-based text wrapping */
 .rf-mediatext[data-wrap="true"] .rf-mediatext__media {
-	max-width: 50%;
 	margin-bottom: 1rem;
 }
+.rf-mediatext[data-ratio="1:1"][data-wrap="true"] .rf-mediatext__media {
+	max-width: 50%;
+}
+.rf-mediatext[data-ratio="1:2"][data-wrap="true"] .rf-mediatext__media {
+	max-width: 33.333%;
+}
+.rf-mediatext[data-ratio="2:1"][data-wrap="true"] .rf-mediatext__media {
+	max-width: 66.666%;
+}
 .rf-mediatext--left[data-wrap="true"] .rf-mediatext__media {
 	float: left;
 	margin-right: 2rem;

package/styles/runes/milestone.css

@@ -1,4 +1,26 @@
 /* Milestone */
+
+/* Primary badges: name left, status right */
+.rf-milestone__header-primary {
+	justify-content: space-between;
+	margin-bottom: 0.75rem;
+}
+
+/* Preamble: title + optional description between badge groups */
+.rf-milestone__preamble {
+	margin-bottom: 0.75rem;
+}
+.rf-milestone__title h1,
+.rf-milestone__title h2,
+.rf-milestone__title h3 {
+	margin-top: 0;
+}
+
+/* Secondary badges: pill row below preamble */
+.rf-milestone__header-secondary {
+	margin-bottom: 1.5rem;
+}
+
 .rf-milestone__target-badge {
 	margin-left: auto;
 }
@@ -6,14 +28,6 @@
 	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;
 }

package/styles/runes/plan-entity-tabs.css

@@ -0,0 +1,88 @@
+/* Plan Entity Tabs — page-level tab navigation for spec/work/bug/decision pages */
+
+.rf-plan-entity-tabs {
+	margin-block-start: var(--rf-spacing-lg, 1.5rem);
+}
+
+/* Tab bar — underline style matching the core tabs rune */
+.rf-plan-entity-tabs__tabs {
+	display: flex;
+	border-bottom: 1px solid var(--rf-color-border, #dee2e6);
+	gap: 0;
+}
+
+/* Tab buttons */
+.rf-plan-entity-tabs__tab {
+	flex: 0 0 auto;
+	padding: 0.625rem 1.25rem;
+	font-size: 0.875rem;
+	font-weight: 500;
+	font-family: inherit;
+	color: var(--rf-color-muted, #868e96);
+	background: none;
+	border: none;
+	border-bottom: 2px solid transparent;
+	cursor: pointer;
+	transition: color 200ms ease, border-color 200ms ease;
+	white-space: nowrap;
+}
+
+.rf-plan-entity-tabs__tab:hover {
+	color: var(--rf-color-text, #212529);
+}
+
+.rf-plan-entity-tabs__tab--active,
+.rf-plan-entity-tabs__tab[data-state="active"] {
+	color: var(--rf-color-primary, #228be6);
+	border-bottom-color: var(--rf-color-primary, #228be6);
+	font-weight: 600;
+}
+
+/* Panels container */
+.rf-plan-entity-tabs__panels {
+	padding: 0;
+	margin: 0;
+}
+
+/* Individual panel */
+.rf-plan-entity-tabs__panel {
+	padding-block-start: var(--rf-spacing-lg, 1.5rem);
+}
+
+.rf-plan-entity-tabs__panel > *:first-child {
+	margin-top: 0;
+}
+
+.rf-plan-entity-tabs__panel > *:last-child {
+	margin-bottom: 0;
+}
+
+/* When inside entity tabs, relationships and history sections don't need
+   their own heading — the tab label provides the context */
+.rf-plan-entity-tabs__panel .rf-plan-relationships__heading,
+.rf-plan-entity-tabs__panel .rf-plan-history__heading {
+	display: none;
+}
+
+/* Remove top margin, padding, and border from relationships/history sections when inside a tab panel */
+.rf-plan-entity-tabs__panel .rf-plan-relationships,
+.rf-plan-entity-tabs__panel .rf-plan-history {
+	margin-block-start: 0;
+	padding-block-start: 0;
+	border-block-start: none;
+}
+
+/* ---- TOC dimming when non-Overview tab is active ---- */
+
+/* Desktop TOC: dim when a non-overview tab is active */
+:has([data-active-tab]:not([data-active-tab="overview"])) .rf-plan-toc {
+	opacity: 0.3;
+	pointer-events: none;
+	transition: opacity 200ms ease;
+}
+
+:has([data-active-tab="overview"]) .rf-plan-toc {
+	opacity: 1;
+	pointer-events: auto;
+	transition: opacity 200ms ease;
+}

package/styles/runes/plan-history.css

@@ -0,0 +1,197 @@
+/* Plan History — vertical timeline (mirrors .rf-timeline--vertical) */
+
+.rf-plan-history {
+	margin: 2rem 0;
+}
+.rf-plan-history__heading {
+	font-size: 1.05rem;
+	font-weight: 700;
+	color: var(--rf-color-text);
+	margin: 0 0 1rem;
+}
+
+/* Event list — vertical line */
+.rf-plan-history__events {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+/* Each event entry — left-padded with border line */
+.rf-plan-history__event {
+	position: relative;
+	padding-left: 2rem;
+	padding-bottom: 2rem;
+	border-left: 2px solid var(--rf-color-border);
+	margin-left: 0.375rem;
+}
+.rf-plan-history__event:last-child {
+	border-left-color: transparent;
+	padding-bottom: 0;
+}
+
+/* Circle markers on the timeline line */
+.rf-plan-history__event::before {
+	content: '';
+	position: absolute;
+	left: -0.4375rem;
+	top: 0.25rem;
+	width: 0.75rem;
+	height: 0.75rem;
+	border-radius: 50%;
+	background: var(--rf-color-primary);
+	border: 2px solid var(--rf-color-bg);
+	box-shadow: 0 0 0 2px var(--rf-color-primary);
+}
+
+/* Open circle for creation events */
+.rf-plan-history__event[data-kind="created"]::before {
+	background: var(--rf-color-bg);
+}
+
+/* Date + hash header */
+.rf-plan-history__date {
+	display: inline;
+	font-size: 0.8rem;
+	font-weight: 600;
+	color: var(--rf-color-primary);
+	letter-spacing: 0.02em;
+	margin-right: 0.5rem;
+}
+.rf-plan-history__hash {
+	font-family: var(--rf-font-mono);
+	font-size: 0.75rem;
+	color: var(--rf-color-muted);
+	text-decoration: none;
+}
+a.rf-plan-history__hash:hover {
+	color: var(--rf-color-primary);
+	text-decoration: underline;
+}
+
+/* Changes block */
+.rf-plan-history__changes {
+	margin-top: 0.25rem;
+}
+.rf-plan-history__change {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	font-size: 0.925rem;
+	line-height: 1.65;
+	color: var(--rf-color-muted);
+}
+.rf-plan-history__field {
+	font-weight: 500;
+	color: var(--rf-color-text);
+}
+.rf-plan-history__field::after {
+	content: ':';
+}
+.rf-plan-history__arrow {
+	color: var(--rf-color-muted);
+	margin-inline: 0.125rem;
+}
+
+/* Value badges (add/remove) */
+.rf-plan-history__value {
+	font-size: 0.875rem;
+	padding: 0.0625rem 0.375rem;
+	border-radius: var(--rf-radius-sm);
+}
+.rf-plan-history__value[data-type="add"] {
+	background: var(--rf-color-success-bg);
+	color: var(--rf-color-success);
+}
+.rf-plan-history__value[data-type="remove"] {
+	background: var(--rf-color-danger-bg);
+	color: var(--rf-color-danger);
+	text-decoration: line-through;
+}
+
+/* Event kind labels */
+.rf-plan-history__created {
+	font-size: 0.925rem;
+	color: var(--rf-color-muted);
+}
+.rf-plan-history__resolution,
+.rf-plan-history__content-edit {
+	font-size: 0.925rem;
+	color: var(--rf-color-muted);
+	font-style: italic;
+}
+
+/* Criteria list */
+.rf-plan-history__criteria {
+	list-style: none;
+	padding: 0;
+	margin: 0.25rem 0 0;
+}
+.rf-plan-history__criteria li {
+	font-size: 0.8125rem;
+	line-height: 1.65;
+	color: var(--rf-color-text);
+}
+.rf-plan-history__criteria li[data-action="checked"] {
+	color: var(--rf-color-success);
+}
+.rf-plan-history__criteria li[data-action="unchecked"] {
+	color: var(--rf-color-danger);
+}
+.rf-plan-history__criteria li[data-action="removed"] {
+	color: var(--rf-color-danger);
+	text-decoration: line-through;
+}
+
+/* Collapse / empty */
+.rf-plan-history__more {
+	color: var(--rf-color-muted);
+	font-style: italic;
+	cursor: pointer;
+}
+.rf-plan-history__empty {
+	color: var(--rf-color-muted);
+	font-style: italic;
+}
+
+/* Global feed (commit-grouped) */
+.rf-plan-history--global .rf-plan-history__commit-message {
+	display: block;
+	font-size: 1.05rem;
+	font-weight: 700;
+	color: var(--rf-color-text);
+	margin-top: 0.25rem;
+	margin-bottom: 0.5rem;
+}
+.rf-plan-history--global .rf-plan-history__entity-summary {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	font-size: 0.8125rem;
+	line-height: 1.65;
+}
+.rf-plan-history--global .rf-plan-history__entity-id {
+	font-weight: 600;
+	font-family: var(--rf-font-mono);
+	font-size: 0.75rem;
+	color: var(--rf-color-primary);
+	white-space: nowrap;
+}
+.rf-plan-history--global .rf-plan-history__entity-changes {
+	color: var(--rf-color-muted);
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+	.rf-plan-history__event {
+		padding-left: 1.25rem;
+	}
+	.rf-plan-history__event::before {
+		width: 0.625rem;
+		height: 0.625rem;
+		left: -0.375rem;
+	}
+	.rf-plan-history__change {
+		flex-wrap: wrap;
+	}
+}

package/styles/runes/plan-ref.css

@@ -0,0 +1,26 @@
+/* Plan cross-reference links */
+
+.rf-plan-ref {
+	font-family: var(--rf-font-mono, ui-monospace, monospace);
+	font-size: 0.8125rem;
+	color: var(--rf-color-info, #339af0);
+	text-decoration: none;
+	border-bottom: 1px dashed var(--rf-color-info, #339af0);
+	padding-inline: 0.25rem;
+}
+
+.rf-plan-ref:hover {
+	background: var(--rf-color-info-bg, #e7f5ff);
+	border-radius: var(--rf-radius-sm, 0.25rem);
+	border-bottom-color: transparent;
+}
+
+.rf-plan-ref::before {
+	margin-inline-end: 0.25rem;
+}
+
+.rf-plan-ref[data-type="spec"]::before { content: '\1F4CB'; }
+.rf-plan-ref[data-type="work"]::before { content: '\1F527'; }
+.rf-plan-ref[data-type="bug"]::before { content: '\1F41B'; }
+.rf-plan-ref[data-type="decision"]::before { content: '\2696\FE0F'; }
+.rf-plan-ref[data-type="milestone"]::before { content: '\1F3AF'; }

package/styles/runes/plan-relationships.css

@@ -0,0 +1,40 @@
+/* Plan relationships section */
+
+.rf-plan-relationships {
+	margin-top: 2rem;
+	padding-top: 1.5rem;
+	border-top: 1px solid var(--rf-color-border, #dee2e6);
+}
+
+.rf-plan-relationships__heading {
+	font-size: 1.125rem;
+	font-weight: 600;
+	color: var(--rf-color-text, #212529);
+	margin: 0 0 1rem;
+}
+
+.rf-plan-relationships__group {
+	margin-bottom: 1rem;
+}
+
+.rf-plan-relationships__group-title {
+	font-size: 0.8125rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	color: var(--rf-color-muted, #6c757d);
+	margin: 0 0 0.375rem;
+}
+
+.rf-plan-relationships__group[data-kind="blocked-by"] .rf-plan-relationships__group-title {
+	color: var(--rf-color-danger, #ff6b6b);
+}
+
+.rf-plan-relationships__group[data-kind="blocks"] .rf-plan-relationships__group-title {
+	color: var(--rf-color-warning, #f59f00);
+}
+
+.rf-plan-relationships__cards {
+	display: flex;
+	flex-direction: column;
+}

package/styles/runes/spec.css

@@ -1,16 +1,30 @@
 /* Spec */
-.rf-spec__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+
+/* Primary badges: ID left, status right */
+.rf-spec__header-primary {
+	justify-content: space-between;
+	margin-bottom: 0.75rem;
 }
-.rf-spec__body > header {
+
+/* Preamble: title + optional summary between badge groups */
+.rf-spec__preamble {
 	margin-bottom: 0.75rem;
 }
-.rf-spec__body > header h1,
-.rf-spec__body > header h2,
-.rf-spec__body > header h3 {
+.rf-spec__title h1,
+.rf-spec__title h2,
+.rf-spec__title h3 {
 	margin-top: 0;
 }
+
+/* Secondary badges: pill row below preamble */
+.rf-spec__header-secondary {
+	margin-bottom: 1.5rem;
+}
+
+.rf-spec__body {
+	font-size: 0.925rem;
+	line-height: 1.65;
+}
 .rf-spec__body blockquote {
 	border-left: 3px solid var(--rf-color-border);
 	padding: 0.5rem 1rem;