@base44-preview/vite-plugin 0.2.22-pr.37.eb62313 → 0.2.22-pr.38.2655a87

package/dist/injections/visual-edit-agent/ui/overlay.js

@@ -1,104 +0,0 @@
-import { OVERLAY_TRANSITION, OVERLAY_Z_INDEX, SELECTED_BORDER_COLOR, HOVER_BORDER_COLOR, HOVER_BACKGROUND_COLOR, LABEL_TOP_OFFSET, LABEL_LEFT_OFFSET, } from "../constants.js";
-import { findElementsById } from "../../utils.js";
-/**
- * Create an overlay element for highlighting
- */
-export function createOverlay(isSelected = false) {
-    const overlay = document.createElement("div");
-    overlay.style.position = "absolute";
-    overlay.style.pointerEvents = "none";
-    overlay.style.transition = OVERLAY_TRANSITION;
-    overlay.style.zIndex = OVERLAY_Z_INDEX;
-    if (isSelected) {
-        overlay.style.border = `2px solid ${SELECTED_BORDER_COLOR}`;
-    }
-    else {
-        overlay.style.border = `2px solid ${HOVER_BORDER_COLOR}`;
-        overlay.style.backgroundColor = HOVER_BACKGROUND_COLOR;
-    }
-    return overlay;
-}
-/**
- * Position overlay relative to element
- */
-export function positionOverlay(overlay, element, isSelected = false, isVisualEditMode = true) {
-    if (!element || !isVisualEditMode)
-        return;
-    // Force layout recalculation before reading bounding rect
-    void element.offsetWidth;
-    const rect = element.getBoundingClientRect();
-    overlay.style.top = `${rect.top + window.scrollY}px`;
-    overlay.style.left = `${rect.left + window.scrollX}px`;
-    overlay.style.width = `${rect.width}px`;
-    overlay.style.height = `${rect.height}px`;
-    // Check if label already exists in overlay
-    let label = overlay.querySelector("div");
-    if (!label) {
-        label = document.createElement("div");
-        label.textContent = element.tagName.toLowerCase();
-        label.style.position = "absolute";
-        label.style.top = LABEL_TOP_OFFSET;
-        label.style.left = LABEL_LEFT_OFFSET;
-        label.style.padding = "2px 8px";
-        label.style.fontSize = "11px";
-        label.style.fontWeight = isSelected ? "500" : "400";
-        label.style.color = isSelected ? "#ffffff" : "#526cff";
-        label.style.backgroundColor = isSelected ? "#526cff" : "#DBEAFE";
-        label.style.borderRadius = "3px";
-        label.style.minWidth = "24px";
-        label.style.textAlign = "center";
-        overlay.appendChild(label);
-    }
-}
-/**
- * Clear all overlays from DOM
- */
-export function clearOverlays(overlays) {
-    overlays.forEach((overlay) => {
-        if (overlay && overlay.parentNode) {
-            overlay.remove();
-        }
-    });
-}
-/**
- * Remove data-selected attribute, clear selected overlays, and reset selection state
- */
-export function clearSelection(state) {
-    if (state.isInlineEditExperimentEnabled && state.selectedElementId) {
-        const elements = findElementsById(state.selectedElementId);
-        elements.forEach((el) => {
-            if (el instanceof HTMLElement) {
-                delete el.dataset.selected;
-            }
-        });
-    }
-    clearOverlays(state.selectedOverlays);
-    state.selectedOverlays = [];
-    state.selectedElementId = null;
-}
-/**
- * Reposition selected overlays to match current element bounds
- */
-export function repositionSelectedOverlays(state) {
-    if (!state.selectedElementId)
-        return;
-    const elements = findElementsById(state.selectedElementId);
-    state.selectedOverlays.forEach((overlay, index) => {
-        const element = elements[index];
-        if (element) {
-            positionOverlay(overlay, element, true, state.isVisualEditMode);
-        }
-    });
-}
-/**
- * Reposition hover overlays to match current element bounds
- */
-export function repositionHoverOverlays(state) {
-    state.hoverOverlays.forEach((overlay, index) => {
-        const element = state.currentHighlightedElements[index];
-        if (element) {
-            positionOverlay(overlay, element, false, state.isVisualEditMode);
-        }
-    });
-}
-//# sourceMappingURL=overlay.js.map

