@developer_tribe/react-builder 1.0.9 → 1.2.0

package/src/build-components/Text/pattern.json

@@ -7,19 +7,8 @@
     "attributes": {
       "color": "color",
       "fontSize": "size",
-      "fontWeight": [
-        "normal",
-        "bold",
-        "100",
-        "200",
-        "300",
-        "400",
-        "500",
-        "600",
-        "700",
-        "800",
-        "900"
-      ],
+      "fontFamily": "fontFamily",
+      "fontWeight": "fontWeight",
       "textAlign": ["left", "center", "right", "justify"],
       "adjustsFontSizeToFit": "boolean",
       "showEllipsis": "boolean"
@@ -45,33 +34,40 @@
         "sort": 2,
         "preferedScale": "s"
       },
+      "fontFamily": {
+        "label": "Font Family",
+        "description": "Font family used for the text.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
       "fontWeight": {
         "label": "Font Weight",
         "description": "Text weight.",
         "category": "style",
         "specialCategory": null,
-        "sort": 3
+        "sort": 4
       },
       "textAlign": {
         "label": "Text Align",
         "description": "Text alignment.",
         "category": "style",
         "specialCategory": null,
-        "sort": 4
+        "sort": 5
       },
       "adjustsFontSizeToFit": {
         "label": "Adjust Font Size To Fit",
         "description": "Automatically reduces font size to fit the available space.",
         "category": "style",
         "specialCategory": null,
-        "sort": 5
+        "sort": 6
       },
       "showEllipsis": {
         "label": "Show Ellipsis",
         "description": "If text overflows, show ellipsis (…); applied as single-line truncation.",
         "category": "style",
         "specialCategory": null,
-        "sort": 6
+        "sort": 7
       }
     }
   }

package/src/build-components/patterns.generated.ts

