@qontinui/ui-bridge 0.3.0 → 0.3.1

package/dist/control/index.js

@@ -105,6 +105,10 @@ function getElementState(element) {
       pointerEvents: style.pointerEvents
     }
   };
+  const rawText = element.textContent?.trim();
+  if (rawText) {
+    state.textContent = rawText.replace(/\s+/g, " ").slice(0, 500);
+  }
   if (element instanceof HTMLInputElement) {
     state.value = element.value;
     if (element.type === "checkbox" || element.type === "radio") {
@@ -146,9 +150,25 @@ function createMouseEvent(type, element, options) {
     clientY: rect.top + y
   });
 }
+function elementFromPointSafe(x, y) {
+  if (typeof document.elementFromPoint === "function") {
+    return document.elementFromPoint(x, y);
+  }
+  return null;
+}
+function createMouseEventAt(type, clientX, clientY) {
+  return new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    button: 0,
+    clientX,
+    clientY
+  });
+}
 var DefaultActionExecutor = class {
-  constructor(registry) {
+  constructor(registry, consoleCapture) {
     this.registry = registry;
+    this.consoleCapture = consoleCapture;
   }
   /**
    * Execute an action on an element
@@ -185,11 +205,19 @@ var DefaultActionExecutor = class {
           };
         }
       }
+      const actionStartTime = Date.now();
       const result = await this.performAction(element, request.action, request.params);
+      let consoleErrors;
+      if (this.consoleCapture) {
+        await sleep(50);
+        const errors = this.consoleCapture.getConsoleSince(actionStartTime);
+        if (errors.length > 0) consoleErrors = errors;
+      }
       return {
         success: true,
         elementState: getElementState(element),
         result,
+        consoleErrors,
         durationMs: performance.now() - startTime,
         timestamp: Date.now(),
         requestId: request.requestId,
@@ -281,47 +309,76 @@ var DefaultActionExecutor = class {
       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 = getElementState(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
-      });
+    if (!options?.contentOnly) {
+      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-element]",
+        "[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 = getElementState(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,
+          category: registered?.category || "interactive",
+          contentMetadata: registered?.contentMetadata
+        });
+      }
+    }
+    if (options?.includeContent || options?.contentOnly) {
+      const contentElements = this.registry.getAllContentElements();
+      for (const el of contentElements) {
+        if (options?.limit && elements.length >= options.limit) break;
+        const state = el.getState();
+        if (!options?.includeHidden && !state.visible) continue;
+        if (options?.contentRole && el.contentMetadata?.contentRole !== options.contentRole) {
+          continue;
+        }
+        elements.push({
+          id: el.id,
+          type: el.type,
+          label: el.label,
+          tagName: el.element.tagName.toLowerCase(),
+          role: el.element.getAttribute("role") || void 0,
+          accessibleName: el.label || state.textContent?.trim(),
+          actions: [],
+          state,
+          registered: true,
+          category: "content",
+          contentMetadata: el.contentMetadata
+        });
+      }
     }
     return {
       elements,
@@ -351,7 +408,9 @@ var DefaultActionExecutor = class {
         type: el.type,
         label: el.label,
         actions: [...el.actions, ...el.customActions ? Object.keys(el.customActions) : []],
-        state: el.getState()
+        state: el.getState(),
+        category: el.category,
+        contentMetadata: el.contentMetadata
       })),
       components: components.map((comp) => ({
         id: comp.id,
@@ -435,6 +494,14 @@ var DefaultActionExecutor = class {
         return this.performCheck(element, false);
       case "toggle":
         return this.performToggle(element);
+      case "drag":
+        return this.performDrag(element, params);
+      case "setValue":
+        return this.performSetValue(element, params);
+      case "submit":
+        return this.performSubmit(element);
+      case "reset":
+        return this.performReset(element);
       default: {
         const registered = this.registry.findByDOMElement(element);
         if (registered?.customActions?.[action]) {
@@ -464,15 +531,26 @@ var DefaultActionExecutor = class {
     if (!(element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
       throw new Error("Type action requires an input or textarea element");
     }
+    const proto = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+    const nativeSetter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
     element.focus();
     if (options?.clear) {
-      element.value = "";
+      if (nativeSetter) {
+        nativeSetter.call(element, "");
+      } else {
+        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;
+      const current = element.value;
+      if (nativeSetter) {
+        nativeSetter.call(element, current + char);
+      } else {
+        element.value = current + char;
+      }
       if (options?.triggerEvents !== false) {
         element.dispatchEvent(new Event("input", { bubbles: true }));
       }
@@ -486,7 +564,13 @@ var DefaultActionExecutor = class {
   }
   performClear(element) {
     if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
-      element.value = "";
+      const proto = element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+      const nativeSetter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
+      if (nativeSetter) {
+        nativeSetter.call(element, "");
+      } else {
+        element.value = "";
+      }
       element.dispatchEvent(new Event("input", { bubbles: true }));
       element.dispatchEvent(new Event("change", { bubbles: true }));
     }
@@ -568,6 +652,150 @@ var DefaultActionExecutor = class {
       element.dispatchEvent(new Event("change", { bubbles: true }));
     }
   }
+  performSetValue(element, params) {
+    const value = params?.value;
+    if (value === void 0) {
+      throw new Error('setValue requires a "value" parameter');
+    }
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+      const nativeSetter = Object.getOwnPropertyDescriptor(
+        element instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype,
+        "value"
+      )?.set;
+      if (nativeSetter) {
+        nativeSetter.call(element, value);
+      } else {
+        element.value = value;
+      }
+      element.dispatchEvent(new Event("input", { bubbles: true }));
+      element.dispatchEvent(new Event("change", { bubbles: true }));
+    } else if (element instanceof HTMLSelectElement) {
+      element.value = value;
+      element.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+  performSubmit(element) {
+    const form = element instanceof HTMLFormElement ? element : element.closest("form");
+    if (form) {
+      const submitEvent = new Event("submit", { bubbles: true, cancelable: true });
+      if (form.dispatchEvent(submitEvent)) {
+        form.requestSubmit();
+      }
+    } else {
+      throw new Error("No form found for submit action");
+    }
+  }
+  performReset(element) {
+    const form = element instanceof HTMLFormElement ? element : element.closest("form");
+    if (form) {
+      form.reset();
+      form.dispatchEvent(new Event("reset", { bubbles: true }));
+    } else {
+      throw new Error("No form found for reset action");
+    }
+  }
+  /**
+   * Perform a drag operation by dispatching a sequence of mouse events.
+   *
+   * Follows the same composite pattern as the qontinui core library:
+   * mousedown on source → wait → mousemove × N along path → mouseup on target.
+   *
+   * Optionally dispatches HTML5 drag events (dragstart/dragover/drop/dragend)
+   * for apps that use the HTML5 Drag and Drop API instead of mouse events.
+   */
+  async performDrag(sourceElement, options) {
+    const sourceRect = sourceElement.getBoundingClientRect();
+    const sourceX = sourceRect.left + (options?.sourceOffset?.x ?? sourceRect.width / 2);
+    const sourceY = sourceRect.top + (options?.sourceOffset?.y ?? sourceRect.height / 2);
+    let targetX;
+    let targetY;
+    if (options?.targetPosition) {
+      targetX = options.targetPosition.x;
+      targetY = options.targetPosition.y;
+    } else if (options?.target) {
+      const targetElement = this.resolveTargetElement(options.target);
+      if (!targetElement) {
+        throw new Error(`Drag target element not found: ${JSON.stringify(options.target)}`);
+      }
+      const targetRect = targetElement.getBoundingClientRect();
+      targetX = targetRect.left + (options?.targetOffset?.x ?? targetRect.width / 2);
+      targetY = targetRect.top + (options?.targetOffset?.y ?? targetRect.height / 2);
+    } else {
+      throw new Error("Drag requires either target or targetPosition");
+    }
+    const steps = options?.steps ?? 10;
+    const holdDelay = options?.holdDelay ?? 100;
+    const releaseDelay = options?.releaseDelay ?? 50;
+    sourceElement.dispatchEvent(createMouseEventAt("mousedown", sourceX, sourceY));
+    const canHTML5 = options?.html5 && typeof DragEvent !== "undefined";
+    if (canHTML5) {
+      sourceElement.dispatchEvent(
+        new DragEvent("dragstart", {
+          bubbles: true,
+          cancelable: true,
+          clientX: sourceX,
+          clientY: sourceY
+        })
+      );
+    }
+    if (holdDelay > 0) {
+      await sleep(holdDelay);
+    }
+    for (let i = 1; i <= steps; i++) {
+      const progress = i / steps;
+      const currentX = sourceX + (targetX - sourceX) * progress;
+      const currentY = sourceY + (targetY - sourceY) * progress;
+      const dispatchTarget = elementFromPointSafe(currentX, currentY) || sourceElement;
+      dispatchTarget.dispatchEvent(createMouseEventAt("mousemove", currentX, currentY));
+      if (canHTML5) {
+        dispatchTarget.dispatchEvent(
+          new DragEvent("dragover", {
+            bubbles: true,
+            cancelable: true,
+            clientX: currentX,
+            clientY: currentY
+          })
+        );
+      }
+    }
+    const dropTarget = elementFromPointSafe(targetX, targetY) || sourceElement;
+    dropTarget.dispatchEvent(createMouseEventAt("mouseup", targetX, targetY));
+    if (canHTML5) {
+      dropTarget.dispatchEvent(
+        new DragEvent("drop", {
+          bubbles: true,
+          cancelable: true,
+          clientX: targetX,
+          clientY: targetY
+        })
+      );
+      sourceElement.dispatchEvent(
+        new DragEvent("dragend", {
+          bubbles: true,
+          cancelable: true,
+          clientX: targetX,
+          clientY: targetY
+        })
+      );
+    }
+    if (releaseDelay > 0) {
+      await sleep(releaseDelay);
+    }
+  }
+  /**
+   * Resolve a drag target element from a target descriptor.
+   */
+  resolveTargetElement(target) {
+    if (target.elementId) {
+      const registered = this.registry.getElement(target.elementId);
+      if (registered?.element) return registered.element;
+      return findElementByIdentifier(target.elementId);
+    }
+    if (target.selector) {
+      return document.querySelector(target.selector);
+    }
+    return null;
+  }
   getElementId(element) {
     return element.getAttribute("data-ui-id") || element.getAttribute("data-testid") || element.id || `${element.tagName.toLowerCase()}-${Math.random().toString(36).substr(2, 8)}`;
   }
@@ -663,8 +891,8 @@ var DefaultActionExecutor = class {
     }
   }
 };
-function createActionExecutor(registry) {
-  return new DefaultActionExecutor(registry);
+function createActionExecutor(registry, consoleCapture) {
+  return new DefaultActionExecutor(registry, consoleCapture);
 }
 
 // src/control/workflow-engine.ts