miriad-viz 0.1.0

package/README.md

@@ -0,0 +1,139 @@
+# miriad-viz
+
+Animated timeline visualization for Miriad channel retrospectives — showing how AI agents and humans collaborate over time.
+
+Turn 60+ hours of channel activity into a cinematic replay: agents joining, communicating, shipping code, and hitting milestones.
+
+## What It Does
+
+Given extracted channel data (commits, PRs, messages, artifacts), miriad-viz produces:
+
+- **Interactive viewer** — scrub through time, watch the team form and build
+- **Video export** — render to MP4 via Remotion for sharing
+
+The visualization shows:
+- Agent nodes that pulse with activity
+- Communication beams traveling between agents
+- Artifact, PR, and commit timelines
+- Phase backgrounds and milestone markers
+- Trust arc and narration overlays
+
+## Quick Start
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run extraction (requires gh CLI authenticated)
+pnpm extract --repo owner/repo --out ./data
+
+# Transform to viz-ready format
+pnpm viz ./data
+
+# Launch interactive viewer
+pnpm dev
+```
+
+## Data Pipeline
+
+```
+┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
+│  Extraction │───▶│  Transform  │───▶│   Engine    │───▶│  Renderer   │
+│             │    │             │    │             │    │             │
+│ gh CLI      │    │ normalize   │    │ frame state │    │ R3F + drei  │
+│ Miriad MCP  │    │ enrich      │    │ per tick    │    │ zero logic  │
+└─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘
+     │                   │                  │
+     ▼                   ▼                  ▼
+  RawData           VizData            FrameState
+  (8 JSON files)    (renderer-ready)   (pure function)
+```
+
+### Data Contracts
+
+| Layer | Input | Output | Purpose |
+|-------|-------|--------|---------|
+| Extraction | GitHub API, Miriad MCP | RawData (8 JSON files) | Gather raw data |
+| Transform | RawData + CurationData | VizData | Normalize, enrich, compute layout |
+| Engine | VizData + time | FrameState | Pure `getFrameState(t, data)` |
+| Renderer | FrameState | Pixels | Declarative R3F scene |
+
+See [docs/data-contracts.md](./docs/data-contracts.md) for full TypeScript schemas.
+
+## CLI Commands
+
+```bash
+# Extraction — pull data from GitHub
+pnpm extract --repo owner/repo --out ./data
+
+# With Miriad channel data (pre-extracted via MCP)
+pnpm extract --repo owner/repo --out ./data \
+  --chat-input ./raw-messages.json \
+  --artifact-input ./raw-artifacts.json
+
+# Transform — process into viz-ready format
+pnpm viz ./data                    # Output to ./data/output/
+pnpm viz ./data --out ./custom-dir # Custom output directory
+```
+
+See [docs/extraction-guide.md](./docs/extraction-guide.md) for step-by-step data extraction.
+
+## Development
+
+```bash
+pnpm dev          # Vite dev server (http://localhost:5173)
+pnpm test         # Run tests
+pnpm lint         # Biome check
+pnpm lint:fix     # Biome auto-fix
+pnpm build        # Production build
+```
+
+## Architecture
+
+**4-layer pipeline** with strict separation of concerns:
+
+1. **Extraction** — Miriad MCP + gh CLI produce 8 JSON source files
+2. **Transform** — Normalize, enrich, compute agent layout → VizData
+3. **State Engine** — `getFrameState(t, vizData)` returns FrameState (pure function)
+4. **Renderer** — R3F/drei presents FrameState (zero data processing)
+
+Key principle: **Renderer does zero logic.** All animation is pre-computed by the engine. The renderer is a dumb display layer that reads FrameState and draws it.
+
+## Stack
+
+- **Vite** — bundler + dev server
+- **React Three Fiber + drei** — declarative 3D rendering
+- **Remotion** — video export
+- **zustand** — state management
+- **Biome** — lint + format
+- **Vitest** — tests
+
+## Documentation
+
+| Guide | Description |
+|-------|-------------|
+| [Data Contracts](./docs/data-contracts.md) | TypeScript schemas for RawData, CurationData, VizData |
+| [Extraction Guide](./docs/extraction-guide.md) | How to extract data from GitHub + Miriad |
+| [Curation Guide](./docs/curation-guide.md) | Editorial content: phases, milestones, quotes |
+| [FEATURES.md](./FEATURES.md) | Feature tracker with implementation status |
+
+## Source Data Files
+
+The extraction pipeline produces 8 JSON files:
+
+| File | Source | Description |
+|------|--------|-------------|
+| `git-commits.json` | GitHub API | Commit history with stats |
+| `pr-details.json` | GitHub API | Pull request metadata |
+| `pr-agent-map.json` | Heuristics | Maps PRs to agent callsigns |
+| `chat-activity.json` | Miriad MCP | Channel activity summary |
+| `artifact-data.json` | Miriad MCP | Board artifact inventory |
+| `timeline-events.json` | Processing | Unified event stream |
+| `retro-page-data.json` | Editorial | Phases, milestones, trust arc |
+| `retro-page-quotes.json` | Editorial | Curated quotes |
+
+TypeScript types for all files: `src/transform/source-types.ts`
+
+## License
+
+MIT

package/bin/miriad-viz.mjs

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+
+/**
+ * CLI entry point for miriad-viz.
+ *
+ * In development (cloned repo): tsx runs TypeScript source directly.
+ * After build (npm publish): loads compiled JS from dist-cli/.
+ */
+
+import { execFileSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = resolve(__dirname, '..');
+
+const compiledEntry = resolve(root, 'dist-cli', 'index.js');
+const sourceEntry = resolve(root, 'src', 'cli', 'guided', 'index.ts');
+
+if (existsSync(compiledEntry)) {
+  // Published package or post-build — load compiled JS
+  await import(compiledEntry);
+} else if (existsSync(sourceEntry)) {
+  // Development — use tsx to run TypeScript directly
+  const tsxBin = resolve(root, 'node_modules', '.bin', 'tsx');
+  if (!existsSync(tsxBin)) {
+    console.error('Error: tsx not found. Run `pnpm install` first.');
+    process.exit(1);
+  }
+  try {
+    execFileSync(tsxBin, [sourceEntry, ...process.argv.slice(2)], {
+      cwd: process.cwd(),
+      stdio: 'inherit',
+    });
+  } catch (err) {
+    // execFileSync throws on non-zero exit — propagate exit code
+    process.exit(err.status ?? 1);
+  }
+} else {
+  console.error('Error: miriad-viz CLI not found. Is the package installed correctly?');
+  console.error(`  Looked for: ${compiledEntry}`);
+  console.error(`  Looked for: ${sourceEntry}`);
+  process.exit(1);
+}

package/dist-lib/frame-state-eeHrDxl-.d.cts

@@ -0,0 +1,228 @@
+/**
+ * CONTRACT C: FrameState — what the state engine produces.
+ * Pure function of (progress, vizData, layoutContext) → FrameState.
+ * Contains ONLY primitive values: positions, colors, opacities.
+ * The renderer maps these to canvas draw calls. Zero logic.
+ */
+/**
+ * Minimal layout context the engine needs for sizing computations.
+ * Avoids coupling engine to the full Layout interface — only the
+ * fields needed for agent sizing and narration positioning.
+ */
+interface LayoutContext {
+    /** Node radius in world units (from layout.nodeRadius) */
+    nodeRadius: number;
+    /** Label height in world units (from layout.labelHeight) */
+    labelHeight: number;
+    /** Convert normalized agent position to world coordinates */
+    agentToWorld: (nx: number, ny: number) => {
+        x: number;
+        y: number;
+    };
+    /** World bounds for clamping */
+    worldLeft: number;
+    worldRight: number;
+    worldTop: number;
+    /** Top of agents band in world units (from layout.bands.agents.top).
+     *  Used to clamp narration pills so they don't extend above the band
+     *  into label rows or legend. Flows dynamically from layout — when the
+     *  stacking loop changes (e.g., adding legend row), this adjusts automatically. */
+    agentsBandTop: number;
+    /** Viewport width in screen pixels — for computing ppu (pixels per unit) */
+    viewportPxWidth: number;
+    /** World width in world units (typically 10) */
+    worldWidth: number;
+    /** Time axis width in world units (timeRight - timeLeft).
+     *  Used by pack-rows to compute minimum 1px gap between bars. */
+    timeWidth?: number;
+    /** Maximum pill width in world units (from layout.narrationMaxWidth) */
+    narrationMaxWidth: number;
+    /** Horizontal padding inside pill in world units */
+    narrationPadX: number;
+    /** Vertical padding inside pill in world units */
+    narrationPadY: number;
+    /** Y offset above agent center for pill positioning */
+    narrationOffsetY: number;
+    /** Ratio of glow visual extent to core radius (from layout.glowRadiusRatio) */
+    glowRadiusRatio: number;
+    /** Minimum bar width in normalized time (layout.minBarWidth / layout.timeWidth).
+     *  Used by pack-rows to ensure packing accounts for the renderer's minimum bar
+     *  expansion — without this, the engine packs bars tightly but the renderer
+     *  expands short bars past the gap, making them visually merge. */
+    minBarWidthNorm?: number;
+    /** Text scale factor for mobile legibility (from layout.textScale).
+     *  Used to scale pill font size proportionally with other text. */
+    textScale?: number;
+}
+interface AgentState {
+    id: string;
+    x: number;
+    y: number;
+    radius: number;
+    color: string;
+    opacity: number;
+    glowIntensity: number;
+    label: string;
+    labelOpacity: number;
+    scale: number;
+    /** Work intensity 0-1: sliding window of recent commits/PRs/messages with decay.
+     *  Drives node sizing (geometry scale) and core brightness.
+     *  0 = idle, 1 = peak activity (≥25 weighted work units in window). */
+    workIntensity: number;
+    /** Cumulative work volume: count of commits + PRs (created + merged) up to current progress.
+     *  Drives base node sizing — bigger nodes for agents who've shipped more.
+     *  Unlike workIntensity (instantaneous, decayed), this only grows over time. */
+    totalWork: number;
+    /** Whether this agent is human (for distinct sizing) */
+    isHuman: boolean;
+    /** Agent role — drives role tag display below name */
+    role: 'human' | 'builder' | 'lead' | 'reviewer' | 'tester' | 'ideation' | 'researcher' | 'auditor' | 'challenger' | 'scout' | 'pm';
+    /** Core circle scale factor — folds in human multiplier, work growth,
+     *  activity pulse, bounce scale, and layout scale. The renderer reads
+     *  this directly for shader uniforms and label positioning.
+     *  Formula: humanMul * (1 + growthFactor * MAX_WORK_GROWTH) * activityPulse * bounceScale * layoutScale */
+    coreScale: number;
+    /** Y offset from agent center for label positioning (negative = below).
+     *  Accounts for core scale and label gap. Renderer sets label.position.y = this value. */
+    labelOffsetY: number;
+}
+interface ParticleState {
+    id: string;
+    type: 'message';
+    x: number;
+    y: number;
+    opacity: number;
+    size: number;
+    color: string;
+}
+/** Editorial narration — documentary storytelling voice.
+ *  Separate from quote pills (QuotePillState). Displayed in the HTML NarrationLane.
+ *  Phase title (colored) + editorial text. Milestones are primary, phases fill gaps. */
+interface EditorialNarrationState {
+    phaseTitle: string;
+    phaseColor: string;
+    text: string;
+    opacity: number;
+}
+interface QuotePillState {
+    text: string;
+    speaker: string;
+    opacity: number;
+    /** Speaker's normalized X position (0-1). Renderer calls layout.agentToWorld()
+     *  to convert to world space — same code path as AgentNode. */
+    speakerNormX: number;
+    /** Speaker's normalized Y position (0-1). Renderer calls layout.agentToWorld()
+     *  to convert to world space — same code path as AgentNode. */
+    speakerNormY: number;
+    /** World-space Y offset above agent center (glow clearance + gap + pillHeight/2).
+     *  Renderer positions pill at: agentToWorld(normX, normY).y + yOffset */
+    yOffset: number;
+    /** World-space X offset to keep pill within viewport bounds.
+     *  0 when pill fits centered on agent. Positive = shift right, negative = shift left.
+     *  Renderer positions pill at: agentToWorld(normX, normY).x + xOffset */
+    xOffset: number;
+    /** Emoji prefix from curated quote (e.g. "🏗️") */
+    emoji?: string;
+    /** Mood tag from curated quote (good | bad | great | angry | surprise) */
+    mood?: string;
+    /** Text wrapped into lines by engine (word-wrap heuristic). */
+    lines: string[];
+    /** Horizontal padding in world units. Renderer: canvasWidth = measuredText + padX * 2 */
+    padX: number;
+    /** Vertical padding in world units. Renderer: canvasHeight = measuredTextHeight + padY * 2 */
+    padY: number;
+    /** Max pill width in world units — ceiling for canvas/geometry sizing. */
+    maxPillWidth: number;
+    /** Estimated actual pill width in world units — used for X clamping.
+     *  Single-line: content width + padding. Multi-line: maxPillWidth. */
+    estimatedWidth: number;
+    /** Speaker display name (may differ from speaker id) */
+    speakerLabel: string;
+    /** Speaker color hex */
+    speakerColor: string;
+    /** Pill background color hex (darkened speaker color) */
+    pillBgColor: string;
+}
+interface PhaseState {
+    id: string;
+    name: string;
+    progress: number;
+    color: string;
+}
+interface CommitDot {
+    normalizedTime: number;
+    insertions: number;
+    deletions: number;
+    agent: string;
+    color: string;
+    commitType: string;
+    /** Log-scaled height (0-1). Largest commit = 1.0. Uses natural log for gentle compression. */
+    heightNorm: number;
+}
+interface PRBar {
+    prNumber: number;
+    openedNormalized: number;
+    mergedNormalized: number | null;
+    agent: string;
+    color: string;
+    additions: number;
+    deletions: number;
+    /** Row index from greedy packing (0 = top row). Computed by engine. */
+    row: number;
+}
+interface ArtifactBar {
+    normalizedTime: number;
+    type: string;
+    agent: string;
+    color: string;
+    /** Row index from greedy packing (0 = top row). Computed by engine. */
+    row: number;
+}
+interface EdgeState {
+    fromId: string;
+    toId: string;
+    strength: number;
+    color: string;
+    fromColor: string;
+    toColor: string;
+}
+interface MilestoneState {
+    normalizedTime: number;
+    label: string;
+    visible: boolean;
+}
+interface AllPhaseState {
+    id: string;
+    name: string;
+    startNormalized: number;
+    endNormalized: number;
+    color: string;
+    /** Label opacity: 0 when outside phase, fades in/out at boundaries (0.5% of timeline) */
+    labelOpacity: number;
+}
+interface FrameState {
+    projectTitle: string;
+    progress: number;
+    agents: AgentState[];
+    particles: ParticleState[];
+    quotePills: QuotePillState[];
+    editorialNarration: EditorialNarrationState | null;
+    phase: PhaseState;
+    stats: {
+        commitsToDate: number;
+        prsToDate: number;
+        messagesToDate: number;
+        activeAgents: number;
+    };
+    commitDots: CommitDot[];
+    prBars: PRBar[];
+    artifactBars: ArtifactBar[];
+    edges: EdgeState[];
+    visibleMilestones: MilestoneState[];
+    allPhases: AllPhaseState[];
+    trustLevel: number;
+    totalHours: number;
+    currentHours: number;
+}
+
+export type { AgentState as A, CommitDot as C, EdgeState as E, FrameState as F, LayoutContext as L, MilestoneState as M, PRBar as P, QuotePillState as Q, AllPhaseState as a, ArtifactBar as b, ParticleState as c, PhaseState as d };

package/dist-lib/frame-state-eeHrDxl-.d.ts

@@ -0,0 +1,228 @@
+/**
+ * CONTRACT C: FrameState — what the state engine produces.
+ * Pure function of (progress, vizData, layoutContext) → FrameState.
+ * Contains ONLY primitive values: positions, colors, opacities.
+ * The renderer maps these to canvas draw calls. Zero logic.
+ */
+/**
+ * Minimal layout context the engine needs for sizing computations.
+ * Avoids coupling engine to the full Layout interface — only the
+ * fields needed for agent sizing and narration positioning.
+ */
+interface LayoutContext {
+    /** Node radius in world units (from layout.nodeRadius) */
+    nodeRadius: number;
+    /** Label height in world units (from layout.labelHeight) */
+    labelHeight: number;
+    /** Convert normalized agent position to world coordinates */
+    agentToWorld: (nx: number, ny: number) => {
+        x: number;
+        y: number;
+    };
+    /** World bounds for clamping */
+    worldLeft: number;
+    worldRight: number;
+    worldTop: number;
+    /** Top of agents band in world units (from layout.bands.agents.top).
+     *  Used to clamp narration pills so they don't extend above the band
+     *  into label rows or legend. Flows dynamically from layout — when the
+     *  stacking loop changes (e.g., adding legend row), this adjusts automatically. */
+    agentsBandTop: number;
+    /** Viewport width in screen pixels — for computing ppu (pixels per unit) */
+    viewportPxWidth: number;
+    /** World width in world units (typically 10) */
+    worldWidth: number;
+    /** Time axis width in world units (timeRight - timeLeft).
+     *  Used by pack-rows to compute minimum 1px gap between bars. */
+    timeWidth?: number;
+    /** Maximum pill width in world units (from layout.narrationMaxWidth) */
+    narrationMaxWidth: number;
+    /** Horizontal padding inside pill in world units */
+    narrationPadX: number;
+    /** Vertical padding inside pill in world units */
+    narrationPadY: number;
+    /** Y offset above agent center for pill positioning */
+    narrationOffsetY: number;
+    /** Ratio of glow visual extent to core radius (from layout.glowRadiusRatio) */
+    glowRadiusRatio: number;
+    /** Minimum bar width in normalized time (layout.minBarWidth / layout.timeWidth).
+     *  Used by pack-rows to ensure packing accounts for the renderer's minimum bar
+     *  expansion — without this, the engine packs bars tightly but the renderer
+     *  expands short bars past the gap, making them visually merge. */
+    minBarWidthNorm?: number;
+    /** Text scale factor for mobile legibility (from layout.textScale).
+     *  Used to scale pill font size proportionally with other text. */
+    textScale?: number;
+}
+interface AgentState {
+    id: string;
+    x: number;
+    y: number;
+    radius: number;
+    color: string;
+    opacity: number;
+    glowIntensity: number;
+    label: string;
+    labelOpacity: number;
+    scale: number;
+    /** Work intensity 0-1: sliding window of recent commits/PRs/messages with decay.
+     *  Drives node sizing (geometry scale) and core brightness.
+     *  0 = idle, 1 = peak activity (≥25 weighted work units in window). */
+    workIntensity: number;
+    /** Cumulative work volume: count of commits + PRs (created + merged) up to current progress.
+     *  Drives base node sizing — bigger nodes for agents who've shipped more.
+     *  Unlike workIntensity (instantaneous, decayed), this only grows over time. */
+    totalWork: number;
+    /** Whether this agent is human (for distinct sizing) */
+    isHuman: boolean;
+    /** Agent role — drives role tag display below name */
+    role: 'human' | 'builder' | 'lead' | 'reviewer' | 'tester' | 'ideation' | 'researcher' | 'auditor' | 'challenger' | 'scout' | 'pm';
+    /** Core circle scale factor — folds in human multiplier, work growth,
+     *  activity pulse, bounce scale, and layout scale. The renderer reads
+     *  this directly for shader uniforms and label positioning.
+     *  Formula: humanMul * (1 + growthFactor * MAX_WORK_GROWTH) * activityPulse * bounceScale * layoutScale */
+    coreScale: number;
+    /** Y offset from agent center for label positioning (negative = below).
+     *  Accounts for core scale and label gap. Renderer sets label.position.y = this value. */
+    labelOffsetY: number;
+}
+interface ParticleState {
+    id: string;
+    type: 'message';
+    x: number;
+    y: number;
+    opacity: number;
+    size: number;
+    color: string;
+}
+/** Editorial narration — documentary storytelling voice.
+ *  Separate from quote pills (QuotePillState). Displayed in the HTML NarrationLane.
+ *  Phase title (colored) + editorial text. Milestones are primary, phases fill gaps. */
+interface EditorialNarrationState {
+    phaseTitle: string;
+    phaseColor: string;
+    text: string;
+    opacity: number;
+}
+interface QuotePillState {
+    text: string;
+    speaker: string;
+    opacity: number;
+    /** Speaker's normalized X position (0-1). Renderer calls layout.agentToWorld()
+     *  to convert to world space — same code path as AgentNode. */
+    speakerNormX: number;
+    /** Speaker's normalized Y position (0-1). Renderer calls layout.agentToWorld()
+     *  to convert to world space — same code path as AgentNode. */
+    speakerNormY: number;
+    /** World-space Y offset above agent center (glow clearance + gap + pillHeight/2).
+     *  Renderer positions pill at: agentToWorld(normX, normY).y + yOffset */
+    yOffset: number;
+    /** World-space X offset to keep pill within viewport bounds.
+     *  0 when pill fits centered on agent. Positive = shift right, negative = shift left.
+     *  Renderer positions pill at: agentToWorld(normX, normY).x + xOffset */
+    xOffset: number;
+    /** Emoji prefix from curated quote (e.g. "🏗️") */
+    emoji?: string;
+    /** Mood tag from curated quote (good | bad | great | angry | surprise) */
+    mood?: string;
+    /** Text wrapped into lines by engine (word-wrap heuristic). */
+    lines: string[];
+    /** Horizontal padding in world units. Renderer: canvasWidth = measuredText + padX * 2 */
+    padX: number;
+    /** Vertical padding in world units. Renderer: canvasHeight = measuredTextHeight + padY * 2 */
+    padY: number;
+    /** Max pill width in world units — ceiling for canvas/geometry sizing. */
+    maxPillWidth: number;
+    /** Estimated actual pill width in world units — used for X clamping.
+     *  Single-line: content width + padding. Multi-line: maxPillWidth. */
+    estimatedWidth: number;
+    /** Speaker display name (may differ from speaker id) */
+    speakerLabel: string;
+    /** Speaker color hex */
+    speakerColor: string;
+    /** Pill background color hex (darkened speaker color) */
+    pillBgColor: string;
+}
+interface PhaseState {
+    id: string;
+    name: string;
+    progress: number;
+    color: string;
+}
+interface CommitDot {
+    normalizedTime: number;
+    insertions: number;
+    deletions: number;
+    agent: string;
+    color: string;
+    commitType: string;
+    /** Log-scaled height (0-1). Largest commit = 1.0. Uses natural log for gentle compression. */
+    heightNorm: number;
+}
+interface PRBar {
+    prNumber: number;
+    openedNormalized: number;
+    mergedNormalized: number | null;
+    agent: string;
+    color: string;
+    additions: number;
+    deletions: number;
+    /** Row index from greedy packing (0 = top row). Computed by engine. */
+    row: number;
+}
+interface ArtifactBar {
+    normalizedTime: number;
+    type: string;
+    agent: string;
+    color: string;
+    /** Row index from greedy packing (0 = top row). Computed by engine. */
+    row: number;
+}
+interface EdgeState {
+    fromId: string;
+    toId: string;
+    strength: number;
+    color: string;
+    fromColor: string;
+    toColor: string;
+}
+interface MilestoneState {
+    normalizedTime: number;
+    label: string;
+    visible: boolean;
+}
+interface AllPhaseState {
+    id: string;
+    name: string;
+    startNormalized: number;
+    endNormalized: number;
+    color: string;
+    /** Label opacity: 0 when outside phase, fades in/out at boundaries (0.5% of timeline) */
+    labelOpacity: number;
+}
+interface FrameState {
+    projectTitle: string;
+    progress: number;
+    agents: AgentState[];
+    particles: ParticleState[];
+    quotePills: QuotePillState[];
+    editorialNarration: EditorialNarrationState | null;
+    phase: PhaseState;
+    stats: {
+        commitsToDate: number;
+        prsToDate: number;
+        messagesToDate: number;
+        activeAgents: number;
+    };
+    commitDots: CommitDot[];
+    prBars: PRBar[];
+    artifactBars: ArtifactBar[];
+    edges: EdgeState[];
+    visibleMilestones: MilestoneState[];
+    allPhases: AllPhaseState[];
+    trustLevel: number;
+    totalHours: number;
+    currentHours: number;
+}
+
+export type { AgentState as A, CommitDot as C, EdgeState as E, FrameState as F, LayoutContext as L, MilestoneState as M, PRBar as P, QuotePillState as Q, AllPhaseState as a, ArtifactBar as b, ParticleState as c, PhaseState as d };