@developer_tribe/react-builder 1.2.8 → 1.2.10

package/src/mockOS/components/SubscriptionModal.tsx

@@ -40,355 +40,118 @@ export function SubscriptionModal({
   // Bottom sheet (both iOS + Android)
   return (
     <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: isIOS ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.5)',
-        display: 'flex',
-        alignItems: 'flex-end',
-        justifyContent: 'stretch',
-        zIndex: 9999,
-        padding: 0,
-      }}
+      className={[
+        'mockos-modal-overlay',
+        'mockos-modal-overlay--bottom',
+        isIOS ? 'mockos-modal-overlay--ios' : 'mockos-modal-overlay--android',
+      ].join(' ')}
       onClick={onOverlayClick}
     >
       <div
-        style={{
-          width: '100%',
-          backgroundColor: isIOS
-            ? 'hsl(var(--card, var(--rb-card, 0 0% 100%)) / 0.96)'
-            : 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
-          borderTopLeftRadius: 16,
-          borderTopRightRadius: 16,
-          overflow: 'hidden',
-          backdropFilter: isIOS ? 'blur(20px)' : undefined,
-          boxShadow: isIOS
-            ? '0 -12px 30px rgba(0,0,0,0.18), 0 -2px 6px rgba(0,0,0,0.08)'
-            : '0 -10px 20px rgba(0,0,0,0.22), 0 -2px 6px rgba(0,0,0,0.14)',
-          paddingBottom: 'max(12px, env(safe-area-inset-bottom))',
-          transform: 'translateY(0px)',
-        }}
+        className={[
+          'mockos-subscription-sheet',
+          isIOS
+            ? 'mockos-subscription-sheet--ios'
+            : 'mockos-subscription-sheet--android',
+        ].join(' ')}
       >
-        <div
-          aria-hidden
-          style={{
-            width: 44,
-            height: 5,
-            borderRadius: 999,
-            background:
-              'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.18)',
-            margin: '10px auto 0',
-          }}
-        />
+        <div aria-hidden className="mockos-subscription-sheet__handle" />
 
         {isIOS ? (
-          <div
-            style={{
-              padding: '10px 16px 10px',
-              textAlign: 'center',
-            }}
-          >
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-                marginBottom: 6,
-              }}
-            >
+          <div className="mockos-subscription-sheet__content mockos-subscription-sheet__content--ios">
+            <div className="mockos-subscription-sheet__top-actions">
               <button
                 onClick={onCancel}
                 aria-label="Close"
-                style={{
-                  width: 28,
-                  height: 28,
-                  borderRadius: 999,
-                  border: 'none',
-                  background:
-                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.06)',
-                  color:
-                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.55)',
-                  fontSize: 18,
-                  lineHeight: '28px',
-                  cursor: 'pointer',
-                }}
+                className="mockos-subscription-sheet__close"
               >
                 ×
               </button>
             </div>
-            <div
-              style={{
-                fontSize: 15,
-                fontWeight: 600,
-                color: '#000',
-                marginBottom: 8,
-                lineHeight: 1.3,
-                letterSpacing: 0.2,
-              }}
-            >
+            <div className="mockos-subscription-sheet__title mockos-subscription-sheet__title--ios">
               Confirm with Apple ID
             </div>
-            <div
-              style={{
-                fontSize: 13,
-                color: '#000',
-                lineHeight: 1.4,
-                opacity: 0.6,
-              }}
-            >
+            <div className="mockos-subscription-sheet__subtitle mockos-subscription-sheet__subtitle--ios">
               Subscribe to <b>{titleFromProductId}</b>
             </div>
-            <div
-              style={{
-                marginTop: 12,
-                padding: '10px 12px',
-                borderRadius: 12,
-                background:
-                  'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04)',
-                textAlign: 'left',
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 10,
-                }}
-              >
-                <div
-                  aria-hidden
-                  style={{
-                    width: 38,
-                    height: 38,
-                    borderRadius: 10,
-                    background:
-                      'linear-gradient(135deg, rgba(0,122,255,0.25), rgba(88,86,214,0.22))',
-                    border: '1px solid rgba(0,0,0,0.06)',
-                  }}
-                />
-                <div style={{ flex: 1, minWidth: 0 }}>
+            <div className="mockos-subscription-sheet__card mockos-subscription-sheet__card--ios">
+              <div className="mockos-subscription-sheet__row">
+                <div aria-hidden className="mockos-subscription-sheet__icon" />
+                <div className="mockos-subscription-sheet__meta">
                   <div
