chore: hub-deployment.yaml fixes

Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

.env.example

@@ -38,6 +38,14 @@ LOG_LEVEL=info
 
 DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=public'
 
+#################
+#  HUB (DEV)    #
+#################
+# The dev stack (pnpm db:up / pnpm go) runs Formbricks Hub on port 8080.
+# Set explicitly to avoid confusion; override as needed when using docker-compose.dev.yml.
+HUB_API_KEY=dev-api-key
+HUB_DATABASE_URL=postgresql://postgres:postgres@postgres:5432/postgres?schema=public&sslmode=disable
+
 ################
 #  MAIL SETUP  #
 ################

apps/web/i18n.lock

@@ -2036,12 +2036,12 @@ checksums:
     environments/workspace/look/advanced_styling_field_headline_size_description: 13debc3855e4edae992c7a1ebff599c3
     environments/workspace/look/advanced_styling_field_headline_weight: 0c8b8262945c61f8e2978502362e0a42
     environments/workspace/look/advanced_styling_field_headline_weight_description: 1a9c40bd76ff5098b1e48b1d3893171b
-    environments/workspace/look/advanced_styling_field_height: f4da6d7ecd26e3fa75cfea03abb60c00
+    environments/workspace/look/advanced_styling_field_height: 40ca2224bb2936ad1329091b35a9ffe2
     environments/workspace/look/advanced_styling_field_indicator_bg: 00febda2901af0f1b0c17e44f9917c38
     environments/workspace/look/advanced_styling_field_indicator_bg_description: 7eb3b54a8b331354ec95c0dc1545c620
     environments/workspace/look/advanced_styling_field_input_border_radius_description: 0007f1bb572b35d9a3720daeb7a55617
     environments/workspace/look/advanced_styling_field_input_font_size_description: 5311f95dcbd083623e35c98ea5374c3b
-    environments/workspace/look/advanced_styling_field_input_height_description: b704fc67e805223992c811d6f86a9c00
+    environments/workspace/look/advanced_styling_field_input_height_description: e19ec0dc432478def0fd1199ad765e38
     environments/workspace/look/advanced_styling_field_input_padding_x_description: 10e14296468321c13fda77fd1ba58dfd
     environments/workspace/look/advanced_styling_field_input_padding_y_description: 98b4aeff2940516d05ea61bdc1211d0d
     environments/workspace/look/advanced_styling_field_input_placeholder_opacity_description: f55a6700884d24014404e58876121ddf
@@ -2104,6 +2104,7 @@ checksums:
     environments/workspace/look/show_powered_by_formbricks: a0e96edadec8ef326423feccc9d06be7
     environments/workspace/look/styling_updated_successfully: b8b74b50dde95abcd498633e9d0c891f
     environments/workspace/look/suggest_colors: ddc4543b416ab774007b10a3434343cd
+    environments/workspace/look/suggested_colors_applied_please_save: 226fa70af5efc8ffa0a3755909c8163e
     environments/workspace/look/theme: 21fe00b7a518089576fb83c08631107a
     environments/workspace/look/theme_settings_description: 9fc45322818c3774ab4a44ea14d7836e
     environments/workspace/tags/add: 87c4a663507f2bcbbf79934af8164e13

apps/web/lib/styling/constants.ts

