@thehoneyjar/sigil-hud 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,911 @@
+import { ReactNode } from 'react';
+import * as zustand_middleware from 'zustand/middleware';
+import * as zustand from 'zustand';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * @sigil/hud
+ *
+ * Types for the diagnostic HUD.
+ */
+
+interface LensState {
+    enabled: boolean;
+    impersonatedAddress: string | null;
+    realAddress: string | null;
+    savedAddresses: Array<{
+        address: string;
+        label: string;
+    }>;
+}
+interface LensService {
+    getState(): LensState;
+    setImpersonatedAddress(address: string): void;
+    clearImpersonation(): void;
+    saveAddress(entry: {
+        address: string;
+        label: string;
+    }): void;
+    enable(): void;
+    disable(): void;
+}
+interface ForkState {
+    active: boolean;
+    chainId?: number;
+    blockNumber?: number;
+    snapshotCount?: number;
+    rpcUrl?: string;
+}
+interface ForkService {
+    getState(): ForkState;
+}
+interface SimulationState {
+    isRunning: boolean;
+    lastResult: unknown | null;
+}
+interface SimulationService {
+    getState(): SimulationState;
+}
+interface DiagnosticIssue {
+    severity: 'error' | 'warning' | 'info';
+    code: string;
+    message: string;
+    suggestion?: string;
+}
+type EffectType = 'financial' | 'destructive' | 'soft-delete' | 'standard' | 'local' | 'navigation' | 'query';
+interface BehavioralCompliance {
+    sync: string;
+    timing: number;
+    confirmation: boolean;
+    compliant: boolean;
+}
+interface AnimationCompliance {
+    easing: string;
+    duration: number;
+    compliant: boolean;
+}
+interface MaterialCompliance {
+    surface: string;
+    shadow: string;
+    compliant: boolean;
+}
+interface ComplianceResult {
+    behavioral: BehavioralCompliance;
+    animation: AnimationCompliance;
+    material: MaterialCompliance;
+}
+interface DiagnosticResult {
+    component: string;
+    effect: EffectType;
+    issues: DiagnosticIssue[];
+    compliance: ComplianceResult;
+    suggestions: string[];
+}
+interface DiagnosticsService {
+    analyze(component: string, code?: string): Promise<DiagnosticResult>;
+    diagnose(symptom: string): string;
+    checkCompliance(effect: string, physics: unknown): boolean;
+    detectEffect(keywords: string[], types?: string[]): string;
+}
+type AnchorClient = unknown;
+/**
+ * HUD panel position
+ */
+type HudPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+/**
+ * HUD configuration
+ */
+interface HudConfig {
+    /** Enable keyboard shortcuts */
+    shortcuts?: boolean;
+    /** Default panel position */
+    position?: HudPosition;
+    /** Persist panel state to localStorage */
+    persist?: boolean;
+    /** Enable observation capture */
+    observationCapture?: boolean;
+    /** Enable signal capture */
+    signalCapture?: boolean;
+    /** Default panel to open */
+    defaultPanel?: HudPanelType;
+}
+/**
+ * HUD panel types
+ */
+type HudPanelType = 'lens' | 'simulation' | 'diagnostics' | 'state' | 'signals';
+/**
+ * HUD state
+ */
+interface HudState {
+    /** Whether HUD is open */
+    isOpen: boolean;
+    /** Current active panel */
+    activePanel: HudPanelType | null;
+    /** Panel position */
+    position: HudPosition;
+    /** Whether HUD is minimized */
+    isMinimized: boolean;
+}
+/**
+ * HUD actions
+ */
+interface HudActions {
+    /** Open the HUD */
+    open: () => void;
+    /** Close the HUD */
+    close: () => void;
+    /** Toggle HUD visibility */
+    toggle: () => void;
+    /** Set active panel */
+    setActivePanel: (panel: HudPanelType | null) => void;
+    /** Set position */
+    setPosition: (position: HudPosition) => void;
+    /** Toggle minimized state */
+    toggleMinimized: () => void;
+}
+/**
+ * HUD context value
+ */
+interface HudContextValue extends HudState, HudActions {
+    /** Lens service instance (if available) */
+    lensService: LensService | null;
+    /** Fork service instance (if available) */
+    forkService: ForkService | null;
+    /** Simulation service instance (if available) */
+    simulationService: SimulationService | null;
+    /** Diagnostics service instance (if available) */
+    diagnosticsService: DiagnosticsService | null;
+    /** Anchor client instance (if available) */
+    anchorClient: AnchorClient | null;
+    /** HUD configuration */
+    config: HudConfig;
+}
+/**
+ * HUD provider props
+ */
+interface HudProviderProps {
+    children: ReactNode;
+    config?: HudConfig;
+    /** Optional package instances (for composition) */
+    lensService?: LensService;
+    forkService?: ForkService;
+    simulationService?: SimulationService;
+    diagnosticsService?: DiagnosticsService;
+    anchorClient?: AnchorClient;
+}
+/**
+ * Observation for capturing user insights
+ */
+interface Observation {
+    id: string;
+    timestamp: string;
+    type: 'user-truth' | 'issue' | 'insight';
+    content: string;
+    tags: string[];
+    context?: {
+        component?: string;
+        effect?: string;
+        lensAddress?: string;
+        screenshot?: string;
+    };
+    linkedSignals?: string[];
+}
+/**
+ * Taste signal for learning user preferences
+ */
+interface Signal {
+    timestamp: string;
+    signal: 'ACCEPT' | 'MODIFY' | 'REJECT';
+    source: 'cli' | 'toolbar' | 'hud';
+    component: {
+        name: string;
+        effect: string;
+        craft_type: 'generate' | 'diagnose' | 'repair';
+    };
+    physics?: {
+        behavioral?: {
+            sync: string;
+            timing: string;
+            confirmation: string;
+        };
+        animation?: {
+            easing: string;
+            duration: string;
+        };
+        material?: {
+            surface: string;
+            shadow: string;
+            radius: string;
+        };
+    };
+    hud_context?: {
+        panel_visible: boolean;
+        diagnostics_shown: boolean;
+        observation_linked?: string;
+    };
+    change?: {
+        from: string;
+        to: string;
+    };
+    learning?: {
+        inference: string;
+        recommendation?: string;
+    };
+    rejection_reason?: string;
+}
+/**
+ * Default HUD state
+ */
+declare const DEFAULT_HUD_STATE: HudState;
+/**
+ * Default HUD config
+ */
+declare const DEFAULT_HUD_CONFIG: HudConfig;
+/**
+ * Default lens state for when lens service is not available
+ */
+declare const DEFAULT_LENS_STATE: LensState;
+
+/**
+ * Combined HUD store type
+ */
+type HudStore = HudState & HudActions;
+/**
+ * Create the HUD store
+ */
+declare const useHudStore: zustand.UseBoundStore<Omit<zustand.StoreApi<HudStore>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<zustand_middleware.PersistOptions<HudStore, {
+            position: HudPosition;
+            isMinimized: boolean;
+        }>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => void | Promise<void>;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: HudStore) => void) => () => void;
+        onFinishHydration: (fn: (state: HudStore) => void) => () => void;
+        getOptions: () => Partial<zustand_middleware.PersistOptions<HudStore, {
+            position: HudPosition;
+            isMinimized: boolean;
+        }>>;
+    };
+}>;
+/**
+ * Get HUD store state (for non-React contexts)
+ */
+declare function getHudState(): HudState;
+
+/**
+ * HUD Provider component
+ */
+declare function HudProvider({ children, config, lensService, forkService, simulationService, diagnosticsService, anchorClient, }: HudProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access HUD context
+ *
+ * @throws Error if used outside HudProvider
+ */
+declare function useHud(): HudContextValue;
+/**
+ * Hook to access HUD context (returns null if not in provider)
+ */
+declare function useHudOptional(): HudContextValue | null;
+
+/**
+ * Props for HudPanel
+ */
+interface HudPanelProps {
+    /** Panel content */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Main HUD panel component
+ */
+declare function HudPanel({ children, className }: HudPanelProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Props for HudTrigger
+ */
+interface HudTriggerProps {
+    /** Custom class name */
+    className?: string;
+    /** Custom children (replaces default icon) */
+    children?: ReactNode;
+    /** Override position (defaults to HUD position) */
+    position?: HudPosition;
+}
+/**
+ * Floating trigger button to open the HUD
+ */
+declare function HudTrigger({ className, children, position: overridePosition, }: HudTriggerProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Lens Panel Component
+ *
+ * Panel for address impersonation controls.
+ * FR-005 fix: All hooks called unconditionally at top level.
+ */
+/**
+ * Props for LensPanel
+ */
+interface LensPanelProps {
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Lens panel for address impersonation
+ */
+declare function LensPanel({ className }: LensPanelProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Simulation Panel Component
+ *
+ * Panel for transaction simulation controls.
+ */
+/**
+ * Props for SimulationPanel
+ */
+interface SimulationPanelProps {
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Simulation panel for transaction dry-runs
+ */
+declare function SimulationPanel({ className }: SimulationPanelProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Diagnostics Panel Component
+ *
+ * Panel for physics compliance checking and issue detection.
+ * Implements TASK-201 requirements:
+ * - Physics analysis display
+ * - Data source indicators
+ * - Issue detection
+ * - Quick action buttons
+ */
+/**
+ * Props for DiagnosticsPanel
+ */
+interface DiagnosticsPanelProps {
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Diagnostics panel for physics analysis
+ */
+declare function DiagnosticsPanel({ className }: DiagnosticsPanelProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Props for PhysicsAnalysis
+ */
+interface PhysicsAnalysisProps {
+    /** Detected effect type */
+    effect: EffectType | null;
+    /** Physics compliance result */
+    compliance?: ComplianceResult | null;
+    /** Whether analysis is loading */
+    isLoading?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Physics Analysis component
+ */
+declare function PhysicsAnalysis({ effect, compliance, isLoading, className, }: PhysicsAnalysisProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for IssueList
+ */
+interface IssueListProps {
+    /** Issues to display */
+    issues: DiagnosticIssue[];
+    /** Maximum issues to show (expandable) */
+    maxVisible?: number;
+    /** Callback when issue is clicked */
+    onIssueClick?: (issue: DiagnosticIssue) => void;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Issue List component
+ */
+declare function IssueList({ issues, maxVisible, onIssueClick, className, }: IssueListProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Data Source Indicator Component
+ *
+ * Shows the source and staleness of displayed data values.
+ * Full implementation in TASK-202.
+ */
+/**
+ * Data source type
+ */
+type DataSourceType = 'on-chain' | 'indexed' | 'cached' | 'unknown';
+/**
+ * Props for DataSourceIndicator
+ */
+interface DataSourceIndicatorProps {
+    /** Data source type */
+    source: DataSourceType;
+    /** Block number for on-chain data */
+    blockNumber?: number;
+    /** Current block for staleness calculation */
+    currentBlock?: number;
+    /** Timestamp for time-based staleness */
+    timestamp?: number;
+    /** Whether to show expanded details */
+    expanded?: boolean;
+    /** Callback when clicked */
+    onClick?: () => void;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Data Source Indicator component
+ */
+declare function DataSourceIndicator({ source, blockNumber, currentBlock, timestamp, expanded, onClick, className, }: DataSourceIndicatorProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * State Comparison Component
+ *
+ * Compare state between real and impersonated addresses.
+ */
+/**
+ * Props for StateComparison
+ */
+interface StateComparisonProps {
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * State comparison panel
+ */
+declare function StateComparison({ className }: StateComparisonProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Props for ObservationCaptureModal
+ */
+interface ObservationCaptureModalProps {
+    /** Whether the modal is visible */
+    isOpen: boolean;
+    /** Callback to close the modal */
+    onClose: () => void;
+    /** Callback when observation is captured */
+    onCapture?: (observation: Observation) => void;
+    /** Current component context */
+    componentContext?: {
+        name?: string;
+        effect?: string;
+        lensAddress?: string;
+    };
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Observation Capture Modal
+ */
+declare function ObservationCaptureModal({ isOpen, onClose, onCapture, componentContext, className, }: ObservationCaptureModalProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Feedback option
+ */
+interface FeedbackOption {
+    id: string;
+    label: string;
+    description: string;
+    signal: 'ACCEPT' | 'MODIFY' | 'REJECT';
+}
+/**
+ * Props for FeedbackPrompt
+ */
+interface FeedbackPromptProps {
+    /** Component name being reviewed */
+    componentName: string;
+    /** Detected effect type */
+    effect: string;
+    /** Current physics values */
+    physics?: {
+        behavioral?: {
+            sync: string;
+            timing: string;
+            confirmation: string;
+        };
+        animation?: {
+            easing: string;
+            duration: string;
+        };
+        material?: {
+            surface: string;
+            shadow: string;
+            radius: string;
+        };
+    };
+    /** Custom feedback options */
+    options?: FeedbackOption[];
+    /** Callback when feedback is submitted */
+    onFeedback?: (signal: Signal, observation?: Observation) => void;
+    /** Callback to close the prompt */
+    onClose?: () => void;
+    /** Whether to show the prompt */
+    visible?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * Feedback Prompt Component
+ */
+declare function FeedbackPrompt({ componentName, effect, physics, options, onFeedback, onClose, visible, className, }: FeedbackPromptProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Keyboard Shortcuts Hook
+ *
+ * Handle keyboard shortcuts for HUD navigation.
+ */
+/**
+ * Props for useKeyboardShortcuts
+ */
+interface UseKeyboardShortcutsProps {
+    /** Whether shortcuts are enabled */
+    enabled?: boolean;
+    /** Custom shortcuts to add */
+    customShortcuts?: Record<string, () => void>;
+}
+/**
+ * Hook to handle keyboard shortcuts for HUD
+ */
+declare function useKeyboardShortcuts({ enabled, customShortcuts, }?: UseKeyboardShortcutsProps): void;
+/**
+ * Get keyboard shortcut help text
+ */
+declare function getShortcutHelp(): Array<{
+    keys: string;
+    description: string;
+}>;
+
+/**
+ * Signal Capture Hook
+ *
+ * Capture taste signals from HUD interactions.
+ */
+
+/**
+ * Props for useSignalCapture
+ */
+interface UseSignalCaptureProps {
+    /** Whether signal capture is enabled */
+    enabled?: boolean;
+    /** Callback when signal is captured */
+    onSignal?: (signal: Signal) => void;
+}
+/**
+ * Hook to capture taste signals from HUD
+ */
+declare function useSignalCapture({ enabled, onSignal, }?: UseSignalCaptureProps): {
+    appendSignal: (signalData: Omit<Signal, 'timestamp' | 'source'>) => Promise<void>;
+    accept: (component: string, effect: string, craftType?: Signal['component']['craft_type']) => Promise<void>;
+    modify: (component: string, effect: string, change: {
+        from: string;
+        to: string;
+    }, learning?: {
+        inference: string;
+        recommendation?: string;
+    }) => Promise<void>;
+    reject: (component: string, effect: string, reason: string) => Promise<void>;
+    getSignals: () => Signal[];
+    clearSignals: () => void;
+};
+
+/**
+ * Observation Capture Hook
+ *
+ * Capture user observations and insights from HUD.
+ */
+
+/**
+ * Props for useObservationCapture
+ */
+interface UseObservationCaptureProps {
+    /** Whether observation capture is enabled */
+    enabled?: boolean;
+    /** Callback when observation is captured */
+    onObservation?: (observation: Observation) => void;
+}
+/**
+ * Hook to capture observations from HUD
+ */
+declare function useObservationCapture({ enabled, onObservation, }?: UseObservationCaptureProps): {
+    capture: (content: string, type?: Observation['type'], context?: Observation['context'], tags?: string[]) => Promise<Observation>;
+    captureUserTruth: (content: string, context?: Observation['context']) => Promise<Observation>;
+    captureIssue: (content: string, context?: Observation['context']) => Promise<Observation>;
+    captureInsight: (content: string, context?: Observation['context']) => Promise<Observation>;
+    linkToSignals: (observationId: string, signalIds: string[]) => void;
+    getObservations: () => Observation[];
+    getObservationsByType: (type: Observation['type']) => Observation[];
+    clearObservations: () => void;
+};
+
+/**
+ * Data Source Hook
+ *
+ * Track data source and staleness for displayed values.
+ * Implements TASK-202: State source tracing.
+ */
+
+/**
+ * Data source metadata
+ */
+interface DataSourceMeta {
+    /** Data source type */
+    source: DataSourceType;
+    /** When the data was fetched */
+    fetchedAt: number;
+    /** Block number (for on-chain data) */
+    blockNumber?: number;
+    /** Current block (for staleness calculation) */
+    currentBlock?: number;
+    /** Whether the data is stale */
+    isStale: boolean;
+    /** Staleness level */
+    stalenessLevel: 'fresh' | 'stale' | 'very-stale';
+    /** Human-readable staleness label */
+    stalenessLabel: string;
+}
+/**
+ * Props for useDataSource
+ */
+interface UseDataSourceProps {
+    /** Data source type */
+    source: DataSourceType;
+    /** Block number for on-chain data */
+    blockNumber?: number;
+    /** Interval to check staleness (ms) */
+    pollInterval?: number;
+    /** Threshold for "stale" in seconds (for time-based) */
+    staleThresholdSeconds?: number;
+    /** Threshold for "very stale" in seconds (for time-based) */
+    veryStaleThresholdSeconds?: number;
+    /** Threshold for "stale" in blocks (for block-based) */
+    staleThresholdBlocks?: number;
+    /** Threshold for "very stale" in blocks (for block-based) */
+    veryStaleThresholdBlocks?: number;
+    /** Callback when data becomes stale */
+    onStale?: () => void;
+}
+/**
+ * Hook to track data source and staleness
+ */
+declare function useDataSource({ source, blockNumber, pollInterval, staleThresholdSeconds, veryStaleThresholdSeconds, staleThresholdBlocks, veryStaleThresholdBlocks, onStale, }: UseDataSourceProps): {
+    meta: DataSourceMeta;
+    markRefreshed: (newBlockNumber?: number) => void;
+    updateCurrentBlock: (newCurrentBlock: number) => void;
+    recalculateStaleness: () => void;
+};
+/**
+ * Props for multiple data sources
+ */
+interface DataSourceEntry {
+    /** Unique key for this data source */
+    key: string;
+    /** Data source type */
+    source: DataSourceType;
+    /** Block number (for on-chain) */
+    blockNumber?: number;
+    /** Label for display */
+    label?: string;
+}
+/**
+ * Hook to track multiple data sources
+ */
+declare function useMultipleDataSources(entries: DataSourceEntry[]): {
+    sources: Map<string, DataSourceMeta>;
+    markRefreshed: (key: string, newBlockNumber?: number) => void;
+    getMeta: (key: string) => DataSourceMeta | undefined;
+    getStaleSources: () => string[];
+};
+
+/**
+ * HUD Theme Constants
+ *
+ * Shared design tokens for consistent styling across HUD components.
+ * Implements TASK-205 styling requirements.
+ */
+/**
+ * Color palette
+ */
+declare const colors: {
+    readonly primary: "#10b981";
+    readonly primaryLight: "rgba(16, 185, 129, 0.2)";
+    readonly primaryBorder: "rgba(16, 185, 129, 0.3)";
+    readonly success: "#22c55e";
+    readonly successLight: "rgba(34, 197, 94, 0.1)";
+    readonly successBorder: "rgba(34, 197, 94, 0.3)";
+    readonly warning: "#eab308";
+    readonly warningLight: "rgba(234, 179, 8, 0.1)";
+    readonly warningBorder: "rgba(234, 179, 8, 0.3)";
+    readonly error: "#ef4444";
+    readonly errorLight: "rgba(239, 68, 68, 0.1)";
+    readonly errorBorder: "rgba(239, 68, 68, 0.3)";
+    readonly info: "#3b82f6";
+    readonly infoLight: "rgba(59, 130, 246, 0.1)";
+    readonly infoBorder: "rgba(59, 130, 246, 0.3)";
+    readonly text: "#fff";
+    readonly textMuted: "#888";
+    readonly textDim: "#666";
+    readonly textDisabled: "#555";
+    readonly background: "rgba(0, 0, 0, 0.9)";
+    readonly backgroundElevated: "rgba(26, 26, 26, 1)";
+    readonly backgroundHover: "rgba(255, 255, 255, 0.05)";
+    readonly backgroundActive: "rgba(255, 255, 255, 0.08)";
+    readonly backgroundInput: "rgba(255, 255, 255, 0.02)";
+    readonly border: "rgba(255, 255, 255, 0.1)";
+    readonly borderSubtle: "rgba(255, 255, 255, 0.05)";
+    readonly borderStrong: "rgba(255, 255, 255, 0.2)";
+    readonly financial: "#ef4444";
+    readonly destructive: "#f97316";
+    readonly softDelete: "#eab308";
+    readonly standard: "#22c55e";
+    readonly local: "#3b82f6";
+    readonly navigation: "#8b5cf6";
+    readonly query: "#06b6d4";
+};
+/**
+ * Typography
+ */
+declare const typography: {
+    readonly fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+    readonly fontFamilySans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+    readonly xs: "10px";
+    readonly sm: "11px";
+    readonly base: "12px";
+    readonly md: "13px";
+    readonly lg: "14px";
+    readonly normal: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+    readonly lineHeightTight: 1.25;
+    readonly lineHeightNormal: 1.5;
+    readonly lineHeightRelaxed: 1.6;
+    readonly letterSpacingTight: "-0.02em";
+    readonly letterSpacingNormal: "0";
+    readonly letterSpacingWide: "0.5px";
+};
+/**
+ * Spacing
+ */
+declare const spacing: {
+    readonly xs: "4px";
+    readonly sm: "6px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly '2xl': "20px";
+    readonly '3xl': "24px";
+};
+/**
+ * Border radius
+ */
+declare const radii: {
+    readonly sm: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly xl: "12px";
+    readonly full: "9999px";
+};
+/**
+ * Shadows
+ */
+declare const shadows: {
+    readonly sm: "0 2px 4px rgba(0, 0, 0, 0.2)";
+    readonly md: "0 4px 12px rgba(0, 0, 0, 0.3)";
+    readonly lg: "0 8px 20px rgba(0, 0, 0, 0.4)";
+    readonly xl: "0 20px 40px rgba(0, 0, 0, 0.5)";
+    readonly primary: "0 4px 12px rgba(16, 185, 129, 0.3)";
+    readonly primaryHover: "0 6px 16px rgba(16, 185, 129, 0.4)";
+};
+/**
+ * Transitions
+ */
+declare const transitions: {
+    readonly fast: "0.1s ease-out";
+    readonly normal: "0.15s ease-out";
+    readonly slow: "0.2s ease-out";
+    readonly spring: "0.3s cubic-bezier(0.34, 1.56, 0.64, 1)";
+};
+/**
+ * Z-index
+ */
+declare const zIndex: {
+    readonly base: 1;
+    readonly dropdown: 100;
+    readonly sticky: 1000;
+    readonly fixed: 5000;
+    readonly modal: 10000;
+    readonly tooltip: 15000;
+};
+/**
+ * Common style patterns
+ */
+declare const patterns: {
+    readonly button: {
+        readonly base: {
+            readonly padding: "8px 12px";
+            readonly borderRadius: "6px";
+            readonly fontSize: "11px";
+            readonly fontWeight: 500;
+            readonly cursor: "pointer";
+            readonly transition: "0.15s ease-out";
+            readonly border: "1px solid";
+        };
+        readonly primary: {
+            readonly backgroundColor: "rgba(16, 185, 129, 0.2)";
+            readonly borderColor: "rgba(16, 185, 129, 0.3)";
+            readonly color: "#10b981";
+        };
+        readonly secondary: {
+            readonly backgroundColor: "rgba(255, 255, 255, 0.02)";
+            readonly borderColor: "rgba(255, 255, 255, 0.1)";
+            readonly color: "#888";
+        };
+        readonly danger: {
+            readonly backgroundColor: "rgba(239, 68, 68, 0.1)";
+            readonly borderColor: "rgba(239, 68, 68, 0.3)";
+            readonly color: "#ef4444";
+        };
+    };
+    readonly input: {
+        readonly base: {
+            readonly padding: "8px";
+            readonly backgroundColor: "rgba(255, 255, 255, 0.02)";
+            readonly border: "1px solid rgba(255, 255, 255, 0.1)";
+            readonly borderRadius: "6px";
+            readonly color: "#fff";
+            readonly fontSize: "11px";
+            readonly fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+        };
+    };
+    readonly card: {
+        readonly base: {
+            readonly padding: "12px";
+            readonly backgroundColor: "rgba(0, 0, 0, 0.2)";
+            readonly borderRadius: "8px";
+            readonly border: "1px solid rgba(255, 255, 255, 0.05)";
+        };
+    };
+    readonly label: {
+        readonly base: {
+            readonly fontSize: "10px";
+            readonly fontWeight: 600;
+            readonly color: "#888";
+            readonly textTransform: "uppercase";
+            readonly letterSpacing: "0.5px";
+        };
+    };
+    readonly badge: {
+        readonly base: {
+            readonly padding: "2px 6px";
+            readonly borderRadius: "4px";
+            readonly fontSize: "9px";
+            readonly fontWeight: 600;
+            readonly border: "1px solid";
+            readonly textTransform: "uppercase";
+            readonly letterSpacing: "0.3px";
+        };
+    };
+};
+/**
+ * Effect type to color mapping
+ */
+declare const effectColors: Record<string, string>;
+/**
+ * Get effect color
+ */
+declare function getEffectColor(effect: string): string;
+/**
+ * Create CSS properties object
+ */
+declare function createStyles<T extends Record<string, React.CSSProperties>>(styles: T): T;
+
+export { type AnimationCompliance, type BehavioralCompliance, type ComplianceResult, DEFAULT_HUD_CONFIG, DEFAULT_HUD_STATE, DEFAULT_LENS_STATE, type DataSourceEntry, DataSourceIndicator, type DataSourceIndicatorProps, type DataSourceMeta, type DataSourceType, type DiagnosticIssue, type DiagnosticResult, DiagnosticsPanel, type DiagnosticsPanelProps, type DiagnosticsService, type EffectType, FeedbackPrompt, type FeedbackPromptProps, type ForkService, type ForkState, type HudActions, type HudConfig, type HudContextValue, HudPanel, type HudPanelProps, type HudPanelType, type HudPosition, HudProvider, type HudProviderProps, type HudState, type HudStore, HudTrigger, type HudTriggerProps, IssueList, type IssueListProps, LensPanel, type LensPanelProps, type LensService, type LensState, type MaterialCompliance, type Observation, ObservationCaptureModal, type ObservationCaptureModalProps, PhysicsAnalysis, type PhysicsAnalysisProps, type Signal, SimulationPanel, type SimulationPanelProps, type SimulationService, type SimulationState, StateComparison, type StateComparisonProps, type UseDataSourceProps, type UseKeyboardShortcutsProps, type UseObservationCaptureProps, type UseSignalCaptureProps, colors, createStyles, effectColors, getEffectColor, getHudState, getShortcutHelp, patterns, radii, shadows, spacing, transitions, typography, useDataSource, useHud, useHudOptional, useHudStore, useKeyboardShortcuts, useMultipleDataSources, useObservationCapture, useSignalCapture, zIndex };