-                    style={{
-                      fontSize: 14,
-                      fontWeight: 600,
-                      color: 'rgba(0,0,0,0.88)',
-                      lineHeight: 1.2,
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                    }}
+                    className="mockos-subscription-sheet__product-id"
                     title={productId}
                   >
                     {productId}
                   </div>
-                  <div
-                    style={{
-                      marginTop: 2,
-                      fontSize: 12,
-                      color: 'rgba(0,0,0,0.55)',
-                    }}
-                  >
+                  <div className="mockos-subscription-sheet__meta-subtitle">
                     Renews automatically until cancelled.
                   </div>
                 </div>
-                <div
-                  style={{
-                    fontSize: 13,
-                    fontWeight: 700,
-                    color: 'rgba(0,0,0,0.8)',
-                  }}
-                >
-                  $4.99
-                </div>
+                <div className="mockos-subscription-sheet__price">$4.99</div>
               </div>
             </div>
           </div>
         ) : (
-          <div style={{ padding: '14px 16px 10px' }}>
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                gap: 12,
-              }}
-            >
-              <div
-                style={{
-                  fontSize: 16,
-                  fontWeight: 600,
-                  color: 'rgba(0,0,0,0.87)',
-                }}
-              >
+          <div className="mockos-subscription-sheet__content mockos-subscription-sheet__content--android">
+            <div className="mockos-subscription-sheet__android-header">
+              <div className="mockos-subscription-sheet__title mockos-subscription-sheet__title--android">
                 Subscribe with Google Play
               </div>
               <button
                 onClick={onCancel}
                 aria-label="Close"
-                style={{
-                  width: 28,
-                  height: 28,
-                  borderRadius: 999,
-                  border: 'none',
-                  background:
-                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.06)',
-                  color:
-                    'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.55)',
-                  fontSize: 18,
-                  lineHeight: '28px',
-                  cursor: 'pointer',
-                }}
+                className="mockos-subscription-sheet__close"
               >
                 ×
               </button>
             </div>
-            <div
-              style={{
-                marginTop: 8,
-                fontSize: 14,
-                color: 'rgba(0, 0, 0, 0.6)',
-                lineHeight: 1.5,
-              }}
-            >
+            <div className="mockos-subscription-sheet__subtitle mockos-subscription-sheet__subtitle--android">
               You’re about to subscribe to <b>{titleFromProductId}</b>.
             </div>
 
-            <div
-              style={{
-                marginTop: 14,
-                padding: '10px 12px',
-                borderRadius: 10,
-                background:
-                  'hsl(var(--foreground, var(--rb-foreground, 220.9 39.3% 11%)) / 0.04)',
-                border: '1px solid rgba(0,0,0,0.06)',
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  gap: 10,
-                }}
-              >
-                <div style={{ minWidth: 0 }}>
-                  <div
-                    style={{
-                      fontSize: 13,
-                      fontWeight: 600,
-                      color: 'rgba(0,0,0,0.78)',
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                    }}
-                  >
+            <div className="mockos-subscription-sheet__card mockos-subscription-sheet__card--android">
+              <div className="mockos-subscription-sheet__row mockos-subscription-sheet__row--space-between">
+                <div className="mockos-subscription-sheet__meta mockos-subscription-sheet__meta--android">
+                  <div className="mockos-subscription-sheet__product-id">
                     {productId}
                   </div>
-                  <div
-                    style={{
-                      marginTop: 2,
-                      fontSize: 12,
-                      color: 'rgba(0,0,0,0.55)',
-                    }}
-                  >
+                  <div className="mockos-subscription-sheet__meta-subtitle">
                     Auto-renews • Cancel anytime in Play Store
                   </div>
                 </div>
