@bravostudioai/react 0.1.8 → 0.1.10

package/dist/components/EncoreApp.js

@@ -1,267 +1,294 @@
-import { jsx as i } from "react/jsx-runtime";
-import Y from "swr";
-import _ from "../lib/fetcher.js";
-import d from "../stores/useEncoreState.js";
-import lt, { useRef as q, useEffect as a, useState as O, useCallback as m, useMemo as at, Suspense as dt } from "react";
-import { setLocalModeOverride as B, isLocalMode as $ } from "../lib/localMode.js";
-import ut from "../contexts/EncoreBindingContext.js";
-import ft from "../contexts/EncoreComponentIdContext.js";
-import ht from "../contexts/EncoreActionContext.js";
-import mt from "../contexts/EncoreRepeatingContainerContext.js";
-import pt from "./DynamicComponent.js";
-import { useEncoreRouter as yt } from "../contexts/EncoreRouterContext.js";
-import { usePusherUpdates as gt } from "../hooks/usePusherUpdates.js";
-const wt = ({ to: n, children: l, style: b, ...w }) => {
-  const { navigate: u } = yt();
-  return /* @__PURE__ */ i(
+import { jsx as a } from "react/jsx-runtime";
+import Z from "swr";
+import z from "../lib/fetcher.js";
+import p from "../stores/useEncoreState.js";
+import le, { useRef as Y, useEffect as i, useState as U, useCallback as m, useMemo as ie, Suspense as pe } from "react";
+import { setLocalModeOverride as O, isLocalMode as P } from "../lib/localMode.js";
+import de from "../contexts/EncoreBindingContext.js";
+import fe from "../contexts/EncoreComponentIdContext.js";
+import ue from "../contexts/EncoreActionContext.js";
+import he from "../contexts/EncoreRepeatingContainerContext.js";
+import me from "./DynamicComponent.js";
+import { useEncoreRouter as ye } from "../contexts/EncoreRouterContext.js";
+import { usePusherUpdates as ge } from "../hooks/usePusherUpdates.js";
+const Ee = ({ to: r, children: l, style: v, ...A }) => {
+  const { navigate: d } = ye();
+  return /* @__PURE__ */ a(
     "a",
     {
-      href: n,
-      onClick: (p) => {
-        p.preventDefault(), u(n);
+      href: r,
+      onClick: (y) => {
+        y.preventDefault(), d(r);
       },
-      style: { cursor: "pointer", ...b },
-      ...w,
+      style: { cursor: "pointer", ...v },
+      ...A,
       children: l
     }
   );
-}, vt = (n) => n.setApp, Et = (n) => n.setAppId, Rt = (n) => n.setPageId, xt = (n) => n.assetsById, Dt = ({
-  appId: n,
+}, Ae = (r) => r.setApp, $e = (r) => r.setAppId, we = (r) => r.setPageId, Re = (r) => r.assetsById, Ne = ({
+  appId: r,
   pageId: l,
-  componentId: b,
-  fallback: w,
-  onSizeChange: u,
-  onContentSizeChange: p,
-  onAction: J,
-  data: v,
+  componentId: v,
+  fallback: A,
+  onSizeChange: d,
+  onContentSizeChange: y,
+  onAction: q,
+  data: $,
   source: f,
-  repeatingContainerControls: y,
-  inputGroups: A,
-  baseURL: M,
-  appDefinition: E,
-  pageDefinition: P,
+  repeatingContainerControls: g,
+  inputGroups: b,
+  baseURL: B,
+  appDefinition: w,
+  pageDefinition: x,
   componentCode: Q
 }) => {
-  console.log("Render: EncoreApp"), console.log("🔥 ENCORE-LIB SOURCE CODE IS ACTIVE 🔥"), console.log("✨ ENCORE-LIB UPDATED - TEST MESSAGE ✨"), M && d.getState().baseURL !== M && d.getState().setBaseURL(M), f && B(f === "local" ? "local" : "remote");
-  const X = !1, C = d(vt), L = d(Et), I = d(Rt), g = d(xt), F = q(null), k = q(null);
-  a(() => {
-    if (!p) return;
-    const t = k.current;
+  console.log("Render: EncoreApp"), console.log("🔥 ENCORE-LIB SOURCE CODE IS ACTIVE 🔥"), console.log("✨ ENCORE-LIB UPDATED - TEST MESSAGE ✨"), console.log(
+    `[AG_DEBUG] [EncoreApp] Render Start. appId: ${r}, pageId: ${l}`
+  ), B && p.getState().baseURL !== B && p.getState().setBaseURL(B), f && O(f === "local" ? "local" : "remote");
+  const X = !1, k = p(Ae), M = p($e), F = p(we), E = p(Re), N = Y(null), C = Y(null);
+  i(() => {
+    if (!y) return;
+    const t = C.current;
     if (!t) return;
-    const r = () => {
-      p({
+    const o = () => {
+      y({
         width: t.scrollWidth,
         height: t.scrollHeight
       });
     }, e = new ResizeObserver(() => {
-      r();
+      o();
     });
-    return r(), e.observe(t), () => e.disconnect();
-  }, [p]);
-  const [tt, et] = O(0), rt = m(() => {
-    et((t) => typeof t == "number" ? t + 1 : Date.now());
+    return o(), e.observe(t), () => e.disconnect();
+  }, [y]);
+  const [ee, te] = U(0), oe = m(() => {
+    te((t) => typeof t == "number" ? t + 1 : Date.now());
   }, []);
-  gt({
-    appId: n,
+  ge({
+    appId: r,
     pageId: l || void 0,
-    enabled: !$() && !E,
-    onUpdate: rt
+    enabled: !P() && !w,
+    onUpdate: oe
   });
-  const W = f === "local" || $(), D = E ? null : n && `/devices/apps/${n}${W ? "?useLocal=1" : ""}`, ot = Y(D, _, {
-    suspense: !!D
+  const I = f === "local" || P(), L = w ? null : r && `/devices/apps/${r}${I ? "?useLocal=1" : ""}`, ne = Z(L, z, {
+    suspense: !!L
     // Only use suspense if we are fetching
-  }), h = E ? { data: E } : ot;
-  a(() => {
-    C(h.data);
-  }, [h.data, C]), a(() => {
-    const t = h?.data?.app?.fonts ?? [];
-    !t || t.length === 0 || typeof window > "u" || !("FontFace" in window) || t.forEach((r) => {
+  }), u = w ? { data: w } : ne;
+  i(() => {
+    k(u.data);
+  }, [u.data, k]), i(() => {
+    const t = u?.data?.app?.fonts ?? [];
+    console.log(
+      `[AG_DEBUG] [EncoreApp] 🔎 Font check initiated. Found ${t?.length || 0} fonts in app definition.`
+    ), t && t.length > 0 && console.log(
+      "[AG_DEBUG] [EncoreApp] Font list:",
+      t.map(
+        (o) => `${o.fontName?.family} (${o.fontName?.postScriptName}) - Broken: ${o.broken} - URL: ${o.url}`
+      )
+    ), !(!t || t.length === 0) && (typeof window > "u" || !("FontFace" in window) || t.forEach((o) => {
       try {
-        const e = r?.fontName?.family, o = r?.url, s = r?.fontName?.postScriptName;
-        if (!e || !o) return;
-        let c;
-        if (s) {
-          const x = s.match(
-            /(?:^|-)(Thin|ExtraLight|Light|Regular|Medium|SemiBold|Bold|ExtraBold|Black)(?:-|$)/i
+        const e = o?.fontName?.family, n = o?.url, s = o?.fontName?.postScriptName;
+        if (!e || !n) return;
+        o.broken && console.warn(
+          `[EncoreApp] Font "${s || e}" is marked as broken in the database. URL: ${n}`
+        );
+        const c = s || e;
+        new FontFace(c, `url(${n})`, {
+          weight: "100 900",
+          style: "normal"
+        }).load().then((G) => {
+          document.fonts.add(G), console.log(
+            `[AG_DEBUG] [EncoreApp] ✅ Font loaded successfully: "${c}" - Source: ${n}`
+          );
+          const ae = document.fonts.check(
+            `400 12px "${c}"`
+          );
+          console.log(
+            `[AG_DEBUG] [EncoreApp] 🧪 document.fonts.check result for "${c}": ${ae}`
+          );
+        }).catch((G) => {
+          console.warn(
+            `[AG_DEBUG] [EncoreApp] ❌ Failed to load font "${s || e}" from ${n}`,
+            G
           );
-          if (x) {
-            const it = x[1].toLowerCase();
-            c = {
-              thin: 100,
-              extralight: 200,
-              light: 300,
-              regular: 400,
-              medium: 500,
-              semibold: 600,
-              bold: 700,
-              extrabold: 800,
-              black: 900
-            }[it] || 400;
-          }
-        }
-        (c !== void 0 ? new FontFace(e, `url(${o})`, { weight: c.toString() }) : new FontFace(e, `url(${o})`)).load().then((x) => {
-          document.fonts.add(x);
-        }).catch(() => {
         });
-      } catch {
+      } catch (e) {
+        console.warn("[EncoreApp] Error processing font:", e);
       }
-    });
-  }, [h?.data]), a(() => {
-    L(n);
-  }, [n, L]), a(() => {
-    l && I(l);
-  }, [l, I]), a(() => {
-    Object.keys(g).length !== 0 && (async () => await Promise.allSettled(
-      Object.keys(g).map((t) => g[t].url ? new Promise((r) => {
+    }));
+  }, [u?.data]), i(() => {
+    M(r);
+  }, [r, M]), i(() => {
+    l && F(l);
+  }, [l, F]), i(() => {
+    Object.keys(E).length !== 0 && (async () => await Promise.allSettled(
+      Object.keys(E).map((t) => E[t].url ? new Promise((o) => {
         const e = new Image();
-        e.onload = r, e.onerror = r, e.src = g[t].url;
+        e.onload = o, e.onerror = o, e.src = E[t].url;
       }) : Promise.resolve())
     ))();
-  }, [g]);
-  const N = P ? null : n && l && `/devices/apps/${n}/node/${l}${W ? "?useLocal=1" : ""}`, nt = Y(N, _, { suspense: !!N }), U = P ? { data: P } : nt, st = at(() => {
-    let t = U.data?.clientData;
-    const r = (e) => {
+  }, [E]);
+  const D = x ? null : r && l && `/devices/apps/${r}/node/${l}${I ? "?useLocal=1" : ""}`;
+  console.log(`[AG_DEBUG] [EncoreApp] pageUrl: ${D}`);
+  const re = Z(D, z, { suspense: !!D }), h = x ? { data: x } : re;
+  console.log(
+    `[AG_DEBUG] [EncoreApp] pageData.data type: ${typeof h?.data}, hasData: ${!!h?.data}`
+  ), h?.data && console.log(
+    `[AG_DEBUG] [EncoreApp] pageData.data JSON: ${JSON.stringify(
+      h.data
+    ).substring(0, 1e3)}`
+  );
+  const se = ie(() => {
+    let t = h.data?.clientData;
+    console.log(
+      `[AG_DEBUG] [EncoreApp] useMemo: clientData present? ${!!t}, Keys: ${Object.keys(
+        t || {}
+      )}`
+    );
+    const o = (e) => {
       if (!(!e || typeof e != "object")) {
-        if (e.children && Array.isArray(e.children) && e.children.length > 1) {
-          let o = 0, s = 0;
+        if ((e.componentId || e.type === "component:text") && console.log(
+          `[AG_DEBUG] [EncoreApp] 📦 Node ${e.id} (${e.type}) Style:`,
+          JSON.stringify(e.style)
+        ), e.children && Array.isArray(e.children) && e.children.length > 1) {
+          let n = 0, s = 0;
           e.children.forEach((S) => {
-            S.style?.width && (o += S.style.width, s++);
-          }), (Math.abs(o - 100) < 1 || Math.abs(o - 375) < 5) && s >= 2 && (e.style || (e.style = {}), e.style.layout || (e.style.layout = {}), e.style.layout.mode || (console.log(
-            `[PATCH] Forcing HORIZONTAL layout for node ${e.id} (${s} children, widths sum: ${o})`
+            S.style?.width && (n += S.style.width, s++);
+          }), (Math.abs(n - 100) < 1 || Math.abs(n - 375) < 5) && s >= 2 && (e.style || (e.style = {}), e.style.layout || (e.style.layout = {}), e.style.layout.mode || (console.log(
+            `[PATCH] Forcing HORIZONTAL layout for node ${e.id} (${s} children, widths sum: ${n})`
           ), e.style.layout.mode = "HORIZONTAL", e.style.layout.primaryAxisAlignItems = "flex-start", e.style.layout.counterAxisAlignItems = "flex-start"));
         }
-        e.children && (Array.isArray(e.children) ? e.children.forEach(r) : r(e.children));
+        e.children && (Array.isArray(e.children) ? e.children.forEach(o) : o(e.children));
       }
     };
-    return t && r(t), {
+    return t && o(t), {
       nodeData: void 0,
       // Allow overriding specific values by element id.
       // For now, this is used to override TextComponent content when the node has the PROP:TEXT_VAR tag.
-      textOverridesById: v,
+      textOverridesById: $,
       // Support for encore:data:array tags - provide array data by component ID
-      arrayDataById: v,
+      arrayDataById: $,
       // Support for standalone component data binding (encore:data tags at root level)
-      rootData: v
+      rootData: $
     };
-  }, [U.data?.clientData, v]), [j, T] = O(/* @__PURE__ */ new Map()), [R, H] = O(/* @__PURE__ */ new Map());
-  a(() => {
-    y && H((t) => {
-      let r = !1;
-      if (t.size !== Object.keys(y).length)
-        r = !0;
+  }, [h.data?.clientData, $]), [_, W] = U(/* @__PURE__ */ new Map()), [R, j] = U(/* @__PURE__ */ new Map());
+  i(() => {
+    g && j((t) => {
+      let o = !1;
+      if (t.size !== Object.keys(g).length)
+        o = !0;
       else
-        for (const [o, s] of Object.entries(
-          y
+        for (const [n, s] of Object.entries(
+          g
         )) {
-          const c = t.get(o);
+          const c = t.get(n);
           if (!c) {
-            r = !0;
+            o = !0;
             break;
           }
           if (c.currentIndex !== s.currentIndex || c.onIndexChange !== s.onIndexChange) {
-            r = !0;
+            o = !0;
             break;
           }
         }
-      if (!r) return t;
+      if (!o) return t;
       const e = /* @__PURE__ */ new Map();
-      return Object.entries(y).forEach(([o, s]) => {
-        e.set(o, s);
+      return Object.entries(g).forEach(([n, s]) => {
+        e.set(n, s);
       }), e;
     });
-  }, [y]), a(() => {
-    if (A) {
-      const t = d.getState().setInputGroupValue;
-      Object.entries(A).forEach(([r, e]) => {
-        t(r, e);
+  }, [g]), i(() => {
+    if (b) {
+      const t = p.getState().setInputGroupValue;
+      Object.entries(b).forEach(([o, e]) => {
+        t(o, e);
       });
     }
-  }, [A]);
-  const V = m(
-    (t, r) => {
-      T((e) => {
-        const o = new Map(e);
-        return o.set(t, r), o;
+  }, [b]);
+  const T = m(
+    (t, o) => {
+      W((e) => {
+        const n = new Map(e);
+        return n.set(t, o), n;
       });
     },
     []
-  ), K = m((t) => {
-    T((r) => {
-      const e = new Map(r);
+  ), H = m((t) => {
+    W((o) => {
+      const e = new Map(o);
       return e.delete(t), e;
     });
-  }, []), Z = m(
-    (t) => j.get(t),
-    [j]
-  ), z = m(
-    (t, r) => {
-      H((e) => {
-        const o = new Map(e), s = o.get(t) || {}, c = typeof r == "function" ? r(s) : r;
-        return o.set(t, c), o;
+  }, []), V = m(
+    (t) => _.get(t),
+    [_]
+  ), J = m(
+    (t, o) => {
+      j((e) => {
+        const n = new Map(e), s = n.get(t) || {}, c = typeof o == "function" ? o(s) : o;
+        return n.set(t, c), n;
       });
     },
     []
-  ), G = m(
+  ), K = m(
     (t) => R.get(t),
     [R]
-  ), ct = lt.useMemo(
+  ), ce = le.useMemo(
     () => ({
-      registerContainer: V,
-      unregisterContainer: K,
-      getControl: Z,
-      setControlProps: z,
-      getControlProps: G,
+      registerContainer: T,
+      unregisterContainer: H,
+      getControl: V,
+      setControlProps: J,
+      getControlProps: K,
       // Include controlPropsMap size in the value to trigger re-renders when it changes
       _propsVersion: R.size
     }),
     [
+      T,
+      H,
       V,
+      J,
       K,
-      Z,
-      z,
-      G,
       R.size
     ]
   );
-  return a(() => {
-    if (!u) return;
-    const t = F.current;
+  return i(() => {
+    if (!d) return;
+    const t = N.current;
     if (!t) return;
-    const r = (s) => {
+    const o = (s) => {
       const c = s.contentRect;
-      u({ width: c.width, height: c.height });
+      d({ width: c.width, height: c.height });
     }, e = new ResizeObserver((s) => {
       for (const c of s)
-        r(c);
-    }), o = t.getBoundingClientRect();
-    return u({ width: o.width, height: o.height }), e.observe(t), () => {
+        o(c);
+    }), n = t.getBoundingClientRect();
+    return d({ width: n.width, height: n.height }), e.observe(t), () => {
       e.disconnect();
     };
-  }, [u]), a(() => {
+  }, [d]), i(() => {
     if (f)
-      return B(f === "local" ? "local" : "remote"), () => {
-        B(null);
+      return O(f === "local" ? "local" : "remote"), () => {
+        O(null);
       };
-  }, [f]), l ? /* @__PURE__ */ i(
+  }, [f]), l ? /* @__PURE__ */ a(
     "div",
     {
-      ref: F,
+      ref: N,
       style: {
         width: "100%",
         height: "100%",
         position: "relative",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ i("div", { ref: k, style: { width: "100%", minHeight: "100%" }, children: /* @__PURE__ */ i(dt, { fallback: w || /* @__PURE__ */ i("div", {}), children: /* @__PURE__ */ i(ft.Provider, { value: { componentId: b }, children: /* @__PURE__ */ i(ht.Provider, { value: { onAction: J }, children: /* @__PURE__ */ i(
-        mt.Provider,
+      children: /* @__PURE__ */ a("div", { ref: C, style: { width: "100%", minHeight: "100%" }, children: /* @__PURE__ */ a(pe, { fallback: A || /* @__PURE__ */ a("div", {}), children: /* @__PURE__ */ a(fe.Provider, { value: { componentId: v }, children: /* @__PURE__ */ a(ue.Provider, { value: { onAction: q }, children: /* @__PURE__ */ a(
+        he.Provider,
         {
-          value: ct,
-          children: /* @__PURE__ */ i(ut.Provider, { value: st, children: /* @__PURE__ */ i(
-            pt,
+          value: ce,
+          children: /* @__PURE__ */ a(de.Provider, { value: se, children: /* @__PURE__ */ a(
+            me,
             {
-              name: `${n}/draft/components/${l}`,
-              fallback: w,
-              reloadKey: tt,
+              name: `${r}/draft/components/${l}`,
+              fallback: A,
+              reloadKey: ee,
               componentCode: Q,
               children: " "
             }
@@ -269,15 +296,15 @@ const wt = ({ to: n, children: l, style: b, ...w }) => {
         }
       ) }) }) }) })
     }
-  ) : /* @__PURE__ */ i("div", { style: { padding: "30px" }, children: /* @__PURE__ */ i("div", { style: { overflowY: "auto" }, children: ($() ? (
+  ) : /* @__PURE__ */ a("div", { style: { padding: "30px" }, children: /* @__PURE__ */ a("div", { style: { overflowY: "auto" }, children: (P() ? (
     // Local mode: app.json provides pages under app.data.pages
-    (h?.data?.app?.data?.pages || []).map(
+    (u?.data?.app?.data?.pages || []).map(
       (t) => t?.id
     )
-  ) : h?.data?.app.pageIds || []).map((t) => /* @__PURE__ */ i(
-    wt,
+  ) : u?.data?.app.pageIds || []).map((t) => /* @__PURE__ */ a(
+    Ee,
     {
-      to: `/apps/${n}/pages/${t}?noRedirect=${X}`,
+      to: `/apps/${r}/pages/${t}?noRedirect=${X}`,
       style: {
         fontSize: 20,
         display: "block",
@@ -289,6 +316,6 @@ const wt = ({ to: n, children: l, style: b, ...w }) => {
   )) }) });
 };
 export {
-  Dt as default
+  Ne as default
 };
 //# sourceMappingURL=EncoreApp.js.map