@secmia/openui-flow 4.2.5 → 4.2.8

package/dist/index.mjs

@@ -565,6 +565,7 @@ function useAdaptiveFlow({
         return {
           ...state,
           step: action.step,
+          hasEvaluated: true,
           missingRequirements: action.missingRequirements,
           transitions: [...state.transitions, action.transition].slice(-100)
         };
@@ -589,6 +590,7 @@ function useAdaptiveFlow({
   const [context, setContext] = React.useState(() => withDefaults(initialValue));
   const [runtime, dispatch] = React.useReducer(runtimeReducer, {
     step: normalizedCompleteStep,
+    hasEvaluated: false,
     missingRequirements: [],
     transitions: [],
     busy: false,
@@ -600,6 +602,7 @@ function useAdaptiveFlow({
   });
   const {
     step,
+    hasEvaluated,
     missingRequirements,
     transitions,
     busy,
@@ -883,6 +886,7 @@ function useAdaptiveFlow({
   return {
     context,
     step,
+    hasEvaluated,
     completeStep: normalizedCompleteStep,
     requirements: normalizedRequirements,
     missingRequirements,
@@ -929,6 +933,7 @@ function AdaptiveFlow({
   const {
     context,
     step,
+    hasEvaluated,
     completeStep: normalizedCompleteStep,
     requirements: normalizedRequirements,
     missingRequirements: missing,
@@ -966,9 +971,11 @@ function AdaptiveFlow({
     () => oauthProviders && oauthProviders.length > 0 ? oauthProviders : defaultOAuthProviders,
     [oauthProviders]
   );
+  const completedCount = hasEvaluated ? normalizedRequirements.length - missing.length : 0;
   const needsJobTitle = normalizedRequirements.includes("has_job_title");
-  const stepLabel = stepTitles?.[step] ?? defaultStepTitle[step] ?? step;
+  const stepLabel = hasEvaluated ? stepTitles?.[step] ?? defaultStepTitle[step] ?? step : "Loading flow";
   const defaultView = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hasEvaluated ? /* @__PURE__ */ jsx("div", { className: classNames?.info, style: uiStyles.info, children: "Evaluating required steps..." }) : null,
     step === "COLLECT_EMAIL" ? /* @__PURE__ */ jsx(
       EmailBlock,
       {
@@ -1066,7 +1073,7 @@ function AdaptiveFlow({
         /* @__PURE__ */ jsx("h2", { className: classNames?.title, style: uiStyles.title, children: stepLabel })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: classNames?.badge, style: uiStyles.badge, children: [
-        normalizedRequirements.length - missing.length,
+        completedCount,
         "/",
         normalizedRequirements.length
       ] })
@@ -1378,10 +1385,11 @@ var defaultStyles = {
     gap: 12,
     width: "100%",
     maxWidth: 560,
-    border: "1px solid #e5e7eb",
+    border: "1px solid #cbd5e1",
     borderRadius: 14,
     padding: 16,
-    background: "#ffffff",
+    background: "#f8fafc",
+    color: "#0f172a",
     fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif"
   },
   headerRow: {
@@ -1394,7 +1402,7 @@ var defaultStyles = {
     fontSize: 12,
     textTransform: "uppercase",
     letterSpacing: 1.2,
-    color: "#6b7280",
+    color: "#475569",
     marginBottom: 4
   },
   title: {
@@ -1403,12 +1411,13 @@ var defaultStyles = {
     lineHeight: "28px"
   },
   badge: {
-    border: "1px solid #d1d5db",
+    border: "1px solid #cbd5e1",
     borderRadius: 999,
     padding: "4px 10px",
     fontSize: 12,
     fontWeight: 600,
-    color: "#374151"
+    color: "#1e293b",
+    background: "#ffffff"
   },
   success: {
     border: "1px solid #bbf7d0",
@@ -1436,7 +1445,7 @@ var defaultStyles = {
   },
   caption: {
     margin: 0,
-    color: "#4b5563",
+    color: "#334155",
     fontSize: 14
   },
   formRow: {
@@ -1451,19 +1460,22 @@ var defaultStyles = {
   },
   input: {
     width: "100%",
-    border: "1px solid #d1d5db",
+    border: "1px solid #94a3b8",
     borderRadius: 8,
     height: 40,
     padding: "0 12px",
-    fontSize: 14
+    fontSize: 14,
+    background: "#ffffff",
+    color: "#0f172a"
   },
   button: {
-    border: "1px solid #d1d5db",
+    border: "1px solid #94a3b8",
     borderRadius: 8,
     height: 40,
     padding: "0 14px",
     fontWeight: 600,
     background: "#ffffff",
+    color: "#0f172a",
     whiteSpace: "nowrap",
     cursor: "pointer"
   },
@@ -1488,10 +1500,11 @@ var defaultStyles = {
   },
   oauthButton: {
     flex: 1,
-    border: "1px solid #d1d5db",
+    border: "1px solid #94a3b8",
     borderRadius: 8,
     padding: "10px 12px",
-    background: "#f9fafb",
+    background: "#ffffff",
+    color: "#0f172a",
     cursor: "pointer"
   }
 };