@thehoneyjar/sigil-hud 0.1.0

package/dist/index.js

@@ -0,0 +1,3079 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { createContext, useMemo, useContext, useState, useCallback, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/types.ts
+var DEFAULT_HUD_STATE = {
+  isOpen: false,
+  activePanel: null,
+  position: "bottom-right",
+  isMinimized: false
+};
+var DEFAULT_HUD_CONFIG = {
+  shortcuts: true,
+  position: "bottom-right",
+  persist: true,
+  observationCapture: true,
+  signalCapture: true
+};
+var DEFAULT_LENS_STATE = {
+  enabled: false,
+  impersonatedAddress: null,
+  realAddress: null,
+  savedAddresses: []
+};
+var useHudStore = create()(
+  persist(
+    (set) => ({
+      ...DEFAULT_HUD_STATE,
+      open: () => set({ isOpen: true }),
+      close: () => set({ isOpen: false }),
+      toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+      setActivePanel: (panel) => set({ activePanel: panel }),
+      setPosition: (position) => set({ position }),
+      toggleMinimized: () => set((state) => ({ isMinimized: !state.isMinimized }))
+    }),
+    {
+      name: "sigil-hud-storage",
+      partialize: (state) => ({
+        position: state.position,
+        isMinimized: state.isMinimized
+      })
+    }
+  )
+);
+function getHudState() {
+  const state = useHudStore.getState();
+  return {
+    isOpen: state.isOpen,
+    activePanel: state.activePanel,
+    position: state.position,
+    isMinimized: state.isMinimized
+  };
+}
+var HudContext = createContext(null);
+function HudProvider({
+  children,
+  config = {},
+  lensService,
+  forkService,
+  simulationService,
+  diagnosticsService,
+  anchorClient
+}) {
+  const isOpen = useHudStore((state) => state.isOpen);
+  const activePanel = useHudStore((state) => state.activePanel);
+  const position = useHudStore((state) => state.position);
+  const isMinimized = useHudStore((state) => state.isMinimized);
+  const open = useHudStore((state) => state.open);
+  const close = useHudStore((state) => state.close);
+  const toggle = useHudStore((state) => state.toggle);
+  const setActivePanel = useHudStore((state) => state.setActivePanel);
+  const setPosition = useHudStore((state) => state.setPosition);
+  const toggleMinimized = useHudStore((state) => state.toggleMinimized);
+  const mergedConfig = useMemo(
+    () => ({
+      ...DEFAULT_HUD_CONFIG,
+      ...config
+    }),
+    [config]
+  );
+  const value = useMemo(
+    () => ({
+      // State
+      isOpen,
+      activePanel,
+      position,
+      isMinimized,
+      // Actions
+      open,
+      close,
+      toggle,
+      setActivePanel,
+      setPosition,
+      toggleMinimized,
+      // Services
+      lensService: lensService ?? null,
+      forkService: forkService ?? null,
+      simulationService: simulationService ?? null,
+      diagnosticsService: diagnosticsService ?? null,
+      anchorClient: anchorClient ?? null,
+      // Config
+      config: mergedConfig
+    }),
+    [
+      isOpen,
+      activePanel,
+      position,
+      isMinimized,
+      open,
+      close,
+      toggle,
+      setActivePanel,
+      setPosition,
+      toggleMinimized,
+      lensService,
+      forkService,
+      simulationService,
+      diagnosticsService,
+      anchorClient,
+      mergedConfig
+    ]
+  );
+  return /* @__PURE__ */ jsx(HudContext.Provider, { value, children });
+}
+function useHud() {
+  const context = useContext(HudContext);
+  if (!context) {
+    throw new Error("useHud must be used within a HudProvider");
+  }
+  return context;
+}
+function useHudOptional() {
+  return useContext(HudContext);
+}
+function HudPanel({ children, className = "" }) {
+  const {
+    isOpen,
+    isMinimized,
+    activePanel,
+    position,
+    setActivePanel,
+    toggleMinimized,
+    close,
+    lensService,
+    forkService,
+    simulationService,
+    diagnosticsService
+  } = useHud();
+  if (!isOpen)
+    return null;
+  const tabs = [
+    { id: "lens", label: "Lens", available: lensService !== null },
+    { id: "simulation", label: "Simulation", available: simulationService !== null },
+    { id: "diagnostics", label: "Diagnostics", available: diagnosticsService !== null },
+    { id: "state", label: "State", available: forkService !== null },
+    { id: "signals", label: "Signals", available: true }
+  ];
+  const availableTabs = tabs.filter((t) => t.available);
+  const positionClasses = {
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `fixed ${positionClasses[position]} z-50 ${className}`,
+      style: {
+        width: isMinimized ? "200px" : "400px",
+        maxHeight: isMinimized ? "40px" : "600px",
+        backgroundColor: "rgba(0, 0, 0, 0.9)",
+        borderRadius: "8px",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)",
+        fontFamily: "ui-monospace, monospace",
+        fontSize: "12px",
+        color: "#fff",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "8px 12px",
+              borderBottom: isMinimized ? "none" : "1px solid rgba(255, 255, 255, 0.1)",
+              backgroundColor: "rgba(255, 255, 255, 0.05)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "#10b981" }, children: "\u25C6 Sigil HUD" }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: toggleMinimized,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      color: "#666",
+                      cursor: "pointer",
+                      fontSize: "14px"
+                    },
+                    children: isMinimized ? "\u25FB" : "\u2013"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: close,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      color: "#666",
+                      cursor: "pointer",
+                      fontSize: "14px"
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !isMinimized && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "2px",
+                padding: "4px",
+                backgroundColor: "rgba(255, 255, 255, 0.02)"
+              },
+              children: availableTabs.map((tab) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setActivePanel(tab.id),
+                  style: {
+                    flex: 1,
+                    padding: "6px 8px",
+                    background: activePanel === tab.id ? "rgba(16, 185, 129, 0.2)" : "transparent",
+                    border: "none",
+                    borderRadius: "4px",
+                    color: activePanel === tab.id ? "#10b981" : "#888",
+                    cursor: "pointer",
+                    fontSize: "11px",
+                    fontWeight: 500
+                  },
+                  children: tab.label
+                },
+                tab.id
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "12px",
+                overflowY: "auto",
+                maxHeight: "500px"
+              },
+              children: [
+                children,
+                !activePanel && /* @__PURE__ */ jsx("div", { style: { color: "#666", textAlign: "center", padding: "20px" }, children: "Select a panel to get started" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function HudTrigger({
+  className = "",
+  children,
+  position: overridePosition
+}) {
+  const { isOpen, toggle, position: hudPosition } = useHud();
+  const position = overridePosition ?? hudPosition;
+  const positionClasses = {
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4"
+  };
+  if (isOpen)
+    return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: toggle,
+      className: `fixed ${positionClasses[position]} z-50 ${className}`,
+      style: {
+        width: "44px",
+        height: "44px",
+        borderRadius: "50%",
+        backgroundColor: "rgba(16, 185, 129, 0.9)",
+        border: "2px solid rgba(16, 185, 129, 0.3)",
+        boxShadow: "0 4px 12px rgba(16, 185, 129, 0.3)",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "transform 0.2s, box-shadow 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.1)";
+        e.currentTarget.style.boxShadow = "0 6px 16px rgba(16, 185, 129, 0.4)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+        e.currentTarget.style.boxShadow = "0 4px 12px rgba(16, 185, 129, 0.3)";
+      },
+      "aria-label": "Open Sigil HUD",
+      title: "Sigil HUD (\u2318\u21E7D)",
+      children: children ?? /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: "18px", fontWeight: 600 }, children: "\u25C6" })
+    }
+  );
+}
+function LensPanel({ className = "" }) {
+  const { lensService, activePanel } = useHud();
+  const [inputAddress, setInputAddress] = useState("");
+  const [inputLabel, setInputLabel] = useState("");
+  const state = lensService?.getState() ?? DEFAULT_LENS_STATE;
+  const isImpersonating = state.enabled && state.impersonatedAddress !== null;
+  const handleImpersonate = useCallback(() => {
+    if (!lensService || !inputAddress)
+      return;
+    if (!/^0x[a-fA-F0-9]{40}$/.test(inputAddress)) {
+      alert("Invalid address format");
+      return;
+    }
+    lensService.setImpersonatedAddress(inputAddress);
+    setInputAddress("");
+  }, [lensService, inputAddress]);
+  const handleSaveAddress = useCallback(() => {
+    if (!lensService || !inputAddress || !inputLabel)
+      return;
+    lensService.saveAddress({
+      address: inputAddress,
+      label: inputLabel
+    });
+    setInputAddress("");
+    setInputLabel("");
+  }, [lensService, inputAddress, inputLabel]);
+  const handleStopImpersonation = useCallback(() => {
+    if (!lensService)
+      return;
+    lensService.clearImpersonation();
+  }, [lensService]);
+  if (activePanel !== "lens")
+    return null;
+  if (!lensService) {
+    return /* @__PURE__ */ jsxs("div", { className, style: { color: "#666" }, children: [
+      /* @__PURE__ */ jsx("p", { children: "Lens service not available." }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", marginTop: "8px" }, children: "Install @sigil/lens to enable address impersonation." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            marginBottom: "8px"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "50%",
+                  backgroundColor: isImpersonating ? "#10b981" : "#666"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { color: isImpersonating ? "#10b981" : "#888" }, children: isImpersonating ? "Impersonating" : "Not impersonating" })
+          ]
+        }
+      ),
+      isImpersonating && /* @__PURE__ */ jsxs("div", { style: { marginLeft: "16px" }, children: [
+        /* @__PURE__ */ jsx(
+          "code",
+          {
+            style: {
+              fontSize: "11px",
+              color: "#10b981",
+              wordBreak: "break-all"
+            },
+            children: state.impersonatedAddress
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleStopImpersonation,
+            style: {
+              display: "block",
+              marginTop: "8px",
+              padding: "4px 8px",
+              backgroundColor: "rgba(239, 68, 68, 0.2)",
+              border: "1px solid rgba(239, 68, 68, 0.3)",
+              borderRadius: "4px",
+              color: "#ef4444",
+              fontSize: "10px",
+              cursor: "pointer"
+            },
+            children: "Stop Impersonation"
+          }
+        )
+      ] }),
+      state.realAddress && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px", color: "#666", fontSize: "10px" }, children: [
+        "Real: ",
+        state.realAddress.slice(0, 6),
+        "...",
+        state.realAddress.slice(-4)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          style: {
+            display: "block",
+            color: "#888",
+            fontSize: "10px",
+            marginBottom: "4px"
+          },
+          children: "Impersonate Address"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: inputAddress,
+          onChange: (e) => setInputAddress(e.target.value),
+          placeholder: "0x...",
+          style: {
+            width: "100%",
+            padding: "8px",
+            backgroundColor: "rgba(255, 255, 255, 0.05)",
+            border: "1px solid rgba(255, 255, 255, 0.1)",
+            borderRadius: "4px",
+            color: "#fff",
+            fontSize: "11px",
+            fontFamily: "ui-monospace, monospace"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleImpersonate,
+          disabled: !inputAddress,
+          style: {
+            flex: 1,
+            padding: "6px 12px",
+            backgroundColor: inputAddress ? "rgba(16, 185, 129, 0.2)" : "rgba(255, 255, 255, 0.05)",
+            border: "1px solid rgba(16, 185, 129, 0.3)",
+            borderRadius: "4px",
+            color: inputAddress ? "#10b981" : "#666",
+            fontSize: "11px",
+            cursor: inputAddress ? "pointer" : "not-allowed"
+          },
+          children: "Impersonate"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          style: {
+            display: "block",
+            color: "#888",
+            fontSize: "10px",
+            marginBottom: "4px"
+          },
+          children: "Save with Label"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: inputLabel,
+          onChange: (e) => setInputLabel(e.target.value),
+          placeholder: "Label (e.g., Whale)",
+          style: {
+            width: "100%",
+            padding: "8px",
+            backgroundColor: "rgba(255, 255, 255, 0.05)",
+            border: "1px solid rgba(255, 255, 255, 0.1)",
+            borderRadius: "4px",
+            color: "#fff",
+            fontSize: "11px",
+            marginBottom: "8px"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSaveAddress,
+          disabled: !inputAddress || !inputLabel,
+          style: {
+            width: "100%",
+            padding: "6px 12px",
+            backgroundColor: inputAddress && inputLabel ? "rgba(59, 130, 246, 0.2)" : "rgba(255, 255, 255, 0.05)",
+            border: "1px solid rgba(59, 130, 246, 0.3)",
+            borderRadius: "4px",
+            color: inputAddress && inputLabel ? "#3b82f6" : "#666",
+            fontSize: "11px",
+            cursor: inputAddress && inputLabel ? "pointer" : "not-allowed"
+          },
+          children: "Save Address"
+        }
+      )
+    ] }),
+    state.savedAddresses.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          style: {
+            display: "block",
+            color: "#888",
+            fontSize: "10px",
+            marginBottom: "8px"
+          },
+          children: "Saved Addresses"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: state.savedAddresses.map((saved) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => lensService?.setImpersonatedAddress(saved.address),
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: "8px",
+            backgroundColor: "rgba(255, 255, 255, 0.02)",
+            border: "1px solid rgba(255, 255, 255, 0.05)",
+            borderRadius: "4px",
+            cursor: "pointer",
+            textAlign: "left"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: "11px" }, children: saved.label }),
+            /* @__PURE__ */ jsxs("code", { style: { color: "#666", fontSize: "10px" }, children: [
+              saved.address.slice(0, 6),
+              "...",
+              saved.address.slice(-4)
+            ] })
+          ]
+        },
+        saved.address
+      )) })
+    ] })
+  ] });
+}
+function SimulationPanel({ className = "" }) {
+  const { simulationService, forkService, activePanel } = useHud();
+  if (activePanel !== "simulation")
+    return null;
+  if (!simulationService) {
+    return /* @__PURE__ */ jsxs("div", { className, style: { color: "#666" }, children: [
+      /* @__PURE__ */ jsx("p", { children: "Simulation service not available." }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", marginTop: "8px" }, children: "Install @sigil/simulation to enable transaction simulation." })
+    ] });
+  }
+  const forkState = forkService?.getState();
+  const forkActive = forkState?.active ?? false;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            marginBottom: "8px"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: "8px",
+                  height: "8px",
+                  borderRadius: "50%",
+                  backgroundColor: forkActive ? "#10b981" : "#666"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { color: forkActive ? "#10b981" : "#888" }, children: forkActive ? "Fork Active" : "No Fork" })
+          ]
+        }
+      ),
+      forkState && forkActive && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            padding: "8px",
+            backgroundColor: "rgba(255, 255, 255, 0.02)",
+            borderRadius: "4px",
+            fontSize: "10px"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { color: "#888", marginBottom: "4px" }, children: [
+              "Chain: ",
+              forkState.chainId
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { color: "#888", marginBottom: "4px" }, children: [
+              "Block: ",
+              forkState.blockNumber?.toString()
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { color: "#888" }, children: [
+              "Snapshots: ",
+              forkState.snapshotCount
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "12px",
+          backgroundColor: "rgba(59, 130, 246, 0.05)",
+          border: "1px solid rgba(59, 130, 246, 0.2)",
+          borderRadius: "4px"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { color: "#3b82f6", fontSize: "11px", marginBottom: "8px" }, children: "Transaction Simulation" }),
+          /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: "10px", lineHeight: 1.6 }, children: "Simulate transactions before sending them on-chain. View gas estimates, balance changes, and potential revert reasons." }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                marginTop: "12px",
+                padding: "8px",
+                backgroundColor: "rgba(0, 0, 0, 0.2)",
+                borderRadius: "4px",
+                fontSize: "10px",
+                color: "#666"
+              },
+              children: [
+                "To simulate a transaction, use the simulation service programmatically:",
+                /* @__PURE__ */ jsx(
+                  "pre",
+                  {
+                    style: {
+                      marginTop: "8px",
+                      fontFamily: "ui-monospace, monospace",
+                      color: "#10b981"
+                    },
+                    children: `simulationService.simulate({
+  from: '0x...',
+  to: '0x...',
+  value: 1000000n,
+  data: '0x...'
+})`
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px" }, children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          style: {
+            display: "block",
+            color: "#888",
+            fontSize: "10px",
+            marginBottom: "8px"
+          },
+          children: "Simulation Features"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
+        { icon: "\u26FD", label: "Gas estimation" },
+        { icon: "\u{1F4B0}", label: "Balance changes" },
+        { icon: "\u{1F4DD}", label: "State changes" },
+        { icon: "\u274C", label: "Revert reasons" },
+        { icon: "\u{1F4CA}", label: "Event logs" }
+      ].map((feature) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "6px 8px",
+            backgroundColor: "rgba(255, 255, 255, 0.02)",
+            borderRadius: "4px",
+            fontSize: "11px",
+            color: "#888"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { children: feature.icon }),
+            /* @__PURE__ */ jsx("span", { children: feature.label })
+          ]
+        },
+        feature.label
+      )) })
+    ] })
+  ] });
+}
+var effectLabels = {
+  financial: "Financial",
+  destructive: "Destructive",
+  "soft-delete": "Soft Delete",
+  standard: "Standard",
+  local: "Local State",
+  navigation: "Navigation",
+  query: "Query"
+};
+var effectColors = {
+  financial: "#ef4444",
+  // red
+  destructive: "#f97316",
+  // orange
+  "soft-delete": "#eab308",
+  // yellow
+  standard: "#22c55e",
+  // green
+  local: "#3b82f6",
+  // blue
+  navigation: "#8b5cf6",
+  // purple
+  query: "#06b6d4"
+  // cyan
+};
+function PhysicsAnalysis({
+  effect,
+  compliance,
+  isLoading = false,
+  className = ""
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className, style: styles.container, children: /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
+      /* @__PURE__ */ jsx("span", { style: styles.title, children: "Physics" }),
+      /* @__PURE__ */ jsx("span", { style: styles.loading, children: "Analyzing..." })
+    ] }) });
+  }
+  if (!effect) {
+    return /* @__PURE__ */ jsxs("div", { className, style: styles.container, children: [
+      /* @__PURE__ */ jsx("div", { style: styles.header, children: /* @__PURE__ */ jsx("span", { style: styles.title, children: "Physics" }) }),
+      /* @__PURE__ */ jsx("div", { style: styles.empty, children: "No component selected. Select a component to view physics analysis." })
+    ] });
+  }
+  const color = effectColors[effect];
+  const behavioral = compliance?.behavioral;
+  const animation = compliance?.animation;
+  const material = compliance?.material;
+  return /* @__PURE__ */ jsxs("div", { className, style: styles.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles.effectRow, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            ...styles.effectBadge,
+            backgroundColor: `${color}20`,
+            borderColor: `${color}50`,
+            color
+          },
+          children: effectLabels[effect]
+        }
+      ),
+      behavioral && !behavioral.compliant && /* @__PURE__ */ jsx("span", { style: styles.warningBadge, children: "\u26A0 Non-compliant" })
+    ] }),
+    compliance && /* @__PURE__ */ jsxs("div", { style: styles.grid, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx("span", { style: styles.sectionLabel, children: "Behavioral" }),
+        /* @__PURE__ */ jsxs("div", { style: styles.values, children: [
+          /* @__PURE__ */ jsxs("span", { style: styles.value, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.valueLabel, children: "Sync:" }),
+            /* @__PURE__ */ jsx("span", { style: getValueStyle(behavioral?.compliant), children: behavioral?.sync ?? "unknown" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: styles.value, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.valueLabel, children: "Timing:" }),
+            /* @__PURE__ */ jsx("span", { style: getValueStyle(behavioral?.compliant), children: behavioral?.timing ? `${behavioral.timing}ms` : "unknown" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: styles.value, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.valueLabel, children: "Confirm:" }),
+            /* @__PURE__ */ jsx("span", { style: getValueStyle(behavioral?.compliant), children: behavioral?.confirmation ? "yes" : "no" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx("span", { style: styles.sectionLabel, children: "Animation" }),
+        /* @__PURE__ */ jsxs("div", { style: styles.values, children: [
+          /* @__PURE__ */ jsxs("span", { style: styles.value, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.valueLabel, children: "Easing:" }),
+            /* @__PURE__ */ jsx("span", { style: getValueStyle(animation?.compliant), children: animation?.easing ?? "unknown" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: styles.value, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.valueLabel, children: "Duration:" }),
+            /* @__PURE__ */ jsx("span", { style: getValueStyle(animation?.compliant), children: animation?.duration ? `${animation.duration}ms` : "unknown" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles.section, children: [
+        /* @__PURE__ */ jsx("span", { style: styles.sectionLabel, children: "Material" }),
+        /* @__PURE__ */ jsxs("div", { style: styles.values, children: [
+          /* @__PURE__ */ jsxs("span", { style: styles.value, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.valueLabel, children: "Surface:" }),
+            /* @__PURE__ */ jsx("span", { style: getValueStyle(material?.compliant), children: material?.surface ?? "unknown" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { style: styles.value, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.valueLabel, children: "Shadow:" }),
+            /* @__PURE__ */ jsx("span", { style: getValueStyle(material?.compliant), children: material?.shadow ?? "unknown" })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function getValueStyle(compliant) {
+  if (compliant === void 0)
+    return styles.valueText;
+  return compliant ? { ...styles.valueText, color: "#22c55e" } : { ...styles.valueText, color: "#ef4444" };
+}
+var styles = {
+  container: {
+    padding: "12px",
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "8px",
+    border: "1px solid rgba(255, 255, 255, 0.05)"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "8px"
+  },
+  title: {
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#888",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  loading: {
+    fontSize: "10px",
+    color: "#666"
+  },
+  empty: {
+    fontSize: "11px",
+    color: "#666",
+    fontStyle: "italic"
+  },
+  effectRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "12px"
+  },
+  effectBadge: {
+    padding: "4px 8px",
+    borderRadius: "4px",
+    fontSize: "11px",
+    fontWeight: 600,
+    border: "1px solid"
+  },
+  warningBadge: {
+    padding: "2px 6px",
+    borderRadius: "4px",
+    fontSize: "10px",
+    backgroundColor: "rgba(239, 68, 68, 0.1)",
+    color: "#ef4444",
+    border: "1px solid rgba(239, 68, 68, 0.2)"
+  },
+  grid: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  section: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "4px"
+  },
+  sectionLabel: {
+    fontSize: "10px",
+    fontWeight: 600,
+    color: "#666",
+    textTransform: "uppercase",
+    letterSpacing: "0.3px"
+  },
+  values: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "8px"
+  },
+  value: {
+    display: "flex",
+    gap: "4px",
+    fontSize: "11px"
+  },
+  valueLabel: {
+    color: "#888"
+  },
+  valueText: {
+    color: "#fff"
+  }
+};
+var severityColors = {
+  error: { bg: "rgba(239, 68, 68, 0.1)", border: "rgba(239, 68, 68, 0.3)", text: "#ef4444" },
+  warning: { bg: "rgba(234, 179, 8, 0.1)", border: "rgba(234, 179, 8, 0.3)", text: "#eab308" },
+  info: { bg: "rgba(59, 130, 246, 0.1)", border: "rgba(59, 130, 246, 0.3)", text: "#3b82f6" }
+};
+var severityIcons = {
+  error: "\u2715",
+  warning: "\u26A0",
+  info: "\u2139"
+};
+function IssueList({
+  issues,
+  maxVisible = 5,
+  onIssueClick,
+  className = ""
+}) {
+  const hasMore = issues.length > maxVisible;
+  const visibleIssues = hasMore ? issues.slice(0, maxVisible) : issues;
+  if (issues.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className, style: styles2.container, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles2.header, children: [
+        /* @__PURE__ */ jsx("span", { style: styles2.title, children: "Issues" }),
+        /* @__PURE__ */ jsx("span", { style: styles2.count, children: "0" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles2.empty, children: [
+        /* @__PURE__ */ jsx("span", { style: styles2.checkIcon, children: "\u2713" }),
+        "No issues detected"
+      ] })
+    ] });
+  }
+  const errorCount = issues.filter((i) => i.severity === "error").length;
+  const warningCount = issues.filter((i) => i.severity === "warning").length;
+  return /* @__PURE__ */ jsxs("div", { className, style: styles2.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles2.header, children: [
+      /* @__PURE__ */ jsx("span", { style: styles2.title, children: "Issues" }),
+      /* @__PURE__ */ jsxs("div", { style: styles2.counts, children: [
+        errorCount > 0 && /* @__PURE__ */ jsxs("span", { style: { ...styles2.countBadge, ...severityColors.error }, children: [
+          errorCount,
+          " error",
+          errorCount !== 1 ? "s" : ""
+        ] }),
+        warningCount > 0 && /* @__PURE__ */ jsxs("span", { style: { ...styles2.countBadge, ...severityColors.warning }, children: [
+          warningCount,
+          " warning",
+          warningCount !== 1 ? "s" : ""
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: styles2.list, children: visibleIssues.map((issue, index) => {
+      const colors2 = severityColors[issue.severity];
+      const icon = severityIcons[issue.severity];
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onIssueClick?.(issue),
+          style: {
+            ...styles2.issue,
+            backgroundColor: colors2.bg,
+            borderColor: colors2.border
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { ...styles2.icon, color: colors2.text }, children: icon }),
+            /* @__PURE__ */ jsxs("div", { style: styles2.issueContent, children: [
+              /* @__PURE__ */ jsxs("span", { style: styles2.issueCode, children: [
+                "[",
+                issue.code,
+                "]"
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: styles2.issueMessage, children: issue.message }),
+              issue.suggestion && /* @__PURE__ */ jsxs("span", { style: styles2.issueSuggestion, children: [
+                "Fix: ",
+                issue.suggestion
+              ] })
+            ] })
+          ]
+        },
+        `${issue.code}-${index}`
+      );
+    }) }),
+    hasMore && /* @__PURE__ */ jsxs("div", { style: styles2.more, children: [
+      "+ ",
+      issues.length - maxVisible,
+      " more issues"
+    ] })
+  ] });
+}
+var styles2 = {
+  container: {
+    padding: "12px",
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "8px",
+    border: "1px solid rgba(255, 255, 255, 0.05)"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "12px"
+  },
+  title: {
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#888",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  count: {
+    fontSize: "10px",
+    color: "#666"
+  },
+  counts: {
+    display: "flex",
+    gap: "6px"
+  },
+  countBadge: {
+    padding: "2px 6px",
+    borderRadius: "4px",
+    fontSize: "10px",
+    border: "1px solid"
+  },
+  empty: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    fontSize: "11px",
+    color: "#22c55e"
+  },
+  checkIcon: {
+    fontWeight: 600
+  },
+  list: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px"
+  },
+  issue: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "8px",
+    padding: "8px",
+    border: "1px solid",
+    borderRadius: "4px",
+    cursor: "pointer",
+    textAlign: "left",
+    width: "100%",
+    transition: "opacity 0.15s ease-out"
+  },
+  icon: {
+    fontSize: "12px",
+    fontWeight: 600,
+    flexShrink: 0,
+    marginTop: "1px"
+  },
+  issueContent: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    overflow: "hidden"
+  },
+  issueCode: {
+    fontSize: "10px",
+    fontWeight: 600,
+    color: "#888",
+    fontFamily: "monospace"
+  },
+  issueMessage: {
+    fontSize: "11px",
+    color: "#fff",
+    lineHeight: 1.4
+  },
+  issueSuggestion: {
+    fontSize: "10px",
+    color: "#888",
+    fontStyle: "italic"
+  },
+  more: {
+    marginTop: "8px",
+    fontSize: "10px",
+    color: "#666",
+    textAlign: "center"
+  }
+};
+var sourceConfig = {
+  "on-chain": { label: "On-Chain", color: "#22c55e", bgColor: "rgba(34, 197, 94, 0.1)" },
+  indexed: { label: "Indexed", color: "#3b82f6", bgColor: "rgba(59, 130, 246, 0.1)" },
+  cached: { label: "Cached", color: "#eab308", bgColor: "rgba(234, 179, 8, 0.1)" },
+  unknown: { label: "Unknown", color: "#666", bgColor: "rgba(100, 100, 100, 0.1)" }
+};
+function getStaleness(props) {
+  const { source, blockNumber, currentBlock, timestamp } = props;
+  if (source === "on-chain" && blockNumber && currentBlock) {
+    const blocksBehind = currentBlock - blockNumber;
+    if (blocksBehind <= 1)
+      return { level: "fresh", label: "current" };
+    if (blocksBehind <= 5)
+      return { level: "stale", label: `${blocksBehind} blocks behind` };
+    return { level: "very-stale", label: `${blocksBehind} blocks behind` };
+  }
+  if (timestamp) {
+    const secondsAgo = Math.floor((Date.now() - timestamp) / 1e3);
+    if (secondsAgo < 30)
+      return { level: "fresh", label: "just now" };
+    if (secondsAgo < 60)
+      return { level: "fresh", label: `${secondsAgo}s ago` };
+    if (secondsAgo < 300)
+      return { level: "stale", label: `${Math.floor(secondsAgo / 60)}m ago` };
+    return { level: "very-stale", label: `${Math.floor(secondsAgo / 60)}m ago` };
+  }
+  return { level: "fresh", label: "" };
+}
+var stalenessColors = {
+  fresh: "#22c55e",
+  stale: "#eab308",
+  "very-stale": "#ef4444"
+};
+function DataSourceIndicator({
+  source,
+  blockNumber,
+  currentBlock,
+  timestamp,
+  expanded = false,
+  onClick,
+  className = ""
+}) {
+  const config = sourceConfig[source];
+  const staleness = getStaleness({ source, blockNumber, currentBlock, timestamp });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      className,
+      style: {
+        ...styles3.container,
+        cursor: onClick ? "pointer" : "default"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              ...styles3.badge,
+              backgroundColor: config.bgColor,
+              borderColor: `${config.color}40`,
+              color: config.color
+            },
+            children: config.label
+          }
+        ),
+        staleness.label && /* @__PURE__ */ jsxs("span", { style: { ...styles3.staleness, color: stalenessColors[staleness.level] }, children: [
+          /* @__PURE__ */ jsx("span", { style: styles3.dot, children: "\u25CF" }),
+          staleness.label
+        ] }),
+        expanded && blockNumber && /* @__PURE__ */ jsxs("div", { style: styles3.expanded, children: [
+          /* @__PURE__ */ jsx("span", { style: styles3.detailLabel, children: "Block:" }),
+          /* @__PURE__ */ jsxs("span", { style: styles3.detailValue, children: [
+            "#",
+            blockNumber.toLocaleString()
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var styles3 = {
+  container: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "0",
+    backgroundColor: "transparent",
+    border: "none",
+    fontSize: "10px",
+    fontFamily: "inherit"
+  },
+  badge: {
+    padding: "2px 6px",
+    borderRadius: "4px",
+    fontSize: "9px",
+    fontWeight: 600,
+    border: "1px solid",
+    textTransform: "uppercase",
+    letterSpacing: "0.3px"
+  },
+  staleness: {
+    display: "flex",
+    alignItems: "center",
+    gap: "3px",
+    fontSize: "10px"
+  },
+  dot: {
+    fontSize: "6px"
+  },
+  expanded: {
+    display: "flex",
+    gap: "4px",
+    marginLeft: "4px",
+    paddingLeft: "4px",
+    borderLeft: "1px solid rgba(255, 255, 255, 0.1)"
+  },
+  detailLabel: {
+    color: "#666"
+  },
+  detailValue: {
+    color: "#888",
+    fontFamily: "monospace"
+  }
+};
+var initialAnalysisState = {
+  component: null,
+  effect: null,
+  compliance: null,
+  issues: [],
+  isLoading: false
+};
+function DiagnosticsPanel({ className = "" }) {
+  const { diagnosticsService, activePanel, config } = useHud();
+  const [analysis, setAnalysis] = useState(initialAnalysisState);
+  const [symptom, setSymptom] = useState("");
+  const [diagnosis, setDiagnosis] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showSymptomInput, setShowSymptomInput] = useState(false);
+  useCallback(
+    async (componentName, code) => {
+      if (!diagnosticsService)
+        return;
+      setAnalysis((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const result = await diagnosticsService.analyze(componentName, code);
+        setAnalysis({
+          component: result.component,
+          effect: result.effect,
+          compliance: result.compliance,
+          issues: result.issues,
+          isLoading: false
+        });
+      } catch (error) {
+        setAnalysis({
+          ...initialAnalysisState,
+          isLoading: false
+        });
+      }
+    },
+    [diagnosticsService]
+  );
+  const handleDiagnose = useCallback(async () => {
+    if (!diagnosticsService || !symptom)
+      return;
+    setIsLoading(true);
+    try {
+      const result = diagnosticsService.diagnose(symptom);
+      setDiagnosis(result);
+    } catch (error) {
+      setDiagnosis(`Error: ${error instanceof Error ? error.message : "Unknown error"}`);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [diagnosticsService, symptom]);
+  const handleClear = useCallback(() => {
+    setSymptom("");
+    setDiagnosis(null);
+    setShowSymptomInput(false);
+  }, []);
+  const handleCaptureObservation = useCallback(() => {
+    const event = new KeyboardEvent("keydown", {
+      key: "o",
+      metaKey: true,
+      shiftKey: true
+    });
+    window.dispatchEvent(event);
+  }, []);
+  const handleRecordSignal = useCallback(() => {
+    console.log("Record signal triggered");
+  }, []);
+  const handleIssueClick = useCallback((issue) => {
+    console.log("Issue clicked:", issue.code);
+  }, []);
+  if (activePanel !== "diagnostics")
+    return null;
+  if (!diagnosticsService) {
+    return /* @__PURE__ */ jsxs("div", { className, style: styles4.container, children: [
+      /* @__PURE__ */ jsx("div", { style: styles4.header, children: /* @__PURE__ */ jsx("span", { style: styles4.title, children: "Diagnostics" }) }),
+      /* @__PURE__ */ jsxs("div", { style: styles4.unavailable, children: [
+        /* @__PURE__ */ jsx("p", { style: styles4.unavailableText, children: "Diagnostics service not available." }),
+        /* @__PURE__ */ jsx("p", { style: styles4.unavailableHint, children: "Install @sigil/diagnostics to enable physics analysis." })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, style: styles4.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles4.header, children: [
+      /* @__PURE__ */ jsx("span", { style: styles4.title, children: "Diagnostics" }),
+      /* @__PURE__ */ jsxs("div", { style: styles4.quickActions, children: [
+        config.observationCapture && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCaptureObservation,
+            style: styles4.quickActionButton,
+            title: "Capture Observation (Cmd+Shift+O)",
+            children: "\u{1F4F8}"
+          }
+        ),
+        config.signalCapture && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleRecordSignal,
+            style: styles4.quickActionButton,
+            title: "Record Signal",
+            children: "\u{1F4E1}"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      PhysicsAnalysis,
+      {
+        effect: analysis.effect,
+        compliance: analysis.compliance,
+        isLoading: analysis.isLoading
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: styles4.section, children: [
+      /* @__PURE__ */ jsx("span", { style: styles4.sectionLabel, children: "Data Sources" }),
+      /* @__PURE__ */ jsx("div", { style: styles4.dataSourceRow, children: /* @__PURE__ */ jsx(DataSourceIndicator, { source: "on-chain", blockNumber: 19234567, currentBlock: 19234569 }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: styles4.section, children: /* @__PURE__ */ jsx(
+      IssueList,
+      {
+        issues: analysis.issues,
+        onIssueClick: handleIssueClick,
+        maxVisible: 3
+      }
+    ) }),
+    !showSymptomInput ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setShowSymptomInput(true),
+        style: styles4.showDiagnoseButton,
+        children: "+ Describe a symptom to diagnose"
+      }
+    ) : /* @__PURE__ */ jsxs("div", { style: styles4.diagnoseSection, children: [
+      /* @__PURE__ */ jsx("label", { style: styles4.inputLabel, children: "Describe the issue or symptom" }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: symptom,
+          onChange: (e) => setSymptom(e.target.value),
+          placeholder: "e.g., Dialog flickers on open, Hydration mismatch, Button feels slow...",
+          rows: 2,
+          style: styles4.textarea
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: styles4.diagnoseActions, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleDiagnose,
+            disabled: !symptom || isLoading,
+            style: {
+              ...styles4.diagnoseButton,
+              opacity: symptom ? 1 : 0.5,
+              cursor: symptom ? "pointer" : "not-allowed"
+            },
+            children: isLoading ? "Analyzing..." : "Diagnose"
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { onClick: handleClear, style: styles4.cancelButton, children: "Cancel" })
+      ] })
+    ] }),
+    diagnosis && /* @__PURE__ */ jsx("div", { style: styles4.diagnosisResult, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: styles4.diagnosisContent,
+        dangerouslySetInnerHTML: {
+          __html: formatDiagnosis(diagnosis)
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { style: styles4.quickDiagnose, children: [
+      /* @__PURE__ */ jsx("span", { style: styles4.quickDiagnoseLabel, children: "Quick Diagnose" }),
+      /* @__PURE__ */ jsx("div", { style: styles4.quickDiagnoseGrid, children: ["hydration mismatch", "dialog glitch", "slow performance", "layout shift"].map(
+        (quick) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setSymptom(quick);
+              setShowSymptomInput(true);
+            },
+            style: styles4.quickDiagnoseButton,
+            children: quick
+          },
+          quick
+        )
+      ) })
+    ] })
+  ] });
+}
+function formatDiagnosis(text) {
+  return text.replace(/\*\*(.*?)\*\*/g, '<strong style="color: #10b981">$1</strong>').replace(
+    /`([^`]+)`/g,
+    '<code style="background: rgba(255,255,255,0.1); padding: 2px 4px; border-radius: 2px;">$1</code>'
+  ).replace(
+    /```(\w+)?\n([\s\S]*?)```/g,
+    '<pre style="background: rgba(0,0,0,0.3); padding: 8px; border-radius: 4px; overflow-x: auto; margin: 8px 0;">$2</pre>'
+  );
+}
+var styles4 = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  title: {
+    fontSize: "12px",
+    fontWeight: 600,
+    color: "#fff"
+  },
+  quickActions: {
+    display: "flex",
+    gap: "4px"
+  },
+  quickActionButton: {
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "12px",
+    transition: "background-color 0.15s ease-out"
+  },
+  unavailable: {
+    padding: "16px",
+    textAlign: "center"
+  },
+  unavailableText: {
+    color: "#666",
+    fontSize: "11px",
+    margin: 0
+  },
+  unavailableHint: {
+    color: "#555",
+    fontSize: "10px",
+    marginTop: "4px"
+  },
+  section: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  sectionLabel: {
+    fontSize: "10px",
+    fontWeight: 600,
+    color: "#888",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  dataSourceRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  },
+  showDiagnoseButton: {
+    width: "100%",
+    padding: "8px 12px",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px dashed rgba(255, 255, 255, 0.1)",
+    borderRadius: "4px",
+    color: "#666",
+    fontSize: "11px",
+    cursor: "pointer",
+    textAlign: "left"
+  },
+  diagnoseSection: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  inputLabel: {
+    fontSize: "10px",
+    color: "#888"
+  },
+  textarea: {
+    width: "100%",
+    padding: "8px",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "4px",
+    color: "#fff",
+    fontSize: "11px",
+    fontFamily: "inherit",
+    resize: "vertical"
+  },
+  diagnoseActions: {
+    display: "flex",
+    gap: "8px"
+  },
+  diagnoseButton: {
+    flex: 1,
+    padding: "6px 12px",
+    backgroundColor: "rgba(16, 185, 129, 0.2)",
+    border: "1px solid rgba(16, 185, 129, 0.3)",
+    borderRadius: "4px",
+    color: "#10b981",
+    fontSize: "11px",
+    cursor: "pointer"
+  },
+  cancelButton: {
+    padding: "6px 12px",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "4px",
+    color: "#888",
+    fontSize: "11px",
+    cursor: "pointer"
+  },
+  diagnosisResult: {
+    padding: "12px",
+    backgroundColor: "rgba(16, 185, 129, 0.05)",
+    border: "1px solid rgba(16, 185, 129, 0.2)",
+    borderRadius: "4px"
+  },
+  diagnosisContent: {
+    fontSize: "11px",
+    color: "#fff",
+    whiteSpace: "pre-wrap",
+    lineHeight: 1.6
+  },
+  quickDiagnose: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  quickDiagnoseLabel: {
+    fontSize: "10px",
+    color: "#888"
+  },
+  quickDiagnoseGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "4px"
+  },
+  quickDiagnoseButton: {
+    padding: "6px 8px",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px solid rgba(255, 255, 255, 0.05)",
+    borderRadius: "4px",
+    color: "#888",
+    fontSize: "10px",
+    cursor: "pointer",
+    textAlign: "center"
+  }
+};
+function StateComparison({ className = "" }) {
+  const { lensService, forkService, activePanel } = useHud();
+  if (activePanel !== "state")
+    return null;
+  const lensState = lensService?.getState() ?? DEFAULT_LENS_STATE;
+  const forkState = forkService?.getState();
+  const isImpersonating = lensState.enabled && lensState.impersonatedAddress !== null;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          style: {
+            display: "block",
+            color: "#888",
+            fontSize: "10px",
+            marginBottom: "8px"
+          },
+          children: "Address Context"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  padding: "8px",
+                  backgroundColor: "rgba(255, 255, 255, 0.02)",
+                  borderRadius: "4px",
+                  border: !isImpersonating ? "1px solid rgba(16, 185, 129, 0.3)" : "1px solid rgba(255, 255, 255, 0.05)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        marginBottom: "4px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { style: { color: "#888", fontSize: "10px" }, children: "Real" }),
+                        !isImpersonating && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontSize: "9px",
+                              padding: "2px 6px",
+                              backgroundColor: "rgba(16, 185, 129, 0.2)",
+                              borderRadius: "4px",
+                              color: "#10b981"
+                            },
+                            children: "Active"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "code",
+                    {
+                      style: {
+                        fontSize: "10px",
+                        color: lensState.realAddress ? "#fff" : "#666",
+                        wordBreak: "break-all"
+                      },
+                      children: lensState.realAddress ?? "Not connected"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  padding: "8px",
+                  backgroundColor: "rgba(255, 255, 255, 0.02)",
+                  borderRadius: "4px",
+                  border: isImpersonating ? "1px solid rgba(16, 185, 129, 0.3)" : "1px solid rgba(255, 255, 255, 0.05)"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        marginBottom: "4px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { style: { color: "#888", fontSize: "10px" }, children: "Impersonated" }),
+                        isImpersonating && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontSize: "9px",
+                              padding: "2px 6px",
+                              backgroundColor: "rgba(16, 185, 129, 0.2)",
+                              borderRadius: "4px",
+                              color: "#10b981"
+                            },
+                            children: "Active"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "code",
+                    {
+                      style: {
+                        fontSize: "10px",
+                        color: lensState.impersonatedAddress ? "#fff" : "#666",
+                        wordBreak: "break-all"
+                      },
+                      children: lensState.impersonatedAddress ?? "None"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    forkState && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          style: {
+            display: "block",
+            color: "#888",
+            fontSize: "10px",
+            marginBottom: "8px"
+          },
+          children: "Fork State"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            padding: "8px",
+            backgroundColor: "rgba(255, 255, 255, 0.02)",
+            borderRadius: "4px"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "1fr 1fr",
+                  gap: "8px",
+                  fontSize: "10px"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "Status: " }),
+                    /* @__PURE__ */ jsx("span", { style: { color: forkState.active ? "#10b981" : "#888" }, children: forkState.active ? "Active" : "Inactive" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "Chain: " }),
+                    /* @__PURE__ */ jsx("span", { style: { color: "#fff" }, children: forkState.chainId ?? "\u2014" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "Block: " }),
+                    /* @__PURE__ */ jsx("span", { style: { color: "#fff" }, children: forkState.blockNumber?.toString() ?? "\u2014" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { style: { color: "#666" }, children: "Snapshots: " }),
+                    /* @__PURE__ */ jsx("span", { style: { color: "#fff" }, children: forkState.snapshotCount })
+                  ] })
+                ]
+              }
+            ),
+            forkState.rpcUrl && /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#666", fontSize: "10px" }, children: "RPC: " }),
+              /* @__PURE__ */ jsx(
+                "code",
+                {
+                  style: {
+                    fontSize: "9px",
+                    color: "#888",
+                    wordBreak: "break-all"
+                  },
+                  children: forkState.rpcUrl
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "12px",
+          backgroundColor: "rgba(251, 191, 36, 0.05)",
+          border: "1px solid rgba(251, 191, 36, 0.2)",
+          borderRadius: "4px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { color: "#fbbf24", fontSize: "11px", marginBottom: "8px" },
+              children: "State Comparison"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: "10px", lineHeight: 1.6 }, children: "When impersonating, reads use the impersonated address while writes still use your real wallet. This lets you test how the UI looks for different users without affecting their funds." })
+        ]
+      }
+    )
+  ] });
+}
+function generateObservationId() {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 7);
+  return `obs-${timestamp}-${random}`;
+}
+function useObservationCapture({
+  enabled = true,
+  onObservation
+} = {}) {
+  const observationsRef = useRef([]);
+  const capture = useCallback(
+    async (content, type = "insight", context, tags = []) => {
+      const observation = {
+        id: generateObservationId(),
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        type,
+        content,
+        tags,
+        context
+      };
+      if (enabled) {
+        observationsRef.current.push(observation);
+        onObservation?.(observation);
+        if (process.env.NODE_ENV === "development") {
+          console.log("[Sigil HUD] Observation captured:", observation);
+        }
+      }
+      return observation;
+    },
+    [enabled, onObservation]
+  );
+  const captureUserTruth = useCallback(
+    (content, context) => {
+      return capture(content, "user-truth", context, ["user-truth"]);
+    },
+    [capture]
+  );
+  const captureIssue = useCallback(
+    (content, context) => {
+      return capture(content, "issue", context, ["issue"]);
+    },
+    [capture]
+  );
+  const captureInsight = useCallback(
+    (content, context) => {
+      return capture(content, "insight", context, ["insight"]);
+    },
+    [capture]
+  );
+  const linkToSignals = useCallback(
+    (observationId, signalIds) => {
+      const observation = observationsRef.current.find(
+        (o) => o.id === observationId
+      );
+      if (observation) {
+        observation.linkedSignals = [
+          ...observation.linkedSignals ?? [],
+          ...signalIds
+        ];
+      }
+    },
+    []
+  );
+  const getObservations = useCallback(() => {
+    return [...observationsRef.current];
+  }, []);
+  const getObservationsByType = useCallback((type) => {
+    return observationsRef.current.filter((o) => o.type === type);
+  }, []);
+  const clearObservations = useCallback(() => {
+    observationsRef.current = [];
+  }, []);
+  return {
+    capture,
+    captureUserTruth,
+    captureIssue,
+    captureInsight,
+    linkToSignals,
+    getObservations,
+    getObservationsByType,
+    clearObservations
+  };
+}
+var typeConfig = {
+  "user-truth": {
+    label: "User Truth",
+    color: "#22c55e",
+    bgColor: "rgba(34, 197, 94, 0.1)",
+    description: "What users actually do vs. what we assumed"
+  },
+  issue: {
+    label: "Issue",
+    color: "#ef4444",
+    bgColor: "rgba(239, 68, 68, 0.1)",
+    description: "Problems, bugs, or friction points"
+  },
+  insight: {
+    label: "Insight",
+    color: "#3b82f6",
+    bgColor: "rgba(59, 130, 246, 0.1)",
+    description: "Patterns, discoveries, or aha moments"
+  }
+};
+var suggestedTags = {
+  "user-truth": ["assumption-violated", "behavior-change", "feedback", "preference"],
+  issue: ["ux", "performance", "physics-violation", "accessibility", "mobile"],
+  insight: ["pattern", "optimization", "physics", "taste", "workflow"]
+};
+function ObservationCaptureModal({
+  isOpen,
+  onClose,
+  onCapture,
+  componentContext,
+  className = ""
+}) {
+  const [type, setType] = useState("insight");
+  const [content, setContent] = useState("");
+  const [tags, setTags] = useState([]);
+  const [customTag, setCustomTag] = useState("");
+  const contentRef = useRef(null);
+  const { capture } = useObservationCapture({
+    enabled: true,
+    onObservation: onCapture
+  });
+  useEffect(() => {
+    if (isOpen && contentRef.current) {
+      contentRef.current.focus();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      setType("insight");
+      setContent("");
+      setTags([]);
+      setCustomTag("");
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen)
+      return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+      if (e.key === "Enter" && e.metaKey) {
+        handleSubmit();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, content]);
+  const toggleTag = useCallback((tag) => {
+    setTags(
+      (prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    );
+  }, []);
+  const addCustomTag = useCallback(() => {
+    if (customTag && !tags.includes(customTag)) {
+      setTags((prev) => [...prev, customTag]);
+      setCustomTag("");
+    }
+  }, [customTag, tags]);
+  const handleSubmit = useCallback(async () => {
+    if (!content.trim())
+      return;
+    await capture(
+      content.trim(),
+      type,
+      componentContext,
+      tags
+    );
+    onClose();
+  }, [content, type, componentContext, tags, capture, onClose]);
+  if (!isOpen)
+    return null;
+  const config = typeConfig[type];
+  const suggested = suggestedTags[type];
+  return /* @__PURE__ */ jsx("div", { className, style: styles5.overlay, children: /* @__PURE__ */ jsxs("div", { style: styles5.modal, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles5.header, children: [
+      /* @__PURE__ */ jsx("h2", { style: styles5.title, children: "Capture Observation" }),
+      /* @__PURE__ */ jsx("button", { onClick: onClose, style: styles5.closeButton, children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles5.section, children: [
+      /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Type" }),
+      /* @__PURE__ */ jsx("div", { style: styles5.typeButtons, children: Object.keys(typeConfig).map((t) => {
+        const c = typeConfig[t];
+        const isSelected = type === t;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setType(t),
+            style: {
+              ...styles5.typeButton,
+              backgroundColor: isSelected ? c.bgColor : "rgba(255, 255, 255, 0.02)",
+              borderColor: isSelected ? c.color : "rgba(255, 255, 255, 0.1)",
+              color: isSelected ? c.color : "#888"
+            },
+            children: c.label
+          },
+          t
+        );
+      }) }),
+      /* @__PURE__ */ jsx("p", { style: styles5.typeDescription, children: config.description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles5.section, children: [
+      /* @__PURE__ */ jsx("label", { style: styles5.label, children: "What did you observe?" }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: contentRef,
+          value: content,
+          onChange: (e) => setContent(e.target.value),
+          placeholder: type === "user-truth" ? 'e.g., "Users expected the claim button to show pending state, but it shows stale balance..."' : type === "issue" ? 'e.g., "Dialog animation causes layout shift on mobile Safari..."' : 'e.g., "Power users prefer 500ms timing over 800ms for financial operations..."',
+          rows: 4,
+          style: styles5.textarea
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles5.section, children: [
+      /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Tags" }),
+      /* @__PURE__ */ jsxs("div", { style: styles5.tagContainer, children: [
+        suggested.map((tag) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => toggleTag(tag),
+            style: {
+              ...styles5.tag,
+              backgroundColor: tags.includes(tag) ? config.bgColor : "rgba(255, 255, 255, 0.02)",
+              borderColor: tags.includes(tag) ? config.color : "rgba(255, 255, 255, 0.1)",
+              color: tags.includes(tag) ? config.color : "#888"
+            },
+            children: tag
+          },
+          tag
+        )),
+        tags.filter((t) => !suggested.includes(t)).map((tag) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => toggleTag(tag),
+            style: {
+              ...styles5.tag,
+              backgroundColor: config.bgColor,
+              borderColor: config.color,
+              color: config.color
+            },
+            children: [
+              tag,
+              " \xD7"
+            ]
+          },
+          tag
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles5.customTagRow, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: customTag,
+            onChange: (e) => setCustomTag(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && addCustomTag(),
+            placeholder: "Add custom tag...",
+            style: styles5.customTagInput
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: addCustomTag,
+            disabled: !customTag,
+            style: {
+              ...styles5.addTagButton,
+              opacity: customTag ? 1 : 0.5
+            },
+            children: "+"
+          }
+        )
+      ] })
+    ] }),
+    componentContext && /* @__PURE__ */ jsxs("div", { style: styles5.section, children: [
+      /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Context" }),
+      /* @__PURE__ */ jsxs("div", { style: styles5.contextRow, children: [
+        componentContext.name && /* @__PURE__ */ jsxs("span", { style: styles5.contextBadge, children: [
+          "Component: ",
+          componentContext.name
+        ] }),
+        componentContext.effect && /* @__PURE__ */ jsxs("span", { style: styles5.contextBadge, children: [
+          "Effect: ",
+          componentContext.effect
+        ] }),
+        componentContext.lensAddress && /* @__PURE__ */ jsxs("span", { style: styles5.contextBadge, children: [
+          "Lens: ",
+          componentContext.lensAddress.slice(0, 6),
+          "..."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles5.actions, children: [
+      /* @__PURE__ */ jsx("button", { onClick: onClose, style: styles5.cancelButton, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSubmit,
+          disabled: !content.trim(),
+          style: {
+            ...styles5.submitButton,
+            backgroundColor: content.trim() ? config.bgColor : "rgba(255, 255, 255, 0.02)",
+            borderColor: content.trim() ? config.color : "rgba(255, 255, 255, 0.1)",
+            color: content.trim() ? config.color : "#666",
+            cursor: content.trim() ? "pointer" : "not-allowed"
+          },
+          children: "Capture (\u2318+Enter)"
+        }
+      )
+    ] })
+  ] }) });
+}
+var styles5 = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    backdropFilter: "blur(4px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e4
+  },
+  modal: {
+    width: "100%",
+    maxWidth: "480px",
+    backgroundColor: "#1a1a1a",
+    borderRadius: "12px",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    boxShadow: "0 20px 40px rgba(0, 0, 0, 0.4)",
+    overflow: "hidden"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "16px 20px",
+    borderBottom: "1px solid rgba(255, 255, 255, 0.05)"
+  },
+  title: {
+    margin: 0,
+    fontSize: "14px",
+    fontWeight: 600,
+    color: "#fff"
+  },
+  closeButton: {
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "4px",
+    color: "#888",
+    fontSize: "20px",
+    cursor: "pointer"
+  },
+  section: {
+    padding: "16px 20px"
+  },
+  label: {
+    display: "block",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#888",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    marginBottom: "8px"
+  },
+  typeButtons: {
+    display: "flex",
+    gap: "8px"
+  },
+  typeButton: {
+    flex: 1,
+    padding: "8px 12px",
+    borderRadius: "6px",
+    border: "1px solid",
+    fontSize: "12px",
+    fontWeight: 500,
+    cursor: "pointer",
+    transition: "all 0.15s ease-out"
+  },
+  typeDescription: {
+    margin: "8px 0 0 0",
+    fontSize: "11px",
+    color: "#666",
+    fontStyle: "italic"
+  },
+  textarea: {
+    width: "100%",
+    padding: "12px",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "6px",
+    color: "#fff",
+    fontSize: "13px",
+    fontFamily: "inherit",
+    resize: "vertical",
+    lineHeight: 1.5
+  },
+  tagContainer: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "6px"
+  },
+  tag: {
+    padding: "4px 8px",
+    borderRadius: "4px",
+    border: "1px solid",
+    fontSize: "11px",
+    cursor: "pointer",
+    transition: "all 0.15s ease-out"
+  },
+  customTagRow: {
+    display: "flex",
+    gap: "8px",
+    marginTop: "8px"
+  },
+  customTagInput: {
+    flex: 1,
+    padding: "6px 10px",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "4px",
+    color: "#fff",
+    fontSize: "11px",
+    fontFamily: "inherit"
+  },
+  addTagButton: {
+    width: "28px",
+    height: "28px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "4px",
+    color: "#888",
+    fontSize: "16px",
+    cursor: "pointer"
+  },
+  contextRow: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "6px"
+  },
+  contextBadge: {
+    padding: "4px 8px",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px solid rgba(255, 255, 255, 0.05)",
+    borderRadius: "4px",
+    fontSize: "10px",
+    color: "#888"
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+    padding: "16px 20px",
+    borderTop: "1px solid rgba(255, 255, 255, 0.05)"
+  },
+  cancelButton: {
+    padding: "8px 16px",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "6px",
+    color: "#888",
+    fontSize: "12px",
+    cursor: "pointer"
+  },
+  submitButton: {
+    padding: "8px 16px",
+    borderRadius: "6px",
+    border: "1px solid",
+    fontSize: "12px",
+    fontWeight: 500,
+    transition: "all 0.15s ease-out"
+  }
+};
+function useSignalCapture({
+  enabled = true,
+  onSignal
+} = {}) {
+  const signalsRef = useRef([]);
+  const appendSignal = useCallback(
+    async (signalData) => {
+      if (!enabled)
+        return;
+      const signal = {
+        ...signalData,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        source: "hud"
+      };
+      signalsRef.current.push(signal);
+      onSignal?.(signal);
+      if (process.env.NODE_ENV === "development") {
+        console.log("[Sigil HUD] Signal captured:", signal);
+      }
+    },
+    [enabled, onSignal]
+  );
+  const accept = useCallback(
+    (component, effect, craftType = "generate") => {
+      return appendSignal({
+        signal: "ACCEPT",
+        component: {
+          name: component,
+          effect,
+          craft_type: craftType
+        }
+      });
+    },
+    [appendSignal]
+  );
+  const modify = useCallback(
+    (component, effect, change, learning) => {
+      return appendSignal({
+        signal: "MODIFY",
+        component: {
+          name: component,
+          effect,
+          craft_type: "generate"
+        },
+        change,
+        learning
+      });
+    },
+    [appendSignal]
+  );
+  const reject = useCallback(
+    (component, effect, reason) => {
+      return appendSignal({
+        signal: "REJECT",
+        component: {
+          name: component,
+          effect,
+          craft_type: "generate"
+        },
+        rejection_reason: reason
+      });
+    },
+    [appendSignal]
+  );
+  const getSignals = useCallback(() => {
+    return [...signalsRef.current];
+  }, []);
+  const clearSignals = useCallback(() => {
+    signalsRef.current = [];
+  }, []);
+  return {
+    appendSignal,
+    accept,
+    modify,
+    reject,
+    getSignals,
+    clearSignals
+  };
+}
+var defaultOptions = [
+  {
+    id: "looks-good",
+    label: "Looks good",
+    description: "The physics feel right for this use case",
+    signal: "ACCEPT"
+  },
+  {
+    id: "timing-off",
+    label: "Timing feels off",
+    description: "The duration should be faster or slower",
+    signal: "MODIFY"
+  },
+  {
+    id: "animation-wrong",
+    label: "Animation wrong",
+    description: "The easing or motion feels incorrect",
+    signal: "MODIFY"
+  },
+  {
+    id: "needs-confirmation",
+    label: "Needs confirmation",
+    description: "Should have (or shouldn't have) a confirmation step",
+    signal: "MODIFY"
+  },
+  {
+    id: "other",
+    label: "Something else",
+    description: "Describe what feels wrong",
+    signal: "MODIFY"
+  }
+];
+function FeedbackPrompt({
+  componentName,
+  effect,
+  physics,
+  options = defaultOptions,
+  onFeedback,
+  onClose,
+  visible = true,
+  className = ""
+}) {
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [customFeedback, setCustomFeedback] = useState("");
+  const [showDetailInput, setShowDetailInput] = useState(false);
+  const { accept, modify, reject } = useSignalCapture({ enabled: true });
+  const { captureInsight, captureIssue } = useObservationCapture({ enabled: true });
+  const handleSelectOption = useCallback((option) => {
+    setSelectedOption(option);
+    if (option.signal === "ACCEPT") {
+      handleSubmit(option, "");
+    } else if (option.id === "other") {
+      setShowDetailInput(true);
+    } else {
+      setShowDetailInput(true);
+    }
+  }, []);
+  const handleSubmit = useCallback(
+    async (option, detail) => {
+      let observation;
+      if (option.signal === "ACCEPT") {
+        await accept(componentName, effect, "diagnose");
+      } else if (option.signal === "MODIFY") {
+        const content = detail || option.description;
+        observation = await captureInsight(content, {
+          component: componentName,
+          effect
+        });
+        await modify(
+          componentName,
+          effect,
+          { from: "current", to: content },
+          { inference: `User feedback: ${option.label}` }
+        );
+      } else if (option.signal === "REJECT") {
+        observation = await captureIssue(detail || option.description, {
+          component: componentName,
+          effect
+        });
+        await reject(componentName, effect, detail || option.description);
+      }
+      const signal = {
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        signal: option.signal,
+        source: "hud",
+        component: {
+          name: componentName,
+          effect,
+          craft_type: "diagnose"
+        },
+        physics,
+        hud_context: {
+          panel_visible: true,
+          diagnostics_shown: true,
+          observation_linked: observation?.id
+        }
+      };
+      onFeedback?.(signal, observation);
+      setSelectedOption(null);
+      setCustomFeedback("");
+      setShowDetailInput(false);
+      onClose?.();
+    },
+    [componentName, effect, physics, accept, modify, reject, captureInsight, captureIssue, onFeedback, onClose]
+  );
+  const handleCancel = useCallback(() => {
+    setSelectedOption(null);
+    setCustomFeedback("");
+    setShowDetailInput(false);
+    onClose?.();
+  }, [onClose]);
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ jsxs("div", { className, style: styles6.container, children: [
+    /* @__PURE__ */ jsx("div", { style: styles6.promptRow, children: /* @__PURE__ */ jsx("span", { style: styles6.promptText, children: "Does this feel right for your user?" }) }),
+    !showDetailInput && /* @__PURE__ */ jsx("div", { style: styles6.optionsGrid, children: options.map((option) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => handleSelectOption(option),
+        style: {
+          ...styles6.optionButton,
+          borderColor: option.signal === "ACCEPT" ? "rgba(34, 197, 94, 0.3)" : option.signal === "REJECT" ? "rgba(239, 68, 68, 0.3)" : "rgba(255, 255, 255, 0.1)"
+        },
+        children: /* @__PURE__ */ jsx("span", { style: styles6.optionLabel, children: option.label })
+      },
+      option.id
+    )) }),
+    showDetailInput && selectedOption && /* @__PURE__ */ jsxs("div", { style: styles6.detailSection, children: [
+      /* @__PURE__ */ jsx("p", { style: styles6.detailPrompt, children: selectedOption.id === "other" ? "What feels wrong?" : `Describe what would feel better:` }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: customFeedback,
+          onChange: (e) => setCustomFeedback(e.target.value),
+          placeholder: selectedOption.id === "timing-off" ? 'e.g., "Should be faster, around 500ms..."' : selectedOption.id === "animation-wrong" ? 'e.g., "Should use spring instead of ease-out..."' : "Describe the issue or desired feel...",
+          rows: 2,
+          style: styles6.detailTextarea,
+          autoFocus: true
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: styles6.detailActions, children: [
+        /* @__PURE__ */ jsx("button", { onClick: handleCancel, style: styles6.cancelButton, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleSubmit(selectedOption, customFeedback),
+            disabled: selectedOption.id === "other" && !customFeedback.trim(),
+            style: {
+              ...styles6.submitButton,
+              opacity: selectedOption.id === "other" && !customFeedback.trim() ? 0.5 : 1
+            },
+            children: "Submit Feedback"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var styles6 = {
+  container: {
+    padding: "12px",
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    borderRadius: "8px",
+    border: "1px solid rgba(255, 255, 255, 0.05)"
+  },
+  promptRow: {
+    marginBottom: "12px"
+  },
+  promptText: {
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#888",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  optionsGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gap: "6px"
+  },
+  optionButton: {
+    padding: "8px 10px",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px solid",
+    borderRadius: "4px",
+    textAlign: "left",
+    cursor: "pointer",
+    transition: "all 0.15s ease-out"
+  },
+  optionLabel: {
+    fontSize: "11px",
+    color: "#fff"
+  },
+  detailSection: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  detailPrompt: {
+    margin: 0,
+    fontSize: "12px",
+    color: "#888"
+  },
+  detailTextarea: {
+    width: "100%",
+    padding: "8px",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "4px",
+    color: "#fff",
+    fontSize: "11px",
+    fontFamily: "inherit",
+    resize: "vertical"
+  },
+  detailActions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px"
+  },
+  cancelButton: {
+    padding: "6px 12px",
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "4px",
+    color: "#888",
+    fontSize: "11px",
+    cursor: "pointer"
+  },
+  submitButton: {
+    padding: "6px 12px",
+    backgroundColor: "rgba(59, 130, 246, 0.2)",
+    border: "1px solid rgba(59, 130, 246, 0.3)",
+    borderRadius: "4px",
+    color: "#3b82f6",
+    fontSize: "11px",
+    cursor: "pointer"
+  }
+};
+function useKeyboardShortcuts({
+  enabled = true,
+  customShortcuts = {}
+} = {}) {
+  const toggle = useHudStore((state) => state.toggle);
+  const setActivePanel = useHudStore((state) => state.setActivePanel);
+  const isOpen = useHudStore((state) => state.isOpen);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!enabled)
+        return;
+      const target = event.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === "d") {
+        event.preventDefault();
+        toggle();
+        return;
+      }
+      if (!isOpen)
+        return;
+      const panelMap = {
+        "1": "lens",
+        "2": "simulation",
+        "3": "diagnostics",
+        "4": "state",
+        "5": "signals"
+      };
+      if (panelMap[event.key]) {
+        event.preventDefault();
+        setActivePanel(panelMap[event.key]);
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        toggle();
+        return;
+      }
+      const shortcutKey = getShortcutKey(event);
+      if (customShortcuts[shortcutKey]) {
+        event.preventDefault();
+        customShortcuts[shortcutKey]();
+      }
+    },
+    [enabled, toggle, setActivePanel, isOpen, customShortcuts]
+  );
+  useEffect(() => {
+    if (!enabled)
+      return;
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, handleKeyDown]);
+}
+function getShortcutKey(event) {
+  const parts = [];
+  if (event.metaKey)
+    parts.push("cmd");
+  if (event.ctrlKey)
+    parts.push("ctrl");
+  if (event.altKey)
+    parts.push("alt");
+  if (event.shiftKey)
+    parts.push("shift");
+  parts.push(event.key.toLowerCase());
+  return parts.join("+");
+}
+function getShortcutHelp() {
+  return [
+    { keys: "\u2318\u21E7D", description: "Toggle HUD" },
+    { keys: "1-5", description: "Switch panels (when open)" },
+    { keys: "Esc", description: "Close HUD" }
+  ];
+}
+var DEFAULT_STALE_SECONDS = 60;
+var DEFAULT_VERY_STALE_SECONDS = 300;
+var DEFAULT_STALE_BLOCKS = 5;
+var DEFAULT_VERY_STALE_BLOCKS = 20;
+var DEFAULT_POLL_INTERVAL = 1e4;
+function calculateTimeStaleness(fetchedAt, staleThreshold, veryStaleThreshold) {
+  const secondsAgo = Math.floor((Date.now() - fetchedAt) / 1e3);
+  if (secondsAgo < 30) {
+    return { isStale: false, level: "fresh", label: "just now" };
+  }
+  if (secondsAgo < 60) {
+    return { isStale: false, level: "fresh", label: `${secondsAgo}s ago` };
+  }
+  if (secondsAgo < staleThreshold) {
+    return { isStale: false, level: "fresh", label: `${Math.floor(secondsAgo / 60)}m ago` };
+  }
+  if (secondsAgo < veryStaleThreshold) {
+    return { isStale: true, level: "stale", label: `${Math.floor(secondsAgo / 60)}m ago` };
+  }
+  return { isStale: true, level: "very-stale", label: `${Math.floor(secondsAgo / 60)}m ago` };
+}
+function calculateBlockStaleness(blockNumber, currentBlock, staleThreshold, veryStaleThreshold) {
+  const blocksBehind = currentBlock - blockNumber;
+  if (blocksBehind <= 1) {
+    return { isStale: false, level: "fresh", label: "current" };
+  }
+  if (blocksBehind <= staleThreshold) {
+    return { isStale: false, level: "fresh", label: `${blocksBehind} blocks behind` };
+  }
+  if (blocksBehind <= veryStaleThreshold) {
+    return { isStale: true, level: "stale", label: `${blocksBehind} blocks behind` };
+  }
+  return { isStale: true, level: "very-stale", label: `${blocksBehind} blocks behind` };
+}
+function useDataSource({
+  source,
+  blockNumber,
+  pollInterval = DEFAULT_POLL_INTERVAL,
+  staleThresholdSeconds = DEFAULT_STALE_SECONDS,
+  veryStaleThresholdSeconds = DEFAULT_VERY_STALE_SECONDS,
+  staleThresholdBlocks = DEFAULT_STALE_BLOCKS,
+  veryStaleThresholdBlocks = DEFAULT_VERY_STALE_BLOCKS,
+  onStale
+}) {
+  const [meta, setMeta] = useState(() => ({
+    source,
+    fetchedAt: Date.now(),
+    blockNumber,
+    currentBlock: blockNumber,
+    isStale: false,
+    stalenessLevel: "fresh",
+    stalenessLabel: "just now"
+  }));
+  const wasStaleRef = useRef(false);
+  const onStaleRef = useRef(onStale);
+  onStaleRef.current = onStale;
+  const markRefreshed = useCallback(
+    (newBlockNumber) => {
+      setMeta((prev) => ({
+        ...prev,
+        fetchedAt: Date.now(),
+        blockNumber: newBlockNumber ?? prev.blockNumber,
+        currentBlock: newBlockNumber ?? prev.currentBlock,
+        isStale: false,
+        stalenessLevel: "fresh",
+        stalenessLabel: "just now"
+      }));
+      wasStaleRef.current = false;
+    },
+    []
+  );
+  const updateCurrentBlock = useCallback((newCurrentBlock) => {
+    setMeta((prev) => ({
+      ...prev,
+      currentBlock: newCurrentBlock
+    }));
+  }, []);
+  const recalculateStaleness = useCallback(() => {
+    setMeta((prev) => {
+      let staleness;
+      if (source === "on-chain" && prev.blockNumber && prev.currentBlock) {
+        staleness = calculateBlockStaleness(
+          prev.blockNumber,
+          prev.currentBlock,
+          staleThresholdBlocks,
+          veryStaleThresholdBlocks
+        );
+      } else {
+        staleness = calculateTimeStaleness(
+          prev.fetchedAt,
+          staleThresholdSeconds,
+          veryStaleThresholdSeconds
+        );
+      }
+      if (staleness.isStale && !wasStaleRef.current) {
+        wasStaleRef.current = true;
+        onStaleRef.current?.();
+      }
+      return {
+        ...prev,
+        isStale: staleness.isStale,
+        stalenessLevel: staleness.level,
+        stalenessLabel: staleness.label
+      };
+    });
+  }, [
+    source,
+    staleThresholdSeconds,
+    veryStaleThresholdSeconds,
+    staleThresholdBlocks,
+    veryStaleThresholdBlocks
+  ]);
+  useEffect(() => {
+    const interval = setInterval(recalculateStaleness, pollInterval);
+    return () => clearInterval(interval);
+  }, [recalculateStaleness, pollInterval]);
+  useEffect(() => {
+    setMeta((prev) => ({
+      ...prev,
+      source,
+      blockNumber: blockNumber ?? prev.blockNumber
+    }));
+    recalculateStaleness();
+  }, [source, blockNumber, recalculateStaleness]);
+  return {
+    meta,
+    markRefreshed,
+    updateCurrentBlock,
+    recalculateStaleness
+  };
+}
+function useMultipleDataSources(entries) {
+  const [sources, setSources] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const newSources = /* @__PURE__ */ new Map();
+    const now = Date.now();
+    for (const entry of entries) {
+      newSources.set(entry.key, {
+        source: entry.source,
+        fetchedAt: now,
+        blockNumber: entry.blockNumber,
+        currentBlock: entry.blockNumber,
+        isStale: false,
+        stalenessLevel: "fresh",
+        stalenessLabel: "just now"
+      });
+    }
+    setSources(newSources);
+  }, [entries]);
+  const markRefreshed = useCallback((key, newBlockNumber) => {
+    setSources((prev) => {
+      const newMap = new Map(prev);
+      const existing = newMap.get(key);
+      if (existing) {
+        newMap.set(key, {
+          ...existing,
+          fetchedAt: Date.now(),
+          blockNumber: newBlockNumber ?? existing.blockNumber,
+          currentBlock: newBlockNumber ?? existing.currentBlock,
+          isStale: false,
+          stalenessLevel: "fresh",
+          stalenessLabel: "just now"
+        });
+      }
+      return newMap;
+    });
+  }, []);
+  const getMeta = useCallback(
+    (key) => {
+      return sources.get(key);
+    },
+    [sources]
+  );
+  const getStaleSources = useCallback(() => {
+    const stale = [];
+    sources.forEach((meta, key) => {
+      if (meta.isStale) {
+        stale.push(key);
+      }
+    });
+    return stale;
+  }, [sources]);
+  return {
+    sources,
+    markRefreshed,
+    getMeta,
+    getStaleSources
+  };
+}
+
+// src/styles/theme.ts
+var colors = {
+  // Brand
+  primary: "#10b981",
+  // emerald-500
+  primaryLight: "rgba(16, 185, 129, 0.2)",
+  primaryBorder: "rgba(16, 185, 129, 0.3)",
+  // Status
+  success: "#22c55e",
+  // green-500
+  successLight: "rgba(34, 197, 94, 0.1)",
+  successBorder: "rgba(34, 197, 94, 0.3)",
+  warning: "#eab308",
+  // yellow-500
+  warningLight: "rgba(234, 179, 8, 0.1)",
+  warningBorder: "rgba(234, 179, 8, 0.3)",
+  error: "#ef4444",
+  // red-500
+  errorLight: "rgba(239, 68, 68, 0.1)",
+  errorBorder: "rgba(239, 68, 68, 0.3)",
+  info: "#3b82f6",
+  // blue-500
+  infoLight: "rgba(59, 130, 246, 0.1)",
+  infoBorder: "rgba(59, 130, 246, 0.3)",
+  // Neutral
+  text: "#fff",
+  textMuted: "#888",
+  textDim: "#666",
+  textDisabled: "#555",
+  background: "rgba(0, 0, 0, 0.9)",
+  backgroundElevated: "rgba(26, 26, 26, 1)",
+  backgroundHover: "rgba(255, 255, 255, 0.05)",
+  backgroundActive: "rgba(255, 255, 255, 0.08)",
+  backgroundInput: "rgba(255, 255, 255, 0.02)",
+  border: "rgba(255, 255, 255, 0.1)",
+  borderSubtle: "rgba(255, 255, 255, 0.05)",
+  borderStrong: "rgba(255, 255, 255, 0.2)",
+  // Effects
+  financial: "#ef4444",
+  destructive: "#f97316",
+  softDelete: "#eab308",
+  standard: "#22c55e",
+  local: "#3b82f6",
+  navigation: "#8b5cf6",
+  query: "#06b6d4"
+};
+var typography = {
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  fontFamilySans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+  // Sizes
+  xs: "10px",
+  sm: "11px",
+  base: "12px",
+  md: "13px",
+  lg: "14px",
+  // Weights
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  // Line heights
+  lineHeightTight: 1.25,
+  lineHeightNormal: 1.5,
+  lineHeightRelaxed: 1.6,
+  // Letter spacing
+  letterSpacingTight: "-0.02em",
+  letterSpacingNormal: "0",
+  letterSpacingWide: "0.5px"
+};
+var spacing = {
+  xs: "4px",
+  sm: "6px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "20px",
+  "3xl": "24px"
+};
+var radii = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px",
+  full: "9999px"
+};
+var shadows = {
+  sm: "0 2px 4px rgba(0, 0, 0, 0.2)",
+  md: "0 4px 12px rgba(0, 0, 0, 0.3)",
+  lg: "0 8px 20px rgba(0, 0, 0, 0.4)",
+  xl: "0 20px 40px rgba(0, 0, 0, 0.5)",
+  primary: "0 4px 12px rgba(16, 185, 129, 0.3)",
+  primaryHover: "0 6px 16px rgba(16, 185, 129, 0.4)"
+};
+var transitions = {
+  fast: "0.1s ease-out",
+  normal: "0.15s ease-out",
+  slow: "0.2s ease-out",
+  spring: "0.3s cubic-bezier(0.34, 1.56, 0.64, 1)"
+};
+var zIndex = {
+  base: 1,
+  dropdown: 100,
+  sticky: 1e3,
+  fixed: 5e3,
+  modal: 1e4,
+  tooltip: 15e3
+};
+var patterns = {
+  // Buttons
+  button: {
+    base: {
+      padding: `${spacing.md} ${spacing.lg}`,
+      borderRadius: radii.md,
+      fontSize: typography.sm,
+      fontWeight: typography.medium,
+      cursor: "pointer",
+      transition: transitions.normal,
+      border: "1px solid"
+    },
+    primary: {
+      backgroundColor: colors.primaryLight,
+      borderColor: colors.primaryBorder,
+      color: colors.primary
+    },
+    secondary: {
+      backgroundColor: colors.backgroundInput,
+      borderColor: colors.border,
+      color: colors.textMuted
+    },
+    danger: {
+      backgroundColor: colors.errorLight,
+      borderColor: colors.errorBorder,
+      color: colors.error
+    }
+  },
+  // Inputs
+  input: {
+    base: {
+      padding: spacing.md,
+      backgroundColor: colors.backgroundInput,
+      border: `1px solid ${colors.border}`,
+      borderRadius: radii.md,
+      color: colors.text,
+      fontSize: typography.sm,
+      fontFamily: typography.fontFamily
+    }
+  },
+  // Cards
+  card: {
+    base: {
+      padding: spacing.lg,
+      backgroundColor: "rgba(0, 0, 0, 0.2)",
+      borderRadius: radii.lg,
+      border: `1px solid ${colors.borderSubtle}`
+    }
+  },
+  // Labels
+  label: {
+    base: {
+      fontSize: typography.xs,
+      fontWeight: typography.semibold,
+      color: colors.textMuted,
+      textTransform: "uppercase",
+      letterSpacing: typography.letterSpacingWide
+    }
+  },
+  // Badges
+  badge: {
+    base: {
+      padding: `2px ${spacing.sm}`,
+      borderRadius: radii.sm,
+      fontSize: "9px",
+      fontWeight: typography.semibold,
+      border: "1px solid",
+      textTransform: "uppercase",
+      letterSpacing: "0.3px"
+    }
+  }
+};
+var effectColors2 = {
+  financial: colors.financial,
+  destructive: colors.destructive,
+  "soft-delete": colors.softDelete,
+  standard: colors.standard,
+  local: colors.local,
+  navigation: colors.navigation,
+  query: colors.query
+};
+function getEffectColor(effect) {
+  return effectColors2[effect] ?? colors.textMuted;
+}
+function createStyles(styles7) {
+  return styles7;
+}
+
+export { DEFAULT_HUD_CONFIG, DEFAULT_HUD_STATE, DEFAULT_LENS_STATE, DataSourceIndicator, DiagnosticsPanel, FeedbackPrompt, HudPanel, HudProvider, HudTrigger, IssueList, LensPanel, ObservationCaptureModal, PhysicsAnalysis, SimulationPanel, StateComparison, colors, createStyles, effectColors2 as effectColors, getEffectColor, getHudState, getShortcutHelp, patterns, radii, shadows, spacing, transitions, typography, useDataSource, useHud, useHudOptional, useHudStore, useKeyboardShortcuts, useMultipleDataSources, useObservationCapture, useSignalCapture, zIndex };