@qontinui/ui-bridge 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,8 +1,442 @@
 import { createContext, useRef, useState, useMemo, useEffect, useCallback, useContext } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
+// src/core/websocket-client.ts
+function generateId() {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+}
+var UIBridgeWSClient = class {
+  constructor(config) {
+    this.ws = null;
+    this.state = "disconnected";
+    this.clientId = null;
+    this.reconnectAttempts = 0;
+    this.reconnectTimer = null;
+    this.pingTimer = null;
+    this.pendingRequests = /* @__PURE__ */ new Map();
+    // Event listeners
+    this.connectionListeners = /* @__PURE__ */ new Set();
+    this.eventListeners = /* @__PURE__ */ new Map();
+    this.errorListeners = /* @__PURE__ */ new Set();
+    // Current subscriptions
+    this.subscriptions = {};
+    this.config = {
+      url: config.url,
+      autoReconnect: config.autoReconnect ?? true,
+      reconnectDelay: config.reconnectDelay ?? 1e3,
+      maxReconnectAttempts: config.maxReconnectAttempts ?? 10,
+      pingInterval: config.pingInterval ?? 3e4,
+      connectionTimeout: config.connectionTimeout ?? 1e4
+    };
+  }
+  /**
+   * Get current connection state
+   */
+  get connectionState() {
+    return this.state;
+  }
+  /**
+   * Get assigned client ID
+   */
+  get id() {
+    return this.clientId;
+  }
+  /**
+   * Connect to the WebSocket server
+   */
+  connect() {
+    return new Promise((resolve, reject) => {
+      if (this.ws && this.state === "connected") {
+        resolve();
+        return;
+      }
+      this.setState("connecting");
+      try {
+        this.ws = new WebSocket(this.config.url);
+      } catch (error) {
+        this.setState("disconnected");
+        reject(error);
+        return;
+      }
+      const connectionTimeout = setTimeout(() => {
+        if (this.state === "connecting") {
+          this.ws?.close();
+          this.setState("disconnected");
+          reject(new Error("Connection timeout"));
+        }
+      }, this.config.connectionTimeout);
+      this.ws.onopen = () => {
+        clearTimeout(connectionTimeout);
+      };
+      this.ws.onmessage = (event) => {
+        try {
+          const message = JSON.parse(event.data);
+          this.handleMessage(message);
+          if (message.type === "welcome") {
+            clearTimeout(connectionTimeout);
+            this.reconnectAttempts = 0;
+            this.setState("connected");
+            this.startPingInterval();
+            if (this.subscriptions.events?.length || this.subscriptions.elementIds?.length || this.subscriptions.componentIds?.length) {
+              this.subscribe(this.subscriptions);
+            }
+            resolve();
+          }
+        } catch (error) {
+          console.error("Failed to parse WebSocket message:", error);
+        }
+      };
+      this.ws.onerror = (_event) => {
+        clearTimeout(connectionTimeout);
+        const error = new Error("WebSocket error");
+        this.notifyError(error);
+        if (this.state === "connecting") {
+          reject(error);
+        }
+      };
+      this.ws.onclose = () => {
+        clearTimeout(connectionTimeout);
+        this.stopPingInterval();
+        this.clientId = null;
+        const wasConnected = this.state === "connected";
+        this.setState("disconnected");
+        for (const [_id, pending] of this.pendingRequests) {
+          clearTimeout(pending.timeout);
+          pending.reject(new Error("Connection closed"));
+        }
+        this.pendingRequests.clear();
+        if (wasConnected && this.config.autoReconnect && (this.config.maxReconnectAttempts === 0 || this.reconnectAttempts < this.config.maxReconnectAttempts)) {
+          this.scheduleReconnect();
+        }
+      };
+    });
+  }
+  /**
+   * Disconnect from the server
+   */
+  disconnect() {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.stopPingInterval();
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+    this.setState("disconnected");
+  }
+  /**
+   * Subscribe to events
+   */
+  async subscribe(options) {
+    this.subscriptions = { ...this.subscriptions, ...options };
+    const response = await this.sendRequest({
+      id: generateId(),
+      type: "subscribe",
+      timestamp: Date.now(),
+      payload: options
+    });
+    return response.events;
+  }
+  /**
+   * Unsubscribe from events
+   */
+  async unsubscribe(events) {
+    if (events) {
+      this.subscriptions.events = this.subscriptions.events?.filter((e) => !events.includes(e));
+    } else {
+      this.subscriptions = {};
+    }
+    const response = await this.sendRequest({
+      id: generateId(),
+      type: "unsubscribe",
+      timestamp: Date.now(),
+      payload: { events }
+    });
+    return response.events;
+  }
+  /**
+   * Find elements
+   */
+  async find(options) {
+    const response = await this.sendRequest({
+      id: generateId(),
+      type: "find",
+      timestamp: Date.now(),
+      payload: options
+    });
+    return response.elements;
+  }
+  /**
+   * Discover elements
+   * @deprecated Use find() instead
+   */
+  async discover(options) {
+    return this.find(options);
+  }
+  /**
+   * Get element details
+   */
+  async getElement(elementId, includeState = true) {
+    const response = await this.sendRequest({
+      id: generateId(),
+      type: "getElement",
+      timestamp: Date.now(),
+      payload: { elementId, includeState }
+    });
+    return response.element;
+  }
+  /**
+   * Get full snapshot
+   */
+  async getSnapshot() {
+    const response = await this.sendRequest({
+      id: generateId(),
+      type: "getSnapshot",
+      timestamp: Date.now()
+    });
+    return response;
+  }
+  /**
+   * Execute action on an element
+   */
+  async executeAction(elementId, action) {
+    const response = await this.sendRequest({
+      id: generateId(),
+      type: "executeAction",
+      timestamp: Date.now(),
+      payload: { elementId, action }
+    });
+    return response;
+  }
+  /**
+   * Execute component action
+   */
+  async executeComponentAction(componentId, action, params) {
+    const response = await this.sendRequest({
+      id: generateId(),
+      type: "executeComponentAction",
+      timestamp: Date.now(),
+      payload: { componentId, action, params }
+    });
+    return response;
+  }
+  /**
+   * Execute workflow with optional progress streaming
+   */
+  async executeWorkflow(workflowId, params, onProgress) {
+    const id = generateId();
+    const progressHandler = onProgress ? (message) => {
+      if (message.type === "workflowProgress" && message.requestId === id) {
+        onProgress({
+          currentStep: message.payload.currentStep,
+          totalSteps: message.payload.totalSteps,
+          step: {
+            id: message.payload.step.id,
+            status: message.payload.step.status
+          }
+        });
+      }
+    } : void 0;
+    const response = await this.sendRequest(
+      {
+        id,
+        type: "executeWorkflow",
+        timestamp: Date.now(),
+        payload: { workflowId, params, streamProgress: !!onProgress }
+      },
+      progressHandler
+    );
+    return response;
+  }
+  /**
+   * Add connection state listener
+   */
+  onConnectionChange(listener) {
+    this.connectionListeners.add(listener);
+    return () => this.connectionListeners.delete(listener);
+  }
+  /**
+   * Add event listener
+   */
+  onEvent(eventType, listener) {
+    if (!this.eventListeners.has(eventType)) {
+      this.eventListeners.set(eventType, /* @__PURE__ */ new Set());
+    }
+    this.eventListeners.get(eventType).add(listener);
+    return () => this.eventListeners.get(eventType)?.delete(listener);
+  }
+  /**
+   * Add error listener
+   */
+  onError(listener) {
+    this.errorListeners.add(listener);
+    return () => this.errorListeners.delete(listener);
+  }
+  // Private methods
+  setState(state) {
+    this.state = state;
+    for (const listener of this.connectionListeners) {
+      try {
+        listener(state);
+      } catch (error) {
+        console.error("Connection listener error:", error);
+      }
+    }
+  }
+  handleMessage(message) {
+    switch (message.type) {
+      case "welcome":
+        this.clientId = message.payload.clientId;
+        break;
+      case "pong":
+        break;
+      case "subscribed":
+      case "unsubscribed":
+        break;
+      case "event":
+        this.notifyEvent(message.payload);
+        break;
+      case "response":
+        this.handleResponse(message);
+        break;
+      case "error":
+        if (message.requestId) {
+          this.handleResponse({
+            ...message,
+            type: "response",
+            requestId: message.requestId,
+            payload: {
+              success: false,
+              error: message.payload.message
+            }
+          });
+        } else {
+          this.notifyError(new Error(message.payload.message));
+        }
+        break;
+    }
+  }
+  handleResponse(message) {
+    const pending = this.pendingRequests.get(message.requestId);
+    if (!pending) return;
+    clearTimeout(pending.timeout);
+    this.pendingRequests.delete(message.requestId);
+    if (message.type === "response") {
+      if (message.payload.success) {
+        pending.resolve(message.payload.data);
+      } else {
+        pending.reject(new Error(message.payload.error || "Request failed"));
+      }
+    }
+  }
+  notifyEvent(event) {
+    const typeListeners = this.eventListeners.get(event.type);
+    if (typeListeners) {
+      for (const listener of typeListeners) {
+        try {
+          listener(event);
+        } catch (error) {
+          console.error("Event listener error:", error);
+        }
+      }
+    }
+    const wildcardListeners = this.eventListeners.get("*");
+    if (wildcardListeners) {
+      for (const listener of wildcardListeners) {
+        try {
+          listener(event);
+        } catch (error) {
+          console.error("Event listener error:", error);
+        }
+      }
+    }
+  }
+  notifyError(error) {
+    for (const listener of this.errorListeners) {
+      try {
+        listener(error);
+      } catch (e) {
+        console.error("Error listener error:", e);
+      }
+    }
+  }
+  sendRequest(message, progressHandler) {
+    return new Promise((resolve, reject) => {
+      if (!this.ws || this.state !== "connected") {
+        reject(new Error("Not connected"));
+        return;
+      }
+      const timeout = setTimeout(() => {
+        this.pendingRequests.delete(message.id);
+        reject(new Error("Request timeout"));
+      }, 3e4);
+      this.pendingRequests.set(message.id, {
+        resolve,
+        reject,
+        timeout
+      });
+      if (progressHandler && this.ws) {
+        const originalHandler = this.ws.onmessage;
+        const wsRef = this.ws;
+        const wrappedHandler = (event) => {
+          try {
+            const msg = JSON.parse(event.data);
+            if (msg.type === "workflowProgress") {
+              progressHandler(msg);
+            }
+          } catch {
+          }
+          if (originalHandler) {
+            originalHandler.call(wsRef, event);
+          }
+        };
+        this.ws.onmessage = wrappedHandler;
+      }
+      this.ws.send(JSON.stringify(message));
+    });
+  }
+  scheduleReconnect() {
+    if (this.reconnectTimer) return;
+    this.setState("reconnecting");
+    this.reconnectAttempts++;
+    const delay = Math.min(
+      this.config.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1),
+      3e4
+    );
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect().catch(() => {
+      });
+    }, delay);
+  }
+  startPingInterval() {
+    if (this.config.pingInterval <= 0) return;
+    this.pingTimer = setInterval(() => {
+      if (this.ws && this.state === "connected") {
+        this.ws.send(
+          JSON.stringify({
+            id: generateId(),
+            type: "ping",
+            timestamp: Date.now()
+          })
+        );
+      }
+    }, this.config.pingInterval);
+  }
+  stopPingInterval() {
+    if (this.pingTimer) {
+      clearInterval(this.pingTimer);
+      this.pingTimer = null;
+    }
+  }
+};
+function createWSClient(config) {
+  return new UIBridgeWSClient(config);
+}
+
 // src/core/element-identifier.ts
