@base44-preview/vite-plugin 0.3.3-pr.51.205ae5c → 0.3.3-pr.51.4604dab

package/src/html-injections-plugin.ts

@@ -11,35 +11,37 @@ type Injection = {
 };
 
 const ANALYTICS_TRACKER_SCRIPT = `
-let lastPath = "";
-function getPageNameFromPath(path) {
-  const segments = path.split("/").filter(Boolean);
-  return segments[0] || null;
-}
-function trackPageView() {
-  const path = window.location.pathname;
-  if (path === lastPath) return;
-  lastPath = path;
-  const pageName = getPageNameFromPath(path) || "home";
-  const appId = import.meta.env.VITE_BASE44_APP_ID;
-  const serverUrl = import.meta.env.VITE_BASE44_BACKEND_URL || "";
-  if (!appId) return;
-  fetch(\`\${serverUrl}/app-logs/\${appId}/log-user-in-app/\${pageName}\`, {
-    method: "POST",
-  }).catch(() => {});
-}
-const originalPushState = history.pushState.bind(history);
-history.pushState = function (...args) {
-  originalPushState(...args);
-  trackPageView();
-};
-const originalReplaceState = history.replaceState.bind(history);
-history.replaceState = function (...args) {
-  originalReplaceState(...args);
+if (window.self === window.top) {
+  let lastPath = "";
+  function getPageNameFromPath(path) {
+    const segments = path.split("/").filter(Boolean);
+    return segments[0] || null;
+  }
+  function trackPageView() {
+    const path = window.location.pathname;
+    if (path === lastPath) return;
+    lastPath = path;
+    const pageName = getPageNameFromPath(path) || "home";
+    const appId = import.meta.env.VITE_BASE44_APP_ID;
+    const serverUrl = import.meta.env.VITE_BASE44_BACKEND_URL || "";
+    if (!appId) return;
+    fetch(\`\${serverUrl}/app-logs/\${appId}/log-user-in-app/\${pageName}\`, {
+      method: "POST",
+    }).catch(() => {});
+  }
+  const originalPushState = history.pushState.bind(history);
+  history.pushState = function (...args) {
+    originalPushState(...args);
+    trackPageView();
+  };
+  const originalReplaceState = history.replaceState.bind(history);
+  history.replaceState = function (...args) {
+    originalReplaceState(...args);
+    trackPageView();
+  };
+  window.addEventListener("popstate", trackPageView);
   trackPageView();
-};
-window.addEventListener("popstate", trackPageView);
-trackPageView();
+}
 `;
 
 const INJECTIONS: Record<string, Injection> = {

package/src/injections/layer-dropdown/consts.ts

@@ -33,10 +33,12 @@ export const DROPDOWN_ITEM_HOVER_BG = "#f1f5f9";
 
 export const DEPTH_INDENT_PX = 10;
 
-/** Chevron shown when dropdown is collapsed (click to expand) */
-export const CHEVRON_COLLAPSED = " \u25BE";
-/** Chevron shown when dropdown is expanded (click to collapse) */
-export const CHEVRON_EXPANDED = " \u25B4";
+/** SVG chevron shown when dropdown is collapsed (click to expand) */
+export const CHEVRON_COLLAPSED = `<svg width="12" height="12" viewBox="0 0 24 24" style="vertical-align:middle;margin-left:4px"><path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" fill="none"/></svg>`;
+/** SVG chevron shown when dropdown is expanded (click to collapse) */
+export const CHEVRON_EXPANDED = `<svg width="12" height="12" viewBox="0 0 24 24" style="vertical-align:middle;margin-left:4px"><path d="M18 15l-6-6-6 6" stroke="currentColor" stroke-width="2" fill="none"/></svg>`;
+
+export const CHEVRON_ATTR = "data-chevron";
 
 export const BASE_PADDING_PX = 12;
 

package/src/injections/layer-dropdown/dropdown-ui.ts

@@ -11,6 +11,7 @@ import {
   BASE_PADDING_PX,
   CHEVRON_COLLAPSED,
   CHEVRON_EXPANDED,
+  CHEVRON_ATTR,
   LAYER_DROPDOWN_ATTR,
 } from "./consts.js";
 import { applyStyles, getLayerDisplayName } from "./utils.js";
@@ -83,10 +84,16 @@ export function createDropdownElement(
 
 /** Add chevron indicator and pointer-events to the label */
 export function enhanceLabelWithChevron(label: HTMLDivElement): void {
-  const t = label.textContent ?? "";
-  if (t.endsWith(CHEVRON_COLLAPSED) || t.endsWith(CHEVRON_EXPANDED)) return;
+  if (label.querySelector(`[${CHEVRON_ATTR}]`)) return;
 
-  label.textContent = t + CHEVRON_COLLAPSED;
+  const chevron = document.createElement("span");
+  chevron.setAttribute(CHEVRON_ATTR, "true");
+  chevron.style.display = "inline-flex";
+  chevron.innerHTML = CHEVRON_COLLAPSED;
+  label.appendChild(chevron);
+
+  label.style.display = "inline-flex";
+  label.style.alignItems = "center";
   label.style.cursor = "pointer";
   label.style.userSelect = "none";
   label.style.whiteSpace = "nowrap";
@@ -190,8 +197,9 @@ export function showDropdown(
   overlay.appendChild(dropdown);
   activeDropdown = dropdown;
   activeLabel = label;
-  if (label.textContent?.endsWith(CHEVRON_COLLAPSED.trim())) {
-    label.textContent = label.textContent.slice(0, -CHEVRON_COLLAPSED.length) + CHEVRON_EXPANDED;
+  const chevronEl = label.querySelector(`[${CHEVRON_ATTR}]`);
+  if (chevronEl) {
+    chevronEl.innerHTML = CHEVRON_EXPANDED;
   }
   activeOnHoverEnd = callbacks.onHoverEnd ?? null;
 
@@ -201,8 +209,9 @@ export function showDropdown(
 
 /** Close the active dropdown and clean up listeners */
 export function closeDropdown(): void {
-  if (activeLabel?.textContent?.includes(CHEVRON_EXPANDED)) {
-    activeLabel.textContent = activeLabel.textContent.replace(CHEVRON_EXPANDED, CHEVRON_COLLAPSED);
+  const chevronEl = activeLabel?.querySelector(`[${CHEVRON_ATTR}]`);
+  if (chevronEl) {
+    chevronEl.innerHTML = CHEVRON_COLLAPSED;
   }
   activeLabel = null;
 

package/src/injections/utils.ts

@@ -1,3 +1,40 @@
+const LABEL_HEIGHT = 27;
+
+/**
+ * Positions an element-tag label relative to its highlighted overlay.
+ *
+ * Strategy (in priority order):
+ *  1. If the element is near the viewport top AND tall enough (>= 2x label height),
+ *     place the label **inside** the element at the top-left.
+ *  2. If the element is near the viewport top but too short, place the label
+ *     **below** the element.
+ *  3. Otherwise, place the label **above** the element (default).
+ *
+ * For full-width elements (spanning nearly the entire viewport), the left offset
+ * is nudged inward (6px) to prevent clipping against the viewport edge.
+ *
+ * @param label - The label div to position (style.top and style.left are set).
+ * @param rect  - The bounding client rect of the highlighted element.
+ */
+export function positionLabel(label: HTMLDivElement, rect: DOMRect): void {
+  const nearTop = rect.top < LABEL_HEIGHT;
+  const tallEnough = rect.height >= LABEL_HEIGHT * 2;
+  const isFullWidth = rect.width >= window.innerWidth - 4;
+  const edgeLeft = isFullWidth ? "8px" : "-2px";
+  const insideLeft = isFullWidth ? "8px" : "4px";
+
+  if (nearTop && tallEnough) {
+    label.style.top = "2px";
+    label.style.left = insideLeft;
+  } else if (nearTop) {
+    label.style.top = `${rect.height + 2}px`;
+    label.style.left = edgeLeft;
+  } else {
+    label.style.top = `-${LABEL_HEIGHT}px`;
+    label.style.left = edgeLeft;
+  }
+}
+
 /** Check if an element has instrumentation attributes */
 export function isInstrumentedElement(element: Element): boolean {
   const htmlEl = element as HTMLElement;

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

@@ -1,9 +1,8 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel } from "./utils.js";
 import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
 
-const LABEL_HEIGHT = 27;
 const REPOSITION_DELAY_MS = 50;
 
 export function setupVisualEditAgent() {
@@ -35,25 +34,6 @@ export function setupVisualEditAgent() {
     return overlay;
   };
 
-  const positionLabel = (label: HTMLDivElement, rect: DOMRect): void => {
-    const nearTop = rect.top < LABEL_HEIGHT;
-    const tallEnough = rect.height >= LABEL_HEIGHT * 2;
-    const isFullWidth = rect.width >= window.innerWidth - 4;
-    const edgeLeft = isFullWidth ? "6px" : "-2px";
-    const insideLeft = isFullWidth ? "6px" : "4px";
-
-    if (nearTop && tallEnough) {
-      label.style.top = "2px";
-      label.style.left = insideLeft;
-    } else if (nearTop) {
-      label.style.top = `${rect.height + 2}px`;
-      label.style.left = edgeLeft;
-    } else {
-      label.style.top = `-${LABEL_HEIGHT}px`;
-      label.style.left = edgeLeft;
-    }
-  };
-
   // Position overlay relative to element
   const positionOverlay = (
     overlay: HTMLDivElement,
@@ -84,7 +64,7 @@ export function setupVisualEditAgent() {
       label.style.fontSize = "11px";
       label.style.fontWeight = isSelected ? "500" : "400";
       label.style.color = isSelected ? "#ffffff" : "#526cff";
-      label.style.backgroundColor = isSelected ? "#526cff" : "#DBEAFE";
+      label.style.backgroundColor = isSelected ? "#2563EB" : "#DBEAFE";
       label.style.borderRadius = "3px";
       label.style.minWidth = "24px";
       label.style.textAlign = "center";