package/dist/injections/visual-edit-agent/ui/overlay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../../../../src/injections/visual-edit-agent/ui/overlay.ts"],"names":[],"mappings":"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"}

package/dist/injections/visual-edit-agent/utils/dom-utils.d.ts

@@ -1,14 +0,0 @@
-import type { ElementPosition } from "../handlers/messages/types.js";
-/**
- * Calculate element position from bounding rect
- */
-export declare function getElementPosition(rect: DOMRect): ElementPosition;
-/**
- * Check if element rect is in viewport
- */
-export declare function isElementInViewport(rect: DOMRect): boolean;
-/**
- * Get element classes (handles both HTML and SVG)
- */
-export declare function getElementClasses(element: Element): string;
-//# sourceMappingURL=dom-utils.d.ts.map

package/dist/injections/visual-edit-agent/utils/dom-utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom-utils.d.ts","sourceRoot":"","sources":["../../../../src/injections/visual-edit-agent/utils/dom-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAErE;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,GAAG,eAAe,CAWjE;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,GAAG,OAAO,CAO1D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAK1D"}

package/dist/injections/visual-edit-agent/utils/dom-utils.js

@@ -1,34 +0,0 @@
-/**
- * Calculate element position from bounding rect
- */
-export function getElementPosition(rect) {
-    return {
-        top: rect.top,
-        left: rect.left,
-        right: rect.right,
-        bottom: rect.bottom,
-        width: rect.width,
-        height: rect.height,
-        centerX: rect.left + rect.width / 2,
-        centerY: rect.top + rect.height / 2,
-    };
-}
-/**
- * Check if element rect is in viewport
- */
-export function isElementInViewport(rect) {
-    return (rect.top < window.innerHeight &&
-        rect.bottom > 0 &&
-        rect.left < window.innerWidth &&
-        rect.right > 0);
-}
-/**
- * Get element classes (handles both HTML and SVG)
- */
-export function getElementClasses(element) {
-    if (element instanceof SVGElement) {
-        return element.className?.baseVal || "";
-    }
-    return element.className || "";
-}
-//# sourceMappingURL=dom-utils.js.map

package/dist/injections/visual-edit-agent/utils/dom-utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dom-utils.js","sourceRoot":"","sources":["../../../../src/injections/visual-edit-agent/utils/dom-utils.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAa;IAC9C,OAAO;QACL,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC;QACnC,OAAO,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;KACpC,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,mBAAmB,CAAC,IAAa;IAC/C,OAAO,CACL,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,WAAW;QAC7B,IAAI,CAAC,MAAM,GAAG,CAAC;QACf,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,UAAU;QAC7B,IAAI,CAAC,KAAK,GAAG,CAAC,CACf,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,OAAgB;IAChD,IAAI,OAAO,YAAY,UAAU,EAAE,CAAC;QAClC,OAAQ,OAAO,CAAC,SAA0C,EAAE,OAAO,IAAI,EAAE,CAAC;IAC5E,CAAC;IACD,OAAO,OAAO,CAAC,SAAS,IAAI,EAAE,CAAC;AACjC,CAAC"}

package/src/injections/visual-edit-agent/README.md

