@depup/base44__vite-plugin 1.0.4-depup.0

package/src/index.ts

@@ -0,0 +1,225 @@
+import type { Plugin, UserConfig } from "vite";
+import { loadEnv } from "vite";
+import { errorOverlayPlugin } from "./error-overlay-plugin.js";
+import { visualEditPlugin } from "./visual-edit-plugin.js";
+import { filterPackagesInProject } from "./utils.js";
+import { htmlInjectionsPlugin } from "./html-injections-plugin.js";
+
+const isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID;
+
+export default function vitePlugin(
+  opts: {
+    legacySDKImports?: boolean;
+    hmrNotifier?: boolean;
+    navigationNotifier?: boolean;
+    visualEditAgent?: boolean;
+    analyticsTracker?: boolean;
+  } = {}
+) {
+  const {
+    legacySDKImports = false,
+    hmrNotifier = false,
+    navigationNotifier = false,
+    visualEditAgent = false,
+    analyticsTracker = false,
+  } = opts;
+
+  return [
+    {
+      name: "base44",
+      config: ({ mode, root = process.cwd() }) => {
+        const env = loadEnv(mode ?? "development", root, "");
+
+        return {
+          resolve: {
+            alias: {
+              "@/": "/src/",
+            },
+          },
+          ...(legacySDKImports
+            ? {
+                define: {
+                  "process.env.VITE_BASE44_APP_ID": JSON.stringify(
+                    env.VITE_BASE44_APP_ID
+                  ),
+                  "process.env.VITE_BASE44_BACKEND_URL": JSON.stringify(
+                    env.VITE_BASE44_BACKEND_URL
+                  ),
+                },
+              }
+            : {}),
+          ...(isRunningInSandbox
+            ? ({
+                server: {
+                  cors: true,
+                  host: "0.0.0.0", // Bind to all interfaces for container access
+                  port: 5173,
+                  strictPort: true,
+                  // Allow all hosts - essential for Modal tunnel URLs
+                  allowedHosts: true,
+                  watch: {
+                    // Enable polling for better file change detection in containers
+                    usePolling: true,
+                    interval: 100, // Check every 100ms for responsive HMR
+                    // Wait for file writes to complete before triggering HMR
+                    awaitWriteFinish: {
+                      stabilityThreshold: 150,
+                      pollInterval: 50,
+                    },
+                  },
+                },
+                build: {
+                  rollupOptions: {
+                    onwarn(warning, warn) {
+                      // Treat import errors as fatal errors
+                      if (
+                        warning.code === "UNRESOLVED_IMPORT" ||
+                        warning.code === "MISSING_EXPORT"
+                      ) {
+                        throw new Error(`Build failed: ${warning.message}`);
+                      }
+                      // Use default for other warnings
+                      warn(warning);
+                    },
+                  },
+                },
+              } as Partial<UserConfig>)
+            : (() => {
+                if (env.VITE_BASE44_APP_BASE_URL) {
+                  console.log(
+                    `[base44] Proxy enabled: /api -> ${env.VITE_BASE44_APP_BASE_URL}`
+                  );
+                  return {
+                    server: {
+                      proxy: {
+                        "/api": {
+                          target: env.VITE_BASE44_APP_BASE_URL,
+                          changeOrigin: true,
+                        },
+                      },
+                    },
+                  };
+                }
+                console.log(
+                  "[base44] Proxy not enabled (VITE_BASE44_APP_BASE_URL not set)"
+                );
+                return {};
+              })()),
+          optimizeDeps: {
+            ...(isRunningInSandbox
+              ? {
+                  include: filterPackagesInProject(
+                    [
+                      "react",
+                      "react-dom",
+                      "framer-motion",
+                      "lodash",
+                      "moment",
+                      "react-quill",
+                    ],
+                    root
+                  ),
+                }
+              : {}),
+            esbuildOptions: {
+              loader: {
+                ".js": "jsx",
+              },
+            },
+          },
+        };
+      },
+      async resolveId(source, importer, options) {
+        // only resolve imports in the legacy SDK if they are not in an HTML file
+        // because we might have pages that include /integrations, /functions, etc.
+        if (legacySDKImports && !importer?.endsWith(".html")) {
+          const existingResolution = await this.resolve(
+            source,
+            importer,
+            options
+          );
+
+          if (existingResolution) {
+            return existingResolution;
+          }
+
+          // in legacy apps, the AI sometimes imports components from the Layout with `../`
+          // which breaks when monving to the vite template, so this solved it by
+          // resolving the path to the components folder
+          if (
+            importer?.endsWith("/src/Layout.jsx") &&
+            source.startsWith("../components")
+          ) {
+            return this.resolve(
+              source.replace(/^..\/components/, "@/components"),
+              importer,
+              options
+            );
+          }
+
+          // Handle imports of Layout.js or Layout.jsx from pages directory
+          if (
+            importer?.includes("/pages") &&
+            (source.toLowerCase().endsWith("layout.jsx") ||
+              source.toLowerCase().endsWith("layout.js"))
+          ) {
+            return this.resolve("@/Layout.jsx", importer, options);
+          }
+
+          if (source.includes("/entities")) {
+            return this.resolve(
+              "@base44/vite-plugin/compat/entities.cjs",
+              importer,
+              options
+            );
+          }
+
+          if (source.includes("/functions")) {
+            return this.resolve(
+              "@base44/vite-plugin/compat/functions.cjs",
+              importer,
+              options
+            );
+          }
+
+          if (source.includes("/integrations")) {
+            return this.resolve(
+              "@base44/vite-plugin/compat/integrations.cjs",
+              importer,
+              options
+            );
+          }
+
+          if (source.includes("/agents")) {
+            return this.resolve(
+              "@base44/vite-plugin/compat/agents.cjs",
+              importer,
+              options
+            );
+          }
+        }
+
+        return null;
+      },
+    } as Plugin,
+    ...(isRunningInSandbox
+      ? [
+          {
+            name: "iframe-hmr",
+            configureServer(server) {
+              server.middlewares.use((req, res, next) => {
+                // Allow iframe embedding
+                res.setHeader("X-Frame-Options", "ALLOWALL");
+                res.setHeader("Content-Security-Policy", "frame-ancestors *;");
+                next();
+              });
+            },
+          } as Plugin,
+          errorOverlayPlugin(),
+          visualEditPlugin(),
+        ]
+      : []),
+    // HTML injections - handles both dev (sandbox) and production injections
+    htmlInjectionsPlugin({ hmrNotifier, navigationNotifier, visualEditAgent, analyticsTracker }),
+  ];
+}

