@developer_tribe/react-builder 1.0.9 → 1.2.0

package/dist/pages/ProjectPage.d.ts

@@ -1,6 +1,7 @@
 import type { Project, ProjectColors } from '../types/Project';
 import { AppConfig } from '../types/PreviewConfig';
 import type { LogLevel } from '../types/Project';
+import type { Fonts } from '../types/Fonts';
 export type ProjectPageProps = {
     project: Project;
     onSaveProject: (project: Project) => void;
@@ -9,5 +10,7 @@ export type ProjectPageProps = {
     projectColors?: ProjectColors;
     onSaveProjectColors?: (colors: ProjectColors) => void;
     name?: string;
+    fonts: Fonts;
+    appFont: string | undefined;
 };
-export declare function ProjectPage({ project, appConfig, onSaveProject, logLevel, projectColors, onSaveProjectColors, name, }: ProjectPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProjectPage({ project, appConfig, onSaveProject, logLevel, projectColors, onSaveProjectColors, name, fonts, appFont, }: ProjectPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/store.d.ts

@@ -4,6 +4,7 @@ import { Node } from './types/Node';
 import type { LogEntry, LogLevel, ProjectColors } from './types/Project';
 import type { Product } from './paywall/types/paywall-types';
 import type { PaywallBenefits, PaywallBenefitValue } from './paywall/types/benefits';
+import type { Fonts } from './types/Fonts';
 type RenderStore = {
     projectName: string;
     setProjectName: (name: string) => void;
@@ -41,6 +42,16 @@ type RenderStore = {
         timestamp?: number;
     }) => void;
     clearLogs: () => void;
+    fonts: Fonts;
+    setFonts: (fonts: Fonts) => void;
+    appFont: string | undefined;
+    setAppFont: (appFont: string | undefined) => void;
+    errors: string[];
+    setErrors: (errors: string[]) => void;
+    addError: (error: string) => void;
+    clearErrors: () => void;
+    loadedFonts: string[];
+    markFontLoaded: (fontFamily: string) => void;
 };
 export declare const useRenderStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand/vanilla").StoreApi<RenderStore>, "setState" | "persist"> & {
     setState(partial: RenderStore | Partial<RenderStore> | ((state: RenderStore) => RenderStore | Partial<RenderStore>), replace?: false | undefined): unknown;

package/dist/types/Fonts.d.ts

@@ -0,0 +1,12 @@
+/** CSS font-weight key (usually "100".."900"). */
+export type FontWeightKey = string;
+/** URL to a font file (ttf/otf/woff/woff2). */
+export type FontFileUrl = string;
+/** Map of font-weight -> font file URL. */
+export type FontFamilySources = Record<FontWeightKey, FontFileUrl>;
+export type FontDefinition = {
+    name: string;
+    family: FontFamilySources;
+    projects?: string[];
+};
+export type Fonts = FontDefinition[];

package/dist/utils/fontWeight.d.ts

@@ -0,0 +1,3 @@
+export declare const FONT_WEIGHT_OPTIONS: readonly ["normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
+export type FontWeightOption = (typeof FONT_WEIGHT_OPTIONS)[number];
+export declare function normalizeFontWeight(value: unknown): FontWeightOption | undefined;

package/dist/utils/fontsDebug.d.ts

@@ -0,0 +1,12 @@
+type Payload = unknown;
+/**
+ * Intentionally silent logger for font pipeline.
+ * (We keep the interface so call sites don't need to change.)
+ */
+export declare const fontsDebug: {
+    info(_message: string, _payload?: Payload): void;
+    warn(_message: string, _payload?: Payload): void;
+    error(_message: string, _payload?: Payload): void;
+    compactError(_message: string, _error: unknown, _payload?: Payload): void;
+};
+export {};

package/dist/utils/loadFontFamily.d.ts

@@ -0,0 +1,30 @@
+import type { Fonts, FontDefinition } from '../types/Fonts';
+export declare function findFontDefinition(fonts: Fonts, familyName: string): FontDefinition | undefined;
+/**
+ * Given a family sources map (weightKey -> url) and a requested weight,
+ * returns the closest available weight key (or a sensible fallback).
+ */
+export declare function resolveClosestFontWeightKey(family: Record<string, string>, requestedWeight?: string): string | undefined;
+export declare function resolveFontSourceForWeight(family: Record<string, string>, requestedWeight?: string): {
+    weight: string;
+    url: string;
+} | undefined;
+type LoadFontFamilyOptions = {
+    preferWeight?: string;
+    /**
+     * If true (default), fetch the font file via `fetch()` first so:
+     * - the request is visible in DevTools Network (Fetch/XHR)
+     * - we can log response status and surface CORS/404 clearly
+     *
+     * If false, falls back to `new FontFace(name, 'url(...)')`.
+     */
+    forceFetch?: boolean;
+};
+/**
+ * Web-only font loader.
+ * - Uses the `FontFace` API when available.
+ * - Loads a single preferred weight (default: 400) to keep it "lazy".
+ * - Caller is responsible for caching (e.g. via `loadedFonts` in the store).
+ */
+export declare function loadFontFamily(fonts: Fonts, familyName: string, options?: LoadFontFamilyOptions): Promise<void>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.0.9",
+  "version": "1.2.0",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -10,9 +10,17 @@ const isPrimitive = t =>
   t === 'boolean' ||
   t === 'color' ||
   t === 'size' ||
+  t === 'fontFamily' ||
+  t === 'fontWeight' ||
   t === 'iconType';
 const toTsPrimitive = t =>
-  t === 'color' || t === 'size' || t === 'iconType' ? 'string' : t;
+  t === 'color' ||
+  t === 'size' ||
+  t === 'iconType' ||
+  t === 'fontFamily' ||
+  t === 'fontWeight'
+    ? 'string'
+    : t;
 const getArrayItem = t =>
   typeof t === 'string' && t.endsWith('[]') ? t.slice(0, -2) : null;
 // Convert a property name like "animation" or "on-press" to PascalCase

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -133,6 +133,8 @@ async function validatePatternJson(componentDir, componentName) {
     t === 'boolean' ||
     t === 'color' ||
     t === 'size' ||
+    t === 'fontFamily' ||
+    t === 'fontWeight' ||
     t === 'iconType';
   const isNeverType = t => t === 'never';
   const hasCustomTypes = typeof data.types === 'object' && data.types != null;

package/src/AttributesEditor.tsx

@@ -24,6 +24,9 @@ import { MockableFeatureModal } from './modals';
 import { Icon } from './components/Icon.generated';
 import { IconPickerModal } from './modals/IconPickerModal';
 import type { IconsType } from './types/Icons';
+import Modal from './modals/Modal';
+import { loadFontFamily } from './utils/loadFontFamily';
+import { fontsDebug } from './utils/fontsDebug';
 
 type AttributesEditorProps = {
   node: Node;
@@ -71,7 +74,22 @@ export function AttributesEditor({
 
   const baseData = node as NodeData<NodeDefaultAttribute>;
   const data = useNode(baseData);
-  const appConfig = useRenderStore((state) => state.appConfig);
+  const {
+    appConfig,
+    fonts: projectFonts,
+    loadedFonts,
+    markFontLoaded,
+    addError,
+  } = useRenderStore((state) => ({
+    appConfig: state.appConfig,
+    fonts: state.fonts,
+    loadedFonts: state.loadedFonts,
+    markFontLoaded: state.markFontLoaded,
+    addError: state.addError,
+  }));
+  const [activeFontField, setActiveFontField] = useState<string | null>(null);
+  const [isFontLoading, setIsFontLoading] = useState(false);
+  const [fontLoadError, setFontLoadError] = useState<string | null>(null);
   const projectColorsForPicker = useMemo<ProjectColors | undefined>(() => {
     if (projectColors) {
       return projectColors;
@@ -401,6 +419,220 @@ export function AttributesEditor({
     [activeIconField, handleAttributeChange],
   );
 
+  const renderFontFamilyField = useCallback(
+    (name: string, currentValue: unknown) => {
+      const normalized =
+        typeof currentValue === 'string' && currentValue.trim().length > 0
+          ? currentValue.trim()
+          : undefined;
+      const fontsList = Array.isArray(projectFonts) ? projectFonts : [];
+      const loaded = Array.isArray(loadedFonts) ? loadedFonts : [];
+      const isOpen = activeFontField === name;
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              setFontLoadError(null);
+              setActiveFontField(name);
+            }}
+            style={{
+              width: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 8,
+              borderRadius: 6,
+              border: '1px solid #ddd',
+              padding: '8px 10px',
+              background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
+              cursor: 'pointer',
+            }}
+          >
+            <span style={{ flex: 1, textAlign: 'left', fontWeight: 500 }}>
+              {normalized ?? 'Select font'}
+            </span>
+            <span style={{ fontSize: 12, color: '#666' }}>Open</span>
+          </button>
+
+          {isOpen ? (
+            <Modal
+              ariaLabelledBy="font-family-picker-title"
+              onClose={() => {
+                if (isFontLoading) return;
+                setActiveFontField(null);
+              }}
+              closeOnOverlayClick={!isFontLoading}
+              closeOnEsc={!isFontLoading}
+            >
+              <div style={{ display: 'grid', gap: 12 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <p
+                    id="font-family-picker-title"
+                    style={{ margin: 0, fontWeight: 700 }}
+                  >
+                    Select Font
+                  </p>
+                  <div style={{ flex: 1 }} />
+                  <button
+                    type="button"
+                    className="editor-button"
+                    onClick={() => {
+                      handleAttributeChange(name, undefined);
+                      setFontLoadError(null);
+                      setActiveFontField(null);
+                    }}
+                    disabled={isFontLoading}
+                  >
+                    Clear
+                  </button>
+                  <button
+                    type="button"
+                    className="editor-button"
+                    onClick={() => setActiveFontField(null)}
+                    disabled={isFontLoading}
+                  >
+                    Close
+                  </button>
+                </div>
+
+                {isFontLoading ? (
+                  <div style={{ fontSize: 12, color: '#666' }}>
+                    Loading font…
+                  </div>
+                ) : null}
+                {fontLoadError ? (
+                  <div style={{ fontSize: 12, color: '#b00020' }}>
+                    {fontLoadError}
+                  </div>
+                ) : null}
+
+                <div style={{ fontSize: 12, color: '#666' }}>
+                  {fontsList.length} fonts
+                </div>
+
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns:
+                      'repeat(auto-fill, minmax(180px, 1fr))',
+                    gap: 8,
+                    maxHeight: '60vh',
+                    overflow: 'auto',
+                    paddingRight: 4,
+                  }}
+                >
+                  {fontsList.map((font) => {
+                    const fontName = font?.name;
+                    if (typeof fontName !== 'string' || !fontName.trim()) {
+                      return null;
+                    }
+                    const familyName = fontName.trim();
+                    const isActive = normalized === familyName;
+                    const isLoaded = loaded.includes(familyName);
+                    return (
+                      <button
+                        key={familyName}
+                        type="button"
+                        disabled={isFontLoading}
+                        onClick={async () => {
+                          fontsDebug.info(
+                            'AttributesEditor: select fontFamily',
+                            {
+                              field: name,
+                              familyName,
+                              wasLoaded: isLoaded,
+                            },
+                          );
+                          setFontLoadError(null);
+                          handleAttributeChange(name, familyName);
+                          if (isLoaded) return;
+                          setIsFontLoading(true);
+                          try {
+                            fontsDebug.info(
+                              'AttributesEditor: loadFontFamily start',
+                              { familyName },
+                            );
+                            await loadFontFamily(fontsList, familyName, {
+                              forceFetch: true,
+                            });
+                            markFontLoaded(familyName);
+                            fontsDebug.info(
+                              'AttributesEditor: loadFontFamily success',
+                              { familyName },
+                            );
+                          } catch (e) {
+                            const msg =
+                              e instanceof Error ? e.message : String(e);
+                            setFontLoadError(
+                              `Failed to load "${familyName}": ${msg}`,
+                            );
+                            addError(
+                              `Failed to load font "${familyName}": ${msg}`,
+                            );
+                            fontsDebug.compactError(
+                              'AttributesEditor: loadFontFamily failed',
+                              e,
+                              { familyName },
+                            );
+                          } finally {
+                            setIsFontLoading(false);
+                          }
+                        }}
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          gap: 8,
+                          borderRadius: 8,
+                          border: isActive
+                            ? '2px solid #222'
+                            : '1px solid #ddd',
+                          padding: '8px 10px',
+                          background:
+                            'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
+                          cursor: isFontLoading ? 'not-allowed' : 'pointer',
+                        }}
+                        aria-label={`Select font ${familyName}`}
+                      >
+                        <span
+                          style={{
+                            fontSize: 12,
+                            fontWeight: isActive ? 700 : 500,
+                            textAlign: 'left',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
+                          title={familyName}
+                        >
+                          {familyName}
+                        </span>
+                        <span style={{ fontSize: 11, color: '#666' }}>
+                          {isLoaded ? 'Loaded' : 'Not loaded'}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </Modal>
+          ) : null}
+        </>
+      );
+    },
+    [
+      activeFontField,
+      addError,
+      handleAttributeChange,
+      isFontLoading,
+      loadedFonts,
+      markFontLoaded,
+      projectFonts,
+      fontLoadError,
+    ],
+  );
+
   const handleChildrenChange = useCallback(
     (val: string) => {
       const next: NodeData<NodeDefaultAttribute> = {
@@ -474,6 +706,8 @@ export function AttributesEditor({
                       ) : null}
                       {type === 'iconType' ? (
                         renderIconTypeField(name, currentValue)
+                      ) : type === 'fontFamily' ? (
+                        renderFontFamilyField(name, currentValue)
                       ) : (
                         <Field
                           name={name}
@@ -682,6 +916,8 @@ export function AttributesEditor({
               ) : null}
               {type === 'iconType' ? (
                 renderIconTypeField(name, getAttributeValue(name))
+              ) : type === 'fontFamily' ? (
+                renderFontFamilyField(name, getAttributeValue(name))
               ) : (
                 <Field
                   name={name}

package/src/RenderPage.tsx

@@ -61,11 +61,14 @@ function isEmptyPreview(node: Node): boolean {
 
 export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
   useLogRender('RenderPage');
-  const { previewMode, forceRender, setCurrent } = useRenderStore((s) => ({
-    previewMode: s.previewMode,
-    forceRender: s.forceRender,
-    setCurrent: s.setCurrent,
-  }));
+  const { previewMode, forceRender, setCurrent, appFont } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      forceRender: s.forceRender,
+      setCurrent: s.setCurrent,
+      appFont: s.appFont,
+    }),
+  );
   const previewRootRef = useRef<HTMLDivElement | null>(null);
   const showEmptyState = isEmptyPreview(data);
 
@@ -107,7 +110,13 @@ export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
 
   return (
     <DeviceMockFrame appName={name}>
-      <div className="screen-preview" ref={previewRootRef}>
+      <div
+        className="screen-preview"
+        ref={previewRootRef}
+        style={{
+          fontFamily: appFont ? `"${appFont}"` : undefined,
+        }}
+      >
         <RenderNode node={data} />
         {showEmptyState && (
           <div className="rb-empty-preview" aria-hidden="true">

package/src/attributes-editor/Field.tsx

@@ -7,6 +7,7 @@ import {
   getTypeSchema,
   isPrimitiveType,
 } from '../utils/patterns';
+import { FONT_WEIGHT_OPTIONS, normalizeFontWeight } from '../utils/fontWeight';
 import { Checkbox } from '../components/Checkbox';
 import { LayoutPreviewPicker } from './LayoutPreviewPicker';
 import { SizeField, type PreferredScale } from './SizeField';
@@ -439,6 +440,23 @@ export function Field({
           fieldName={name}
         />
       );
+    case 'fontWeight': {
+      const normalized = normalizeFontWeight(value);
+      return (
+        <select
+          value={normalized ?? ''}
+          onChange={(e) => onChange(e.target.value || undefined)}
+          className="input"
+        >
+          <option value="">(none)</option>
+          {FONT_WEIGHT_OPTIONS.map((opt) => (
+            <option key={opt} value={opt}>
+              {opt}
+            </option>
+          ))}
+        </select>
+      );
+    }
     case 'number':
       return (
         <input

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -2,18 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
@@ -37,7 +25,8 @@ export interface BIconPropsGenerated {
     style?: Record<string, unknown>;
     color?: string;
     fontSize?: string;
-    fontWeight?: FontWeightOptionType;
+    fontFamily?: string;
+    fontWeight?: string;
     textAlign?: TextAlignOptionType;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -2,18 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
@@ -37,7 +25,8 @@ export interface OnboardFooterPropsGenerated {
     style?: Record<string, unknown>;
     color?: string;
     fontSize?: string;
-    fontWeight?: FontWeightOptionType;
+    fontFamily?: string;
+    fontWeight?: string;
     textAlign?: TextAlignOptionType;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -2,18 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
@@ -37,7 +25,8 @@ export interface OnboardSubtitlePropsGenerated {
     style?: Record<string, unknown>;
     color?: string;
     fontSize?: string;
-    fontWeight?: FontWeightOptionType;
+    fontFamily?: string;
+    fontWeight?: string;
     textAlign?: TextAlignOptionType;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -2,18 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
@@ -37,7 +25,8 @@ export interface OnboardTitlePropsGenerated {
     style?: Record<string, unknown>;
     color?: string;
     fontSize?: string;
-    fontWeight?: FontWeightOptionType;
+    fontFamily?: string;
+    fontWeight?: string;
     textAlign?: TextAlignOptionType;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;

package/src/build-components/PaywallCloseButton/PaywallCloseButtonProps.generated.ts

@@ -2,18 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
@@ -40,7 +28,8 @@ export interface PaywallCloseButtonPropsGenerated {
     strokeWidth?: number;
     color?: string;
     fontSize?: string;
-    fontWeight?: FontWeightOptionType;
+    fontFamily?: string;
+    fontWeight?: string;
     textAlign?: TextAlignOptionType;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;

package/src/build-components/Text/TextProps.generated.ts

@@ -17,18 +17,6 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 
 export interface TextPropsGenerated {
@@ -70,7 +58,8 @@ export interface TextPropsGenerated {
     zIndex?: number;
     color?: string;
     fontSize?: string;
-    fontWeight?: FontWeightOptionType;
+    fontFamily?: string;
+    fontWeight?: string;
     textAlign?: TextAlignOptionType;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;