@@ -118,10 +118,10 @@ export const STYLE_DEFAULTS: TProjectStyling = {
   // Inputs
   inputTextColor: { light: _colors["inputTextColor.light"] },
   inputBorderRadius: 8,
-  inputHeight: 40,
+  inputHeight: 20,
   inputFontSize: 14,
-  inputPaddingX: 16,
-  inputPaddingY: 16,
+  inputPaddingX: 8,
+  inputPaddingY: 8,
   inputPlaceholderOpacity: 0.5,
   inputShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
 
@@ -149,6 +149,42 @@ export const STYLE_DEFAULTS: TProjectStyling = {
   progressIndicatorBgColor: { light: _colors["progressIndicatorBgColor.light"] },
 };
 
+/**
+ * Fills in new v4.7 color fields from legacy v4.6 fields when they are missing.
+ *
+ * v4.6 stored: brandColor, questionColor, inputColor, inputBorderColor.
+ * v4.7 adds: elementHeadlineColor, buttonBgColor, optionBgColor, etc.
+ *
+ * When loading v4.6 data the new fields are absent. Without this helper the
+ * form would fall back to STYLE_DEFAULTS (derived from the *default* brand
+ * colour), causing a visible mismatch.  This function derives the new fields
+ * from the actually-saved legacy fields so the preview and form stay coherent.
+ *
+ * Only sets a field when the legacy source exists AND the new field is absent.
+ */
+export const deriveNewFieldsFromLegacy = (saved: Record<string, unknown>): Record<string, unknown> => {
+  const light = (key: string): string | undefined =>
+    (saved[key] as { light?: string } | null | undefined)?.light;
+
+  const q = light("questionColor");
+  const b = light("brandColor");
+  const i = light("inputColor");
+
+  return {
+    ...(q && !saved.elementHeadlineColor && { elementHeadlineColor: { light: q } }),
+    ...(q && !saved.elementDescriptionColor && { elementDescriptionColor: { light: q } }),
+    ...(q && !saved.elementUpperLabelColor && { elementUpperLabelColor: { light: q } }),
+    ...(q && !saved.inputTextColor && { inputTextColor: { light: q } }),
+    ...(q && !saved.optionLabelColor && { optionLabelColor: { light: q } }),
+    ...(b && !saved.buttonBgColor && { buttonBgColor: { light: b } }),
+    ...(b && !saved.buttonTextColor && { buttonTextColor: { light: isLight(b) ? "#0f172a" : "#ffffff" } }),
+    ...(i && !saved.optionBgColor && { optionBgColor: { light: i } }),
+    ...(b && !saved.progressIndicatorBgColor && { progressIndicatorBgColor: { light: b } }),
+    ...(b &&
+      !saved.progressTrackBgColor && { progressTrackBgColor: { light: mixColor(b, "#ffffff", 0.8) } }),
+  };
+};
+
 /**
  * Builds a complete TProjectStyling object from a single brand color.
  *

apps/web/lib/utils/validate.ts

@@ -12,11 +12,18 @@ export function validateInputs<T extends ValidationPair<any>[]>(
   for (const [value, schema] of pairs) {
     const inputValidation = schema.safeParse(value);
     if (!inputValidation.success) {
+      const zodDetails = inputValidation.error.issues
+        .map((issue) => {
+          const path = issue?.path?.join(".") ?? "";
+          return `${path}${issue.message}`;
+        })
+        .join("; ");
+
       logger.error(
         inputValidation.error,
         `Validation failed for ${JSON.stringify(value).substring(0, 100)} and ${JSON.stringify(schema)}`
       );
-      throw new ValidationError("Validation failed");
+      throw new ValidationError(`Validation failed: ${zodDetails}`);
     }
     parsedData.push(inputValidation.data);
   }

apps/web/locales/de-DE.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Skaliert den Überschriftentext.",
         "advanced_styling_field_headline_weight": "Schriftstärke der Überschrift",
         "advanced_styling_field_headline_weight_description": "Macht den Überschriftentext heller oder fetter.",
-        "advanced_styling_field_height": "Höhe",
+        "advanced_styling_field_height": "Mindesthöhe",
         "advanced_styling_field_indicator_bg": "Indikator-Hintergrund",
         "advanced_styling_field_indicator_bg_description": "Färbt den gefüllten Teil des Balkens.",
         "advanced_styling_field_input_border_radius_description": "Rundet die Eingabeecken ab.",
         "advanced_styling_field_input_font_size_description": "Skaliert den eingegebenen Text in Eingabefeldern.",
-        "advanced_styling_field_input_height_description": "Steuert die Höhe des Eingabefelds.",
+        "advanced_styling_field_input_height_description": "Legt die Mindesthöhe des Eingabefelds fest.",
         "advanced_styling_field_input_padding_x_description": "Fügt links und rechts Abstand hinzu.",
         "advanced_styling_field_input_padding_y_description": "Fügt oben und unten Abstand hinzu.",
         "advanced_styling_field_input_placeholder_opacity_description": "Blendet den Platzhaltertext aus.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "\"Powered by Formbricks\"-Signatur anzeigen",
         "styling_updated_successfully": "Styling erfolgreich aktualisiert",
         "suggest_colors": "Farben vorschlagen",
+        "suggested_colors_applied_please_save": "Vorgeschlagene Farben erfolgreich generiert. Drücke \"Speichern\", um die Änderungen zu übernehmen.",
         "theme": "Theme",
         "theme_settings_description": "Erstelle ein Style-Theme für alle Umfragen. Du kannst für jede Umfrage individuelles Styling aktivieren."
       },

apps/web/locales/en-US.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Scales the headline text.",
         "advanced_styling_field_headline_weight": "Headline Font Weight",
         "advanced_styling_field_headline_weight_description": "Makes headline text lighter or bolder.",
-        "advanced_styling_field_height": "Height",
+        "advanced_styling_field_height": "Minimum Height",
         "advanced_styling_field_indicator_bg": "Indicator Background",
         "advanced_styling_field_indicator_bg_description": "Colors the filled portion of the bar.",
         "advanced_styling_field_input_border_radius_description": "Rounds the input corners.",
         "advanced_styling_field_input_font_size_description": "Scales the typed text in inputs.",
-        "advanced_styling_field_input_height_description": "Controls the input field height.",
+        "advanced_styling_field_input_height_description": "Controls the minimum height of the input field.",
         "advanced_styling_field_input_padding_x_description": "Adds space on the left and right.",
         "advanced_styling_field_input_padding_y_description": "Adds space on the top and bottom.",
         "advanced_styling_field_input_placeholder_opacity_description": "Fades the placeholder hint text.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Show “Powered by Formbricks” Signature",
         "styling_updated_successfully": "Styling updated successfully",
         "suggest_colors": "Suggest colors",
+        "suggested_colors_applied_please_save": "Suggested colors generated successfully. Press \"Save\" to persist the changes.",
         "theme": "Theme",
         "theme_settings_description": "Create a style theme for all surveys. You can enable custom styling for each survey."
       },

apps/web/locales/es-ES.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Escala el texto del titular.",
         "advanced_styling_field_headline_weight": "Grosor de fuente del titular",
         "advanced_styling_field_headline_weight_description": "Hace el texto del titular más ligero o más grueso.",
-        "advanced_styling_field_height": "Altura",
+        "advanced_styling_field_height": "Altura mínima",
         "advanced_styling_field_indicator_bg": "Fondo del indicador",
         "advanced_styling_field_indicator_bg_description": "Colorea la porción rellena de la barra.",
         "advanced_styling_field_input_border_radius_description": "Redondea las esquinas del campo.",
         "advanced_styling_field_input_font_size_description": "Escala el texto escrito en los campos.",
-        "advanced_styling_field_input_height_description": "Controla la altura del campo de entrada.",
+        "advanced_styling_field_input_height_description": "Controla la altura mínima del campo de entrada.",
         "advanced_styling_field_input_padding_x_description": "Añade espacio a la izquierda y a la derecha.",
         "advanced_styling_field_input_padding_y_description": "Añade espacio en la parte superior e inferior.",
         "advanced_styling_field_input_placeholder_opacity_description": "Atenúa el texto de sugerencia del marcador de posición.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Mostrar firma 'Powered by Formbricks'",
         "styling_updated_successfully": "Estilo actualizado correctamente",
         "suggest_colors": "Sugerir colores",
+        "suggested_colors_applied_please_save": "Colores sugeridos generados correctamente. Pulsa \"Guardar\" para conservar los cambios.",
         "theme": "Tema",
         "theme_settings_description": "Crea un tema de estilo para todas las encuestas. Puedes activar el estilo personalizado para cada encuesta."
       },

apps/web/locales/fr-FR.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Ajuste la taille du texte du titre.",
         "advanced_styling_field_headline_weight": "Graisse de police du titre",
         "advanced_styling_field_headline_weight_description": "Rend le texte du titre plus léger ou plus gras.",
-        "advanced_styling_field_height": "Hauteur",
+        "advanced_styling_field_height": "Hauteur minimale",
         "advanced_styling_field_indicator_bg": "Arrière-plan de l'indicateur",
         "advanced_styling_field_indicator_bg_description": "Colore la partie remplie de la barre.",
         "advanced_styling_field_input_border_radius_description": "Arrondit les coins du champ de saisie.",
         "advanced_styling_field_input_font_size_description": "Ajuste la taille du texte saisi dans les champs.",
-        "advanced_styling_field_input_height_description": "Contrôle la hauteur du champ de saisie.",
+        "advanced_styling_field_input_height_description": "Contrôle la hauteur minimale du champ de saisie.",
         "advanced_styling_field_input_padding_x_description": "Ajoute de l'espace à gauche et à droite.",
         "advanced_styling_field_input_padding_y_description": "Ajoute de l'espace en haut et en bas.",
         "advanced_styling_field_input_placeholder_opacity_description": "Atténue le texte d'indication du placeholder.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Afficher la signature « Propulsé par Formbricks »",
         "styling_updated_successfully": "Style mis à jour avec succès",
         "suggest_colors": "Suggérer des couleurs",
+        "suggested_colors_applied_please_save": "Couleurs suggérées générées avec succès. Appuyez sur « Enregistrer » pour conserver les modifications.",
         "theme": "Thème",
         "theme_settings_description": "Créez un thème de style pour toutes les enquêtes. Vous pouvez activer un style personnalisé pour chaque enquête."
       },

apps/web/locales/hu-HU.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Átméretezi a címsor szövegét.",
         "advanced_styling_field_headline_weight": "Címsor betűvastagsága",
         "advanced_styling_field_headline_weight_description": "Vékonyabbá vagy vastagabbá teszi a címsor szövegét.",
-        "advanced_styling_field_height": "Magasság",
+        "advanced_styling_field_height": "Minimális magasság",
         "advanced_styling_field_indicator_bg": "Jelző háttere",
         "advanced_styling_field_indicator_bg_description": "Kiszínezi a sáv kitöltött részét.",
         "advanced_styling_field_input_border_radius_description": "Lekerekíti a beviteli mező sarkait.",
         "advanced_styling_field_input_font_size_description": "Átméretezi a beviteli mezőkbe beírt szöveget.",
-        "advanced_styling_field_input_height_description": "A beviteli mező magasságát vezérli.",
+        "advanced_styling_field_input_height_description": "A beviteli mező minimális magasságát szabályozza.",
         "advanced_styling_field_input_padding_x_description": "Térközt ad hozzá balra és jobbra.",
         "advanced_styling_field_input_padding_y_description": "Térközt ad hozzá fent és lent.",
         "advanced_styling_field_input_placeholder_opacity_description": "Elhalványítja a helykitöltő súgószöveget.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Az „A gépházban: Formbricks” aláírás megjelenítése",
         "styling_updated_successfully": "A stílus sikeresen frissítve",
         "suggest_colors": "Színek ajánlása",
+        "suggested_colors_applied_please_save": "A javasolt színek sikeresen generálva. Nyomd meg a \"Mentés\" gombot a változtatások véglegesítéséhez.",
         "theme": "Téma",
         "theme_settings_description": "Stílustéma létrehozása az összes kérdőívhez. Egyéni stílust engedélyezhet minden egyes kérdőívhez."
       },

apps/web/locales/ja-JP.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "見出しテキストのサイズを調整します。",
         "advanced_styling_field_headline_weight": "見出しのフォントの太さ",
         "advanced_styling_field_headline_weight_description": "見出しテキストを細くまたは太くします。",
-        "advanced_styling_field_height": "高さ",
+        "advanced_styling_field_height": "最小の高さ",
         "advanced_styling_field_indicator_bg": "インジケーターの背景",
         "advanced_styling_field_indicator_bg_description": "バーの塗りつぶし部分に色を付けます。",
         "advanced_styling_field_input_border_radius_description": "入力フィールドの角を丸めます。",
         "advanced_styling_field_input_font_size_description": "入力フィールド内の入力テキストのサイズを調整します。",
-        "advanced_styling_field_input_height_description": "入力フィールドの高さを調整します。",
+        "advanced_styling_field_input_height_description": "入力フィールドの最小の高さを制御します。",
         "advanced_styling_field_input_padding_x_description": "左右にスペースを追加します。",
         "advanced_styling_field_input_padding_y_description": "上下にスペースを追加します。",
         "advanced_styling_field_input_placeholder_opacity_description": "プレースホルダーのヒントテキストを薄くします。",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "「Powered by Formbricks」署名を表示",
         "styling_updated_successfully": "スタイルを正常に更新しました",
         "suggest_colors": "カラーを提案",
+        "suggested_colors_applied_please_save": "推奨カラーが正常に生成されました。変更を保存するには「保存」を押してください。",
         "theme": "テーマ",
         "theme_settings_description": "すべてのアンケート用のスタイルテーマを作成します。各アンケートでカスタムスタイルを有効にできます。"
       },

apps/web/locales/nl-NL.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Schaalt de koptekst.",
         "advanced_styling_field_headline_weight": "Letterdikte kop",
         "advanced_styling_field_headline_weight_description": "Maakt koptekst lichter of vetter.",
-        "advanced_styling_field_height": "Hoogte",
+        "advanced_styling_field_height": "Minimale hoogte",
         "advanced_styling_field_indicator_bg": "Indicatorachtergrond",
         "advanced_styling_field_indicator_bg_description": "Kleurt het gevulde deel van de balk.",
         "advanced_styling_field_input_border_radius_description": "Rondt de invoerhoeken af.",
         "advanced_styling_field_input_font_size_description": "Schaalt de getypte tekst in invoervelden.",
-        "advanced_styling_field_input_height_description": "Bepaalt de hoogte van het invoerveld.",
+        "advanced_styling_field_input_height_description": "Bepaalt de minimale hoogte van het invoerveld.",
         "advanced_styling_field_input_padding_x_description": "Voegt ruimte toe aan de linker- en rechterkant.",
         "advanced_styling_field_input_padding_y_description": "Voegt ruimte toe aan de boven- en onderkant.",
         "advanced_styling_field_input_placeholder_opacity_description": "Vervaagt de tijdelijke aanwijzingstekst.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Toon 'Powered by Formbricks' handtekening",
         "styling_updated_successfully": "Styling succesvol bijgewerkt",
         "suggest_colors": "Kleuren voorstellen",
+        "suggested_colors_applied_please_save": "Voorgestelde kleuren succesvol gegenereerd. Druk op \"Opslaan\" om de wijzigingen te behouden.",
         "theme": "Thema",
         "theme_settings_description": "Maak een stijlthema voor alle enquêtes. Je kunt aangepaste styling inschakelen voor elke enquête."
       },

apps/web/locales/pt-BR.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Ajusta o tamanho do texto do título.",
         "advanced_styling_field_headline_weight": "Peso da fonte do título",
         "advanced_styling_field_headline_weight_description": "Torna o texto do título mais leve ou mais negrito.",
-        "advanced_styling_field_height": "Altura",
+        "advanced_styling_field_height": "Altura mínima",
         "advanced_styling_field_indicator_bg": "Fundo do indicador",
         "advanced_styling_field_indicator_bg_description": "Colore a porção preenchida da barra.",
         "advanced_styling_field_input_border_radius_description": "Arredonda os cantos do campo.",
         "advanced_styling_field_input_font_size_description": "Ajusta o tamanho do texto digitado nos campos.",
-        "advanced_styling_field_input_height_description": "Controla a altura do campo de entrada.",
+        "advanced_styling_field_input_height_description": "Controla a altura mínima do campo de entrada.",
         "advanced_styling_field_input_padding_x_description": "Adiciona espaço à esquerda e à direita.",
         "advanced_styling_field_input_padding_y_description": "Adiciona espaço na parte superior e inferior.",
         "advanced_styling_field_input_placeholder_opacity_description": "Esmaece o texto de dica do placeholder.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Mostrar assinatura 'Powered by Formbricks'",
         "styling_updated_successfully": "Estilo atualizado com sucesso",
         "suggest_colors": "Sugerir cores",
+        "suggested_colors_applied_please_save": "Cores sugeridas geradas com sucesso. Pressione \"Salvar\" para manter as alterações.",
         "theme": "Tema",
         "theme_settings_description": "Crie um tema de estilo para todas as pesquisas. Você pode ativar estilo personalizado para cada pesquisa."
       },

apps/web/locales/pt-PT.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Ajusta o tamanho do texto do título.",
         "advanced_styling_field_headline_weight": "Peso da fonte do título",
         "advanced_styling_field_headline_weight_description": "Torna o texto do título mais leve ou mais negrito.",
-        "advanced_styling_field_height": "Altura",
+        "advanced_styling_field_height": "Altura mínima",
         "advanced_styling_field_indicator_bg": "Fundo do indicador",
         "advanced_styling_field_indicator_bg_description": "Colore a porção preenchida da barra.",
         "advanced_styling_field_input_border_radius_description": "Arredonda os cantos do campo.",
         "advanced_styling_field_input_font_size_description": "Ajusta o tamanho do texto digitado nos campos.",
-        "advanced_styling_field_input_height_description": "Controla a altura do campo de entrada.",
+        "advanced_styling_field_input_height_description": "Controla a altura mínima do campo de entrada.",
         "advanced_styling_field_input_padding_x_description": "Adiciona espaço à esquerda e à direita.",
         "advanced_styling_field_input_padding_y_description": "Adiciona espaço no topo e na base.",
         "advanced_styling_field_input_placeholder_opacity_description": "Atenua o texto de sugestão do placeholder.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Mostrar assinatura 'Powered by Formbricks'",
         "styling_updated_successfully": "Estilo atualizado com sucesso",
         "suggest_colors": "Sugerir cores",
+        "suggested_colors_applied_please_save": "Cores sugeridas geradas com sucesso. Pressiona \"Guardar\" para manter as alterações.",
         "theme": "Tema",
         "theme_settings_description": "Crie um tema de estilo para todos os inquéritos. Pode ativar estilos personalizados para cada inquérito."
       },

apps/web/locales/ro-RO.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Scalează textul titlului.",
         "advanced_styling_field_headline_weight": "Grosime font titlu",
         "advanced_styling_field_headline_weight_description": "Face textul titlului mai subțire sau mai îngroșat.",
-        "advanced_styling_field_height": "Înălțime",
+        "advanced_styling_field_height": "Înălțime minimă",
         "advanced_styling_field_indicator_bg": "Fundal indicator",
         "advanced_styling_field_indicator_bg_description": "Colorează partea umplută a barei.",
         "advanced_styling_field_input_border_radius_description": "Rotunjește colțurile câmpurilor de introducere.",
         "advanced_styling_field_input_font_size_description": "Scalează textul introdus în câmpuri.",
-        "advanced_styling_field_input_height_description": "Controlează înălțimea câmpului de introducere.",
+        "advanced_styling_field_input_height_description": "Controlează înălțimea minimă a câmpului de introducere.",
         "advanced_styling_field_input_padding_x_description": "Adaugă spațiu la stânga și la dreapta.",
         "advanced_styling_field_input_padding_y_description": "Adaugă spațiu deasupra și dedesubt.",
         "advanced_styling_field_input_placeholder_opacity_description": "Estompează textul de sugestie din placeholder.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Afișează semnătura „Powered by Formbricks”",
         "styling_updated_successfully": "Stilizarea a fost actualizată cu succes",
         "suggest_colors": "Sugerează culori",
+        "suggested_colors_applied_please_save": "Culorile sugerate au fost generate cu succes. Apasă pe „Salvează” pentru a păstra modificările.",
         "theme": "Temă",
         "theme_settings_description": "Creează o temă de stil pentru toate sondajele. Poți activa stilizare personalizată pentru fiecare sondaj."
       },

apps/web/locales/ru-RU.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Масштабирует текст заголовка.",
         "advanced_styling_field_headline_weight": "Толщина шрифта заголовка",
         "advanced_styling_field_headline_weight_description": "Делает текст заголовка тоньше или жирнее.",
-        "advanced_styling_field_height": "Высота",
+        "advanced_styling_field_height": "Минимальная высота",
         "advanced_styling_field_indicator_bg": "Фон индикатора",
         "advanced_styling_field_indicator_bg_description": "Задаёт цвет заполненной части полосы.",
         "advanced_styling_field_input_border_radius_description": "Скругляет углы полей ввода.",
         "advanced_styling_field_input_font_size_description": "Масштабирует введённый текст в полях ввода.",
-        "advanced_styling_field_input_height_description": "Определяет высоту поля ввода.",
+        "advanced_styling_field_input_height_description": "Определяет минимальную высоту поля ввода.",
         "advanced_styling_field_input_padding_x_description": "Добавляет отступы слева и справа.",
         "advanced_styling_field_input_padding_y_description": "Добавляет пространство сверху и снизу.",
         "advanced_styling_field_input_placeholder_opacity_description": "Делает текст подсказки менее заметным.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Показывать подпись «Работает на Formbricks»",
         "styling_updated_successfully": "Стили успешно обновлены",
         "suggest_colors": "Предложить цвета",
+        "suggested_colors_applied_please_save": "Рекомендованные цвета успешно сгенерированы. Нажми «Сохранить», чтобы применить изменения.",
         "theme": "Тема",
         "theme_settings_description": "Создайте стиль для всех опросов. Вы можете включить индивидуальное оформление для каждого опроса."
       },

apps/web/locales/sv-SE.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "Ändrar storleken på rubriken.",
         "advanced_styling_field_headline_weight": "Rubrikens teckentjocklek",
         "advanced_styling_field_headline_weight_description": "Gör rubriktexten tunnare eller fetare.",
-        "advanced_styling_field_height": "Höjd",
+        "advanced_styling_field_height": "Minsta höjd",
         "advanced_styling_field_indicator_bg": "Indikatorns bakgrund",
         "advanced_styling_field_indicator_bg_description": "Färglägger den fyllda delen av stapeln.",
         "advanced_styling_field_input_border_radius_description": "Rundar av hörnen på inmatningsfält.",
         "advanced_styling_field_input_font_size_description": "Ändrar storleken på texten i inmatningsfält.",
-        "advanced_styling_field_input_height_description": "Styr höjden på inmatningsfältet.",
+        "advanced_styling_field_input_height_description": "Styr den minsta höjden på inmatningsfältet.",
         "advanced_styling_field_input_padding_x_description": "Lägger till utrymme till vänster och höger.",
         "advanced_styling_field_input_padding_y_description": "Lägger till utrymme upptill och nedtill.",
         "advanced_styling_field_input_placeholder_opacity_description": "Tonar ut platshållartexten.",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "Visa 'Powered by Formbricks'-signatur",
         "styling_updated_successfully": "Stiluppdatering lyckades",
         "suggest_colors": "Föreslå färger",
+        "suggested_colors_applied_please_save": "Föreslagna färger har skapats. Tryck på \"Spara\" för att spara ändringarna.",
         "theme": "Tema",
         "theme_settings_description": "Skapa ett stilmall för alla undersökningar. Du kan aktivera anpassad stil för varje undersökning."
       },

apps/web/locales/zh-Hans-CN.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "调整主标题文字大小。",
         "advanced_styling_field_headline_weight": "标题字体粗细",
         "advanced_styling_field_headline_weight_description": "设置主标题文字的粗细。",
-        "advanced_styling_field_height": "高度",
+        "advanced_styling_field_height": "最小高度",
         "advanced_styling_field_indicator_bg": "指示器背景",
         "advanced_styling_field_indicator_bg_description": "设置进度条已填充部分的颜色。",
         "advanced_styling_field_input_border_radius_description": "设置输入框圆角。",
         "advanced_styling_field_input_font_size_description": "调整输入框内文字大小。",
-        "advanced_styling_field_input_height_description": "控制输入框高度。",
+        "advanced_styling_field_input_height_description": "设置输入框的最小高度。",
         "advanced_styling_field_input_padding_x_description": "增加输入框左右间距。",
         "advanced_styling_field_input_padding_y_description": "为输入框上下添加间距。",
         "advanced_styling_field_input_placeholder_opacity_description": "调整占位提示文字的透明度。",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "显示“Powered by Formbricks”标识",
         "styling_updated_successfully": "样式更新成功",
         "suggest_colors": "推荐颜色",
+        "suggested_colors_applied_please_save": "已成功生成推荐配色。请点击“保存”以保留更改。",
         "theme": "主题",
         "theme_settings_description": "为所有问卷创建一个样式主题。你可以为每个问卷启用自定义样式。"
       },

apps/web/locales/zh-Hant-TW.json

@@ -2153,12 +2153,12 @@
         "advanced_styling_field_headline_size_description": "調整標題文字的大小。",
         "advanced_styling_field_headline_weight": "標題字體粗細",
         "advanced_styling_field_headline_weight_description": "讓標題文字變細或變粗。",
-        "advanced_styling_field_height": "高度",
+        "advanced_styling_field_height": "最小高度",
         "advanced_styling_field_indicator_bg": "指示器背景",
         "advanced_styling_field_indicator_bg_description": "設定進度條已填滿部分的顏色。",
         "advanced_styling_field_input_border_radius_description": "調整輸入框的圓角。",
         "advanced_styling_field_input_font_size_description": "調整輸入框內輸入文字的大小。",
-        "advanced_styling_field_input_height_description": "調整輸入欄位的高度。",
+        "advanced_styling_field_input_height_description": "設定輸入欄位的最小高度。",
         "advanced_styling_field_input_padding_x_description": "在左右兩側增加間距。",
         "advanced_styling_field_input_padding_y_description": "在上方和下方增加間距。",
         "advanced_styling_field_input_placeholder_opacity_description": "讓提示文字變得更淡。",
@@ -2221,6 +2221,7 @@
         "show_powered_by_formbricks": "顯示「Powered by Formbricks」標記",
         "styling_updated_successfully": "樣式已成功更新",
         "suggest_colors": "建議顏色",
+        "suggested_colors_applied_please_save": "已成功產生建議色彩。請按「儲存」以保存變更。",
         "theme": "主題",
         "theme_settings_description": "為所有調查建立樣式主題。您可以為每個調查啟用自訂樣式。"
       },

apps/web/modules/core/rate-limit/rate-limit-configs.ts

@@ -30,4 +30,4 @@ export const rateLimitConfigs = {
     upload: { interval: 60, allowedPerInterval: 5, namespace: "storage:upload" }, // 5 per minute
     delete: { interval: 60, allowedPerInterval: 5, namespace: "storage:delete" }, // 5 per minute
   },
-};
+} as const;

apps/web/modules/ee/contacts/api/v1/client/[environmentId]/user/route.ts

@@ -2,13 +2,26 @@ import { NextRequest, userAgent } from "next/server";
 import { logger } from "@formbricks/logger";
 import { TContactAttributesInput } from "@formbricks/types/contact-attribute";
 import { ZEnvironmentId } from "@formbricks/types/environment";
-import { ResourceNotFoundError } from "@formbricks/types/errors";
+import { ResourceNotFoundError, ValidationError } from "@formbricks/types/errors";
 import { TJsPersonState } from "@formbricks/types/js";
 import { responses } from "@/app/lib/api/response";
 import { withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
 import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { updateUser } from "./lib/update-user";
 
+const handleError = (err: unknown, url: string): { response: Response } => {
+  if (err instanceof ResourceNotFoundError) {
+    return { response: responses.notFoundResponse(err.resourceType, err.resourceId) };
+  }
+
+  if (err instanceof ValidationError) {
+    return { response: responses.badRequestResponse(err.message, undefined, true) };
+  }
+
+  logger.error({ error: err, url }, "Error in POST /api/v1/client/[environmentId]/user");
+  return { response: responses.internalServerErrorResponse("Unable to fetch user state", true) };
+};
+
 export const OPTIONS = async (): Promise<Response> => {
   return responses.successResponse(
     {},
@@ -123,16 +136,7 @@ export const POST = withV1ApiWrapper({
         response: responses.successResponse(responseJson, true),
       };
     } catch (err) {
-      if (err instanceof ResourceNotFoundError) {
-        return {
-          response: responses.notFoundResponse(err.resourceType, err.resourceId),
-        };
-      }
-
-      logger.error({ error: err, url: req.url }, "Error in POST /api/v1/client/[environmentId]/user");
-      return {
-        response: responses.internalServerErrorResponse(err.message ?? "Unable to fetch person state", true),
-      };
+      return handleError(err, req.url);
     }
   },
 });

apps/web/modules/ee/contacts/lib/validate-attribute-type.test.ts

@@ -13,22 +13,14 @@ describe("validateAndParseAttributeValue", () => {
       }
     });
 
-    test("converts numbers to string", () => {
+    test("rejects number values (SDK must pass actual strings)", () => {
       const result = validateAndParseAttributeValue(42, "string", "testKey");
-      expect(result.valid).toBe(true);
-      if (result.valid) {
-        expect(result.parsedValue.value).toBe("42");
-        expect(result.parsedValue.valueNumber).toBeNull();
-      }
-    });
-
-    test("converts Date to ISO string", () => {
-      const date = new Date("2024-01-15T10:30:00.000Z");
-      const result = validateAndParseAttributeValue(date, "string", "testKey");
-      expect(result.valid).toBe(true);
-      if (result.valid) {
-        expect(result.parsedValue.value).toBe("2024-01-15T10:30:00.000Z");
-        expect(result.parsedValue.valueDate).toBeNull();
+      expect(result.valid).toBe(false);
+      if (!result.valid) {
+        expect(result.error.code).toBe("string_type_mismatch");
+        expect(result.error.params.key).toBe("testKey");
+        expect(result.error.params.type).toBe("number");
+        expect(formatValidationError(result.error)).toContain("received a number");
       }
     });
   });

apps/web/modules/ee/contacts/lib/validate-attribute-type.ts

@@ -27,15 +27,6 @@ export type TAttributeValidationResult =
       error: TAttributeValidationError;
     };
 
-/**
- * Converts any value to a string representation
- */
-const convertToString = (value: TRawValue): string => {
-  if (value instanceof Date) return value.toISOString();
-  if (typeof value === "number") return String(value);
-  return value;
-};
-
 /**
  * Gets a human-readable type name for error messages
  */
@@ -45,16 +36,28 @@ const getTypeName = (value: TRawValue): string => {
 };
 
 /**
- * Validates and parses a string type attribute
+ * Validates and parses a string type attribute.
  */
-const validateStringType = (value: TRawValue): TAttributeValidationResult => ({
-  valid: true,
-  parsedValue: {
-    value: convertToString(value),
-    valueNumber: null,
-    valueDate: null,
-  },
-});
+const validateStringType = (value: TRawValue, attributeKey: string): TAttributeValidationResult => {
+  if (typeof value === "string") {
+    return {
+      valid: true,
+      parsedValue: {
+        value,
+        valueNumber: null,
+        valueDate: null,
+      },
+    };
+  }
+
+  return {
+    valid: false,
+    error: {
+      code: "string_type_mismatch",
+      params: { key: attributeKey, type: getTypeName(value) },
+    },
+  };
+};
 
 /**
  * Validates and parses a number type attribute.
@@ -170,13 +173,13 @@ export const validateAndParseAttributeValue = (
 ): TAttributeValidationResult => {
   switch (expectedDataType) {
     case "string":
-      return validateStringType(value);
+      return validateStringType(value, attributeKey);
     case "number":
       return validateNumberType(value, attributeKey);
     case "date":
       return validateDateType(value, attributeKey);
     default:
-      return validateStringType(value);
+      return validateStringType(value, attributeKey);
   }
 };
 
@@ -185,6 +188,8 @@ export const validateAndParseAttributeValue = (
  * Used for API/SDK responses.
  */
 const VALIDATION_ERROR_TEMPLATES: Record<string, string> = {
+  string_type_mismatch:
+    "Attribute '{key}' expects a string but received a {type}. Pass an actual string value.",
   number_type_mismatch:
     "Attribute '{key}' expects a number but received a string. Pass an actual number value (e.g., 123 instead of \"123\").",
   date_invalid: "Attribute '{key}' expects a valid date. Received: Invalid Date",

apps/web/modules/projects/settings/look/components/theme-styling.tsx

@@ -11,7 +11,12 @@ import { useTranslation } from "react-i18next";
 import { TProjectStyling, ZProjectStyling } from "@formbricks/types/project";
 import { TSurveyStyling, TSurveyType } from "@formbricks/types/surveys/types";
 import { previewSurvey } from "@/app/lib/templates";
-import { STYLE_DEFAULTS, getSuggestedColors } from "@/lib/styling/constants";
+import {
+  COLOR_DEFAULTS,
+  STYLE_DEFAULTS,
+  deriveNewFieldsFromLegacy,
+  getSuggestedColors,
+} from "@/lib/styling/constants";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { updateProjectAction } from "@/modules/projects/settings/actions";
 import { FormStylingSettings } from "@/modules/survey/editor/components/form-styling-settings";
@@ -62,11 +67,23 @@ export const ThemeStyling = ({
     ? Object.fromEntries(Object.entries(savedStyling).filter(([, v]) => v != null))
     : {};
 
+  const legacyFills = deriveNewFieldsFromLegacy(cleanSaved);
+
   const form = useForm<TProjectStyling>({
-    defaultValues: { ...STYLE_DEFAULTS, ...cleanSaved },
+    defaultValues: { ...STYLE_DEFAULTS, ...legacyFills, ...cleanSaved },
     resolver: zodResolver(ZProjectStyling),
   });
 
+  // Brand color shown in the preview.  Only updated when the user triggers
+  // "Suggest colors", "Save", or "Reset to default" — NOT on every keystroke
+  // in the brand-color picker.  This prevents the loading-spinner / progress
+  // bar from updating while the user is still picking a colour.
+  const [previewBrandColor, setPreviewBrandColor] = useState<string>(
+    (cleanSaved as Partial<TProjectStyling>).brandColor?.light ??
+      STYLE_DEFAULTS.brandColor?.light ??
+      COLOR_DEFAULTS.brandColor
+  );
+
   const [previewSurveyType, setPreviewSurveyType] = useState<TSurveyType>("link");
   const [confirmResetStylingModalOpen, setConfirmResetStylingModalOpen] = useState(false);
   const [confirmSuggestColorsOpen, setConfirmSuggestColorsOpen] = useState(false);
@@ -84,6 +101,7 @@ export const ThemeStyling = ({
 
     if (updatedProjectResponse?.data) {
       form.reset({ ...STYLE_DEFAULTS });
+      setPreviewBrandColor(STYLE_DEFAULTS.brandColor?.light ?? COLOR_DEFAULTS.brandColor);
       toast.success(t("environments.workspace.look.styling_updated_successfully"));
       router.refresh();
     } else {
@@ -100,7 +118,10 @@ export const ThemeStyling = ({
       form.setValue(key as keyof TProjectStyling, value, { shouldDirty: true });
     }
 
-    toast.success(t("environments.workspace.look.styling_updated_successfully"));
+    // Commit brand color to the preview now that all derived colours are in sync.
+    setPreviewBrandColor(brandColor ?? STYLE_DEFAULTS.brandColor?.light ?? COLOR_DEFAULTS.brandColor);
+
+    toast.success(t("environments.workspace.look.suggested_colors_applied_please_save"));
     setConfirmSuggestColorsOpen(false);
   };
 
@@ -113,7 +134,11 @@ export const ThemeStyling = ({
     });
 
     if (updatedProjectResponse?.data) {
-      form.reset({ ...updatedProjectResponse.data.styling });
+      const saved = updatedProjectResponse.data.styling;
+      form.reset({ ...saved });
+      setPreviewBrandColor(
+        saved?.brandColor?.light ?? STYLE_DEFAULTS.brandColor?.light ?? COLOR_DEFAULTS.brandColor
+      );
       toast.success(t("environments.workspace.look.styling_updated_successfully"));
     } else {
       const errorMessage = getFormattedErrorMessage(updatedProjectResponse);
@@ -249,7 +274,9 @@ export const ThemeStyling = ({
                 survey={previewSurvey(project.name, t)}
                 project={{
                   ...project,
-                  styling: form.watch("allowStyleOverwrite") ? form.watch() : STYLE_DEFAULTS,
+                  styling: form.watch("allowStyleOverwrite")
+                    ? { ...form.watch(), brandColor: { light: previewBrandColor } }
+                    : STYLE_DEFAULTS,
                 }}
                 previewType={previewSurveyType}
                 setPreviewType={setPreviewSurveyType}

apps/web/modules/survey/editor/components/styling-view.tsx

@@ -9,7 +9,7 @@ import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { TProjectStyling } from "@formbricks/types/project";
 import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys/types";
-import { STYLE_DEFAULTS, getSuggestedColors } from "@/lib/styling/constants";
+import { STYLE_DEFAULTS, deriveNewFieldsFromLegacy, getSuggestedColors } from "@/lib/styling/constants";
 import { FormStylingSettings } from "@/modules/survey/editor/components/form-styling-settings";
 import { LogoSettingsCard } from "@/modules/survey/editor/components/logo-settings-card";
 import { AlertDialog } from "@/modules/ui/components/alert-dialog";
@@ -68,10 +68,15 @@ export const StylingView = ({
     ? Object.fromEntries(Object.entries(localSurvey.styling).filter(([, v]) => v != null))
     : {};
 
+  const projectLegacyFills = deriveNewFieldsFromLegacy(cleanProject);
+  const surveyLegacyFills = deriveNewFieldsFromLegacy(cleanSurvey);
+
   const form = useForm<TSurveyStyling>({
     defaultValues: {
       ...STYLE_DEFAULTS,
+      ...projectLegacyFills,
       ...cleanProject,
+      ...surveyLegacyFills,
       ...cleanSurvey,
     },
   });
@@ -94,7 +99,7 @@ export const StylingView = ({
       form.setValue(key as keyof TSurveyStyling, value, { shouldDirty: true });
     }
 
-    toast.success(t("environments.workspace.look.styling_updated_successfully"));
+    toast.success(t("environments.workspace.look.suggested_colors_applied_please_save"));
     setConfirmSuggestColorsOpen(false);
   };
 

apps/web/modules/ui/components/input-combo-box/index.tsx

@@ -226,7 +226,7 @@ export const InputCombobox: React.FC<InputComboboxProps> = ({
             tabIndex={0}
             aria-controls="options"
             aria-expanded={open}
-            className={cn("flex h-full w-full cursor-pointer items-center justify-end bg-white pr-2", {
+            className={cn("flex w-full cursor-pointer items-center justify-end bg-white pr-2 h-10", {
               "w-10 justify-center pr-0": withInput && inputType !== "dropdown",
               "pointer-events-none": isClearing,
             })}>

apps/web/modules/ui/components/preview-survey/index.tsx

@@ -225,10 +225,10 @@ export const PreviewSurvey = ({
         )}>
         {previewMode === "mobile" && (
           <>
-            <p className="absolute top-0 left-0 m-2 rounded bg-slate-100 px-2 py-1 text-xs text-slate-400">
+            <p className="absolute left-0 top-0 m-2 rounded bg-slate-100 px-2 py-1 text-xs text-slate-400">
               Preview
             </p>
-            <div className="absolute top-0 right-0 m-2">
+            <div className="absolute right-0 top-0 m-2">
               <ResetProgressButton onClick={resetProgress} />
             </div>
             <MediaBackground
@@ -265,7 +265,7 @@ export const PreviewSurvey = ({
                 </Modal>
               ) : (
                 <div className="flex h-full w-full flex-col justify-center px-1">
-                  <div className="absolute top-5 left-5">
+                  <div className="absolute left-5 top-5">
                     {!styling.isLogoHidden && (
                       <ClientLogo
                         environmentId={environment.id}
@@ -296,7 +296,7 @@ export const PreviewSurvey = ({
           </>
         )}
         {previewMode === "desktop" && (
-          <div className="flex h-full flex-1 flex-col">
+          <div className="flex h-full w-full flex-1 flex-col">
             <div className="flex h-8 w-full items-center rounded-t-lg bg-slate-100">
               <div className="ml-6 flex space-x-2">
                 <div className="h-3 w-3 rounded-full bg-red-500"></div>
@@ -373,7 +373,7 @@ export const PreviewSurvey = ({
                 styling={styling}
                 ContentRef={ContentRef as React.RefObject<HTMLDivElement>}
                 isEditorView>
-                <div className="absolute top-5 left-5">
+                <div className="absolute left-5 top-5">
                   {!styling.isLogoHidden && (
                     <ClientLogo
                       environmentId={environment.id}

apps/web/modules/ui/components/survey/index.tsx

@@ -40,7 +40,10 @@ export const SurveyInline = (props: Omit<SurveyContainerProps, "containerId">) =
     isLoadingScript = true;
     try {
       const scriptUrl = props.appUrl ? `${props.appUrl}/js/surveys.umd.cjs` : "/js/surveys.umd.cjs";
-      const response = await fetch(scriptUrl);
+      const response = await fetch(
+        scriptUrl,
+        process.env.NODE_ENV === "development" ? { cache: "no-store" } : {}
+      );
 
       if (!response.ok) {
         throw new Error("Failed to load the surveys package");

apps/web/playwright/survey-styling.spec.ts

@@ -96,6 +96,7 @@ test.describe("Survey Styling", async () => {
     expect(css).toContain("--fb-input-background-color: #eeeeee");
     expect(css).toContain("--fb-input-border-color: #cccccc");
     expect(css).toContain("--fb-input-text-color: #024eff");
+    expect(css).toContain("--fb-input-placeholder-color:");
     expect(css).toContain("--fb-input-border-radius: 5px");
     expect(css).toContain("--fb-input-height: 50px");
     expect(css).toContain("--fb-input-font-size: 16px");

charts/formbricks/templates/_helpers.tpl

@@ -7,6 +7,14 @@ It also truncates the name to a maximum of 63 characters and removes trailing hy
 {{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
 {{- end }}
 
+{{/*
+Hub resource name: base name truncated to 59 chars then "-hub" so the suffix is never lost (63 char limit).
+*/}}
+{{- define "formbricks.hubname" -}}
+{{- $base := include "formbricks.name" . | trunc 59 | trimSuffix "-" }}
+{{- printf "%s-hub" $base | trimSuffix "-" }}
+{{- end }}
+
 
 {{/*
 Define the application version to be used in labels.

charts/formbricks/templates/hub-deployment.yaml

@@ -0,0 +1,82 @@
+{{- if .Values.hub.enabled }}
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "formbricks.hubname" . }}
+  labels:
+    helm.sh/chart: {{ include "formbricks.chart" . }}
+    app.kubernetes.io/name: {{ include "formbricks.hubname" . }}
+    app.kubernetes.io/instance: {{ .Release.Name }}
+    app.kubernetes.io/component: hub
+    app.kubernetes.io/managed-by: {{ .Release.Service }}
+    app.kubernetes.io/part-of: {{ .Values.partOfOverride | default (include "formbricks.name" .) }}
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app.kubernetes.io/name: {{ include "formbricks.hubname" . }}
+      app.kubernetes.io/instance: {{ .Release.Name }}
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: {{ include "formbricks.hubname" . }}
+        app.kubernetes.io/instance: {{ .Release.Name }}
+        app.kubernetes.io/component: hub
+    spec:
+      {{- if .Values.deployment.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml .Values.deployment.imagePullSecrets | nindent 8 }}
+      {{- end }}
+      containers:
+        - name: hub
+          image: {{ .Values.hub.image.repository }}:{{ .Values.hub.image.tag | default "latest" }}
+          imagePullPolicy: {{ .Values.hub.image.pullPolicy }}
+          securityContext:
+            readOnlyRootFilesystem: true
+            runAsNonRoot: true
+          ports:
+            - name: http
+              containerPort: 8080
+              protocol: TCP
+          {{- if .Values.hub.existingSecret }}
+          envFrom:
+            - secretRef:
+                name: {{ .Values.hub.existingSecret }}
+          {{- end }}
+          {{- if .Values.hub.env }}
+          env:
+            {{- range $key, $value := .Values.hub.env }}
+            - name: {{ $key }}
+              value: {{ $value | quote }}
+            {{- end }}
+          {{- end }}
+          {{- if .Values.hub.resources }}
+          resources:
+            {{- toYaml .Values.hub.resources | nindent 12 }}
+          {{- end }}
+          readinessProbe:
+            httpGet:
+              path: /health
+              port: 8080
+            initialDelaySeconds: 10
+            periodSeconds: 10
+            failureThreshold: 5
+            timeoutSeconds: 5
+            successThreshold: 1
+          livenessProbe:
+            httpGet:
+              path: /health
+              port: 8080
+            initialDelaySeconds: 10
+            periodSeconds: 10
+            failureThreshold: 5
+            timeoutSeconds: 5
+            successThreshold: 1
+          startupProbe:
+            httpGet:
+              path: /health
+              port: 8080
+            failureThreshold: 30
+            periodSeconds: 10
+{{- end }}

charts/formbricks/templates/hub-migration-job.yaml

@@ -0,0 +1,53 @@
+{{- if and .Values.hub.enabled .Values.hub.existingSecret }}
+---
+apiVersion: batch/v1
+kind: Job
+metadata:
+  name: {{ include "formbricks.hubname" . }}-migration
+  labels:
+    helm.sh/chart: {{ include "formbricks.chart" . }}
+    app.kubernetes.io/name: {{ include "formbricks.hubname" . }}
+    app.kubernetes.io/instance: {{ .Release.Name }}
+    app.kubernetes.io/component: hub-migration
+    app.kubernetes.io/managed-by: {{ .Release.Service }}
+  annotations:
+    helm.sh/hook: pre-install,pre-upgrade
+    helm.sh/hook-weight: "-5"
+    helm.sh/hook-delete-policy: before-hook-creation,hook-succeeded
+spec:
+  ttlSecondsAfterFinished: {{ .Values.hub.migration.ttlSecondsAfterFinished | default 300 }}
+  backoffLimit: {{ .Values.hub.migration.backoffLimit | default 3 }}
+  activeDeadlineSeconds: 300
+  template:
+    metadata:
+      labels:
+        app.kubernetes.io/name: {{ include "formbricks.hubname" . }}
+        app.kubernetes.io/instance: {{ .Release.Name }}
+        app.kubernetes.io/component: hub-migration
+    spec:
+      restartPolicy: Never
+      securityContext:
+        runAsNonRoot: true
+        runAsUser: 1000
+      {{- if .Values.deployment.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml .Values.deployment.imagePullSecrets | nindent 8 }}
+      {{- end }}
+      containers:
+        - name: hub-migrate
+          image: {{ .Values.hub.image.repository }}:{{ .Values.hub.image.tag | default "latest" }}
+          imagePullPolicy: {{ .Values.hub.image.pullPolicy }}
+          securityContext:
+            readOnlyRootFilesystem: true
+            capabilities:
+              drop: ["ALL"]
+          command:
+            - sh
+            - -c
+            - |
+              /usr/local/bin/goose -dir /app/migrations postgres "$DATABASE_URL" up && \
+              /usr/local/bin/river migrate-up --database-url "$DATABASE_URL"
+          envFrom:
+            - secretRef:
+                name: {{ .Values.hub.existingSecret }}
+{{- end }}

charts/formbricks/templates/hub-service.yaml

@@ -0,0 +1,24 @@
+{{- if .Values.hub.enabled }}
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "formbricks.hubname" . }}
+  labels:
+    helm.sh/chart: {{ include "formbricks.chart" . }}
+    app.kubernetes.io/name: {{ include "formbricks.hubname" . }}
+    app.kubernetes.io/instance: {{ .Release.Name }}
+    app.kubernetes.io/component: hub
+    app.kubernetes.io/managed-by: {{ .Release.Service }}
+    app.kubernetes.io/part-of: {{ .Values.partOfOverride | default (include "formbricks.name" .) }}
+spec:
+  type: ClusterIP
+  selector:
+    app.kubernetes.io/name: {{ include "formbricks.hubname" . }}
+    app.kubernetes.io/instance: {{ .Release.Name }}
+  ports:
+    - name: http
+      port: 8080
+      targetPort: 8080
+      protocol: TCP
+{{- end }}

charts/formbricks/values.yaml

@@ -304,6 +304,37 @@ serviceMonitor:
       path: /metrics
       port: metrics
 
+##########################################################
+# Hub API Configuration
+# Formbricks Hub image: ghcr.io/formbricks/hub
+##########################################################
+hub:
+  enabled: false
+
+  image:
+    repository: "ghcr.io/formbricks/hub"
+    # Pin to a semver tag for reproducible deployments; update on each Hub release.
+    tag: "1.0.0"
+    pullPolicy: IfNotPresent
+
+  # Secret containing API_KEY and DATABASE_URL for Hub. Use the same app secret (or same DATABASE_URL) to share the Formbricks database.
+  existingSecret: ""
+
+  # Optional env vars (non-secret). Use existingSecret for API_KEY and DATABASE_URL.
+  env: {}
+
+  # Migration job runs goose + river before Hub API starts (pre-install/pre-upgrade hook). Requires existingSecret with DATABASE_URL.
+  migration:
+    ttlSecondsAfterFinished: 300
+    backoffLimit: 3
+
+  resources:
+    limits:
+      memory: 512Mi
+    requests:
+      memory: 256Mi
+      cpu: "100m"
+
 ##########################################################
 # PostgreSQL Configuration
 ##########################################################

docker-compose.dev.yml

@@ -1,14 +1,19 @@
 services:
+  # PostgreSQL must load the vector library so Hub (and Formbricks) can use the pgvector extension.
   postgres:
-    image: pgvector/pgvector:pg17
+    image: pgvector/pgvector:pg18
     volumes:
       - postgres:/var/lib/postgresql/data
+      - ./docker/postgres-init-dev:/docker-entrypoint-initdb.d:ro
     environment:
       - POSTGRES_DB=postgres
       - POSTGRES_USER=postgres
       - POSTGRES_PASSWORD=postgres
     ports:
       - 5432:5432
+    command: >
+      postgres
+      -c shared_preload_libraries=vector
 
   mailhog:
     image: arjenz/mailhog
@@ -36,6 +41,36 @@ services:
     volumes:
       - minio-data:/data
 
+  # Run Hub DB migrations (goose + river) before the API starts. Idempotent; runs on every compose up.
+  hub-migrate:
+    image: ghcr.io/formbricks/hub:latest
+    restart: "no"
+    entrypoint: ["sh", "-c"]
+    command: ["if [ -x /usr/local/bin/goose ] && [ -x /usr/local/bin/river ]; then /usr/local/bin/goose -dir /app/migrations postgres \"$$DATABASE_URL\" up && /usr/local/bin/river migrate-up --database-url \"$$DATABASE_URL\"; else echo 'Migration tools (goose/river) not in image, skipping migrations.'; fi"]
+    environment:
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/postgres?schema=public&sslmode=disable
+    depends_on:
+      - postgres
+
+  # Formbricks Hub API (ghcr.io/formbricks/hub). Shares the same Postgres database as Formbricks by default.
+  hub:
+    image: ghcr.io/formbricks/hub:latest
+    depends_on:
+      hub-migrate:
+        condition: service_completed_successfully
+    ports:
+      - "8080:8080"
+    environment:
+      API_KEY: ${HUB_API_KEY:-dev-api-key}
+      DATABASE_URL: postgresql://postgres:postgres@postgres:5432/postgres?schema=public&sslmode=disable
+      # Explicit Postgres env so migrations and any libpq fallback use the service host, not localhost
+      PGHOST: postgres
+      PGPORT: "5432"
+      PGUSER: postgres
+      PGPASSWORD: postgres
+      PGDATABASE: postgres
+      PGSSLMODE: disable
+
 volumes:
   postgres:
     driver: local

docker/README.md

@@ -27,3 +27,13 @@ The script will prompt you for the following information:
 3. **Domain Name**: Enter the domain name that Traefik will use to create the SSL certificate and forward requests to Formbricks.
 
 That's it! After running the command and providing the required information, visit the domain name you entered, and you should see the Formbricks home wizard!
+
+## Formbricks Hub
+
+The stack includes the [Formbricks Hub](https://github.com/formbricks/hub) API (`ghcr.io/formbricks/hub`). Hub shares the same database as Formbricks by default.
+
+- **Migrations**: A `hub-migrate` service runs Hub’s database migrations (goose + river) before the Hub API starts. It runs on every `docker compose up` and is idempotent.
+- **Production** (`docker/docker-compose.yml`): Set `HUB_API_KEY` (required). Override `HUB_DATABASE_URL` only if you want Hub to use a separate database (default is the same Formbricks Postgres URL).
+- **Development** (`docker-compose.dev.yml`): Hub uses the same Postgres database; `API_KEY` defaults to `dev-api-key` (override with `HUB_API_KEY`).
+
+Hub listens on port **8080**.

docker/docker-compose.yml

@@ -29,6 +29,12 @@ x-environment: &environment
     # To use external Redis/Valkey: remove the redis service below and update this URL
     REDIS_URL: redis://redis:6379
 
+    # Formbricks Hub (port 8080): API key required. Use e.g. openssl rand -hex 32
+    HUB_API_KEY:
+
+    # Hub database URL (optional). Default: same Postgres as Formbricks. Set only if Hub uses a separate DB.
+    # HUB_DATABASE_URL:
+
     # Set the minimum log level(debug, info, warn, error, fatal)
     # LOG_LEVEL: info
 
@@ -202,7 +208,7 @@ x-environment: &environment
 services:
   postgres:
     restart: always
-    image: pgvector/pgvector:pg17
+    image: pgvector/pgvector:pg18
     volumes:
       - postgres:/var/lib/postgresql/data
     environment:
@@ -245,6 +251,33 @@ services:
       - ./saml-connection:/home/nextjs/apps/web/saml-connection
     <<: *environment
 
+  # Run Hub DB migrations (goose + river) before the API starts. Uses same image; migrations are idempotent.
+  hub-migrate:
+    image: ghcr.io/formbricks/hub:latest
+    restart: "no"
+    entrypoint: ["sh", "-c"]
+    command: ["if [ -x /usr/local/bin/goose ] && [ -x /usr/local/bin/river ]; then /usr/local/bin/goose -dir /app/migrations postgres \"$$DATABASE_URL\" up && /usr/local/bin/river migrate-up --database-url \"$$DATABASE_URL\"; else echo 'Migration tools (goose/river) not in image, skipping migrations.'; fi"]
+    environment:
+      DATABASE_URL: ${HUB_DATABASE_URL:-postgresql://postgres:postgres@postgres:5432/formbricks?schema=public}
+    depends_on:
+      postgres:
+        condition: service_healthy
+
+  # Formbricks Hub API (ghcr.io/formbricks/hub). Set HUB_API_KEY. By default shares the Formbricks database; set HUB_DATABASE_URL to use a separate DB.
+  hub:
+    restart: always
+    image: ghcr.io/formbricks/hub:latest
+    depends_on:
+      hub-migrate:
+        condition: service_completed_successfully
+      postgres:
+        condition: service_healthy
+    ports:
+      - "8080:8080"
+    environment:
+      API_KEY: ${HUB_API_KEY:?HUB_API_KEY is required to run Hub}
+      DATABASE_URL: ${HUB_DATABASE_URL:-postgresql://postgres:postgres@postgres:5432/formbricks?schema=public}
+
 volumes:
   postgres:
     driver: local

docs/self-hosting/advanced/rate-limiting.mdx

@@ -1,41 +1,94 @@
 ---
 title: "Rate Limiting"
-description: "Rate limiting for Formbricks"
+description: "Current request rate limits in Formbricks"
 icon: "timer"
 ---
 
-To protect the platform from abuse and ensure fair usage, rate limiting is enforced by default on an IP-address basis. If a client exceeds the allowed number of requests within the specified time window, the API will return a `429 Too Many Requests` status code.
+Formbricks applies request rate limits to protect against abuse and keep API usage fair.
 
-## Default Rate Limits
+Rate limits are scoped by identifier, depending on the endpoint:
 
-The following rate limits apply to various endpoints:
+- IP hash (for unauthenticated/client-side routes and public actions)
+- API key ID (for authenticated API calls)
+- User ID (for authenticated session-based calls and server actions)
+- Organization ID (for follow-up email dispatch)
 
-| **Endpoint**            | **Rate Limit** | **Time Window** |
-| ----------------------- | -------------- | --------------- |
-| `POST /login`           | 30 requests    | 15 minutes      |
-| `POST /signup`          | 30 requests    | 60 minutes      |
-| `POST /verify-email`    | 10 requests    | 60 minutes      |
-| `POST /forgot-password` | 5 requests     | 60 minutes      |
-| `GET /client-side-api`  | 100 requests   | 1 minute        |
-| `POST /share`           | 100 requests   | 60 minutes      |
+When a limit is exceeded, the API returns `429 Too Many Requests`.
 
-If a request exceeds the defined rate limit, the server will respond with:
+## Management API Rate Limits
+
+These are the current limits for Management APIs:
+
+| **Route Group** | **Limit** | **Window** | **Identifier** |
+| --- | --- | --- | --- |
+| `/api/v1/management/*` (except `/api/v1/management/storage`), `/api/v1/webhooks/*`, `/api/v1/integrations/*`, `/api/v1/management/me` | 100 requests | 1 minute | API key ID or session user ID |
+| `/api/v2/management/*` (and other v2 authenticated routes that use `authenticatedApiClient`) | 100 requests | 1 minute | API key ID |
+| `POST /api/v1/management/storage` | 5 requests | 1 minute | API key ID or session user ID |
+
+## All Enforced Limits
+
+| **Config** | **Limit** | **Window** | **Identifier** | **Used For** |
+| --- | --- | --- | --- | --- |
+| `auth.login` | 10 requests | 15 minutes | IP hash | Email/password login flow (`/api/auth/callback/credentials`) |
+| `auth.signup` | 30 requests | 60 minutes | IP hash | Signup server action |
+| `auth.forgotPassword` | 5 requests | 60 minutes | IP hash | Forgot password server action |
+| `auth.verifyEmail` | 10 requests | 60 minutes | IP hash | Email verification callback + resend verification action |
+| `api.v1` | 100 requests | 1 minute | API key ID or session user ID | v1 management, webhooks, integrations, and `/api/v1/management/me` |
+| `api.v2` | 100 requests | 1 minute | API key ID | v2 authenticated API wrapper (`authenticatedApiClient`) |
+| `api.client` | 100 requests | 1 minute | IP hash | v1 client API routes (except `/api/v1/client/og` and storage upload override), plus v2 routes that re-use those v1 handlers |
+| `storage.upload` | 5 requests | 1 minute | IP hash or authenticated ID | Client storage upload and management storage upload |
+| `storage.delete` | 5 requests | 1 minute | API key ID or session user ID | `DELETE /storage/[environmentId]/[accessType]/[fileName]` |
+| `actions.emailUpdate` | 3 requests | 60 minutes | User ID | Profile email update action |
+| `actions.surveyFollowUp` | 50 requests | 60 minutes | Organization ID | Survey follow-up email processing |
+| `actions.sendLinkSurveyEmail` | 10 requests | 60 minutes | IP hash | Link survey email send action |
+| `actions.licenseRecheck` | 5 requests | 1 minute | User ID | Enterprise license recheck action |
+
+## Current Endpoint Exceptions
+
+The following routes are currently not rate-limited by the server-side limiter:
+
+- `GET /api/v1/client/og` (explicitly excluded)
+- `POST /api/v2/client/[environmentId]/responses`
+- `POST /api/v2/client/[environmentId]/displays`
+- `GET /api/v2/health`
+
+## 429 Response Shape
+
+v1-style endpoints return:
 
 ```json
 {
-  "code": 429,
-  "error": "Too many requests, Please try after a while!"
+  "code": "too_many_requests",
+  "message": "Maximum number of requests reached. Please try again later.",
+  "details": {}
+}
+```
+
+v2-style endpoints return:
+
+```json
+{
+  "error": {
+    "code": 429,
+    "message": "Too Many Requests"
+  }
 }
 ```
 
 ## Disabling Rate Limiting
 
-For self-hosters, rate limiting can be disabled if necessary. However, we **strongly recommend keeping rate limiting enabled in production environments** to prevent abuse.
+For self-hosters, rate limiting can be disabled if necessary. We strongly recommend keeping it enabled in production.
 
-To disable rate limiting, set the following environment variable:
+Set:
 
 ```bash
 RATE_LIMITING_DISABLED=1
 ```
 
-After making this change, restart your server to apply the new setting.
+After changing this value, restart the server.
+
+## Operational Notes
+
+- Redis/Valkey is required for robust rate limiting (`REDIS_URL`).
+- If Redis is unavailable at runtime, rate-limiter checks currently fail open (requests are allowed through without enforcement).
+- Authentication failure audit logging uses a separate throttle (`shouldLogAuthFailure()`) and is intentionally **fail-closed**: when Redis is unavailable or errors occur, audit log entries are **skipped entirely** rather than written without throttle control. This prevents spam while preserving the hash-integrity chain required for compliance. In other words, if Redis is down, no authentication-failure audit logs will be recorded—requests themselves are still allowed (fail-open rate limiting above), but the audit trail for those failures will not be written.

docs/self-hosting/configuration/environment-variables.mdx

@@ -77,4 +77,13 @@ These variables are present inside your machine's docker-compose file. Restart t
 | AUDIT_LOG_ENABLED            | Set this to 1 to enable audit logging. Requires Redis to be configured with the REDIS_URL env variable.              | optional                                                | 0                                                                         |
 | AUDIT_LOG_GET_USER_IP        | Set to 1 to include user IP addresses in audit logs from request headers                                             | optional                                                | 0                                                                         |
 
+#### Formbricks Hub
+
+When running the stack with [Formbricks Hub](https://github.com/formbricks/hub) (e.g. via docker-compose), the following variables apply to the Hub service:
+
+| Variable         | Description                                                                                       | Required                | Default                                                                 |
+| ---------------- | ------------------------------------------------------------------------------------------------- | ----------------------- | ----------------------------------------------------------------------- |
+| HUB_API_KEY      | API key for the Formbricks Hub API (port 8080). Required when the Hub service is run.             | required (when Hub runs) | (e.g. `openssl rand -hex 32`)                                            |
+| HUB_DATABASE_URL | PostgreSQL connection URL for Hub. Omit to use the same database as Formbricks.                  | optional                | Same as Formbricks `DATABASE_URL` (shared database)                     |
+
 Note: If you want to configure something that is not possible via above, please open an issue on our GitHub repo here or reach out to us on Github Discussions and we'll try our best to work out a solution with you.

docs/xm-and-surveys/xm/best-practices/cancel-subscription.mdx

@@ -16,8 +16,6 @@ The Churn Survey is among the most effective ways to identify weaknesses in your
 
 * Follow-up to prevent bad reviews
 
-* Coming soon: Make survey mandatory
-
 ## Overview
 
 To run the Churn Survey in your app you want to proceed as follows:
@@ -80,13 +78,6 @@ Whenever a user visits this page, matches the filter conditions above and the re
 
 Here is our complete [Actions manual](/xm-and-surveys/surveys/website-app-surveys/actions/) covering [No-Code](/xm-and-surveys/surveys/website-app-surveys/actions#setting-up-no-code-actions) and [Code](/xm-and-surveys/surveys/website-app-surveys/actions#setting-up-code-actions) Actions.
 
-<Note>
-  Pre-churn flow coming soon We’re currently building full-screen survey
-  pop-ups. You’ll be able to prevent users from closing the survey unless they
-  respond to it. It’s certainly debatable if you want that but you could force
-  them to click through the survey before letting them cancel 🤷
-</Note>
-
 ### 5. Select Action in the “When to ask” card
 
 ![Select feedback button action](/images/xm-and-surveys/xm/best-practices/cancel-subscription/select-action.webp)

docs/xm-and-surveys/xm/best-practices/improve-trial-cr.mdx

@@ -46,13 +46,7 @@ _Want to change the button color? Adjust it in the project settings!_
 
 Save, and move over to the **Audience** tab.
 
-### 3. Pre-segment your audience (coming soon)
-
-<Note>
-### Filter by Attribute Coming Soon
-
-We're working on pre-segmenting users by attributes. This manual will be updated in the coming days.
-</Note>
+### 3. Pre-segment your audience
 
 Pre-segmentation isn't needed for this survey since you likely want to target all users who cancel their trial. You can use a specific user action, like clicking **Cancel Trial**, to show the survey only to users trying your product.
 
@@ -62,13 +56,13 @@ How you trigger your survey depends on your product. There are two options:
 
 - **Trigger by Page view:** If you have a page like `/trial-cancelled` for users who cancel their trial subscription, create a user action with the type "Page View." Select "Limit to specific pages" and apply URL filters with these settings:
 
-![Change text content](/images/xm-and-surveys/xm/best-practices/improve-trial-cr/action-pageurl.webp)
+![Add page URL action](/images/xm-and-surveys/xm/best-practices/improve-trial-cr/action-pageurl.webp)
 
 Whenever a user visits this page, the survey will be displayed ✅
 
 - **Trigger by Button Click:** In a different case, you have a “Cancel Trial" button in your app. You can setup a user Action with the `Inner Text`:
 
-![Change text content](/images/xm-and-surveys/xm/best-practices/improve-trial-cr/action-innertext.webp)
+![Add inner text action](/images/xm-and-surveys/xm/best-practices/improve-trial-cr/action-innertext.webp)
 
 Please have a look at our complete [Actions manual](/xm-and-surveys/surveys/website-app-surveys/actions) if you have questions.
 

docs/xm-and-surveys/xm/best-practices/interview-prompt.mdx

@@ -54,13 +54,7 @@ In the button settings you have to make sure it is set to “External URL”. In
 
 Save, and move over to the “Audience” tab.
 
-### 3. Pre-segment your audience (coming soon)
-
-<Note>
-  ## Filter by attribute coming soon. We're working on pre-segmenting users by
-
-  attributes. We will update this manual in the next few days.
-</Note>
+### 3. Pre-segment your audience
 
 Once you clicked over to the “Audience” tab you can change the settings. In the **Who To Send** card, select “Filter audience by attribute”. This allows you to only show the prompt to a specific segment of your user base.
 

packages/survey-ui/src/styles/globals.css

@@ -127,12 +127,12 @@
   --fb-input-font-size: 14px;
   --fb-input-font-weight: 400;
   --fb-input-color: #414b5a;
-  --fb-input-placeholder-color: var(--fb-input-color);
+  --fb-input-placeholder-color: var(--fb-input-text-color, var(--fb-input-color));
   --fb-input-placeholder-opacity: 0.5;
   --fb-input-width: 100%;
-  --fb-input-height: 40px;
-  --fb-input-padding-x: 16px;
-  --fb-input-padding-y: 16px;
+  --fb-input-height: 20px;
+  --fb-input-padding-x: 8px;
+  --fb-input-padding-y: 8px;
   --fb-input-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 
   /* ── Progress Bar ──────────────────────────────────────────────────── */
@@ -244,4 +244,4 @@
 
 #fbjs textarea::-webkit-scrollbar-thumb:hover {
   background-color: hsl(215.4 16.3% 46.9% / 0.5);
-}
+}

packages/surveys/src/lib/styles.test.ts

@@ -443,6 +443,39 @@ describe("addCustomThemeToDom", () => {
     expect(variables["--fb-button-font-size"]).toBe("1.5rem");
   });
 
+  test("should derive input-placeholder-color from inputTextColor when set", () => {
+    const styling: TSurveyStyling = {
+      ...getBaseProjectStyling(),
+      questionColor: { light: "#AABBCC" },
+      inputTextColor: { light: "#112233" },
+    };
+    addCustomThemeToDom({ styling });
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    const variables = getCssVariables(styleElement);
+
+    // Placeholder should be derived from inputTextColor, not questionColor
+    expect(variables["--fb-input-placeholder-color"]).toBeDefined();
+    expect(variables["--fb-placeholder-color"]).toBeDefined();
+    // Both should be based on inputTextColor (#112233) mixed with white, not questionColor (#AABBCC)
+    // We can verify by checking the placeholder color doesn't contain the questionColor mix
+    expect(variables["--fb-input-placeholder-color"]).toBe(variables["--fb-placeholder-color"]);
+  });
+
+  test("should derive input-placeholder-color from questionColor when inputTextColor is not set", () => {
+    const styling: TSurveyStyling = {
+      ...getBaseProjectStyling(),
+      questionColor: { light: "#AABBCC" },
+    };
+    addCustomThemeToDom({ styling });
+    const styleElement = document.getElementById("formbricks__css__custom") as HTMLStyleElement;
+    const variables = getCssVariables(styleElement);
+
+    // Placeholder should fall back to questionColor when inputTextColor is not set
+    expect(variables["--fb-input-placeholder-color"]).toBeDefined();
+    expect(variables["--fb-placeholder-color"]).toBeDefined();
+    expect(variables["--fb-input-placeholder-color"]).toBe(variables["--fb-placeholder-color"]);
+  });
+
   test("should set signature and branding text colors for dark questionColor", () => {
     const styling = getBaseProjectStyling({
       questionColor: { light: "#202020" }, // A dark color

packages/surveys/src/lib/styles.ts

@@ -111,8 +111,10 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
   // Backwards-compat: legacy variables still used by some consumers/tests
   appendCssVariable("subheading-color", styling.questionColor?.light);
 
-  if (styling.questionColor?.light) {
-    appendCssVariable("placeholder-color", mixColor(styling.questionColor.light, "#ffffff", 0.3));
+  const placeholderBaseColor = styling.inputTextColor?.light ?? styling.questionColor?.light;
+  if (placeholderBaseColor) {
+    appendCssVariable("placeholder-color", mixColor(placeholderBaseColor, "#ffffff", 0.3));
+    appendCssVariable("input-placeholder-color", mixColor(placeholderBaseColor, "#ffffff", 0.3));
   }
 
   appendCssVariable("border-color", styling.inputBorderColor?.light);
@@ -192,8 +194,13 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
   }
 
   // Buttons (Advanced)
-  appendCssVariable("button-bg-color", styling.buttonBgColor?.light);
-  appendCssVariable("button-text-color", styling.buttonTextColor?.light);
+  const buttonBg = styling.buttonBgColor?.light ?? styling.brandColor?.light;
+  let buttonText = styling.buttonTextColor?.light;
+  if (buttonText === undefined && buttonBg) {
+    buttonText = isLight(buttonBg) ? "#0f172a" : "#ffffff";
+  }
+  appendCssVariable("button-bg-color", buttonBg);
+  appendCssVariable("button-text-color", buttonText);
   if (styling.buttonBorderRadius !== undefined)
     appendCssVariable("button-border-radius", formatDimension(styling.buttonBorderRadius));
   if (styling.buttonHeight !== undefined)
@@ -209,7 +216,11 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
 
   // Inputs (Advanced)
   appendCssVariable("input-background-color", styling.inputBgColor?.light ?? styling.inputColor?.light);
-  appendCssVariable("input-text-color", styling.inputTextColor?.light);
+  const inputTextColor = styling.inputTextColor?.light ?? styling.questionColor?.light;
+  appendCssVariable("input-text-color", inputTextColor);
+  if (inputTextColor) {
+    appendCssVariable("input-placeholder-color", mixColor(inputTextColor, "#ffffff", 0.3));
+  }
   if (styling.inputBorderRadius !== undefined)
     appendCssVariable("input-border-radius", formatDimension(styling.inputBorderRadius));
   if (styling.inputHeight !== undefined)
@@ -225,8 +236,8 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
   appendCssVariable("input-shadow", styling.inputShadow);
 
   // Options (Advanced)
-  appendCssVariable("option-bg-color", styling.optionBgColor?.light);
-  appendCssVariable("option-label-color", styling.optionLabelColor?.light);
+  appendCssVariable("option-bg-color", styling.optionBgColor?.light ?? styling.inputColor?.light);
+  appendCssVariable("option-label-color", styling.optionLabelColor?.light ?? styling.questionColor?.light);
   if (styling.optionBorderRadius !== undefined)
     appendCssVariable("option-border-radius", formatDimension(styling.optionBorderRadius));
   if (styling.optionPaddingX !== undefined)
@@ -277,8 +288,15 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
   // Implicitly set the progress track border radius to the roundness of the card
   appendCssVariable("progress-track-border-radius", formatDimension(roundness));
 
-  appendCssVariable("progress-track-bg-color", styling.progressTrackBgColor?.light);
-  appendCssVariable("progress-indicator-bg-color", styling.progressIndicatorBgColor?.light);
+  appendCssVariable(
+    "progress-track-bg-color",
+    styling.progressTrackBgColor?.light ??
+      (styling.brandColor?.light ? mixColor(styling.brandColor.light, "#ffffff", 0.8) : undefined)
+  );
+  appendCssVariable(
+    "progress-indicator-bg-color",
+    styling.progressIndicatorBgColor?.light ?? styling.brandColor?.light
+  );
 
   // Close the #fbjs variable block
   cssVariables += "}\n";
@@ -304,7 +322,7 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
     headlineDecls += "  font-size: var(--fb-element-headline-font-size) !important;\n";
   if (styling.elementHeadlineFontWeight !== undefined && styling.elementHeadlineFontWeight !== null)
     headlineDecls += "  font-weight: var(--fb-element-headline-font-weight) !important;\n";
-  if (styling.elementHeadlineColor?.light)
+  if (styling.elementHeadlineColor?.light || styling.questionColor?.light)
     headlineDecls += "  color: var(--fb-element-headline-color) !important;\n";
   addRule("#fbjs .label-headline,\n#fbjs .label-headline *", headlineDecls);
 
@@ -314,7 +332,7 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
     descriptionDecls += "  font-size: var(--fb-element-description-font-size) !important;\n";
   if (styling.elementDescriptionFontWeight !== undefined && styling.elementDescriptionFontWeight !== null)
     descriptionDecls += "  font-weight: var(--fb-element-description-font-weight) !important;\n";
-  if (styling.elementDescriptionColor?.light)
+  if (styling.elementDescriptionColor?.light || styling.questionColor?.light)
     descriptionDecls += "  color: var(--fb-element-description-color) !important;\n";
   addRule("#fbjs .label-description,\n#fbjs .label-description *", descriptionDecls);
 
@@ -324,7 +342,7 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
     upperDecls += "  font-size: var(--fb-element-upper-label-font-size) !important;\n";
   if (styling.elementUpperLabelFontWeight !== undefined && styling.elementUpperLabelFontWeight !== null)
     upperDecls += "  font-weight: var(--fb-element-upper-label-font-weight) !important;\n";
-  if (styling.elementUpperLabelColor?.light) {
+  if (styling.elementUpperLabelColor?.light || styling.questionColor?.light) {
     upperDecls += "  color: var(--fb-element-upper-label-color) !important;\n";
     upperDecls += "  opacity: var(--fb-element-upper-label-opacity, 1) !important;\n";
   }
@@ -332,9 +350,10 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
 
   // --- Buttons ---
   let buttonDecls = "";
-  if (styling.buttonBgColor?.light)
+  if (styling.buttonBgColor?.light || styling.brandColor?.light)
     buttonDecls += "  background-color: var(--fb-button-bg-color) !important;\n";
-  if (styling.buttonTextColor?.light) buttonDecls += "  color: var(--fb-button-text-color) !important;\n";
+  if (styling.buttonTextColor?.light || styling.brandColor?.light)
+    buttonDecls += "  color: var(--fb-button-text-color) !important;\n";
   if (styling.buttonBorderRadius !== undefined)
     buttonDecls += "  border-radius: var(--fb-button-border-radius) !important;\n";
   if (styling.buttonHeight !== undefined) buttonDecls += "  height: var(--fb-button-height) !important;\n";
@@ -355,11 +374,11 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
   // --- Options ---
   if (styling.optionBorderRadius !== undefined)
     addRule("#fbjs .rounded-option", "  border-radius: var(--fb-option-border-radius) !important;\n");
-  if (styling.optionBgColor?.light)
+  if (styling.optionBgColor?.light || styling.inputColor?.light)
     addRule("#fbjs .bg-option-bg", "  background-color: var(--fb-option-bg-color) !important;\n");
 
   let optionLabelDecls = "";
-  if (styling.optionLabelColor?.light)
+  if (styling.optionLabelColor?.light || styling.questionColor?.light)
     optionLabelDecls += "  color: var(--fb-option-label-color) !important;\n";
   if (styling.optionFontSize !== undefined)
     optionLabelDecls += "  font-size: var(--fb-option-font-size) !important;\n";
@@ -385,7 +404,8 @@ export const addCustomThemeToDom = ({ styling }: { styling: TProjectStyling | TS
     addRule("#fbjs .border-input-border", "  border-color: var(--fb-input-border-color) !important;\n");
 
   let inputTextDecls = "";
-  if (styling.inputTextColor?.light) inputTextDecls += "  color: var(--fb-input-text-color) !important;\n";
+  if (styling.inputTextColor?.light || styling.questionColor?.light)
+    inputTextDecls += "  color: var(--fb-input-text-color) !important;\n";
   if (styling.inputFontSize !== undefined)
     inputTextDecls += "  font-size: var(--fb-input-font-size) !important;\n";
   addRule("#fbjs .text-input-text", inputTextDecls);