mirror of
https://github.com/MindWorkAI/AI-Studio.git
synced 2026-08-06 03:02:17 +00:00
367 lines
31 KiB
C#
367 lines
31 KiB
C#
|
using System.Text;
|
||
|
|
using System.Text.Encodings.Web;
|
||
|
|
using System.Text.Json;
|
||
|
|
|
||
|
|
namespace AIStudio.Assistants.VisualBriefing;
|
||
|
|
|
||
|
|
/// <summary>
|
||
|
|
/// Compiles validated content into the fixed MindWork editorial presentation system.
|
||
|
|
/// </summary>
|
||
|
|
internal sealed class VisualBriefingLayoutCompiler
|
||
|
|
{
|
||
|
|
/// <summary>
|
||
|
|
/// Compiles semantic plan, content, layout, and profile artifacts into standalone parts.
|
||
|
|
/// </summary>
|
||
|
|
/// <param name="plan">The validated semantic plan.</param>
|
||
|
|
/// <param name="content">The validated content.</param>
|
||
|
|
/// <param name="layout">The validated layout tree.</param>
|
||
|
|
/// <param name="profile">The bounded MindWork design profile.</param>
|
||
|
|
/// <returns>The deterministic compiled parts and hashes.</returns>
|
||
|
|
internal static VisualBriefingCompilationResult Compile(VisualBriefingPlanArtifact plan, VisualBriefingContentArtifact content, VisualBriefingLayoutNode layout, VisualBriefingDesignProfile profile)
|
||
|
|
{
|
||
|
|
var slots = content.Slots.ToDictionary(item => item.SlotId, item => item.Value.Clone(), StringComparer.Ordinal);
|
||
|
|
var plannedSlotIds = plan.Sections
|
||
|
|
.SelectMany(section => new[] { section.TitleSlotId, section.SummarySlotId }
|
||
|
|
.Concat(section.Components.SelectMany(component => component.Slots.Select(slot => slot.SlotId))))
|
||
|
|
.ToArray();
|
||
|
|
|
||
|
|
var missingSlot = plannedSlotIds.FirstOrDefault(slotId => !slots.ContainsKey(slotId));
|
||
|
|
if (missingSlot is not null)
|
||
|
|
throw new InvalidDataException("A planned content slot is missing during compilation.");
|
||
|
|
|
||
|
|
var components = plan.Sections.SelectMany(section => section.Components)
|
||
|
|
.ToDictionary(item => item.ComponentId, StringComparer.Ordinal);
|
||
|
|
|
||
|
|
var sections = plan.Sections.ToDictionary(item => item.SectionId, StringComparer.Ordinal);
|
||
|
|
var charts = content.Charts.ToDictionary(item => item.ComponentId, StringComparer.Ordinal);
|
||
|
|
var missingChart = components.Values
|
||
|
|
.Where(component => component.Kind is VisualBriefingComponentKind.CHART)
|
||
|
|
.Select(component => component.ComponentId)
|
||
|
|
.FirstOrDefault(componentId => !charts.ContainsKey(componentId));
|
||
|
|
|
||
|
|
if (missingChart is not null)
|
||
|
|
throw new InvalidDataException("A planned chart is missing during compilation.");
|
||
|
|
|
||
|
|
var chartOptions = content.Charts.ToDictionary(
|
||
|
|
item => item.ComponentId,
|
||
|
|
item => VisualBriefingChartCompiler.Compile(item),
|
||
|
|
StringComparer.Ordinal);
|
||
|
|
|
||
|
|
var interactions = VisualBriefingInteractionCompiler.Compile(content.Controls, content.Formulas);
|
||
|
|
|
||
|
|
var data = JsonSerializer.SerializeToElement(new
|
||
|
|
{
|
||
|
|
slots,
|
||
|
|
charts = chartOptions,
|
||
|
|
interactions,
|
||
|
|
accessibility = content.AccessibilityTexts,
|
||
|
|
sourceReferences = content.SourceReferences,
|
||
|
|
labels = new
|
||
|
|
{
|
||
|
|
reset = content.ResetLabel,
|
||
|
|
brand = "MindWork AI Studio",
|
||
|
|
},
|
||
|
|
}, VisualBriefingJson.Canonical);
|
||
|
|
|
||
|
|
var html = CompileNode(layout, sections, components, content, true);
|
||
|
|
var css = CompileCss(profile, layout);
|
||
|
|
return new(
|
||
|
|
data,
|
||
|
|
html,
|
||
|
|
css,
|
||
|
|
VisualBriefingHashing.Compute(html),
|
||
|
|
VisualBriefingHashing.Compute(css));
|
||
|
|
}
|
||
|
|
|
||
|
|
private static string CompileNode(VisualBriefingLayoutNode node, IReadOnlyDictionary<string, VisualBriefingPlanSection> sections, IReadOnlyDictionary<string, VisualBriefingPlanComponent> components, VisualBriefingContentArtifact content, bool isRoot = false)
|
||
|
|
{
|
||
|
|
var id = HtmlEncoder.Default.Encode(node.NodeId);
|
||
|
|
if (node.Kind is VisualBriefingLayoutNodeKind.COMPONENT)
|
||
|
|
{
|
||
|
|
if (node.ComponentId is null || !components.TryGetValue(node.ComponentId, out var component))
|
||
|
|
throw new InvalidDataException("The layout references an unknown component.");
|
||
|
|
|
||
|
|
var componentId = HtmlEncoder.Default.Encode(component.ComponentId);
|
||
|
|
var body = CompileComponent(component, content);
|
||
|
|
var semanticClasses = $"mwai-component mwai-{component.Kind.ToString().ToLowerInvariant()}";
|
||
|
|
if (component.Kind is VisualBriefingComponentKind.TIMELINE)
|
||
|
|
{
|
||
|
|
semanticClasses += component.TimelineOrientation switch
|
||
|
|
{
|
||
|
|
VisualBriefingTimelineOrientation.HORIZONTAL => " mwai-timeline-horizontal",
|
||
|
|
VisualBriefingTimelineOrientation.VERTICAL => " mwai-timeline-vertical",
|
||
|
|
_ => throw new InvalidDataException("A timeline component has an invalid orientation."),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var componentClasses = CompileLayoutClasses(node, semanticClasses);
|
||
|
|
|
||
|
|
return $"<article id=\"{id}\" class=\"{componentClasses}\" data-mwai-region=\"{componentId}\">{body}</article>";
|
||
|
|
}
|
||
|
|
|
||
|
|
var children = string.Concat(node.Children.OrderBy(child => child.Order)
|
||
|
|
.Select(child => CompileNode(child, sections, components, content)));
|
||
|
|
|
||
|
|
if (node.Kind is VisualBriefingLayoutNodeKind.SECTION)
|
||
|
|
{
|
||
|
|
if (node.SectionId is null || !sections.TryGetValue(node.SectionId, out var section))
|
||
|
|
throw new InvalidDataException("The layout references an unknown section.");
|
||
|
|
|
||
|
|
var title = HtmlEncoder.Default.Encode(section.TitleSlotId);
|
||
|
|
var summary = HtmlEncoder.Default.Encode(section.SummarySlotId);
|
||
|
|
var headingTag = section.Role is VisualBriefingSectionRole.HERO ? "h1" : "h2";
|
||
|
|
var role = section.Role.ToString().ToLowerInvariant().Replace('_', '-');
|
||
|
|
var classes = CompileLayoutClasses(node, $"mwai-layout mwai-section mwai-section-{role}");
|
||
|
|
|
||
|
|
return $"<section id=\"{id}\" class=\"{classes}\"><div class=\"mwai-section-inner\"><header class=\"mwai-section-heading\"><{headingTag} data-mwai-text=\"slots.{title}\"></{headingTag}><p data-mwai-text=\"slots.{summary}\"></p></header><div class=\"mwai-section-content\">{children}</div></div></section>";
|
||
|
|
}
|
||
|
|
|
||
|
|
var kind = node.Kind.ToString().ToLowerInvariant();
|
||
|
|
var layoutClasses = CompileLayoutClasses(node, $"mwai-layout mwai-{kind}");
|
||
|
|
|
||
|
|
if (isRoot)
|
||
|
|
return $"<main id=\"{id}\" class=\"{layoutClasses} mwai-document\">{children}</main>";
|
||
|
|
|
||
|
|
return $"<div id=\"{id}\" class=\"{layoutClasses}\">{children}</div>";
|
||
|
|
}
|
||
|
|
|
||
|
|
private static string CompileLayoutClasses(VisualBriefingLayoutNode node, string prefix) =>
|
||
|
|
$"{prefix} mwai-span-{node.Span} mwai-align-{node.Alignment.ToString().ToLowerInvariant()}" +
|
||
|
|
(node.Emphasized ? " mwai-emphasized" : string.Empty);
|
||
|
|
|
||
|
|
private static string CompileComponent(VisualBriefingPlanComponent component, VisualBriefingContentArtifact content)
|
||
|
|
{
|
||
|
|
var componentId = HtmlEncoder.Default.Encode(component.ComponentId);
|
||
|
|
var controls = VisualBriefingInteractionCompiler.CompileMarkup(component.ComponentId, content.Controls);
|
||
|
|
var body = component.Kind switch
|
||
|
|
{
|
||
|
|
VisualBriefingComponentKind.TEXT => $"<header class=\"mwai-component-heading\"><h3 data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.TITLE)}\"></h3></header><p class=\"mwai-copy\" data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.BODY)}\"></p>",
|
||
|
|
VisualBriefingComponentKind.METRIC => $"<dl class=\"mwai-metric-body\"><dt data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.LABEL)}\"></dt><dd data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.VALUE)}\"></dd></dl><p class=\"mwai-context\" data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.CONTEXT)}\"></p>",
|
||
|
|
VisualBriefingComponentKind.CALLOUT => $"<aside><p class=\"mwai-eyebrow\" data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.EYEBROW)}\"></p><h3 data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.TITLE)}\"></h3><p data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.BODY)}\"></p></aside>",
|
||
|
|
VisualBriefingComponentKind.CHART => $"<figure><header class=\"mwai-component-heading\"><h3 data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.TITLE)}\"></h3></header><div role=\"img\" data-mwai-attr-aria-label=\"accessibility.{componentId}\" aria-describedby=\"{componentId}-chart-alt\" data-mwai-chart=\"charts.{componentId}\"></div><figcaption id=\"{componentId}-chart-alt\" data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.CAPTION)}\"></figcaption></figure>",
|
||
|
|
VisualBriefingComponentKind.ASSET => $"<figure><header class=\"mwai-component-heading\"><h3 data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.TITLE)}\"></h3></header><img data-mwai-asset=\"{HtmlEncoder.Default.Encode(component.AssetId ?? throw new InvalidDataException("An asset component is missing its asset ID."))}\" data-mwai-attr-alt=\"accessibility.{componentId}\"><figcaption data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.CAPTION)}\"></figcaption></figure>",
|
||
|
|
VisualBriefingComponentKind.TABLE or VisualBriefingComponentKind.FILTERABLE_TABLE => CompileTable(component, controls, content),
|
||
|
|
VisualBriefingComponentKind.TABS => CompileTabs(component, content.Controls),
|
||
|
|
VisualBriefingComponentKind.ACCORDION => $"<details><summary><span data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.TITLE)}\"></span></summary><div class=\"mwai-accordion-body\"><p data-mwai-text=\"slots.{Slot(component, VisualBriefingSlotRole.BODY)}\"></p></div></details>",
|
||
|
|
VisualBriefingComponentKind.SIMULATION => CompileSimulation(component, controls, content),
|
||
|
|
VisualBriefingComponentKind.TIMELINE => CompileTimeline(component),
|
||
|
|
|
||
|
|
_ => string.Empty,
|
||
|
|
};
|
||
|
|
|
||
|
|
var references = content.SourceReferences.ContainsKey(component.ComponentId)
|
||
|
|
? $"<small class=\"mwai-sources\"><template data-mwai-each=\"sourceReferences.{componentId}\"><span data-mwai-text=\".\"></span> </template></small>"
|
||
|
|
: string.Empty;
|
||
|
|
|
||
|
|
return $"{body}{references}";
|
||
|
|
}
|
||
|
|
|
||
|
|
private static string CompileTable(VisualBriefingPlanComponent component, string controls, VisualBriefingContentArtifact content)
|
||
|
|
{
|
||
|
|
var title = Slot(component, VisualBriefingSlotRole.TITLE);
|
||
|
|
var summary = Slot(component, VisualBriefingSlotRole.SUMMARY);
|
||
|
|
var dataSlot = Slot(component, VisualBriefingSlotRole.TABLE_DATA);
|
||
|
|
|
||
|
|
var filterControl = content.Controls.FirstOrDefault(control =>
|
||
|
|
control.ComponentId == component.ComponentId &&
|
||
|
|
control.Kind is VisualBriefingControlKind.FILTER);
|
||
|
|
|
||
|
|
var filterAttributes = filterControl is null
|
||
|
|
? string.Empty
|
||
|
|
: $" data-mwai-filter=\"$root.interactions.state.{HtmlEncoder.Default.Encode(filterControl.ControlId)}\" data-mwai-filter-value=\".cells.0\"";
|
||
|
|
|
||
|
|
var toolbar = string.IsNullOrEmpty(controls) ? string.Empty : $"<div class=\"mwai-toolbar\">{controls}</div>";
|
||
|
|
return $"<header class=\"mwai-component-heading\"><h3 data-mwai-text=\"slots.{title}\"></h3><p data-mwai-text=\"slots.{summary}\"></p></header>{toolbar}<div class=\"mwai-table-wrap\"><table>" +
|
||
|
|
$"<caption><strong data-mwai-text=\"slots.{title}\"></strong><span data-mwai-text=\"slots.{summary}\"></span></caption>" +
|
||
|
|
$"<thead><tr><template data-mwai-each=\"slots.{dataSlot}.columns\"><th scope=\"col\" data-mwai-text=\".\"></th></template></tr></thead>" +
|
||
|
|
$"<tbody><template data-mwai-each=\"slots.{dataSlot}.rows\"><tr{filterAttributes}><template data-mwai-each=\".cells\"><td data-mwai-text=\".\"></td></template></tr></template></tbody>" +
|
||
|
|
"</table></div>";
|
||
|
|
}
|
||
|
|
|
||
|
|
private static string CompileTabs(VisualBriefingPlanComponent component, IReadOnlyList<VisualBriefingControlSpec> controls)
|
||
|
|
{
|
||
|
|
var indexedControl = controls.Select((control, index) => (Control: control, Index: index))
|
||
|
|
.First(item =>
|
||
|
|
item.Control.ComponentId == component.ComponentId &&
|
||
|
|
item.Control.Kind is VisualBriefingControlKind.TAB);
|
||
|
|
|
||
|
|
var initial = indexedControl.Control.InitialValue.GetString();
|
||
|
|
var componentId = HtmlEncoder.Default.Encode(component.ComponentId);
|
||
|
|
var title = Slot(component, VisualBriefingSlotRole.TITLE);
|
||
|
|
var summary = Slot(component, VisualBriefingSlotRole.SUMMARY);
|
||
|
|
var panelsSlots = component.Slots.Where(slot => slot.Role is VisualBriefingSlotRole.PANEL).ToArray();
|
||
|
|
var buttons = new StringBuilder();
|
||
|
|
var panels = new StringBuilder();
|
||
|
|
|
||
|
|
for (var index = 0; index < indexedControl.Control.Options.Count; index++)
|
||
|
|
{
|
||
|
|
var option = indexedControl.Control.Options[index];
|
||
|
|
var panelId = $"{componentId}-tab-{index}";
|
||
|
|
var selected = string.Equals(option.Value, initial, StringComparison.Ordinal);
|
||
|
|
buttons.Append($"<button type=\"button\" role=\"tab\" aria-controls=\"{panelId}\" aria-selected=\"{selected.ToString().ToLowerInvariant()}\" data-mwai-tab-target=\"{panelId}\" data-mwai-text=\"interactions.controls.{indexedControl.Index}.options.{index}.label\"></button>");
|
||
|
|
panels.Append($"<section id=\"{panelId}\" role=\"tabpanel\" data-mwai-tab-panel=\"{panelId}\"{(selected ? string.Empty : " hidden")}><p data-mwai-text=\"slots.{HtmlEncoder.Default.Encode(panelsSlots[index].SlotId)}\"></p></section>");
|
||
|
|
}
|
||
|
|
|
||
|
|
return $"<header class=\"mwai-component-heading\"><h3 data-mwai-text=\"slots.{title}\"></h3><p data-mwai-text=\"slots.{summary}\"></p></header><div data-mwai-tabs=\"{componentId}\"><div role=\"tablist\">{buttons}</div>{panels}</div>";
|
||
|
|
}
|
||
|
|
|
||
|
|
private static string CompileSimulation(VisualBriefingPlanComponent component, string controls, VisualBriefingContentArtifact content)
|
||
|
|
{
|
||
|
|
var title = Slot(component, VisualBriefingSlotRole.TITLE);
|
||
|
|
var summary = Slot(component, VisualBriefingSlotRole.SUMMARY);
|
||
|
|
var outputs = string.Concat(content.Formulas
|
||
|
|
.Where(formula => formula.ComponentId == component.ComponentId)
|
||
|
|
.Select(formula => $"<output data-mwai-expr=\"interactions.formulas.{HtmlEncoder.Default.Encode(formula.OutputSlotId)}\"></output>"));
|
||
|
|
|
||
|
|
return $"<fieldset><legend data-mwai-text=\"slots.{title}\"></legend><p data-mwai-text=\"slots.{summary}\"></p><div class=\"mwai-control-grid\">{controls}</div><div class=\"mwai-results\">{outputs}</div>{VisualBriefingInteractionCompiler.CompileResetMarkup(component.ComponentId)}</fieldset>";
|
||
|
|
}
|
||
|
|
|
||
|
|
private static string CompileTimeline(VisualBriefingPlanComponent component)
|
||
|
|
{
|
||
|
|
var title = Slot(component, VisualBriefingSlotRole.TITLE);
|
||
|
|
var summary = Slot(component, VisualBriefingSlotRole.SUMMARY);
|
||
|
|
var dataSlot = Slot(component, VisualBriefingSlotRole.TIMELINE_DATA);
|
||
|
|
|
||
|
|
return $"<header class=\"mwai-component-heading\"><h3 data-mwai-text=\"slots.{title}\"></h3><p data-mwai-text=\"slots.{summary}\"></p></header>" +
|
||
|
|
$"<ol class=\"mwai-timeline-track\" role=\"list\"><template data-mwai-each=\"slots.{dataSlot}.items\"><li class=\"mwai-timeline-item\">" +
|
||
|
|
"<span class=\"mwai-timeline-marker\" aria-hidden=\"true\"></span><div class=\"mwai-timeline-content\">" +
|
||
|
|
"<p class=\"mwai-timeline-period\" data-mwai-text=\".period\"></p><h4 data-mwai-text=\".title\"></h4>" +
|
||
|
|
"<p class=\"mwai-timeline-description\" data-mwai-text=\".description\"></p></div></li></template></ol>";
|
||
|
|
}
|
||
|
|
|
||
|
|
private static string Slot(VisualBriefingPlanComponent component, VisualBriefingSlotRole role, int occurrence = 0)
|
||
|
|
{
|
||
|
|
var slot = component.Slots.Where(candidate => candidate.Role == role).ElementAtOrDefault(occurrence) ?? throw new InvalidDataException($"A {component.Kind} component is missing its {role} slot.");
|
||
|
|
return HtmlEncoder.Default.Encode(slot.SlotId);
|
||
|
|
}
|
||
|
|
|
||
|
|
private static string CompileCss(VisualBriefingDesignProfile profile, VisualBriefingLayoutNode layout)
|
||
|
|
{
|
||
|
|
var (typeScale, rhythm, sectionSpace) = profile switch
|
||
|
|
{
|
||
|
|
VisualBriefingDesignProfile.EXECUTIVE => ("1.06", "0.92", "4.5rem"),
|
||
|
|
VisualBriefingDesignProfile.ANALYTICAL => ("0.96", "0.82", "3.5rem"),
|
||
|
|
_ => ("1", "1", "5.5rem"),
|
||
|
|
};
|
||
|
|
|
||
|
|
var css = new StringBuilder($$"""
|
||
|
|
#mwai-briefing-root{--mwai-ink:#172A24;--mwai-forest:#164B3B;--mwai-pine:#236A50;--mwai-sage:#79AE90;--mwai-cream:#F7F1DC;--mwai-paper:#FFFEFA;--mwai-sun:#F2D264;--mwai-mist:#EAF1EC;--mwai-clay:#C97857;--mwai-line:#D6E2DC;--mwai-muted:#5E7169;--mwai-type-scale:{{typeScale}};--mwai-rhythm:{{rhythm}};--mwai-section-space:{{sectionSpace}};max-width:80rem;margin-inline:auto;padding:clamp(1rem,2.5vw,2rem) clamp(1rem,3.5vw,3rem) clamp(1rem,3.5vw,3rem);font:calc(1rem*var(--mwai-type-scale))/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--mwai-ink);}
|
||
|
|
#mwai-briefing-root *{box-sizing:border-box;}
|
||
|
|
.mwai-document{display:flex;flex-direction:column;gap:clamp(1rem,2.5vw,2rem);}
|
||
|
|
.mwai-section{display:block;border-radius:clamp(1.25rem,2.5vw,2rem);}
|
||
|
|
.mwai-section-inner{padding:clamp(2rem,5vw,var(--mwai-section-space));}
|
||
|
|
.mwai-section-heading{max-width:52rem;margin-block-end:clamp(1.75rem,4vw,3.25rem);}
|
||
|
|
.mwai-section-heading h1,.mwai-section-heading h2,.mwai-component h3{margin:0;color:inherit;font-weight:720;letter-spacing:-.035em;line-height:1.08;text-wrap:balance;}
|
||
|
|
.mwai-section-heading h1{font-size:clamp(2.6rem,7vw,5.8rem);max-width:14ch;}
|
||
|
|
.mwai-section-heading h2{font-size:clamp(2rem,4.2vw,3.55rem);max-width:18ch;}
|
||
|
|
.mwai-section-heading p{max-width:65ch;margin:1.15rem 0 0;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.55;color:var(--mwai-muted);}
|
||
|
|
.mwai-section-hero{overflow:hidden;background:linear-gradient(135deg,var(--mwai-forest),#255F4B);color:var(--mwai-paper);}
|
||
|
|
.mwai-section-hero .mwai-section-inner{min-height:min(43rem,72vh);display:flex;flex-direction:column;position:relative;}
|
||
|
|
.mwai-section-hero .mwai-section-heading{margin-block-start:auto;}
|
||
|
|
.mwai-section-hero .mwai-section-heading p{color:color-mix(in srgb,var(--mwai-paper),transparent 18%);}
|
||
|
|
.mwai-section-hero .mwai-section-heading{margin-block-end:clamp(1.5rem,3vw,2.5rem);}
|
||
|
|
.mwai-section-executive-summary{background:var(--mwai-cream);}
|
||
|
|
.mwai-section-evidence{background:var(--mwai-mist);}
|
||
|
|
.mwai-section-exploration{background:var(--mwai-paper);border:1px solid var(--mwai-line);}
|
||
|
|
.mwai-section-conclusion{background:var(--mwai-forest);color:var(--mwai-paper);}
|
||
|
|
.mwai-section-conclusion .mwai-section-heading p{color:color-mix(in srgb,var(--mwai-paper),transparent 18%);}
|
||
|
|
.mwai-section-narrative{border-radius:0;border-block-start:1px solid var(--mwai-line);}
|
||
|
|
.mwai-section-content,.mwai-stack{display:flex;flex-direction:column;gap:clamp(1.25rem,3vw,2.25rem);}
|
||
|
|
.mwai-grid{display:grid;gap:clamp(1rem,2.5vw,2rem);}
|
||
|
|
.mwai-component{display:flex;flex-direction:column;min-width:0;gap:calc(1rem*var(--mwai-rhythm));}
|
||
|
|
.mwai-component-heading{display:flex;flex-direction:column;gap:.55rem;}
|
||
|
|
.mwai-component-heading h3,.mwai-callout h3{font-size:clamp(1.3rem,2.2vw,1.75rem);}
|
||
|
|
.mwai-component-heading p,.mwai-copy,.mwai-context,.mwai-callout p{margin:0;max-width:70ch;}
|
||
|
|
.mwai-text{max-width:72ch;padding-block:.5rem;}
|
||
|
|
.mwai-metric,.mwai-chart,.mwai-asset,.mwai-table,.mwai-filterable_table,.mwai-tabs,.mwai-accordion,.mwai-simulation,.mwai-timeline{padding:clamp(1.25rem,2.5vw,2rem);border:1px solid var(--mwai-line);border-radius:1.25rem;background:color-mix(in srgb,var(--mwai-paper),transparent 3%);box-shadow:0 18px 55px rgba(22,75,59,.07);}
|
||
|
|
.mwai-metric{position:relative;overflow:hidden;border-block-start:5px solid var(--mwai-sun);box-shadow:none;}
|
||
|
|
.mwai-metric-body{display:flex;flex-direction:column;margin:0;}
|
||
|
|
.mwai-metric dt{order:2;color:var(--mwai-muted);font-size:.82rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;}
|
||
|
|
.mwai-metric dd{order:1;margin:0;color:var(--mwai-forest);font-size:clamp(2.2rem,5vw,4rem);font-weight:760;line-height:1;letter-spacing:-.045em;}
|
||
|
|
.mwai-context{color:var(--mwai-muted);font-size:.95rem;}
|
||
|
|
.mwai-callout{padding:0;}
|
||
|
|
.mwai-callout aside{padding:clamp(1.5rem,3vw,2.5rem);border-radius:1.25rem;background:var(--mwai-forest);color:var(--mwai-paper);}
|
||
|
|
.mwai-callout aside p:last-child{color:color-mix(in srgb,var(--mwai-paper),transparent 15%);}
|
||
|
|
.mwai-eyebrow{margin:0 0 .65rem;color:var(--mwai-sun);font-size:.78rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase;}
|
||
|
|
figure{margin:0;}
|
||
|
|
.mwai-chart figure,.mwai-asset figure{display:flex;flex-direction:column;gap:1rem;}
|
||
|
|
.mwai-asset img{display:block;width:100%;height:auto;max-height:42rem;object-fit:contain;border-radius:.85rem;background:var(--mwai-mist);}
|
||
|
|
figcaption{color:var(--mwai-muted);font-size:.92rem;line-height:1.55;}
|
||
|
|
[data-mwai-chart]{width:100%;min-height:23rem;}
|
||
|
|
.mwai-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;}
|
||
|
|
.mwai-table-wrap{overflow:auto;border:1px solid var(--mwai-line);border-radius:.85rem;}
|
||
|
|
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--mwai-paper);font-size:.92rem;}
|
||
|
|
caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
|
||
|
|
th,td{padding:.8rem 1rem;text-align:start;border-block-end:1px solid var(--mwai-line);vertical-align:top;}
|
||
|
|
thead th{position:sticky;top:0;z-index:1;background:var(--mwai-forest);color:var(--mwai-paper);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;}
|
||
|
|
tbody tr:nth-child(even){background:var(--mwai-mist);}
|
||
|
|
tbody tr:last-child td{border-block-end:0;}
|
||
|
|
select,input,button{font:inherit;}
|
||
|
|
select,input[type="number"]{min-height:2.75rem;padding:.65rem .8rem;border:1px solid #AFC2B8;border-radius:.7rem;background:var(--mwai-paper);color:var(--mwai-ink);}
|
||
|
|
input[type="range"]{min-height:2.75rem;accent-color:var(--mwai-pine);}
|
||
|
|
button{min-height:2.75rem;padding:.6rem 1rem;border:1px solid var(--mwai-pine);border-radius:999px;background:var(--mwai-paper);color:var(--mwai-pine);font-weight:700;cursor:pointer;}
|
||
|
|
button:hover{background:var(--mwai-mist);}
|
||
|
|
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--mwai-sun);outline-offset:3px;}
|
||
|
|
[role="tablist"]{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:1rem;border-block-end:1px solid var(--mwai-line);}
|
||
|
|
[role="tab"]{border-color:transparent;border-radius:.65rem .65rem 0 0;}
|
||
|
|
[role="tab"][aria-selected="true"]{background:var(--mwai-forest);color:var(--mwai-paper);}
|
||
|
|
[role="tabpanel"]{padding:1rem 0;}
|
||
|
|
details summary{cursor:pointer;font-weight:720;font-size:1.08rem;color:var(--mwai-forest);}
|
||
|
|
.mwai-accordion-body{padding-block-start:1rem;color:var(--mwai-muted);}
|
||
|
|
fieldset{margin:0;padding:0;border:0;}
|
||
|
|
legend{padding:0;font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:720;letter-spacing:-.025em;color:var(--mwai-forest);}
|
||
|
|
.mwai-control-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-block:1.25rem;}
|
||
|
|
.mwai-results{display:flex;flex-wrap:wrap;gap:.75rem;margin-block:1rem;}
|
||
|
|
.mwai-results output{display:block;min-width:8rem;padding:1rem;border-radius:.8rem;background:var(--mwai-cream);color:var(--mwai-forest);font-size:1.45rem;font-weight:750;}
|
||
|
|
.mwai-timeline-track{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;padding-inline-start:.55rem;}
|
||
|
|
.mwai-timeline-item{position:relative;min-width:0;padding:0;padding-block-end:1.75rem;padding-inline-start:1.75rem;border-inline-start:2px solid var(--mwai-line);}
|
||
|
|
.mwai-timeline-item:last-child{padding-block-end:0;}
|
||
|
|
.mwai-timeline-marker{position:absolute;inset-block-start:.18rem;inset-inline-start:-.52rem;width:.95rem;height:.95rem;border:3px solid var(--mwai-paper);border-radius:50%;background:var(--mwai-pine);box-shadow:0 0 0 2px var(--mwai-sage);}
|
||
|
|
.mwai-timeline-content{display:flex;flex-direction:column;gap:.4rem;}
|
||
|
|
.mwai-timeline-period,.mwai-timeline-description{margin:0;}
|
||
|
|
.mwai-timeline-period{color:var(--mwai-pine);font-size:.78rem;font-weight:760;letter-spacing:.07em;text-transform:uppercase;}
|
||
|
|
.mwai-timeline-content h4{margin:0;color:var(--mwai-forest);font-size:1.08rem;line-height:1.25;}
|
||
|
|
.mwai-timeline-description{color:var(--mwai-muted);line-height:1.55;}
|
||
|
|
.mwai-sources{display:block;padding-block-start:.8rem;border-block-start:1px solid var(--mwai-line);color:var(--mwai-muted);font-size:.76rem;line-height:1.5;}
|
||
|
|
.mwai-emphasized{border-color:var(--mwai-sun);box-shadow:0 18px 55px rgba(22,75,59,.12);}
|
||
|
|
.mwai-align-start{align-items:start;}.mwai-align-center{align-items:center;}.mwai-align-end{align-items:end;}.mwai-align-stretch{align-items:stretch;}
|
||
|
|
""");
|
||
|
|
|
||
|
|
foreach (var grid in EnumerateGridNodes(layout))
|
||
|
|
{
|
||
|
|
var id = grid.NodeId;
|
||
|
|
css.Append($"#{id}{{grid-template-columns:repeat({grid.Columns!.Mobile},minmax(0,1fr));}}");
|
||
|
|
|
||
|
|
foreach (var child in grid.Children)
|
||
|
|
css.Append($"#{child.NodeId}{{grid-column:span {Math.Min(child.Span, grid.Columns.Mobile)};}}");
|
||
|
|
|
||
|
|
css.Append($"@media(min-width:48rem){{#{id}{{grid-template-columns:repeat({grid.Columns.Tablet},minmax(0,1fr));}}");
|
||
|
|
foreach (var child in grid.Children)
|
||
|
|
css.Append($"#{child.NodeId}{{grid-column:span {Math.Min(child.Span, grid.Columns.Tablet)};}}");
|
||
|
|
|
||
|
|
css.Append('}');
|
||
|
|
css.Append($"@media(min-width:75rem){{#{id}{{grid-template-columns:repeat({grid.Columns.Desktop},minmax(0,1fr));}}");
|
||
|
|
foreach (var child in grid.Children)
|
||
|
|
css.Append($"#{child.NodeId}{{grid-column:span {Math.Min(child.Span, grid.Columns.Desktop)};}}");
|
||
|
|
|
||
|
|
css.Append('}');
|
||
|
|
}
|
||
|
|
|
||
|
|
css.Append("""
|
||
|
|
@media screen and (min-width:48rem){.mwai-timeline-horizontal .mwai-timeline-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(13rem,1fr);flex-shrink:0;overflow-x:auto;padding:.55rem 0 .5rem;padding-inline-start:.55rem}.mwai-timeline-horizontal .mwai-timeline-item{padding:0;padding-block-start:1.5rem;padding-inline-end:1rem;border-block-start:2px solid var(--mwai-line);border-inline-start:0}.mwai-timeline-horizontal .mwai-timeline-marker{inset-block-start:-.52rem;inset-inline-start:-.52rem}}
|
||
|
|
@media(max-width:47.99rem){#mwai-briefing-root{padding:1rem .75rem .75rem}.mwai-section-inner{padding:1.5rem}.mwai-section-hero .mwai-section-inner{min-height:34rem}.mwai-metric,.mwai-chart,.mwai-asset,.mwai-table,.mwai-filterable_table,.mwai-tabs,.mwai-accordion,.mwai-simulation,.mwai-timeline{padding:1rem}[data-mwai-chart]{min-height:19rem}th,td{padding:.7rem .75rem}}
|
||
|
|
@media print{@page{margin:14mm}#mwai-briefing-root{max-width:none;padding:0;font-size:10pt}.mwai-document{gap:8mm}.mwai-section{border:0;box-shadow:none;background:transparent;color:var(--mwai-ink);break-inside:auto}.mwai-section-inner{padding:6mm 0}.mwai-section-heading{margin-block-end:5mm}.mwai-section-heading h1{font-size:28pt}.mwai-section-heading h2{font-size:21pt}.mwai-section-heading p,.mwai-section-hero .mwai-section-heading p,.mwai-section-conclusion .mwai-section-heading p{color:var(--mwai-muted)}.mwai-component,.mwai-component figure,.mwai-table-wrap{break-inside:avoid}.mwai-timeline{break-inside:auto}.mwai-timeline-item{break-inside:avoid}.mwai-metric,.mwai-chart,.mwai-asset,.mwai-table,.mwai-filterable_table,.mwai-tabs,.mwai-accordion,.mwai-simulation,.mwai-timeline{box-shadow:none;background:var(--mwai-paper)}[data-mwai-tab-panel][hidden]{display:block!important}details:not([open])>.mwai-accordion-body{display:block!important}[data-mwai-reset]{display:none!important}thead th{position:static}*{print-color-adjust:exact}}
|
||
|
|
""");
|
||
|
|
|
||
|
|
return css.ToString();
|
||
|
|
}
|
||
|
|
|
||
|
|
private static IEnumerable<VisualBriefingLayoutNode> EnumerateGridNodes(VisualBriefingLayoutNode node)
|
||
|
|
{
|
||
|
|
if (node.Kind is VisualBriefingLayoutNodeKind.GRID)
|
||
|
|
yield return node;
|
||
|
|
|
||
|
|
foreach (var grid in node.Children.SelectMany(EnumerateGridNodes))
|
||
|
|
yield return grid;
|
||
|
|
}
|
||
|
|
}
|