donobu 1.0.0

package/dist/assets/clickable-elements-tracker.js

@@ -0,0 +1,62 @@
+(() => {
+  const clickableElements = new Set();
+  const originalAddEventListener = EventTarget.prototype.addEventListener;
+  const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+
+  const pointerEvents = [
+    'click',
+    'mousedown',
+    'pointerdown',
+    'mouseup',
+    'pointerup',
+    'touchstart',
+  ];
+
+  // Helper function to check if an element is in shadow DOM
+  const isInShadowDOM = (element) => {
+    return element.getRootNode() instanceof ShadowRoot;
+  };
+
+  EventTarget.prototype.addEventListener = function (type, listener, options) {
+    if (pointerEvents.includes(type) && this !== window && this !== document) {
+      clickableElements.add(this);
+      // If this element is in shadow DOM, we need to ensure it's accessible
+      if (isInShadowDOM(this)) {
+        const shadowRoot = this.getRootNode();
+        if (shadowRoot.host) {
+          clickableElements.add(shadowRoot.host); // Add the shadow host as well
+        }
+      }
+    }
+    return originalAddEventListener.call(this, type, listener, options);
+  };
+
+  EventTarget.prototype.removeEventListener = function (
+    type,
+    listener,
+    options,
+  ) {
+    if (pointerEvents.includes(type) && this !== window && this !== document) {
+      clickableElements.delete(this);
+    }
+    return originalRemoveEventListener.call(this, type, listener, options);
+  };
+
+  // Modified to also return elements from shadow DOM
+  window.donobuGetClickableElements = () => {
+    const allClickableElements = [];
+    clickableElements.forEach((element) => {
+      allClickableElements.push(element);
+      // If element is a shadow host, get clickable elements from its shadow root
+      if (element.shadowRoot) {
+        const shadowElements = element.shadowRoot.querySelectorAll('*');
+        shadowElements.forEach((shadowEl) => {
+          if (clickableElements.has(shadowEl)) {
+            allClickableElements.push(shadowEl);
+          }
+        });
+      }
+    });
+    return allClickableElements;
+  };
+})();

package/dist/assets/control-panel.js