@@ -1,222 +0,0 @@
-# Visual Edit Agent - Modular Architecture
-
-The visual edit agent has been refactored into a clean, modular structure with proper separation of concerns.
-
-## Directory Structure
-
-```
-src/injections/visual-edit-agent/
-├── index.ts                           # Main entry point & setup orchestration
-├── constants.ts                       # Shared constants
-├── state/
-│   └── agent-state.ts                # Centralized state management
-├── ui/
-│   └── overlay.ts                    # Overlay creation, positioning & selection helpers
-├── utils/
-│   └── dom-utils.ts                  # DOM helpers (position, viewport, classes)
-├── handlers/
-│   ├── hover-handlers.ts             # Mouse hover interactions
-│   ├── click-handlers.ts             # Element selection & click handling
-│   ├── inline-edit-handlers.ts       # Bridges to inline editing capability
-│   ├── message-handlers.ts           # Parent window message handling
-│   └── messages/
-│       ├── types.ts                  # Message type enums & interfaces
-│       ├── toggle-visual-edit-mode.ts # Handles toggle-visual-edit-mode
-│       └── toggle-inline-edit-mode.ts # Handles toggle-inline-edit-mode
-└── capabilities/
-    └── inline-editing/               # Inline text editing capability
-        ├── index.ts                  # Public API
-        ├── core.ts                   # ContentEditable logic
-        ├── validation.ts             # Element eligibility checks
-        ├── styles.ts                 # CSS injection / removal
-        └── README.md                 # Documentation
-```
-
-## Module Responsibilities
-
-### `index.ts` - Setup & Orchestration
-- Initializes the visual edit agent
-- Sets up all event listeners
-- Creates mutation observers
-- Coordinates between different modules
-
-### `constants.ts` - Configuration
-- Defines all magic numbers and styling constants
-- Single source of truth for configuration values
-- Easy to modify behavior without touching logic
-
-### `state/agent-state.ts` - State Management
-- **`AgentState` interface**: TypeScript interface defining all state
-- **`createAgentState()`**: Factory function to create initial state
-- Centralizes all state in one place for easier debugging
-
-### `ui/overlay.ts` - UI Components & Overlay State Helpers
-- **`createOverlay()`**: Creates hover/selection overlay elements
-- **`positionOverlay()`**: Positions a single overlay relative to an element
-- **`clearOverlays()`**: Removes overlay elements from the DOM
-- **`clearSelection(state)`**: Removes `data-selected`, clears selected overlays, and nulls `selectedElementId` — single source of truth for deselection used by `unselectElement`, `handleElementSelection`, and `toggleVisualEditMode`
-- **`repositionSelectedOverlays(state)`**: Re-positions all selected overlays after layout changes
-- **`repositionHoverOverlays(state)`**: Re-positions all hover overlays after layout changes
-
-### `handlers/hover-handlers.ts` - Hover Interactions
-- **`handleMouseOver()`**: Shows hover overlays on element hover
-- **`handleMouseOut()`**: Clears hover overlays
-- **`clearHoverOverlays()`**: Cleanup utility
-- Manages the hover state and visual feedback
-
-### `handlers/click-handlers.ts` - Selection Logic
-- **`handleElementClick()`**: Main click event handler
-- **`handleElementSelection()`**: Handles first click (selection)
-- Manages the selection flow and second-click inline editing trigger
-- Sends `element-selected` messages to parent
-
-### `handlers/inline-edit-handlers.ts` - Inline Editing
-- **`handleEnterInlineEditingMode()`**: Enables contentEditable
-- **`handleClearInlineEditingMode()`**: Disables contentEditable
-- **`setupInlineEditCallback()`**: Wires up text input handler
-- **Debounced reporting**: 500ms debounce for `inline-edit` messages
-- Bridges between visual edit agent and the inline-editing capability
-
-### `capabilities/inline-editing/` - Inline Editing Capability
-Reusable inline text editing using contentEditable.
-- **`core.ts`**: Main contentEditable logic — `enterInlineEditingMode` injects the focus-suppression CSS; `clearInlineEditingMode` removes it automatically
-- **`validation.ts`**: Element eligibility checks
-- **`styles.ts`**: CSS injection (`injectFocusOutlineCSS`) and removal (`removeFocusOutlineCSS`)
-- **`README.md`**: Complete documentation
-- See [capabilities/inline-editing/README.md](./capabilities/inline-editing/README.md) for details
-
-### `handlers/messages/` - Per-Message Handlers
-Split out of `message-handlers.ts` to keep each handler focused:
-- **`types.ts`**: `IncomingMessageType` / `OutgoingMessageType` enums and all message interfaces
-- **`toggle-visual-edit-mode.ts`**: Enables/disables visual edit mode, clears all overlays & selection via `clearSelection`, updates the inline-edit experiment flag
-- **`toggle-inline-edit-mode.ts`**: Programmatically enters/exits inline editing for a given element
-
-### `handlers/message-handlers.ts` - Parent Communication
-- **`handleMessage()`**: Switch-board for all incoming messages — delegates to per-message handlers above
-- **`handleScroll()`**: Sends `element-position-update` to parent on scroll
-- **`handleResize()`**: Calls `repositionSelectedOverlays` + `repositionHoverOverlays` on resize
-- **`updateElementClassesAndReposition()`**: Updates classes & repositions overlays after CSS reflow
-- **`updateElementContent()`**: Updates element `innerText` & repositions overlays
-- **`unselectElement()`**: Exits inline editing if active, then delegates to `clearSelection`
-- Central hub for all parent-iframe communication
-
-## State Flow
-
-```
-User Action
-    ↓
-Handler (e.g., handleElementClick)
-    ↓
-Modifies State (AgentState)
-    ↓
-Updates UI (overlay.ts)
-    ↓
-Sends Message to Parent (window.parent.postMessage)
-```
-
-## Position Update Strategy
-
-Following Framewire's reactive pattern, we **update positions at the source** instead of using a broad MutationObserver. This is more performant and predictable.
-
-### Position Updates Happen:
-1. **Element Selection** - When user clicks an element
-2. **Inline Editing** - During text input (debounced)
-3. **Scroll Events** - Via scroll listener
-4. **Window Resize** - Via resize listener  
-5. **Parent Updates** - When parent sends class/content changes (with 50ms delay for CSS reflow)
-6. **Hover Events** - When user hovers over elements
-
-See [POSITION_UPDATES.md](./POSITION_UPDATES.md) for detailed analysis.
-
-## Key Features
-
-### 1. **Separation of Concerns**
-Each module has a single, well-defined responsibility
-
-### 2. **Shared Helpers Over Repeated Logic**
-Overlay repositioning and selection clearing live in `overlay.ts` as named helpers (`repositionSelectedOverlays`, `repositionHoverOverlays`, `clearSelection`) rather than being duplicated across handler files
-
-### 3. **Centralized State**
-All state is in `AgentState`, passed to handlers explicitly
-
-### 4. **Type Safety**
-TypeScript interfaces define clear contracts between modules
-
-### 5. **Easy to Extend**
-Adding new handlers or message types is straightforward
-
-### 6. **Better Debugging**
-Smaller files and clear responsibilities make debugging easier
-
-## Message Types
-
-### Incoming (from Parent)
-- `toggle-visual-edit-mode` - Enable/disable visual edit mode + experiment flags
-- `update-classes` - Update element classes
-- `update-content` - Update element text content
-- `unselect-element` - Clear current selection
-- `refresh-page` - Reload the page
-- `toggle-inline-edit-mode` - Programmatically enable/disable inline editing
-- `request-element-position` - Request position of selected element
-- `popover-drag-state` - Notify about popover drag state
-- `dropdown-state` - Notify about dropdown open state
-
-### Outgoing (to Parent)
-- `visual-edit-agent-ready` - Agent initialized and ready
-- `element-selected` - Element was selected
-- `element-position-update` - Selected element position changed
-- `content-editing-started` - Inline editing began
-- `inline-edit` - Debounced content change during editing
-- `content-editing-ended` - Inline editing finished
-- `close-dropdowns` - Request to close dropdowns
-
-## Inline Editing Experiment
-
-Inline editing is gated behind an experiment flag: `specs.newInlineEditEnabled`
-
-**Enable via:**
-```typescript
-{
-  type: "toggle-visual-edit-mode",
-  data: {
-    enabled: true,
-    specs: {
-      newInlineEditEnabled: true
-    }
-  }
-}
-```
-
-**When enabled:**
-- Second click on selected text element enters inline edit mode
-- `toggle-inline-edit-mode` messages work
-- 500ms debounced `inline-edit` messages sent during typing
-
-**When disabled:**
-- Second click does nothing
-- `toggle-inline-edit-mode` messages ignored
-
-## Constants
-
-All configurable values are in `constants.ts`:
-
-```typescript
-INLINE_EDIT_DEBOUNCE_MS = 500          // Debounce time for inline edits
-OVERLAY_Z_INDEX = "9999"                // Z-index for overlays
-SELECTED_BORDER_COLOR = "#2563EB"       // Selected element border color
-HOVER_BORDER_COLOR = "#95a5fc"          // Hover element border color
-REPOSITION_DELAY_MS = 50                // Delay before repositioning overlays
-// ... and more
-```
-
-## Usage
-
-Import and call the setup function:
-
-```typescript
-import { setupVisualEditAgent } from './visual-edit-agent.js';
-
-setupVisualEditAgent();
-```
-
-That's it! The agent will initialize, set up all listeners, and start responding to messages.

