@coherent.js/client 1.0.0-beta.3 → 1.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/types/index.d.ts CHANGED
@@ -5,12 +5,34 @@
5
5
  * @version 1.0.0-beta.1
6
6
  */
7
7
 
8
+ // Import core types for component integration
9
+ import type {
10
+ CoherentNode,
11
+ CoherentElement,
12
+ StrictCoherentElement,
13
+ CoherentChild,
14
+ CoherentComponent,
15
+ ComponentProps,
16
+ ComponentState,
17
+ } from '@coherent.js/core';
18
+
19
+ // Re-export core types for convenience
20
+ export type {
21
+ CoherentNode,
22
+ CoherentElement,
23
+ StrictCoherentElement,
24
+ CoherentChild,
25
+ CoherentComponent,
26
+ ComponentProps,
27
+ ComponentState,
28
+ };
29
+
8
30
  // ============================================================================
9
31
  // DOM and Browser Types
10
32
  // ============================================================================
11
33
 
12
34
  /** HTML element with Coherent.js data attributes */
13
- export interface CoherentElement extends HTMLElement {
35
+ export interface CoherentHTMLElement extends HTMLElement {
14
36
  'data-coherent-state'?: string;
15
37
  'data-coherent-component'?: string;
16
38
  'data-coherent-id'?: string;
@@ -24,14 +46,84 @@ export interface CoherentElement extends HTMLElement {
24
46
  'data-selected'?: string;
25
47
  'data-expanded'?: string;
26
48
  'data-visible'?: string;
49
+ __coherentInstance?: HydratedInstance;
27
50
  }
28
51
 
29
- /** Event handler function type */
30
- export type EventHandler = (event: Event, element: HTMLElement, data?: any) => void | Promise<void>;
52
+ // ============================================================================
53
+ // Event Handler Types - Specific DOM Events
54
+ // ============================================================================
55
+
56
+ /**
57
+ * Generic event handler type.
58
+ * The handler receives the DOM event, the element, and optional custom data.
59
+ */
60
+ export type EventHandler<E extends Event = Event> = (
61
+ event: E,
62
+ element: HTMLElement,
63
+ data?: any
64
+ ) => void | Promise<void>;
65
+
66
+ /** Click event handler (MouseEvent) */
67
+ export type ClickHandler = EventHandler<MouseEvent>;
68
+
69
+ /** Double-click event handler (MouseEvent) */
70
+ export type DblClickHandler = EventHandler<MouseEvent>;
71
+
72
+ /** Keyboard event handler (KeyboardEvent) */
73
+ export type KeyHandler = EventHandler<KeyboardEvent>;
74
+
75
+ /** Focus event handler (FocusEvent) */
76
+ export type FocusHandler = EventHandler<FocusEvent>;
77
+
78
+ /** Form submit event handler (SubmitEvent) */
79
+ export type SubmitHandler = EventHandler<SubmitEvent>;
80
+
81
+ /** Input change event handler (Event) */
82
+ export type ChangeHandler = EventHandler<Event>;
83
+
84
+ /** Input event handler (InputEvent) */
85
+ export type InputHandler = EventHandler<InputEvent>;
86
+
87
+ /** Mouse event handler (MouseEvent) */
88
+ export type MouseHandler = EventHandler<MouseEvent>;
89
+
90
+ /** Drag event handler (DragEvent) */
91
+ export type DragHandler = EventHandler<DragEvent>;
31
92
 
32
- /** Component state that can be serialized/deserialized */
93
+ /** Touch event handler (TouchEvent) */
94
+ export type TouchHandler = EventHandler<TouchEvent>;
95
+
96
+ /** Wheel event handler (WheelEvent) */
97
+ export type WheelHandler = EventHandler<WheelEvent>;
98
+
99
+ /**
100
+ * State-aware event handler used in components.
101
+ * Receives event, current state, and setState function.
102
+ */
103
+ export type StateAwareHandler<S = any, E extends Event = Event> = (
104
+ event: E,
105
+ state: S,
106
+ setState: (newState: Partial<S> | ((prev: S) => Partial<S>)) => void
107
+ ) => void | Promise<void>;
108
+
109
+ // ============================================================================
110
+ // Serializable State Types
111
+ // ============================================================================
112
+
113
+ /** Primitive values that can be serialized to JSON */
114
+ export type SerializablePrimitive = string | number | boolean | null;
115
+
116
+ /**
117
+ * State that can be serialized/deserialized for hydration.
118
+ * Only JSON-safe values are allowed.
119
+ */
33
120
  export interface SerializableState {
34
- [key: string]: string | number | boolean | null | undefined | SerializableState | SerializableState[];
121
+ [key: string]:
122
+ | SerializablePrimitive
123
+ | SerializablePrimitive[]
124
+ | SerializableState
125
+ | SerializableState[]
126
+ | undefined;
35
127
  }
36
128
 
37
129
  // ============================================================================
@@ -51,6 +143,14 @@ export interface HydrationOptions {
51
143
  onSuccess?: (element: HTMLElement, state: SerializableState) => void;
52
144
  transforms?: StateTransforms;
53
145
  validators?: StateValidators;
146
+ /** Enable mismatch detection (dev mode default: true) */
147
+ detectMismatch?: boolean;
148
+ /** Throw on mismatch instead of warning */
149
+ strict?: boolean;
150
+ /** Custom mismatch handler */
151
+ onMismatch?: (mismatches: HydrationMismatch[]) => void;
152
+ /** Additional props to pass to component */
153
+ props?: Record<string, any>;
54
154
  }
55
155
 
56
156
  /** State transformation functions */
@@ -63,6 +163,14 @@ export interface StateValidators {
63
163
  [key: string]: (value: any) => boolean;
64
164
  }
65
165
 
166
+ /** Hydration mismatch information */
167
+ export interface HydrationMismatch {
168
+ path: string;
169
+ type: 'text' | 'attribute' | 'tag' | 'children' | 'missing' | 'extra';
170
+ expected: any;
171
+ actual: any;
172
+ }
173
+
66
174
  /** Component hydration result */
67
175
  export interface HydrationResult {
68
176
  success: boolean;
@@ -83,6 +191,51 @@ export interface BatchHydrationResult {
83
191
  duration: number;
84
192
  }
85
193
 
194
+ /**
195
+ * Hydrated component instance returned by hydrate().
196
+ * Provides control methods for state management and lifecycle.
197
+ */
198
+ export interface HydratedInstance {
199
+ /** The DOM element being hydrated */
200
+ element: HTMLElement;
201
+ /** The component function */
202
+ component: CoherentComponent;
203
+ /** Current props */
204
+ props: Record<string, any>;
205
+ /** Current state */
206
+ state: SerializableState;
207
+ /** Whether hydration is complete */
208
+ isHydrated: boolean;
209
+
210
+ /** Update props and re-render */
211
+ update(newProps?: Record<string, any>): HydratedInstance;
212
+ /** Re-render with current state */
213
+ rerender(): void;
214
+ /** Destroy the instance and clean up */
215
+ destroy(): void;
216
+ /** Set state and trigger re-render */
217
+ setState(newState: Partial<SerializableState> | ((prev: SerializableState) => Partial<SerializableState>)): void;
218
+ }
219
+
220
+ /**
221
+ * Control object returned by the clean hydrate() API.
222
+ */
223
+ export interface HydrateControl {
224
+ /** Unmount the component and clean up event handlers */
225
+ unmount(): void;
226
+ /** Re-render with optional new props */
227
+ rerender(newProps?: Record<string, any>): void;
228
+ /** Get current state */
229
+ getState(): SerializableState;
230
+ /** Set state and trigger re-render */
231
+ setState(newState: Partial<SerializableState> | ((prev: SerializableState) => Partial<SerializableState>)): void;
232
+ }
233
+
234
+ export interface MakeHydratableOptions {
235
+ componentName?: string;
236
+ initialState?: SerializableState;
237
+ }
238
+
86
239
  // ============================================================================
87
240
  // Client Component Types
88
241
  // ============================================================================
@@ -156,6 +309,38 @@ export interface CustomEventData {
156
309
  composed?: boolean;
157
310
  }
158
311
 
312
+ // ============================================================================
313
+ // Event Delegation Types (Plan 02-01)
314
+ // ============================================================================
315
+
316
+ /** Event delegation instance interface */
317
+ export interface EventDelegation {
318
+ /** Initialize event delegation on document (idempotent) */
319
+ initialize(): void;
320
+ /** Destroy delegation and remove all listeners */
321
+ destroy(): void;
322
+ /** Check if delegation is initialized */
323
+ isInitialized(): boolean;
324
+ }
325
+
326
+ /** Handler registry interface */
327
+ export interface HandlerRegistry {
328
+ /** Register a handler by ID */
329
+ register(
330
+ id: string,
331
+ handler: StateAwareHandler,
332
+ componentRef?: { getState: () => any; setState: (state: any) => void }
333
+ ): void;
334
+ /** Unregister a handler by ID */
335
+ unregister(id: string): boolean;
336
+ /** Get a handler by ID */
337
+ get(id: string): { handler: StateAwareHandler; componentRef?: any } | undefined;
338
+ /** Check if handler exists */
339
+ has(id: string): boolean;
340
+ /** Clear all handlers */
341
+ clear(): void;
342
+ }
343
+
159
344
  // ============================================================================
160
345
  // State Management Types
161
346
  // ============================================================================
@@ -203,11 +388,17 @@ export interface StateSyncOptions {
203
388
 
204
389
  /** HMR update information */
205
390
  export interface HMRUpdate {
206
- type: 'component' | 'style' | 'script' | 'template';
391
+ type: 'component' | 'style' | 'script' | 'template' | 'full-reload';
207
392
  id: string;
208
393
  path: string;
209
394
  content?: string;
210
395
  timestamp: number;
396
+ /** File that changed (for error display) */
397
+ file?: string;
398
+ /** Line number for error */
399
+ line?: number;
400
+ /** Column number for error */
401
+ column?: number;
211
402
  }
212
403
 
213
404
  /** HMR event listener */
@@ -223,6 +414,10 @@ export interface HMRConfig {
223
414
  onUpdate?: HMRListener;
224
415
  onError?: (error: Error) => void;
225
416
  onReconnect?: () => void;
417
+ /** Show error overlay */
418
+ overlay?: boolean;
419
+ /** Show connection indicator */
420
+ indicator?: boolean;
226
421
  }
227
422
 
228
423
  /** HMR client interface */
@@ -242,6 +437,78 @@ export interface HMRClient {
242
437
  reloadPage(): void;
243
438
  }
244
439
 
440
+ /** Hot context API for modules (Vite-compatible) */
441
+ export interface HotContext {
442
+ /** Accept self updates */
443
+ accept(): void;
444
+ /** Accept updates from dependencies */
445
+ accept(deps: string | string[], callback?: (modules: any[]) => void): void;
446
+ /** Dispose callback for cleanup */
447
+ dispose(callback: (data: any) => void): void;
448
+ /** Prune callback when module is removed */
449
+ prune(callback: () => void): void;
450
+ /** Invalidate to trigger parent update */
451
+ invalidate(): void;
452
+ /** Decline to fall back to full reload */
453
+ decline(): void;
454
+ /** Data persisted across HMR updates */
455
+ data: Record<string, any>;
456
+ }
457
+
458
+ /** Module tracker for HMR boundary detection */
459
+ export interface ModuleTracker {
460
+ /** Track a module with its hot context */
461
+ track(moduleId: string, context: HotContext): void;
462
+ /** Check if module is a boundary */
463
+ isBoundary(moduleId: string): boolean;
464
+ /** Get hot context for module */
465
+ getContext(moduleId: string): HotContext | undefined;
466
+ /** Clear tracked modules */
467
+ clear(): void;
468
+ }
469
+
470
+ /** Cleanup tracker for resource management during HMR */
471
+ export interface CleanupTracker {
472
+ /** Track a timer for cleanup */
473
+ trackTimer(moduleId: string, timerId: number): void;
474
+ /** Track an event listener for cleanup */
475
+ trackListener(moduleId: string, element: EventTarget, event: string, handler: EventListener): void;
476
+ /** Track a fetch request for cleanup */
477
+ trackFetch(moduleId: string, controller: AbortController): void;
478
+ /** Clean up all resources for a module */
479
+ cleanup(moduleId: string): void;
480
+ /** Clear all tracked resources */
481
+ clearAll(): void;
482
+ }
483
+
484
+ /** State capturer for preserving form state during HMR */
485
+ export interface StateCapturer {
486
+ /** Capture current input values and scroll positions */
487
+ capture(): Record<string, any>;
488
+ /** Restore captured state */
489
+ restore(state: Record<string, any>): void;
490
+ }
491
+
492
+ /** Error overlay for displaying HMR errors */
493
+ export interface ErrorOverlay {
494
+ /** Show error overlay */
495
+ show(error: { message: string; file?: string; line?: number; column?: number; frame?: string }): void;
496
+ /** Hide error overlay */
497
+ hide(): void;
498
+ /** Check if overlay is visible */
499
+ isVisible(): boolean;
500
+ }
501
+
502
+ /** Connection indicator for WebSocket status */
503
+ export interface ConnectionIndicator {
504
+ /** Show indicator with status */
505
+ show(status: 'connected' | 'disconnected' | 'connecting' | 'error'): void;
506
+ /** Hide indicator */
507
+ hide(): void;
508
+ /** Update status */
509
+ setStatus(status: 'connected' | 'disconnected' | 'connecting' | 'error'): void;
510
+ }
511
+
245
512
  // ============================================================================
246
513
  // Performance Types
247
514
  // ============================================================================
@@ -267,6 +534,119 @@ export interface PerformanceMonitor {
267
534
  report(): void;
268
535
  }
269
536
 
537
+ // ============================================================================
538
+ // Router Types
539
+ // ============================================================================
540
+
541
+ /** Route configuration */
542
+ export interface RouteConfig {
543
+ /** Route path pattern */
544
+ path: string;
545
+ /** Component to render (can be async for code splitting) */
546
+ component: CoherentComponent | (() => Promise<CoherentComponent>);
547
+ /** Route metadata */
548
+ meta?: Record<string, any>;
549
+ /** Before enter guard */
550
+ beforeEnter?: (to: Route, from: Route | null) => boolean | Promise<boolean>;
551
+ /** Before leave guard */
552
+ beforeLeave?: (to: Route, from: Route) => boolean | Promise<boolean>;
553
+ /** Prefetch priority */
554
+ priority?: number;
555
+ /** Custom transition for this route */
556
+ transition?: RouteTransition;
557
+ }
558
+
559
+ /** Current route state */
560
+ export interface Route {
561
+ path: string;
562
+ component?: CoherentComponent;
563
+ meta?: Record<string, any>;
564
+ hash?: string;
565
+ query?: Record<string, string>;
566
+ }
567
+
568
+ /** Route transition configuration */
569
+ export interface RouteTransition {
570
+ enter: string;
571
+ leave: string;
572
+ duration: number;
573
+ }
574
+
575
+ /** Scroll behavior configuration */
576
+ export interface ScrollBehaviorConfig {
577
+ enabled?: boolean;
578
+ behavior?: ScrollBehavior;
579
+ position?: 'top' | 'saved';
580
+ delay?: number;
581
+ savePosition?: boolean;
582
+ custom?: (to: Route, from: Route | null, savedPosition: { x: number; y: number } | null) => { x: number; y: number } | { el: Element };
583
+ }
584
+
585
+ /** Router configuration */
586
+ export interface RouterConfig {
587
+ mode?: 'history' | 'hash';
588
+ base?: string;
589
+ prefetch?: {
590
+ enabled?: boolean;
591
+ strategy?: 'hover' | 'visible' | 'idle';
592
+ delay?: number;
593
+ maxConcurrent?: number;
594
+ priority?: {
595
+ critical?: number;
596
+ high?: number;
597
+ normal?: number;
598
+ low?: number;
599
+ };
600
+ };
601
+ transitions?: {
602
+ enabled?: boolean;
603
+ default?: RouteTransition;
604
+ routes?: Record<string, RouteTransition>;
605
+ onStart?: (from: string | null, to: string) => void;
606
+ onComplete?: (from: string | null, to: string) => void;
607
+ };
608
+ codeSplitting?: {
609
+ enabled?: boolean;
610
+ strategy?: 'route';
611
+ chunkNaming?: string;
612
+ preload?: string[];
613
+ onLoad?: (path: string, component: any, loadTime: number) => void;
614
+ };
615
+ scrollBehavior?: ScrollBehaviorConfig;
616
+ }
617
+
618
+ /** Router statistics */
619
+ export interface RouterStats {
620
+ navigations: number;
621
+ prefetches: number;
622
+ transitionsCompleted: number;
623
+ chunksLoaded: number;
624
+ scrollRestores: number;
625
+ routesRegistered: number;
626
+ prefetchQueueSize: number;
627
+ activePrefetches: number;
628
+ loadedChunks: number;
629
+ savedPositions: number;
630
+ historyLength: number;
631
+ }
632
+
633
+ /** Router instance */
634
+ export interface Router {
635
+ addRoute(path: string, config: RouteConfig): void;
636
+ push(path: string, options?: Partial<Route>): Promise<boolean>;
637
+ replace(path: string, options?: Partial<Route>): Promise<boolean>;
638
+ back(): void;
639
+ forward(): void;
640
+ prefetchRoute(path: string, priority?: number): Promise<void>;
641
+ prefetchRoutes(paths: string[], priority?: number): void;
642
+ setupPrefetchStrategy(element: HTMLElement, path: string): void;
643
+ getRoute(path: string): RouteConfig | undefined;
644
+ getRoutes(): RouteConfig[];
645
+ getCurrentRoute(): Route | null;
646
+ getStats(): RouterStats;
647
+ clearCaches(): void;
648
+ }
649
+
270
650
  // ============================================================================
271
651
  // Utility Types
272
652
  // ============================================================================
@@ -295,77 +675,121 @@ export interface ExtendedIntersectionObserverEntry extends IntersectionObserverE
295
675
  // ============================================================================
296
676
 
297
677
  /** Extract initial state from DOM element */
298
- export function extractInitialState(
678
+ declare function extractInitialState(
299
679
  element: HTMLElement,
300
680
  options?: Pick<HydrationOptions, 'initialState' | 'transforms' | 'validators'>
301
681
  ): SerializableState | null;
302
682
 
303
- /** Hydrate a single element */
304
- export function hydrateElement(
305
- element: HTMLElement,
306
- component?: ComponentFactory,
683
+ /**
684
+ * Hydrate a server-rendered component (clean API).
685
+ * Returns a control object with unmount, rerender, getState, and setState.
686
+ */
687
+ export function hydrate(
688
+ component: CoherentComponent,
689
+ container: HTMLElement,
307
690
  options?: HydrationOptions
308
- ): Promise<HydrationResult>;
691
+ ): HydrateControl;
692
+
693
+ /**
694
+ * Hydrate a single element (legacy API).
695
+ * @deprecated Use the clean hydrate() API instead.
696
+ */
697
+ export function legacyHydrate(
698
+ element: HTMLElement,
699
+ component: CoherentComponent,
700
+ props?: Record<string, any>,
701
+ options?: { initialState?: SerializableState }
702
+ ): HydratedInstance | null;
309
703
 
310
704
  /** Hydrate multiple elements */
311
705
  export function hydrateAll(
312
- selector?: string,
313
- options?: HydrationOptions
314
- ): Promise<BatchHydrationResult>;
706
+ elements: HTMLElement[],
707
+ components: CoherentComponent[],
708
+ propsArray?: Array<Record<string, any>>
709
+ ): Array<HydratedInstance | null>;
710
+
711
+ export function hydrateBySelector(
712
+ selector: string,
713
+ component: CoherentComponent,
714
+ props?: Record<string, any>
715
+ ): Array<HydratedInstance | null>;
716
+
717
+ export function enableClientEvents(rootElement?: Document | HTMLElement): void;
718
+
719
+ export function makeHydratable<T extends CoherentComponent>(
720
+ component: T,
721
+ options?: MakeHydratableOptions
722
+ ): T & {
723
+ isHydratable: true;
724
+ hydrationOptions: MakeHydratableOptions;
725
+ autoHydrate(componentRegistry?: Record<string, any>): void;
726
+ getHydrationData(props?: Record<string, any>, state?: SerializableState | null): {
727
+ componentName: string;
728
+ props: Record<string, any>;
729
+ initialState?: SerializableState;
730
+ hydrationAttributes: Record<string, string | null>;
731
+ };
732
+ renderWithHydration(props?: Record<string, any>): CoherentNode;
733
+ };
315
734
 
316
735
  /** Auto-hydrate elements on DOM ready */
317
- export function autoHydrate(options?: HydrationOptions): Promise<void>;
736
+ export function autoHydrate(componentRegistry?: Record<string, CoherentComponent>): void;
737
+
738
+ export function registerEventHandler<S = any, E extends Event = Event>(
739
+ id: string,
740
+ handler: StateAwareHandler<S, E>
741
+ ): void;
318
742
 
319
743
  /** Register a component for auto-hydration */
320
- export function registerComponent(
744
+ declare function registerComponent(
321
745
  name: string,
322
746
  factory: ComponentFactory,
323
747
  options?: Partial<ComponentRegistryEntry>
324
748
  ): void;
325
749
 
326
750
  /** Unregister a component */
327
- export function unregisterComponent(name: string): boolean;
751
+ declare function unregisterComponent(name: string): boolean;
328
752
 
329
753
  /** Get registered component */
330
- export function getComponent(name: string): ComponentRegistryEntry | undefined;
754
+ declare function getComponent(name: string): ComponentRegistryEntry | undefined;
331
755
 
332
756
  /** Get all registered components */
333
- export function getAllComponents(): ComponentRegistryEntry[];
757
+ declare function getAllComponents(): ComponentRegistryEntry[];
334
758
 
335
759
  /** Create a client component */
336
- export function createClientComponent(
760
+ declare function createClientComponent(
337
761
  element: HTMLElement,
338
762
  initialState?: SerializableState
339
763
  ): ClientComponent;
340
764
 
341
765
  /** Wait for DOM to be ready */
342
- export function ready(callback: ReadyCallback): Promise<void>;
766
+ declare function ready(callback: ReadyCallback): Promise<void>;
343
767
 
344
768
  /** DOM query utilities */
345
- export function $(selector: Selector): HTMLElement[];
346
- export function $$(selector: string): HTMLElement | null;
769
+ declare function $(selector: Selector): HTMLElement[];
770
+ declare function $$(selector: string): HTMLElement | null;
347
771
 
348
772
  /** Event utilities */
349
- export function on(
773
+ declare function on(
350
774
  element: HTMLElement | string,
351
775
  event: string,
352
776
  handler: EventHandler,
353
777
  options?: EventListenerOptions | boolean
354
778
  ): void;
355
779
 
356
- export function off(
780
+ declare function off(
357
781
  element: HTMLElement | string,
358
782
  event?: string,
359
783
  handler?: EventHandler
360
784
  ): void;
361
785
 
362
- export function trigger(
786
+ declare function trigger(
363
787
  element: HTMLElement,
364
788
  event: string,
365
789
  data?: CustomEventData
366
790
  ): boolean;
367
791
 
368
- export function delegate(
792
+ declare function delegate(
369
793
  container: HTMLElement,
370
794
  selector: string,
371
795
  event: string,
@@ -373,40 +797,41 @@ export function delegate(
373
797
  ): void;
374
798
 
375
799
  /** Animation utilities */
376
- export function requestAnimationFrame(callback: AnimationCallback): number;
377
- export function cancelAnimationFrame(id: number): void;
800
+ declare function requestAnimationFrame(callback: AnimationCallback): number;
801
+ declare function cancelAnimationFrame(id: number): void;
378
802
 
379
803
  /** Debounce and throttle utilities */
380
- export function debounce<T extends (...args: any[]) => any>(
804
+ declare function debounce<T extends (...args: any[]) => any>(
381
805
  func: T,
382
806
  delay: number
383
807
  ): (...args: Parameters<T>) => void;
384
808
 
385
- export function throttle<T extends (...args: any[]) => any>(
809
+ declare function throttle<T extends (...args: any[]) => any>(
386
810
  func: T,
387
811
  limit: number
388
812
  ): (...args: Parameters<T>) => void;
389
813
 
390
814
  /** State management utilities */
391
- export function createStateManager(): ClientStateManager;
392
- export function syncState(options: StateSyncOptions): void;
815
+ declare function createStateManager(): ClientStateManager;
816
+ declare function syncState(options: StateSyncOptions): void;
393
817
 
394
818
  /** Performance utilities */
395
- export function createPerformanceMonitor(): PerformanceMonitor;
819
+ declare function createPerformanceMonitor(): PerformanceMonitor;
396
820
 
397
821
  /** HMR utilities */
398
- export function createHMRClient(config?: Partial<HMRConfig>): HMRClient;
399
- export function enableHMR(config?: Partial<HMRConfig>): Promise<void>;
822
+ declare function createHMRClient(config?: Partial<HMRConfig>): HMRClient;
823
+ declare function enableHMR(config?: Partial<HMRConfig>): Promise<void>;
824
+ export function createHotContext(moduleId: string): HotContext;
400
825
 
401
826
  /** Intersection observer utilities */
402
- export function observeVisibility(
827
+ declare function observeVisibility(
403
828
  elements: HTMLElement | HTMLElement[],
404
829
  callback: (entries: ExtendedIntersectionObserverEntry[]) => void,
405
830
  options?: IntersectionObserverInit
406
831
  ): IntersectionObserver;
407
832
 
408
833
  /** Lazy loading utilities */
409
- export function lazyLoad(
834
+ declare function lazyLoad(
410
835
  elements: HTMLElement | HTMLElement[],
411
836
  options?: {
412
837
  threshold?: number;
@@ -416,24 +841,90 @@ export function lazyLoad(
416
841
  }
417
842
  ): IntersectionObserver;
418
843
 
844
+ // ============================================================================
845
+ // State Serialization Functions (Plan 02-02)
846
+ // ============================================================================
847
+
848
+ /** Serialize state to base64-encoded JSON */
849
+ export function serializeState(state: SerializableState): string;
850
+
851
+ /** Deserialize state from base64-encoded JSON */
852
+ export function deserializeState(encoded: string): SerializableState;
853
+
854
+ /** Extract state from DOM element's data-state attribute */
855
+ export function extractState(element: HTMLElement): SerializableState | null;
856
+
857
+ /** Serialize state with size warning (10KB threshold) */
858
+ export function serializeStateWithWarning(state: SerializableState, componentName?: string): string;
859
+
860
+ // ============================================================================
861
+ // Mismatch Detection Functions (Plan 02-03)
862
+ // ============================================================================
863
+
864
+ /** Detect mismatches between DOM and virtual DOM */
865
+ export function detectMismatch(element: HTMLElement, vNode: CoherentNode): HydrationMismatch[];
866
+
867
+ /** Report mismatches with warnings or errors */
868
+ export function reportMismatches(
869
+ mismatches: HydrationMismatch[],
870
+ options?: { componentName?: string; strict?: boolean }
871
+ ): void;
872
+
873
+ /** Format path for mismatch reporting */
874
+ export function formatPath(path: (string | number)[]): string;
875
+
876
+ // ============================================================================
877
+ // Event Delegation Exports (Plan 02-01)
878
+ // ============================================================================
879
+
880
+ /** Event delegation singleton */
881
+ export const eventDelegation: EventDelegation;
882
+
883
+ /** Handler registry singleton */
884
+ export const handlerRegistry: HandlerRegistry;
885
+
886
+ /** Wrap an event handler for use with event delegation */
887
+ export function wrapEvent<S = any, E extends Event = Event>(
888
+ eventType: string,
889
+ handler: StateAwareHandler<S, E>,
890
+ handlerId?: string
891
+ ): { handlerId: string; dataAttribute: string };
892
+
893
+ // ============================================================================
894
+ // HMR Exports (Phase 4)
895
+ // ============================================================================
896
+
897
+ export const HMRClient: new (config?: Partial<HMRConfig>) => HMRClient;
898
+ export const hmrClient: HMRClient;
899
+ export const ModuleTracker: new () => ModuleTracker;
900
+ export const moduleTracker: ModuleTracker;
901
+ export const CleanupTracker: new () => CleanupTracker;
902
+ export const cleanupTracker: CleanupTracker;
903
+ export const StateCapturer: new () => StateCapturer;
904
+ export const stateCapturer: StateCapturer;
905
+ export const ErrorOverlay: new () => ErrorOverlay;
906
+ export const errorOverlay: ErrorOverlay;
907
+ export const ConnectionIndicator: new () => ConnectionIndicator;
908
+ export const connectionIndicator: ConnectionIndicator;
909
+
419
910
  // ============================================================================
420
911
  // Global Constants
421
912
  // ============================================================================
422
913
 
423
914
  /** Default hydration selector */
424
- export const DEFAULT_HYDRATION_SELECTOR: string;
915
+ declare const DEFAULT_HYDRATION_SELECTOR: string;
425
916
 
426
917
  /** Component registry */
427
- export const componentRegistry: Map<string, ComponentRegistryEntry>;
918
+ declare const componentRegistry: Map<string, ComponentRegistryEntry>;
428
919
 
429
920
  /** Global state manager instance */
430
- export const globalStateManager: ClientStateManager;
921
+ declare const globalStateManager: ClientStateManager;
431
922
 
432
923
  /** Global event manager instance */
433
- export const globalEventManager: EventManager;
924
+ declare const globalEventManager: EventManager;
434
925
 
435
926
  /** Global performance monitor instance */
436
- export const globalPerformanceMonitor: PerformanceMonitor;
927
+ declare const globalPerformanceMonitor: PerformanceMonitor;
437
928
 
438
929
  // ============================================================================
439
930
  // Default Export
@@ -442,7 +933,8 @@ export const globalPerformanceMonitor: PerformanceMonitor;
442
933
  declare const coherentClient: {
443
934
  // Hydration
444
935
  extractInitialState: typeof extractInitialState;
445
- hydrateElement: typeof hydrateElement;
936
+ hydrate: typeof hydrate;
937
+ legacyHydrate: typeof legacyHydrate;
446
938
  hydrateAll: typeof hydrateAll;
447
939
  autoHydrate: typeof autoHydrate;
448
940
 
@@ -484,6 +976,7 @@ declare const coherentClient: {
484
976
  // HMR
485
977
  createHMRClient: typeof createHMRClient;
486
978
  enableHMR: typeof enableHMR;
979
+ createHotContext: typeof createHotContext;
487
980
 
488
981
  // Intersection Observer
489
982
  observeVisibility: typeof observeVisibility;
@@ -495,4 +988,4 @@ declare const coherentClient: {
495
988
  globalEventManager: typeof globalEventManager;
496
989
  };
497
990
 
498
- export default coherentClient;
991
+ declare const _unused: typeof coherentClient;