@@ -0,0 +1,447 @@
+(() => {
+  /**
+   * Wait until document.body is available, then call `init()`.
+   */
+  function waitForBody(init) {
+    if (document.body) {
+      init();
+    } else {
+      document.addEventListener('DOMContentLoaded', init, { once: true });
+    }
+  }
+
+  /**
+   * Build an SVG icon via DOM APIs (to avoid TrustedHTML issues).
+   */
+  function buildSvgIcon(opts) {
+    const ns = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(ns, 'svg');
+    for (const [attr, val] of Object.entries(opts.svgAttrs || {})) {
+      svg.setAttribute(attr, val);
+    }
+    // Add child elements (circle, polygon, line, etc.)
+    for (const childSpec of opts.children || []) {
+      const child = document.createElementNS(ns, childSpec.tag);
+      for (const [attr, val] of Object.entries(childSpec.attrs || {})) {
+        child.setAttribute(attr, val);
+      }
+      svg.appendChild(child);
+    }
+    return svg;
+  }
+
+  /**
+   * Main setup logic for the control panel.
+   */
+  function createControlPanel() {
+    // Only create if not already in DOM.
+    const existingHost = document.getElementById('donobu-control-panel');
+    if (existingHost) return existingHost;
+
+    // Host element
+    const hostEl = document.createElement('div');
+    hostEl.id = 'donobu-control-panel';
+
+    document.body.appendChild(hostEl);
+
+    // Shadow root
+    const shadow = hostEl.attachShadow({ mode: 'open' });
+
+    // Global styles
+    const styleEl = document.createElement('style');
+    styleEl.textContent = `
+      :host {
+        all: initial;
+        position: fixed;
+        top: 150px;
+        right: 20px;
+        z-index: 2147483647;
+        width: 300px;
+      }
+
+      #panel-content,
+      #panel-content * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+        font-family: Helvetica, Arial, sans-serif;
+        font-size: 14px;
+        color: #fff !important;
+      }
+
+      #donobu-control-panel-title-text {
+        font-weight: 600 !important;
+        margin-left: 10px;
+      }
+
+      #panel-content input[type="text"] {
+        border: 1px solid #ddd !important;
+        background-color: #fff !important;
+        color: #000 !important;
+      }
+
+      #donobu-play-icon,
+      #donobu-pause-icon,
+      #donobu-end-icon {
+        fill: none !important;
+        stroke: currentColor !important;
+        stroke-width: 2 !important;
+        stroke-linecap: round !important;
+        stroke-linejoin: round !important;
+      }
+
+      #donobu-control-panel-display-area {
+        color: #fff !important;
+        margin-top: 10px;
+      }
+
+      #panel-content {
+        background-color: rgba(6,8,7,0.9);
+        border: 3px solid rgba(251,188,5, 0.9);
+        border-radius: 8px;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.8);
+        transition: height 0.3s ease;
+        cursor: move;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #donobu-control-panel-expandable-content {
+        display: none;
+        padding: 15px;
+        max-height: 300px;
+        overflow-y: auto;
+      }
+
+      .navbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 15px;
+        font-weight: 600;
+        background-color: rgba(6,8,7,0.9);
+        border-bottom: 1px solid rgba(251,188,5, 0.5);
+      }
+
+      .icon-btn {
+        margin-right: 8px;
+        display: flex;
+        cursor: pointer;
+        opacity: 0.5;
+      }
+
+      #donobu-instructions-input {
+        width: 100%;
+        margin-bottom: 10px;
+        padding: 8px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+      }
+
+      .icon-container {
+        display: flex;
+        align-items: center;
+        margin-right: 5px;
+      }
+    `;
+    shadow.appendChild(styleEl);
+
+    // Main panel container
+    const panelContent = document.createElement('div');
+    panelContent.id = 'panel-content';
+
+    // Navbar
+    const navbar = document.createElement('div');
+    navbar.className = 'navbar';
+
+    // Title container
+    const titleContainer = document.createElement('div');
+    Object.assign(titleContainer.style, {
+      display: 'flex',
+      alignItems: 'center',
+    });
+
+    // Icon container
+    const iconContainer = document.createElement('div');
+    iconContainer.className = 'icon-container';
+
+    // Build the actual SVG DOM nodes:
+    const playIcon = buildSvgIcon({
+      svgAttrs: {
+        id: 'donobu-play-icon',
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+      },
+      children: [
+        { tag: 'circle', attrs: { cx: '12', cy: '12', r: '10' } },
+        { tag: 'polygon', attrs: { points: '10 8 16 12 10 16 10 8' } },
+      ],
+    });
+
+    const pauseIcon = buildSvgIcon({
+      svgAttrs: {
+        id: 'donobu-pause-icon',
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+      },
+      children: [
+        { tag: 'circle', attrs: { cx: '12', cy: '12', r: '10' } },
+        { tag: 'line', attrs: { x1: '10', y1: '15', x2: '10', y2: '9' } },
+        { tag: 'line', attrs: { x1: '14', y1: '15', x2: '14', y2: '9' } },
+      ],
+    });
+
+    const endIcon = buildSvgIcon({
+      svgAttrs: {
+        id: 'donobu-end-icon',
+        width: '24',
+        height: '24',
+        viewBox: '0 0 24 24',
+      },
+      children: [
+        { tag: 'circle', attrs: { cx: '12', cy: '12', r: '10' } },
+        { tag: 'rect', attrs: { x: '9', y: '9', width: '6', height: '6' } },
+      ],
+    });
+
+    // Helper to create an icon button
+    function createIconBtn(id, svgEl) {
+      const btn = document.createElement('span');
+      btn.id = id;
+      btn.className = 'icon-btn';
+      btn.appendChild(svgEl);
+      return btn;
+    }
+
+    // Create the 3 icon buttons
+    const playButton = createIconBtn('donobu-play', playIcon);
+    const pauseButton = createIconBtn('donobu-pause', pauseIcon);
+    const endButton = createIconBtn('donobu-end', endIcon);
+
+    iconContainer.appendChild(playButton);
+    iconContainer.appendChild(pauseButton);
+    iconContainer.appendChild(endButton);
+
+    // Title text
+    const titleText = document.createElement('span');
+    titleText.id = 'donobu-control-panel-title-text';
+    titleText.textContent = 'Loading...';
+
+    // Assemble navbar
+    titleContainer.appendChild(iconContainer);
+    titleContainer.appendChild(titleText);
+    navbar.appendChild(titleContainer);
+
+    // Expandable content
+    const expandableContent = document.createElement('div');
+    expandableContent.id = 'donobu-control-panel-expandable-content';
+
+    const instructionsInput = document.createElement('input');
+    instructionsInput.type = 'text';
+    instructionsInput.id = 'donobu-instructions-input';
+    instructionsInput.placeholder = 'Additional instructions...';
+
+    const displayArea = document.createElement('div');
+    displayArea.id = 'donobu-control-panel-display-area';
+    displayArea.textContent = 'Popup: Monitoring...';
+
+    expandableContent.appendChild(instructionsInput);
+    expandableContent.appendChild(displayArea);
+
+    // Attach everything
+    panelContent.appendChild(navbar);
+    panelContent.appendChild(expandableContent);
+    shadow.appendChild(panelContent);
+
+    // Track panel flow state for the UI
+    hostEl.donobuFlowState = hostEl.donobuFlowState || 'LOADING';
+
+    // We also track "transitioning" states internally
+    let isTransitioningToPause = false;
+    let isTransitioningToEnd = false;
+
+    function setButtonState(btn, active) {
+      btn.style.opacity = active ? '1' : '0.5';
+      btn.style.cursor = active ? 'pointer' : 'default';
+    }
+
+    function updateButtonStates() {
+      if (!document.contains(hostEl)) {
+        // If forcibly removed, re-append (optional).
+        document.body.appendChild(hostEl);
+      }
+
+      const currentState = hostEl.donobuFlowState;
+
+      if (isTransitioningToEnd) {
+        titleText.textContent = 'Ending...';
+        setButtonState(playButton, false);
+        setButtonState(pauseButton, false);
+        setButtonState(endButton, false);
+        return;
+      }
+
+      switch (currentState) {
+        case 'PAUSED':
+          titleText.textContent = 'Paused';
+          setButtonState(playButton, true);
+          setButtonState(pauseButton, false);
+          setButtonState(endButton, true);
+          isTransitioningToPause = false;
+          break;
+
+        case 'WAITING_ON_USER_FOR_NEXT_ACTION':
+          titleText.textContent = 'Waiting on user...';
+          setButtonState(playButton, false);
+          setButtonState(pauseButton, false);
+          setButtonState(endButton, true);
+          break;
+
+        case 'LOADING':
+          titleText.textContent = 'Loading...';
+          setButtonState(playButton, false);
+          setButtonState(pauseButton, false);
+          setButtonState(endButton, true);
+          break;
+
+        case 'SUCCESS':
+          titleText.textContent = 'Success!';
+          setButtonState(playButton, false);
+          setButtonState(pauseButton, false);
+          setButtonState(endButton, false);
+          break;
+
+        default:
+          // "Running" or any other custom state
+          if (isTransitioningToPause) {
+            titleText.textContent = 'Pausing...';
+            setButtonState(playButton, false);
+            setButtonState(pauseButton, false);
+            setButtonState(endButton, true);
+          } else {
+            titleText.textContent = 'Running';
+            setButtonState(playButton, false);
+            setButtonState(pauseButton, true);
+            setButtonState(endButton, true);
+          }
+          break;
+      }
+    }
+
+    // Interval for state updates
+    const stateInterval = setInterval(updateButtonStates, 500);
+
+    // --- Button event listeners ---
+
+    // PLAY button: signals user wants to resume from paused
+    playButton.addEventListener('click', () => {
+      if (hostEl.donobuFlowState === 'PAUSED' && !isTransitioningToEnd) {
+        // UI states
+        hostEl.donobuFlowState = 'RUNNING';
+        isTransitioningToPause = false;
+
+        // Expose next state so external script can pick it up
+        window.donobuNextState = 'RESUMING';
+
+        updateButtonStates();
+      }
+    });
+
+    // PAUSE button: signals user wants to pause
+    pauseButton.addEventListener('click', () => {
+      if (hostEl.donobuFlowState !== 'PAUSED' && !isTransitioningToEnd) {
+        hostEl.donobuFlowState = 'PAUSED';
+        isTransitioningToPause = true;
+
+        // Expose next state
+        window.donobuNextState = 'PAUSED';
+
+        updateButtonStates();
+      }
+    });
+
+    // END button: signals user wants to stop / end the flow
+    endButton.addEventListener('click', () => {
+      if (!isTransitioningToEnd) {
+        hostEl.donobuFlowState = 'SUCCESS';
+        isTransitioningToEnd = true;
+
+        // Expose next state
+        window.donobuNextState = 'SUCCESS';
+
+        updateButtonStates();
+      }
+    });
+
+    // --- Drag-and-drop logic ---
+    let isDragging = false;
+    let offsetX = 0;
+    let offsetY = 0;
+
+    function onDocumentMouseMove(e) {
+      if (isDragging) {
+        hostEl.style.left = `${e.clientX - offsetX}px`;
+        hostEl.style.top = `${e.clientY - offsetY}px`;
+        hostEl.style.right = 'auto';
+      }
+    }
+
+    function onDocumentMouseUp() {
+      isDragging = false;
+      panelContent.style.cursor = 'move';
+    }
+
+    // Start dragging if user clicks navbar area
+    shadow.addEventListener('mousedown', (e) => {
+      const target = e.target;
+      const isNavbar =
+        target.classList?.contains('navbar') ||
+        target.id === 'donobu-control-panel-title-text' ||
+        target.parentElement?.classList?.contains('navbar');
+
+      if (isNavbar) {
+        const rect = hostEl.getBoundingClientRect();
+        offsetX = e.clientX - rect.left;
+        offsetY = e.clientY - rect.top;
+        isDragging = true;
+        panelContent.style.cursor = 'grabbing';
+        e.preventDefault();
+      }
+    });
+
+    document.addEventListener('mousemove', onDocumentMouseMove);
+    document.addEventListener('mouseup', onDocumentMouseUp);
+
+    // Watch for attempts to remove the panel
+    const observer = new MutationObserver(() => {
+      if (!document.contains(hostEl)) {
+        document.body.appendChild(hostEl);
+      }
+    });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+    });
+
+    // Clean up on page unload
+    window.addEventListener('unload', () => {
+      clearInterval(stateInterval);
+      document.removeEventListener('mousemove', onDocumentMouseMove);
+      document.removeEventListener('mouseup', onDocumentMouseUp);
+      observer.disconnect();
+    });
+
+    return hostEl;
+  }
+
+  // Ensure body is ready before creation
+  waitForBody(() => {
+    try {
+      createControlPanel();
+    } catch (err) {
+      console.error('Control panel initialization error:', err);
+    }
+  });
+})();