package/src/injections/visual-edit-agent/capabilities/inline-editing/core.ts

@@ -1,120 +0,0 @@
-import { injectFocusOutlineCSS, removeFocusOutlineCSS } from "./styles.js";
-import { selectText, isEditableTextElement } from "./validation.js";
-
-/**
- * Callback function type for handling text input changes
- */
-type OnTextInputChange = (element: HTMLElement) => void;
-
-/**
- * Global callback that gets triggered on every input event
- * This is set by the visual-edit-agent and includes both updatePosition and reportInlineEdit
- */
-let onTextInputChangeCallback: OnTextInputChange | null = null;
-
-/**
- * Set the callback function that will be called on text input changes
- */
-export function setInlineEditCallback(callback: OnTextInputChange | null): void {
-  onTextInputChangeCallback = callback;
-}
-
-/**
- * WeakMap to track AbortControllers for each element's input listener.
- * Using WeakMap ensures no memory leaks — when an element is garbage collected,
- * its entry is automatically removed.
- */
-const listenerAbortControllers = new WeakMap<HTMLElement, AbortController>();
-
-/**
- * Internal handler for the native input event
- */
-function handleInputEvent(this: HTMLElement, e: Event): void {
-  if (onTextInputChangeCallback) {
-    onTextInputChangeCallback(this);
-  }
-}
-
-/**
- * Check if an element should enter inline editing mode
- * Called when user clicks on an already-selected element
- */
-export function shouldEnterInlineEditingMode(element: Element): boolean {
-  // Must have data-selected="true"
-  if (!(element instanceof HTMLElement) || element.dataset.selected !== "true") {
-    return false;
-  }
-
-  // Must pass all editability checks
-  if (!isEditableTextElement(element)) {
-    return false;
-  }
-
-  return true;
-}
-
-/**
- * Enable contentEditable mode on an element
- * Follows the exact flow from inlineEdit.md
- */
-export function enterInlineEditingMode(element: HTMLElement): void {
-  // Inject CSS to suppress focus outline
-  injectFocusOutlineCSS();
-
-  // Store original state
-  element.dataset.originalTextContent = element.textContent || "";
-  element.dataset.originalCursor = element.style.cursor;
-
-  // Enable contentEditable
-  element.contentEditable = "true";
-
-  // Create an AbortController to manage the input listener lifecycle
-  const abortController = new AbortController();
-  listenerAbortControllers.set(element, abortController);
-
-  // Add input event listener with AbortSignal for automatic cleanup
-  element.addEventListener("input", handleInputEvent, { signal: abortController.signal });
-
-  // Set cursor to text
-  element.style.cursor = "text";
-
-  // Select all text
-  selectText(element);
-
-  // Focus after render
-  setTimeout(() => {
-    element.focus();
-  }, 0);
-}
-
-/**
- * Disable contentEditable mode on an element
- * Reverses everything done by enterInlineEditingMode
- */
-export function clearInlineEditingMode(element: HTMLElement): void {
-  // Abort the input event listener using the stored AbortController
-  const abortController = listenerAbortControllers.get(element);
-  if (abortController) {
-    abortController.abort();
-    listenerAbortControllers.delete(element);
-  }
-
-  // If element was removed from DOM before cleanup, skip DOM operations
-  if (!element.isConnected) {
-    return;
-  }
-
-  removeFocusOutlineCSS();
-
-  // Disable contentEditable
-  element.contentEditable = "false";
-
-  // Remove stored original text content
-  delete element.dataset.originalTextContent;
-
-  // Restore original cursor
-  if (element.dataset.originalCursor !== undefined) {
-    element.style.cursor = element.dataset.originalCursor;
-    delete element.dataset.originalCursor;
-  }
-}