-var ID_ATTRIBUTES = ["data-ui-id", "data-testid", "data-awas-element", "id"];
 function generateXPath(element) {
   if (element.id) {
     return `//*[@id="${element.id}"]`;
@@ -186,39 +620,6 @@ function findElementByIdentifier(identifier, root = document) {
   }
   return null;
 }
-function findAllElementsByIdentifier(pattern, root = document) {
-  const results = [];
-  try {
-    const elements = root.querySelectorAll(pattern);
-    results.push(...Array.from(elements));
-    if (results.length > 0) return results;
-  } catch {
-  }
-  const partials = [
-    `[data-ui-id*="${pattern}"]`,
-    `[data-testid*="${pattern}"]`,
-    `[data-awas-element*="${pattern}"]`,
-    `[id*="${pattern}"]`
-  ];
-  for (const selector of partials) {
-    try {
-      const elements = root.querySelectorAll(selector);
-      for (const el of elements) {
-        if (!results.includes(el)) {
-          results.push(el);
-        }
-      }
-    } catch {
-    }
-  }
-  return results;
-}
-function elementMatchesIdentifier(element, identifier) {
-  if (typeof identifier === "string") {
-    return element.getAttribute("data-ui-id") === identifier || element.getAttribute("data-testid") === identifier || element.getAttribute("data-awas-element") === identifier || element.id === identifier || element.matches(identifier);
-  }
-  return identifier.uiId && element.getAttribute("data-ui-id") === identifier.uiId || identifier.testId && element.getAttribute("data-testid") === identifier.testId || identifier.awasId && element.getAttribute("data-awas-element") === identifier.awasId || identifier.htmlId && element.id === identifier.htmlId || false;
-}
 
 // src/ai/fuzzy-matcher.ts
 var DEFAULT_FUZZY_CONFIG = {
@@ -1258,937 +1659,512 @@ var UIBridgeRegistry = class {
   }
   /**
    * Register a component
-   */
-  registerComponent(id, options) {
-    const registered = {
-      id,
-      name: options.name,
-      description: options.description,
-      actions: options.actions?.map((a) => ({
-        id: a.id,
-        label: a.label,
-        description: a.description,
-        handler: a.handler
-      })) ?? [],
-      elementIds: options.elementIds,
-      registeredAt: Date.now(),
-      mounted: true
-    };
-    this.components.set(id, registered);
-    this.emit("component:registered", { id, name: options.name });
-    return registered;
-  }
-  /**
-   * Unregister a component
-   */
-  unregisterComponent(id) {
-    const component = this.components.get(id);
-    if (component) {
-      component.mounted = false;
-      this.components.delete(id);
-      this.emit("component:unregistered", { id });
-      return true;
-    }
-    return false;
-  }
-  /**
-   * Get a registered component
-   */
-  getComponent(id) {
-    return this.components.get(id);
-  }
-  /**
-   * Get all registered components
-   */
-  getAllComponents() {
-    return Array.from(this.components.values());
-  }
-  /**
-   * Register a workflow
-   */
-  registerWorkflow(workflow) {
-    this.workflows.set(workflow.id, workflow);
-    return workflow;
-  }
-  /**
-   * Unregister a workflow
-   */
-  unregisterWorkflow(id) {
-    return this.workflows.delete(id);
-  }
-  /**
-   * Get a workflow
-   */
-  getWorkflow(id) {
-    return this.workflows.get(id);
-  }
-  /**
-   * Get all workflows
-   */
-  getAllWorkflows() {
-    return Array.from(this.workflows.values());
-  }
-  // ==========================================================================
-  // State Management
-  // ==========================================================================
-  /**
-   * Register a state
-   */
-  registerState(state) {
-    this.states.set(state.id, state);
-    this.emit("element:registered", { id: state.id, type: "state", name: state.name });
-    return state;
-  }
-  /**
-   * Unregister a state
-   */
-  unregisterState(id) {
-    const state = this.states.get(id);
-    if (state) {
-      this.activeStates.delete(id);
-      this.states.delete(id);
-      this.emit("element:unregistered", { id, type: "state" });
-      return true;
-    }
-    return false;
-  }
-  /**
-   * Get a registered state
-   */
-  getState(id) {
-    return this.states.get(id);
-  }
-  /**
-   * Get all registered states
-   */
-  getAllStates() {
-    return Array.from(this.states.values());
-  }
-  /**
-   * Register a state group
-   */
-  registerStateGroup(group) {
-    this.stateGroups.set(group.id, group);
-    return group;
-  }
-  /**
-   * Unregister a state group
-   */
-  unregisterStateGroup(id) {
-    return this.stateGroups.delete(id);
-  }
-  /**
-   * Get a state group
-   */
-  getStateGroup(id) {
-    return this.stateGroups.get(id);
-  }
-  /**
-   * Get all state groups
-   */
-  getAllStateGroups() {
-    return Array.from(this.stateGroups.values());
-  }
-  /**
-   * Register a transition
-   */
-  registerTransition(transition) {
-    this.transitions.set(transition.id, transition);
-    return transition;
-  }
-  /**
-   * Unregister a transition
-   */
-  unregisterTransition(id) {
-    return this.transitions.delete(id);
-  }
-  /**
-   * Get a transition
-   */
-  getTransition(id) {
-    return this.transitions.get(id);
-  }
-  /**
-   * Get all transitions
-   */
-  getAllTransitions() {
-    return Array.from(this.transitions.values());
-  }
-  /**
-   * Get currently active states
-   */
-  getActiveStates() {
-    return Array.from(this.activeStates);
-  }
-  /**
-   * Check if a state is active
-   */
-  isStateActive(id) {
-    return this.activeStates.has(id);
-  }
-  /**
-   * Activate a state
-   */
-  activateState(id) {
-    const state = this.states.get(id);
-    if (!state) {
-      return false;
-    }
-    for (const activeId of this.activeStates) {
-      const activeState = this.states.get(activeId);
-      if (activeState?.blocking && activeState.id !== id) {
-        return false;
-      }
-      if (activeState?.blocks?.includes(id)) {
-        return false;
-      }
-    }
-    const wasActive = this.activeStates.has(id);
-    this.activeStates.add(id);
-    if (!wasActive) {
-      this.emit("element:stateChanged", {
-        stateId: id,
-        active: true,
-        activeStates: this.getActiveStates()
-      });
-    }
-    return true;
+   */
+  registerComponent(id, options) {
+    const registered = {
+      id,
+      name: options.name,
+      description: options.description,
+      actions: options.actions?.map((a) => ({
+        id: a.id,
+        label: a.label,
+        description: a.description,
+        handler: a.handler
+      })) ?? [],
+      elementIds: options.elementIds,
+      registeredAt: Date.now(),
+      mounted: true,
+      getState: options.getState,
+      getComputed: options.getComputed
+    };
+    this.components.set(id, registered);
+    this.emit("component:registered", { id, name: options.name });
+    return registered;
   }
   /**
-   * Deactivate a state
+   * Unregister a component
    */
-  deactivateState(id) {
-    const wasActive = this.activeStates.has(id);
-    this.activeStates.delete(id);
-    if (wasActive) {
-      this.emit("element:stateChanged", {
-        stateId: id,
-        active: false,
-        activeStates: this.getActiveStates()
-      });
+  unregisterComponent(id) {
+    const component = this.components.get(id);
+    if (component) {
+      component.mounted = false;
+      this.components.delete(id);
+      this.emit("component:unregistered", { id });
+      return true;
     }
-    return wasActive;
+    return false;
   }
   /**
-   * Activate multiple states
+   * Get a registered component
    */
-  activateStates(ids) {
-    const activated = [];
-    for (const id of ids) {
-      if (this.activateState(id)) {
-        activated.push(id);
-      }
-    }
-    return activated;
+  getComponent(id) {
+    return this.components.get(id);
   }
   /**
-   * Deactivate multiple states
+   * Get all registered components
    */
-  deactivateStates(ids) {
-    const deactivated = [];
-    for (const id of ids) {
-      if (this.deactivateState(id)) {
-        deactivated.push(id);
-      }
-    }
-    return deactivated;
+  getAllComponents() {
+    return Array.from(this.components.values());
   }
   /**
-   * Activate a state group (all states in the group)
+   * Get the current state and computed properties of a component
    */
-  activateStateGroup(groupId) {
-    const group = this.stateGroups.get(groupId);
-    if (!group) return [];
-    return this.activateStates(group.states);
+  getComponentState(id) {
+    const component = this.components.get(id);
+    if (!component || !component.mounted) {
+      return null;
+    }
+    return {
+      state: component.getState?.() ?? {},
+      computed: component.getComputed?.() ?? {},
+      timestamp: Date.now()
+    };
   }
   /**
-   * Deactivate a state group (all states in the group)
+   * Register a workflow
    */
-  deactivateStateGroup(groupId) {
-    const group = this.stateGroups.get(groupId);
-    if (!group) return [];
-    return this.deactivateStates(group.states);
+  registerWorkflow(workflow) {
+    this.workflows.set(workflow.id, workflow);
+    return workflow;
   }
   /**
-   * Check if a transition can be executed from current state
+   * Unregister a workflow
    */
-  canExecuteTransition(transitionId) {
-    const transition = this.transitions.get(transitionId);
-    if (!transition) return false;
-    return transition.fromStates.some((stateId) => this.activeStates.has(stateId));
+  unregisterWorkflow(id) {
+    return this.workflows.delete(id);
   }
   /**
-   * Execute a transition
+   * Get a workflow
    */
-  async executeTransition(transitionId) {
-    const startTime = performance.now();
-    const transition = this.transitions.get(transitionId);
-    if (!transition) {
-      return {
-        success: false,
-        activatedStates: [],
-        deactivatedStates: [],
-        error: `Transition not found: ${transitionId}`,
-        durationMs: performance.now() - startTime
-      };
-    }
-    if (!this.canExecuteTransition(transitionId)) {
-      return {
-        success: false,
-        activatedStates: [],
-        deactivatedStates: [],
-        error: "Precondition not met: none of the fromStates are active",
-        failedPhase: "precondition",
-        durationMs: performance.now() - startTime
-      };
-    }
-    try {
-      const deactivated = this.deactivateStates(transition.exitStates);
-      if (transition.exitGroups) {
-        for (const groupId of transition.exitGroups) {
-          deactivated.push(...this.deactivateStateGroup(groupId));
-        }
-      }
-      const activated = this.activateStates(transition.activateStates);
-      if (transition.activateGroups) {
-        for (const groupId of transition.activateGroups) {
-          activated.push(...this.activateStateGroup(groupId));
-        }
-      }
-      return {
-        success: true,
-        activatedStates: activated,
-        deactivatedStates: deactivated,
-        durationMs: performance.now() - startTime
-      };
-    } catch (error) {
-      return {
-        success: false,
-        activatedStates: [],
-        deactivatedStates: [],
-        error: error instanceof Error ? error.message : String(error),
-        failedPhase: "execution",
-        durationMs: performance.now() - startTime
-      };
-    }
+  getWorkflow(id) {
+    return this.workflows.get(id);
   }
   /**
-   * Find a path from current state to target states
-   *
-   * Uses a simple BFS algorithm for pathfinding.
-   * For more advanced pathfinding (Dijkstra, A*), use the Python state manager service.
+   * Get all workflows
    */
-  findPath(targetStates) {
-    if (targetStates.every((t) => this.activeStates.has(t))) {
-      return {
-        found: true,
-        transitions: [],
-        totalCost: 0,
-        targetStates,
-        estimatedSteps: 0
-      };
-    }
-    const queue = [
-      { activeStates: new Set(this.activeStates), path: [], cost: 0 }
-    ];
-    const visited = /* @__PURE__ */ new Set();
-    while (queue.length > 0) {
-      const current = queue.shift();
-      const stateKey = Array.from(current.activeStates).sort().join(",");
-      if (visited.has(stateKey)) continue;
-      visited.add(stateKey);
-      if (targetStates.every((t) => current.activeStates.has(t))) {
-        return {
-          found: true,
-          transitions: current.path,
-          totalCost: current.cost,
-          targetStates,
-          estimatedSteps: current.path.length
-        };
-      }
-      for (const transition of this.transitions.values()) {
-        const canExecute = transition.fromStates.some((s) => current.activeStates.has(s));
-        if (!canExecute) continue;
-        const newActive = new Set(current.activeStates);
-        for (const s of transition.exitStates) newActive.delete(s);
-        for (const s of transition.activateStates) newActive.add(s);
-        const newCost = current.cost + (transition.pathCost ?? 1);
-        queue.push({
-          activeStates: newActive,
-          path: [...current.path, transition.id],
-          cost: newCost
-        });
-      }
-    }
-    return {
-      found: false,
-      transitions: [],
-      totalCost: 0,
-      targetStates,
-      estimatedSteps: 0
-    };
+  getAllWorkflows() {
+    return Array.from(this.workflows.values());
   }
+  // ==========================================================================
+  // State Management
+  // ==========================================================================
   /**
-   * Navigate to target states using pathfinding
+   * Register a state
    */
-  async navigateTo(targetStates) {
-    const startTime = performance.now();
-    const path = this.findPath(targetStates);
-    if (!path.found) {
-      return {
-        success: false,
-        path,
-        executedTransitions: [],
-        finalActiveStates: this.getActiveStates(),
-        error: `No path found to target states: ${targetStates.join(", ")}`,
-        durationMs: performance.now() - startTime
-      };
-    }
-    const executedTransitions = [];
-    for (const transitionId of path.transitions) {
-      const result = await this.executeTransition(transitionId);
-      if (!result.success) {
-        return {
-          success: false,
-          path,
-          executedTransitions,
-          finalActiveStates: this.getActiveStates(),
-          error: result.error,
-          durationMs: performance.now() - startTime
-        };
-      }
-      executedTransitions.push(transitionId);
-    }
-    return {
-      success: true,
-      path,
-      executedTransitions,
-      finalActiveStates: this.getActiveStates(),
-      durationMs: performance.now() - startTime
-    };
+  registerState(state) {
+    this.states.set(state.id, state);
+    this.emit("element:registered", { id: state.id, type: "state", name: state.name });
+    return state;
   }
   /**
-   * Create a state snapshot
+   * Unregister a state
    */
-  createStateSnapshot() {
-    return {
-      timestamp: Date.now(),
-      activeStates: this.getActiveStates(),
-      states: this.getAllStates(),
-      groups: this.getAllStateGroups(),
-      transitions: this.getAllTransitions()
-    };
+  unregisterState(id) {
+    const state = this.states.get(id);
+    if (state) {
+      this.activeStates.delete(id);
+      this.states.delete(id);
+      this.emit("element:unregistered", { id, type: "state" });
+      return true;
+    }
+    return false;
   }
   /**
-   * Create a snapshot of the current state
+   * Get a registered state
    */
-  createSnapshot() {
-    return {
-      timestamp: Date.now(),
-      elements: this.getAllElements().map((el) => ({
-        id: el.id,
-        type: el.type,
-        label: el.label,
-        identifier: el.getIdentifier(),
-        state: el.getState(),
-        actions: el.actions,
-        customActions: el.customActions ? Object.keys(el.customActions) : void 0
-      })),
-      components: this.getAllComponents().map((comp) => ({
-        id: comp.id,
-        name: comp.name,
-        description: comp.description,
-        actions: comp.actions.map((a) => a.id),
-        elementIds: comp.elementIds
-      })),
-      workflows: this.getAllWorkflows().map((wf) => ({
-        id: wf.id,
-        name: wf.name,
-        description: wf.description,
-        stepCount: wf.steps.length
-      }))
-    };
+  getState(id) {
+    return this.states.get(id);
   }
   /**
-   * Clear all registrations
+   * Get all registered states
    */
-  clear() {
-    this.elements.clear();
-    this.components.clear();
-    this.workflows.clear();
-    this.eventListeners.clear();
-    this.states.clear();
-    this.stateGroups.clear();
-    this.transitions.clear();
-    this.activeStates.clear();
+  getAllStates() {
+    return Array.from(this.states.values());
   }
   /**
-   * Get registry statistics
+   * Register a state group
    */
-  getStats() {
-    const elements = this.getAllElements();
-    const components = this.getAllComponents();
-    return {
-      elementCount: elements.length,
-      componentCount: components.length,
-      workflowCount: this.workflows.size,
-      mountedElementCount: elements.filter((e) => e.mounted).length,
-      mountedComponentCount: components.filter((c) => c.mounted).length,
-      stateCount: this.states.size,
-      stateGroupCount: this.stateGroups.size,
-      transitionCount: this.transitions.size,
-      activeStateCount: this.activeStates.size
-    };
-  }
-};
-var globalRegistry = null;
-function getGlobalRegistry() {
-  if (!globalRegistry) {
-    globalRegistry = new UIBridgeRegistry();
-  }
-  return globalRegistry;
-}
-function setGlobalRegistry(registry) {
-  globalRegistry = registry;
-}
-function resetGlobalRegistry() {
-  globalRegistry?.clear();
-  globalRegistry = null;
-}
-
-// src/core/websocket-client.ts
-function generateId() {
-  return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
-}
-var UIBridgeWSClient = class {
-  constructor(config) {
-    this.ws = null;
-    this.state = "disconnected";
-    this.clientId = null;
-    this.reconnectAttempts = 0;
-    this.reconnectTimer = null;
-    this.pingTimer = null;
-    this.pendingRequests = /* @__PURE__ */ new Map();
-    // Event listeners
-    this.connectionListeners = /* @__PURE__ */ new Set();
-    this.eventListeners = /* @__PURE__ */ new Map();
-    this.errorListeners = /* @__PURE__ */ new Set();
-    // Current subscriptions
-    this.subscriptions = {};
-    this.config = {
-      url: config.url,
-      autoReconnect: config.autoReconnect ?? true,
-      reconnectDelay: config.reconnectDelay ?? 1e3,
-      maxReconnectAttempts: config.maxReconnectAttempts ?? 10,
-      pingInterval: config.pingInterval ?? 3e4,
-      connectionTimeout: config.connectionTimeout ?? 1e4
-    };
+  registerStateGroup(group) {
+    this.stateGroups.set(group.id, group);
+    return group;
   }
   /**
-   * Get current connection state
+   * Unregister a state group
    */
-  get connectionState() {
-    return this.state;
+  unregisterStateGroup(id) {
+    return this.stateGroups.delete(id);
   }
   /**
-   * Get assigned client ID
+   * Get a state group
    */
-  get id() {
-    return this.clientId;
+  getStateGroup(id) {
+    return this.stateGroups.get(id);
   }
   /**
-   * Connect to the WebSocket server
+   * Get all state groups
    */
-  connect() {
-    return new Promise((resolve, reject) => {
-      if (this.ws && this.state === "connected") {
-        resolve();
-        return;
-      }
-      this.setState("connecting");
-      try {
-        this.ws = new WebSocket(this.config.url);
-      } catch (error) {
-        this.setState("disconnected");
-        reject(error);
-        return;
-      }
-      const connectionTimeout = setTimeout(() => {
-        if (this.state === "connecting") {
-          this.ws?.close();
-          this.setState("disconnected");
-          reject(new Error("Connection timeout"));
-        }
-      }, this.config.connectionTimeout);
-      this.ws.onopen = () => {
-        clearTimeout(connectionTimeout);
-      };
-      this.ws.onmessage = (event) => {
-        try {
-          const message = JSON.parse(event.data);
-          this.handleMessage(message);
-          if (message.type === "welcome") {
-            clearTimeout(connectionTimeout);
-            this.reconnectAttempts = 0;
-            this.setState("connected");
-            this.startPingInterval();
-            if (this.subscriptions.events?.length || this.subscriptions.elementIds?.length || this.subscriptions.componentIds?.length) {
-              this.subscribe(this.subscriptions);
-            }
-            resolve();
-          }
-        } catch (error) {
-          console.error("Failed to parse WebSocket message:", error);
-        }
-      };
-      this.ws.onerror = (_event) => {
-        clearTimeout(connectionTimeout);
-        const error = new Error("WebSocket error");
-        this.notifyError(error);
-        if (this.state === "connecting") {
-          reject(error);
-        }
-      };
-      this.ws.onclose = () => {
-        clearTimeout(connectionTimeout);
-        this.stopPingInterval();
-        this.clientId = null;
-        const wasConnected = this.state === "connected";
-        this.setState("disconnected");
-        for (const [_id, pending] of this.pendingRequests) {
-          clearTimeout(pending.timeout);
-          pending.reject(new Error("Connection closed"));
-        }
-        this.pendingRequests.clear();
-        if (wasConnected && this.config.autoReconnect && (this.config.maxReconnectAttempts === 0 || this.reconnectAttempts < this.config.maxReconnectAttempts)) {
-          this.scheduleReconnect();
-        }
-      };
-    });
+  getAllStateGroups() {
+    return Array.from(this.stateGroups.values());
   }
   /**
-   * Disconnect from the server
+   * Register a transition
    */
-  disconnect() {
-    if (this.reconnectTimer) {
-      clearTimeout(this.reconnectTimer);
-      this.reconnectTimer = null;
-    }
-    this.stopPingInterval();
-    if (this.ws) {
-      this.ws.close();
-      this.ws = null;
-    }
-    this.setState("disconnected");
+  registerTransition(transition) {
+    this.transitions.set(transition.id, transition);
+    return transition;
   }
   /**
-   * Subscribe to events
+   * Unregister a transition
    */
-  async subscribe(options) {
-    this.subscriptions = { ...this.subscriptions, ...options };
-    const response = await this.sendRequest({
-      id: generateId(),
-      type: "subscribe",
-      timestamp: Date.now(),
-      payload: options
-    });
-    return response.events;
+  unregisterTransition(id) {
+    return this.transitions.delete(id);
   }
   /**
-   * Unsubscribe from events
+   * Get a transition
    */
-  async unsubscribe(events) {
-    if (events) {
-      this.subscriptions.events = this.subscriptions.events?.filter((e) => !events.includes(e));
-    } else {
-      this.subscriptions = {};
-    }
-    const response = await this.sendRequest({
-      id: generateId(),
-      type: "unsubscribe",
-      timestamp: Date.now(),
-      payload: { events }
-    });
-    return response.events;
+  getTransition(id) {
+    return this.transitions.get(id);
   }
   /**
-   * Find elements
+   * Get all transitions
    */
-  async find(options) {
-    const response = await this.sendRequest({
-      id: generateId(),
-      type: "find",
-      timestamp: Date.now(),
-      payload: options
-    });
-    return response.elements;
+  getAllTransitions() {
+    return Array.from(this.transitions.values());
   }
   /**
-   * Discover elements
-   * @deprecated Use find() instead
+   * Get currently active states
    */
-  async discover(options) {
-    return this.find(options);
+  getActiveStates() {
+    return Array.from(this.activeStates);
   }
   /**
-   * Get element details
+   * Check if a state is active
    */
-  async getElement(elementId, includeState = true) {
-    const response = await this.sendRequest({
-      id: generateId(),
-      type: "getElement",
-      timestamp: Date.now(),
-      payload: { elementId, includeState }
-    });
-    return response.element;
+  isStateActive(id) {
+    return this.activeStates.has(id);
   }
   /**
-   * Get full snapshot
+   * Activate a state
    */
-  async getSnapshot() {
-    const response = await this.sendRequest({
-      id: generateId(),
-      type: "getSnapshot",
-      timestamp: Date.now()
-    });
-    return response;
+  activateState(id) {
+    const state = this.states.get(id);
+    if (!state) {
+      return false;
+    }
+    for (const activeId of this.activeStates) {
+      const activeState = this.states.get(activeId);
+      if (activeState?.blocking && activeState.id !== id) {
+        return false;
+      }
+      if (activeState?.blocks?.includes(id)) {
+        return false;
+      }
+    }
+    const wasActive = this.activeStates.has(id);
+    this.activeStates.add(id);
+    if (!wasActive) {
+      this.emit("element:stateChanged", {
+        stateId: id,
+        active: true,
+        activeStates: this.getActiveStates()
+      });
+    }
+    return true;
   }
   /**
-   * Execute action on an element
+   * Deactivate a state
    */
-  async executeAction(elementId, action) {
-    const response = await this.sendRequest({
-      id: generateId(),
-      type: "executeAction",
-      timestamp: Date.now(),
-      payload: { elementId, action }
-    });
-    return response;
+  deactivateState(id) {
+    const wasActive = this.activeStates.has(id);
+    this.activeStates.delete(id);
+    if (wasActive) {
+      this.emit("element:stateChanged", {
+        stateId: id,
+        active: false,
+        activeStates: this.getActiveStates()
+      });
+    }
+    return wasActive;
   }
   /**
-   * Execute component action
+   * Activate multiple states
    */
-  async executeComponentAction(componentId, action, params) {
-    const response = await this.sendRequest({
-      id: generateId(),
-      type: "executeComponentAction",
-      timestamp: Date.now(),
-      payload: { componentId, action, params }
-    });
-    return response;
+  activateStates(ids) {
+    const activated = [];
+    for (const id of ids) {
+      if (this.activateState(id)) {
+        activated.push(id);
+      }
+    }
+    return activated;
   }
   /**
-   * Execute workflow with optional progress streaming
+   * Deactivate multiple states
    */
-  async executeWorkflow(workflowId, params, onProgress) {
-    const id = generateId();
-    const progressHandler = onProgress ? (message) => {
-      if (message.type === "workflowProgress" && message.requestId === id) {
-        onProgress({
-          currentStep: message.payload.currentStep,
-          totalSteps: message.payload.totalSteps,
-          step: {
-            id: message.payload.step.id,
-            status: message.payload.step.status
-          }
-        });
+  deactivateStates(ids) {
+    const deactivated = [];
+    for (const id of ids) {
+      if (this.deactivateState(id)) {
+        deactivated.push(id);
       }
-    } : void 0;
-    const response = await this.sendRequest(
-      {
-        id,
-        type: "executeWorkflow",
-        timestamp: Date.now(),
-        payload: { workflowId, params, streamProgress: !!onProgress }
-      },
-      progressHandler
-    );
-    return response;
+    }
+    return deactivated;
   }
   /**
-   * Add connection state listener
+   * Activate a state group (all states in the group)
    */
-  onConnectionChange(listener) {
-    this.connectionListeners.add(listener);
-    return () => this.connectionListeners.delete(listener);
+  activateStateGroup(groupId) {
+    const group = this.stateGroups.get(groupId);
+    if (!group) return [];
+    return this.activateStates(group.states);
   }
   /**
-   * Add event listener
+   * Deactivate a state group (all states in the group)
    */
-  onEvent(eventType, listener) {
-    if (!this.eventListeners.has(eventType)) {
-      this.eventListeners.set(eventType, /* @__PURE__ */ new Set());
-    }
-    this.eventListeners.get(eventType).add(listener);
-    return () => this.eventListeners.get(eventType)?.delete(listener);
+  deactivateStateGroup(groupId) {
+    const group = this.stateGroups.get(groupId);
+    if (!group) return [];
+    return this.deactivateStates(group.states);
   }
   /**
-   * Add error listener
+   * Check if a transition can be executed from current state
    */
-  onError(listener) {
-    this.errorListeners.add(listener);
-    return () => this.errorListeners.delete(listener);
+  canExecuteTransition(transitionId) {
+    const transition = this.transitions.get(transitionId);
+    if (!transition) return false;
+    return transition.fromStates.some((stateId) => this.activeStates.has(stateId));
   }
-  // Private methods
-  setState(state) {
-    this.state = state;
-    for (const listener of this.connectionListeners) {
-      try {
-        listener(state);
-      } catch (error) {
-        console.error("Connection listener error:", error);
-      }
+  /**
+   * Execute a transition
+   */
+  async executeTransition(transitionId) {
+    const startTime = performance.now();
+    const transition = this.transitions.get(transitionId);
+    if (!transition) {
+      return {
+        success: false,
+        activatedStates: [],
+        deactivatedStates: [],
+        error: `Transition not found: ${transitionId}`,
+        durationMs: performance.now() - startTime
+      };
     }
-  }
-  handleMessage(message) {
-    switch (message.type) {
-      case "welcome":
-        this.clientId = message.payload.clientId;
-        break;
-      case "pong":
-        break;
-      case "subscribed":
-      case "unsubscribed":
-        break;
-      case "event":
-        this.notifyEvent(message.payload);
-        break;
-      case "response":
-        this.handleResponse(message);
-        break;
-      case "error":
-        if (message.requestId) {
-          this.handleResponse({
-            ...message,
-            type: "response",
-            requestId: message.requestId,
-            payload: {
-              success: false,
-              error: message.payload.message
-            }
-          });
-        } else {
-          this.notifyError(new Error(message.payload.message));
+    if (!this.canExecuteTransition(transitionId)) {
+      return {
+        success: false,
+        activatedStates: [],
+        deactivatedStates: [],
+        error: "Precondition not met: none of the fromStates are active",
+        failedPhase: "precondition",
+        durationMs: performance.now() - startTime
+      };
+    }
+    try {
+      const deactivated = this.deactivateStates(transition.exitStates);
+      if (transition.exitGroups) {
+        for (const groupId of transition.exitGroups) {
+          deactivated.push(...this.deactivateStateGroup(groupId));
         }
-        break;
+      }
+      const activated = this.activateStates(transition.activateStates);
+      if (transition.activateGroups) {
+        for (const groupId of transition.activateGroups) {
+          activated.push(...this.activateStateGroup(groupId));
+        }
+      }
+      return {
+        success: true,
+        activatedStates: activated,
+        deactivatedStates: deactivated,
+        durationMs: performance.now() - startTime
+      };
+    } catch (error) {
+      return {
+        success: false,
+        activatedStates: [],
+        deactivatedStates: [],
+        error: error instanceof Error ? error.message : String(error),
+        failedPhase: "execution",
+        durationMs: performance.now() - startTime
+      };
     }
   }
-  handleResponse(message) {
-    const pending = this.pendingRequests.get(message.requestId);
-    if (!pending) return;
-    clearTimeout(pending.timeout);
-    this.pendingRequests.delete(message.requestId);
-    if (message.type === "response") {
-      if (message.payload.success) {
-        pending.resolve(message.payload.data);
-      } else {
-        pending.reject(new Error(message.payload.error || "Request failed"));
-      }
+  /**
+   * Find a path from current state to target states
+   *
+   * Uses a simple BFS algorithm for pathfinding.
+   * For more advanced pathfinding (Dijkstra, A*), use the Python state manager service.
+   */
+  findPath(targetStates) {
+    if (targetStates.every((t) => this.activeStates.has(t))) {
+      return {
+        found: true,
+        transitions: [],
+        totalCost: 0,
+        targetStates,
+        estimatedSteps: 0
+      };
     }
-  }
-  notifyEvent(event) {
-    const typeListeners = this.eventListeners.get(event.type);
-    if (typeListeners) {
-      for (const listener of typeListeners) {
-        try {
-          listener(event);
-        } catch (error) {
-          console.error("Event listener error:", error);
-        }
+    const queue = [
+      { activeStates: new Set(this.activeStates), path: [], cost: 0 }
+    ];
+    const visited = /* @__PURE__ */ new Set();
+    while (queue.length > 0) {
+      const current = queue.shift();
+      const stateKey = Array.from(current.activeStates).sort().join(",");
+      if (visited.has(stateKey)) continue;
+      visited.add(stateKey);
+      if (targetStates.every((t) => current.activeStates.has(t))) {
+        return {
+          found: true,
+          transitions: current.path,
+          totalCost: current.cost,
+          targetStates,
+          estimatedSteps: current.path.length
+        };
       }
-    }
-    const wildcardListeners = this.eventListeners.get("*");
-    if (wildcardListeners) {
-      for (const listener of wildcardListeners) {
-        try {
-          listener(event);
-        } catch (error) {
-          console.error("Event listener error:", error);
-        }
+      for (const transition of this.transitions.values()) {
+        const canExecute = transition.fromStates.some((s) => current.activeStates.has(s));
+        if (!canExecute) continue;
+        const newActive = new Set(current.activeStates);
+        for (const s of transition.exitStates) newActive.delete(s);
+        for (const s of transition.activateStates) newActive.add(s);
+        const newCost = current.cost + (transition.pathCost ?? 1);
+        queue.push({
+          activeStates: newActive,
+          path: [...current.path, transition.id],
+          cost: newCost
+        });
       }
     }
+    return {
+      found: false,
+      transitions: [],
+      totalCost: 0,
+      targetStates,
+      estimatedSteps: 0
+    };
   }
-  notifyError(error) {
-    for (const listener of this.errorListeners) {
-      try {
-        listener(error);
-      } catch (e) {
-        console.error("Error listener error:", e);
-      }
+  /**
+   * Navigate to target states using pathfinding
+   */
+  async navigateTo(targetStates) {
+    const startTime = performance.now();
+    const path = this.findPath(targetStates);
+    if (!path.found) {
+      return {
+        success: false,
+        path,
+        executedTransitions: [],
+        finalActiveStates: this.getActiveStates(),
+        error: `No path found to target states: ${targetStates.join(", ")}`,
+        durationMs: performance.now() - startTime
+      };
     }
-  }
-  sendRequest(message, progressHandler) {
-    return new Promise((resolve, reject) => {
-      if (!this.ws || this.state !== "connected") {
-        reject(new Error("Not connected"));
-        return;
-      }
-      const timeout = setTimeout(() => {
-        this.pendingRequests.delete(message.id);
-        reject(new Error("Request timeout"));
-      }, 3e4);
-      this.pendingRequests.set(message.id, {
-        resolve,
-        reject,
-        timeout
-      });
-      if (progressHandler && this.ws) {
-        const originalHandler = this.ws.onmessage;
-        const wsRef = this.ws;
-        const wrappedHandler = (event) => {
-          try {
-            const msg = JSON.parse(event.data);
-            if (msg.type === "workflowProgress") {
-              progressHandler(msg);
-            }
-          } catch {
-          }
-          if (originalHandler) {
-            originalHandler.call(wsRef, event);
-          }
+    const executedTransitions = [];
+    for (const transitionId of path.transitions) {
+      const result = await this.executeTransition(transitionId);
+      if (!result.success) {
+        return {
+          success: false,
+          path,
+          executedTransitions,
+          finalActiveStates: this.getActiveStates(),
+          error: result.error,
+          durationMs: performance.now() - startTime
         };
-        this.ws.onmessage = wrappedHandler;
       }
-      this.ws.send(JSON.stringify(message));
-    });
+      executedTransitions.push(transitionId);
+    }
+    return {
+      success: true,
+      path,
+      executedTransitions,
+      finalActiveStates: this.getActiveStates(),
+      durationMs: performance.now() - startTime
+    };
   }
-  scheduleReconnect() {
-    if (this.reconnectTimer) return;
-    this.setState("reconnecting");
-    this.reconnectAttempts++;
-    const delay = Math.min(
-      this.config.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1),
-      3e4
-    );
-    this.reconnectTimer = setTimeout(() => {
-      this.reconnectTimer = null;
-      this.connect().catch(() => {
-      });
-    }, delay);
+  /**
+   * Create a state snapshot
+   */
+  createStateSnapshot() {
+    return {
+      timestamp: Date.now(),
+      activeStates: this.getActiveStates(),
+      states: this.getAllStates(),
+      groups: this.getAllStateGroups(),
+      transitions: this.getAllTransitions()
+    };
   }
-  startPingInterval() {
-    if (this.config.pingInterval <= 0) return;
-    this.pingTimer = setInterval(() => {
-      if (this.ws && this.state === "connected") {
-        this.ws.send(
-          JSON.stringify({
-            id: generateId(),
-            type: "ping",
-            timestamp: Date.now()
-          })
-        );
-      }
-    }, this.config.pingInterval);
+  /**
+   * Create a snapshot of the current state
+   */
+  createSnapshot() {
+    return {
+      timestamp: Date.now(),
+      elements: this.getAllElements().map((el) => ({
+        id: el.id,
+        type: el.type,
+        label: el.label,
+        identifier: el.getIdentifier(),
+        state: el.getState(),
+        actions: el.actions,
+        customActions: el.customActions ? Object.keys(el.customActions) : void 0
+      })),
+      components: this.getAllComponents().map((comp) => ({
+        id: comp.id,
+        name: comp.name,
+        description: comp.description,
+        actions: comp.actions.map((a) => a.id),
+        elementIds: comp.elementIds
+      })),
+      workflows: this.getAllWorkflows().map((wf) => ({
+        id: wf.id,
+        name: wf.name,
+        description: wf.description,
+        stepCount: wf.steps.length
+      }))
+    };
   }
-  stopPingInterval() {
-    if (this.pingTimer) {
-      clearInterval(this.pingTimer);
-      this.pingTimer = null;
-    }
+  /**
+   * Clear all registrations
+   */
+  clear() {
+    this.elements.clear();
+    this.components.clear();
+    this.workflows.clear();
+    this.eventListeners.clear();
+    this.states.clear();
+    this.stateGroups.clear();
+    this.transitions.clear();
+    this.activeStates.clear();
+  }
+  /**
+   * Get registry statistics
+   */
+  getStats() {
+    const elements = this.getAllElements();
+    const components = this.getAllComponents();
+    return {
+      elementCount: elements.length,
+      componentCount: components.length,
+      workflowCount: this.workflows.size,
+      mountedElementCount: elements.filter((e) => e.mounted).length,
+      mountedComponentCount: components.filter((c) => c.mounted).length,
+      stateCount: this.states.size,
+      stateGroupCount: this.stateGroups.size,
+      transitionCount: this.transitions.size,
+      activeStateCount: this.activeStates.size
+    };
   }
 };
-function createWSClient(config) {
-  return new UIBridgeWSClient(config);
+var globalRegistry = null;
+function setGlobalRegistry(registry) {
+  globalRegistry = registry;
+}
+function resetGlobalRegistry() {
+  globalRegistry?.clear();
+  globalRegistry = null;
 }
 
 // src/control/action-executor.ts
@@ -4093,11 +4069,31 @@ function useUIComponent(options) {
   const registeredRef = useRef(false);
   const actionsRef = useRef(options.actions || []);
   const elementIdsRef = useRef(options.elementIds || []);
+  const stateRef = useRef(options.state);
+  const computedRef = useRef(options.computed);
   const { id, name, description, autoRegister = true } = options;
   useEffect(() => {
     actionsRef.current = options.actions || [];
     elementIdsRef.current = options.elementIds || [];
-  }, [options.actions, options.elementIds]);
+    stateRef.current = options.state;
+    computedRef.current = options.computed;
+  }, [options.actions, options.elementIds, options.state, options.computed]);
+  const createGetComputed = useCallback(() => {
+    return () => {
+      const computed = computedRef.current;
+      if (!computed) return {};
+      const result = {};
+      for (const [key, def] of Object.entries(computed)) {
+        try {
+          const getter = typeof def === "function" ? def : def.getter;
+          result[key] = getter();
+        } catch {
+          result[key] = void 0;
+        }
+      }
+      return result;
+    };
+  }, []);
   const register = useCallback(() => {
     if (!bridge || registeredRef.current) return;
     bridge.registry.registerComponent(id, {
@@ -4109,10 +4105,12 @@ function useUIComponent(options) {
         description: a.description,
         handler: a.handler
       })),
-      elementIds: elementIdsRef.current
+      elementIds: elementIdsRef.current,
+      getState: stateRef.current,
+      getComputed: createGetComputed()
     });
     registeredRef.current = true;
-  }, [bridge, id, name, description]);
+  }, [bridge, id, name, description, createGetComputed]);
   const unregister = useCallback(() => {
     if (!bridge || !registeredRef.current) return;
     bridge.registry.unregisterComponent(id);
@@ -8703,6 +8701,6 @@ function describeDiff(diff) {
   return parts.join(", ");
 }
 
-export { AssertionExecutor, AutoRegisterProvider, DEFAULT_ALIAS_CONFIG, DEFAULT_ASSERTION_CONFIG, DEFAULT_DIFF_CONFIG, DEFAULT_EXECUTOR_CONFIG, DEFAULT_FUZZY_CONFIG, DEFAULT_SEARCH_CONFIG, DEFAULT_SNAPSHOT_CONFIG, DOMChangeObserver, DefaultActionExecutor, DefaultWorkflowEngine, ErrorCodes, ID_ATTRIBUTES, InMemoryRenderLogStorage, InfoPanel, Inspector, InspectorOverlay, MetricsCollector, NLActionExecutor, RenderLogManager, SearchEngine, SemanticDiffManager, SemanticSnapshotManager, UIBridgeProvider, UIBridgeRegistry, UIBridgeWSClient, areSynonyms, captureDOMSnapshot, captureInteractiveElements, computeDiff, createActionExecutor, createAssertionExecutor, createDiffManager, createElementIdentifier, createErrorContext, createMetricsCollector, createNLActionExecutor, createRenderLogManager, createSearchEngine, createSimpleError, createSnapshotManager, createWSClient, createWorkflowEngine, describeAction, describeDiff, elementMatchesIdentifier, extractModifiers, findAllElementsByIdentifier, findAllMatches, findBestMatch, findElementByIdentifier, formatDuration, formatErrorContext, formatPercentage, fuzzyContains, fuzzyMatch, generateAliases, generateCSSSelector, generateDescription, generateDiffSummary, generateElementDescription, generateNgrams, generatePageSummary, generatePurpose, generateSnapshotSummary, generateSuggestedActions, generateXPath, getBestIdentifier, getBestRecoverySuggestion, getGlobalRegistry, getSynonyms, hasSignificantChanges, inferPageType, isRecoverableError, jaroSimilarity, jaroWinklerSimilarity, levenshteinDistance, levenshteinSimilarity, ngramSimilarity, normalizeString, parseNLInstruction, parseNLInstructions, resetGlobalRegistry, setGlobalRegistry, splitCompoundInstruction, tokenSimilarity, tokenize, useActiveStates, useAutoRegister, useAvailableTransitions, useCanNavigateTo, useInspector, useNavigationPath, useStateSnapshot, useTransitions, useUIBridge, useUIBridgeContext, useUIBridgeOptional, useUIBridgeRequired, useUIComponent, useUIComponentAction, useUIElement, useUIElementRef, useUINavigation, useUIState, useUIStateGroup, useUITransition, validateParsedAction, wordSimilarity };
+export { AssertionExecutor, AutoRegisterProvider, DEFAULT_ALIAS_CONFIG, DEFAULT_ASSERTION_CONFIG, DEFAULT_DIFF_CONFIG, DEFAULT_EXECUTOR_CONFIG, DEFAULT_FUZZY_CONFIG, DEFAULT_SEARCH_CONFIG, DEFAULT_SNAPSHOT_CONFIG, DOMChangeObserver, DefaultActionExecutor, DefaultWorkflowEngine, ErrorCodes, InMemoryRenderLogStorage, InfoPanel, Inspector, InspectorOverlay, MetricsCollector, NLActionExecutor, RenderLogManager, SearchEngine, SemanticDiffManager, SemanticSnapshotManager, UIBridgeProvider, UIBridgeWSClient, areSynonyms, captureDOMSnapshot, captureInteractiveElements, computeDiff, createActionExecutor, createAssertionExecutor, createDiffManager, createErrorContext, createMetricsCollector, createNLActionExecutor, createRenderLogManager, createSearchEngine, createSimpleError, createSnapshotManager, createWSClient, createWorkflowEngine, describeAction, describeDiff, extractModifiers, findAllMatches, findBestMatch, formatDuration, formatErrorContext, formatPercentage, fuzzyContains, fuzzyMatch, generateAliases, generateDescription, generateDiffSummary, generateElementDescription, generateNgrams, generatePageSummary, generatePurpose, generateSnapshotSummary, generateSuggestedActions, getBestRecoverySuggestion, getSynonyms, hasSignificantChanges, inferPageType, isRecoverableError, jaroSimilarity, jaroWinklerSimilarity, levenshteinDistance, levenshteinSimilarity, ngramSimilarity, normalizeString, parseNLInstruction, parseNLInstructions, splitCompoundInstruction, tokenSimilarity, tokenize, useActiveStates, useAutoRegister, useAvailableTransitions, useCanNavigateTo, useInspector, useNavigationPath, useStateSnapshot, useTransitions, useUIBridge, useUIBridgeContext, useUIBridgeOptional, useUIBridgeRequired, useUIComponent, useUIComponentAction, useUIElement, useUIElementRef, useUINavigation, useUIState, useUIStateGroup, useUITransition, validateParsedAction, wordSimilarity };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map