-                <div
-                  style={{
-                    fontSize: 13,
-                    fontWeight: 700,
-                    color: 'rgba(0,0,0,0.8)',
-                  }}
-                >
-                  $4.99
-                </div>
+                <div className="mockos-subscription-sheet__price">$4.99</div>
               </div>
             </div>
           </div>
         )}
 
         {isIOS ? (
-          <div
-            style={{
-              borderTop: '0.5px solid rgba(0, 0, 0, 0.16)',
-              display: 'flex',
-            }}
-          >
+          <div className="mockos-subscription-sheet__actions mockos-subscription-sheet__actions--ios">
             <button
               onClick={onCancel}
-              style={{
-                flex: 1,
-                padding: '13px 0',
-                fontSize: 17,
-                fontWeight: 400,
-                color: '#007AFF',
-                background: 'transparent',
-                border: 'none',
-                borderRight: '0.5px solid rgba(0, 0, 0, 0.16)',
-                cursor: 'pointer',
-              }}
+              className="mockos-subscription-sheet__action mockos-subscription-sheet__action--ios"
             >
               Cancel
             </button>
             <button
               onClick={onBuy}
-              style={{
-                flex: 1,
-                padding: '13px 0',
-                fontSize: 17,
-                fontWeight: 600,
-                color: '#007AFF',
-                background: 'transparent',
-                border: 'none',
-                cursor: 'pointer',
-              }}
+              className="mockos-subscription-sheet__action mockos-subscription-sheet__action--ios mockos-subscription-sheet__action--bold"
             >
               Subscribe
             </button>
           </div>
         ) : (
-          <div
-            style={{
-              padding: '10px 12px 12px',
-              display: 'flex',
-              justifyContent: 'flex-end',
-              gap: 8,
-            }}
-          >
+          <div className="mockos-subscription-sheet__actions mockos-subscription-sheet__actions--android">
             <button
               onClick={onCancel}
-              style={{
-                padding: '10px 16px',
-                fontSize: 14,
-                fontWeight: 500,
-                color: '#5F6368',
-                background: 'transparent',
-                border: 'none',
-                borderRadius: 4,
-                cursor: 'pointer',
-                textTransform: 'uppercase',
-                letterSpacing: 0.5,
-              }}
+              className="mockos-subscription-sheet__action mockos-subscription-sheet__action--android mockos-subscription-sheet__action--cancel"
             >
               Cancel
             </button>
             <button
               onClick={onBuy}
-              style={{
-                padding: '10px 16px',
-                fontSize: 14,
-                fontWeight: 700,
-                color: '#1A73E8',
-                background: 'rgba(26,115,232,0.12)',
-                border: 'none',
-                borderRadius: 999,
-                cursor: 'pointer',
-                textTransform: 'uppercase',
-                letterSpacing: 0.5,
-              }}
+              className="mockos-subscription-sheet__action mockos-subscription-sheet__action--android mockos-subscription-sheet__action--primary"
             >
               Subscribe
             </button>

package/src/pages/ProjectPage.tsx

@@ -58,7 +58,7 @@ const MOBILE_BREAKPOINT = 1000;
 
 export function ProjectPage({
   project,
-  appConfig = defaultAppConfig,
+  appConfig,
   onSaveProject,
   logLevel,
   projectColors,
@@ -84,6 +84,8 @@ export function ProjectPage({
     setCurrent,
     setProjectColors,
     setProjectName,
+    setAppConfig,
+    storeAppConfig,
     products,
     benefits,
     previewMode,
@@ -92,10 +94,13 @@ export function ProjectPage({
     setCurrent: s.setCurrent,
     setProjectColors: s.setProjectColors,
     setProjectName: s.setProjectName,
+    setAppConfig: s.setAppConfig,
+    storeAppConfig: s.appConfig,
     products: s.products,
     benefits: s.benefits,
     previewMode: s.previewMode,
   }));
+  const resolvedAppConfig = appConfig ?? storeAppConfig ?? defaultAppConfig;
   const [editorData, setEditorData] = useState<Node>(() => {
     if (!isEmptyProjectData) return null;
     // Empty project should start in a usable state (no loader / no error).
@@ -134,7 +139,6 @@ export function ProjectPage({
         return;
       }
       const updated: Node = deleteNodeFromTree(editorData, nodeToDelete);
-      //@ts-ignore
       setEditorData(updated);
 
       if (current === nodeToDelete) {
@@ -157,12 +161,14 @@ export function ProjectPage({
 
   useEffect(() => {
     logger.info('ProjectPage', 'mount', { projectName: project.name });
-    useRenderStore.getState().setAppConfig(appConfig);
-    logger.verbose('ProjectPage', 'appConfig applied', appConfig);
+    if (appConfig) {
+      setAppConfig(appConfig);
+      logger.verbose('ProjectPage', 'appConfig applied', appConfig);
+    }
     return () => {
       logger.info('ProjectPage', 'unmount');
     };
-  }, [appConfig, project.name]);
+  }, [appConfig, project.name, setAppConfig]);
 
   useEffect(() => {
     setProjectName(resolvedName);
@@ -474,7 +480,7 @@ export function ProjectPage({
                         ? (benefits as PaywallBenefits)
                         : {},
                     // Theme/colors/fonts must be passed via BuilderProvider params so build-components never touch useRenderStore.
-                    appConfig,
+                    appConfig: resolvedAppConfig,
                     projectColors: resolvedProjectColors,
                     fonts: typography.fonts,
                     appFont: resolvedAppFont,

package/src/styles/components/_attributes-editor.scss

@@ -149,6 +149,128 @@
     padding: sizes.$spaceCompact 0;
     text-align: right;
   }
+
+  &__picker-button {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: sizes.$spaceCompact;
+    border-radius: sizes.$radiusMid;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    padding: sizes.$spaceSnug sizes.$spaceInset;
+    background: hsl(var(--card, var(--rb-card, 0 0% 100%)));
+    cursor: pointer;
+  }
+
+  &__picker-button-left {
+    display: flex;
+    align-items: center;
+    gap: sizes.$spaceCompact;
+    min-width: 0;
+  }
+
+  &__picker-button-label {
+    font-weight: 600;
+
+    &--fill {
+      flex: 1;
+      text-align: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__picker-button-open {
+    font-size: sizes.$fontSizeSm;
+    color: colors.$mutedTextColor;
+    flex: 0 0 auto;
+  }
+
+  &__font-modal {
+    display: grid;
+    gap: sizes.$spaceComfy;
+  }
+
+  &__font-modal-header {
+    display: flex;
+    align-items: center;
+    gap: sizes.$spaceCompact;
+  }
+
+  &__font-modal-title {
+    margin: 0;
+    font-weight: 700;
+  }
+
+  &__font-modal-spacer {
+    flex: 1;
+  }
+
+  &__font-modal-note {
+    font-size: sizes.$fontSizeSm;
+    color: colors.$mutedTextColor;
+  }
+
+  &__font-modal-error {
+    font-size: sizes.$fontSizeSm;
+    color: colors.$dangerColor;
+  }
+
+  &__font-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: sizes.$spaceCompact;
+    max-height: 60vh;
+    overflow: auto;
+    padding-right: sizes.$spaceTight;
+  }
+
+  &__font-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: sizes.$spaceCompact;
+    border-radius: sizes.$radiusRounded;
+    border: sizes.$borderWidthHairline solid colors.$borderColor;
+    padding: sizes.$spaceSnug sizes.$spaceInset;
+    background: hsl(var(--card, var(--rb-card, 0 0% 100%)));
+    cursor: pointer;
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    &--active {
+      border: 2px solid colors.$textColor;
+    }
+  }
+
+  &__font-option-name {
+    font-size: sizes.$fontSizeSm;
+    font-weight: 600;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  &__font-option--active &__font-option-name {
+    font-weight: 700;
+  }
+
+  &__font-option-status {
+    font-size: sizes.$fontSizeXs;
+    color: colors.$mutedTextColor;
+    flex: 0 0 auto;
+  }
+}
+
+.attributes-editor-panel {
+  padding: sizes.$spaceComfy;
 }
 
 .field-info-tooltip {