@backbay/glia 0.2.0-alpha.1

package/dist/components/ClusterHero/ClusterHeroPage.js

@@ -0,0 +1,189 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { cn } from "../../lib/utils";
+import { ClusterHero } from "./ClusterHero.js";
+import { getClusterConfigWithResolvedUrls } from "./config.js";
+// ============================================================================
+// Feature Cards Section
+// ============================================================================
+const FEATURE_DATA = {
+    alexandria: [
+        { title: "Knowledge Graph", description: "Interconnected data structures that compound understanding over time", icon: "book" },
+        { title: "Semantic Search", description: "Query across documents with natural language understanding", icon: "search" },
+        { title: "Version History", description: "Every edit preserved, every branch trackable", icon: "history" },
+    ],
+    alpha: [
+        { title: "Genesis Protocol", description: "The foundational layer from which all clusters derive", icon: "origin" },
+        { title: "Core APIs", description: "Stable interfaces that power the entire ecosystem", icon: "api" },
+        { title: "Identity Layer", description: "Sovereign authentication across all surfaces", icon: "key" },
+    ],
+    opus: [
+        { title: "Diagnostic Engines", description: "AI-powered analysis pipelines for medical imaging and patient data", icon: "scan" },
+        { title: "Care Protocols", description: "Autonomous coordination of treatment workflows and provider networks", icon: "workflow" },
+        { title: "Compliance Layer", description: "Built-in HIPAA, SOC2, and regulatory framework adherence", icon: "shield" },
+    ],
+    baia: [
+        { title: "Neural Canvas", description: "Generative models that transform prompts into visual masterpieces", icon: "palette" },
+        { title: "Sound Synthesis", description: "AI composition engines for music, ambience, and audio design", icon: "waveform" },
+        { title: "Style Transfer", description: "Cross-modal translation between artistic mediums and formats", icon: "layers" },
+    ],
+    kdot: [
+        { title: "Mesh Network", description: "Distributed connectivity that routes around failures", icon: "network" },
+        { title: "Protocol Layer", description: "Universal translation between disparate systems", icon: "protocol" },
+        { title: "Node Discovery", description: "Automatic peer detection and topology mapping", icon: "discovery" },
+    ],
+    aegis: [
+        { title: "Threat Detection", description: "Real-time monitoring for anomalous patterns", icon: "shield" },
+        { title: "Access Control", description: "Fine-grained permissions and authentication flows", icon: "lock" },
+        { title: "Audit Trail", description: "Immutable logs of every action and decision", icon: "log" },
+    ],
+    providence: [
+        { title: "Threat Intelligence", description: "Predictive analysis and proactive defense postures", icon: "radar" },
+        { title: "Incident Response", description: "Automated containment and remediation workflows", icon: "alert" },
+        { title: "Compliance Engine", description: "Continuous verification against security frameworks", icon: "certificate" },
+    ],
+};
+function FeatureCard({ title, description, accentColor, index }) {
+    return (_jsxs(motion.article, { initial: { opacity: 0, y: 40 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: "-100px" }, transition: {
+            duration: 0.6,
+            delay: index * 0.15,
+            ease: [0.22, 1, 0.36, 1]
+        }, className: "group relative p-8 bg-zinc-900/80 backdrop-blur-sm border border-zinc-800 hover:border-zinc-700 transition-colors duration-300", children: [_jsx("div", { className: "absolute top-0 left-0 w-1 h-0 group-hover:h-full transition-all duration-500", style: { backgroundColor: accentColor } }), _jsx("h3", { className: "font-serif text-2xl text-white mb-3 tracking-wide", children: title }), _jsx("p", { className: "text-zinc-400 leading-relaxed", children: description })] }));
+}
+export function FeatureCardsSection({ clusterId, config }) {
+    const features = FEATURE_DATA[clusterId];
+    return (_jsx("section", { className: "relative z-10 bg-zinc-950 py-32 px-16", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs(motion.header, { initial: { opacity: 0, y: 20 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true }, transition: { duration: 0.6 }, className: "mb-16", children: [_jsx("span", { className: "font-mono text-xs uppercase tracking-[0.2em]", style: { color: config.accentColor }, children: "Capabilities" }), _jsxs("h2", { className: "font-serif text-5xl text-white mt-4 tracking-wide", children: ["What defines ", config.name] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: features.map((feature, index) => (_jsx(FeatureCard, { title: feature.title, description: feature.description, accentColor: config.accentColor, index: index }, feature.title))) })] }) }));
+}
+// ============================================================================
+// Cluster Stats Section
+// ============================================================================
+const STATS_DATA = {
+    alexandria: [
+        { value: "2.4M", label: "Documents Indexed" },
+        { value: "847K", label: "Active Queries/Day" },
+        { value: "99.97%", label: "Uptime" },
+        { value: "12ms", label: "Avg Response" },
+    ],
+    alpha: [
+        { value: "1.0", label: "Protocol Version" },
+        { value: "∞", label: "Scalability" },
+        { value: "100%", label: "Backwards Compatible" },
+        { value: "0", label: "Breaking Changes" },
+    ],
+    opus: [
+        { value: "2.4M", label: "Diagnostics Processed" },
+        { value: "847", label: "Active Protocols" },
+        { value: "99.97%", label: "Compliance Rate" },
+        { value: "< 2s", label: "Analysis Latency" },
+    ],
+    baia: [
+        { value: "4.2M", label: "Works Generated" },
+        { value: "156K", label: "Active Artists" },
+        { value: "847K", label: "Daily Renders" },
+        { value: "12TB", label: "Media Produced" },
+    ],
+    kdot: [
+        { value: "1.2M", label: "Connected Nodes" },
+        { value: "47ms", label: "Avg Latency" },
+        { value: "99.99%", label: "Uptime" },
+        { value: "8.4PB", label: "Daily Throughput" },
+    ],
+    aegis: [
+        { value: "0", label: "Breaches" },
+        { value: "2.1B", label: "Threats Blocked" },
+        { value: "99.97%", label: "Detection Rate" },
+        { value: "< 1s", label: "Response Time" },
+    ],
+    providence: [
+        { value: "24/7", label: "Monitoring" },
+        { value: "847K", label: "Threats Analyzed" },
+        { value: "99.99%", label: "Uptime" },
+        { value: "< 50ms", label: "Alert Latency" },
+    ],
+};
+function StatBlock({ value, label, accentColor, index }) {
+    return (_jsxs(motion.div, { initial: { opacity: 0, scale: 0.9 }, whileInView: { opacity: 1, scale: 1 }, viewport: { once: true, margin: "-50px" }, transition: {
+            duration: 0.5,
+            delay: index * 0.1,
+            ease: [0.22, 1, 0.36, 1]
+        }, className: "text-center p-8", children: [_jsx("div", { className: "font-mono text-5xl md:text-6xl font-light mb-3", style: { color: accentColor }, children: value }), _jsx("div", { className: "text-zinc-500 uppercase tracking-[0.15em] text-sm", children: label })] }));
+}
+export function ClusterStatsSection({ clusterId, config }) {
+    const stats = STATS_DATA[clusterId];
+    return (_jsx("section", { className: "relative z-10 bg-black py-32 px-16", children: _jsxs("div", { className: "max-w-6xl mx-auto", children: [_jsx(motion.div, { initial: { scaleX: 0 }, whileInView: { scaleX: 1 }, viewport: { once: true }, transition: { duration: 1, ease: [0.22, 1, 0.36, 1] }, className: "h-px mb-16 origin-left", style: { backgroundColor: config.accentColor } }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8", children: stats.map((stat, index) => (_jsx(StatBlock, { value: stat.value, label: stat.label, accentColor: config.accentColor, index: index }, stat.label))) }), _jsx(motion.div, { initial: { scaleX: 0 }, whileInView: { scaleX: 1 }, viewport: { once: true }, transition: { duration: 1, ease: [0.22, 1, 0.36, 1] }, className: "h-px mt-16 origin-right", style: { backgroundColor: config.accentColor } })] }) }));
+}
+// ============================================================================
+// CTA Section
+// ============================================================================
+const CTA_DATA = {
+    alexandria: {
+        headline: "Begin your research",
+        subtext: "Join thousands of scholars building the world's knowledge commons",
+        buttonLabel: "Enter Alexandria",
+    },
+    alpha: {
+        headline: "Start from the source",
+        subtext: "Everything begins here. Every journey starts with Alpha.",
+        buttonLabel: "Initialize",
+    },
+    opus: {
+        headline: "Healthcare, autonomous",
+        subtext: "Diagnostic pipelines and care protocols that run themselves.",
+        buttonLabel: "Enter Opus",
+    },
+    baia: {
+        headline: "Art from the machine",
+        subtext: "Generative works that blur the line between human and artificial creativity.",
+        buttonLabel: "Open Studio",
+    },
+    kdot: {
+        headline: "Join the mesh",
+        subtext: "Connect to the network that never sleeps.",
+        buttonLabel: "Connect Now",
+    },
+    aegis: {
+        headline: "Secure your realm",
+        subtext: "Protection that scales with your ambition.",
+        buttonLabel: "Activate Shield",
+    },
+    providence: {
+        headline: "Foresee. Prevent. Prevail.",
+        subtext: "Security through foresight. Protection before the threat arrives.",
+        buttonLabel: "Enter Providence",
+    },
+};
+export function CTASection({ clusterId, config }) {
+    const cta = CTA_DATA[clusterId];
+    return (_jsx("section", { className: "relative z-10 bg-zinc-950 py-48 px-16", children: _jsxs(motion.div, { initial: { opacity: 0, y: 60 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: "-100px" }, transition: { duration: 0.8, ease: [0.22, 1, 0.36, 1] }, className: "max-w-4xl mx-auto text-center", children: [_jsx("h2", { className: "font-serif text-6xl md:text-7xl text-white tracking-wide mb-8 leading-[1.1]", children: cta.headline }), _jsx("p", { className: "text-xl text-zinc-400 mb-12 max-w-2xl mx-auto leading-relaxed", children: cta.subtext }), _jsx("a", { href: `/clusters/${clusterId}`, className: "inline-block px-12 py-5 text-lg font-medium tracking-wider uppercase text-black transition-all duration-300 hover:brightness-110 hover:scale-105", style: { backgroundColor: config.accentColor }, children: cta.buttonLabel })] }) }));
+}
+// ============================================================================
+// Main ClusterHeroPage Component
+// ============================================================================
+/**
+ * ClusterHeroPage composes a full landing page experience for a cluster.
+ *
+ * Structure:
+ * - Sticky hero (100vh) with scroll-based parallax and dimming
+ * - Feature cards section scrolling over the hero
+ * - Stats section with animated counters
+ * - CTA section with final call to action
+ *
+ * The hero uses sticky positioning so it remains as a background while
+ * subsequent sections with solid backgrounds scroll over it.
+ */
+export function ClusterHeroPage({ clusterId, className }) {
+    const containerRef = useRef(null);
+    const config = getClusterConfigWithResolvedUrls(clusterId);
+    const { scrollYProgress } = useScroll({
+        target: containerRef,
+        offset: ["start start", "end start"],
+    });
+    // Hero dims from opacity 1 to 0.3 as you scroll through first 20% of page
+    const heroOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0.3]);
+    // Content has subtle parallax - moves up slower than scroll
+    const heroY = useTransform(scrollYProgress, [0, 0.3], [0, -100]);
+    return (_jsxs("main", { ref: containerRef, className: cn("relative scroll-smooth", className), children: [_jsx(motion.div, { className: "sticky top-0 h-screen overflow-hidden", style: { opacity: heroOpacity }, children: _jsx(motion.div, { style: { y: heroY }, className: "h-full", children: _jsx(ClusterHero, { cluster: clusterId, className: "h-full" }) }) }), _jsxs("div", { className: "relative", children: [_jsx(FeatureCardsSection, { clusterId: clusterId, config: config }), _jsx(ClusterStatsSection, { clusterId: clusterId, config: config }), _jsx(CTASection, { clusterId: clusterId, config: config })] })] }));
+}
+export default ClusterHeroPage;

package/dist/components/ClusterHero/ClusterRail.d.ts

@@ -0,0 +1,13 @@
+import type { ClusterRailProps } from "./types.js";
+/**
+ * ClusterRail renders the bottom-left cluster identity panel with:
+ * - Cluster name in small caps with wide tracking
+ * - Italic tagline at reduced opacity
+ * - Metrics row with dot separators (monospace)
+ * - Vertically stacked CTA buttons (primary/secondary/ghost)
+ *
+ * Uses CSS variable --cluster-accent for theming.
+ */
+export declare function ClusterRail({ name, tagline, metrics, buttons, accentColor, className, }: ClusterRailProps): import("react/jsx-runtime").JSX.Element;
+export default ClusterRail;
+//# sourceMappingURL=ClusterRail.d.ts.map

package/dist/components/ClusterHero/ClusterRail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClusterRail.d.ts","sourceRoot":"","sources":["../../../src/components/ClusterHero/ClusterRail.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAgB,MAAM,YAAY,CAAC;AAuIjE;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,SAAS,GACV,EAAE,gBAAgB,2CAmBlB;AAED,eAAe,WAAW,CAAC"}

package/dist/components/ClusterHero/ClusterRail.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { cn } from "../../lib/utils";
+// ============================================================================
+// Animation Variants
+// ============================================================================
+const fadeUpVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 },
+};
+const fadeUpTransition = {
+    duration: 0.6,
+    ease: [0.22, 1, 0.36, 1],
+};
+const staggerContainer = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.12,
+            delayChildren: 0.1,
+        },
+    },
+};
+// ============================================================================
+// Sub-components
+// ============================================================================
+function ClusterName({ name }) {
+    return (_jsx(motion.h2, { variants: fadeUpVariants, className: "text-4xl md:text-5xl lg:text-6xl font-semibold uppercase text-white", style: {
+            fontVariant: "small-caps",
+            letterSpacing: "0.12em",
+        }, children: name }));
+}
+function Tagline({ text }) {
+    return (_jsx(motion.p, { variants: fadeUpVariants, className: "text-lg md:text-xl text-white/70 font-light italic leading-relaxed mt-3", children: text }));
+}
+function MetricsRow({ metrics, }) {
+    const formattedRealms = metrics.realms.toLocaleString();
+    return (_jsxs(motion.div, { variants: fadeUpVariants, className: "flex items-center gap-2 font-mono text-xs text-white/50 mt-4 tracking-wide", children: [_jsxs("span", { children: [formattedRealms, " realms"] }), _jsx("span", { className: "text-white/30", children: "\u2022" }), _jsxs("span", { children: [metrics.output24h, " output"] }), metrics.rank !== undefined && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-white/30", children: "\u2022" }), _jsxs("span", { children: ["Rank #", metrics.rank] })] }))] }));
+}
+function RailButton({ button }) {
+    const baseClasses = "w-full px-6 py-3 text-sm font-medium tracking-wider uppercase transition-all duration-300 text-center";
+    const variantClasses = {
+        primary: "text-black hover:brightness-110 hover:scale-[1.02]",
+        secondary: "bg-transparent border hover:bg-[var(--cluster-accent)]/10",
+        ghost: "bg-transparent border-none text-white/50 hover:text-white/80",
+    };
+    const variantStyles = {
+        primary: {
+            backgroundColor: "var(--cluster-accent)",
+        },
+        secondary: {
+            borderColor: "var(--cluster-accent)",
+            color: "var(--cluster-accent)",
+        },
+        ghost: {},
+    };
+    return (_jsx(motion.a, { variants: fadeUpVariants, href: button.href, className: cn(baseClasses, variantClasses[button.variant]), style: variantStyles[button.variant], ...(button.external && {
+            target: "_blank",
+            rel: "noopener noreferrer",
+        }), children: button.label }));
+}
+function ButtonStack({ buttons }) {
+    return (_jsx("div", { className: "flex flex-col gap-3 mt-8 w-full max-w-xs", children: buttons.map((button) => (_jsx(RailButton, { button: button }, button.label))) }));
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+/**
+ * ClusterRail renders the bottom-left cluster identity panel with:
+ * - Cluster name in small caps with wide tracking
+ * - Italic tagline at reduced opacity
+ * - Metrics row with dot separators (monospace)
+ * - Vertically stacked CTA buttons (primary/secondary/ghost)
+ *
+ * Uses CSS variable --cluster-accent for theming.
+ */
+export function ClusterRail({ name, tagline, metrics, buttons, accentColor, className, }) {
+    return (_jsxs(motion.aside, { variants: staggerContainer, initial: "hidden", animate: "visible", className: cn("flex flex-col items-start", className), style: {
+            "--cluster-accent": accentColor,
+        }, children: [_jsx(ClusterName, { name: name }), _jsx(Tagline, { text: tagline }), _jsx(MetricsRow, { metrics: metrics }), _jsx(ButtonStack, { buttons: buttons })] }));
+}
+export default ClusterRail;

package/dist/components/ClusterHero/GradientVeil.d.ts

@@ -0,0 +1,11 @@
+export interface GradientVeilProps {
+    className?: string;
+    /** Intensity of the gradient (0-1, default 1) */
+    intensity?: number;
+}
+/**
+ * A bottom-anchored gradient overlay for text legibility over video backgrounds.
+ * The gradient fades from opaque black at the bottom to transparent at the top.
+ */
+export declare function GradientVeil({ className, intensity }: GradientVeilProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GradientVeil.d.ts.map

package/dist/components/ClusterHero/GradientVeil.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientVeil.d.ts","sourceRoot":"","sources":["../../../src/components/ClusterHero/GradientVeil.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,SAAa,EAAE,EAAE,iBAAiB,2CAoB3E"}

package/dist/components/ClusterHero/GradientVeil.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+/**
+ * A bottom-anchored gradient overlay for text legibility over video backgrounds.
+ * The gradient fades from opaque black at the bottom to transparent at the top.
+ */
+export function GradientVeil({ className, intensity = 1 }) {
+    // Scale alpha values by intensity
+    const a1 = (0.85 * intensity).toFixed(2);
+    const a2 = (0.5 * intensity).toFixed(2);
+    const a3 = (0.2 * intensity).toFixed(2);
+    return (_jsx("div", { className: cn("absolute inset-0 pointer-events-none", className), style: {
+            background: `linear-gradient(
+          to top,
+          rgba(0, 0, 0, ${a1}) 0%,
+          rgba(0, 0, 0, ${a2}) 30%,
+          rgba(0, 0, 0, ${a3}) 50%,
+          transparent 70%
+        )`,
+        } }));
+}

package/dist/components/ClusterHero/HeroContent.d.ts

@@ -0,0 +1,14 @@
+import type { ClusterConfig } from "./types.js";
+export interface HeroContentProps {
+    /** Cluster configuration containing name, tagline, buttons, and accent color */
+    config: ClusterConfig;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * HeroContent renders the text overlay for the ClusterHero component.
+ * Includes the badge, title, tagline, and action buttons with staggered
+ * fade-up animations on load.
+ */
+export declare function HeroContent({ config, className }: HeroContentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HeroContent.d.ts.map

package/dist/components/ClusterHero/HeroContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroContent.d.ts","sourceRoot":"","sources":["../../../src/components/ClusterHero/HeroContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAgB,MAAM,YAAY,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,gFAAgF;IAChF,MAAM,EAAE,aAAa,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgHD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAelE"}

package/dist/components/ClusterHero/HeroContent.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { cn } from "../../lib/utils";
+const fadeUpVariants = {
+    hidden: { opacity: 0, y: 24 },
+    visible: { opacity: 1, y: 0 },
+};
+const fadeUpTransition = {
+    duration: 0.7,
+    ease: [0.22, 1, 0.36, 1], // Custom ease-out curve
+};
+function ClusterBadge({ delay }) {
+    return (_jsxs(motion.div, { variants: fadeUpVariants, initial: "hidden", animate: "visible", transition: { ...fadeUpTransition, delay }, className: "mb-6", children: [_jsx("span", { className: "font-mono text-xs uppercase tracking-[0.2em] text-white/80", children: "CLUSTERS" }), _jsx("div", { className: "mt-2 h-px w-12", style: { backgroundColor: "var(--cluster-accent)" } })] }));
+}
+function ClusterTitle({ name, delay }) {
+    return (_jsx(motion.h1, { variants: fadeUpVariants, initial: "hidden", animate: "visible", transition: { ...fadeUpTransition, delay }, className: "font-serif text-7xl md:text-8xl uppercase tracking-[0.15em] text-white mb-6 leading-[0.9]", children: name }));
+}
+function Tagline({ text, delay }) {
+    return (_jsx(motion.p, { variants: fadeUpVariants, initial: "hidden", animate: "visible", transition: { ...fadeUpTransition, delay }, className: "font-serif text-xl md:text-2xl text-white/70 max-w-md italic mb-10 leading-relaxed", children: text }));
+}
+function HeroButton({ button }) {
+    const baseClasses = "px-6 py-3 text-sm font-medium tracking-wider uppercase transition-all duration-300";
+    const variantClasses = {
+        primary: "text-black hover:brightness-110",
+        secondary: "border hover:bg-[var(--cluster-accent)]/10",
+        ghost: "border border-white/20 text-white/70 hover:border-white/40 hover:text-white",
+    };
+    const variantStyles = {
+        primary: { backgroundColor: "var(--cluster-accent)" },
+        secondary: {
+            borderColor: "var(--cluster-accent)",
+            color: "var(--cluster-accent)",
+        },
+        ghost: {},
+    };
+    return (_jsx("a", { href: button.href, className: cn(baseClasses, variantClasses[button.variant]), style: variantStyles[button.variant], children: button.label }));
+}
+function ButtonGroup({ buttons, delay, }) {
+    return (_jsx(motion.div, { variants: fadeUpVariants, initial: "hidden", animate: "visible", transition: { ...fadeUpTransition, delay }, className: "flex flex-wrap gap-4", children: buttons.map((button) => (_jsx(HeroButton, { button: button }, button.label))) }));
+}
+/**
+ * HeroContent renders the text overlay for the ClusterHero component.
+ * Includes the badge, title, tagline, and action buttons with staggered
+ * fade-up animations on load.
+ */
+export function HeroContent({ config, className }) {
+    return (_jsxs("div", { className: cn("absolute bottom-0 left-0 pb-20 pl-16 z-10", className), style: { "--cluster-accent": config.accentColor }, children: [_jsx(ClusterBadge, { delay: 0.2 }), _jsx(ClusterTitle, { name: config.name, delay: 0.4 }), _jsx(Tagline, { text: config.tagline, delay: 0.6 }), _jsx(ButtonGroup, { buttons: config.buttons, delay: 0.8 })] }));
+}

package/dist/components/ClusterHero/LiveStrip.d.ts

@@ -0,0 +1,8 @@
+import type { LiveStripProps } from "./types.js";
+/**
+ * LiveStrip renders a single horizontal activity strip with a contextual
+ * icon, message text, and an animated arrow indicator.
+ */
+export declare function LiveStrip({ moduleType, content, accentColor, className, }: LiveStripProps): import("react/jsx-runtime").JSX.Element;
+export default LiveStrip;
+//# sourceMappingURL=LiveStrip.d.ts.map

package/dist/components/ClusterHero/LiveStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveStrip.d.ts","sourceRoot":"","sources":["../../../src/components/ClusterHero/LiveStrip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,YAAY,CAAC;AAgBjE;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,UAAU,EACV,OAAO,EACP,WAAW,EACX,SAAS,GACV,EAAE,cAAc,2CAiChB;AAED,eAAe,SAAS,CAAC"}

package/dist/components/ClusterHero/LiveStrip.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, Zap, Vote, Trophy, ArrowRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+const DEFAULT_CONTENT = {
+    market: "3 new blueprints published today",
+    live: "24 active workflows running",
+    governance: "Proposal #18 — Voting ends in 6h",
+    progress: "You minted 4 verified artifacts this week",
+};
+const MODULE_ICONS = {
+    market: FileText,
+    live: Zap,
+    governance: Vote,
+    progress: Trophy,
+};
+/**
+ * LiveStrip renders a single horizontal activity strip with a contextual
+ * icon, message text, and an animated arrow indicator.
+ */
+export function LiveStrip({ moduleType, content, accentColor, className, }) {
+    const Icon = MODULE_ICONS[moduleType];
+    const displayContent = content ?? DEFAULT_CONTENT[moduleType];
+    return (_jsxs("div", { className: cn("group flex items-center gap-3 px-4 py-2.5 rounded-lg bg-white/5 backdrop-blur-sm", "transition-colors duration-200 hover:bg-white/10 cursor-pointer", className), children: [_jsx(Icon, { className: "w-4 h-4 shrink-0 transition-colors duration-200", style: { color: accentColor } }), _jsx("span", { className: "text-sm text-white/80 font-normal flex-1 truncate", children: displayContent }), _jsx(ArrowRight, { className: cn("w-4 h-4 shrink-0 text-white/40", "transition-all duration-200 ease-out", "group-hover:translate-x-1 group-hover:text-white/60") })] }));
+}
+export default LiveStrip;

package/dist/components/ClusterHero/ScrollIndicator.d.ts

@@ -0,0 +1,10 @@
+export interface ScrollIndicatorProps {
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * An animated scroll indicator that hints users to scroll down.
+ * Features a continuous bobbing animation and fades out as the user scrolls.
+ */
+export declare function ScrollIndicator({ className }: ScrollIndicatorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ScrollIndicator.d.ts.map

package/dist/components/ClusterHero/ScrollIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/ClusterHero/ScrollIndicator.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB;IACnC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CA2BlE"}

package/dist/components/ClusterHero/ScrollIndicator.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+/**
+ * An animated scroll indicator that hints users to scroll down.
+ * Features a continuous bobbing animation and fades out as the user scrolls.
+ */
+export function ScrollIndicator({ className }) {
+    const { scrollY } = useScroll();
+    const opacity = useTransform(scrollY, [0, 100], [1, 0]);
+    return (_jsx(motion.div, { className: cn("absolute bottom-8 left-1/2 -translate-x-1/2 pointer-events-none", className), style: { opacity }, children: _jsx(motion.div, { animate: { y: [0, 8, 0] }, transition: {
+                duration: 1.5,
+                repeat: Infinity,
+                ease: "easeInOut",
+            }, children: _jsx(ChevronDown, { className: "w-8 h-8 text-white/50", strokeWidth: 1.5 }) }) }));
+}

package/dist/components/ClusterHero/SigilMonument.d.ts

@@ -0,0 +1,13 @@
+import type { SigilMonumentProps } from "./types.js";
+/**
+ * SigilMonument renders a large cluster sigil/emblem with parallax effect.
+ *
+ * Features:
+ * - Large sigil image (35-45% viewport height)
+ * - 2-6px parallax drift on mouse movement
+ * - Subtle CSS shimmer animation (10s cycle)
+ * - Plaque below with cluster name, tagline, and optional Latin motto
+ */
+export declare function SigilMonument({ name, tagline, latinMotto, sigilSrc, accentColor, className, }: SigilMonumentProps): import("react/jsx-runtime").JSX.Element;
+export default SigilMonument;
+//# sourceMappingURL=SigilMonument.d.ts.map

package/dist/components/ClusterHero/SigilMonument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SigilMonument.d.ts","sourceRoot":"","sources":["../../../src/components/ClusterHero/SigilMonument.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,SAAS,GACV,EAAE,kBAAkB,2CA0KpB;AAED,eAAe,aAAa,CAAC"}

package/dist/components/ClusterHero/SigilMonument.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useId, useState } from "react";
+import { motion, useMotionValue, useTransform, useSpring, } from "framer-motion";
+import { cn } from "../../lib/utils";
+/**
+ * SigilMonument renders a large cluster sigil/emblem with parallax effect.
+ *
+ * Features:
+ * - Large sigil image (35-45% viewport height)
+ * - 2-6px parallax drift on mouse movement
+ * - Subtle CSS shimmer animation (10s cycle)
+ * - Plaque below with cluster name, tagline, and optional Latin motto
+ */
+export function SigilMonument({ name, tagline, latinMotto, sigilSrc, accentColor, className, }) {
+    const containerRef = useRef(null);
+    const styleId = useId();
+    const [sigilFailed, setSigilFailed] = useState(false);
+    const initials = useMemo(() => {
+        const parts = name.trim().split(/\s+/).filter(Boolean);
+        const letters = parts.map((p) => p[0] ?? "").join("");
+        return letters.slice(0, 2).toUpperCase() || name.slice(0, 2).toUpperCase();
+    }, [name]);
+    useEffect(() => {
+        setSigilFailed(false);
+    }, [sigilSrc]);
+    // Mouse position tracking for parallax
+    const mouseX = useMotionValue(0);
+    const mouseY = useMotionValue(0);
+    // Spring-smoothed parallax offsets (2-6px range)
+    const springConfig = { damping: 25, stiffness: 150 };
+    const parallaxX = useSpring(useTransform(mouseX, [-1, 1], [-4, 4]), springConfig);
+    const parallaxY = useSpring(useTransform(mouseY, [-1, 1], [-4, 4]), springConfig);
+    const handleMouseMove = (e) => {
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        // Normalize to -1 to 1 range
+        const normalizedX = (e.clientX - centerX) / (rect.width / 2);
+        const normalizedY = (e.clientY - centerY) / (rect.height / 2);
+        mouseX.set(Math.max(-1, Math.min(1, normalizedX)));
+        mouseY.set(Math.max(-1, Math.min(1, normalizedY)));
+    };
+    const handleMouseLeave = () => {
+        mouseX.set(0);
+        mouseY.set(0);
+    };
+    // Unique class name for scoped keyframes
+    const shimmerClass = `sigil-shimmer-${styleId.replace(/:/g, "")}`;
+    return (_jsxs("div", { ref: containerRef, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, className: cn("relative flex flex-col items-center justify-center", className), style: { "--sigil-accent": accentColor }, children: [_jsx("style", { dangerouslySetInnerHTML: {
+                    __html: `
+            @keyframes ${shimmerClass}-anim {
+              0% { background-position: 200% 0; }
+              100% { background-position: -200% 0; }
+            }
+            .${shimmerClass} {
+              animation: ${shimmerClass}-anim 10s ease-in-out infinite;
+            }
+          `,
+                } }), _jsxs(motion.div, { className: "relative", style: {
+                    x: parallaxX,
+                    y: parallaxY,
+                }, children: [_jsx("div", { className: "absolute inset-0 pointer-events-none overflow-hidden", "aria-hidden": "true", children: _jsx("div", { className: `absolute inset-0 ${shimmerClass}`, style: {
+                                background: `linear-gradient(
+                105deg,
+                transparent 40%,
+                ${accentColor}15 45%,
+                ${accentColor}25 50%,
+                ${accentColor}15 55%,
+                transparent 60%
+              )`,
+                                backgroundSize: "200% 100%",
+                            } }) }), !sigilFailed && sigilSrc ? (_jsx("img", { src: sigilSrc, alt: `${name} sigil`, className: "h-[35vh] min-h-[280px] max-h-[45vh] w-auto object-contain drop-shadow-2xl", style: {
+                            filter: `drop-shadow(0 0 60px ${accentColor}40)`,
+                        }, onError: () => setSigilFailed(true) })) : (_jsx("div", { className: "h-[35vh] min-h-[280px] max-h-[45vh] aspect-square rounded-full flex items-center justify-center", style: {
+                            background: `radial-gradient(circle at 30% 30%, ${accentColor}35, transparent 65%), radial-gradient(circle at 70% 80%, ${accentColor}18, transparent 60%), rgba(255,255,255,0.02)`,
+                            border: `1px solid ${accentColor}40`,
+                            boxShadow: `0 0 60px ${accentColor}30, inset 0 0 40px rgba(255,255,255,0.08)`,
+                            filter: `drop-shadow(0 0 60px ${accentColor}40)`,
+                        }, "aria-hidden": "true", children: _jsx("div", { className: "font-serif text-6xl text-white/70 tracking-[0.18em]", style: { textShadow: `0 0 30px ${accentColor}30` }, children: initials }) }))] }), _jsxs("div", { className: "mt-10 text-center", children: [_jsx("h2", { className: "font-serif text-3xl md:text-4xl text-white/95 mb-3", style: {
+                            fontVariant: "small-caps",
+                            letterSpacing: "0.12em",
+                        }, children: name }), _jsx("p", { className: "font-serif text-lg md:text-xl text-white/60 italic max-w-md leading-relaxed", children: tagline }), latinMotto && (_jsx("p", { className: "mt-4 font-mono text-[10px] uppercase tracking-[0.2em] text-white/30", "aria-label": "Latin motto", children: latinMotto }))] })] }));
+}
+export default SigilMonument;

package/dist/components/ClusterHero/StructuralElements.d.ts

@@ -0,0 +1,8 @@
+import type { StructuralElementsProps } from "./types.js";
+export type { StructuralElementsProps } from "./types.js";
+/**
+ * Atmospheric structural elements for ClusterHero.
+ * Renders corner brackets, radial vignette, and subtle dot grid overlay.
+ */
+export declare function StructuralElements({ accentColor, className, }: StructuralElementsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StructuralElements.d.ts.map

package/dist/components/ClusterHero/StructuralElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StructuralElements.d.ts","sourceRoot":"","sources":["../../../src/components/ClusterHero/StructuralElements.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EACX,SAAS,GACV,EAAE,uBAAuB,2CAqBzB"}