@backbay/glia 0.2.0-alpha.6 → 0.2.0-alpha.8

package/dist/components/index.js

@@ -1,12 +1,3189 @@
-export { CLUSTER_CONFIGS, ClusterHero, ClusterHeroPage, getClusterConfig } from '../chunk-R7HUOK2D.js';
-export { AgentPanel, PlaySession, SyncDocument } from '../chunk-EPAM7IWW.js';
-import '../chunk-YIUG7IJK.js';
-export { BBProvider, useBBContext, useBBContextOptional } from '../chunk-Q2XDMV7U.js';
-import '../chunk-F4QTUZ3C.js';
-import '../chunk-VITKG2HL.js';
-import '../chunk-6RX2WGCO.js';
-import '../chunk-3CMPQOMY.js';
-import '../chunk-OBZD2M3C.js';
-import '../chunk-TM6AOUSD.js';
+import * as React3 from 'react';
+import { createContext, useState, useMemo, useCallback, useContext, useRef, useEffect, Component, useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useReducedMotion, motion, useScroll, useTransform, AnimatePresence, useMotionValue, useSpring } from 'framer-motion';
+import { Trophy, Vote, Zap, FileText, ArrowRight } from 'lucide-react';
+
+// src/components/BBProvider.tsx
+var ErrorBoundaryContext = createContext(null);
+function ErrorThrower({ children }) {
+  const [error, setError] = useState(null);
+  if (error) {
+    throw error;
+  }
+  const throwError = useCallback((err) => {
+    setError(err);
+  }, []);
+  return /* @__PURE__ */ jsx(ErrorBoundaryContext.Provider, { value: { throwError }, children });
+}
+function DefaultFallback({
+  error,
+  reset,
+  variant = "card"
+}) {
+  const isFullscreen = variant === "fullscreen";
+  const isInline = variant === "inline";
+  const containerStyle = isFullscreen ? {
+    position: "fixed",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    background: "rgba(0, 0, 0, 0.6)",
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)"
+  } : isInline ? {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "4px 8px",
+    borderRadius: 6,
+    background: "rgba(255, 60, 60, 0.08)",
+    border: "1px solid rgba(255, 60, 60, 0.2)"
+  } : {};
+  const cardStyle = {
+    background: "rgba(20, 20, 30, 0.85)",
+    backdropFilter: "blur(16px)",
+    WebkitBackdropFilter: "blur(16px)",
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    borderRadius: 12,
+    padding: isInline ? void 0 : "24px 28px",
+    maxWidth: isFullscreen ? 480 : "100%",
+    width: isFullscreen ? "90%" : void 0,
+    color: "rgba(255, 255, 255, 0.9)",
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  };
+  if (isInline) {
+    return /* @__PURE__ */ jsxs("span", { style: containerStyle, children: [
+      /* @__PURE__ */ jsxs("span", { style: { color: "rgba(255, 100, 100, 0.9)", fontSize: 12 }, children: [
+        "Error: ",
+        error.message
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: reset,
+          style: {
+            background: "none",
+            border: "none",
+            color: "rgba(100, 180, 255, 0.9)",
+            cursor: "pointer",
+            fontSize: 12,
+            textDecoration: "underline",
+            padding: 0
+          },
+          children: "Retry"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { style: containerStyle, children: /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "rgba(255, 100, 100, 0.9)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 15 }, children: "Something went wrong" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { style: { color: "rgba(255, 255, 255, 0.5)", fontSize: 13, lineHeight: 1.5, margin: "0 0 16px", wordBreak: "break-word" }, children: error.message }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: reset,
+        style: {
+          background: "rgba(255, 255, 255, 0.08)",
+          border: "1px solid rgba(255, 255, 255, 0.12)",
+          borderRadius: 8,
+          padding: "8px 16px",
+          color: "rgba(255, 255, 255, 0.9)",
+          cursor: "pointer",
+          fontSize: 13,
+          fontWeight: 500,
+          transition: "background 0.15s"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.background = "rgba(255, 255, 255, 0.14)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "rgba(255, 255, 255, 0.08)";
+        },
+        children: "Try again"
+      }
+    )
+  ] }) });
+}
+var GliaErrorBoundary = class extends Component {
+  static displayName = "GliaErrorBoundary";
+  autoRetryTimer = null;
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+    if (this.props.autoRetryMs && this.props.autoRetryMs > 0) {
+      this.autoRetryTimer = setTimeout(() => {
+        this.reset();
+      }, this.props.autoRetryMs);
+    }
+  }
+  componentWillUnmount() {
+    if (this.autoRetryTimer) {
+      clearTimeout(this.autoRetryTimer);
+    }
+  }
+  reset = () => {
+    if (this.autoRetryTimer) {
+      clearTimeout(this.autoRetryTimer);
+      this.autoRetryTimer = null;
+    }
+    this.setState({ error: null });
+  };
+  render() {
+    const { error } = this.state;
+    const { children, fallback, variant = "card" } = this.props;
+    if (error) {
+      if (typeof fallback === "function") {
+        return fallback({ error, reset: this.reset });
+      }
+      if (fallback !== void 0) {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsx(DefaultFallback, { error, reset: this.reset, variant });
+    }
+    return /* @__PURE__ */ jsx(ErrorThrower, { children });
+  }
+};
+var BBContext = createContext(null);
+function BBProvider({
+  children,
+  config,
+  agents = [],
+  initialSyncStatus = "synced"
+}) {
+  const [activeRuns, setActiveRuns] = useState([]);
+  const [runHistory, setRunHistory] = useState([]);
+  const [syncStatus, setSyncStatus] = useState(initialSyncStatus);
+  const totalCost = useMemo(() => {
+    return runHistory.reduce((sum, run) => sum + (run.cost ?? 0), 0);
+  }, [runHistory]);
+  const addRun = useCallback((run) => {
+    setActiveRuns((prev) => [...prev, run]);
+    setRunHistory((prev) => [...prev, run]);
+  }, []);
+  const updateRun = useCallback((runId, updates) => {
+    const updateInList = (runs) => runs.map((run) => run.id === runId ? { ...run, ...updates } : run);
+    setActiveRuns((prev) => {
+      const updated = updateInList(prev);
+      return updated.filter(
+        (run) => run.status === "idle" || run.status === "running"
+      );
+    });
+    setRunHistory(updateInList);
+  }, []);
+  const getAgent = useCallback(
+    (agentId) => agents.find((a) => a.id === agentId),
+    [agents]
+  );
+  const value = useMemo(
+    () => ({
+      config,
+      agents,
+      activeRuns,
+      runHistory,
+      totalCost,
+      syncStatus,
+      addRun,
+      updateRun,
+      setSyncStatus,
+      getAgent
+    }),
+    [
+      config,
+      agents,
+      activeRuns,
+      runHistory,
+      totalCost,
+      syncStatus,
+      addRun,
+      updateRun,
+      getAgent
+    ]
+  );
+  return /* @__PURE__ */ jsx(BBContext.Provider, { value, children: /* @__PURE__ */ jsx(GliaErrorBoundary, { variant: "fullscreen", children }) });
+}
+function useBBContext() {
+  const context = useContext(BBContext);
+  if (!context) {
+    throw new Error("useBBContext must be used within a BBProvider");
+  }
+  return context;
+}
+function useBBContextOptional() {
+  return useContext(BBContext);
+}
+function stableStringify(value) {
+  if (value === null || typeof value !== "object") {
+    const encoded = JSON.stringify(value);
+    return encoded === void 0 ? "null" : encoded;
+  }
+  if (Array.isArray(value)) {
+    return `[${value.map(stableStringify).join(",")}]`;
+  }
+  const record = value;
+  const keys = Object.keys(record).sort();
+  return `{${keys.map((k) => `${JSON.stringify(k)}:${stableStringify(record[k])}`).join(",")}}`;
+}
+function hashString(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = hash * 16777619 >>> 0;
+  }
+  return hash.toString(36);
+}
+function hashData(value) {
+  return hashString(stableStringify(value));
+}
+function normalizeStoredData(raw) {
+  if (!raw || typeof raw !== "object") return null;
+  const record = raw;
+  if ("data" in record && typeof record.lastModifiedAt === "number" && typeof record.lastSyncedAt === "number" && typeof record.lastSyncedHash === "string") {
+    return record;
+  }
+  if ("data" in record && typeof record.timestamp === "number" && typeof record.version === "number") {
+    const legacy = record;
+    const syncedHash = hashData(legacy.data);
+    return {
+      data: legacy.data,
+      lastModifiedAt: legacy.timestamp,
+      lastSyncedAt: legacy.timestamp,
+      lastSyncedHash: syncedHash
+    };
+  }
+  return null;
+}
+function getStoredData(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return normalizeStoredData(parsed);
+  } catch {
+    return null;
+  }
+}
+function setStoredData(key, record) {
+  localStorage.setItem(key, JSON.stringify(record));
+}
+function useSync({
+  key,
+  endpoint,
+  debounce = 2e3,
+  initialData,
+  fetcher,
+  saver,
+  onConflict,
+  onError,
+  onSync
+}) {
+  const [data, setDataState] = useState(initialData ?? null);
+  const [status, setStatus] = useState("synced");
+  const [pendingChanges, setPendingChanges] = useState(0);
+  const [lastSyncedAt, setLastSyncedAt] = useState(null);
+  const [conflict, setConflict] = useState(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const debounceTimerRef = useRef(null);
+  const isSavingRef = useRef(false);
+  const doFetch = useCallback(
+    async (url) => {
+      if (fetcher) return fetcher(url);
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      return response.json();
+    },
+    [fetcher]
+  );
+  const doSave = useCallback(
+    async (url, payload) => {
+      if (saver) return saver(url, payload);
+      const response = await fetch(url, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload)
+      });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      return response.json();
+    },
+    [saver]
+  );
+  useEffect(() => {
+    const loadInitial = async () => {
+      const stored = getStoredData(key);
+      if (stored) {
+        setDataState(stored.data);
+        const storedSyncedAt = stored.lastSyncedAt > 0 ? stored.lastSyncedAt : null;
+        setLastSyncedAt(storedSyncedAt);
+        const hasLocalChanges = stored.lastModifiedAt > stored.lastSyncedAt;
+        if (hasLocalChanges) {
+          setStatus("pending");
+          setPendingChanges((c) => Math.max(c, 1));
+        }
+      }
+      try {
+        const serverData = await doFetch(endpoint);
+        const remoteTimestamp = Date.now();
+        const remoteHash = hashData(serverData);
+        if (stored) {
+          const hasLocalChanges = stored.lastModifiedAt > stored.lastSyncedAt;
+          const baselineHash = stored.lastSyncedHash || hashData(stored.data);
+          const remoteChangedSinceSync = remoteHash !== baselineHash;
+          if (hasLocalChanges && remoteChangedSinceSync) {
+            const localConflict = {
+              local: stored.data,
+              remote: serverData,
+              localTimestamp: stored.lastModifiedAt,
+              remoteTimestamp
+            };
+            setConflict(localConflict);
+            setStatus("conflict");
+            onConflict?.(localConflict);
+          } else if (!hasLocalChanges) {
+            setDataState(serverData);
+            setStoredData(key, {
+              data: serverData,
+              lastModifiedAt: remoteTimestamp,
+              lastSyncedAt: remoteTimestamp,
+              lastSyncedHash: remoteHash
+            });
+            setLastSyncedAt(remoteTimestamp);
+            setPendingChanges(0);
+            setStatus("synced");
+          } else {
+            setStatus("pending");
+          }
+        } else {
+          setDataState(serverData);
+          setStoredData(key, {
+            data: serverData,
+            lastModifiedAt: remoteTimestamp,
+            lastSyncedAt: remoteTimestamp,
+            lastSyncedHash: remoteHash
+          });
+          setLastSyncedAt(remoteTimestamp);
+          setPendingChanges(0);
+          setStatus("synced");
+        }
+      } catch (error) {
+        setStatus("offline");
+        if (error instanceof Error) {
+          onError?.(error);
+        }
+      }
+      setIsLoaded(true);
+    };
+    loadInitial();
+  }, [key, endpoint, doFetch, onConflict, onError]);
+  const saveToServer = useCallback(async (payload) => {
+    const dataToSave = payload ?? data;
+    if (isSavingRef.current || dataToSave === null) return;
+    isSavingRef.current = true;
+    try {
+      setStatus("pending");
+      const serverData = await doSave(endpoint, dataToSave);
+      const syncedAt = Date.now();
+      const syncedHash = hashData(serverData);
+      setDataState(serverData);
+      setStoredData(key, {
+        data: serverData,
+        lastModifiedAt: syncedAt,
+        lastSyncedAt: syncedAt,
+        lastSyncedHash: syncedHash
+      });
+      setLastSyncedAt(syncedAt);
+      setPendingChanges(0);
+      setStatus("synced");
+      onSync?.(serverData);
+    } catch (error) {
+      setStatus("offline");
+      if (error instanceof Error) {
+        onError?.(error);
+      }
+    } finally {
+      isSavingRef.current = false;
+    }
+  }, [data, endpoint, key, doSave, onSync, onError]);
+  const setData = useCallback(
+    (updater) => {
+      setDataState((prev) => {
+        const newData = typeof updater === "function" ? updater(prev) : updater;
+        const previousStored = getStoredData(key);
+        const now = Date.now();
+        setStoredData(key, {
+          data: newData,
+          lastModifiedAt: now,
+          lastSyncedAt: previousStored?.lastSyncedAt ?? 0,
+          lastSyncedHash: previousStored?.lastSyncedHash ?? ""
+        });
+        setPendingChanges((c) => c + 1);
+        setStatus("pending");
+        if (debounceTimerRef.current) {
+          clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+          saveToServer();
+        }, debounce);
+        return newData;
+      });
+    },
+    [key, debounce, saveToServer]
+  );
+  const forceSave = useCallback(async () => {
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = null;
+    }
+    await saveToServer();
+  }, [saveToServer]);
+  const refresh = useCallback(async () => {
+    try {
+      const serverData = await doFetch(endpoint);
+      const syncedAt = Date.now();
+      const syncedHash = hashData(serverData);
+      setDataState(serverData);
+      setStoredData(key, {
+        data: serverData,
+        lastModifiedAt: syncedAt,
+        lastSyncedAt: syncedAt,
+        lastSyncedHash: syncedHash
+      });
+      setLastSyncedAt(syncedAt);
+      setPendingChanges(0);
+      setConflict(null);
+      setStatus("synced");
+    } catch (error) {
+      setStatus("offline");
+      if (error instanceof Error) {
+        onError?.(error);
+      }
+    }
+  }, [endpoint, key, doFetch, onError]);
+  const resolveConflict = useCallback(
+    async (resolution) => {
+      if (!conflict) return;
+      switch (resolution) {
+        case "keep_local":
+          setDataState(conflict.local);
+          setConflict(null);
+          setStatus("pending");
+          setPendingChanges((c) => Math.max(c, 1));
+          await saveToServer(conflict.local);
+          break;
+        case "use_remote": {
+          const remoteHash = hashData(conflict.remote);
+          setDataState(conflict.remote);
+          setStoredData(key, {
+            data: conflict.remote,
+            lastModifiedAt: conflict.remoteTimestamp,
+            lastSyncedAt: conflict.remoteTimestamp,
+            lastSyncedHash: remoteHash
+          });
+          setLastSyncedAt(conflict.remoteTimestamp);
+          setPendingChanges(0);
+          setConflict(null);
+          setStatus("synced");
+          break;
+        }
+        case "create_copy":
+          setDataState(conflict.local);
+          setConflict(null);
+          setStatus("pending");
+          setPendingChanges((c) => Math.max(c, 1));
+          await saveToServer(conflict.local);
+          break;
+      }
+    },
+    [conflict, key, saveToServer]
+  );
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+  return {
+    data,
+    setData,
+    status,
+    pendingChanges,
+    lastSyncedAt,
+    conflict,
+    resolveConflict,
+    forceSave,
+    refresh,
+    isLoaded
+  };
+}
+function SyncDocument({
+  documentId,
+  endpoint,
+  debounce = 1e3,
+  initialContent,
+  onConflict,
+  onError,
+  onSave,
+  children,
+  fetcher,
+  saver
+}) {
+  const fullEndpoint = `${endpoint}/${documentId}`;
+  const {
+    data,
+    setData,
+    status,
+    pendingChanges,
+    lastSyncedAt,
+    conflict,
+    resolveConflict,
+    forceSave,
+    refresh,
+    isLoaded
+  } = useSync({
+    key: `sync-doc:${documentId}`,
+    endpoint: fullEndpoint,
+    debounce,
+    initialData: initialContent,
+    fetcher,
+    saver,
+    onConflict: onConflict ? (c) => {
+    } : void 0,
+    onError,
+    onSync: onSave
+  });
+  const conflictUI = conflict && onConflict ? onConflict(conflict.local, conflict.remote, resolveConflict) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    conflictUI,
+    children({
+      content: data,
+      setContent: setData,
+      status,
+      lastSaved: lastSyncedAt,
+      pendingChanges,
+      save: forceSave,
+      refresh,
+      isLoaded
+    })
+  ] });
+}
+function useAgentRun(options = {}) {
+  const { onStart, onComplete, onError, onCancel } = options;
+  const { config, addRun, updateRun, getAgent } = useBBContext();
+  const [run, setRun] = useState(null);
+  const [status, setStatus] = useState("idle");
+  const [output, setOutput] = useState(null);
+  const [error, setError] = useState(null);
+  const [cost, setCost] = useState(null);
+  const [latency, setLatency] = useState(null);
+  const abortControllerRef = useRef(null);
+  const start = useCallback(
+    async (agentId, prompt, context) => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+      const runId = `run-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+      const startedAt = Date.now();
+      const newRun = {
+        id: runId,
+        agentId,
+        prompt,
+        context,
+        status: "running",
+        startedAt
+      };
+      setRun(newRun);
+      setStatus("running");
+      setOutput(null);
+      setError(null);
+      setCost(null);
+      setLatency(null);
+      addRun(newRun);
+      onStart?.(newRun);
+      try {
+        const response = await fetch(`${config.apiBaseUrl}/runs`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...config.headers
+          },
+          body: JSON.stringify({
+            agentId,
+            prompt,
+            context
+          }),
+          signal: controller.signal
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const result = await response.json();
+        const completedAt = Date.now();
+        const runLatency = completedAt - startedAt;
+        const agent = getAgent(agentId);
+        const runCost = result.cost ?? agent?.costPerRun ?? 0;
+        const completedRun = {
+          ...newRun,
+          status: "completed",
+          output: result.output,
+          cost: runCost,
+          tokenCount: result.tokenCount,
+          latencyMs: runLatency,
+          completedAt
+        };
+        setRun(completedRun);
+        setStatus("completed");
+        setOutput(result.output);
+        setCost(runCost);
+        setLatency(runLatency);
+        updateRun(runId, completedRun);
+        onComplete?.(completedRun);
+      } catch (err) {
+        if (err instanceof Error && err.name === "AbortError") {
+          const cancelledRun = {
+            ...newRun,
+            status: "cancelled",
+            completedAt: Date.now()
+          };
+          setRun(cancelledRun);
+          setStatus("cancelled");
+          updateRun(runId, cancelledRun);
+          onCancel?.(cancelledRun);
+          return;
+        }
+        const errorMessage = err instanceof Error ? err.message : "Unknown error";
+        const failedRun = {
+          ...newRun,
+          status: "failed",
+          error: errorMessage,
+          completedAt: Date.now()
+        };
+        setRun(failedRun);
+        setStatus("failed");
+        setError(errorMessage);
+        updateRun(runId, failedRun);
+        onError?.(failedRun, err instanceof Error ? err : new Error(errorMessage));
+      } finally {
+        if (abortControllerRef.current === controller) {
+          abortControllerRef.current = null;
+        }
+      }
+    },
+    [config, addRun, updateRun, getAgent, onStart, onComplete, onError, onCancel]
+  );
+  const cancel = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+  return {
+    run,
+    status,
+    output,
+    error,
+    cost,
+    latency,
+    start,
+    cancel,
+    isRunning: status === "running"
+  };
+}
+function AgentPanel({
+  context,
+  quickPrompts = [],
+  onRunStart,
+  onRunComplete,
+  onRunError,
+  showCosts = true,
+  showHistory = true,
+  maxHistory = 10,
+  placeholder = "Enter a prompt...",
+  className,
+  agentFilter,
+  defaultAgent
+}) {
+  const { agents, runHistory, totalCost: globalTotalCost } = useBBContext();
+  const availableAgents = agentFilter ? agents.filter(agentFilter) : agents;
+  const [selectedAgentId, setSelectedAgentId] = useState(
+    defaultAgent ?? availableAgents[0]?.id ?? null
+  );
+  const [prompt, setPrompt] = useState("");
+  const selectedAgent = availableAgents.find((a) => a.id === selectedAgentId) ?? null;
+  const {
+    run: currentRun,
+    status,
+    isRunning,
+    start
+  } = useAgentRun({
+    onStart: onRunStart,
+    onComplete: onRunComplete,
+    onError: onRunError
+  });
+  const panelHistory = runHistory.filter((run) => availableAgents.some((a) => a.id === run.agentId)).slice(0, maxHistory);
+  const panelTotalCost = panelHistory.reduce((sum, run) => sum + (run.cost ?? 0), 0);
+  const estimatedCost = selectedAgent?.costPerRun ?? null;
+  const handleSubmit = useCallback(
+    (e) => {
+      e?.preventDefault();
+      if (!selectedAgentId || !prompt.trim() || isRunning) return;
+      start(selectedAgentId, prompt, context);
+      setPrompt("");
+    },
+    [selectedAgentId, prompt, isRunning, start, context]
+  );
+  const executeQuickPrompt = useCallback(
+    (qp) => {
+      if (!selectedAgentId || isRunning) return;
+      start(selectedAgentId, qp.prompt, context);
+    },
+    [selectedAgentId, isRunning, start, context]
+  );
+  const selectAgent = useCallback((agentId) => {
+    setSelectedAgentId(agentId);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: `bb-agent-panel ${className ?? ""}`, "data-bb-state": status, children: [
+    /* @__PURE__ */ jsx("div", { className: "bb-agent-panel__agents", children: availableAgents.map((agent) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `bb-agent-panel__agent ${agent.id === selectedAgentId ? "bb-agent-panel__agent--selected" : ""}`,
+        onClick: () => selectAgent(agent.id),
+        disabled: isRunning,
+        "data-bb-agent-id": agent.id,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "bb-agent-panel__agent-name", children: agent.name }),
+          showCosts && agent.costPerRun !== void 0 && /* @__PURE__ */ jsxs("span", { className: "bb-agent-panel__agent-cost", children: [
+            "$",
+            agent.costPerRun.toFixed(3)
+          ] })
+        ]
+      },
+      agent.id
+    )) }),
+    quickPrompts.length > 0 && /* @__PURE__ */ jsx("div", { className: "bb-agent-panel__quick-prompts", children: quickPrompts.map((qp, idx) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "bb-agent-panel__quick-prompt",
+        onClick: () => executeQuickPrompt(qp),
+        disabled: isRunning || !selectedAgentId,
+        children: [
+          qp.icon && /* @__PURE__ */ jsx("span", { className: "bb-agent-panel__quick-prompt-icon", children: qp.icon }),
+          /* @__PURE__ */ jsx("span", { className: "bb-agent-panel__quick-prompt-label", children: qp.label })
+        ]
+      },
+      idx
+    )) }),
+    /* @__PURE__ */ jsxs("form", { className: "bb-agent-panel__form", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: "bb-agent-panel__input",
+          value: prompt,
+          onChange: (e) => setPrompt(e.target.value),
+          placeholder,
+          disabled: isRunning || !selectedAgentId,
+          rows: 3,
+          "data-bb-input": "agent-prompt"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "bb-agent-panel__form-footer", children: [
+        showCosts && estimatedCost !== null && /* @__PURE__ */ jsxs("span", { className: "bb-agent-panel__estimate", children: [
+          "Est. $",
+          estimatedCost.toFixed(3)
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            className: "bb-agent-panel__submit",
+            disabled: isRunning || !selectedAgentId || !prompt.trim(),
+            "data-bb-action": "submit-prompt",
+            children: isRunning ? "Running..." : "Run"
+          }
+        )
+      ] })
+    ] }),
+    currentRun && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `bb-agent-panel__status bb-agent-panel__status--${currentRun.status}`,
+        "data-bb-state": currentRun.status,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "bb-agent-panel__status-label", children: [
+            currentRun.status === "running" && "Running...",
+            currentRun.status === "completed" && "Completed",
+            currentRun.status === "failed" && "Failed",
+            currentRun.status === "cancelled" && "Cancelled"
+          ] }),
+          currentRun.status === "completed" && currentRun.output && /* @__PURE__ */ jsx("div", { className: "bb-agent-panel__output", "data-bb-output": "agent-output", children: currentRun.output }),
+          currentRun.status === "failed" && currentRun.error && /* @__PURE__ */ jsx("div", { className: "bb-agent-panel__error", children: currentRun.error })
+        ]
+      }
+    ),
+    showHistory && panelHistory.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bb-agent-panel__history", children: [
+      /* @__PURE__ */ jsx("h4", { className: "bb-agent-panel__history-title", children: "Recent Runs" }),
+      /* @__PURE__ */ jsx("ul", { className: "bb-agent-panel__history-list", children: panelHistory.map((run) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: `bb-agent-panel__history-item bb-agent-panel__history-item--${run.status}`,
+          "data-bb-entity": "run",
+          "data-bb-entity-id": run.id,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "bb-agent-panel__history-agent", "data-bb-field": "agent", children: availableAgents.find((a) => a.id === run.agentId)?.name ?? run.agentId }),
+            /* @__PURE__ */ jsxs("span", { className: "bb-agent-panel__history-prompt", "data-bb-field": "prompt", children: [
+              run.prompt.slice(0, 50),
+              run.prompt.length > 50 && "..."
+            ] }),
+            showCosts && run.cost !== void 0 && /* @__PURE__ */ jsxs("span", { className: "bb-agent-panel__history-cost", "data-bb-field": "cost", children: [
+              "$",
+              run.cost.toFixed(3)
+            ] })
+          ]
+        },
+        run.id
+      )) })
+    ] }),
+    showCosts && /* @__PURE__ */ jsxs("div", { className: "bb-agent-panel__cost-summary", children: [
+      /* @__PURE__ */ jsx("span", { className: "bb-agent-panel__cost-label", children: "Session Total:" }),
+      /* @__PURE__ */ jsxs("span", { className: "bb-agent-panel__cost-value", "data-bb-field": "total-cost", children: [
+        "$",
+        panelTotalCost.toFixed(3)
+      ] })
+    ] })
+  ] });
+}
+function usePlaySession({
+  adapter,
+  autoConnect = false,
+  timeout = 3e4,
+  onConnect,
+  onDisconnect,
+  onRpcResult,
+  onError
+}) {
+  const { config } = useBBContext();
+  const [session, setSession] = useState(null);
+  const [status, setStatus] = useState("disconnected");
+  const [videoTrack, setVideoTrack] = useState(null);
+  const [audioTrack, setAudioTrack] = useState(null);
+  const [error, setError] = useState(null);
+  const wsRef = useRef(null);
+  const rpcIdRef = useRef(0);
+  const pendingCallsRef = useRef(/* @__PURE__ */ new Map());
+  const connect = useCallback(
+    async (options) => {
+      if (status === "connecting" || status === "connected") return;
+      setStatus("connecting");
+      setError(null);
+      const connectTimeout = options?.timeout ?? timeout;
+      try {
+        const response = await fetch(`${config.apiBaseUrl}/play-sessions`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...config.headers
+          },
+          body: JSON.stringify({ adapter })
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const sessionData = await response.json();
+        const newSession = {
+          id: sessionData.id,
+          adapter,
+          capabilityToken: sessionData.capabilityToken,
+          createdAt: Date.now(),
+          expiresAt: sessionData.expiresAt,
+          livekitUrl: sessionData.livekitUrl,
+          livekitToken: sessionData.livekitToken
+        };
+        setSession(newSession);
+        const wsUrl = sessionData.wsUrl ?? `${config.apiBaseUrl.replace("http", "ws")}/play-sessions/${newSession.id}/ws`;
+        const ws = new WebSocket(wsUrl);
+        wsRef.current = ws;
+        await new Promise((resolve, reject) => {
+          const timeoutId = setTimeout(() => {
+            ws.close();
+            reject(new Error("Connection timeout"));
+          }, connectTimeout);
+          ws.onopen = () => {
+            clearTimeout(timeoutId);
+            resolve();
+          };
+          ws.onerror = () => {
+            clearTimeout(timeoutId);
+            reject(new Error("WebSocket connection failed"));
+          };
+        });
+        ws.onmessage = (event) => {
+          try {
+            const message = JSON.parse(event.data);
+            if ("id" in message && pendingCallsRef.current.has(message.id)) {
+              const pending = pendingCallsRef.current.get(message.id);
+              pendingCallsRef.current.delete(message.id);
+              pending.resolve(message);
+              onRpcResult?.(message);
+            }
+          } catch {
+          }
+        };
+        ws.onclose = () => {
+          setStatus("disconnected");
+          setSession(null);
+          wsRef.current = null;
+          onDisconnect?.();
+        };
+        ws.onerror = () => {
+          setError("WebSocket error");
+          onError?.(new Error("WebSocket error"));
+        };
+        if (newSession.livekitUrl && newSession.livekitToken) {
+        }
+        setStatus("connected");
+        onConnect?.(newSession);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Connection failed";
+        setStatus("error");
+        setError(errorMessage);
+        onError?.(err instanceof Error ? err : new Error(errorMessage));
+      }
+    },
+    [adapter, config, status, timeout, onConnect, onDisconnect, onRpcResult, onError]
+  );
+  const disconnect = useCallback(async () => {
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    if (session) {
+      try {
+        await fetch(`${config.apiBaseUrl}/play-sessions/${session.id}`, {
+          method: "DELETE",
+          headers: config.headers
+        });
+      } catch {
+      }
+    }
+    setSession(null);
+    setStatus("disconnected");
+    setVideoTrack(null);
+    setAudioTrack(null);
+    onDisconnect?.();
+  }, [session, config, onDisconnect]);
+  const call = useCallback(
+    (method, params) => {
+      return new Promise((resolve, reject) => {
+        if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+          reject(new Error("Not connected"));
+          return;
+        }
+        const id = ++rpcIdRef.current;
+        const request = {
+          jsonrpc: "2.0",
+          id,
+          method,
+          params: params ?? {}
+        };
+        pendingCallsRef.current.set(id, {
+          resolve,
+          reject
+        });
+        wsRef.current.send(JSON.stringify(request));
+        setTimeout(() => {
+          if (pendingCallsRef.current.has(id)) {
+            pendingCallsRef.current.delete(id);
+            reject(new Error("RPC call timeout"));
+          }
+        }, 3e4);
+      });
+    },
+    []
+  );
+  const observe = useCallback(
+    async (key) => {
+      const response = await call(`observe.${key}`);
+      if (response.error) {
+        throw new Error(response.error.message);
+      }
+      return response.result;
+    },
+    [call]
+  );
+  const act = useCallback(
+    async (action, params) => {
+      const response = await call(`act.${action}`, params);
+      if (response.error) {
+        throw new Error(response.error.message);
+      }
+      return response.result;
+    },
+    [call]
+  );
+  useEffect(() => {
+    if (autoConnect) {
+      connect();
+    }
+  }, [autoConnect]);
+  useEffect(() => {
+    return () => {
+      if (wsRef.current) {
+        wsRef.current.close();
+      }
+    };
+  }, []);
+  return {
+    session,
+    status,
+    videoTrack,
+    audioTrack,
+    call,
+    observe,
+    act,
+    connect,
+    disconnect,
+    isConnected: status === "connected",
+    error
+  };
+}
+function PlaySession({
+  adapter,
+  autoConnect = false,
+  timeout,
+  onSessionStart,
+  onSessionEnd,
+  onRpcResult,
+  onError,
+  children,
+  className
+}) {
+  const videoRef = useRef(null);
+  const {
+    session,
+    status,
+    videoTrack,
+    audioTrack,
+    call,
+    observe,
+    act,
+    connect,
+    disconnect,
+    isConnected,
+    error
+  } = usePlaySession({
+    adapter,
+    autoConnect,
+    timeout,
+    onConnect: onSessionStart,
+    onDisconnect: onSessionEnd,
+    onRpcResult,
+    onError
+  });
+  useEffect(() => {
+    if (videoRef.current && videoTrack) {
+      const stream = new MediaStream([videoTrack]);
+      videoRef.current.srcObject = stream;
+    }
+  }, [videoTrack]);
+  useEffect(() => {
+    if (videoRef.current && audioTrack) {
+      const currentStream = videoRef.current.srcObject;
+      if (currentStream) {
+        currentStream.addTrack(audioTrack);
+      }
+    }
+  }, [audioTrack]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `bb-play-session ${className ?? ""}`,
+      "data-bb-state": status,
+      "data-bb-adapter": adapter,
+      "data-bb-session-id": session?.id,
+      children: children({
+        session,
+        status,
+        call,
+        observe,
+        act,
+        connect,
+        disconnect,
+        videoRef,
+        isConnected,
+        error
+      })
+    }
+  );
+}
+
+// src/components/ClusterHero/config.ts
+var CLUSTER_DEV_PORTS = {
+  alexandria: 3001,
+  alpha: 3002,
+  opus: 3003,
+  baia: 3004,
+  kdot: 3005,
+  aegis: 3006,
+  providence: 3007
+};
+function getClusterDocsUrl(clusterId) {
+  if (typeof window !== "undefined" && window.location.hostname === "localhost") {
+    return `http://localhost:${CLUSTER_DEV_PORTS[clusterId]}`;
+  }
+  return `https://${clusterId}.backbay.io`;
+}
+var CLUSTER_CONFIGS = {
+  alexandria: {
+    id: "alexandria",
+    name: "Alexandria",
+    tagline: "Where knowledge compounds",
+    latinMotto: "SEQUERE FILUM",
+    sigilSrc: "/sigils/alexandria.svg",
+    videoSrc: "/videos/clusters/alexandria.mp4",
+    videoPoster: "/videos/clusters/alexandria-poster.jpg",
+    accentColor: "#C9A227",
+    accentColorRGB: "201, 162, 39",
+    atmosphere: {
+      dustMotes: {
+        colors: ["#C9A227", "#E8D5A3", "#8B7355"],
+        density: 0.6,
+        speed: 0.3
+      },
+      light: {
+        type: "godrays",
+        color: "#C9A227",
+        intensity: 0.7,
+        source: { x: 0.8, y: 0.1 }
+      }
+    },
+    buttons: [
+      { label: "Launch", href: "/clusters/alexandria", variant: "primary" },
+      { label: "Docs", href: "https://alexandria.backbay.io", variant: "secondary", external: true },
+      { label: "Governance", href: "/governance/alexandria", variant: "ghost" }
+    ],
+    // Briefing
+    description: "The decentralized knowledge marketplace. Publish, lease, and compound intelligence artifacts.",
+    capabilities: ["PUBLISH", "LEASE", "COMPOUND"],
+    fastPath: { label: "Start a Knowledge Compound", href: "/clusters/alexandria/compound/new" },
+    status: { network: "STABLE", verification: "ON", fees: "2%" },
+    // Live
+    liveModule: "market",
+    liveContent: "3 new blueprints published today",
+    // Metrics
+    metrics: { realms: 847, output24h: "2.4M", rank: 12 }
+  },
+  alpha: {
+    id: "alpha",
+    name: "Alpha",
+    tagline: "Where signals become strategy",
+    latinMotto: "ALPHA IN MOTU",
+    sigilSrc: "/sigils/alpha.svg",
+    videoSrc: "/videos/clusters/alpha.mp4",
+    videoPoster: "/videos/clusters/alpha-poster.jpg",
+    accentColor: "#E8E8E8",
+    accentColorRGB: "232, 232, 232",
+    atmosphere: {
+      fog: {
+        type: "volumetric",
+        color: "#E8E8E8",
+        intensity: 0.5
+      }
+    },
+    buttons: [
+      { label: "Launch", href: "/clusters/alpha", variant: "primary" },
+      { label: "Docs", href: "https://alpha.backbay.io", variant: "secondary", external: true },
+      { label: "Governance", href: "/governance/alpha", variant: "ghost" }
+    ],
+    // Briefing
+    description: "A social exchange for research-grade finance. Models, signals, and playbooks\u2014shared, challenged, and refined in public.",
+    capabilities: ["BACKTEST", "PRICE", "EXECUTE"],
+    fastPath: { label: "Explore strategy marketplace", href: "/clusters/alpha/market" },
+    status: { network: "STABLE", verification: "ON", fees: "1.5%" },
+    // Live
+    liveModule: "live",
+    liveContent: "Live: 218 strategies \u2022 24h volume $3.1B",
+    // Metrics
+    metrics: { realms: 234, output24h: "4.8M", rank: 3 }
+  },
+  opus: {
+    id: "opus",
+    name: "Opus",
+    tagline: "Where care meets code",
+    latinMotto: "SALUS PER MACHINAM",
+    sigilSrc: "/sigils/opus.svg",
+    videoSrc: "/videos/clusters/opus.mp4",
+    videoPoster: "/videos/clusters/opus-poster.jpg",
+    accentColor: "#B87333",
+    accentColorRGB: "184, 115, 51",
+    atmosphere: {
+      dustMotes: {
+        colors: ["#B87333", "#D4956A", "#8B5A2B"],
+        density: 0.8,
+        speed: 0.2
+      },
+      light: {
+        type: "bloom",
+        color: "#B87333",
+        intensity: 0.6
+      }
+    },
+    buttons: [
+      { label: "Launch", href: "/clusters/opus", variant: "primary" },
+      { label: "Docs", href: "https://opus.backbay.io", variant: "secondary", external: true },
+      { label: "Governance", href: "/governance/opus", variant: "ghost" }
+    ],
+    // Briefing
+    description: "The clinic-to-code commons. Practical health systems, shared and iterated together.",
+    capabilities: ["DIAGNOSE", "COORDINATE", "PRODUCE"],
+    fastPath: { label: "Explore the Exchange", href: "/clusters/opus/exchange" },
+    status: { network: "STABLE", verification: "HIPAA", fees: "2%" },
+    // Live
+    liveModule: "live",
+    liveContent: "New: Autonomous diagnostic pipeline \u2022 12 protocols deployed",
+    // Metrics
+    metrics: { realms: 156, output24h: "892K" }
+  },
+  baia: {
+    id: "baia",
+    name: "Baia",
+    tagline: "Where imagination renders",
+    latinMotto: "ARS EX MACHINA",
+    sigilSrc: "/sigils/baia.svg",
+    videoSrc: "/videos/clusters/baia.mp4",
+    videoPoster: "/videos/clusters/baia-poster.jpg",
+    accentColor: "#D4AF37",
+    accentColorRGB: "212, 175, 55",
+    atmosphere: {
+      light: {
+        type: "godrays",
+        color: "#D4AF37",
+        intensity: 0.8,
+        source: { x: 0.5, y: 0 }
+      }
+    },
+    buttons: [
+      { label: "Launch", href: "/clusters/baia", variant: "primary" },
+      { label: "Docs", href: "https://baia.backbay.io", variant: "secondary", external: true },
+      { label: "Governance", href: "/governance/baia", variant: "ghost" }
+    ],
+    // Briefing
+    description: "A social market for generative culture. Artists and builders publish, collaborate, and curate evolving collections.",
+    capabilities: ["GENERATE", "COMPOSE", "RENDER"],
+    fastPath: { label: "Open the Studio", href: "/clusters/baia/studio" },
+    status: { network: "STABLE", verification: "ON", fees: "2.5%" },
+    // Live
+    liveModule: "market",
+    liveContent: "Trending: Neural symphony generator \u2022 847 works minted today",
+    // Metrics
+    metrics: { realms: 89, output24h: "124K", rank: 47 }
+  },
+  kdot: {
+    id: "kdot",
+    name: "KDoT",
+    tagline: "Kernel design of thought",
+    latinMotto: "MENS \u2022 MACHINA \u2022 DEUS",
+    sigilSrc: "/sigils/kdot.svg",
+    videoSrc: "/videos/clusters/kdot.mp4",
+    videoPoster: "/videos/clusters/kdot-poster.jpg",
+    accentColor: "#00D4AA",
+    accentColorRGB: "0, 212, 170",
+    atmosphere: {
+      fog: {
+        type: "mist",
+        color: "#00D4AA",
+        intensity: 0.4
+      }
+    },
+    buttons: [
+      { label: "Launch", href: "/clusters/kdot", variant: "primary" },
+      { label: "Docs", href: "https://kdot.backbay.io", variant: "secondary", external: true },
+      { label: "Status", href: "/status/kdot", variant: "ghost" }
+    ],
+    // Briefing
+    description: "Compile thought into territory. Ship verifiable services. Forge living culture. Spin up economies.\nKernel Design of Thought: where creativity becomes industry.",
+    capabilities: ["DESIGN", "SYNTHESIZE", "ALIGN"],
+    fastPath: { label: "Open the Kernel", href: "/clusters/kdot/topology" },
+    status: { network: "OPTIMAL", verification: "ON", fees: "0.1%" },
+    // Live
+    liveModule: "live",
+    liveContent: "The Cathedral awakens \u2022 12 kernels compiled today",
+    // Metrics
+    metrics: { realms: 1247, output24h: "8.4PB", rank: 1 }
+  },
+  aegis: {
+    id: "aegis",
+    name: "Aegis",
+    tagline: "Shield of the realm",
+    latinMotto: "TUTELA PERPETUA",
+    sigilSrc: "/sigils/aegis.svg",
+    videoSrc: "/videos/clusters/aegis.mp4",
+    videoPoster: "/videos/clusters/aegis-poster.jpg",
+    accentColor: "#4A7BF7",
+    accentColorRGB: "74, 123, 247",
+    atmosphere: {
+      light: {
+        type: "bloom",
+        color: "#4A7BF7",
+        intensity: 0.5
+      }
+    },
+    buttons: [
+      { label: "Launch", href: "/clusters/aegis", variant: "primary" },
+      { label: "Docs", href: "https://aegis.backbay.io", variant: "secondary", external: true },
+      { label: "Audit", href: "/audit/aegis", variant: "ghost" }
+    ],
+    // Briefing
+    description: "The EDR layer for agent economies. Aegis is a trust-minimized distributed security mesh to enable autonomous production at scale.",
+    capabilities: ["PROTECT", "DETECT", "RESPOND"],
+    fastPath: { label: "View threat dashboard", href: "/clusters/aegis/threats" },
+    status: { network: "SECURE", verification: "ENFORCED", fees: "1%" },
+    // Live
+    liveModule: "governance",
+    liveContent: "Security Proposal #7 \u2014 Policy update pending review",
+    // Metrics
+    metrics: { realms: 312, output24h: "2.1B threats blocked", rank: 2 }
+  },
+  providence: {
+    id: "providence",
+    name: "Providence",
+    tagline: "Foresight is defense",
+    latinMotto: "PRAEVIDEO ERGO PROTEGO",
+    sigilSrc: "/sigils/providence.svg",
+    videoSrc: "/videos/clusters/providence.mp4",
+    videoPoster: "/videos/clusters/providence-poster.jpg",
+    accentColor: "#00D4AA",
+    accentColorRGB: "0, 212, 170",
+    atmosphere: {
+      light: {
+        type: "godrays",
+        color: "#00D4AA",
+        intensity: 0.5,
+        source: { x: 0.55, y: 0.05 }
+      },
+      fog: {
+        type: "mist",
+        color: "#00D4AA",
+        intensity: 0.25
+      }
+    },
+    buttons: [
+      { label: "Launch", href: "/clusters/providence", variant: "primary" },
+      { label: "Docs", href: "https://providence.backbay.io", variant: "secondary", external: true },
+      { label: "Threat Intel", href: "/providence/threats", variant: "ghost" }
+    ],
+    description: "The EDR layer for agent economies. Aegis is a trust-minimized security distributed security for autonomous production.",
+    capabilities: ["PREDICT", "RESPOND", "DEFEND"],
+    fastPath: { label: "View threat dashboard", href: "/clusters/providence/threats" },
+    status: { network: "SECURE", verification: "ENFORCED", fees: "1%" },
+    liveModule: "live",
+    liveContent: "24/7 monitoring active \u2022 847K threats analyzed today",
+    metrics: { realms: 96, output24h: "38K", rank: 19 }
+  }
+};
+function getClusterConfig(clusterId) {
+  return CLUSTER_CONFIGS[clusterId];
+}
+function getClusterConfigWithResolvedUrls(clusterId) {
+  const config = CLUSTER_CONFIGS[clusterId];
+  const docsUrl = getClusterDocsUrl(clusterId);
+  return {
+    ...config,
+    buttons: config.buttons.map(
+      (button) => button.label === "Docs" ? { ...button, href: docsUrl } : button
+    )
+  };
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var UiThemeContext = React3.createContext(null);
+function useUiTheme() {
+  const context = React3.useContext(UiThemeContext);
+  if (!context) {
+    throw new Error("useUiTheme must be used within a UiThemeProvider");
+  }
+  return context;
+}
+function useAmbientTokens() {
+  const { theme } = useUiTheme();
+  return theme.ambient;
+}
+function generateMotes(count, colors, sizeRange, speed) {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    x: Math.random() * 100,
+    y: Math.random() * 100,
+    size: sizeRange[0] + Math.random() * (sizeRange[1] - sizeRange[0]),
+    color: colors[Math.floor(Math.random() * colors.length)],
+    delay: Math.random() * 5,
+    duration: (8 + Math.random() * 8) / speed,
+    driftX: (Math.random() - 0.5) * 30,
+    driftY: -20 - Math.random() * 40
+    // Upward drift
+  }));
+}
+var MoteParticle = React3.memo(function MoteParticle2({
+  mote,
+  speedMultiplier
+}) {
+  const reducedMotion = useReducedMotion();
+  if (reducedMotion) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute rounded-full",
+        style: {
+          left: `${mote.x}%`,
+          top: `${mote.y}%`,
+          width: mote.size,
+          height: mote.size,
+          backgroundColor: mote.color,
+          opacity: 0.3
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "absolute rounded-full will-change-transform",
+      style: {
+        left: `${mote.x}%`,
+        top: `${mote.y}%`,
+        width: mote.size,
+        height: mote.size,
+        backgroundColor: mote.color,
+        filter: `blur(${mote.size > 4 ? 1 : 0}px)`
+      },
+      initial: { opacity: 0, scale: 0.5 },
+      animate: {
+        opacity: [0, 0.6, 0.4, 0.7, 0],
+        scale: [0.5, 1, 0.9, 1.1, 0.8],
+        x: [0, mote.driftX * 0.3, mote.driftX * 0.7, mote.driftX],
+        y: [0, mote.driftY * 0.3, mote.driftY * 0.7, mote.driftY]
+      },
+      transition: {
+        duration: mote.duration / speedMultiplier,
+        delay: mote.delay,
+        repeat: Infinity,
+        ease: "easeInOut"
+      }
+    }
+  );
+});
+function DustMotesLayer({
+  colors: propColors,
+  density: propDensity,
+  speed: propSpeed,
+  sizeRange: propSizeRange,
+  className,
+  disabled = false
+}) {
+  const ambientTokens = useAmbientTokens();
+  const reducedMotion = prefersReducedMotion();
+  const colors = propColors ?? ambientTokens.particleColors;
+  const density = propDensity ?? ambientTokens.particleDensity;
+  const speed = propSpeed ?? ambientTokens.particleSpeed;
+  const sizeRange = propSizeRange ?? ambientTokens.particleSizeRange;
+  const [motes, setMotes] = React3.useState([]);
+  React3.useEffect(() => {
+    if (disabled || reducedMotion) {
+      setMotes([]);
+      return;
+    }
+    const viewportArea = typeof window !== "undefined" ? window.innerWidth * window.innerHeight / 1e4 : 100;
+    const count = Math.floor(viewportArea * density * 2);
+    const clampedCount = Math.min(Math.max(count, 15), 80);
+    setMotes(generateMotes(clampedCount, colors, sizeRange, speed));
+  }, [colors, density, disabled, reducedMotion, sizeRange, speed]);
+  if (disabled || motes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: ambientTokens.horizonGradient
+            }
+          }
+        ),
+        motes.map((mote) => /* @__PURE__ */ jsx(MoteParticle, { mote, speedMultiplier: speed }, mote.id)),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 opacity-30",
+            style: {
+              background: `
+            radial-gradient(
+              ellipse 60% 100% at 70% 0%,
+              ${colors[0]}15,
+              transparent 70%
+            )
+          `
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/primitives/environment/shared/types.ts
+var PERFORMANCE_PRESETS = {
+  high: { tier: "high", maxParticles: 2e3, useShaders: true, targetFPS: 60 },
+  medium: { tier: "medium", maxParticles: 800, useShaders: true, targetFPS: 60 },
+  low: { tier: "low", maxParticles: 300, useShaders: false, targetFPS: 30 },
+  minimal: { tier: "minimal", maxParticles: 0, useShaders: false, targetFPS: 0 }
+};
+
+// src/primitives/environment/shared/performance.ts
+function detectPerformanceTier() {
+  if (typeof window === "undefined") return "medium";
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return "minimal";
+  }
+  const nav = navigator;
+  if (nav.deviceMemory && nav.deviceMemory < 4) {
+    return "low";
+  }
+  if (navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4) {
+    return "low";
+  }
+  const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+  if (isMobile) return "low";
+  return "medium";
+}
+function getPerformanceConfig(tier) {
+  const detected = detectPerformanceTier();
+  return PERFORMANCE_PRESETS[detected];
+}
+
+// src/primitives/environment/shared/noise.ts
+var NOISE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+  <filter id="n">
+    <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" seed="2" stitchTiles="stitch" />
+    <feColorMatrix type="saturate" values="0" />
+  </filter>
+  <rect width="200" height="200" filter="url(#n)" opacity="0.55" />
+</svg>`;
+var NOISE_DATA_URL = `data:image/svg+xml,${encodeURIComponent(NOISE_SVG)}`;
+
+// src/primitives/environment/VolumetricLight/types.ts
+var LIGHT_CONFIGS = {
+  godrays: { defaultColor: "#fffbe6", defaultIntensity: 0.6, animated: true, blendMode: "screen" },
+  shaft: { defaultColor: "#ffffff", defaultIntensity: 0.5, animated: false, blendMode: "screen" },
+  bloom: { defaultColor: "#ffffff", defaultIntensity: 0.4, animated: false, blendMode: "screen" },
+  flare: { defaultColor: "#ffe4b5", defaultIntensity: 0.7, animated: true, blendMode: "screen" },
+  caustics: { defaultColor: "#00d4ff", defaultIntensity: 0.4, animated: true, blendMode: "overlay" },
+  scanner: { defaultColor: "#00ff00", defaultIntensity: 0.6, animated: true, blendMode: "screen" },
+  neon: { defaultColor: "#ff00ff", defaultIntensity: 0.8, animated: true, blendMode: "screen" },
+  spotlight: { defaultColor: "#ffffff", defaultIntensity: 0.7, animated: false, blendMode: "screen" },
+  rim: { defaultColor: "#00f0ff", defaultIntensity: 0.5, animated: false, blendMode: "screen" },
+  laser: { defaultColor: "#ff0000", defaultIntensity: 0.9, animated: true, blendMode: "screen" }
+};
+function VolumetricLight({
+  type,
+  source = { x: 0.5, y: 0 },
+  color: propColor,
+  intensity = 0.5,
+  decay = 0.5,
+  angle = 0,
+  width = 0.3,
+  animated: propAnimated,
+  stylePreset = "ui",
+  enabled = true,
+  className,
+  style
+}) {
+  const reducedMotion = useReducedMotion();
+  const perfConfig = getPerformanceConfig();
+  const [time, setTime] = React3.useState(0);
+  const config = LIGHT_CONFIGS[type];
+  const color = propColor ?? config.defaultColor;
+  const shouldAnimate = (propAnimated ?? config.animated) && !reducedMotion && perfConfig.tier !== "minimal";
+  React3.useEffect(() => {
+    if (!shouldAnimate || !enabled) return;
+    let frame;
+    const animate = () => {
+      setTime((prev) => prev + 0.016);
+      frame = requestAnimationFrame(animate);
+    };
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [shouldAnimate, enabled]);
+  const lightStyle = React3.useMemo(() => {
+    const opacity = intensity * config.defaultIntensity;
+    const d = Math.max(0, Math.min(1, decay));
+    switch (type) {
+      case "godrays":
+        return {
+          background: `conic-gradient(from ${angle}deg at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.4 * 255).toString(16).padStart(2, "0")} 0deg,
+            transparent 15deg,
+            ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")} 30deg,
+            transparent 45deg,
+            ${color}${Math.round(opacity * 0.35 * 255).toString(16).padStart(2, "0")} 60deg,
+            transparent 75deg,
+            ${color}${Math.round(opacity * 0.25 * 255).toString(16).padStart(2, "0")} 90deg,
+            transparent 105deg
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      case "shaft":
+        return {
+          background: `linear-gradient(${angle}deg,
+            transparent ${(source.x - width / 2) * 100}%,
+            ${color}${Math.round(opacity * 0.5 * 255).toString(16).padStart(2, "0")} ${source.x * 100}%,
+            transparent ${(source.x + width / 2) * 100}%
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      case "bloom": {
+        const bloomInner = 18 + d * 22;
+        const bloomMid = 42 + d * 24;
+        return {
+          background: `radial-gradient(circle at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")},
+            ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")} ${bloomInner}%,
+            transparent ${bloomMid}%
+          )`,
+          mixBlendMode: config.blendMode,
+          filter: "blur(20px)"
+        };
+      }
+      case "flare":
+        const flareOffset = Math.sin(time * 2) * 5;
+        return {
+          background: `
+            radial-gradient(ellipse 20% 5% at ${source.x * 100}% ${source.y * 100 + flareOffset}%, ${color}${Math.round(opacity * 0.8 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(ellipse 5% 20% at ${source.x * 100}% ${source.y * 100}%, ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(circle at ${source.x * 100}% ${source.y * 100}%, ${color}${Math.round(opacity * 0.4 * 255).toString(16).padStart(2, "0")}, transparent 20%)
+          `,
+          mixBlendMode: config.blendMode
+        };
+      case "caustics":
+        const causticPhase = time * 0.5;
+        return {
+          background: `
+            radial-gradient(ellipse at ${50 + Math.sin(causticPhase) * 20}% ${50 + Math.cos(causticPhase * 1.3) * 20}%, ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")}, transparent 40%),
+            radial-gradient(ellipse at ${50 + Math.cos(causticPhase * 0.7) * 25}% ${50 + Math.sin(causticPhase * 1.1) * 25}%, ${color}${Math.round(opacity * 0.25 * 255).toString(16).padStart(2, "0")}, transparent 35%)
+          `,
+          mixBlendMode: config.blendMode
+        };
+      case "scanner":
+        const scanAngle = time * 60 % 360;
+        return {
+          background: `conic-gradient(from ${scanAngle}deg at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")} 0deg,
+            transparent 30deg,
+            transparent 360deg
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      case "neon":
+        const flickerIntensity = 0.9 + Math.sin(time * 20) * 0.1;
+        return {
+          background: `linear-gradient(${angle}deg, transparent 40%, ${color}${Math.round(opacity * flickerIntensity * 0.8 * 255).toString(16).padStart(2, "0")} 50%, transparent 60%)`,
+          boxShadow: `0 0 30px ${color}${Math.round(opacity * flickerIntensity * 0.5 * 255).toString(16).padStart(2, "0")}, 0 0 60px ${color}${Math.round(opacity * flickerIntensity * 0.3 * 255).toString(16).padStart(2, "0")}`,
+          mixBlendMode: config.blendMode
+        };
+      case "spotlight": {
+        const spotMid = 40 + d * 35;
+        return {
+          background: `radial-gradient(ellipse ${width * 100}% ${width * 150}% at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.7 * 255).toString(16).padStart(2, "0")},
+            ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")} ${spotMid}%,
+            transparent 100%
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      }
+      case "rim":
+        return {
+          boxShadow: `inset 0 0 ${60 * intensity}px ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")}`,
+          mixBlendMode: config.blendMode
+        };
+      case "laser":
+        const laserOffset = Math.sin(time * 3) * 10;
+        return {
+          background: `linear-gradient(${angle + laserOffset}deg,
+            transparent 49%,
+            ${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")} 49.5%,
+            ${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")} 50.5%,
+            transparent 51%
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      default:
+        return {};
+    }
+  }, [type, source, color, intensity, decay, angle, width, time, config]);
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0", className),
+      style: { ...lightStyle, ...style },
+      "aria-hidden": "true",
+      children: stylePreset === "cinematic" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0",
+          style: {
+            backgroundImage: `url("${NOISE_DATA_URL}")`,
+            backgroundRepeat: "repeat",
+            backgroundSize: "240px 240px",
+            backgroundPosition: `${time * 160}px ${time * 110}px`,
+            opacity: Math.min(0.12, 0.03 + intensity * 0.06),
+            mixBlendMode: "overlay",
+            filter: "blur(0.4px) contrast(1.25)"
+          },
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+
+// src/primitives/environment/FogLayer/types.ts
+var FOG_CONFIGS = {
+  depth: {
+    defaultColor: "#0a0a0f",
+    defaultDensity: 0.5,
+    animationSpeed: 0,
+    gradientStops: 2
+  },
+  ground: {
+    defaultColor: "#ffffff",
+    defaultDensity: 0.7,
+    animationSpeed: 0.02,
+    gradientStops: 3
+  },
+  volumetric: {
+    defaultColor: "#e8e8ff",
+    defaultDensity: 0.4,
+    animationSpeed: 0.01,
+    gradientStops: 4
+  },
+  mist: {
+    defaultColor: "#f0f0ff",
+    defaultDensity: 0.3,
+    animationSpeed: 0.015,
+    gradientStops: 5
+  }
+};
+function FogLayer({
+  type,
+  density: propDensity,
+  color: propColor,
+  height = 0.4,
+  animated = true,
+  intensity = 1,
+  stylePreset = "ui",
+  enabled = true,
+  className,
+  style
+}) {
+  const reducedMotion = useReducedMotion();
+  const perfConfig = getPerformanceConfig();
+  const [offset, setOffset] = React3.useState(0);
+  const config = FOG_CONFIGS[type];
+  const density = propDensity ?? config.defaultDensity;
+  const color = propColor ?? config.defaultColor;
+  const shouldAnimate = animated && !reducedMotion && perfConfig.tier !== "minimal";
+  React3.useEffect(() => {
+    if (!shouldAnimate || !enabled || config.animationSpeed === 0) return;
+    let frame;
+    const animate = () => {
+      setOffset((prev) => (prev + config.animationSpeed) % 100);
+      frame = requestAnimationFrame(animate);
+    };
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [shouldAnimate, enabled, config.animationSpeed]);
+  const gradientStyle = React3.useMemo(() => {
+    const opacity = density * intensity;
+    switch (type) {
+      case "depth":
+        return {
+          background: `linear-gradient(to top, ${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}, transparent)`
+        };
+      case "ground":
+        return {
+          background: `linear-gradient(to top,
+            ${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")} 0%,
+            ${color}${Math.round(opacity * 0.5 * 255).toString(16).padStart(2, "0")} ${height * 50}%,
+            transparent ${height * 100}%)`
+        };
+      case "volumetric":
+        return {
+          background: `
+            radial-gradient(ellipse 120% 60% at 50% ${100 - offset}%, ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(ellipse 100% 40% at ${30 + offset * 0.2}% 80%, ${color}${Math.round(opacity * 0.4 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(ellipse 80% 50% at ${70 - offset * 0.15}% 90%, ${color}${Math.round(opacity * 0.5 * 255).toString(16).padStart(2, "0")}, transparent)
+          `
+        };
+      case "mist":
+        return {
+          background: `
+            radial-gradient(ellipse 150% 80% at ${40 + Math.sin(offset * 0.1) * 20}% ${60 + Math.cos(offset * 0.08) * 10}%, ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(ellipse 120% 60% at ${60 + Math.cos(offset * 0.12) * 15}% ${40 + Math.sin(offset * 0.09) * 15}%, ${color}${Math.round(opacity * 0.25 * 255).toString(16).padStart(2, "0")}, transparent),
+            linear-gradient(to top, ${color}${Math.round(opacity * 0.15 * 255).toString(16).padStart(2, "0")}, transparent 50%)
+          `
+        };
+      default:
+        return {};
+    }
+  }, [type, color, density, intensity, height, offset]);
+  if (!enabled) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute inset-0",
+        className
+      ),
+      style: {
+        ...gradientStyle,
+        ...style
+      },
+      "aria-hidden": "true",
+      children: stylePreset === "cinematic" && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0",
+          style: {
+            backgroundImage: `url("${NOISE_DATA_URL}")`,
+            backgroundRepeat: "repeat",
+            backgroundSize: `${260 - Math.round(density * 80)}px ${260 - Math.round(density * 80)}px`,
+            backgroundPosition: `${offset * 30}px ${offset * 20}px`,
+            opacity: Math.min(0.18, 0.04 + density * intensity * 0.12),
+            mixBlendMode: "soft-light",
+            filter: "blur(0.6px) contrast(1.2)"
+          },
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+function ClusterAtmosphere({
+  config,
+  accentColor,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0", className),
+      "aria-hidden": "true",
+      children: [
+        config.dustMotes && /* @__PURE__ */ jsx(
+          DustMotesLayer,
+          {
+            colors: config.dustMotes.colors,
+            density: config.dustMotes.density,
+            speed: config.dustMotes.speed
+          }
+        ),
+        config.fog && /* @__PURE__ */ jsx(
+          FogLayer,
+          {
+            type: config.fog.type,
+            color: config.fog.color,
+            intensity: config.fog.intensity
+          }
+        ),
+        config.light && /* @__PURE__ */ jsx(
+          VolumetricLight,
+          {
+            type: config.light.type,
+            color: config.light.color,
+            intensity: config.light.intensity,
+            source: config.light.source
+          }
+        )
+      ]
+    }
+  );
+}
+function GradientVeil({ className, intensity = 1 }) {
+  const a1 = (0.85 * intensity).toFixed(2);
+  const a2 = (0.5 * intensity).toFixed(2);
+  const a3 = (0.2 * intensity).toFixed(2);
+  return /* @__PURE__ */ 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%
+        )`
+      }
+    }
+  );
+}
+function StructuralElements({
+  accentColor,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(CornerBrackets, { accentColor }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: `radial-gradient(ellipse 60% 80% at 85% 50%, ${accentColor}1A 0%, transparent 70%)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(DotGrid, {})
+      ]
+    }
+  );
+}
+function CornerBrackets({ accentColor }) {
+  const bracketLength = 40;
+  const thickness = 2;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "absolute top-6 left-6",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { duration: 0.8, delay: 0.2 },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 left-0",
+              style: {
+                width: bracketLength,
+                height: thickness,
+                backgroundColor: accentColor
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 left-0",
+              style: {
+                width: thickness,
+                height: bracketLength,
+                backgroundColor: accentColor
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "absolute bottom-6 right-6",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { duration: 0.8, delay: 0.3 },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute bottom-0 right-0",
+              style: {
+                width: bracketLength,
+                height: thickness,
+                backgroundColor: accentColor
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute bottom-0 right-0",
+              style: {
+                width: thickness,
+                height: bracketLength,
+                backgroundColor: accentColor
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DotGrid() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute inset-0",
+      style: {
+        opacity: 0.04,
+        backgroundImage: `radial-gradient(circle at center, currentColor 1px, transparent 1px)`,
+        backgroundSize: "24px 24px"
+      }
+    }
+  );
+}
+function VideoBackground({
+  videoSrc,
+  webmSrc,
+  posterSrc,
+  fallbackBackground,
+  className,
+  crossfadeDuration = 0.8,
+  preload = true,
+  playbackRate = 0.75,
+  onLoad,
+  onError
+}) {
+  const [isVideoReady, setIsVideoReady] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const videoRef = useRef(null);
+  const [prefersReducedMotion2, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (e) => {
+      setPrefersReducedMotion(e.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const handleCanPlayThrough = useCallback(() => {
+    setIsVideoReady(true);
+    onLoad?.();
+  }, [onLoad]);
+  const handleError = useCallback(
+    (e) => {
+      setHasError(true);
+      setIsVideoReady(false);
+      onError?.(e.nativeEvent);
+    },
+    [onError]
+  );
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || hasError || prefersReducedMotion2) return;
+    video.playbackRate = playbackRate;
+    const playPromise = video.play();
+    if (playPromise !== void 0) {
+      playPromise.catch(() => {
+      });
+    }
+  }, [hasError, prefersReducedMotion2, playbackRate]);
+  useEffect(() => {
+    if (!preload || typeof document === "undefined") return;
+    const links = [];
+    if (posterSrc) {
+      const posterLink = document.createElement("link");
+      posterLink.rel = "preload";
+      posterLink.as = "image";
+      posterLink.href = posterSrc;
+      document.head.appendChild(posterLink);
+      links.push(posterLink);
+    }
+    if (videoSrc) {
+      const videoLink = document.createElement("link");
+      videoLink.rel = "preload";
+      videoLink.as = "video";
+      videoLink.href = videoSrc;
+      if (videoSrc.endsWith(".mp4")) {
+        videoLink.type = "video/mp4";
+      } else if (videoSrc.endsWith(".webm")) {
+        videoLink.type = "video/webm";
+      }
+      document.head.appendChild(videoLink);
+      links.push(videoLink);
+    }
+    if (webmSrc) {
+      const webmLink = document.createElement("link");
+      webmLink.rel = "preload";
+      webmLink.as = "video";
+      webmLink.href = webmSrc;
+      webmLink.type = "video/webm";
+      document.head.appendChild(webmLink);
+      links.push(webmLink);
+    }
+    return () => {
+      links.forEach((link) => {
+        if (link.parentNode === document.head) {
+          document.head.removeChild(link);
+        }
+      });
+    };
+  }, [preload, videoSrc, webmSrc, posterSrc]);
+  const mediaStyles = cn(
+    "absolute inset-0 w-full h-full object-cover",
+    className
+  );
+  const fallbackBg = fallbackBackground ?? "radial-gradient(1200px 700px at 50% 30%, rgba(255,255,255,0.10), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0) 40%), #000";
+  const posterBackgroundImage = posterSrc ? `url(${posterSrc}), ${fallbackBg}` : fallbackBg;
+  const posterBackgroundSize = posterSrc ? "cover, cover" : "cover";
+  const posterBackgroundPosition = posterSrc ? "center, center" : "center";
+  if (prefersReducedMotion2) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: mediaStyles,
+        style: {
+          backgroundImage: posterBackgroundImage,
+          backgroundSize: posterBackgroundSize,
+          backgroundPosition: posterBackgroundPosition
+        },
+        role: "img",
+        "aria-label": "Background image"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(mediaStyles, "z-0"),
+        style: {
+          backgroundImage: posterBackgroundImage,
+          backgroundSize: posterBackgroundSize,
+          backgroundPosition: posterBackgroundPosition
+        },
+        role: "img",
+        "aria-hidden": isVideoReady && !hasError
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: !hasError && /* @__PURE__ */ jsxs(
+      motion.video,
+      {
+        ref: videoRef,
+        className: cn(mediaStyles, "z-10"),
+        poster: posterSrc,
+        autoPlay: true,
+        muted: true,
+        loop: true,
+        playsInline: true,
+        disablePictureInPicture: true,
+        disableRemotePlayback: true,
+        onCanPlayThrough: handleCanPlayThrough,
+        onError: handleError,
+        initial: { opacity: 0 },
+        animate: { opacity: isVideoReady ? 1 : 0 },
+        exit: { opacity: 0 },
+        transition: {
+          opacity: {
+            duration: crossfadeDuration,
+            ease: [0.4, 0, 0.2, 1]
+            // ease-out cubic
+          }
+        },
+        "aria-hidden": "true",
+        children: [
+          webmSrc && /* @__PURE__ */ jsx("source", { src: webmSrc, type: "video/webm" }),
+          /* @__PURE__ */ jsx("source", { src: videoSrc, type: "video/mp4" })
+        ]
+      },
+      videoSrc
+    ) })
+  ] });
+}
+var fadeUpVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 }
+};
+var staggerContainer = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.12,
+      delayChildren: 0.1
+    }
+  }
+};
+function ClusterName({ name }) {
+  return /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      variants: fadeUpVariants,
+      className: "flex items-center gap-2 font-mono text-xs text-white/50 mt-4 tracking-wide",
+      children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          formattedRealms,
+          " realms"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "\u2022" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          metrics.output24h,
+          " output"
+        ] }),
+        metrics.rank !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-white/30", children: "\u2022" }),
+          /* @__PURE__ */ 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-neutral-900 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 /* @__PURE__ */ 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 /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 mt-8 w-full max-w-xs", children: buttons.map((button) => /* @__PURE__ */ jsx(RailButton, { button }, button.label)) });
+}
+function ClusterRail({
+  name,
+  tagline,
+  metrics,
+  buttons,
+  accentColor,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.aside,
+    {
+      variants: staggerContainer,
+      initial: "hidden",
+      animate: "visible",
+      className: cn("flex flex-col items-start", className),
+      style: {
+        "--cluster-accent": accentColor
+      },
+      children: [
+        /* @__PURE__ */ jsx(ClusterName, { name }),
+        /* @__PURE__ */ jsx(Tagline, { text: tagline }),
+        /* @__PURE__ */ jsx(MetricsRow, { metrics }),
+        /* @__PURE__ */ jsx(ButtonStack, { buttons })
+      ]
+    }
+  );
+}
+var containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.12,
+      delayChildren: 0.1
+    }
+  }
+};
+var itemVariants = {
+  hidden: { opacity: 0, y: 12 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+      ease: [0.22, 1, 0.36, 1]
+    }
+  }
+};
+function Description({ text }) {
+  return /* @__PURE__ */ jsx(
+    motion.p,
+    {
+      variants: itemVariants,
+      className: "text-sm text-white/70 leading-relaxed max-w-xs whitespace-pre-line",
+      children: text
+    }
+  );
+}
+function CapabilityChips({
+  capabilities,
+  accentColor
+}) {
+  return /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, className: "flex flex-wrap gap-2", children: capabilities.map((capability) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "px-2.5 py-1 text-[10px] uppercase tracking-widest text-white/80 rounded-sm",
+      style: {
+        backgroundColor: `color-mix(in srgb, ${accentColor} 15%, transparent)`
+      },
+      children: capability
+    },
+    capability
+  )) });
+}
+function FastPath({
+  fastPath,
+  accentColor
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.a,
+    {
+      variants: itemVariants,
+      href: fastPath.href,
+      className: "group inline-flex items-center gap-2 text-sm transition-colors duration-200 hover:brightness-125",
+      style: { color: accentColor },
+      children: [
+        /* @__PURE__ */ jsx("span", { children: fastPath.label }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            className: "transition-transform duration-200 group-hover:translate-x-1",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M6 4L10 8L6 12",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function StatusLine({
+  status
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      variants: itemVariants,
+      className: "font-mono text-[10px] text-white/50 tracking-wide",
+      children: [
+        "Network: ",
+        status.network,
+        /* @__PURE__ */ jsx("span", { className: "mx-2", children: "\u2022" }),
+        "Verification: ",
+        status.verification,
+        /* @__PURE__ */ jsx("span", { className: "mx-2", children: "\u2022" }),
+        "Fees: ",
+        status.fees
+      ]
+    }
+  );
+}
+function BriefingPanel({
+  description,
+  capabilities,
+  fastPath,
+  status,
+  accentColor,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      variants: containerVariants,
+      initial: "hidden",
+      animate: "visible",
+      className: cn("flex flex-col gap-4 rounded-xl p-4 backdrop-blur-xl", className),
+      style: {
+        background: "rgba(2,4,10,0.6)",
+        border: "1px solid rgba(255,255,255,0.06)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Description, { text: description }),
+        /* @__PURE__ */ jsx(CapabilityChips, { capabilities, accentColor }),
+        /* @__PURE__ */ jsx(FastPath, { fastPath, accentColor }),
+        /* @__PURE__ */ jsx(StatusLine, { status })
+      ]
+    }
+  );
+}
+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]);
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  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;
+    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);
+  };
+  const shimmerClass = `sigil-shimmer-${styleId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      className: cn(
+        "relative flex flex-col items-center justify-center",
+        className
+      ),
+      style: { "--sigil-accent": accentColor },
+      children: [
+        /* @__PURE__ */ 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;
+            }
+          `
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "relative",
+            style: {
+              x: parallaxX,
+              y: parallaxY
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 pointer-events-none overflow-hidden",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ 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 ? /* @__PURE__ */ 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)
+                }
+              ) : /* @__PURE__ */ 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: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "font-serif text-6xl text-white/70 tracking-[0.18em]",
+                      style: { textShadow: `0 0 30px ${accentColor}30` },
+                      children: initials
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-10 text-center", children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "font-serif text-3xl md:text-4xl text-white/95 mb-3",
+              style: {
+                fontVariant: "small-caps",
+                letterSpacing: "0.12em"
+              },
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "font-serif text-lg md:text-xl text-white/60 italic max-w-md leading-relaxed", children: tagline }),
+          latinMotto && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-4 font-mono text-[10px] uppercase tracking-[0.2em] text-white/30",
+              "aria-label": "Latin motto",
+              children: latinMotto
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULT_CONTENT = {
+  market: "3 new blueprints published today",
+  live: "24 active workflows running",
+  governance: "Proposal #18 \u2014 Voting ends in 6h",
+  progress: "You minted 4 verified artifacts this week"
+};
+var MODULE_ICONS = {
+  market: FileText,
+  live: Zap,
+  governance: Vote,
+  progress: Trophy
+};
+function LiveStrip({
+  moduleType,
+  content,
+  accentColor,
+  className
+}) {
+  const Icon = MODULE_ICONS[moduleType];
+  const displayContent = content ?? DEFAULT_CONTENT[moduleType];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group flex items-center gap-3 px-4 py-2.5 rounded-lg bg-white/[0.05] backdrop-blur-sm",
+        "transition-colors duration-200 hover:bg-white/[0.10] cursor-pointer",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "w-4 h-4 shrink-0 transition-colors duration-200",
+            style: { color: accentColor }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-white/80 font-normal flex-1 truncate", children: displayContent }),
+        /* @__PURE__ */ 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"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function useVideoPreload({
+  videoSrc,
+  posterSrc,
+  enabled = true
+}) {
+  const [isPreloaded, setIsPreloaded] = useState(false);
+  useEffect(() => {
+    if (!enabled || typeof document === "undefined") {
+      return;
+    }
+    const links = [];
+    if (posterSrc) {
+      const posterLink = document.createElement("link");
+      posterLink.rel = "preload";
+      posterLink.as = "image";
+      posterLink.href = posterSrc;
+      document.head.appendChild(posterLink);
+      links.push(posterLink);
+    }
+    if (videoSrc) {
+      const videoLink = document.createElement("link");
+      videoLink.rel = "preload";
+      videoLink.as = "video";
+      videoLink.href = videoSrc;
+      if (videoSrc.endsWith(".webm")) {
+        videoLink.type = "video/webm";
+      } else if (videoSrc.endsWith(".mp4")) {
+        videoLink.type = "video/mp4";
+      }
+      document.head.appendChild(videoLink);
+      links.push(videoLink);
+    }
+    setIsPreloaded(true);
+    return () => {
+      links.forEach((link) => {
+        if (link.parentNode === document.head) {
+          document.head.removeChild(link);
+        }
+      });
+    };
+  }, [videoSrc, posterSrc, enabled]);
+  return { isPreloaded };
+}
+function ClusterHero({ cluster, className }) {
+  const config = getClusterConfigWithResolvedUrls(cluster);
+  const fallbackBackground = `radial-gradient(900px 600px at 65% 25%, rgba(${config.accentColorRGB}, 0.22), rgba(0,0,0,0) 62%), radial-gradient(700px 520px at 25% 78%, rgba(${config.accentColorRGB}, 0.10), rgba(0,0,0,0) 58%), #000`;
+  useVideoPreload({
+    videoSrc: config.videoSrc,
+    posterSrc: config.videoPoster
+  });
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "relative min-h-screen h-full w-full overflow-hidden bg-black",
+        className
+      ),
+      style: { "--cluster-accent": config.accentColor },
+      children: [
+        /* @__PURE__ */ jsx(
+          VideoBackground,
+          {
+            videoSrc: config.videoSrc,
+            posterSrc: config.videoPoster,
+            preload: true,
+            fallbackBackground,
+            className: "z-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StructuralElements,
+          {
+            accentColor: config.accentColor,
+            className: "z-[5]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ClusterAtmosphere,
+          {
+            config: config.atmosphere,
+            accentColor: config.accentColor,
+            className: "z-10"
+          }
+        ),
+        /* @__PURE__ */ jsx(GradientVeil, { className: "z-20" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute z-30",
+            style: { top: "80px", left: "48px", maxWidth: "380px" },
+            children: /* @__PURE__ */ jsx(
+              BriefingPanel,
+              {
+                description: config.description,
+                capabilities: config.capabilities,
+                fastPath: config.fastPath,
+                status: config.status,
+                accentColor: config.accentColor
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute z-30",
+            style: { top: "50%", right: "80px", transform: "translateY(-50%)" },
+            children: /* @__PURE__ */ jsx(
+              SigilMonument,
+              {
+                name: config.name,
+                tagline: config.tagline,
+                latinMotto: config.latinMotto,
+                sigilSrc: config.sigilSrc,
+                accentColor: config.accentColor
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute z-30",
+            style: { bottom: "80px", left: "50%", transform: "translateX(-50%)", maxWidth: "600px", width: "100%" },
+            children: /* @__PURE__ */ jsx(
+              LiveStrip,
+              {
+                moduleType: config.liveModule,
+                content: config.liveContent,
+                accentColor: config.accentColor
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute z-40",
+            style: { bottom: "32px", left: "48px", maxWidth: "280px" },
+            children: /* @__PURE__ */ jsx(
+              ClusterRail,
+              {
+                name: config.name,
+                tagline: config.tagline,
+                metrics: config.metrics,
+                buttons: config.buttons,
+                accentColor: config.accentColor
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var 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 /* @__PURE__ */ 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: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-0 left-0 w-1 h-0 group-hover:h-full transition-all duration-500",
+            style: { backgroundColor: accentColor }
+          }
+        ),
+        /* @__PURE__ */ jsx("h3", { className: "font-serif text-2xl text-white mb-3 tracking-wide", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-neutral-400 leading-relaxed", children: description })
+      ]
+    }
+  );
+}
+function FeatureCardsSection({ clusterId, config }) {
+  const features = FEATURE_DATA[clusterId];
+  return /* @__PURE__ */ jsx("section", { className: "relative z-10 bg-zinc-950 py-32 px-16", children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ jsxs(
+      motion.header,
+      {
+        initial: { opacity: 0, y: 20 },
+        whileInView: { opacity: 1, y: 0 },
+        viewport: { once: true },
+        transition: { duration: 0.6 },
+        className: "mb-16",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "font-mono text-xs uppercase tracking-[0.2em]",
+              style: { color: config.accentColor },
+              children: "Capabilities"
+            }
+          ),
+          /* @__PURE__ */ jsxs("h2", { className: "font-serif text-5xl text-white mt-4 tracking-wide", children: [
+            "What defines ",
+            config.name
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: features.map((feature, index) => /* @__PURE__ */ jsx(
+      FeatureCard,
+      {
+        title: feature.title,
+        description: feature.description,
+        accentColor: config.accentColor,
+        index
+      },
+      feature.title
+    )) })
+  ] }) });
+}
+var 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: "\u221E", 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 /* @__PURE__ */ 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: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "font-mono text-5xl md:text-6xl font-light mb-3",
+            style: { color: accentColor },
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "text-neutral-400 uppercase tracking-[0.15em] text-sm", children: label })
+      ]
+    }
+  );
+}
+function ClusterStatsSection({ clusterId, config }) {
+  const stats = STATS_DATA[clusterId];
+  return /* @__PURE__ */ jsx("section", { className: "relative z-10 bg-black py-32 px-16", children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto", children: [
+    /* @__PURE__ */ 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 }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8", children: stats.map((stat, index) => /* @__PURE__ */ jsx(
+      StatBlock,
+      {
+        value: stat.value,
+        label: stat.label,
+        accentColor: config.accentColor,
+        index
+      },
+      stat.label
+    )) }),
+    /* @__PURE__ */ 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 }
+      }
+    )
+  ] }) });
+}
+var 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"
+  }
+};
+function CTASection({ clusterId, config }) {
+  const cta = CTA_DATA[clusterId];
+  return /* @__PURE__ */ jsx("section", { className: "relative z-10 bg-zinc-950 py-48 px-16", children: /* @__PURE__ */ 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: [
+        /* @__PURE__ */ jsx("h2", { className: "font-serif text-6xl md:text-7xl text-white tracking-wide mb-8 leading-[1.1]", children: cta.headline }),
+        /* @__PURE__ */ jsx("p", { className: "text-xl text-neutral-400 mb-12 max-w-2xl mx-auto leading-relaxed", children: cta.subtext }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `/clusters/${clusterId}`,
+            className: "inline-block px-12 py-5 text-lg font-medium tracking-wider uppercase text-neutral-900 transition-all duration-300 hover:brightness-110 hover:scale-105",
+            style: { backgroundColor: config.accentColor },
+            children: cta.buttonLabel
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ClusterHeroPage({ clusterId, className }) {
+  const containerRef = useRef(null);
+  const config = getClusterConfigWithResolvedUrls(clusterId);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start start", "end start"]
+  });
+  const heroOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0.3]);
+  const heroY = useTransform(scrollYProgress, [0, 0.3], [0, -100]);
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative scroll-smooth",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "sticky top-0 h-screen overflow-hidden",
+            style: { opacity: heroOpacity },
+            children: /* @__PURE__ */ jsx(motion.div, { style: { y: heroY }, className: "h-full", children: /* @__PURE__ */ jsx(ClusterHero, { cluster: clusterId, className: "h-full" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(FeatureCardsSection, { clusterId, config }),
+          /* @__PURE__ */ jsx(ClusterStatsSection, { clusterId, config }),
+          /* @__PURE__ */ jsx(CTASection, { clusterId, config })
+        ] })
+      ]
+    }
+  );
+}
+
+export { AgentPanel, BBProvider, CLUSTER_CONFIGS, ClusterHero, ClusterHeroPage, PlaySession, SyncDocument, getClusterConfig, useBBContext, useBBContextOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map