@base44/vite-plugin 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44/vite-plugin",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/injections/utils.ts

@@ -212,3 +212,40 @@ export function resolveHoverTarget(x: number, y: number, selectedElementId: stri
 
   return selectorId;
 }
+
+const VISUAL_EDIT_FONT_FACE_ID_PREFIX = "visual-edit-font-face-";
+
+function isValidFontFaceCss(css: string): boolean {
+  const trimmed = css.trim();
+  if (!trimmed.startsWith("@font-face")) return false;
+
+  if (trimmed.includes("\\")) return false; // Prevent CSS escapes
+
+  const openBraces = (trimmed.match(/{/g) || []).length;
+  const closeBraces = (trimmed.match(/}/g) || []).length;
+  if (openBraces !== 1 || closeBraces !== 1 || !trimmed.endsWith("}")) return false;
+
+  const chunks = trimmed.split(/url\(/i);
+  for (let i = 1; i < chunks.length; i++) {
+    const end = chunks[i]!.indexOf(")");
+    if (end === -1) return false;
+    const url = chunks[i]!.slice(0, end).trim().replace(/^['"]|['"]$/g, "").trim();
+    if (!/^https:\/\//i.test(url)) return false;
+  }
+
+  return true;
+}
+
+export function injectFontFaceCss(id: string, css: string): void {
+  if (typeof id !== "string" || !id.trim()) return;
+  if (typeof css !== "string" || !isValidFontFaceCss(css)) return;
+
+  const styleId = `${VISUAL_EDIT_FONT_FACE_ID_PREFIX}${id}`;
+  if (document.getElementById(styleId)) return;
+
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.dataset.visualEditFontFace = "true";
+  style.textContent = css;
+  document.head.appendChild(style);
+}

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

@@ -1,4 +1,4 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel, injectFontFaceCss } 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";
@@ -648,6 +648,12 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "inject-font-face":
+        if (message.data) {
+          injectFontFaceCss(message.data.id, message.data.css);
+        }
+        break;
+
       case "toggle-inline-edit-mode":
         if (message.data) {
           inlineEdit.handleToggleMessage(message.data);

package/src/processors/static-array-processor.ts

@@ -128,6 +128,9 @@ export class StaticArrayProcessor {
     expr: NodePath<t.MemberExpression>,
     callbackParam: string
   ): string | null {
+    const keyedLookup = this.extractKeyedLookupFieldPath(expr, callbackParam);
+    if (keyedLookup) return keyedLookup;
+
     const parts = this.collectMemberExpressionParts(expr);
     if (!parts) return null;
 
@@ -135,6 +138,20 @@ export class StaticArrayProcessor {
     return rootName === callbackParam ? propertyNames.join(".") : null;
   }
 
+  private extractKeyedLookupFieldPath(
+    expr: NodePath<t.MemberExpression>,
+    callbackParam: string
+  ): string | null {
+    const object = expr.get("object");
+    if (!expr.node.computed || !object.isIdentifier()) return null;
+
+    const property = expr.get("property");
+    if (!property.isMemberExpression()) return null;
+
+    const keyFieldPath = this.extractFieldPath(property, callbackParam);
+    return keyFieldPath ? `${object.node.name}[${keyFieldPath}]` : null;
+  }
+
   private collectMemberExpressionParts(
     expr: NodePath<t.MemberExpression>
   ): { rootName: string; propertyNames: string[] } | null {