package/src/injections/visual-edit-agent/capabilities/inline-editing/index.ts

@@ -1,10 +0,0 @@
-export {
-  enterInlineEditingMode,
-  clearInlineEditingMode,
-  shouldEnterInlineEditingMode,
-  setInlineEditCallback,
-} from "./core.js";
-
-export { injectFocusOutlineCSS, removeFocusOutlineCSS } from "./styles.js";
-
-export { isEditableTextElement, selectText } from "./validation.js";

package/src/injections/visual-edit-agent/capabilities/inline-editing/styles.ts

@@ -1,26 +0,0 @@
-/**
- * Inject CSS to suppress the browser's default focus outline on contentEditable elements
- */
-export function injectFocusOutlineCSS(): void {
-  const existingStyle = document.getElementById("visual-edit-focus-styles");
-  if (existingStyle) return;
-
-  const style = document.createElement("style");
-  style.id = "visual-edit-focus-styles";
-  style.textContent = `
-    [data-selected="true"][contenteditable="true"]:focus {
-      outline: none !important;
-    }
-  `;
-  document.head.appendChild(style);
-}
-
-/**
- * Remove the injected focus outline CSS
- */
-export function removeFocusOutlineCSS(): void {
-  const style = document.getElementById("visual-edit-focus-styles");
-  if (style) {
-    style.remove();
-  }
-}