@@ -10,19 +10,8 @@ export const patterns = [
       attributes: {
         color: 'color',
         fontSize: 'size',
-        fontWeight: [
-          'normal',
-          'bold',
-          '100',
-          '200',
-          '300',
-          '400',
-          '500',
-          '600',
-          '700',
-          '800',
-          '900',
-        ],
+        fontFamily: 'fontFamily',
+        fontWeight: 'fontWeight',
         textAlign: ['left', 'center', 'right', 'justify'],
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
@@ -91,19 +80,26 @@ export const patterns = [
           sort: 2,
           preferedScale: 's',
         },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
         fontWeight: {
           label: 'Font Weight',
           description: 'Text weight.',
           category: 'style',
           specialCategory: null,
-          sort: 3,
+          sort: 4,
         },
         textAlign: {
           label: 'Text Align',
           description: 'Text alignment.',
           category: 'style',
           specialCategory: null,
-          sort: 4,
+          sort: 5,
         },
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
@@ -111,7 +107,7 @@ export const patterns = [
             'Automatically reduces font size to fit the available space.',
           category: 'style',
           specialCategory: null,
-          sort: 5,
+          sort: 6,
         },
         showEllipsis: {
           label: 'Show Ellipsis',
@@ -119,7 +115,7 @@ export const patterns = [
             'If text overflows, show ellipsis (…); applied as single-line truncation.',
           category: 'style',
           specialCategory: null,
-          sort: 6,
+          sort: 7,
         },
         scrollable: {
           label: 'Scrollable',
@@ -5294,19 +5290,8 @@ export const patterns = [
       attributes: {
         color: 'color',
         fontSize: 'size',
-        fontWeight: [
-          'normal',
-          'bold',
-          '100',
-          '200',
-          '300',
-          '400',
-          '500',
-          '600',
-          '700',
-          '800',
-          '900',
-        ],
+        fontFamily: 'fontFamily',
+        fontWeight: 'fontWeight',
         textAlign: ['left', 'center', 'right', 'justify'],
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
@@ -5379,19 +5364,26 @@ export const patterns = [
           sort: 2,
           preferedScale: 's',
         },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
         fontWeight: {
           label: 'Font Weight',
           description: 'Text weight.',
           category: 'style',
           specialCategory: null,
-          sort: 3,
+          sort: 4,
         },
         textAlign: {
           label: 'Text Align',
           description: 'Text alignment.',
           category: 'style',
           specialCategory: null,
-          sort: 4,
+          sort: 5,
         },
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
@@ -5399,7 +5391,7 @@ export const patterns = [
             'Automatically reduces font size to fit the available space.',
           category: 'style',
           specialCategory: null,
-          sort: 5,
+          sort: 6,
         },
         showEllipsis: {
           label: 'Show Ellipsis',
@@ -5407,7 +5399,7 @@ export const patterns = [
             'If text overflows, show ellipsis (…); applied as single-line truncation.',
           category: 'style',
           specialCategory: null,
-          sort: 6,
+          sort: 7,
         },
         scrollable: {
           label: 'Scrollable',
@@ -6874,19 +6866,8 @@ export const patterns = [
       attributes: {
         color: 'color',
         fontSize: 'size',
-        fontWeight: [
-          'normal',
-          'bold',
-          '100',
-          '200',
-          '300',
-          '400',
-          '500',
-          '600',
-          '700',
-          '800',
-          '900',
-        ],
+        fontFamily: 'fontFamily',
+        fontWeight: 'fontWeight',
         textAlign: ['left', 'center', 'right', 'justify'],
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
@@ -6952,19 +6933,26 @@ export const patterns = [
           sort: 2,
           preferedScale: 's',
         },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
         fontWeight: {
           label: 'Font Weight',
           description: 'Text weight.',
           category: 'style',
           specialCategory: null,
-          sort: 3,
+          sort: 4,
         },
         textAlign: {
           label: 'Text Align',
           description: 'Text alignment.',
           category: 'style',
           specialCategory: null,
-          sort: 4,
+          sort: 5,
         },
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
@@ -6972,7 +6960,7 @@ export const patterns = [
             'Automatically reduces font size to fit the available space.',
           category: 'style',
           specialCategory: null,
-          sort: 5,
+          sort: 6,
         },
         showEllipsis: {
           label: 'Show Ellipsis',
@@ -6980,7 +6968,7 @@ export const patterns = [
             'If text overflows, show ellipsis (…); applied as single-line truncation.',
           category: 'style',
           specialCategory: null,
-          sort: 6,
+          sort: 7,
         },
         scrollable: {
           label: 'Scrollable',
@@ -7293,19 +7281,8 @@ export const patterns = [
       attributes: {
         color: 'color',
         fontSize: 'size',
-        fontWeight: [
-          'normal',
-          'bold',
-          '100',
-          '200',
-          '300',
-          '400',
-          '500',
-          '600',
-          '700',
-          '800',
-          '900',
-        ],
+        fontFamily: 'fontFamily',
+        fontWeight: 'fontWeight',
         textAlign: ['left', 'center', 'right', 'justify'],
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
@@ -7371,19 +7348,26 @@ export const patterns = [
           sort: 2,
           preferedScale: 's',
         },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
         fontWeight: {
           label: 'Font Weight',
           description: 'Text weight.',
           category: 'style',
           specialCategory: null,
-          sort: 3,
+          sort: 4,
         },
         textAlign: {
           label: 'Text Align',
           description: 'Text alignment.',
           category: 'style',
           specialCategory: null,
-          sort: 4,
+          sort: 5,
         },
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
@@ -7391,7 +7375,7 @@ export const patterns = [
             'Automatically reduces font size to fit the available space.',
           category: 'style',
           specialCategory: null,
-          sort: 5,
+          sort: 6,
         },
         showEllipsis: {
           label: 'Show Ellipsis',
@@ -7399,7 +7383,7 @@ export const patterns = [
             'If text overflows, show ellipsis (…); applied as single-line truncation.',
           category: 'style',
           specialCategory: null,
-          sort: 6,
+          sort: 7,
         },
         scrollable: {
           label: 'Scrollable',
@@ -8066,19 +8050,8 @@ export const patterns = [
         strokeWidth: 'number',
         color: 'color',
         fontSize: 'size',
-        fontWeight: [
-          'normal',
-          'bold',
-          '100',
-          '200',
-          '300',
-          '400',
-          '500',
-          '600',
-          '700',
-          '800',
-          '900',
-        ],
+        fontFamily: 'fontFamily',
+        fontWeight: 'fontWeight',
         textAlign: ['left', 'center', 'right', 'justify'],
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
@@ -8165,19 +8138,26 @@ export const patterns = [
           sort: 2,
           preferedScale: 's',
         },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
         fontWeight: {
           label: 'Font Weight',
           description: 'Text weight.',
           category: 'style',
           specialCategory: null,
-          sort: 3,
+          sort: 4,
         },
         textAlign: {
           label: 'Text Align',
           description: 'Text alignment.',
           category: 'style',
           specialCategory: null,
-          sort: 4,
+          sort: 5,
         },
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
@@ -8185,7 +8165,7 @@ export const patterns = [
             'Automatically reduces font size to fit the available space.',
           category: 'style',
           specialCategory: null,
-          sort: 5,
+          sort: 6,
         },
         showEllipsis: {
           label: 'Show Ellipsis',
@@ -8193,7 +8173,7 @@ export const patterns = [
             'If text overflows, show ellipsis (…); applied as single-line truncation.',
           category: 'style',
           specialCategory: null,
-          sort: 6,
+          sort: 7,
         },
         scrollable: {
           label: 'Scrollable',
@@ -10038,19 +10018,8 @@ export const patterns = [
         zIndex: 'number',
         color: 'color',
         fontSize: 'size',
-        fontWeight: [
-          'normal',
-          'bold',
-          '100',
-          '200',
-          '300',
-          '400',
-          '500',
-          '600',
-          '700',
-          '800',
-          '900',
-        ],
+        fontFamily: 'fontFamily',
+        fontWeight: 'fontWeight',
         textAlign: ['left', 'center', 'right', 'justify'],
         adjustsFontSizeToFit: 'boolean',
         showEllipsis: 'boolean',
@@ -10366,19 +10335,26 @@ export const patterns = [
           sort: 2,
           preferedScale: 's',
         },
+        fontFamily: {
+          label: 'Font Family',
+          description: 'Font family used for the text.',
+          category: 'style',
+          specialCategory: null,
+          sort: 3,
+        },
         fontWeight: {
           label: 'Font Weight',
           description: 'Text weight.',
           category: 'style',
           specialCategory: null,
-          sort: 3,
+          sort: 4,
         },
         textAlign: {
           label: 'Text Align',
           description: 'Text alignment.',
           category: 'style',
           specialCategory: null,
-          sort: 4,
+          sort: 5,
         },
         adjustsFontSizeToFit: {
           label: 'Adjust Font Size To Fit',
@@ -10386,7 +10362,7 @@ export const patterns = [
             'Automatically reduces font size to fit the available space.',
           category: 'style',
           specialCategory: null,
-          sort: 5,
+          sort: 6,
         },
         showEllipsis: {
           label: 'Show Ellipsis',
@@ -10394,7 +10370,7 @@ export const patterns = [
             'If text overflows, show ellipsis (…); applied as single-line truncation.',
           category: 'style',
           specialCategory: null,
-          sort: 6,
+          sort: 7,
         },
       },
     },

package/src/components/BuilderButton.tsx

@@ -19,14 +19,8 @@ export function BuilderButton({
   onMoveUp,
   onMoveDown,
 }: BuilderButtonProps) {
-  if (isNodeNullOrUndefined(node)) {
-    return <div className="builder__placeholder">Null or undefined</div>;
-  }
-  if (isNodeString(node)) {
-    return <div className="builder__text">{node as string}</div>;
-  }
-  const nodeData = node as NodeData<NodeDefaultAttribute>;
-
+  // IMPORTANT: Hooks must be called unconditionally on every render.
+  // (Early returns before hooks can trigger React internal invariants.)
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const actionsRef = useRef<HTMLDivElement | null>(null);
   const menuId = useMemo(
@@ -35,9 +29,9 @@ export function BuilderButton({
   );
 
   const handleDelete = () => {
-    if (onDelete) {
-      onDelete(node);
-    }
+    if (!onDelete) return;
+    if (isNodeNullOrUndefined(node) || isNodeString(node)) return;
+    onDelete(node);
   };
 
   // Copy/Paste intentionally removed for now.
@@ -66,6 +60,14 @@ export function BuilderButton({
     };
   }, [isMenuOpen]);
 
+  if (isNodeNullOrUndefined(node)) {
+    return <div className="builder__placeholder">Null or undefined</div>;
+  }
+  if (isNodeString(node)) {
+    return <div className="builder__text">{node as string}</div>;
+  }
+
+  const nodeData = node as NodeData<NodeDefaultAttribute>;
   let extra = '';
   if (nodeData.attributes?.condition) {
     extra = ` (${nodeData.attributes.condition} ${nodeData.attributes.conditionVariable})`;

package/src/hooks/useProjectFonts.ts

@@ -0,0 +1,130 @@
+import { useEffect } from 'react';
+import type { Fonts } from '../types/Fonts';
+import { useRenderStore } from '../store';
+import { loadFontFamily } from '../utils/loadFontFamily';
+import { fontsDebug } from '../utils/fontsDebug';
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function loadWithDeadline<T>(
+  task: Promise<T>,
+  deadlineMs: number,
+): Promise<T> {
+  if (!Number.isFinite(deadlineMs) || deadlineMs <= 0) {
+    return await task;
+  }
+  return (await Promise.race([
+    task,
+    sleep(deadlineMs).then(() => {
+      throw new Error('timeout');
+    }),
+  ])) as T;
+}
+
+type UseProjectFontsParams = {
+  fonts: Fonts;
+  appFont: string | undefined;
+};
+
+/**
+ * Syncs project-provided fonts into the library store and ensures appFont is loaded (web).
+ * Loading behavior:
+ * - keep waiting while the load is in-flight
+ * - stop only when it loads, an error is thrown, or 10s deadline passes
+ */
+export function useProjectFonts({ fonts, appFont }: UseProjectFontsParams) {
+  useEffect(() => {
+    fontsDebug.info('useProjectFonts: effect start', {
+      appFont,
+      fontsCount: Array.isArray(fonts) ? fonts.length : 'not-array',
+    });
+    const {
+      setFonts,
+      setAppFont,
+      setErrors,
+      addError,
+      loadedFonts,
+      markFontLoaded,
+    } = useRenderStore.getState();
+
+    fontsDebug.info('useProjectFonts: storing fonts/appFont in store', {
+      appFont,
+      fontsCount: Array.isArray(fonts) ? fonts.length : 'not-array',
+    });
+    setFonts(fonts);
+    setAppFont(appFont);
+    setErrors([]);
+
+    let cancelled = false;
+
+    const run = async () => {
+      const normalizedAppFont =
+        typeof appFont === 'string' ? appFont.trim() : '';
+      if (!normalizedAppFont) {
+        fontsDebug.warn('useProjectFonts: appFont missing/empty');
+        setErrors(['appFont is undefined']);
+        return;
+      }
+
+      if (cancelled) return;
+
+      const exists =
+        Array.isArray(fonts) &&
+        fonts.some(
+          (f) =>
+            f?.name === normalizedAppFont &&
+            f?.family &&
+            typeof f.family === 'object' &&
+            Object.keys(f.family).length > 0,
+        );
+
+      if (!exists) {
+        fontsDebug.warn('useProjectFonts: appFont not found in fonts', {
+          normalizedAppFont,
+        });
+        setErrors([`appFont "${normalizedAppFont}" not found in fonts`]);
+        return;
+      }
+
+      if (
+        Array.isArray(loadedFonts) &&
+        loadedFonts.includes(normalizedAppFont)
+      ) {
+        fontsDebug.info(
+          'useProjectFonts: appFont already loaded (store cache)',
+          {
+            normalizedAppFont,
+          },
+        );
+        return;
+      }
+
+      fontsDebug.info('useProjectFonts: loading appFont', {
+        normalizedAppFont,
+        deadlineMs: 10_000,
+      });
+      await loadWithDeadline(
+        loadFontFamily(fonts, normalizedAppFont, { forceFetch: true }),
+        10_000,
+      );
+      if (cancelled) return;
+      markFontLoaded(normalizedAppFont);
+      fontsDebug.info('useProjectFonts: appFont loaded', { normalizedAppFont });
+    };
+
+    void run().catch((e) => {
+      if (cancelled) return;
+      fontsDebug.compactError('useProjectFonts: failed', e, { appFont });
+      addError(
+        `Failed to initialize fonts: ${e instanceof Error ? e.message : String(e)}`,
+      );
+    });
+
+    return () => {
+      fontsDebug.info('useProjectFonts: cleanup');
+      cancelled = true;
+    };
+  }, [fonts, appFont]);
+}

package/src/index.ts

@@ -16,6 +16,7 @@ export { useLocalize } from './hooks/useLocalize';
 export type { TargetedScreenSize } from './types/TargetedScreenSize';
 export type { Node, NodeData, NodeDefaultAttribute } from './types/Node';
 export type { Project, ProjectColors } from './types/Project';
+export type { Fonts, FontDefinition } from './types/Fonts';
 export {
   isNodeNullOrUndefined,
   isNodeString,

package/src/pages/ProjectPage.tsx

@@ -34,6 +34,8 @@ import {
   isNodeRecord,
   nodeHasChild,
 } from '../utils/nodeTree';
+import type { Fonts } from '../types/Fonts';
+import { useProjectFonts } from '../hooks/useProjectFonts';
 export type ProjectPageProps = {
   project: Project;
   onSaveProject: (project: Project) => void;
@@ -42,6 +44,9 @@ export type ProjectPageProps = {
   projectColors?: ProjectColors;
   onSaveProjectColors?: (colors: ProjectColors) => void;
   name?: string;
+  fonts: Fonts;
+  // NOTE: appFont is required as a prop to force the host to think about it.
+  appFont: string | undefined;
 };
 
 const MOBILE_BREAKPOINT = 1000;
@@ -54,9 +59,12 @@ export function ProjectPage({
   projectColors,
   onSaveProjectColors,
   name,
+  fonts,
+  appFont,
 }: ProjectPageProps) {
   useLogRender('ProjectPage');
   useSyncHtmlThemeClass();
+  useProjectFonts({ fonts, appFont });
   const resolvedName = name ?? project.name;
   const resolvedProjectColors = projectColors ?? project.projectColors;
   const isEmptyProjectData =