@qontinui/ui-bridge 0.1.1

package/dist/index.mjs

@@ -0,0 +1,4665 @@
+import { createContext, useRef, useState, useMemo, useEffect, useCallback, useContext } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// 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}"]`;
+  }
+  const parts = [];
+  let current = element;
+  while (current && current.nodeType === Node.ELEMENT_NODE) {
+    let selector = current.nodeName.toLowerCase();
+    const uiId = current.getAttribute("data-ui-id");
+    if (uiId) {
+      selector += `[@data-ui-id="${uiId}"]`;
+      parts.unshift(selector);
+      break;
+    }
+    const testId = current.getAttribute("data-testid");
+    if (testId) {
+      selector += `[@data-testid="${testId}"]`;
+      parts.unshift(selector);
+      break;
+    }
+    const id = current.id;
+    if (id) {
+      selector += `[@id="${id}"]`;
+      parts.unshift(selector);
+      break;
+    }
+    const parentEl = current.parentElement;
+    if (parentEl) {
+      const currentEl = current;
+      const siblings = Array.from(parentEl.children).filter(
+        (child) => child.nodeName === currentEl.nodeName
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(currentEl) + 1;
+        selector += `[${index}]`;
+      }
+    }
+    parts.unshift(selector);
+    current = parentEl;
+  }
+  return "/" + parts.join("/");
+}
+function generateCSSSelector(element) {
+  const uiId = element.getAttribute("data-ui-id");
+  if (uiId) {
+    return `[data-ui-id="${uiId}"]`;
+  }
+  const testId = element.getAttribute("data-testid");
+  if (testId) {
+    return `[data-testid="${testId}"]`;
+  }
+  const awasId = element.getAttribute("data-awas-element");
+  if (awasId) {
+    return `[data-awas-element="${awasId}"]`;
+  }
+  if (element.id) {
+    return `#${CSS.escape(element.id)}`;
+  }
+  const path = [];
+  let current = element;
+  while (current && current.nodeType === Node.ELEMENT_NODE) {
+    let selector = current.nodeName.toLowerCase();
+    const parentUiId = current.getAttribute("data-ui-id");
+    if (parentUiId && current !== element) {
+      path.unshift(`[data-ui-id="${parentUiId}"]`);
+      break;
+    }
+    const parentTestId = current.getAttribute("data-testid");
+    if (parentTestId && current !== element) {
+      path.unshift(`[data-testid="${parentTestId}"]`);
+      break;
+    }
+    if (current.id) {
+      path.unshift(`#${CSS.escape(current.id)}`);
+      break;
+    }
+    const parentEl = current.parentElement;
+    if (parentEl) {
+      const currentEl = current;
+      const siblings = Array.from(parentEl.children);
+      const sameTagSiblings = siblings.filter(
+        (s) => s.nodeName === currentEl.nodeName
+      );
+      if (sameTagSiblings.length > 1) {
+        const index = siblings.indexOf(currentEl) + 1;
+        selector += `:nth-child(${index})`;
+      }
+    }
+    path.unshift(selector);
+    current = current.parentElement;
+  }
+  return path.join(" > ");
+}
+function getBestIdentifier(element) {
+  const uiId = element.getAttribute("data-ui-id");
+  if (uiId) return uiId;
+  const testId = element.getAttribute("data-testid");
+  if (testId) return testId;
+  const awasId = element.getAttribute("data-awas-element");
+  if (awasId) return awasId;
+  if (element.id) return element.id;
+  return generateCSSSelector(element);
+}
+function createElementIdentifier(element) {
+  return {
+    uiId: element.getAttribute("data-ui-id") || void 0,
+    testId: element.getAttribute("data-testid") || void 0,
+    awasId: element.getAttribute("data-awas-element") || void 0,
+    htmlId: element.id || void 0,
+    xpath: generateXPath(element),
+    selector: generateCSSSelector(element)
+  };
+}
+function findElementByIdentifier(identifier, root = document) {
+  if (typeof identifier === "string") {
+    const byUiId = root.querySelector(`[data-ui-id="${identifier}"]`);
+    if (byUiId) return byUiId;
+    const byTestId = root.querySelector(`[data-testid="${identifier}"]`);
+    if (byTestId) return byTestId;
+    const byAwasId = root.querySelector(`[data-awas-element="${identifier}"]`);
+    if (byAwasId) return byAwasId;
+    const byId = root.querySelector(`#${CSS.escape(identifier)}`);
+    if (byId) return byId;
+    try {
+      const bySelector = root.querySelector(identifier);
+      if (bySelector) return bySelector;
+    } catch {
+    }
+    try {
+      const result = document.evaluate(
+        identifier,
+        root,
+        null,
+        XPathResult.FIRST_ORDERED_NODE_TYPE,
+        null
+      );
+      if (result.singleNodeValue instanceof HTMLElement) {
+        return result.singleNodeValue;
+      }
+    } catch {
+    }
+    return null;
+  }
+  if (identifier.uiId) {
+    const el = root.querySelector(`[data-ui-id="${identifier.uiId}"]`);
+    if (el) return el;
+  }
+  if (identifier.testId) {
+    const el = root.querySelector(`[data-testid="${identifier.testId}"]`);
+    if (el) return el;
+  }
+  if (identifier.awasId) {
+    const el = root.querySelector(`[data-awas-element="${identifier.awasId}"]`);
+    if (el) return el;
+  }
+  if (identifier.htmlId) {
+    const el = root.querySelector(`#${CSS.escape(identifier.htmlId)}`);
+    if (el) return el;
+  }
+  if (identifier.selector) {
+    try {
+      const el = root.querySelector(identifier.selector);
+      if (el) return el;
+    } catch {
+    }
+  }
+  if (identifier.xpath) {
+    try {
+      const result = document.evaluate(
+        identifier.xpath,
+        root,
+        null,
+        XPathResult.FIRST_ORDERED_NODE_TYPE,
+        null
+      );
+      if (result.singleNodeValue instanceof HTMLElement) {
+        return result.singleNodeValue;
+      }
+    } catch {
+    }
+  }
+  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/core/registry.ts
+function getElementState(element) {
+  const rect = element.getBoundingClientRect();
+  const computedStyle = window.getComputedStyle(element);
+  const state = {
+    visible: isElementVisible(element, rect, computedStyle),
+    enabled: !isElementDisabled(element),
+    focused: document.activeElement === element,
+    rect: {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left
+    },
+    textContent: element.textContent?.trim() || void 0,
+    computedStyles: {
+      display: computedStyle.display,
+      visibility: computedStyle.visibility,
+      opacity: computedStyle.opacity,
+      pointerEvents: computedStyle.pointerEvents
+    }
+  };
+  if (element instanceof HTMLInputElement) {
+    state.value = element.value;
+    if (element.type === "checkbox" || element.type === "radio") {
+      state.checked = element.checked;
+    }
+  } else if (element instanceof HTMLTextAreaElement) {
+    state.value = element.value;
+  } else if (element instanceof HTMLSelectElement) {
+    state.value = element.value;
+    state.selectedOptions = Array.from(element.selectedOptions).map((opt) => opt.value);
+  }
+  return state;
+}
+function isElementVisible(element, rect, style) {
+  if (rect.width === 0 || rect.height === 0) return false;
+  if (style.display === "none") return false;
+  if (style.visibility === "hidden") return false;
+  if (parseFloat(style.opacity) === 0) return false;
+  const inViewport = rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0;
+  return inViewport;
+}
+function isElementDisabled(element) {
+  if ("disabled" in element && element.disabled) {
+    return true;
+  }
+  if (element.getAttribute("aria-disabled") === "true") {
+    return true;
+  }
+  return false;
+}
+function inferActions(type) {
+  const baseActions = ["focus", "blur", "hover"];
+  switch (type) {
+    case "button":
+      return [...baseActions, "click", "doubleClick", "rightClick"];
+    case "input":
+      return [...baseActions, "click", "type", "clear"];
+    case "textarea":
+      return [...baseActions, "click", "type", "clear"];
+    case "select":
+      return [...baseActions, "click", "select"];
+    case "checkbox":
+      return [...baseActions, "click", "check", "uncheck", "toggle"];
+    case "radio":
+      return [...baseActions, "click", "check"];
+    case "link":
+      return [...baseActions, "click"];
+    case "form":
+      return ["focus", "blur"];
+    case "menu":
+    case "menuitem":
+      return [...baseActions, "click"];
+    case "tab":
+      return [...baseActions, "click"];
+    case "dialog":
+      return ["focus", "blur"];
+    case "custom":
+    default:
+      return [...baseActions, "click"];
+  }
+}
+function inferElementType(element) {
+  const tagName = element.tagName.toLowerCase();
+  const role = element.getAttribute("role");
+  if (role) {
+    switch (role) {
+      case "button":
+        return "button";
+      case "textbox":
+        return "input";
+      case "checkbox":
+        return "checkbox";
+      case "radio":
+        return "radio";
+      case "link":
+        return "link";
+      case "listbox":
+      case "combobox":
+        return "select";
+      case "menu":
+        return "menu";
+      case "menuitem":
+        return "menuitem";
+      case "tab":
+        return "tab";
+      case "dialog":
+        return "dialog";
+    }
+  }
+  switch (tagName) {
+    case "button":
+      return "button";
+    case "input": {
+      const inputType = element.type;
+      if (inputType === "checkbox") return "checkbox";
+      if (inputType === "radio") return "radio";
+      if (inputType === "submit" || inputType === "button") return "button";
+      return "input";
+    }
+    case "textarea":
+      return "textarea";
+    case "select":
+      return "select";
+    case "a":
+      return "link";
+    case "form":
+      return "form";
+    default:
+      return "custom";
+  }
+}
+var UIBridgeRegistry = class {
+  constructor(options = {}) {
+    this.elements = /* @__PURE__ */ new Map();
+    this.components = /* @__PURE__ */ new Map();
+    this.workflows = /* @__PURE__ */ new Map();
+    this.eventListeners = /* @__PURE__ */ new Map();
+    // State management
+    this.states = /* @__PURE__ */ new Map();
+    this.stateGroups = /* @__PURE__ */ new Map();
+    this.transitions = /* @__PURE__ */ new Map();
+    this.activeStates = /* @__PURE__ */ new Set();
+    this.options = options;
+  }
+  /**
+   * Emit an event
+   */
+  emit(type, data) {
+    const event = {
+      type,
+      timestamp: Date.now(),
+      data
+    };
+    this.options.onEvent?.(event);
+    const listeners = this.eventListeners.get(type);
+    if (listeners) {
+      for (const listener of listeners) {
+        try {
+          listener(event);
+        } catch (error) {
+          console.error(`Error in event listener for ${type}:`, error);
+        }
+      }
+    }
+    if (this.options.verbose) {
+      console.log("[UIBridge]", type, data);
+    }
+  }
+  /**
+   * Register an event listener
+   */
+  on(type, listener) {
+    if (!this.eventListeners.has(type)) {
+      this.eventListeners.set(type, /* @__PURE__ */ new Set());
+    }
+    this.eventListeners.get(type).add(listener);
+    return () => {
+      this.eventListeners.get(type)?.delete(listener);
+    };
+  }
+  /**
+   * Remove an event listener
+   */
+  off(type, listener) {
+    this.eventListeners.get(type)?.delete(listener);
+  }
+  /**
+   * Register an element
+   */
+  registerElement(id, element, options = {}) {
+    const type = options.type ?? inferElementType(element);
+    const actions = options.actions ?? inferActions(type);
+    element.setAttribute("data-ui-id", id);
+    const registered = {
+      id,
+      element,
+      type,
+      label: options.label,
+      actions,
+      customActions: options.customActions,
+      getState: () => getElementState(element),
+      getIdentifier: () => createElementIdentifier(element),
+      registeredAt: Date.now(),
+      mounted: true
+    };
+    this.elements.set(id, registered);
+    this.emit("element:registered", { id, type, label: options.label });
+    return registered;
+  }
+  /**
+   * Unregister an element
+   */
+  unregisterElement(id) {
+    const registered = this.elements.get(id);
+    if (registered) {
+      registered.mounted = false;
+      registered.element.removeAttribute("data-ui-id");
+      this.elements.delete(id);
+      this.emit("element:unregistered", { id });
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Get a registered element
+   */
+  getElement(id) {
+    return this.elements.get(id);
+  }
+  /**
+   * Get all registered elements
+   */
+  getAllElements() {
+    return Array.from(this.elements.values());
+  }
+  /**
+   * Find element by DOM element reference
+   */
+  findByDOMElement(element) {
+    for (const registered of this.elements.values()) {
+      if (registered.element === element) {
+        return registered;
+      }
+    }
+    return void 0;
+  }
+  /**
+   * 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;
+  }
+  /**
+   * Deactivate a state
+   */
+  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;
+  }
+  /**
+   * Activate multiple states
+   */
+  activateStates(ids) {
+    const activated = [];
+    for (const id of ids) {
+      if (this.activateState(id)) {
+        activated.push(id);
+      }
+    }
+    return activated;
+  }
+  /**
+   * Deactivate multiple states
+   */
+  deactivateStates(ids) {
+    const deactivated = [];
+    for (const id of ids) {
+      if (this.deactivateState(id)) {
+        deactivated.push(id);
+      }
+    }
+    return deactivated;
+  }
+  /**
+   * Activate a state group (all states in the group)
+   */
+  activateStateGroup(groupId) {
+    const group = this.stateGroups.get(groupId);
+    if (!group) return [];
+    return this.activateStates(group.states);
+  }
+  /**
+   * Deactivate a state group (all states in the group)
+   */
+  deactivateStateGroup(groupId) {
+    const group = this.stateGroups.get(groupId);
+    if (!group) return [];
+    return this.deactivateStates(group.states);
+  }
+  /**
+   * Check if a transition can be executed from current state
+   */
+  canExecuteTransition(transitionId) {
+    const transition = this.transitions.get(transitionId);
+    if (!transition) return false;
+    return transition.fromStates.some((stateId) => this.activeStates.has(stateId));
+  }
+  /**
+   * 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
+      };
+    }
+    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
+      };
+    }
+  }
+  /**
+   * 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
+      };
+    }
+    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
+    };
+  }
+  /**
+   * 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
+      };
+    }
+    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
+    };
+  }
+  /**
+   * Create a state snapshot
+   */
+  createStateSnapshot() {
+    return {
+      timestamp: Date.now(),
+      activeStates: this.getActiveStates(),
+      states: this.getAllStates(),
+      groups: this.getAllStateGroups(),
+      transitions: this.getAllTransitions()
+    };
+  }
+  /**
+   * 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
+      }))
+    };
+  }
+  /**
+   * 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
+    };
+  }
+};
+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
+    };
+  }
+  /**
+   * 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/control/action-executor.ts
+var DEFAULT_WAIT_OPTIONS = {
+  visible: true,
+  enabled: true,
+  focused: false,
+  state: {},
+  timeout: 1e4,
+  interval: 100
+};
+function getElementState2(element) {
+  const rect = element.getBoundingClientRect();
+  const style = window.getComputedStyle(element);
+  const state = {
+    visible: isVisible(element, rect, style),
+    enabled: !isDisabled(element),
+    focused: document.activeElement === element,
+    rect: {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left
+    },
+    computedStyles: {
+      display: style.display,
+      visibility: style.visibility,
+      opacity: style.opacity,
+      pointerEvents: style.pointerEvents
+    }
+  };
+  if (element instanceof HTMLInputElement) {
+    state.value = element.value;
+    if (element.type === "checkbox" || element.type === "radio") {
+      state.checked = element.checked;
+    }
+  } else if (element instanceof HTMLTextAreaElement) {
+    state.value = element.value;
+  } else if (element instanceof HTMLSelectElement) {
+    state.value = element.value;
+    state.selectedOptions = Array.from(element.selectedOptions).map((opt) => opt.value);
+  }
+  return state;
+}
+function isVisible(element, rect, style) {
+  if (rect.width === 0 || rect.height === 0) return false;
+  if (style.display === "none") return false;
+  if (style.visibility === "hidden") return false;
+  if (parseFloat(style.opacity) === 0) return false;
+  return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0;
+}
+function isDisabled(element) {
+  if ("disabled" in element && element.disabled) return true;
+  if (element.getAttribute("aria-disabled") === "true") return true;
+  return false;
+}
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function createMouseEvent(type, element, options) {
+  const rect = element.getBoundingClientRect();
+  const x = options?.position?.x ?? rect.width / 2;
+  const y = options?.position?.y ?? rect.height / 2;
+  return new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+    button: options?.button === "right" ? 2 : options?.button === "middle" ? 1 : 0,
+    clientX: rect.left + x,
+    clientY: rect.top + y
+  });
+}
+var DefaultActionExecutor = class {
+  constructor(registry) {
+    this.registry = registry;
+  }
+  /**
+   * Execute an action on an element
+   */
+  async executeAction(elementId, request) {
+    const startTime = performance.now();
+    let waitDurationMs = 0;
+    try {
+      const registered = this.registry.getElement(elementId);
+      let element = registered?.element ?? null;
+      if (!element) {
+        element = findElementByIdentifier(elementId);
+      }
+      if (!element) {
+        return {
+          success: false,
+          error: `Element not found: ${elementId}`,
+          durationMs: performance.now() - startTime,
+          timestamp: Date.now(),
+          requestId: request.requestId
+        };
+      }
+      if (request.waitOptions) {
+        const waitResult = await this.waitForElement(element, request.waitOptions);
+        waitDurationMs = waitResult.waitedMs;
+        if (!waitResult.met) {
+          return {
+            success: false,
+            error: waitResult.error || "Wait condition not met",
+            durationMs: performance.now() - startTime,
+            timestamp: Date.now(),
+            requestId: request.requestId,
+            waitDurationMs
+          };
+        }
+      }
+      const result = await this.performAction(element, request.action, request.params);
+      return {
+        success: true,
+        elementState: getElementState2(element),
+        result,
+        durationMs: performance.now() - startTime,
+        timestamp: Date.now(),
+        requestId: request.requestId,
+        waitDurationMs
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : void 0,
+        durationMs: performance.now() - startTime,
+        timestamp: Date.now(),
+        requestId: request.requestId,
+        waitDurationMs
+      };
+    }
+  }
+  /**
+   * Execute an action on a component
+   */
+  async executeComponentAction(componentId, request) {
+    const startTime = performance.now();
+    try {
+      const component = this.registry.getComponent(componentId);
+      if (!component) {
+        return {
+          success: false,
+          error: `Component not found: ${componentId}`,
+          durationMs: performance.now() - startTime,
+          timestamp: Date.now(),
+          requestId: request.requestId
+        };
+      }
+      const action = component.actions.find((a) => a.id === request.action);
+      if (!action) {
+        return {
+          success: false,
+          error: `Action not found: ${request.action}`,
+          durationMs: performance.now() - startTime,
+          timestamp: Date.now(),
+          requestId: request.requestId
+        };
+      }
+      const result = await action.handler(request.params);
+      return {
+        success: true,
+        result,
+        durationMs: performance.now() - startTime,
+        timestamp: Date.now(),
+        requestId: request.requestId
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : void 0,
+        durationMs: performance.now() - startTime,
+        timestamp: Date.now(),
+        requestId: request.requestId
+      };
+    }
+  }
+  /**
+   * Wait for a condition on an element
+   */
+  async waitFor(elementId, options) {
+    const registered = this.registry.getElement(elementId);
+    let element = registered?.element ?? null;
+    if (!element) {
+      element = findElementByIdentifier(elementId);
+    }
+    if (!element) {
+      return {
+        met: false,
+        waitedMs: 0,
+        error: `Element not found: ${elementId}`
+      };
+    }
+    return this.waitForElement(element, options);
+  }
+  /**
+   * Find controllable elements
+   */
+  async find(options) {
+    const startTime = performance.now();
+    const elements = [];
+    let root = document.body;
+    if (options?.root) {
+      const rootEl = document.querySelector(options.root);
+      if (rootEl) root = rootEl;
+    }
+    const interactiveSelectors = [
+      "a[href]",
+      "button",
+      "input",
+      "select",
+      "textarea",
+      "[onclick]",
+      '[role="button"]',
+      '[role="link"]',
+      '[role="checkbox"]',
+      '[role="radio"]',
+      '[role="menuitem"]',
+      '[role="tab"]',
+      '[role="switch"]',
+      '[tabindex]:not([tabindex="-1"])',
+      '[contenteditable="true"]',
+      "[data-ui-id]",
+      "[data-testid]"
+    ];
+    const selector = options?.selector || interactiveSelectors.join(", ");
+    const foundElements = root.querySelectorAll(selector);
+    for (const el of foundElements) {
+      if (options?.limit && elements.length >= options.limit) break;
+      const state = getElementState2(el);
+      if (!options?.includeHidden && !state.visible) continue;
+      if (options?.types) {
+        const type = this.inferElementType(el);
+        if (!options.types.includes(type)) continue;
+      }
+      const registered = this.registry.findByDOMElement(el);
+      elements.push({
+        id: registered?.id || this.getElementId(el),
+        type: registered?.type || this.inferElementType(el),
+        label: registered?.label || this.getElementLabel(el),
+        tagName: el.tagName.toLowerCase(),
+        role: el.getAttribute("role") || void 0,
+        accessibleName: this.getAccessibleName(el),
+        actions: registered?.actions || this.inferActions(el),
+        state,
+        registered: !!registered
+      });
+    }
+    return {
+      elements,
+      total: elements.length,
+      durationMs: performance.now() - startTime,
+      timestamp: Date.now()
+    };
+  }
+  /**
+   * Discover controllable elements
+   * @deprecated Use find() instead
+   */
+  async discover(options) {
+    return this.find(options);
+  }
+  /**
+   * Get control snapshot
+   */
+  async getSnapshot() {
+    const elements = this.registry.getAllElements();
+    const components = this.registry.getAllComponents();
+    const workflows = this.registry.getAllWorkflows();
+    return {
+      timestamp: Date.now(),
+      elements: elements.map((el) => ({
+        id: el.id,
+        type: el.type,
+        label: el.label,
+        actions: [...el.actions, ...el.customActions ? Object.keys(el.customActions) : []],
+        state: el.getState()
+      })),
+      components: components.map((comp) => ({
+        id: comp.id,
+        name: comp.name,
+        actions: comp.actions.map((a) => a.id)
+      })),
+      workflows: workflows.map((wf) => ({
+        id: wf.id,
+        name: wf.name,
+        stepCount: wf.steps.length
+      })),
+      activeRuns: []
+      // Workflow engine manages this
+    };
+  }
+  /**
+   * Wait for element conditions
+   */
+  async waitForElement(element, options) {
+    const opts = { ...DEFAULT_WAIT_OPTIONS, ...options };
+    const startTime = performance.now();
+    const deadline = startTime + opts.timeout;
+    while (Date.now() < deadline) {
+      const state = getElementState2(element);
+      let allMet = true;
+      if (opts.visible && !state.visible) allMet = false;
+      if (opts.enabled && !state.enabled) allMet = false;
+      if (opts.focused && !state.focused) allMet = false;
+      if (opts.state) {
+        for (const [key, value] of Object.entries(opts.state)) {
+          if (state[key] !== value) {
+            allMet = false;
+            break;
+          }
+        }
+      }
+      if (allMet) {
+        return {
+          met: true,
+          waitedMs: performance.now() - startTime,
+          state
+        };
+      }
+      await sleep(opts.interval);
+    }
+    return {
+      met: false,
+      waitedMs: performance.now() - startTime,
+      state: getElementState2(element),
+      error: `Timeout waiting for conditions after ${opts.timeout}ms`
+    };
+  }
+  /**
+   * Perform an action on an element
+   */
+  async performAction(element, action, params) {
+    switch (action) {
+      case "click":
+        return this.performClick(element, params);
+      case "doubleClick":
+        return this.performDoubleClick(element, params);
+      case "rightClick":
+        return this.performRightClick(element, params);
+      case "type":
+        return this.performType(element, params);
+      case "clear":
+        return this.performClear(element);
+      case "select":
+        return this.performSelect(element, params);
+      case "focus":
+        return this.performFocus(element);
+      case "blur":
+        return this.performBlur(element);
+      case "hover":
+        return this.performHover(element);
+      case "scroll":
+        return this.performScroll(element, params);
+      case "check":
+        return this.performCheck(element, true);
+      case "uncheck":
+        return this.performCheck(element, false);
+      case "toggle":
+        return this.performToggle(element);
+      default: {
+        const registered = this.registry.findByDOMElement(element);
+        if (registered?.customActions?.[action]) {
+          return registered.customActions[action].handler(params);
+        }
+        throw new Error(`Unknown action: ${action}`);
+      }
+    }
+  }
+  performClick(element, options) {
+    element.dispatchEvent(createMouseEvent("mousedown", element, options));
+    element.dispatchEvent(createMouseEvent("mouseup", element, options));
+    element.dispatchEvent(createMouseEvent("click", element, options));
+  }
+  performDoubleClick(element, options) {
+    this.performClick(element, options);
+    this.performClick(element, options);
+    element.dispatchEvent(createMouseEvent("dblclick", element, options));
+  }
+  performRightClick(element, options) {
+    const opts = { ...options, button: "right" };
+    element.dispatchEvent(createMouseEvent("mousedown", element, opts));
+    element.dispatchEvent(createMouseEvent("mouseup", element, opts));
+    element.dispatchEvent(createMouseEvent("contextmenu", element, opts));
+  }
+  async performType(element, options) {
+    if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
+      throw new Error("Type action requires an input or textarea element");
+    }
+    element.focus();
+    if (options?.clear) {
+      element.value = "";
+      element.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    const text = options?.text || "";
+    const delay = options?.delay || 0;
+    for (const char of text) {
+      element.value += char;
+      if (options?.triggerEvents !== false) {
+        element.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+      if (delay > 0) {
+        await sleep(delay);
+      }
+    }
+    if (options?.triggerEvents !== false) {
+      element.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+  performClear(element) {
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+      element.value = "";
+      element.dispatchEvent(new Event("input", { bubbles: true }));
+      element.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+  performSelect(element, options) {
+    if (!(element instanceof HTMLSelectElement)) {
+      throw new Error("Select action requires a select element");
+    }
+    const values = Array.isArray(options?.value) ? options.value : [options?.value];
+    if (!options?.additive) {
+      for (const option of element.options) {
+        option.selected = false;
+      }
+    }
+    for (const option of element.options) {
+      const matchValue = options?.byLabel ? option.text : option.value;
+      if (values.includes(matchValue)) {
+        option.selected = true;
+      }
+    }
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  performFocus(element) {
+    element.focus();
+    element.dispatchEvent(new FocusEvent("focus", { bubbles: true }));
+  }
+  performBlur(element) {
+    element.blur();
+    element.dispatchEvent(new FocusEvent("blur", { bubbles: true }));
+  }
+  performHover(element) {
+    element.dispatchEvent(createMouseEvent("mouseenter", element));
+    element.dispatchEvent(createMouseEvent("mouseover", element));
+  }
+  performScroll(element, options) {
+    if (options?.toElement) {
+      const target = document.querySelector(options.toElement);
+      if (target) {
+        target.scrollIntoView({ behavior: options.smooth ? "smooth" : "auto" });
+        return;
+      }
+    }
+    if (options?.position) {
+      element.scrollTo({
+        left: options.position.x,
+        top: options.position.y,
+        behavior: options.smooth ? "smooth" : "auto"
+      });
+      return;
+    }
+    const amount = options?.amount || 100;
+    const direction = options?.direction || "down";
+    switch (direction) {
+      case "up":
+        element.scrollBy({ top: -amount, behavior: options?.smooth ? "smooth" : "auto" });
+        break;
+      case "down":
+        element.scrollBy({ top: amount, behavior: options?.smooth ? "smooth" : "auto" });
+        break;
+      case "left":
+        element.scrollBy({ left: -amount, behavior: options?.smooth ? "smooth" : "auto" });
+        break;
+      case "right":
+        element.scrollBy({ left: amount, behavior: options?.smooth ? "smooth" : "auto" });
+        break;
+    }
+  }
+  performCheck(element, checked) {
+    if (element instanceof HTMLInputElement && (element.type === "checkbox" || element.type === "radio")) {
+      if (element.checked !== checked) {
+        element.checked = checked;
+        element.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    }
+  }
+  performToggle(element) {
+    if (element instanceof HTMLInputElement && element.type === "checkbox") {
+      element.checked = !element.checked;
+      element.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+  getElementId(element) {
+    return element.getAttribute("data-ui-id") || element.getAttribute("data-testid") || element.id || `${element.tagName.toLowerCase()}-${Math.random().toString(36).substr(2, 8)}`;
+  }
+  getElementLabel(element) {
+    return element.getAttribute("aria-label") || element.getAttribute("title") || element.textContent?.trim().substring(0, 50) || void 0;
+  }
+  getAccessibleName(element) {
+    const ariaLabel = element.getAttribute("aria-label");
+    if (ariaLabel) return ariaLabel;
+    const labelledBy = element.getAttribute("aria-labelledby");
+    if (labelledBy) {
+      const labels = labelledBy.split(" ").map((id) => document.getElementById(id)?.textContent?.trim()).filter(Boolean);
+      if (labels.length > 0) return labels.join(" ");
+    }
+    if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+      if (element.id) {
+        const label = document.querySelector(`label[for="${element.id}"]`);
+        if (label) return label.textContent?.trim();
+      }
+    }
+    return element.getAttribute("title") || element.textContent?.trim().substring(0, 50) || void 0;
+  }
+  inferElementType(element) {
+    const tagName = element.tagName.toLowerCase();
+    const role = element.getAttribute("role");
+    if (role) {
+      switch (role) {
+        case "button":
+          return "button";
+        case "textbox":
+          return "input";
+        case "checkbox":
+          return "checkbox";
+        case "radio":
+          return "radio";
+        case "link":
+          return "link";
+        case "listbox":
+        case "combobox":
+          return "select";
+        case "menu":
+          return "menu";
+        case "menuitem":
+          return "menuitem";
+        case "tab":
+          return "tab";
+        case "dialog":
+          return "dialog";
+      }
+    }
+    switch (tagName) {
+      case "button":
+        return "button";
+      case "input": {
+        const type = element.type;
+        if (type === "checkbox") return "checkbox";
+        if (type === "radio") return "radio";
+        if (type === "submit" || type === "button") return "button";
+        return "input";
+      }
+      case "textarea":
+        return "textarea";
+      case "select":
+        return "select";
+      case "a":
+        return "link";
+      case "form":
+        return "form";
+      default:
+        return "custom";
+    }
+  }
+  inferActions(element) {
+    const type = this.inferElementType(element);
+    const baseActions = ["focus", "blur", "hover"];
+    switch (type) {
+      case "button":
+        return [...baseActions, "click", "doubleClick", "rightClick"];
+      case "input":
+        return [...baseActions, "click", "type", "clear"];
+      case "textarea":
+        return [...baseActions, "click", "type", "clear"];
+      case "select":
+        return [...baseActions, "click", "select"];
+      case "checkbox":
+        return [...baseActions, "click", "check", "uncheck", "toggle"];
+      case "radio":
+        return [...baseActions, "click", "check"];
+      case "link":
+        return [...baseActions, "click"];
+      default:
+        return [...baseActions, "click"];
+    }
+  }
+};
+function createActionExecutor(registry) {
+  return new DefaultActionExecutor(registry);
+}
+
+// src/control/workflow-engine.ts
+function generateRunId() {
+  return `run-${Date.now()}-${Math.random().toString(36).substr(2, 8)}`;
+}
+var DefaultWorkflowEngine = class {
+  constructor(registry, executor) {
+    this.registry = registry;
+    this.executor = executor;
+    this.activeRuns = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Run a workflow
+   */
+  async run(workflowId, request) {
+    const workflow = this.registry.getWorkflow(workflowId);
+    if (!workflow) {
+      return {
+        workflowId,
+        runId: generateRunId(),
+        status: "failed",
+        steps: [],
+        totalSteps: 0,
+        success: false,
+        error: `Workflow not found: ${workflowId}`,
+        startedAt: Date.now(),
+        completedAt: Date.now(),
+        durationMs: 0
+      };
+    }
+    const runId = generateRunId();
+    const state = {
+      workflowId,
+      runId,
+      workflow,
+      request,
+      status: "running",
+      steps: [],
+      currentStep: 0,
+      startedAt: Date.now()
+    };
+    this.activeRuns.set(runId, state);
+    try {
+      await this.executeWorkflow(state);
+    } catch (error) {
+      state.status = "failed";
+      state.error = error instanceof Error ? error.message : String(error);
+    }
+    state.completedAt = Date.now();
+    state.durationMs = state.completedAt - state.startedAt;
+    state.success = state.status === "completed" && state.steps.every((s) => s.success);
+    setTimeout(() => {
+      this.activeRuns.delete(runId);
+    }, 6e4);
+    return this.buildResponse(state);
+  }
+  /**
+   * Get workflow run status
+   */
+  async getRunStatus(runId) {
+    const state = this.activeRuns.get(runId);
+    if (!state) return null;
+    return this.buildResponse(state);
+  }
+  /**
+   * Cancel a running workflow
+   */
+  async cancel(runId) {
+    const state = this.activeRuns.get(runId);
+    if (!state || state.status !== "running") return false;
+    state.status = "cancelled";
+    state.completedAt = Date.now();
+    state.durationMs = state.completedAt - state.startedAt;
+    state.error = "Workflow cancelled by user";
+    return true;
+  }
+  /**
+   * List active runs
+   */
+  async listActiveRuns() {
+    return Array.from(this.activeRuns.values()).filter((state) => state.status === "running").map((state) => this.buildResponse(state));
+  }
+  /**
+   * Execute a workflow
+   */
+  async executeWorkflow(state) {
+    const { workflow, request } = state;
+    const params = { ...workflow.defaultParams, ...request?.params };
+    let startIndex = 0;
+    if (request?.startStep) {
+      const idx = workflow.steps.findIndex((s) => s.id === request.startStep);
+      if (idx >= 0) startIndex = idx;
+    }
+    let stopIndex = workflow.steps.length;
+    if (request?.stopStep) {
+      const idx = workflow.steps.findIndex((s) => s.id === request.stopStep);
+      if (idx >= 0) stopIndex = idx + 1;
+    }
+    for (let i = startIndex; i < stopIndex; i++) {
+      if (state.status === "cancelled") break;
+      state.currentStep = i;
+      const step = workflow.steps[i];
+      const stepResult = await this.executeStep(step, params, request?.stepTimeout);
+      state.steps.push(stepResult);
+      if (!stepResult.success) {
+        state.status = "failed";
+        state.error = stepResult.error;
+        return;
+      }
+    }
+    state.status = "completed";
+  }
+  /**
+   * Execute a single step
+   */
+  async executeStep(step, params, timeout) {
+    const startTime = performance.now();
+    try {
+      const timeoutPromise = timeout ? new Promise(
+        (_, reject) => setTimeout(() => reject(new Error("Step timeout")), timeout)
+      ) : null;
+      const executePromise = this.executeStepInternal(step, params);
+      const result = timeoutPromise ? await Promise.race([executePromise, timeoutPromise]) : await executePromise;
+      return {
+        stepId: step.id,
+        stepType: step.type,
+        success: true,
+        result,
+        durationMs: performance.now() - startTime,
+        timestamp: Date.now()
+      };
+    } catch (error) {
+      return {
+        stepId: step.id,
+        stepType: step.type,
+        success: false,
+        error: error instanceof Error ? error.message : String(error),
+        durationMs: performance.now() - startTime,
+        timestamp: Date.now()
+      };
+    }
+  }
+  /**
+   * Execute step internal logic
+   */
+  async executeStepInternal(step, params) {
+    const resolvedParams = this.interpolateParams(step.params || {}, params);
+    switch (step.type) {
+      case "element-action":
+        if (!step.target || !step.action) {
+          throw new Error("Element action requires target and action");
+        }
+        return this.executor.executeAction(step.target, {
+          action: step.action,
+          params: resolvedParams,
+          waitOptions: step.waitOptions
+        });
+      case "component-action":
+        if (!step.target || !step.action) {
+          throw new Error("Component action requires target and action");
+        }
+        return this.executor.executeComponentAction(step.target, {
+          action: step.action,
+          params: resolvedParams
+        });
+      case "wait": {
+        if (!step.target) {
+          throw new Error("Wait step requires target");
+        }
+        const waitResult = await this.executor.waitFor(step.target, step.waitOptions || {});
+        if (!waitResult.met) {
+          throw new Error(waitResult.error || "Wait condition not met");
+        }
+        return waitResult;
+      }
+      case "assert":
+        if (!step.target || !step.expectedState) {
+          throw new Error("Assert step requires target and expectedState");
+        }
+        return this.performAssertion(step.target, step.expectedState);
+      case "custom":
+        if (!step.handler) {
+          throw new Error("Custom step requires handler");
+        }
+        return step.handler();
+      default:
+        throw new Error(`Unknown step type: ${step.type}`);
+    }
+  }
+  /**
+   * Perform state assertion
+   */
+  async performAssertion(target, expectedState) {
+    const snapshot = await this.executor.getSnapshot();
+    const element = snapshot.elements.find((e) => e.id === target);
+    if (!element) {
+      throw new Error(`Element not found for assertion: ${target}`);
+    }
+    const differences = [];
+    for (const [key, expected] of Object.entries(expectedState)) {
+      const actual = element.state[key];
+      if (actual !== expected) {
+        differences.push(`${key}: expected ${expected}, got ${actual}`);
+      }
+    }
+    if (differences.length > 0) {
+      throw new Error(`Assertion failed:
+${differences.join("\n")}`);
+    }
+    return { passed: true, differences };
+  }
+  /**
+   * Interpolate parameters with {{param}} syntax
+   */
+  interpolateParams(stepParams, workflowParams) {
+    const result = {};
+    for (const [key, value] of Object.entries(stepParams)) {
+      if (typeof value === "string") {
+        result[key] = value.replace(/\{\{(\w+)\}\}/g, (_, name) => {
+          return String(workflowParams[name] ?? "");
+        });
+      } else {
+        result[key] = value;
+      }
+    }
+    return result;
+  }
+  /**
+   * Build response from state
+   */
+  buildResponse(state) {
+    return {
+      workflowId: state.workflowId,
+      runId: state.runId,
+      status: state.status,
+      steps: [...state.steps],
+      currentStep: state.currentStep,
+      totalSteps: state.workflow.steps.length,
+      success: state.success,
+      error: state.error,
+      startedAt: state.startedAt,
+      completedAt: state.completedAt,
+      durationMs: state.durationMs
+    };
+  }
+};
+function createWorkflowEngine(registry, executor) {
+  return new DefaultWorkflowEngine(registry, executor);
+}
+
+// src/render-log/dom-capture.ts
+var CAPTURE_ATTRIBUTES = [
+  "data-ui-id",
+  "data-testid",
+  "data-awas-element",
+  "id",
+  "name",
+  "type",
+  "href",
+  "src",
+  "alt",
+  "title",
+  "placeholder",
+  "value",
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-expanded",
+  "aria-selected",
+  "aria-checked",
+  "aria-disabled",
+  "aria-hidden",
+  "role",
+  "tabindex",
+  "disabled",
+  "readonly",
+  "required",
+  "checked"
+];
+var INTERACTIVE_SELECTORS = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "[onclick]",
+  '[role="button"]',
+  '[role="link"]',
+  '[role="checkbox"]',
+  '[role="radio"]',
+  '[role="menuitem"]',
+  '[role="tab"]',
+  '[role="switch"]',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]'
+];
+function isInteractive(element) {
+  return INTERACTIVE_SELECTORS.some((selector) => {
+    try {
+      return element.matches(selector);
+    } catch {
+      return false;
+    }
+  });
+}
+function getAccessibleName(element) {
+  const ariaLabel = element.getAttribute("aria-label");
+  if (ariaLabel) return ariaLabel;
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    const labels = labelledBy.split(" ").map((id) => document.getElementById(id)?.textContent?.trim()).filter(Boolean);
+    if (labels.length > 0) return labels.join(" ");
+  }
+  if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+    const id = element.id;
+    if (id) {
+      const label = document.querySelector(`label[for="${id}"]`);
+      if (label) return label.textContent?.trim();
+    }
+  }
+  const title = element.getAttribute("title");
+  if (title) return title;
+  if (element instanceof HTMLImageElement) {
+    return element.alt || void 0;
+  }
+  if (element.matches('button, a, [role="button"], [role="link"]')) {
+    return element.textContent?.trim() || void 0;
+  }
+  return void 0;
+}
+function getElementState3(element) {
+  const rect = element.getBoundingClientRect();
+  const style = window.getComputedStyle(element);
+  const state = {
+    visible: isVisible2(element, rect, style),
+    enabled: !isDisabled2(element),
+    focused: document.activeElement === element,
+    rect: {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left
+    },
+    computedStyles: {
+      display: style.display,
+      visibility: style.visibility,
+      opacity: style.opacity,
+      pointerEvents: style.pointerEvents
+    }
+  };
+  if (element instanceof HTMLInputElement) {
+    state.value = element.value;
+    if (element.type === "checkbox" || element.type === "radio") {
+      state.checked = element.checked;
+    }
+  } else if (element instanceof HTMLTextAreaElement) {
+    state.value = element.value;
+  } else if (element instanceof HTMLSelectElement) {
+    state.value = element.value;
+    state.selectedOptions = Array.from(element.selectedOptions).map((opt) => opt.value);
+  }
+  return state;
+}
+function isVisible2(element, rect, style) {
+  if (rect.width === 0 || rect.height === 0) return false;
+  if (style.display === "none") return false;
+  if (style.visibility === "hidden") return false;
+  if (parseFloat(style.opacity) === 0) return false;
+  if (element.getAttribute("aria-hidden") === "true") return false;
+  return rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0;
+}
+function isDisabled2(element) {
+  if ("disabled" in element && element.disabled) return true;
+  if (element.getAttribute("aria-disabled") === "true") return true;
+  return false;
+}
+function captureAttributes(element) {
+  const attrs = {};
+  for (const attr of CAPTURE_ATTRIBUTES) {
+    const value = element.getAttribute(attr);
+    if (value !== null) {
+      attrs[attr] = value;
+    }
+  }
+  return attrs;
+}
+function captureElement(element, depth, maxTextLength) {
+  const identifier = createElementIdentifier(element);
+  let textContent = element.textContent?.trim();
+  if (textContent && textContent.length > maxTextLength) {
+    textContent = textContent.substring(0, maxTextLength) + "...";
+  }
+  return {
+    identifier,
+    bestId: getBestIdentifier(element),
+    tagName: element.tagName.toLowerCase(),
+    role: element.getAttribute("role") || void 0,
+    accessibleName: getAccessibleName(element),
+    textContent,
+    state: getElementState3(element),
+    attributes: captureAttributes(element),
+    childCount: element.children.length,
+    depth
+  };
+}
+function captureDOMSnapshot(options = {}) {
+  const startTime = performance.now();
+  const {
+    root = document.body,
+    maxDepth = 50,
+    maxElements = 5e3,
+    interactiveOnly = false,
+    includeHidden = false,
+    includeSelectors,
+    excludeSelectors,
+    filter,
+    maxTextLength = 200
+  } = options;
+  const elements = [];
+  let totalNodeCount = 0;
+  function shouldCapture(element) {
+    if (filter && !filter(element)) return false;
+    if (excludeSelectors) {
+      for (const selector of excludeSelectors) {
+        try {
+          if (element.matches(selector)) return false;
+        } catch {
+        }
+      }
+    }
+    if (includeSelectors && includeSelectors.length > 0) {
+      let matches = false;
+      for (const selector of includeSelectors) {
+        try {
+          if (element.matches(selector)) {
+            matches = true;
+            break;
+          }
+        } catch {
+        }
+      }
+      if (!matches) return false;
+    }
+    if (interactiveOnly && !isInteractive(element)) return false;
+    if (!includeHidden) {
+      const rect = element.getBoundingClientRect();
+      const style = window.getComputedStyle(element);
+      if (!isVisible2(element, rect, style)) return false;
+    }
+    return true;
+  }
+  function traverse(element, depth) {
+    if (depth > maxDepth || elements.length >= maxElements) return;
+    totalNodeCount++;
+    if (shouldCapture(element)) {
+      elements.push(captureElement(element, depth, maxTextLength));
+    }
+    for (const child of element.children) {
+      if (child instanceof HTMLElement) {
+        traverse(child, depth + 1);
+      }
+    }
+  }
+  traverse(root, 0);
+  const endTime = performance.now();
+  return {
+    timestamp: Date.now(),
+    url: window.location.href,
+    title: document.title,
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      scrollX: window.scrollX,
+      scrollY: window.scrollY
+    },
+    elements,
+    totalNodeCount,
+    captureDurationMs: endTime - startTime
+  };
+}
+function captureInteractiveElements(options = {}) {
+  return captureDOMSnapshot({ ...options, interactiveOnly: true });
+}
+var DOMChangeObserver = class {
+  constructor(options = {}) {
+    this.observer = null;
+    this.changes = [];
+    this.maxChanges = options.maxChanges ?? 1e3;
+    this.callback = options.callback;
+  }
+  start(root = document.body) {
+    if (this.observer) return;
+    this.observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        const change = this.processMutation(mutation);
+        if (change) {
+          this.addChange(change);
+        }
+      }
+    });
+    this.observer.observe(root, {
+      childList: true,
+      attributes: true,
+      characterData: true,
+      subtree: true,
+      attributeOldValue: true
+    });
+  }
+  stop() {
+    this.observer?.disconnect();
+    this.observer = null;
+  }
+  processMutation(mutation) {
+    const target = mutation.target;
+    if (!(target instanceof HTMLElement)) return null;
+    const elementId = getBestIdentifier(target);
+    if (mutation.type === "attributes") {
+      return {
+        timestamp: Date.now(),
+        type: "attribute",
+        elementId,
+        tagName: target.tagName.toLowerCase(),
+        details: {
+          attributeName: mutation.attributeName || void 0,
+          oldValue: mutation.oldValue || void 0,
+          newValue: mutation.attributeName ? target.getAttribute(mutation.attributeName) || void 0 : void 0
+        }
+      };
+    }
+    if (mutation.type === "childList") {
+      if (mutation.addedNodes.length > 0) {
+        return {
+          timestamp: Date.now(),
+          type: "added",
+          elementId,
+          tagName: target.tagName.toLowerCase(),
+          details: {
+            addedNodes: mutation.addedNodes.length
+          }
+        };
+      }
+      if (mutation.removedNodes.length > 0) {
+        return {
+          timestamp: Date.now(),
+          type: "removed",
+          elementId,
+          tagName: target.tagName.toLowerCase(),
+          details: {
+            removedNodes: mutation.removedNodes.length
+          }
+        };
+      }
+    }
+    return null;
+  }
+  addChange(change) {
+    this.changes.push(change);
+    if (this.changes.length > this.maxChanges) {
+      this.changes.shift();
+    }
+    this.callback?.(change);
+  }
+  getChanges() {
+    return [...this.changes];
+  }
+  clearChanges() {
+    this.changes = [];
+  }
+};
+
+// src/render-log/snapshot.ts
+var InMemoryRenderLogStorage = class {
+  constructor(maxEntries = 1e3) {
+    this.entries = [];
+    this.maxEntries = maxEntries;
+  }
+  async append(entry) {
+    this.entries.push(entry);
+    while (this.entries.length > this.maxEntries) {
+      this.entries.shift();
+    }
+  }
+  async getEntries(options) {
+    let results = [...this.entries];
+    if (options?.type) {
+      results = results.filter((e) => e.type === options.type);
+    }
+    if (options?.since) {
+      results = results.filter((e) => e.timestamp >= options.since);
+    }
+    if (options?.until) {
+      results = results.filter((e) => e.timestamp <= options.until);
+    }
+    if (options?.limit) {
+      results = results.slice(-options.limit);
+    }
+    return results;
+  }
+  async clear() {
+    this.entries = [];
+  }
+  async count() {
+    return this.entries.length;
+  }
+  /** Get entries synchronously (for in-memory only) */
+  getEntriesSync() {
+    return [...this.entries];
+  }
+};
+function generateId2() {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+var RenderLogManager = class {
+  constructor(options = {}) {
+    this.changeObserver = null;
+    this.snapshotTimer = null;
+    this.pendingChanges = [];
+    this.started = false;
+    this.options = options;
+    this.storage = options.storage ?? new InMemoryRenderLogStorage(options.maxEntries);
+  }
+  /**
+   * Start capturing
+   */
+  start() {
+    if (this.started) return;
+    this.started = true;
+    if (this.options.captureChanges !== false) {
+      this.changeObserver = new DOMChangeObserver({
+        callback: (change) => {
+          this.pendingChanges.push(change);
+        }
+      });
+      this.changeObserver.start();
+    }
+    if (this.options.captureOnNavigation !== false) {
+      this.setupNavigationObserver();
+    }
+    if (this.options.snapshotInterval) {
+      this.snapshotTimer = setInterval(() => {
+        this.captureSnapshot();
+      }, this.options.snapshotInterval);
+    }
+    this.captureSnapshot();
+  }
+  /**
+   * Stop capturing
+   */
+  stop() {
+    if (!this.started) return;
+    this.started = false;
+    this.changeObserver?.stop();
+    this.changeObserver = null;
+    if (this.snapshotTimer) {
+      clearInterval(this.snapshotTimer);
+      this.snapshotTimer = null;
+    }
+  }
+  /**
+   * Capture a DOM snapshot
+   */
+  async captureSnapshot(metadata) {
+    if (this.pendingChanges.length > 0) {
+      await this.flushChanges();
+    }
+    const snapshot = captureDOMSnapshot(this.options.captureOptions);
+    const entry = {
+      id: generateId2(),
+      type: "snapshot",
+      timestamp: snapshot.timestamp,
+      data: snapshot,
+      metadata
+    };
+    await this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Flush pending DOM changes
+   */
+  async flushChanges() {
+    if (this.pendingChanges.length === 0) return null;
+    const changes = [...this.pendingChanges];
+    this.pendingChanges = [];
+    const entry = {
+      id: generateId2(),
+      type: "change",
+      timestamp: Date.now(),
+      data: changes
+    };
+    await this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Log an interaction
+   */
+  async logInteraction(eventType, details) {
+    const entry = {
+      id: generateId2(),
+      type: "interaction",
+      timestamp: Date.now(),
+      data: {
+        eventType,
+        ...details
+      }
+    };
+    await this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Log an error
+   */
+  async logError(message, details) {
+    const entry = {
+      id: generateId2(),
+      type: "error",
+      timestamp: Date.now(),
+      data: {
+        message,
+        ...details
+      }
+    };
+    await this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Log a navigation
+   */
+  async logNavigation(from, to, navigationType) {
+    const entry = {
+      id: generateId2(),
+      type: "navigation",
+      timestamp: Date.now(),
+      data: {
+        from,
+        to,
+        navigationType
+      }
+    };
+    await this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Add a custom entry
+   */
+  async logCustom(data, metadata) {
+    const entry = {
+      id: generateId2(),
+      type: "custom",
+      timestamp: Date.now(),
+      data,
+      metadata
+    };
+    await this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Get log entries
+   */
+  async getEntries(options) {
+    return this.storage.getEntries(options);
+  }
+  /**
+   * Clear the log
+   */
+  async clear() {
+    this.pendingChanges = [];
+    await this.storage.clear();
+  }
+  /**
+   * Get entry count
+   */
+  async count() {
+    return this.storage.count();
+  }
+  /**
+   * Get the latest snapshot
+   */
+  async getLatestSnapshot() {
+    const snapshots = await this.storage.getEntries({ type: "snapshot", limit: 1 });
+    return snapshots[0] || null;
+  }
+  async addEntry(entry) {
+    await this.storage.append(entry);
+    this.options.onEntry?.(entry);
+  }
+  setupNavigationObserver() {
+    let lastUrl = window.location.href;
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+    history.pushState = (...args) => {
+      const result = originalPushState.apply(history, args);
+      const newUrl = window.location.href;
+      if (newUrl !== lastUrl) {
+        this.logNavigation(lastUrl, newUrl, "push");
+        this.captureSnapshot({ trigger: "navigation" });
+        lastUrl = newUrl;
+      }
+      return result;
+    };
+    history.replaceState = (...args) => {
+      const result = originalReplaceState.apply(history, args);
+      const newUrl = window.location.href;
+      if (newUrl !== lastUrl) {
+        this.logNavigation(lastUrl, newUrl, "replace");
+        this.captureSnapshot({ trigger: "navigation" });
+        lastUrl = newUrl;
+      }
+      return result;
+    };
+    window.addEventListener("popstate", () => {
+      const newUrl = window.location.href;
+      if (newUrl !== lastUrl) {
+        this.logNavigation(lastUrl, newUrl, "pop");
+        this.captureSnapshot({ trigger: "navigation" });
+        lastUrl = newUrl;
+      }
+    });
+  }
+};
+function createRenderLogManager(options) {
+  return new RenderLogManager(options);
+}
+
+// src/debug/metrics.ts
+function generateId3() {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 8)}`;
+}
+var MetricsCollector = class {
+  constructor(options = {}) {
+    this.history = [];
+    this.maxHistoryEntries = options.maxHistoryEntries ?? 1e3;
+    this.rateWindow = options.rateWindow ?? 6e4;
+  }
+  /**
+   * Record an element action
+   */
+  recordElementAction(target, action, response, params) {
+    const entry = {
+      id: generateId3(),
+      timestamp: response.timestamp,
+      type: "element",
+      target,
+      action,
+      success: response.success,
+      durationMs: response.durationMs,
+      error: response.error,
+      params,
+      response: response.elementState
+    };
+    this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Record a component action
+   */
+  recordComponentAction(target, action, response, params) {
+    const entry = {
+      id: generateId3(),
+      timestamp: response.timestamp,
+      type: "component",
+      target,
+      action,
+      success: response.success,
+      durationMs: response.durationMs,
+      error: response.error,
+      params,
+      response: response.result
+    };
+    this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Record a workflow step
+   */
+  recordWorkflowStep(workflowId, result) {
+    const entry = {
+      id: generateId3(),
+      timestamp: result.timestamp,
+      type: "workflow-step",
+      target: workflowId,
+      action: result.stepId,
+      success: result.success,
+      durationMs: result.durationMs,
+      error: result.error,
+      response: result.result
+    };
+    this.addEntry(entry);
+    return entry;
+  }
+  /**
+   * Record from a bridge event
+   */
+  recordEvent(event) {
+    if (event.type === "action:completed" || event.type === "action:failed") {
+      const data = event.data;
+      if (data.elementId) {
+        this.recordElementAction(
+          data.elementId,
+          data.action,
+          data.response,
+          data.params
+        );
+      } else if (data.componentId) {
+        this.recordComponentAction(
+          data.componentId,
+          data.action,
+          data.response,
+          data.params
+        );
+      }
+    }
+  }
+  /**
+   * Get action history
+   */
+  getHistory(options) {
+    let results = [...this.history];
+    if (options?.type) {
+      results = results.filter((e) => e.type === options.type);
+    }
+    if (options?.target) {
+      results = results.filter((e) => e.target === options.target);
+    }
+    if (options?.action) {
+      results = results.filter((e) => e.action === options.action);
+    }
+    if (options?.success !== void 0) {
+      results = results.filter((e) => e.success === options.success);
+    }
+    if (options?.since) {
+      results = results.filter((e) => e.timestamp >= options.since);
+    }
+    if (options?.limit) {
+      results = results.slice(-options.limit);
+    }
+    return results;
+  }
+  /**
+   * Get performance metrics
+   */
+  getMetrics(since) {
+    const entries = since ? this.history.filter((e) => e.timestamp >= since) : this.history;
+    if (entries.length === 0) {
+      return {
+        totalActions: 0,
+        successfulActions: 0,
+        failedActions: 0,
+        successRate: 0,
+        avgDurationMs: 0,
+        minDurationMs: 0,
+        maxDurationMs: 0,
+        p95DurationMs: 0,
+        actionsPerSecond: 0,
+        errorsByType: {},
+        actionsByType: {}
+      };
+    }
+    const successful = entries.filter((e) => e.success);
+    const failed = entries.filter((e) => !e.success);
+    const durations = entries.map((e) => e.durationMs).sort((a, b) => a - b);
+    const now = Date.now();
+    const windowStart = now - this.rateWindow;
+    const recentActions = this.history.filter((e) => e.timestamp >= windowStart);
+    const windowSeconds = this.rateWindow / 1e3;
+    const errorsByType = {};
+    for (const entry of failed) {
+      const errorType = entry.error?.split(":")[0] || "Unknown";
+      errorsByType[errorType] = (errorsByType[errorType] || 0) + 1;
+    }
+    const actionsByType = {};
+    for (const entry of entries) {
+      const key = `${entry.type}:${entry.action}`;
+      actionsByType[key] = (actionsByType[key] || 0) + 1;
+    }
+    return {
+      totalActions: entries.length,
+      successfulActions: successful.length,
+      failedActions: failed.length,
+      successRate: successful.length / entries.length,
+      avgDurationMs: durations.reduce((a, b) => a + b, 0) / durations.length,
+      minDurationMs: durations[0],
+      maxDurationMs: durations[durations.length - 1],
+      p95DurationMs: durations[Math.floor(durations.length * 0.95)],
+      actionsPerSecond: recentActions.length / windowSeconds,
+      errorsByType,
+      actionsByType
+    };
+  }
+  /**
+   * Get recent errors
+   */
+  getRecentErrors(limit = 10) {
+    return this.history.filter((e) => !e.success).slice(-limit);
+  }
+  /**
+   * Get slowest actions
+   */
+  getSlowestActions(limit = 10) {
+    return [...this.history].sort((a, b) => b.durationMs - a.durationMs).slice(0, limit);
+  }
+  /**
+   * Clear history
+   */
+  clearHistory() {
+    this.history = [];
+  }
+  /**
+   * Export history as JSON
+   */
+  exportHistory() {
+    return JSON.stringify(this.history, null, 2);
+  }
+  /**
+   * Import history from JSON
+   */
+  importHistory(json) {
+    const entries = JSON.parse(json);
+    this.history = entries.slice(-this.maxHistoryEntries);
+  }
+  addEntry(entry) {
+    this.history.push(entry);
+    while (this.history.length > this.maxHistoryEntries) {
+      this.history.shift();
+    }
+  }
+};
+function createMetricsCollector(options) {
+  return new MetricsCollector(options);
+}
+function formatDuration(ms) {
+  if (ms < 1) return "<1ms";
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+  return `${(ms / 6e4).toFixed(1)}m`;
+}
+function formatPercentage(value) {
+  return `${(value * 100).toFixed(1)}%`;
+}
+var UIBridgeContext = createContext(null);
+function UIBridgeProvider({
+  children,
+  features = {},
+  config = {},
+  onEvent
+}) {
+  const registryRef = useRef(null);
+  const renderLogRef = useRef(null);
+  const metricsRef = useRef(null);
+  const wsClientRef = useRef(null);
+  const [wsConnectionState, setWsConnectionState] = useState("disconnected");
+  if (!registryRef.current) {
+    registryRef.current = new UIBridgeRegistry({
+      verbose: config.verbose,
+      onEvent
+    });
+    setGlobalRegistry(registryRef.current);
+    if (features.renderLog) {
+      renderLogRef.current = createRenderLogManager({
+        maxEntries: config.maxLogEntries
+      });
+    }
+    if (features.debug) {
+      metricsRef.current = createMetricsCollector();
+    }
+    if (config.websocket) {
+      const wsPort = config.websocketPort || config.serverPort || 9876;
+      const wsUrl = `ws://localhost:${wsPort}`;
+      wsClientRef.current = createWSClient({
+        url: wsUrl,
+        autoReconnect: true,
+        reconnectDelay: 1e3,
+        maxReconnectAttempts: 10,
+        pingInterval: 3e4
+      });
+    }
+  }
+  const registry = registryRef.current;
+  const renderLog = renderLogRef.current || void 0;
+  const metrics = metricsRef.current || void 0;
+  const wsClient = wsClientRef.current || void 0;
+  const executor = useMemo(() => createActionExecutor(registry), [registry]);
+  const workflowEngine = useMemo(
+    () => createWorkflowEngine(registry, executor),
+    [registry, executor]
+  );
+  useEffect(() => {
+    if (features.renderLog && renderLog) {
+      renderLog.start();
+      return () => renderLog.stop();
+    }
+  }, [features.renderLog, renderLog]);
+  useEffect(() => {
+    if (!metrics) return;
+    const unsubCompleted = registry.on("action:completed", (event) => {
+      metrics.recordEvent(event);
+    });
+    const unsubFailed = registry.on("action:failed", (event) => {
+      metrics.recordEvent(event);
+    });
+    return () => {
+      unsubCompleted();
+      unsubFailed();
+    };
+  }, [registry, metrics]);
+  useEffect(() => {
+    if (!wsClient) return;
+    const unsubscribe = wsClient.onConnectionChange((state) => {
+      setWsConnectionState(state);
+    });
+    return unsubscribe;
+  }, [wsClient]);
+  useEffect(() => {
+    return () => {
+      renderLog?.stop();
+      wsClient?.disconnect();
+      resetGlobalRegistry();
+    };
+  }, [renderLog, wsClient]);
+  const wsConnect = useCallback(async () => {
+    if (wsClient) {
+      await wsClient.connect();
+    }
+  }, [wsClient]);
+  const wsDisconnect = useCallback(() => {
+    wsClient?.disconnect();
+  }, [wsClient]);
+  const wsSubscribe = useCallback(
+    async (options) => {
+      if (!wsClient) {
+        return [];
+      }
+      return wsClient.subscribe(options);
+    },
+    [wsClient]
+  );
+  const onWsEvent = useCallback(
+    (eventType, listener) => {
+      if (!wsClient) {
+        return () => {
+        };
+      }
+      return wsClient.onEvent(eventType, listener);
+    },
+    [wsClient]
+  );
+  const getElements = useCallback(() => registry.getAllElements(), [registry]);
+  const getComponents = useCallback(() => registry.getAllComponents(), [registry]);
+  const createSnapshot = useCallback(() => registry.createSnapshot(), [registry]);
+  const on = useCallback(
+    (type, listener) => registry.on(type, listener),
+    [registry]
+  );
+  const off = useCallback(
+    (type, listener) => registry.off(type, listener),
+    [registry]
+  );
+  const contextValue = useMemo(
+    () => ({
+      features,
+      config,
+      registry,
+      executor,
+      workflowEngine,
+      renderLog,
+      metrics,
+      wsClient,
+      wsConnectionState,
+      getElements,
+      getComponents,
+      createSnapshot,
+      on,
+      off,
+      initialized: true,
+      wsConnect,
+      wsDisconnect,
+      wsSubscribe,
+      onWsEvent
+    }),
+    [
+      features,
+      config,
+      registry,
+      executor,
+      workflowEngine,
+      renderLog,
+      metrics,
+      wsClient,
+      wsConnectionState,
+      getElements,
+      getComponents,
+      createSnapshot,
+      on,
+      off,
+      wsConnect,
+      wsDisconnect,
+      wsSubscribe,
+      onWsEvent
+    ]
+  );
+  return /* @__PURE__ */ jsx(UIBridgeContext.Provider, { value: contextValue, children });
+}
+function useUIBridgeContext() {
+  const context = useContext(UIBridgeContext);
+  if (!context) {
+    throw new Error("useUIBridgeContext must be used within a UIBridgeProvider");
+  }
+  return context;
+}
+function useUIBridgeOptional() {
+  return useContext(UIBridgeContext);
+}
+function useUIElement(options) {
+  const bridge = useUIBridgeOptional();
+  const elementRef = useRef(null);
+  const registeredRef = useRef(false);
+  const { id, type, label, actions, customActions, autoRegister = true } = options;
+  const register = useCallback(() => {
+    if (!bridge || !elementRef.current || registeredRef.current) return;
+    bridge.registry.registerElement(id, elementRef.current, {
+      type,
+      label,
+      actions,
+      customActions
+    });
+    registeredRef.current = true;
+  }, [bridge, id, type, label, actions, customActions]);
+  const unregister = useCallback(() => {
+    if (!bridge || !registeredRef.current) return;
+    bridge.registry.unregisterElement(id);
+    registeredRef.current = false;
+  }, [bridge, id]);
+  const ref = useCallback(
+    (node) => {
+      if (elementRef.current && elementRef.current !== node) {
+        unregister();
+      }
+      elementRef.current = node;
+      if (node && autoRegister) {
+        register();
+      }
+    },
+    [autoRegister, register, unregister]
+  );
+  useEffect(() => {
+    return () => {
+      unregister();
+    };
+  }, [unregister]);
+  const getState = useCallback(() => {
+    if (!bridge) return null;
+    const registered = bridge.registry.getElement(id);
+    return registered?.getState() || null;
+  }, [bridge, id]);
+  const getIdentifier = useCallback(() => {
+    if (!bridge) return null;
+    const registered = bridge.registry.getElement(id);
+    return registered?.getIdentifier() || null;
+  }, [bridge, id]);
+  const trigger = useCallback(
+    async (action, params) => {
+      if (!bridge) {
+        throw new Error("UI Bridge not available");
+      }
+      const response = await bridge.executor.executeAction(id, {
+        action,
+        params
+      });
+      if (!response.success) {
+        throw new Error(response.error || "Action failed");
+      }
+    },
+    [bridge, id]
+  );
+  const registeredElement = useMemo(() => {
+    if (!bridge) return null;
+    return bridge.registry.getElement(id) || null;
+  }, [bridge, id]);
+  return {
+    ref,
+    element: elementRef.current,
+    registered: registeredRef.current,
+    getState,
+    getIdentifier,
+    trigger,
+    register,
+    unregister,
+    registeredElement
+  };
+}
+function useUIElementRef(id) {
+  return useCallback(
+    (node) => {
+      if (node) {
+        node.setAttribute("data-ui-id", id);
+      }
+    },
+    [id]
+  );
+}
+function useUIComponent(options) {
+  const bridge = useUIBridgeOptional();
+  const registeredRef = useRef(false);
+  const actionsRef = useRef(options.actions || []);
+  const elementIdsRef = useRef(options.elementIds || []);
+  const { id, name, description, autoRegister = true } = options;
+  useEffect(() => {
+    actionsRef.current = options.actions || [];
+    elementIdsRef.current = options.elementIds || [];
+  }, [options.actions, options.elementIds]);
+  const register = useCallback(() => {
+    if (!bridge || registeredRef.current) return;
+    bridge.registry.registerComponent(id, {
+      name,
+      description,
+      actions: actionsRef.current.map((a) => ({
+        id: a.id,
+        label: a.label,
+        description: a.description,
+        handler: a.handler
+      })),
+      elementIds: elementIdsRef.current
+    });
+    registeredRef.current = true;
+  }, [bridge, id, name, description]);
+  const unregister = useCallback(() => {
+    if (!bridge || !registeredRef.current) return;
+    bridge.registry.unregisterComponent(id);
+    registeredRef.current = false;
+  }, [bridge, id]);
+  const executeAction = useCallback(
+    async (actionId, params) => {
+      if (!bridge) {
+        throw new Error("UI Bridge not available");
+      }
+      const response = await bridge.executor.executeComponentAction(id, {
+        action: actionId,
+        params
+      });
+      if (!response.success) {
+        throw new Error(response.error || "Action failed");
+      }
+      return response.result;
+    },
+    [bridge, id]
+  );
+  const updateActions = useCallback(
+    (actions) => {
+      actionsRef.current = actions;
+      if (registeredRef.current && bridge) {
+        bridge.registry.unregisterComponent(id);
+        registeredRef.current = false;
+        register();
+      }
+    },
+    [bridge, id, register]
+  );
+  const addElement = useCallback((elementId) => {
+    if (!elementIdsRef.current.includes(elementId)) {
+      elementIdsRef.current = [...elementIdsRef.current, elementId];
+    }
+  }, []);
+  const removeElement = useCallback((elementId) => {
+    elementIdsRef.current = elementIdsRef.current.filter((id2) => id2 !== elementId);
+  }, []);
+  useEffect(() => {
+    if (autoRegister) {
+      register();
+    }
+    return () => {
+      unregister();
+    };
+  }, [autoRegister, register, unregister]);
+  const registeredComponent = useMemo(() => {
+    if (!bridge) return null;
+    return bridge.registry.getComponent(id) || null;
+  }, [bridge, id]);
+  return {
+    registered: registeredRef.current,
+    executeAction,
+    register,
+    unregister,
+    updateActions,
+    addElement,
+    removeElement,
+    registeredComponent
+  };
+}
+function useUIComponentAction(handler, deps) {
+  return useCallback(handler, deps);
+}
+function useUIBridge() {
+  const context = useUIBridgeOptional();
+  const available = !!context;
+  const initialized = context?.initialized ?? false;
+  const elements = useMemo(() => context?.getElements() ?? [], [context]);
+  const components = useMemo(() => context?.getComponents() ?? [], [context]);
+  const workflows = useMemo(() => context?.registry.getAllWorkflows() ?? [], [context]);
+  const createSnapshot = useCallback(() => {
+    if (!context) {
+      return {
+        timestamp: Date.now(),
+        elements: [],
+        components: [],
+        workflows: []
+      };
+    }
+    return context.createSnapshot();
+  }, [context]);
+  const executeAction = useCallback(
+    async (elementId, request) => {
+      if (!context) {
+        return {
+          success: false,
+          error: "UI Bridge not available",
+          durationMs: 0,
+          timestamp: Date.now()
+        };
+      }
+      return context.executor.executeAction(elementId, request);
+    },
+    [context]
+  );
+  const executeComponentAction = useCallback(
+    async (componentId, request) => {
+      if (!context) {
+        return {
+          success: false,
+          error: "UI Bridge not available",
+          durationMs: 0,
+          timestamp: Date.now()
+        };
+      }
+      return context.executor.executeComponentAction(componentId, request);
+    },
+    [context]
+  );
+  const find = useCallback(
+    async (options) => {
+      if (!context) {
+        return {
+          elements: [],
+          total: 0,
+          durationMs: 0,
+          timestamp: Date.now()
+        };
+      }
+      return context.executor.find(options);
+    },
+    [context]
+  );
+  const discover = useCallback(
+    async (options) => {
+      return find(options);
+    },
+    [find]
+  );
+  const runWorkflow = useCallback(
+    async (workflowId, request) => {
+      if (!context) {
+        return {
+          workflowId,
+          runId: "",
+          status: "failed",
+          steps: [],
+          totalSteps: 0,
+          success: false,
+          error: "UI Bridge not available",
+          startedAt: Date.now(),
+          completedAt: Date.now(),
+          durationMs: 0
+        };
+      }
+      return context.workflowEngine.run(workflowId, request);
+    },
+    [context]
+  );
+  const getElement = useCallback(
+    (id) => {
+      return context?.registry.getElement(id);
+    },
+    [context]
+  );
+  const getComponent = useCallback(
+    (id) => {
+      return context?.registry.getComponent(id);
+    },
+    [context]
+  );
+  const getElementState5 = useCallback(
+    (id) => {
+      const element = context?.registry.getElement(id);
+      return element?.getState();
+    },
+    [context]
+  );
+  const registerWorkflow = useCallback(
+    (workflow) => {
+      context?.registry.registerWorkflow(workflow);
+    },
+    [context]
+  );
+  const unregisterWorkflow = useCallback(
+    (id) => {
+      context?.registry.unregisterWorkflow(id);
+    },
+    [context]
+  );
+  const captureRenderLog = useCallback(async () => {
+    await context?.renderLog?.captureSnapshot();
+  }, [context]);
+  const getRenderLogEntries = useCallback(async () => {
+    return await context?.renderLog?.getEntries() ?? [];
+  }, [context]);
+  const clearRenderLog = useCallback(async () => {
+    await context?.renderLog?.clear();
+  }, [context]);
+  const getMetrics = useCallback(() => {
+    return context?.metrics?.getMetrics();
+  }, [context]);
+  const getActionHistory = useCallback(() => {
+    return context?.metrics?.getHistory();
+  }, [context]);
+  return {
+    available,
+    initialized,
+    elements,
+    components,
+    workflows,
+    createSnapshot,
+    executeAction,
+    executeComponentAction,
+    find,
+    discover,
+    // deprecated - use find
+    runWorkflow,
+    getElement,
+    getComponent,
+    getElementState: getElementState5,
+    registerWorkflow,
+    unregisterWorkflow,
+    captureRenderLog,
+    getRenderLogEntries,
+    clearRenderLog,
+    getMetrics,
+    getActionHistory
+  };
+}
+function useUIBridgeRequired() {
+  useUIBridgeContext();
+  return useUIBridge();
+}
+function useUIState(options) {
+  const bridge = useUIBridgeOptional();
+  const [registered, setRegistered] = useState(false);
+  const [isActive, setIsActive] = useState(options.initialActive ?? false);
+  const [activeStates, setActiveStates] = useState([]);
+  const {
+    id,
+    name,
+    elements = [],
+    activeWhen,
+    blocking,
+    blocks,
+    group,
+    pathCost,
+    metadata,
+    autoRegister = true,
+    initialActive = false
+  } = options;
+  const register = useCallback(() => {
+    if (!bridge || registered) return;
+    const state2 = {
+      id,
+      name,
+      elements,
+      activeWhen,
+      blocking,
+      blocks,
+      group,
+      pathCost,
+      metadata
+    };
+    bridge.registry.registerState(state2);
+    setRegistered(true);
+    if (initialActive) {
+      bridge.registry.activateState(id);
+      setIsActive(true);
+    }
+    setActiveStates(bridge.registry.getActiveStates());
+  }, [
+    bridge,
+    registered,
+    id,
+    name,
+    elements,
+    activeWhen,
+    blocking,
+    blocks,
+    group,
+    pathCost,
+    metadata,
+    initialActive
+  ]);
+  const unregister = useCallback(() => {
+    if (!bridge || !registered) return;
+    bridge.registry.unregisterState(id);
+    setRegistered(false);
+    setIsActive(false);
+  }, [bridge, registered, id]);
+  useEffect(() => {
+    if (autoRegister && bridge) {
+      register();
+    }
+    return () => {
+      if (registered) {
+        unregister();
+      }
+    };
+  }, [autoRegister, bridge, register, unregister, registered]);
+  useEffect(() => {
+    if (!bridge) return;
+    const unsubscribe = bridge.registry.on("element:stateChanged", (event) => {
+      const data = event.data;
+      if (data.stateId === id) {
+        setIsActive(data.active);
+      }
+      setActiveStates(data.activeStates);
+    });
+    return unsubscribe;
+  }, [bridge, id]);
+  const activate = useCallback(() => {
+    if (!bridge) return false;
+    const success = bridge.registry.activateState(id);
+    if (success) {
+      setIsActive(true);
+      setActiveStates(bridge.registry.getActiveStates());
+    }
+    return success;
+  }, [bridge, id]);
+  const deactivate = useCallback(() => {
+    if (!bridge) return false;
+    const success = bridge.registry.deactivateState(id);
+    if (success) {
+      setIsActive(false);
+      setActiveStates(bridge.registry.getActiveStates());
+    }
+    return success;
+  }, [bridge, id]);
+  const toggle = useCallback(() => {
+    return isActive ? deactivate() : activate();
+  }, [isActive, activate, deactivate]);
+  const state = useMemo(() => {
+    if (!bridge) return void 0;
+    return bridge.registry.getState(id);
+  }, [bridge, id, registered]);
+  return {
+    registered,
+    isActive,
+    activate,
+    deactivate,
+    toggle,
+    activeStates,
+    register,
+    unregister,
+    state
+  };
+}
+function useUIStateGroup(options) {
+  const bridge = useUIBridgeOptional();
+  const [registered, setRegistered] = useState(false);
+  const { id, name, states, autoRegister = true } = options;
+  const register = useCallback(() => {
+    if (!bridge || registered) return;
+    const group2 = { id, name, states };
+    bridge.registry.registerStateGroup(group2);
+    setRegistered(true);
+  }, [bridge, registered, id, name, states]);
+  const unregister = useCallback(() => {
+    if (!bridge || !registered) return;
+    bridge.registry.unregisterStateGroup(id);
+    setRegistered(false);
+  }, [bridge, registered, id]);
+  useEffect(() => {
+    if (autoRegister && bridge) {
+      register();
+    }
+    return () => {
+      if (registered) {
+        unregister();
+      }
+    };
+  }, [autoRegister, bridge, register, unregister, registered]);
+  const activate = useCallback(() => {
+    if (!bridge) return [];
+    return bridge.registry.activateStateGroup(id);
+  }, [bridge, id]);
+  const deactivate = useCallback(() => {
+    if (!bridge) return [];
+    return bridge.registry.deactivateStateGroup(id);
+  }, [bridge, id]);
+  const group = useMemo(() => {
+    if (!bridge) return void 0;
+    return bridge.registry.getStateGroup(id);
+  }, [bridge, id, registered]);
+  return {
+    registered,
+    activate,
+    deactivate,
+    register,
+    unregister,
+    group
+  };
+}
+function useActiveStates() {
+  const bridge = useUIBridgeOptional();
+  const [activeStates, setActiveStates] = useState([]);
+  useEffect(() => {
+    if (!bridge) return;
+    setActiveStates(bridge.registry.getActiveStates());
+    const unsubscribe = bridge.registry.on("element:stateChanged", (event) => {
+      const data = event.data;
+      setActiveStates(data.activeStates);
+    });
+    return unsubscribe;
+  }, [bridge]);
+  return activeStates;
+}
+function useStateSnapshot() {
+  const bridge = useUIBridgeOptional();
+  return useMemo(() => {
+    if (!bridge) return null;
+    return bridge.registry.createStateSnapshot();
+  }, [bridge]);
+}
+function useUITransition(options) {
+  const bridge = useUIBridgeOptional();
+  const [registered, setRegistered] = useState(false);
+  const [canExecute, setCanExecute] = useState(false);
+  const {
+    id,
+    name,
+    fromStates,
+    activateStates,
+    exitStates,
+    activateGroups,
+    exitGroups,
+    actions,
+    pathCost,
+    staysVisible,
+    autoRegister = true
+  } = options;
+  const register = useCallback(() => {
+    if (!bridge || registered) return;
+    const transition2 = {
+      id,
+      name,
+      fromStates,
+      activateStates,
+      exitStates,
+      activateGroups,
+      exitGroups,
+      actions,
+      pathCost,
+      staysVisible
+    };
+    bridge.registry.registerTransition(transition2);
+    setRegistered(true);
+    setCanExecute(bridge.registry.canExecuteTransition(id));
+  }, [
+    bridge,
+    registered,
+    id,
+    name,
+    fromStates,
+    activateStates,
+    exitStates,
+    activateGroups,
+    exitGroups,
+    actions,
+    pathCost,
+    staysVisible
+  ]);
+  const unregister = useCallback(() => {
+    if (!bridge || !registered) return;
+    bridge.registry.unregisterTransition(id);
+    setRegistered(false);
+    setCanExecute(false);
+  }, [bridge, registered, id]);
+  useEffect(() => {
+    if (autoRegister && bridge) {
+      register();
+    }
+    return () => {
+      if (registered) {
+        unregister();
+      }
+    };
+  }, [autoRegister, bridge, register, unregister, registered]);
+  useEffect(() => {
+    if (!bridge || !registered) return;
+    const unsubscribe = bridge.registry.on("element:stateChanged", () => {
+      setCanExecute(bridge.registry.canExecuteTransition(id));
+    });
+    return unsubscribe;
+  }, [bridge, id, registered]);
+  const execute = useCallback(async () => {
+    if (!bridge) {
+      return {
+        success: false,
+        activatedStates: [],
+        deactivatedStates: [],
+        error: "UI Bridge not available",
+        durationMs: 0
+      };
+    }
+    const result = await bridge.registry.executeTransition(id);
+    setCanExecute(bridge.registry.canExecuteTransition(id));
+    return result;
+  }, [bridge, id]);
+  const transition = useMemo(() => {
+    if (!bridge) return void 0;
+    return bridge.registry.getTransition(id);
+  }, [bridge, id, registered]);
+  return {
+    registered,
+    canExecute,
+    execute,
+    register,
+    unregister,
+    transition
+  };
+}
+function useTransitions() {
+  const bridge = useUIBridgeOptional();
+  return useMemo(() => {
+    if (!bridge) return [];
+    return bridge.registry.getAllTransitions();
+  }, [bridge]);
+}
+function useAvailableTransitions() {
+  const bridge = useUIBridgeOptional();
+  const [available, setAvailable] = useState([]);
+  useEffect(() => {
+    if (!bridge) return;
+    const updateAvailable = () => {
+      const transitions = bridge.registry.getAllTransitions();
+      const availableTransitions = transitions.filter(
+        (t) => bridge.registry.canExecuteTransition(t.id)
+      );
+      setAvailable(availableTransitions);
+    };
+    updateAvailable();
+    const unsubscribe = bridge.registry.on("element:stateChanged", updateAvailable);
+    return unsubscribe;
+  }, [bridge]);
+  return available;
+}
+function useUINavigation() {
+  const bridge = useUIBridgeOptional();
+  const [isNavigating, setIsNavigating] = useState(false);
+  const [lastResult, setLastResult] = useState(null);
+  const available = !!bridge;
+  const activeStates = useMemo(() => {
+    if (!bridge) return [];
+    return bridge.registry.getActiveStates();
+  }, [bridge]);
+  const findPath = useCallback(
+    (targetStates) => {
+      if (!bridge) {
+        return {
+          found: false,
+          transitions: [],
+          totalCost: 0,
+          targetStates,
+          estimatedSteps: 0
+        };
+      }
+      return bridge.registry.findPath(targetStates);
+    },
+    [bridge]
+  );
+  const navigateTo = useCallback(
+    async (targetStates) => {
+      if (!bridge) {
+        const result = {
+          success: false,
+          path: {
+            found: false,
+            transitions: [],
+            totalCost: 0,
+            targetStates,
+            estimatedSteps: 0
+          },
+          executedTransitions: [],
+          finalActiveStates: [],
+          error: "UI Bridge not available",
+          durationMs: 0
+        };
+        setLastResult(result);
+        return result;
+      }
+      setIsNavigating(true);
+      try {
+        const result = await bridge.registry.navigateTo(targetStates);
+        setLastResult(result);
+        return result;
+      } finally {
+        setIsNavigating(false);
+      }
+    },
+    [bridge]
+  );
+  return {
+    available,
+    isNavigating,
+    lastResult,
+    findPath,
+    navigateTo,
+    activeStates
+  };
+}
+function useCanNavigateTo(targetStates) {
+  const bridge = useUIBridgeOptional();
+  return useMemo(() => {
+    if (!bridge) return false;
+    const path = bridge.registry.findPath(targetStates);
+    return path.found;
+  }, [bridge, targetStates]);
+}
+function useNavigationPath(targetStates) {
+  const bridge = useUIBridgeOptional();
+  return useMemo(() => {
+    if (!bridge) {
+      return {
+        found: false,
+        transitions: [],
+        totalCost: 0,
+        targetStates,
+        estimatedSteps: 0
+      };
+    }
+    return bridge.registry.findPath(targetStates);
+  }, [bridge, targetStates]);
+}
+var INTERACTIVE_SELECTORS2 = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  '[role="button"]',
+  '[role="link"]',
+  '[role="checkbox"]',
+  '[role="radio"]',
+  '[role="menuitem"]',
+  '[role="tab"]',
+  '[role="switch"]',
+  '[role="slider"]',
+  '[role="spinbutton"]',
+  '[role="combobox"]',
+  '[role="listbox"]',
+  '[role="option"]',
+  '[role="textbox"]',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+  "[data-ui-element]",
+  // Explicitly marked for registration
+  "[data-testid]"
+  // Testing library convention
+];
+function inferElementType2(element) {
+  const role = element.getAttribute("role");
+  if (role) {
+    const roleMap = {
+      button: "button",
+      link: "link",
+      checkbox: "checkbox",
+      radio: "radio",
+      menuitem: "menuitem",
+      tab: "tab",
+      switch: "switch",
+      slider: "slider",
+      combobox: "combobox",
+      listbox: "listbox",
+      option: "option",
+      textbox: "textbox"
+    };
+    if (role in roleMap) {
+      return roleMap[role];
+    }
+  }
+  const tagName = element.tagName.toLowerCase();
+  switch (tagName) {
+    case "a":
+      return "link";
+    case "button":
+      return "button";
+    case "input": {
+      const type = element.type?.toLowerCase() || "text";
+      switch (type) {
+        case "checkbox":
+          return "checkbox";
+        case "radio":
+          return "radio";
+        case "range":
+          return "slider";
+        case "submit":
+        case "button":
+          return "button";
+        default:
+          return "input";
+      }
+    }
+    case "select":
+      return "select";
+    case "textarea":
+      return "textarea";
+    case "option":
+      return "option";
+    default:
+      return "generic";
+  }
+}
+function inferActions2(type) {
+  const baseActions = ["focus", "blur"];
+  const typeActions = {
+    button: [...baseActions, "click", "hover"],
+    link: [...baseActions, "click", "hover"],
+    input: [...baseActions, "type", "clear", "click"],
+    textarea: [...baseActions, "type", "clear", "click"],
+    textbox: [...baseActions, "type", "clear", "click"],
+    checkbox: [...baseActions, "check", "uncheck", "toggle", "click"],
+    radio: [...baseActions, "click", "select"],
+    select: [...baseActions, "select", "click"],
+    combobox: [...baseActions, "select", "type", "click"],
+    listbox: [...baseActions, "select", "click"],
+    option: [...baseActions, "select", "click"],
+    switch: [...baseActions, "toggle", "click"],
+    slider: [...baseActions, "setValue", "click", "drag"],
+    tab: [...baseActions, "click", "select"],
+    menuitem: [...baseActions, "click"],
+    dialog: [...baseActions],
+    menu: [...baseActions],
+    form: [...baseActions, "submit", "reset"],
+    custom: [...baseActions, "click"],
+    generic: [...baseActions, "click"]
+  };
+  return typeActions[type] || baseActions;
+}
+function getAccessibleLabel(element) {
+  const ariaLabel = element.getAttribute("aria-label");
+  if (ariaLabel) return ariaLabel;
+  const labelledBy = element.getAttribute("aria-labelledby");
+  if (labelledBy) {
+    const labelEl = document.getElementById(labelledBy);
+    if (labelEl) return labelEl.textContent?.trim();
+  }
+  if (element.id) {
+    const label = document.querySelector(`label[for="${element.id}"]`);
+    if (label) return label.textContent?.trim();
+  }
+  const title = element.getAttribute("title");
+  if (title) return title;
+  const text = element.textContent?.trim();
+  if (text && text.length <= 50) return text;
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+    const placeholder = element.placeholder;
+    if (placeholder) return placeholder;
+  }
+  return void 0;
+}
+function isElementVisible2(element) {
+  const style = window.getComputedStyle(element);
+  if (style.display === "none" || style.visibility === "hidden") {
+    return false;
+  }
+  const rect = element.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
+}
+function generateSemanticId(element) {
+  const type = inferElementType2(element);
+  const label = getAccessibleLabel(element);
+  if (label) {
+    const sanitized = label.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").slice(0, 30);
+    return `${type}-${sanitized}`;
+  }
+  const parent = element.parentElement;
+  if (parent) {
+    const siblings = Array.from(parent.querySelectorAll(element.tagName));
+    const index = siblings.indexOf(element);
+    return `${element.tagName.toLowerCase()}-${index}`;
+  }
+  return `${type}-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
+}
+function generateAutoId(element) {
+  const type = inferElementType2(element);
+  return `${type}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function generateIdForElement(element, strategy, customGenerator) {
+  if (customGenerator) {
+    return customGenerator(element);
+  }
+  switch (strategy) {
+    case "data-testid": {
+      const testId = element.getAttribute("data-testid");
+      return testId || generateAutoId(element);
+    }
+    case "data-ui-id": {
+      const uiId = element.getAttribute("data-ui-id");
+      return uiId || generateAutoId(element);
+    }
+    case "semantic":
+      return generateSemanticId(element);
+    case "auto":
+      return generateAutoId(element);
+    case "prefer-existing":
+    default: {
+      const uiId = element.getAttribute("data-ui-id");
+      if (uiId) return uiId;
+      const testId = element.getAttribute("data-testid");
+      if (testId) return testId;
+      const htmlId = element.id;
+      if (htmlId) return htmlId;
+      return generateSemanticId(element);
+    }
+  }
+}
+function useAutoRegister(options = {}) {
+  const {
+    enabled = process.env.NODE_ENV === "development",
+    root = null,
+    idStrategy = "prefer-existing",
+    debounceMs = 100,
+    includeHidden = false,
+    includeSelectors = [],
+    excludeSelectors = [],
+    generateId: customGenerateId,
+    onRegister,
+    onUnregister
+  } = options;
+  const bridge = useUIBridgeOptional();
+  const registeredElementsRef = useRef(/* @__PURE__ */ new Map());
+  const pendingRegistrationsRef = useRef(/* @__PURE__ */ new Set());
+  const debounceTimeoutRef = useRef(null);
+  const shouldRegister = useCallback(
+    (element) => {
+      if (!includeHidden && !isElementVisible2(element)) {
+        return false;
+      }
+      for (const selector of excludeSelectors) {
+        if (element.matches(selector)) {
+          return false;
+        }
+      }
+      if (registeredElementsRef.current.has(element)) {
+        return false;
+      }
+      const allSelectors = [...INTERACTIVE_SELECTORS2, ...includeSelectors];
+      for (const selector of allSelectors) {
+        if (element.matches(selector)) {
+          return true;
+        }
+      }
+      return false;
+    },
+    [includeHidden, includeSelectors, excludeSelectors]
+  );
+  const registerElement = useCallback(
+    (element) => {
+      if (!bridge?.registry || registeredElementsRef.current.has(element)) {
+        return;
+      }
+      const id = generateIdForElement(element, idStrategy, customGenerateId);
+      const existing = bridge.registry.getElement(id);
+      if (existing) {
+        const uniqueId = `${id}-${Date.now().toString(36)}`;
+        const type = inferElementType2(element);
+        const actions = inferActions2(type);
+        const label = getAccessibleLabel(element);
+        bridge.registry.registerElement(uniqueId, element, {
+          type,
+          actions,
+          label
+        });
+        registeredElementsRef.current.set(element, uniqueId);
+        onRegister?.(uniqueId, element);
+      } else {
+        const type = inferElementType2(element);
+        const actions = inferActions2(type);
+        const label = getAccessibleLabel(element);
+        bridge.registry.registerElement(id, element, {
+          type,
+          actions,
+          label
+        });
+        registeredElementsRef.current.set(element, id);
+        onRegister?.(id, element);
+      }
+    },
+    [bridge, idStrategy, customGenerateId, onRegister]
+  );
+  const unregisterElement = useCallback(
+    (element) => {
+      const id = registeredElementsRef.current.get(element);
+      if (!id || !bridge?.registry) return;
+      bridge.registry.unregisterElement(id);
+      registeredElementsRef.current.delete(element);
+      onUnregister?.(id);
+    },
+    [bridge, onUnregister]
+  );
+  const processPendingRegistrations = useCallback(() => {
+    pendingRegistrationsRef.current.forEach((element) => {
+      if (shouldRegister(element)) {
+        registerElement(element);
+      }
+    });
+    pendingRegistrationsRef.current.clear();
+  }, [shouldRegister, registerElement]);
+  const queueRegistration = useCallback(
+    (element) => {
+      pendingRegistrationsRef.current.add(element);
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+      debounceTimeoutRef.current = setTimeout(processPendingRegistrations, debounceMs);
+    },
+    [debounceMs, processPendingRegistrations]
+  );
+  const scanAndRegister = useCallback(
+    (rootElement) => {
+      const allSelectors = [...INTERACTIVE_SELECTORS2, ...includeSelectors].join(", ");
+      const elements = rootElement.querySelectorAll(allSelectors);
+      elements.forEach((element) => {
+        if (shouldRegister(element)) {
+          queueRegistration(element);
+        }
+      });
+    },
+    [includeSelectors, shouldRegister, queueRegistration]
+  );
+  const handleMutations = useCallback(
+    (mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node;
+            if (shouldRegister(element)) {
+              queueRegistration(element);
+            }
+            const allSelectors = [...INTERACTIVE_SELECTORS2, ...includeSelectors].join(", ");
+            const descendants = element.querySelectorAll(allSelectors);
+            descendants.forEach((descendant) => {
+              if (shouldRegister(descendant)) {
+                queueRegistration(descendant);
+              }
+            });
+          }
+        });
+        mutation.removedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node;
+            if (registeredElementsRef.current.has(element)) {
+              unregisterElement(element);
+            }
+            const descendants = element.querySelectorAll("*");
+            descendants.forEach((descendant) => {
+              if (registeredElementsRef.current.has(descendant)) {
+                unregisterElement(descendant);
+              }
+            });
+          }
+        });
+      });
+    },
+    [shouldRegister, queueRegistration, unregisterElement, includeSelectors]
+  );
+  useEffect(() => {
+    if (!enabled || !bridge?.registry) return;
+    const rootElement = root || document.body;
+    scanAndRegister(rootElement);
+    const observer = new MutationObserver(handleMutations);
+    observer.observe(rootElement, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+      registeredElementsRef.current.forEach((id, _element) => {
+        bridge.registry.unregisterElement(id);
+      });
+      registeredElementsRef.current.clear();
+    };
+  }, [enabled, bridge, root, scanAndRegister, handleMutations]);
+}
+function AutoRegisterProvider({
+  children,
+  scopeToChildren = false,
+  enabled = process.env.NODE_ENV === "development",
+  idStrategy = "prefer-existing",
+  debounceMs = 100,
+  includeHidden = false,
+  includeSelectors = [],
+  excludeSelectors = [],
+  generateId: generateId4,
+  onRegister,
+  onUnregister
+}) {
+  const containerRef = useRef(null);
+  useAutoRegister({
+    enabled,
+    root: scopeToChildren ? containerRef.current : null,
+    idStrategy,
+    debounceMs,
+    includeHidden,
+    includeSelectors,
+    excludeSelectors,
+    generateId: generateId4,
+    onRegister,
+    onUnregister
+  });
+  if (scopeToChildren) {
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { display: "contents" }, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+var overlayStyles = {
+  position: "fixed",
+  pointerEvents: "none",
+  zIndex: 999999,
+  border: "2px solid #3b82f6",
+  backgroundColor: "rgba(59, 130, 246, 0.1)",
+  transition: "all 0.1s ease-out"
+};
+var labelStyles = {
+  position: "absolute",
+  top: "-24px",
+  left: "0",
+  padding: "2px 8px",
+  backgroundColor: "#3b82f6",
+  color: "white",
+  fontSize: "12px",
+  fontFamily: "monospace",
+  whiteSpace: "nowrap",
+  borderRadius: "4px 4px 0 0"
+};
+var panelStyles = {
+  position: "fixed",
+  bottom: "20px",
+  right: "20px",
+  width: "400px",
+  maxHeight: "500px",
+  overflow: "auto",
+  backgroundColor: "#1f2937",
+  color: "#f3f4f6",
+  borderRadius: "8px",
+  boxShadow: "0 4px 20px rgba(0, 0, 0, 0.3)",
+  fontFamily: "monospace",
+  fontSize: "12px",
+  zIndex: 999998
+};
+var headerStyles = {
+  padding: "12px 16px",
+  backgroundColor: "#111827",
+  borderBottom: "1px solid #374151",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderRadius: "8px 8px 0 0"
+};
+var sectionStyles = {
+  padding: "12px 16px",
+  borderBottom: "1px solid #374151"
+};
+var labelKeyStyles = {
+  color: "#9ca3af",
+  marginRight: "8px"
+};
+var valueStyles = {
+  color: "#60a5fa"
+};
+function getElementState4(element) {
+  const rect = element.getBoundingClientRect();
+  const style = window.getComputedStyle(element);
+  const state = {
+    visible: rect.width > 0 && rect.height > 0 && style.display !== "none",
+    enabled: !("disabled" in element && element.disabled),
+    focused: document.activeElement === element,
+    rect: {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left
+    },
+    computedStyles: {
+      display: style.display,
+      visibility: style.visibility,
+      opacity: style.opacity,
+      pointerEvents: style.pointerEvents
+    }
+  };
+  if (element instanceof HTMLInputElement) {
+    state.value = element.value;
+    if (element.type === "checkbox" || element.type === "radio") {
+      state.checked = element.checked;
+    }
+  }
+  return state;
+}
+function InspectorOverlay({ bounds, label }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        ...overlayStyles,
+        left: bounds.left + window.scrollX,
+        top: bounds.top + window.scrollY,
+        width: bounds.width,
+        height: bounds.height
+      },
+      children: /* @__PURE__ */ jsx("span", { style: labelStyles, children: label })
+    }
+  );
+}
+function InfoPanel({ element, onClose, registeredElement }) {
+  if (!element) return null;
+  const identifier = createElementIdentifier(element);
+  const state = getElementState4(element);
+  const bestId = getBestIdentifier(element);
+  return /* @__PURE__ */ jsxs("div", { style: panelStyles, children: [
+    /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontWeight: "bold", color: "#60a5fa" }, children: "UI Bridge Inspector" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          style: {
+            background: "none",
+            border: "none",
+            color: "#9ca3af",
+            cursor: "pointer",
+            fontSize: "16px"
+          },
+          children: "\xD7"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: sectionStyles, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Element" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Tag:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: element.tagName.toLowerCase() })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Best ID:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: bestId })
+      ] }),
+      identifier.uiId && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "data-ui-id:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.uiId })
+      ] }),
+      identifier.testId && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "data-testid:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.testId })
+      ] }),
+      identifier.htmlId && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "id:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.htmlId })
+      ] }),
+      registeredElement && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Registered:" }),
+        /* @__PURE__ */ jsxs("span", { style: { color: "#10b981" }, children: [
+          "Yes (",
+          registeredElement.type,
+          ")"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: sectionStyles, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "State" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Visible:" }),
+        /* @__PURE__ */ jsx("span", { style: { color: state.visible ? "#10b981" : "#ef4444" }, children: state.visible ? "Yes" : "No" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Enabled:" }),
+        /* @__PURE__ */ jsx("span", { style: { color: state.enabled ? "#10b981" : "#ef4444" }, children: state.enabled ? "Yes" : "No" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Focused:" }),
+        /* @__PURE__ */ jsx("span", { style: { color: state.focused ? "#10b981" : "#9ca3af" }, children: state.focused ? "Yes" : "No" })
+      ] }),
+      state.value !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Value:" }),
+        /* @__PURE__ */ jsxs("span", { style: valueStyles, children: [
+          '"',
+          state.value,
+          '"'
+        ] })
+      ] }),
+      state.checked !== void 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Checked:" }),
+        /* @__PURE__ */ jsx("span", { style: { color: state.checked ? "#10b981" : "#9ca3af" }, children: state.checked ? "Yes" : "No" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: sectionStyles, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Bounds" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Position:" }),
+        /* @__PURE__ */ jsxs("span", { style: valueStyles, children: [
+          "(",
+          Math.round(state.rect.x),
+          ", ",
+          Math.round(state.rect.y),
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "Size:" }),
+        /* @__PURE__ */ jsxs("span", { style: valueStyles, children: [
+          Math.round(state.rect.width),
+          " \xD7 ",
+          Math.round(state.rect.height)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { ...sectionStyles, borderBottom: "none" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Selectors" }),
+      /* @__PURE__ */ jsxs("div", { style: { wordBreak: "break-all", marginBottom: "4px" }, children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "CSS:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.selector })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { wordBreak: "break-all" }, children: [
+        /* @__PURE__ */ jsx("span", { style: labelKeyStyles, children: "XPath:" }),
+        /* @__PURE__ */ jsx("span", { style: valueStyles, children: identifier.xpath })
+      ] })
+    ] }),
+    registeredElement && registeredElement.actions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { ...sectionStyles, borderBottom: "none" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px", fontWeight: "bold", color: "#f3f4f6" }, children: "Actions" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: registeredElement.actions.map((action) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            padding: "2px 8px",
+            backgroundColor: "#374151",
+            borderRadius: "4px",
+            color: "#60a5fa"
+          },
+          children: action
+        },
+        action
+      )) })
+    ] })
+  ] });
+}
+function useInspector(options = {}) {
+  const [active, setActive] = useState(false);
+  const [hoveredElement, setHoveredElement] = useState(null);
+  const [selectedElement, setSelectedElement] = useState(null);
+  const shortcut = useMemo(
+    () => options.shortcut ?? { key: "i", ctrl: true, shift: true },
+    [options.shortcut]
+  );
+  const toggle = useCallback(() => {
+    setActive((prev) => !prev);
+    if (active) {
+      setHoveredElement(null);
+      setSelectedElement(null);
+    }
+  }, [active]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key.toLowerCase() === shortcut.key && e.ctrlKey === !!shortcut.ctrl && e.shiftKey === !!shortcut.shift && e.altKey === !!shortcut.alt) {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggle, shortcut]);
+  useEffect(() => {
+    if (!active) return;
+    const handleMouseOver = (e) => {
+      const target = e.target;
+      if (target && target !== hoveredElement) {
+        setHoveredElement(target);
+      }
+    };
+    const handleClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.target;
+      setSelectedElement(target);
+      options.onSelect?.(target);
+    };
+    document.addEventListener("mouseover", handleMouseOver, true);
+    document.addEventListener("click", handleClick, true);
+    return () => {
+      document.removeEventListener("mouseover", handleMouseOver, true);
+      document.removeEventListener("click", handleClick, true);
+    };
+  }, [active, hoveredElement, options]);
+  const displayElement = selectedElement || hoveredElement;
+  const bounds = displayElement?.getBoundingClientRect() || null;
+  const registeredElement = displayElement ? options.getRegisteredElement?.(displayElement) : void 0;
+  return {
+    active,
+    toggle,
+    hoveredElement,
+    selectedElement,
+    setSelectedElement,
+    displayElement,
+    bounds,
+    registeredElement,
+    clearSelection: () => {
+      setSelectedElement(null);
+    }
+  };
+}
+function Inspector({ getRegisteredElement, initialActive }) {
+  const inspector = useInspector({
+    getRegisteredElement
+  });
+  useEffect(() => {
+    if (initialActive && !inspector.active) {
+      inspector.toggle();
+    }
+  }, [initialActive]);
+  if (!inspector.active) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    inspector.bounds && /* @__PURE__ */ jsx(
+      InspectorOverlay,
+      {
+        bounds: inspector.bounds,
+        label: inspector.displayElement ? getBestIdentifier(inspector.displayElement) : ""
+      }
+    ),
+    inspector.selectedElement && /* @__PURE__ */ jsx(
+      InfoPanel,
+      {
+        element: inspector.selectedElement,
+        onClose: inspector.clearSelection,
+        registeredElement: inspector.registeredElement
+      }
+    )
+  ] });
+}
+
+export { AutoRegisterProvider, DOMChangeObserver, DefaultActionExecutor, DefaultWorkflowEngine, ID_ATTRIBUTES, InMemoryRenderLogStorage, InfoPanel, Inspector, InspectorOverlay, MetricsCollector, RenderLogManager, UIBridgeProvider, UIBridgeRegistry, UIBridgeWSClient, captureDOMSnapshot, captureInteractiveElements, createActionExecutor, createElementIdentifier, createMetricsCollector, createRenderLogManager, createWSClient, createWorkflowEngine, elementMatchesIdentifier, findAllElementsByIdentifier, findElementByIdentifier, formatDuration, formatPercentage, generateCSSSelector, generateXPath, getBestIdentifier, getGlobalRegistry, resetGlobalRegistry, setGlobalRegistry, useActiveStates, useAutoRegister, useAvailableTransitions, useCanNavigateTo, useInspector, useNavigationPath, useStateSnapshot, useTransitions, useUIBridge, useUIBridgeContext, useUIBridgeOptional, useUIBridgeRequired, useUIComponent, useUIComponentAction, useUIElement, useUIElementRef, useUINavigation, useUIState, useUIStateGroup, useUITransition };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map