package/src/injections/visual-edit-agent/capabilities/inline-editing/validation.ts

@@ -1,67 +0,0 @@
-/**
- * Select all text content in an element using the Selection API
- */
-export function selectText(element: HTMLElement): void {
-  const range = document.createRange();
-  range.selectNodeContents(element);
-  const selection = window.getSelection();
-  selection?.removeAllRanges();
-  selection?.addRange(range);
-}
-
-/**
- * Check if an element is an editable text element
- * Based on the eligibility rules from inlineEdit.md (non-dynamic only)
- */
-export function isEditableTextElement(element: Element): boolean {
-  // Must be an HTMLElement
-  if (!(element instanceof HTMLElement)) {
-    return false;
-  }
-
-  // Must be an allowed tag
-  const allowedTags = [
-    "div",
-    "p",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "span",
-    "li",
-    "td",
-    "a",
-    "button",
-    "label",
-  ];
-  if (!allowedTags.includes(element.tagName.toLowerCase())) {
-    return false;
-  }
-
-  // Must have text content
-  const textContent = element.textContent?.trim() || "";
-  if (textContent.length === 0) {
-    return false;
-  }
-
-  // Must NOT contain img, video, canvas, or svg
-  const hasMediaElements =
-    element.querySelector("img, video, canvas, svg") !== null;
-  if (hasMediaElements) {
-    return false;
-  }
-
-  // Must NOT have complex children (must be a leaf text node or simple container)
-  if (element.children.length > 0) {
-    return false;
-  }
-
-  // Must NOT be dynamic content
-  if (element.dataset.dynamicContent === "true") {
-    return false;
-  }
-
-  return true;
-}

package/src/injections/visual-edit-agent/constants.ts

@@ -1,9 +0,0 @@
-export const INLINE_EDIT_DEBOUNCE_MS = 500;
-export const OVERLAY_TRANSITION = "all 0.1s ease-in-out";
-export const OVERLAY_Z_INDEX = "9999";
-export const SELECTED_BORDER_COLOR = "#2563EB";
-export const HOVER_BORDER_COLOR = "#95a5fc";
-export const HOVER_BACKGROUND_COLOR = "rgba(99, 102, 241, 0.05)";
-export const LABEL_TOP_OFFSET = "-27px";
-export const LABEL_LEFT_OFFSET = "-2px";
-export const REPOSITION_DELAY_MS = 50;