@qontinui/ui-bridge 0.1.1
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/dist/control/index.d.mts +134 -0
- package/dist/control/index.d.ts +134 -0
- package/dist/control/index.js +924 -0
- package/dist/control/index.js.map +1 -0
- package/dist/control/index.mjs +919 -0
- package/dist/control/index.mjs.map +1 -0
- package/dist/core/index.d.mts +52 -0
- package/dist/core/index.d.ts +52 -0
- package/dist/core/index.js +1424 -0
- package/dist/core/index.js.map +1 -0
- package/dist/core/index.mjs +1409 -0
- package/dist/core/index.mjs.map +1 -0
- package/dist/debug/index.d.mts +93 -0
- package/dist/debug/index.d.ts +93 -0
- package/dist/debug/index.js +673 -0
- package/dist/debug/index.js.map +1 -0
- package/dist/debug/index.mjs +664 -0
- package/dist/debug/index.mjs.map +1 -0
- package/dist/index.d.mts +12 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +4719 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +4665 -0
- package/dist/index.mjs.map +1 -0
- package/dist/metrics-BCG7z7Aq.d.mts +147 -0
- package/dist/metrics-QCnK0EFw.d.ts +147 -0
- package/dist/react/index.d.mts +786 -0
- package/dist/react/index.d.ts +786 -0
- package/dist/react/index.js +4312 -0
- package/dist/react/index.js.map +1 -0
- package/dist/react/index.mjs +4290 -0
- package/dist/react/index.mjs.map +1 -0
- package/dist/registry-CT6BVVKr.d.mts +253 -0
- package/dist/registry-D4mQ01B3.d.ts +253 -0
- package/dist/render-log/index.d.mts +340 -0
- package/dist/render-log/index.d.ts +340 -0
- package/dist/render-log/index.js +702 -0
- package/dist/render-log/index.js.map +1 -0
- package/dist/render-log/index.mjs +695 -0
- package/dist/render-log/index.mjs.map +1 -0
- package/dist/types-BDkXy5si.d.ts +354 -0
- package/dist/types-BpvpStn3.d.mts +802 -0
- package/dist/types-BpvpStn3.d.ts +802 -0
- package/dist/types-DdJD9yw5.d.mts +354 -0
- package/dist/websocket-client-B2LC9CYc.d.mts +124 -0
- package/dist/websocket-client-DupH0X7B.d.ts +124 -0
- package/package.json +83 -0
|
@@ -0,0 +1,786 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React$1, { ReactNode } from 'react';
|
|
3
|
+
import { n as UIBridgeFeatures, U as UIBridgeConfig, t as WSConnectionState, l as RegisteredElement, R as RegisteredComponent, f as BridgeSnapshot, e as BridgeEventType, d as BridgeEventListener, X as WSSubscriptionOptions, c as BridgeEvent, i as ElementType, S as StandardAction, g as CustomAction, h as ElementState, E as ElementIdentifier, a1 as Workflow, p as UIStateGroup, o as UIState, m as StateSnapshot, a2 as WorkflowStep, T as TransitionResult, q as UITransition, N as NavigationResult, P as PathResult } from '../types-BpvpStn3.js';
|
|
4
|
+
import { U as UIBridgeRegistry } from '../registry-D4mQ01B3.js';
|
|
5
|
+
import { U as UIBridgeWSClient } from '../websocket-client-DupH0X7B.js';
|
|
6
|
+
import { RenderLogManager } from '../render-log/index.js';
|
|
7
|
+
import { M as MetricsCollector } from '../metrics-QCnK0EFw.js';
|
|
8
|
+
import { A as ActionExecutor, i as WorkflowEngine, b as ControlActionRequest, c as ControlActionResponse, C as ComponentActionRequest, a as ComponentActionResponse, F as FindRequest, g as FindResponse, j as WorkflowRunRequest, k as WorkflowRunResponse } from '../types-BDkXy5si.js';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* UI Bridge context value
|
|
12
|
+
*/
|
|
13
|
+
interface UIBridgeContextValue {
|
|
14
|
+
/** Feature flags */
|
|
15
|
+
features: UIBridgeFeatures;
|
|
16
|
+
/** Configuration */
|
|
17
|
+
config: UIBridgeConfig;
|
|
18
|
+
/** Element registry */
|
|
19
|
+
registry: UIBridgeRegistry;
|
|
20
|
+
/** Action executor */
|
|
21
|
+
executor: ActionExecutor;
|
|
22
|
+
/** Workflow engine */
|
|
23
|
+
workflowEngine: WorkflowEngine;
|
|
24
|
+
/** Render log manager (if enabled) */
|
|
25
|
+
renderLog?: RenderLogManager;
|
|
26
|
+
/** Metrics collector (if debug enabled) */
|
|
27
|
+
metrics?: MetricsCollector;
|
|
28
|
+
/** WebSocket client (if websocket enabled) */
|
|
29
|
+
wsClient?: UIBridgeWSClient;
|
|
30
|
+
/** WebSocket connection state */
|
|
31
|
+
wsConnectionState: WSConnectionState;
|
|
32
|
+
/** Get all registered elements */
|
|
33
|
+
getElements: () => RegisteredElement[];
|
|
34
|
+
/** Get all registered components */
|
|
35
|
+
getComponents: () => RegisteredComponent[];
|
|
36
|
+
/** Create a snapshot */
|
|
37
|
+
createSnapshot: () => BridgeSnapshot;
|
|
38
|
+
/** Subscribe to events */
|
|
39
|
+
on: <T = unknown>(type: BridgeEventType, listener: BridgeEventListener<T>) => () => void;
|
|
40
|
+
/** Unsubscribe from events */
|
|
41
|
+
off: <T = unknown>(type: BridgeEventType, listener: BridgeEventListener<T>) => void;
|
|
42
|
+
/** Whether the provider is initialized */
|
|
43
|
+
initialized: boolean;
|
|
44
|
+
/** Connect to WebSocket server */
|
|
45
|
+
wsConnect: () => Promise<void>;
|
|
46
|
+
/** Disconnect from WebSocket server */
|
|
47
|
+
wsDisconnect: () => void;
|
|
48
|
+
/** Subscribe to WebSocket events */
|
|
49
|
+
wsSubscribe: (options: WSSubscriptionOptions) => Promise<BridgeEventType[]>;
|
|
50
|
+
/** Add WebSocket event listener */
|
|
51
|
+
onWsEvent: (eventType: BridgeEventType | '*', listener: (event: BridgeEvent) => void) => () => void;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* UI Bridge provider props
|
|
55
|
+
*/
|
|
56
|
+
interface UIBridgeProviderProps {
|
|
57
|
+
/** Child components */
|
|
58
|
+
children: React$1.ReactNode;
|
|
59
|
+
/** Feature flags */
|
|
60
|
+
features?: UIBridgeFeatures;
|
|
61
|
+
/** Configuration */
|
|
62
|
+
config?: UIBridgeConfig;
|
|
63
|
+
/** Event handler */
|
|
64
|
+
onEvent?: BridgeEventListener;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* UI Bridge Provider
|
|
68
|
+
*
|
|
69
|
+
* Provides UI Bridge context to child components.
|
|
70
|
+
*/
|
|
71
|
+
declare function UIBridgeProvider({ children, features, config, onEvent, }: UIBridgeProviderProps): react_jsx_runtime.JSX.Element;
|
|
72
|
+
/**
|
|
73
|
+
* useUIBridgeContext hook
|
|
74
|
+
*
|
|
75
|
+
* Access the UI Bridge context. Throws if used outside provider.
|
|
76
|
+
*/
|
|
77
|
+
declare function useUIBridgeContext(): UIBridgeContextValue;
|
|
78
|
+
/**
|
|
79
|
+
* useUIBridgeOptional hook
|
|
80
|
+
*
|
|
81
|
+
* Access the UI Bridge context, returning null if outside provider.
|
|
82
|
+
*/
|
|
83
|
+
declare function useUIBridgeOptional(): UIBridgeContextValue | null;
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* useUIElement Hook
|
|
87
|
+
*
|
|
88
|
+
* Register a DOM element with UI Bridge for control and observation.
|
|
89
|
+
*/
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* useUIElement options
|
|
93
|
+
*/
|
|
94
|
+
interface UseUIElementOptions {
|
|
95
|
+
/** Unique identifier for the element */
|
|
96
|
+
id: string;
|
|
97
|
+
/** Element type (auto-detected if not provided) */
|
|
98
|
+
type?: ElementType;
|
|
99
|
+
/** Human-readable label */
|
|
100
|
+
label?: string;
|
|
101
|
+
/** Override available actions */
|
|
102
|
+
actions?: StandardAction[];
|
|
103
|
+
/** Custom actions */
|
|
104
|
+
customActions?: Record<string, CustomAction>;
|
|
105
|
+
/** Whether to automatically register on mount */
|
|
106
|
+
autoRegister?: boolean;
|
|
107
|
+
/** Callback when state changes */
|
|
108
|
+
onStateChange?: (state: ElementState) => void;
|
|
109
|
+
}
|
|
110
|
+
/**
|
|
111
|
+
* useUIElement return value
|
|
112
|
+
*/
|
|
113
|
+
interface UseUIElementReturn {
|
|
114
|
+
/** Ref to attach to the element */
|
|
115
|
+
ref: React.RefCallback<HTMLElement>;
|
|
116
|
+
/** Current element reference */
|
|
117
|
+
element: HTMLElement | null;
|
|
118
|
+
/** Whether the element is registered */
|
|
119
|
+
registered: boolean;
|
|
120
|
+
/** Get current state */
|
|
121
|
+
getState: () => ElementState | null;
|
|
122
|
+
/** Get element identifier */
|
|
123
|
+
getIdentifier: () => ElementIdentifier | null;
|
|
124
|
+
/** Trigger an action on this element */
|
|
125
|
+
trigger: (action: StandardAction | string, params?: Record<string, unknown>) => Promise<void>;
|
|
126
|
+
/** Manually register the element */
|
|
127
|
+
register: () => void;
|
|
128
|
+
/** Manually unregister the element */
|
|
129
|
+
unregister: () => void;
|
|
130
|
+
/** The registered element info */
|
|
131
|
+
registeredElement: RegisteredElement | null;
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* useUIElement hook
|
|
135
|
+
*
|
|
136
|
+
* Registers a DOM element with UI Bridge for programmatic control.
|
|
137
|
+
*
|
|
138
|
+
* @example
|
|
139
|
+
* ```tsx
|
|
140
|
+
* function SubmitButton() {
|
|
141
|
+
* const { ref, trigger } = useUIElement({
|
|
142
|
+
* id: 'submit-btn',
|
|
143
|
+
* type: 'button',
|
|
144
|
+
* label: 'Submit Form',
|
|
145
|
+
* });
|
|
146
|
+
*
|
|
147
|
+
* return (
|
|
148
|
+
* <button ref={ref} data-ui-id="submit-btn">
|
|
149
|
+
* Submit
|
|
150
|
+
* </button>
|
|
151
|
+
* );
|
|
152
|
+
* }
|
|
153
|
+
* ```
|
|
154
|
+
*/
|
|
155
|
+
declare function useUIElement(options: UseUIElementOptions): UseUIElementReturn;
|
|
156
|
+
/**
|
|
157
|
+
* useUIElementRef hook
|
|
158
|
+
*
|
|
159
|
+
* A simpler version that just adds the data-ui-id attribute.
|
|
160
|
+
* Useful when you only need identification without full registration.
|
|
161
|
+
*/
|
|
162
|
+
declare function useUIElementRef(id: string): React.RefCallback<HTMLElement>;
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* useUIComponent Hook
|
|
166
|
+
*
|
|
167
|
+
* Register a component with UI Bridge for component-level actions.
|
|
168
|
+
*/
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* Action definition for useUIComponent
|
|
172
|
+
*/
|
|
173
|
+
interface ComponentActionDef<TParams = unknown, TResult = unknown> {
|
|
174
|
+
/** Action identifier */
|
|
175
|
+
id: string;
|
|
176
|
+
/** Human-readable label */
|
|
177
|
+
label?: string;
|
|
178
|
+
/** Description */
|
|
179
|
+
description?: string;
|
|
180
|
+
/** Handler function */
|
|
181
|
+
handler: (params?: TParams) => TResult | Promise<TResult>;
|
|
182
|
+
}
|
|
183
|
+
/**
|
|
184
|
+
* useUIComponent options
|
|
185
|
+
*/
|
|
186
|
+
interface UseUIComponentOptions {
|
|
187
|
+
/** Unique identifier for the component */
|
|
188
|
+
id: string;
|
|
189
|
+
/** Human-readable name */
|
|
190
|
+
name: string;
|
|
191
|
+
/** Description */
|
|
192
|
+
description?: string;
|
|
193
|
+
/** Actions available on this component */
|
|
194
|
+
actions?: ComponentActionDef[];
|
|
195
|
+
/** Child element IDs owned by this component */
|
|
196
|
+
elementIds?: string[];
|
|
197
|
+
/** Whether to automatically register on mount */
|
|
198
|
+
autoRegister?: boolean;
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* useUIComponent return value
|
|
202
|
+
*/
|
|
203
|
+
interface UseUIComponentReturn {
|
|
204
|
+
/** Whether the component is registered */
|
|
205
|
+
registered: boolean;
|
|
206
|
+
/** Execute an action on this component */
|
|
207
|
+
executeAction: <TParams = unknown, TResult = unknown>(actionId: string, params?: TParams) => Promise<TResult>;
|
|
208
|
+
/** Manually register the component */
|
|
209
|
+
register: () => void;
|
|
210
|
+
/** Manually unregister the component */
|
|
211
|
+
unregister: () => void;
|
|
212
|
+
/** Update actions dynamically */
|
|
213
|
+
updateActions: (actions: ComponentActionDef[]) => void;
|
|
214
|
+
/** Add an element ID to this component */
|
|
215
|
+
addElement: (elementId: string) => void;
|
|
216
|
+
/** Remove an element ID from this component */
|
|
217
|
+
removeElement: (elementId: string) => void;
|
|
218
|
+
/** The registered component info */
|
|
219
|
+
registeredComponent: RegisteredComponent | null;
|
|
220
|
+
}
|
|
221
|
+
/**
|
|
222
|
+
* useUIComponent hook
|
|
223
|
+
*
|
|
224
|
+
* Registers a component with UI Bridge for component-level control.
|
|
225
|
+
* Components can expose high-level actions that may orchestrate multiple element interactions.
|
|
226
|
+
*
|
|
227
|
+
* @example
|
|
228
|
+
* ```tsx
|
|
229
|
+
* function LoginForm() {
|
|
230
|
+
* const [email, setEmail] = useState('');
|
|
231
|
+
* const [password, setPassword] = useState('');
|
|
232
|
+
*
|
|
233
|
+
* useUIComponent({
|
|
234
|
+
* id: 'login-form',
|
|
235
|
+
* name: 'Login Form',
|
|
236
|
+
* actions: [
|
|
237
|
+
* {
|
|
238
|
+
* id: 'login',
|
|
239
|
+
* label: 'Submit Login',
|
|
240
|
+
* handler: async ({ email, password }) => {
|
|
241
|
+
* setEmail(email);
|
|
242
|
+
* setPassword(password);
|
|
243
|
+
* await submitLogin();
|
|
244
|
+
* },
|
|
245
|
+
* },
|
|
246
|
+
* {
|
|
247
|
+
* id: 'clear',
|
|
248
|
+
* label: 'Clear Form',
|
|
249
|
+
* handler: () => {
|
|
250
|
+
* setEmail('');
|
|
251
|
+
* setPassword('');
|
|
252
|
+
* },
|
|
253
|
+
* },
|
|
254
|
+
* ],
|
|
255
|
+
* });
|
|
256
|
+
*
|
|
257
|
+
* return (
|
|
258
|
+
* <form>
|
|
259
|
+
* <input value={email} onChange={(e) => setEmail(e.target.value)} />
|
|
260
|
+
* <input value={password} onChange={(e) => setPassword(e.target.value)} />
|
|
261
|
+
* <button type="submit">Login</button>
|
|
262
|
+
* </form>
|
|
263
|
+
* );
|
|
264
|
+
* }
|
|
265
|
+
* ```
|
|
266
|
+
*/
|
|
267
|
+
declare function useUIComponent(options: UseUIComponentOptions): UseUIComponentReturn;
|
|
268
|
+
/**
|
|
269
|
+
* useUIComponentAction hook
|
|
270
|
+
*
|
|
271
|
+
* Create a stable action handler that can be used with useUIComponent.
|
|
272
|
+
* Useful for memoizing action handlers.
|
|
273
|
+
*/
|
|
274
|
+
declare function useUIComponentAction<TParams = unknown, TResult = unknown>(handler: (params?: TParams) => TResult | Promise<TResult>, deps: React.DependencyList): (params?: TParams) => TResult | Promise<TResult>;
|
|
275
|
+
|
|
276
|
+
/**
|
|
277
|
+
* useUIBridge Hook
|
|
278
|
+
*
|
|
279
|
+
* Main hook for accessing UI Bridge functionality.
|
|
280
|
+
*/
|
|
281
|
+
|
|
282
|
+
/**
|
|
283
|
+
* useUIBridge return value
|
|
284
|
+
*/
|
|
285
|
+
interface UseUIBridgeReturn {
|
|
286
|
+
/** Whether UI Bridge is available */
|
|
287
|
+
available: boolean;
|
|
288
|
+
/** Whether initialized */
|
|
289
|
+
initialized: boolean;
|
|
290
|
+
/** Get all registered elements */
|
|
291
|
+
elements: RegisteredElement[];
|
|
292
|
+
/** Get all registered components */
|
|
293
|
+
components: RegisteredComponent[];
|
|
294
|
+
/** Get all workflows */
|
|
295
|
+
workflows: Workflow[];
|
|
296
|
+
/** Create a snapshot of the current state */
|
|
297
|
+
createSnapshot: () => BridgeSnapshot;
|
|
298
|
+
/** Execute an action on an element */
|
|
299
|
+
executeAction: (elementId: string, request: ControlActionRequest) => Promise<ControlActionResponse>;
|
|
300
|
+
/** Execute an action on a component */
|
|
301
|
+
executeComponentAction: (componentId: string, request: ComponentActionRequest) => Promise<ComponentActionResponse>;
|
|
302
|
+
/** Find controllable elements */
|
|
303
|
+
find: (options?: FindRequest) => Promise<FindResponse>;
|
|
304
|
+
/**
|
|
305
|
+
* Discover controllable elements
|
|
306
|
+
* @deprecated Use find() instead
|
|
307
|
+
*/
|
|
308
|
+
discover: (options?: FindRequest) => Promise<FindResponse>;
|
|
309
|
+
/** Run a workflow */
|
|
310
|
+
runWorkflow: (workflowId: string, request?: WorkflowRunRequest) => Promise<WorkflowRunResponse>;
|
|
311
|
+
/** Get element by ID */
|
|
312
|
+
getElement: (id: string) => RegisteredElement | undefined;
|
|
313
|
+
/** Get component by ID */
|
|
314
|
+
getComponent: (id: string) => RegisteredComponent | undefined;
|
|
315
|
+
/** Get element state by ID */
|
|
316
|
+
getElementState: (id: string) => ElementState | undefined;
|
|
317
|
+
/** Register a workflow */
|
|
318
|
+
registerWorkflow: (workflow: Workflow) => void;
|
|
319
|
+
/** Unregister a workflow */
|
|
320
|
+
unregisterWorkflow: (id: string) => void;
|
|
321
|
+
/** Capture a render log snapshot (if enabled) */
|
|
322
|
+
captureRenderLog: () => Promise<void>;
|
|
323
|
+
/** Get render log entries (if enabled) */
|
|
324
|
+
getRenderLogEntries: () => Promise<unknown[]>;
|
|
325
|
+
/** Clear render log (if enabled) */
|
|
326
|
+
clearRenderLog: () => Promise<void>;
|
|
327
|
+
/** Get metrics (if debug enabled) */
|
|
328
|
+
getMetrics: () => unknown | undefined;
|
|
329
|
+
/** Get action history (if debug enabled) */
|
|
330
|
+
getActionHistory: () => unknown[] | undefined;
|
|
331
|
+
}
|
|
332
|
+
/**
|
|
333
|
+
* useUIBridge hook
|
|
334
|
+
*
|
|
335
|
+
* Main hook for accessing UI Bridge functionality.
|
|
336
|
+
* Use this to interact with registered elements, components, and workflows.
|
|
337
|
+
*
|
|
338
|
+
* @example
|
|
339
|
+
* ```tsx
|
|
340
|
+
* function AutomationController() {
|
|
341
|
+
* const bridge = useUIBridge();
|
|
342
|
+
*
|
|
343
|
+
* const handleSubmit = async () => {
|
|
344
|
+
* // Execute element action
|
|
345
|
+
* await bridge.executeAction('submit-btn', { action: 'click' });
|
|
346
|
+
*
|
|
347
|
+
* // Or use component action
|
|
348
|
+
* await bridge.executeComponentAction('login-form', {
|
|
349
|
+
* action: 'login',
|
|
350
|
+
* params: { email: 'user@example.com', password: 'secret' },
|
|
351
|
+
* });
|
|
352
|
+
* };
|
|
353
|
+
*
|
|
354
|
+
* return (
|
|
355
|
+
* <button onClick={handleSubmit}>
|
|
356
|
+
* Automate Login
|
|
357
|
+
* </button>
|
|
358
|
+
* );
|
|
359
|
+
* }
|
|
360
|
+
* ```
|
|
361
|
+
*/
|
|
362
|
+
declare function useUIBridge(): UseUIBridgeReturn;
|
|
363
|
+
/**
|
|
364
|
+
* useUIBridgeRequired hook
|
|
365
|
+
*
|
|
366
|
+
* Same as useUIBridge but throws if UI Bridge is not available.
|
|
367
|
+
*/
|
|
368
|
+
declare function useUIBridgeRequired(): UseUIBridgeReturn;
|
|
369
|
+
|
|
370
|
+
/**
|
|
371
|
+
* useUIState Hook
|
|
372
|
+
*
|
|
373
|
+
* Register and manage UI states with UI Bridge.
|
|
374
|
+
*/
|
|
375
|
+
|
|
376
|
+
/**
|
|
377
|
+
* useUIState options
|
|
378
|
+
*/
|
|
379
|
+
interface UseUIStateOptions {
|
|
380
|
+
/** Unique identifier for the state */
|
|
381
|
+
id: string;
|
|
382
|
+
/** Human-readable name */
|
|
383
|
+
name: string;
|
|
384
|
+
/** Element IDs belonging to this state */
|
|
385
|
+
elements?: string[];
|
|
386
|
+
/** Function to detect if state is active */
|
|
387
|
+
activeWhen?: () => boolean;
|
|
388
|
+
/** If true, blocks other state activations (modal behavior) */
|
|
389
|
+
blocking?: boolean;
|
|
390
|
+
/** Specific state IDs this state blocks */
|
|
391
|
+
blocks?: string[];
|
|
392
|
+
/** State group membership */
|
|
393
|
+
group?: string;
|
|
394
|
+
/** Cost for pathfinding (default: 1.0) */
|
|
395
|
+
pathCost?: number;
|
|
396
|
+
/** Custom metadata */
|
|
397
|
+
metadata?: Record<string, unknown>;
|
|
398
|
+
/** Whether to automatically register on mount */
|
|
399
|
+
autoRegister?: boolean;
|
|
400
|
+
/** Initial active state */
|
|
401
|
+
initialActive?: boolean;
|
|
402
|
+
}
|
|
403
|
+
/**
|
|
404
|
+
* useUIState return value
|
|
405
|
+
*/
|
|
406
|
+
interface UseUIStateReturn {
|
|
407
|
+
/** Whether the state is registered */
|
|
408
|
+
registered: boolean;
|
|
409
|
+
/** Whether the state is currently active */
|
|
410
|
+
isActive: boolean;
|
|
411
|
+
/** Activate this state */
|
|
412
|
+
activate: () => boolean;
|
|
413
|
+
/** Deactivate this state */
|
|
414
|
+
deactivate: () => boolean;
|
|
415
|
+
/** Toggle active state */
|
|
416
|
+
toggle: () => boolean;
|
|
417
|
+
/** Get all currently active states */
|
|
418
|
+
activeStates: string[];
|
|
419
|
+
/** Manually register the state */
|
|
420
|
+
register: () => void;
|
|
421
|
+
/** Manually unregister the state */
|
|
422
|
+
unregister: () => void;
|
|
423
|
+
/** The registered state info */
|
|
424
|
+
state: UIState | undefined;
|
|
425
|
+
}
|
|
426
|
+
/**
|
|
427
|
+
* useUIState hook
|
|
428
|
+
*
|
|
429
|
+
* Registers a UI state with UI Bridge for state management.
|
|
430
|
+
*
|
|
431
|
+
* @example
|
|
432
|
+
* ```tsx
|
|
433
|
+
* function LoginModal() {
|
|
434
|
+
* const { isActive, activate, deactivate } = useUIState({
|
|
435
|
+
* id: 'login-modal',
|
|
436
|
+
* name: 'Login Modal',
|
|
437
|
+
* blocking: true,
|
|
438
|
+
* elements: ['login-email', 'login-password', 'login-submit'],
|
|
439
|
+
* });
|
|
440
|
+
*
|
|
441
|
+
* if (!isActive) return null;
|
|
442
|
+
*
|
|
443
|
+
* return (
|
|
444
|
+
* <div className="modal">
|
|
445
|
+
* <button onClick={deactivate}>Close</button>
|
|
446
|
+
* ...
|
|
447
|
+
* </div>
|
|
448
|
+
* );
|
|
449
|
+
* }
|
|
450
|
+
* ```
|
|
451
|
+
*/
|
|
452
|
+
declare function useUIState(options: UseUIStateOptions): UseUIStateReturn;
|
|
453
|
+
/**
|
|
454
|
+
* useUIStateGroup hook
|
|
455
|
+
*
|
|
456
|
+
* Register and manage a state group with UI Bridge.
|
|
457
|
+
*
|
|
458
|
+
* @example
|
|
459
|
+
* ```tsx
|
|
460
|
+
* function NavigationSection() {
|
|
461
|
+
* const { activate, deactivate } = useUIStateGroup({
|
|
462
|
+
* id: 'nav-group',
|
|
463
|
+
* name: 'Navigation',
|
|
464
|
+
* states: ['nav-home', 'nav-about', 'nav-contact'],
|
|
465
|
+
* });
|
|
466
|
+
*
|
|
467
|
+
* // Activating the group activates all its states
|
|
468
|
+
* // Deactivating the group deactivates all its states
|
|
469
|
+
* }
|
|
470
|
+
* ```
|
|
471
|
+
*/
|
|
472
|
+
interface UseUIStateGroupOptions {
|
|
473
|
+
/** Unique identifier for the group */
|
|
474
|
+
id: string;
|
|
475
|
+
/** Human-readable name */
|
|
476
|
+
name: string;
|
|
477
|
+
/** State IDs belonging to this group */
|
|
478
|
+
states: string[];
|
|
479
|
+
/** Whether to automatically register on mount */
|
|
480
|
+
autoRegister?: boolean;
|
|
481
|
+
}
|
|
482
|
+
interface UseUIStateGroupReturn {
|
|
483
|
+
/** Whether the group is registered */
|
|
484
|
+
registered: boolean;
|
|
485
|
+
/** Activate all states in this group */
|
|
486
|
+
activate: () => string[];
|
|
487
|
+
/** Deactivate all states in this group */
|
|
488
|
+
deactivate: () => string[];
|
|
489
|
+
/** Manually register the group */
|
|
490
|
+
register: () => void;
|
|
491
|
+
/** Manually unregister the group */
|
|
492
|
+
unregister: () => void;
|
|
493
|
+
/** The registered group info */
|
|
494
|
+
group: UIStateGroup | undefined;
|
|
495
|
+
}
|
|
496
|
+
declare function useUIStateGroup(options: UseUIStateGroupOptions): UseUIStateGroupReturn;
|
|
497
|
+
/**
|
|
498
|
+
* useActiveStates hook
|
|
499
|
+
*
|
|
500
|
+
* Subscribe to active states changes.
|
|
501
|
+
*/
|
|
502
|
+
declare function useActiveStates(): string[];
|
|
503
|
+
/**
|
|
504
|
+
* useStateSnapshot hook
|
|
505
|
+
*
|
|
506
|
+
* Get a snapshot of all state management data.
|
|
507
|
+
*/
|
|
508
|
+
declare function useStateSnapshot(): StateSnapshot | null;
|
|
509
|
+
|
|
510
|
+
/**
|
|
511
|
+
* useUITransition Hook
|
|
512
|
+
*
|
|
513
|
+
* Register and execute UI state transitions with UI Bridge.
|
|
514
|
+
*/
|
|
515
|
+
|
|
516
|
+
/**
|
|
517
|
+
* useUITransition options
|
|
518
|
+
*/
|
|
519
|
+
interface UseUITransitionOptions {
|
|
520
|
+
/** Unique identifier for the transition */
|
|
521
|
+
id: string;
|
|
522
|
+
/** Human-readable name */
|
|
523
|
+
name: string;
|
|
524
|
+
/** Precondition: at least one must be active */
|
|
525
|
+
fromStates: string[];
|
|
526
|
+
/** States to activate */
|
|
527
|
+
activateStates: string[];
|
|
528
|
+
/** States to deactivate */
|
|
529
|
+
exitStates: string[];
|
|
530
|
+
/** Groups to activate */
|
|
531
|
+
activateGroups?: string[];
|
|
532
|
+
/** Groups to deactivate */
|
|
533
|
+
exitGroups?: string[];
|
|
534
|
+
/** Actions to execute during transition */
|
|
535
|
+
actions?: WorkflowStep[];
|
|
536
|
+
/** Cost for pathfinding */
|
|
537
|
+
pathCost?: number;
|
|
538
|
+
/** Whether source states remain visible during transition */
|
|
539
|
+
staysVisible?: boolean;
|
|
540
|
+
/** Whether to automatically register on mount */
|
|
541
|
+
autoRegister?: boolean;
|
|
542
|
+
}
|
|
543
|
+
/**
|
|
544
|
+
* useUITransition return value
|
|
545
|
+
*/
|
|
546
|
+
interface UseUITransitionReturn {
|
|
547
|
+
/** Whether the transition is registered */
|
|
548
|
+
registered: boolean;
|
|
549
|
+
/** Whether this transition can be executed from current state */
|
|
550
|
+
canExecute: boolean;
|
|
551
|
+
/** Execute the transition */
|
|
552
|
+
execute: () => Promise<TransitionResult>;
|
|
553
|
+
/** Manually register the transition */
|
|
554
|
+
register: () => void;
|
|
555
|
+
/** Manually unregister the transition */
|
|
556
|
+
unregister: () => void;
|
|
557
|
+
/** The registered transition info */
|
|
558
|
+
transition: UITransition | undefined;
|
|
559
|
+
}
|
|
560
|
+
/**
|
|
561
|
+
* useUITransition hook
|
|
562
|
+
*
|
|
563
|
+
* Registers a state transition with UI Bridge.
|
|
564
|
+
*
|
|
565
|
+
* @example
|
|
566
|
+
* ```tsx
|
|
567
|
+
* function OpenModalButton() {
|
|
568
|
+
* const { canExecute, execute } = useUITransition({
|
|
569
|
+
* id: 'open-login-modal',
|
|
570
|
+
* name: 'Open Login Modal',
|
|
571
|
+
* fromStates: ['dashboard'],
|
|
572
|
+
* activateStates: ['login-modal'],
|
|
573
|
+
* exitStates: [],
|
|
574
|
+
* });
|
|
575
|
+
*
|
|
576
|
+
* return (
|
|
577
|
+
* <button onClick={execute} disabled={!canExecute}>
|
|
578
|
+
* Login
|
|
579
|
+
* </button>
|
|
580
|
+
* );
|
|
581
|
+
* }
|
|
582
|
+
* ```
|
|
583
|
+
*/
|
|
584
|
+
declare function useUITransition(options: UseUITransitionOptions): UseUITransitionReturn;
|
|
585
|
+
/**
|
|
586
|
+
* useTransitions hook
|
|
587
|
+
*
|
|
588
|
+
* Get all registered transitions.
|
|
589
|
+
*/
|
|
590
|
+
declare function useTransitions(): UITransition[];
|
|
591
|
+
/**
|
|
592
|
+
* useAvailableTransitions hook
|
|
593
|
+
*
|
|
594
|
+
* Get transitions that can be executed from current state.
|
|
595
|
+
*/
|
|
596
|
+
declare function useAvailableTransitions(): UITransition[];
|
|
597
|
+
|
|
598
|
+
/**
|
|
599
|
+
* useUINavigation Hook
|
|
600
|
+
*
|
|
601
|
+
* Navigate between UI states using pathfinding with UI Bridge.
|
|
602
|
+
*/
|
|
603
|
+
|
|
604
|
+
/**
|
|
605
|
+
* useUINavigation return value
|
|
606
|
+
*/
|
|
607
|
+
interface UseUINavigationReturn {
|
|
608
|
+
/** Whether UI Bridge is available */
|
|
609
|
+
available: boolean;
|
|
610
|
+
/** Whether navigation is currently in progress */
|
|
611
|
+
isNavigating: boolean;
|
|
612
|
+
/** Last navigation result */
|
|
613
|
+
lastResult: NavigationResult | null;
|
|
614
|
+
/** Find a path to target states (without executing) */
|
|
615
|
+
findPath: (targetStates: string[]) => PathResult;
|
|
616
|
+
/** Navigate to target states */
|
|
617
|
+
navigateTo: (targetStates: string[]) => Promise<NavigationResult>;
|
|
618
|
+
/** Current active states */
|
|
619
|
+
activeStates: string[];
|
|
620
|
+
}
|
|
621
|
+
/**
|
|
622
|
+
* useUINavigation hook
|
|
623
|
+
*
|
|
624
|
+
* Provides state machine navigation capabilities with pathfinding.
|
|
625
|
+
*
|
|
626
|
+
* @example
|
|
627
|
+
* ```tsx
|
|
628
|
+
* function NavigationController() {
|
|
629
|
+
* const { navigateTo, findPath, isNavigating, activeStates } = useUINavigation();
|
|
630
|
+
*
|
|
631
|
+
* const goToDashboard = async () => {
|
|
632
|
+
* // Find path first to check if navigation is possible
|
|
633
|
+
* const path = findPath(['dashboard']);
|
|
634
|
+
* if (!path.found) {
|
|
635
|
+
* console.log('Cannot reach dashboard from current state');
|
|
636
|
+
* return;
|
|
637
|
+
* }
|
|
638
|
+
*
|
|
639
|
+
* console.log(`Will execute ${path.transitions.length} transitions`);
|
|
640
|
+
*
|
|
641
|
+
* // Execute navigation
|
|
642
|
+
* const result = await navigateTo(['dashboard']);
|
|
643
|
+
* if (result.success) {
|
|
644
|
+
* console.log('Successfully navigated to dashboard');
|
|
645
|
+
* }
|
|
646
|
+
* };
|
|
647
|
+
*
|
|
648
|
+
* return (
|
|
649
|
+
* <div>
|
|
650
|
+
* <p>Current states: {activeStates.join(', ')}</p>
|
|
651
|
+
* <button onClick={goToDashboard} disabled={isNavigating}>
|
|
652
|
+
* Go to Dashboard
|
|
653
|
+
* </button>
|
|
654
|
+
* </div>
|
|
655
|
+
* );
|
|
656
|
+
* }
|
|
657
|
+
* ```
|
|
658
|
+
*/
|
|
659
|
+
declare function useUINavigation(): UseUINavigationReturn;
|
|
660
|
+
/**
|
|
661
|
+
* useCanNavigateTo hook
|
|
662
|
+
*
|
|
663
|
+
* Check if navigation to target states is possible.
|
|
664
|
+
*
|
|
665
|
+
* @example
|
|
666
|
+
* ```tsx
|
|
667
|
+
* function DashboardLink() {
|
|
668
|
+
* const canNavigate = useCanNavigateTo(['dashboard']);
|
|
669
|
+
*
|
|
670
|
+
* return (
|
|
671
|
+
* <button disabled={!canNavigate}>
|
|
672
|
+
* Dashboard
|
|
673
|
+
* </button>
|
|
674
|
+
* );
|
|
675
|
+
* }
|
|
676
|
+
* ```
|
|
677
|
+
*/
|
|
678
|
+
declare function useCanNavigateTo(targetStates: string[]): boolean;
|
|
679
|
+
/**
|
|
680
|
+
* useNavigationPath hook
|
|
681
|
+
*
|
|
682
|
+
* Get the path to target states (updates when active states change).
|
|
683
|
+
*
|
|
684
|
+
* @example
|
|
685
|
+
* ```tsx
|
|
686
|
+
* function PathDisplay() {
|
|
687
|
+
* const path = useNavigationPath(['checkout']);
|
|
688
|
+
*
|
|
689
|
+
* if (!path.found) {
|
|
690
|
+
* return <p>Cannot reach checkout from here</p>;
|
|
691
|
+
* }
|
|
692
|
+
*
|
|
693
|
+
* return (
|
|
694
|
+
* <p>
|
|
695
|
+
* Steps to checkout: {path.transitions.join(' -> ')}
|
|
696
|
+
* (Cost: {path.totalCost})
|
|
697
|
+
* </p>
|
|
698
|
+
* );
|
|
699
|
+
* }
|
|
700
|
+
* ```
|
|
701
|
+
*/
|
|
702
|
+
declare function useNavigationPath(targetStates: string[]): PathResult;
|
|
703
|
+
|
|
704
|
+
/**
|
|
705
|
+
* useAutoRegister Hook
|
|
706
|
+
*
|
|
707
|
+
* Enables automatic registration of interactive DOM elements with the UI Bridge.
|
|
708
|
+
* This eliminates the need for manual useUIElement() calls on every component.
|
|
709
|
+
*
|
|
710
|
+
* Features:
|
|
711
|
+
* - Auto-discovers interactive elements (buttons, inputs, links, etc.)
|
|
712
|
+
* - Uses MutationObserver to detect new elements
|
|
713
|
+
* - Smart ID generation (data-testid > data-ui-id > semantic > auto-generated)
|
|
714
|
+
* - Debounced updates for performance
|
|
715
|
+
* - Respects existing manually registered elements
|
|
716
|
+
*/
|
|
717
|
+
/**
|
|
718
|
+
* ID generation strategy
|
|
719
|
+
*/
|
|
720
|
+
type IdStrategy = 'data-testid' | 'data-ui-id' | 'semantic' | 'auto' | 'prefer-existing';
|
|
721
|
+
/**
|
|
722
|
+
* Options for auto-registration
|
|
723
|
+
*/
|
|
724
|
+
interface AutoRegisterOptions {
|
|
725
|
+
/** Enable auto-registration (default: true in dev mode) */
|
|
726
|
+
enabled?: boolean;
|
|
727
|
+
/** Root element to observe (default: document.body) */
|
|
728
|
+
root?: HTMLElement | null;
|
|
729
|
+
/** ID generation strategy (default: 'prefer-existing') */
|
|
730
|
+
idStrategy?: IdStrategy;
|
|
731
|
+
/** Debounce time for mutation handling (ms, default: 100) */
|
|
732
|
+
debounceMs?: number;
|
|
733
|
+
/** Include hidden elements (default: false) */
|
|
734
|
+
includeHidden?: boolean;
|
|
735
|
+
/** Only register elements matching these selectors */
|
|
736
|
+
includeSelectors?: string[];
|
|
737
|
+
/** Exclude elements matching these selectors */
|
|
738
|
+
excludeSelectors?: string[];
|
|
739
|
+
/** Custom ID generator function */
|
|
740
|
+
generateId?: (element: HTMLElement) => string;
|
|
741
|
+
/** Callback when element is registered */
|
|
742
|
+
onRegister?: (id: string, element: HTMLElement) => void;
|
|
743
|
+
/** Callback when element is unregistered */
|
|
744
|
+
onUnregister?: (id: string) => void;
|
|
745
|
+
}
|
|
746
|
+
/**
|
|
747
|
+
* Hook for automatic element registration
|
|
748
|
+
*
|
|
749
|
+
* @example
|
|
750
|
+
* ```tsx
|
|
751
|
+
* function App() {
|
|
752
|
+
* // Enable auto-registration for all interactive elements
|
|
753
|
+
* useAutoRegister({ enabled: true });
|
|
754
|
+
*
|
|
755
|
+
* return (
|
|
756
|
+
* <div>
|
|
757
|
+
* <button data-testid="submit-btn">Submit</button>
|
|
758
|
+
* <input data-testid="email-input" />
|
|
759
|
+
* </div>
|
|
760
|
+
* );
|
|
761
|
+
* }
|
|
762
|
+
* ```
|
|
763
|
+
*/
|
|
764
|
+
declare function useAutoRegister(options?: AutoRegisterOptions): void;
|
|
765
|
+
|
|
766
|
+
interface AutoRegisterProviderProps extends Omit<AutoRegisterOptions, 'root'> {
|
|
767
|
+
/** Children to render */
|
|
768
|
+
children: ReactNode;
|
|
769
|
+
/** Use this element as the observation root instead of document.body */
|
|
770
|
+
scopeToChildren?: boolean;
|
|
771
|
+
}
|
|
772
|
+
/**
|
|
773
|
+
* Provider component that enables automatic element registration.
|
|
774
|
+
*
|
|
775
|
+
* Features:
|
|
776
|
+
* - Automatically discovers and registers interactive elements
|
|
777
|
+
* - Uses MutationObserver to detect new elements
|
|
778
|
+
* - Smart ID generation based on data-testid, semantic names, etc.
|
|
779
|
+
* - Configurable selectors and ID strategies
|
|
780
|
+
*
|
|
781
|
+
* Place this component at the root of your app (inside UIBridgeProvider)
|
|
782
|
+
* for comprehensive automatic element registration.
|
|
783
|
+
*/
|
|
784
|
+
declare function AutoRegisterProvider({ children, scopeToChildren, enabled, idStrategy, debounceMs, includeHidden, includeSelectors, excludeSelectors, generateId, onRegister, onUnregister, }: AutoRegisterProviderProps): react_jsx_runtime.JSX.Element;
|
|
785
|
+
|
|
786
|
+
export { type AutoRegisterOptions, AutoRegisterProvider, type AutoRegisterProviderProps, type ComponentActionDef, type IdStrategy, type UIBridgeContextValue, UIBridgeProvider, type UIBridgeProviderProps, type UseUIBridgeReturn, type UseUIComponentOptions, type UseUIComponentReturn, type UseUIElementOptions, type UseUIElementReturn, type UseUINavigationReturn, type UseUIStateGroupOptions, type UseUIStateGroupReturn, type UseUIStateOptions, type UseUIStateReturn, type UseUITransitionOptions, type UseUITransitionReturn, useActiveStates, useAutoRegister, useAvailableTransitions, useCanNavigateTo, useNavigationPath, useStateSnapshot, useTransitions, useUIBridge, useUIBridgeContext, useUIBridgeOptional, useUIBridgeRequired, useUIComponent, useUIComponentAction, useUIElement, useUIElementRef, useUINavigation, useUIState, useUIStateGroup, useUITransition };
|