package/src/injections/layer-dropdown/LAYERS.md

@@ -0,0 +1,258 @@
+# Layer Dropdown Feature
+
+## Overview
+
+The layer dropdown lets users navigate the instrumented DOM hierarchy around a selected element. Clicking the chevron (`▾`) on an element's label reveals a dropdown showing **ancestors**, **siblings**, **the selected element**, and its **children** — all with depth-based indentation.
+
+```
+grandparent          (depth 0)
+  parent             (depth 1)
+    sibling-1        (depth 2)
+    ★ selected       (depth 2)   ← highlighted in blue
+      child-a        (depth 3)
+      child-b        (depth 3)
+    sibling-2        (depth 2)
+```
+
+Children are only expanded for the selected element, not for siblings.
+
+---
+
+## Architecture
+
+```
+┌─────────────┐     ┌────────────────┐     ┌────────────────┐
+│  types.ts   │◄────│  controller.ts │────►│  dropdown-ui.ts│
+│  consts.ts  │◄────│  (orchestrator)│     │  (rendering)   │
+└─────────────┘     └───────┬────────┘     └────────────────┘
+                            │
+                      ┌─────▼──────┐
+                      │  utils.ts  │
+                      │ (DOM walk) │
+                      └────────────┘
+```
+
+| File | Role |
+|------|------|
+| **types.ts** | `LayerInfo`, callback types, `LayerControllerDeps`, `LayerController` |
+| **consts.ts** | Style maps, depth limits, chevron character, attribute name |
+| **utils.ts** | DOM traversal — parent walking, sibling/descendant collection, depth assignment |
+| **dropdown-ui.ts** | Creates the dropdown DOM, positions it, handles hover/click/keyboard |
+| **controller.ts** | Stateful factory that wires everything together: build chain, show dropdown, handle selection |
+
+---
+
+## Data Model
+
+### `LayerInfo`
+
+```typescript
+interface LayerInfo {
+  element: Element;            // DOM reference
+  tagName: string;             // lowercase tag name ("div", "button")
+  selectorId: string | null;   // data-source-location or data-visual-selector-id
+  depth?: number;              // visual indentation level (set during chain building)
+}
+```
+
+An element is **instrumented** if it has `dataset.sourceLocation` or `dataset.visualSelectorId`. Only instrumented elements appear in the dropdown.
+
+### Key Constants
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `MAX_PARENT_DEPTH` | `2` | Max ancestor levels shown above selected |
+| `MAX_CHILD_DEPTH` | `2` | Max descendant levels shown below selected |
+| `DEPTH_INDENT_PX` | `10` | Extra left-padding per depth level |
+| `LABEL_CHEVRON` | `" ▾"` | Appended to label text when dropdown is available |
+
+---
+
+## How the Chain Is Built (`utils.ts`)
+
+`buildLayerChain(selectedElement)` is the entry point. It delegates to focused helper functions:
+
+```typescript
+export function buildLayerChain(selectedElement: Element): LayerInfo[] {
+  const parents = collectInstrumentedParents(selectedElement);
+  const chain: LayerInfo[] = [];
+  const selfDepth = appendParentsWithDepth(chain, parents);
+
+  const instrParent = getImmediateInstrParent(parents);
+  if (instrParent) {
+    const siblings = collectSiblings(instrParent, selectedElement);
+    appendSiblingsWithSelected(chain, siblings, selectedElement, selfDepth);
+  } else {
+    appendSelfAndDescendants(chain, selectedElement, selfDepth);
+  }
+
+  return chain;
+}
+```
+
+### Helper Functions
+
+| Function | Purpose |
+|----------|---------|
+| `toLayerInfo(element, depth?)` | Convert a DOM element to a `LayerInfo` object |
+| `collectInstrumentedParents(el)` | Walk up the DOM, collect up to `MAX_PARENT_DEPTH` instrumented ancestors, return outermost-first |
+| `appendParentsWithDepth(chain, parents)` | Push parents into chain with `depth = index` (0, 1, ...), return count as `selfDepth` |
+| `getImmediateInstrParent(parents)` | Return the innermost parent's DOM element, or `null` if `parents` is empty |
+| `collectSiblings(parent, selectedEl)` | Call `getInstrumentedDescendants(parent, 1)` to get all first-level instrumented children in DOM order; safety-guard ensures `selectedEl` is always included |
+| `appendSiblingsWithSelected(chain, siblings, selectedEl, depth)` | Iterate siblings at `selfDepth`; for the selected element, expand children via `appendSelfAndDescendants`; for others, just add at `selfDepth` |
+| `appendSelfAndDescendants(chain, el, depth)` | Push element + its descendants (up to `MAX_CHILD_DEPTH` levels) with assigned depths |
+| `getInstrumentedDescendants(parent, maxDepth)` | Recursive DOM walk — instrumented children increment depth, non-instrumented wrappers are transparent. Results in DOM order |
+| `assignDescendantDepths(root, descendants, startDepth)` | Second-pass walk assigning `depth = startDepth + instrDepth - 1` using a `Set`/`Map` for O(1) lookups |
+
+### Chain-Building Steps
+
+**Step 1 — `collectInstrumentedParents`**: Walk up from `selectedElement.parentElement`, skipping `document.body` and `document.documentElement`. Collect up to `MAX_PARENT_DEPTH` instrumented ancestors, then reverse so outermost comes first.
+
+**Step 2 — `appendParentsWithDepth`**: Each parent gets `depth = index` (0, 1, ...). The count becomes `selfDepth`.
+
+**Step 3 — `getImmediateInstrParent`**: Extract the innermost instrumented parent's element. If `parents` is empty, returns `null` (root-level element).
+
+**Step 4 — `collectSiblings`** (when parent exists): Call `getInstrumentedDescendants(instrParent, 1)` to get all first-level instrumented children of the parent in DOM order — this naturally includes the selected element among its siblings. A safety guard ensures the selected element is always present.
+
+**Step 5 — `appendSiblingsWithSelected`**: Iterate siblings in DOM order, all at `selfDepth`. For the selected element only, delegate to `appendSelfAndDescendants` which also collects and appends children. For other siblings, just push at `selfDepth` with no child expansion.
+
+**Fallback** (no parent): If no instrumented parent exists (root-level element), skip sibling collection and call `appendSelfAndDescendants` directly — just self + children.
+
+---
+
+## Controller Lifecycle (`controller.ts`)
+
+`createLayerController(deps)` returns `{ attachToOverlay, cleanup }`.
+
+### Dependency Injection
+
+| Dep | Called When |
+|-----|------------|
+| `createPreviewOverlay(el)` | User hovers a dropdown item |
+| `getSelectedElementId()` | Checking if hovered item is already selected |
+| `selectElement(el)` | User clicks a dropdown item — performs selection, returns overlay |
+| `onDeselect()` | Dropdown opens — temporarily clears selection for hover previews |
+
+### `attachToOverlay(overlay, element)`
+
+1. Extract the label `<div>` from the overlay.
+2. Call `buildLayerChain(element)`.
+3. **Guard**: if `layers.length <= 1`, return early — no chevron, no click handler. This is how the chevron is hidden when there's nothing to navigate to.
+4. Append chevron via `enhanceLabelWithChevron(label)`.
+5. Bind click handler to label (toggle behavior).
+
+### Click Handler Flow
+
+```
+Label clicked
+  ├─ Dropdown already open → close + reselect source element
+  └─ Dropdown closed →
+       1. Save source element (for Escape restore)
+       2. deps.onDeselect() (clear selection visual)
+       3. Register Escape key listener (capture phase)
+       4. showDropdown(label, layers, callbacks...)
+```
+
+### State Transitions
+
+```
+CLOSED ──[click chevron]──► OPEN
+OPEN   ──[click chevron]──► CLOSED (reselect original)
+OPEN   ──[Escape]──────────► CLOSED (reselect original)
+OPEN   ──[click item]─────► CLOSED → NEW ELEMENT SELECTED → reattach
+OPEN   ──[click outside]──► CLOSED
+```
+
+Selection is recursive — `selectElementFromLayer` calls `deps.selectElement()`, gets a new overlay, and calls `attachToOverlay()` again on it.
+
+---
+
+## Dropdown UI (`dropdown-ui.ts`)
+
+### Global State (singleton)
+
+Only one dropdown can be active at a time:
+
+```typescript
+let activeDropdown: HTMLDivElement | null = null;
+let outsideMousedownHandler: ((e: MouseEvent) => void) | null = null;
+let activeOnHoverEnd: OnLayerHoverEnd | null = null;
+let activeKeydownHandler: ((e: KeyboardEvent) => void) | null = null;
+```
+
+### `showDropdown(label, layers, currentSelectorId, onSelect, onHover, onHoverEnd)`
+
+1. Close any existing dropdown.
+2. Create dropdown element with all layer items.
+3. Position it below the label (`offsetTop + offsetHeight + 2px` gap).
+4. Append to the overlay's parent element.
+5. Set up keyboard navigation and outside-click handler.
+
+### Dropdown Item Rendering
+
+Each `LayerInfo` becomes a `<div>` row:
+
+- **Display name**: `layer.tagName` (e.g., "div", "section")
+- **Indentation**: `paddingLeft = 12 + depth * 10` px
+- **Active (selected) item**: blue text (`#526cff`), light blue bg (`#DBEAFE`), semi-bold
+- **Hover state**: light gray bg (`#f1f5f9`)
+- **Events**: `mouseenter` → preview, `mouseleave` → clear preview, `click` → select
+
+### Keyboard Navigation
+
+- **Arrow Down/Up**: Circular focus movement through items
+- **Enter**: Select focused item
+- All listeners use capture phase to intercept before bubbling
+
+### Outside Click
+
+Registered via `setTimeout(..., 0)` to prevent the opening click from immediately closing. Uses `mousedown` in capture phase for responsive dismissal.
+
+---
+
+## Edge Cases
+
+| Scenario | Behavior |
+|----------|----------|
+| No instrumented parent (root element) | Falls back to self + children only (no siblings) |
+| Only child (no other siblings) | Siblings list contains just self — same result as before |
+| Parent is `document.body`/`html` | Excluded by parent-walk guard, so `parents` is empty |
+| `layers.length <= 1` | No chevron appended, no click handler attached |
+| Element not in siblings list | Safety guard appends it |
+| Non-instrumented wrapper elements | Walked through transparently during descendant collection |
+
+---
+
+## Data Flow Summary
+
+```
+User selects element
+    ↓
+attachToOverlay(overlay, element)
+    ↓
+buildLayerChain(element)
+  ├── collectInstrumentedParents() → parents[] (outermost first)
+  ├── appendParentsWithDepth() → chain gets parents at depth 0,1,...
+  ├── getImmediateInstrParent() → instrParent or null
+  ├── collectSiblings(instrParent) → siblings[] (DOM order)
+  └── appendSiblingsWithSelected()
+       ├── sibling → chain at selfDepth (no expansion)
+       ├── ★ selected → appendSelfAndDescendants()
+       │    ├── self at selfDepth
+       │    ├── getInstrumentedDescendants(self, 2) → children[]
+       │    └── assignDescendantDepths() → children get depth values
+       └── sibling → chain at selfDepth (no expansion)
+    ↓
+LayerInfo[] with depth values
+    ↓
+layers.length > 1 ? enhanceLabelWithChevron() : return
+    ↓
+User clicks chevron → showDropdown()
+    ↓
+createDropdownElement(layers, currentId, callbacks)
+  └── createDropdownItem() for each layer (indented by depth)
+    ↓
+User hovers item → showLayerPreview() → preview overlay
+User clicks item → selectElementFromLayer() → new selection → reattach
+User presses Escape → closeDropdown() → reselect original
+```

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

