{
  "components": [
    {
      "id": "status_element",
      "type": "status",
      "variant": "dual_mode",
      "used_in": [
        "landing",
        "expedition",
        "archive"
      ],
      "tags": [
        "status",
        "expedition",
        "phase",
        "countdown"
      ],
      "props": [
        "mode",
        "currentPhase",
        "topic",
        "countdown",
        "expeditionUrl"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Expanded mode on landing page hero area, collapses to slim sub-header on scroll and on other pages.",
      "path": "components/global/StatusElement/StatusElement.jsx",
      "location": "shared",
      "created": "2026-03-08T22:25:55.220367",
      "status": "approved",
      "promoted_at": "2026-03-08T22:30:46.376043",
      "promoted_from": "unreal-expeditions/pages/shared/components/StatusElement/StatusElement.jsx"
    },
    {
      "id": "join_cta",
      "type": "cta",
      "variant": "full_width_section",
      "used_in": [
        "landing",
        "expedition",
        "archive"
      ],
      "tags": [
        "cta",
        "discord",
        "conversion"
      ],
      "props": [
        "headline",
        "description",
        "buttonLabel",
        "onJoinDiscord"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Dark background section. Used as closing CTA on every page. Accent button for max contrast.",
      "path": "components/global/JoinCTA/JoinCTA.jsx",
      "location": "shared",
      "created": "2026-03-08T22:25:55.220707",
      "status": "approved",
      "promoted_at": "2026-03-08T22:30:46.376516",
      "promoted_from": "unreal-expeditions/pages/shared/components/JoinCTA/JoinCTA.jsx"
    },
    {
      "id": "expedition_card",
      "type": "card",
      "variant": "dual_layout",
      "used_in": [
        "landing",
        "archive"
      ],
      "tags": [
        "card",
        "expedition",
        "showcase",
        "archive"
      ],
      "props": [
        "layout",
        "title",
        "topic",
        "outcome",
        "excerpt",
        "thumbnail",
        "squad",
        "date",
        "readTime",
        "href"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Horizontal for archive desktop, vertical for mobile and landing showcase. Squad avatars as initials.",
      "path": "components/cards/ExpeditionCard/ExpeditionCard.jsx",
      "location": "shared",
      "created": "2026-03-08T22:25:55.220908",
      "status": "approved",
      "promoted_at": "2026-03-08T22:30:46.377015",
      "promoted_from": "unreal-expeditions/pages/shared/components/ExpeditionCard/ExpeditionCard.jsx"
    },
    {
      "id": "outcome_badge",
      "type": "badge",
      "variant": "standard",
      "used_in": [
        "expedition",
        "archive",
        "landing"
      ],
      "tags": [
        "badge",
        "outcome",
        "status"
      ],
      "props": [
        "outcome",
        "type"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Color-coded by outcome type. Accent for chronicles, green for voyages.",
      "path": "components/badges/OutcomeBadge/OutcomeBadge.jsx",
      "location": "shared",
      "created": "2026-03-08T22:25:55.221104",
      "status": "approved",
      "promoted_at": "2026-03-08T22:30:46.378205",
      "promoted_from": "unreal-expeditions/pages/shared/components/OutcomeBadge/OutcomeBadge.jsx"
    },
    {
      "id": "topic_tag",
      "type": "tag",
      "variant": "standard",
      "used_in": [
        "expedition",
        "archive"
      ],
      "tags": [
        "tag",
        "topic",
        "category"
      ],
      "props": [
        "label",
        "href"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Neutral pill tag. Could link to filtered archive view in the future.",
      "path": "components/badges/TopicTag/TopicTag.jsx",
      "location": "shared",
      "created": "2026-03-08T22:25:55.221307",
      "status": "approved",
      "promoted_at": "2026-03-08T22:30:46.378565",
      "promoted_from": "unreal-expeditions/pages/shared/components/TopicTag/TopicTag.jsx"
    },
    {
      "id": "hero_section",
      "type": "hero",
      "variant": "centered_text",
      "used_in": [
        "landing"
      ],
      "tags": [
        "hero",
        "pitch",
        "headline",
        "cta"
      ],
      "props": [
        "headline",
        "subheadline",
        "ctaLabel",
        "onJoinDiscord"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Clean centered headline with Satoshi 900 weight. No background imagery \u2014 lets the StatusElement above provide visual anchoring. The bold type IS the graphic at this scale.",
      "path": "pages/landing/components/HeroSection/HeroSection.jsx",
      "location": "page_specific",
      "created": "2026-03-08T22:26:55.740124",
      "status": "approved"
    },
    {
      "id": "hero_video",
      "type": "media",
      "variant": "looping_hero",
      "used_in": [
        "expedition"
      ],
      "tags": [
        "hero",
        "video",
        "media"
      ],
      "props": [
        "videoSrc",
        "posterSrc",
        "alt"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Auto-playing muted loop. 21:9 on mobile, 3:1 on desktop. Gradient overlay from bottom.",
      "path": "pages/expedition/components/HeroVideo/HeroVideo.jsx",
      "location": "page_specific",
      "created": "2026-03-08T22:27:55.097809",
      "status": "approved"
    },
    {
      "id": "expedition_header",
      "type": "header",
      "variant": "with_actions",
      "used_in": [
        "expedition"
      ],
      "tags": [
        "header",
        "title",
        "actions",
        "github",
        "share"
      ],
      "props": [
        "title",
        "topic",
        "outcome",
        "outcomeType",
        "repoUrl",
        "onShare"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Title with GitHub and share icons inline. Topic tag and outcome badge above.",
      "path": "pages/expedition/components/ExpeditionHeader/ExpeditionHeader.jsx",
      "location": "page_specific",
      "created": "2026-03-08T22:27:55.098377",
      "status": "approved"
    },
    {
      "id": "squad_metadata",
      "type": "metadata",
      "variant": "horizontal_bar",
      "used_in": [
        "expedition"
      ],
      "tags": [
        "metadata",
        "squad",
        "date",
        "read-time"
      ],
      "props": [
        "squad",
        "startDate",
        "endDate",
        "readTime"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Horizontal layout with avatar stack, names, dates, read time. Wraps naturally on mobile.",
      "path": "pages/expedition/components/SquadMetadata/SquadMetadata.jsx",
      "location": "page_specific",
      "created": "2026-03-08T22:27:55.099246",
      "status": "approved"
    },
    {
      "id": "article_body",
      "type": "content",
      "variant": "rich_text",
      "used_in": [
        "expedition"
      ],
      "tags": [
        "article",
        "content",
        "prose",
        "rich-text"
      ],
      "props": [
        "children"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Styling via Tailwind arbitrary selectors. Wraps raw HTML/markdown-rendered content. Code blocks and videos composed separately.",
      "path": "pages/expedition/components/ArticleBody/ArticleBody.jsx",
      "location": "page_specific",
      "created": "2026-03-08T22:28:41.586894",
      "status": "approved"
    },
    {
      "id": "code_block",
      "type": "content",
      "variant": "syntax_block",
      "used_in": [
        "expedition"
      ],
      "tags": [
        "code",
        "syntax",
        "cpp",
        "content"
      ],
      "props": [
        "code",
        "language",
        "filename"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Dark code block on dark bg. Horizontal scroll on mobile. Copy button. Language label. Optional filename.",
      "path": "pages/expedition/components/CodeBlock/CodeBlock.jsx",
      "location": "page_specific",
      "created": "2026-03-08T22:28:41.587570",
      "status": "approved"
    },
    {
      "id": "video_embed",
      "type": "media",
      "variant": "inline_player",
      "used_in": [
        "expedition"
      ],
      "tags": [
        "video",
        "media",
        "embed",
        "demo"
      ],
      "props": [
        "src",
        "poster",
        "title",
        "caption"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "16:9 aspect ratio, native video controls, optional caption. Different from HeroVideo which is muted/looping.",
      "path": "pages/expedition/components/VideoEmbed/VideoEmbed.jsx",
      "location": "page_specific",
      "created": "2026-03-08T22:28:41.587945",
      "status": "approved"
    },
    {
      "id": "related_expeditions",
      "type": "section",
      "variant": "card_grid",
      "used_in": [
        "expedition"
      ],
      "tags": [
        "related",
        "expeditions",
        "cards",
        "navigation"
      ],
      "props": [
        "expeditions"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "2-column grid on desktop, stacked on mobile. Renders inline card markup rather than importing ExpeditionCard to stay self-contained for now \u2014 will refactor to use shared card during promotion.",
      "path": "pages/expedition/components/RelatedExpeditions/RelatedExpeditions.jsx",
      "location": "page_specific",
      "created": "2026-03-08T22:28:41.588305",
      "status": "approved"
    },
    {
      "id": "page_header",
      "type": "header",
      "variant": "simple",
      "used_in": [
        "archive"
      ],
      "tags": [
        "header",
        "page",
        "title"
      ],
      "props": [
        "title",
        "description"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Left-aligned header. Description capped at 600px for readability.",
      "path": "pages/archive/components/PageHeader/PageHeader.jsx",
      "location": "page_specific",
      "created": "2026-03-08T22:28:58.834941",
      "status": "approved"
    },
    {
      "id": "navbar",
      "type": "navigation",
      "variant": "top_bar_plus_bottom_tabs",
      "used_in": [
        "landing",
        "expedition",
        "archive"
      ],
      "tags": [
        "navigation",
        "global",
        "responsive",
        "bottom-tab"
      ],
      "props": [
        "currentPath",
        "onJoinDiscord"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Desktop: standard horizontal nav. Mobile: top bar (logo+CTA) + bottom tab bar that auto-hides on scroll down, reappears on scroll up. Bottom bar designed to yield space to sticky CTAs when user is scrolling content.",
      "path": "pages/shared/components/NavBar/NavBar.jsx",
      "location": "page_specific",
      "created": "2026-03-12T19:59:53.455517",
      "status": "approved"
    },
    {
      "id": "hero_section_layered",
      "type": "hero",
      "variant": "layered_graphic",
      "used_in": [
        "landing"
      ],
      "tags": [
        "hero",
        "pitch",
        "headline",
        "cta",
        "graphic",
        "image"
      ],
      "props": [
        "headline",
        "subheadline",
        "ctaLabel",
        "onJoinDiscord",
        "backgroundImage"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Variant E. Full-bleed graphic zone with text overlay. Falls back to dark gradient without image. Accent CTA for contrast against dark bg. Transforms dramatically when illustration/image is provided.",
      "path": "pages/landing/components/HeroSectionLayered/HeroSectionLayered.jsx",
      "location": "page_specific",
      "created": "2026-03-12T20:01:41.176667",
      "status": "approved"
    },
    {
      "id": "how_it_works",
      "type": "section",
      "variant": "alternating_blocks",
      "used_in": [
        "landing"
      ],
      "tags": [
        "how-it-works",
        "lifecycle",
        "phases",
        "explainer",
        "illustration"
      ],
      "props": [
        "phaseImages"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Variant X. Alternating two-column blocks with illustration zones per phase. phaseImages prop accepts object keyed by phase number (01-07) mapping to image URLs. Falls back to placeholder zones without images. Stacks vertically on mobile with graphic above text.",
      "path": "pages/landing/components/HowItWorks/HowItWorks.jsx",
      "location": "page_specific",
      "created": "2026-03-12T20:07:44.203408",
      "status": "approved"
    },
    {
      "id": "phase_progress_bar",
      "type": "progress",
      "variant": "contained_dark_bar",
      "used_in": [
        "expedition"
      ],
      "tags": [
        "progress",
        "phases",
        "journey",
        "status"
      ],
      "props": [
        "currentPhase",
        "completedPhases"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Variant C. Dark contained bar matching StatusElement treatment. Desktop shows all phase names with arrows. Mobile shows segmented bar with current label. Creates visual band separating header from article.",
      "path": "pages/expedition/components/PhaseProgressBar/PhaseProgressBar.jsx",
      "location": "page_specific",
      "created": "2026-03-12T20:15:10.069986",
      "status": "approved"
    },
    {
      "id": "filter_bar",
      "type": "filter",
      "variant": "search_plus_chips",
      "used_in": [
        "archive"
      ],
      "tags": [
        "filter",
        "search",
        "chips",
        "archive"
      ],
      "props": [
        "topics",
        "activeTopic",
        "onTopicChange",
        "searchQuery",
        "onSearchChange",
        "showTopics",
        "visible"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Search input always visible when component is shown. Topic chips controlled separately via showTopics prop \u2014 hidden until archive has enough content to warrant filtering. visible prop controls the entire component.",
      "path": "pages/archive/components/FilterBar/FilterBar.jsx",
      "location": "page_specific",
      "created": "2026-03-12T20:15:10.070904",
      "status": "approved"
    },
    {
      "id": "expedition_card_featured",
      "type": "card",
      "variant": "featured_hero",
      "used_in": [
        "landing"
      ],
      "tags": [
        "card",
        "expedition",
        "featured",
        "hero",
        "showcase"
      ],
      "props": [
        "title",
        "topic",
        "outcome",
        "excerpt",
        "thumbnail",
        "squad",
        "date",
        "readTime",
        "href"
      ],
      "breakpoints": [
        "mobile",
        "desktop"
      ],
      "notes": "Variant C. Full-width image overlay card. For single featured expedition on landing page showcase. Not for lists.",
      "path": "components/cards/ExpeditionCardFeatured/ExpeditionCardFeatured.jsx",
      "location": "shared",
      "created": "2026-03-12T20:15:10.071373",
      "status": "approved",
      "promoted_at": "2026-03-12T20:17:30.558770",
      "promoted_from": "unreal-expeditions/pages/shared/components/ExpeditionCardFeatured/ExpeditionCardFeatured.jsx"
    }
  ],
  "last_updated": "2026-03-12T20:17:30.558776"
}