@@ -0,0 +1,51 @@
+/** Style constants for the layer dropdown UI */
+
+export const DROPDOWN_CONTAINER_STYLES: Record<string, string> = {
+  position: "absolute",
+  backgroundColor: "#ffffff",
+  border: "1px solid #e2e8f0",
+  borderRadius: "6px",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+  fontSize: "12px",
+  minWidth: "120px",
+  maxHeight: "200px",
+  overflowY: "auto",
+  zIndex: "10001",
+  padding: "4px 0",
+  pointerEvents: "auto",
+};
+
+export const DROPDOWN_ITEM_BASE_STYLES: Record<string, string> = {
+  padding: "4px 12px",
+  cursor: "pointer",
+  color: "#334155",
+  backgroundColor: "transparent",
+  whiteSpace: "nowrap",
+  lineHeight: "1.5",
+  fontWeight: "400",
+};
+
+export const DROPDOWN_ITEM_ACTIVE_COLOR = "#526cff";
+export const DROPDOWN_ITEM_ACTIVE_BG = "#DBEAFE";
+export const DROPDOWN_ITEM_ACTIVE_FONT_WEIGHT = "600";
+
+export const DROPDOWN_ITEM_HOVER_BG = "#f1f5f9";
+
+export const DEPTH_INDENT_PX = 10;
+
+/** 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;
+
+export const LAYER_DROPDOWN_ATTR = "data-layer-dropdown";
+
+/** Max instrumented ancestors to show above the selected element */
+export const MAX_PARENT_DEPTH = 2;
+
+/** Max instrumented depth levels to show below the selected element */
+export const MAX_CHILD_DEPTH = 2;

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

@@ -0,0 +1,109 @@
+/** Controller that encapsulates layer-dropdown integration logic */
+
+import { getElementSelectorId } from "../utils.js";
+import { buildLayerChain } from "./utils.js";
+import {
+  enhanceLabelWithChevron,
+  showDropdown,
+  closeDropdown,
+  isDropdownOpen,
+} from "./dropdown-ui.js";
+import type { LayerInfo, LayerControllerConfig, LayerController } from "./types.js";
+
+export function createLayerController(config: LayerControllerConfig): LayerController {
+  let layerPreviewOverlay: HTMLDivElement | null = null;
+  let escapeHandler: ((e: KeyboardEvent) => void) | null = null;
+  let dropdownSourceLayer: LayerInfo | null = null;
+
+  const clearLayerPreview = () => {
+    if (layerPreviewOverlay && layerPreviewOverlay.parentNode) {
+      layerPreviewOverlay.remove();
+    }
+    layerPreviewOverlay = null;
+  };
+
+  const showLayerPreview = (layer: LayerInfo) => {
+    clearLayerPreview();
+    if (getElementSelectorId(layer.element) === config.getSelectedElementId()) return;
+
+    layerPreviewOverlay = config.createPreviewOverlay(layer.element);
+  };
+
+  const selectLayer = (layer: LayerInfo) => {
+    clearLayerPreview();
+    closeDropdown();
+    if (escapeHandler) {
+      document.removeEventListener("keydown", escapeHandler, true);
+      escapeHandler = null;
+    }
+    dropdownSourceLayer = null;
+
+    const firstOverlay = config.selectElement(layer.element);
+    attachToOverlay(firstOverlay, layer.element);
+  };
+
+  const restoreSelection = () => {
+    if (escapeHandler) {
+      document.removeEventListener("keydown", escapeHandler, true);
+      escapeHandler = null;
+    }
+    if (dropdownSourceLayer) {
+      selectLayer(dropdownSourceLayer);
+      dropdownSourceLayer = null;
+    }
+  };
+
+  const handleLabelClick = (e: MouseEvent, label: HTMLDivElement, element: Element, layers: LayerInfo[], currentId: string | null) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (isDropdownOpen()) {
+      closeDropdown();
+      restoreSelection();
+    } else {
+      dropdownSourceLayer = {
+        element,
+        tagName: element.tagName.toLowerCase(),
+        selectorId: currentId,
+      };
+      config.onDeselect();
+
+      escapeHandler = (ev: KeyboardEvent) => {
+        if (ev.key === "Escape") {
+          ev.stopPropagation();
+          closeDropdown();
+          restoreSelection();
+        }
+      };
+      document.addEventListener("keydown", escapeHandler, true);
+
+      showDropdown(label, layers, element, { onSelect: selectLayer, onHover: showLayerPreview, onHoverEnd: clearLayerPreview });
+    }
+  };
+
+  const attachToOverlay = (
+    overlay: HTMLDivElement | undefined,
+    element: Element
+  ) => {
+    if (!overlay) return;
+
+    const label = overlay.querySelector("div") as HTMLDivElement | null;
+    if (!label) return;
+
+    const layers = buildLayerChain(element);
+    if (layers.length <= 1) return;
+
+    const currentId = getElementSelectorId(element);
+    enhanceLabelWithChevron(label);
+
+    label.addEventListener("click", (e: MouseEvent) => {
+      handleLabelClick(e, label, element, layers, currentId);
+    });
+  };
+
+  const cleanup = () => {
+    clearLayerPreview();
+    closeDropdown();
+  };
+
+  return { attachToOverlay, cleanup };
+}