@capillarytech/creatives-library 8.0.299-alpha.6 → 8.0.299-alpha.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.299-alpha.6",
+  "version": "8.0.299-alpha.7",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -7,10 +7,10 @@
 
  /* All ant overrides scoped under wrapper to avoid affecting other modals. */
 .common-test-preview-modal-wrap {
- z-index: 10000 !important;
- display: flex !important;
- justify-content: center !important;
- align-items: center !important;
+ z-index: 10000;
+ display: flex;
+ justify-content: center;
+ align-items: center;
 }
 
 /* Modals rendered inside slidebox via getContainer (lib mode) – mask and wrap above content */
@@ -19,14 +19,13 @@
    z-index: 10001;
  }
  .common-test-preview-modal-wrap {
-   z-index: 10003 !important;
+   z-index: 10003;
  }
  .ant-modal-mask,
  .ant-modal-wrap {
-   z-index: 10003 !important;
+   z-index: 10003;
  }
 }
-
 /* Lookup spinner overlay above test-customers dropdown. */
 .common-test-preview-lookup-spin {
  position: relative;
@@ -39,14 +38,12 @@
 
 /* When customer lookup is loading, dropdown renders inside .send-test-section; lower it so spinner is on top. */
 .common-test-preview-customer-loading .test-customers-tree-select-dropdown {
- z-index: 0 !important;
+ z-index: 0;
 }
 
 /* Customer creation modal content – avoid inline styles */
 .common-test-preview-modal {
  color: $CAP_G01 !important;
- /* Modal: 14px base so em values are independent of root (width 32.57em = 456px) */
- font-size: 14px;
  width: 32.571em !important;
  margin-left: auto;
  margin-right: auto;
@@ -85,92 +82,40 @@
 
  /* Input text color and font to match standalone (lib mode can lose host styles) */
  .customer-creation-modal-input {
-   width: 100%;
-   color: $CAP_G01;
-   font-size: $FONT_SIZE_M;
-   font-family: 'Roboto', Arial, sans-serif;
-   font-weight: normal;
    border: none !important;
-   border-bottom: none !important;
-   box-shadow: none !important;
-
    /* Sizes in em for 14px base: same px as .5rem 2.5rem 1.5rem .875rem at 16px (8px, 40px, 24px, 14px) */
    .ant-input {
-     color: $CAP_G01 !important;
-     font-size: $FONT_SIZE_M !important;
-     font-family: 'Roboto', Arial, sans-serif !important;
-     font-weight: normal !important;
-     background-color: $CAP_WHITE !important;
+     color: $CAP_G01;
+     font-size: $FONT_SIZE_M;
+     font-weight: normal;
      padding: 0.571em; /* 8px */
      height: 2.857em; /* 40px */
      line-height: 1.714em; /* 24px */
    }
    .ant-input:hover,
    .ant-input:focus {
-     background-color: $CAP_WHITE !important;
+     border: $CAP_SPACE_01 solid $CAP_G01 !important;
    }
    .ant-input::placeholder {
-     color: $CAP_G04;
-   }
-
-   /* No darkening on hover/focus – wrapper and inner stay same background */
-   & > *:hover,
-   & > *:focus,
-   & > *.ant-input-affix-wrapper-focused .ant-input {
-     background-color: $CAP_WHITE !important;
+     color: $CAP_G06;
    }
 
    /* Error state: single clean red border, no double line or focus ring */
    &.has-error {
-     color: $CAP_COLOR_03 !important;
-     border-bottom: none !important;
-     box-shadow: none !important;
-
-     & > *::after {
-       display: none !important;
-       content: none !important;
-       border: none !important;
-       height: 0 !important;
-       background: none !important;
-     }
-
      .ant-input-affix-wrapper {
-       border: 1px solid $CAP_COLOR_03 !important;
+       border: 1px solid $CAP_COLOR_03;
        border-radius: $CAP_SPACE_04;
-       box-shadow: none !important;
-       outline: none !important;
-       background-color: $CAP_WHITE !important;
      }
      .ant-input-affix-wrapper:hover,
      .ant-input-affix-wrapper:focus,
      .ant-input-affix-wrapper-focused {
-       border: 1px solid $CAP_COLOR_03 !important;
-       box-shadow: none !important;
-       outline: none !important;
-       background-color: $CAP_WHITE !important;
+       border: 1px solid $CAP_COLOR_03;
      }
      .ant-input-affix-wrapper .ant-input {
        border: none !important;
-       box-shadow: none !important;
-       background-color: $CAP_WHITE !important;
-     }
-     .ant-input-affix-wrapper .ant-input:hover,
-     .ant-input-affix-wrapper .ant-input:focus {
-       background-color: $CAP_WHITE !important;
      }
-     /* When no affix wrapper (plain input) */
      .ant-input {
-       border: 1px solid $CAP_COLOR_03 !important;
-       border-radius: $CAP_SPACE_04;
-       box-shadow: none !important;
-       outline: none !important;
-       background-color: $CAP_WHITE !important;
-     }
-     .ant-input:hover,
-     .ant-input:focus {
-       box-shadow: none !important;
-       outline: none !important;
-       background-color: $CAP_WHITE !important;
+       border: 1px solid $CAP_COLOR_03;
      }
    }
  }
@@ -180,55 +125,24 @@
    color: $CAP_COLOR_03;
    font-size: $FONT_SIZE_S;
    margin-top: $CAP_SPACE_04;
-   border: none !important;
-   border-top: none !important;
-   box-shadow: none !important;
+   border: none ;
+   border-top: none ;
+   box-shadow: none ;
 
    &::before,
    &::after {
-     display: none !important;
-     content: none !important;
-     border: none !important;
+     display: none ;
+     content: none ;
+     border: none ;
    }
  }
 
- /* Remove any extra underline/border between input and error message – scoped via wrapper only */
- .customer-creation-modal-input.has-error + .customer-creation-modal-validation-error::before {
-   display: none !important;
-   border: none !important;
-   content: none !important;
- }
- .customer-creation-modal-row .customer-creation-modal-validation-error {
-   border-top: none !important;
-   box-shadow: none !important;
- }
- .customer-creation-modal-row:has(.customer-creation-modal-input.has-error) {
-   border-bottom: none !important;
-   box-shadow: none !important;
-   .customer-creation-modal-validation-error {
-     border-top: none !important;
-     box-shadow: none !important;
-   }
-   .customer-creation-modal-input {
-     border-bottom: none !important;
-   }
- }
- /* Kill any pseudo-element line inside input wrapper */
- .customer-creation-modal-row:has(.customer-creation-modal-input.has-error) .customer-creation-modal-input *::after {
-   display: none !important;
-   content: none !important;
-   border: none !important;
-   height: 0 !important;
-   min-height: 0 !important;
-   background: none !important;
- }
-
  /* Lookup loading: make Email and Mobile fields look disabled (wrapper-only) */
  .customer-creation-modal--lookup-loading .customer-creation-modal-row--email .customer-creation-modal-input,
  .customer-creation-modal--lookup-loading .customer-creation-modal-row--last .customer-creation-modal-input {
    opacity: 0.65;
    cursor: not-allowed;
-   background-color: $CAP_G09 !important;
+   background-color: $CAP_G09;
  }
 
  /* Existing customer modal content */
@@ -237,13 +151,17 @@
      margin-bottom: $CAP_SPACE_16;
    }
 
+   .ant-card.cap-card-v2{
+    border:none
+   }
+
    .ant-card-body {
      padding: 1rem;
+     border-radius: $CAP_SPACE_08;
+     border: $CAP_SPACE_01 solid $CAP_G06;
    }
 
    &-card {
-     border-radius: $CAP_SPACE_08;
-     border: $CAP_SPACE_01 solid $CAP_G06;
      padding: 0;
    }
 
@@ -687,11 +605,10 @@
 }
 
 // Test customers TreeSelect dropdown: limit height and make scrollable (dropdown renders in portal)
-// min-width so dropdown looks the same in campaigns and creatives
 .test-customers-tree-select-dropdown {
- min-width: 18rem !important;
- max-height: 20rem !important; /* 320px */
- overflow-y: auto !important;
+ min-width: 18rem ;
+ max-height: 20rem ; /* 320px */
+ overflow-y: auto ;
  .ant-select-tree-list-holder-inner {
    overflow: visible;
  }

package/v2Components/CommonTestAndPreview/index.js

@@ -171,9 +171,6 @@ const CommonTestAndPreview = (props) => {
   const [selectedTestEntities, setSelectedTestEntities] = useState([]);
   const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately (EMAIL only)
   const previousBeeContentRef = useRef(''); // Track previous BEE content (EMAIL only)
-  // Container for notifications so they render inside the slidebox (visible in campaigns/library mode)
-  const notificationContainerRef = useRef(null);
-  const getNotificationContainer = () => notificationContainerRef.current || document.body;
   // Delivery settings for Test and Preview (SMS, Email, WhatsApp) — user selection only
   const [testPreviewDeliverySettings, setTestPreviewDeliverySettings] = useState({
     [CHANNELS.SMS]: {
@@ -447,7 +444,6 @@ const CommonTestAndPreview = (props) => {
         if (response && response.success) {
           CapNotification.success({
             message: formatMessage(messages.newTestCustomerAddedSuccess),
-            getContainer: getNotificationContainer,
           });
           // API may return customerId in response.response (e.g. { response: { customerId: 438845651 } })
           const res = response?.response || response;
@@ -470,7 +466,6 @@ const CommonTestAndPreview = (props) => {
           CapNotification.error({
             message: formatMessage(messages.errorTitle),
             description: response?.message || formatMessage(messages.failedToAddTestCustomer),
-            getContainer: getNotificationContainer,
           });
         }
     } catch (error) {
@@ -479,7 +474,6 @@ const CommonTestAndPreview = (props) => {
         CapNotification.error({
           message: formatMessage(messages.errorTitle),
           description: error?.message || formatMessage(messages.errorAddingTestCustomer),
-          getContainer: getNotificationContainer,
         });
       }
     } finally {
@@ -2528,7 +2522,6 @@ const CommonTestAndPreview = (props) => {
     } catch (error) {
       CapNotification.error({
         message: formatMessage(messages.invalidJSON),
-        getContainer: getNotificationContainer,
       });
     }
   };
@@ -2575,7 +2568,6 @@ const CommonTestAndPreview = (props) => {
     } catch (error) {
       CapNotification.error({
         message: formatMessage(messages.previewUpdateError),
-        getContainer: getNotificationContainer,
       });
     }
   };
@@ -2669,7 +2661,6 @@ const CommonTestAndPreview = (props) => {
       setSearchValue('');
       CapNotification.success({
         message: formatMessage(messages.customerAlreadyInTestList),
-        getContainer: getNotificationContainer,
       });
       return;
     }
@@ -2685,7 +2676,7 @@ const CommonTestAndPreview = (props) => {
 
       if (!success) {
         const errorMessage = response?.message || response?.status?.message || formatMessage(messages.memberLookupError);
-        CapNotification.error({ title: formatMessage(messages.errorTitle), message: errorMessage, getContainer: getNotificationContainer });
+        CapNotification.error({ title: formatMessage(messages.errorTitle), message: errorMessage });
         return;
       }
 
@@ -2702,7 +2693,6 @@ const CommonTestAndPreview = (props) => {
           setSearchValue('');
           CapNotification.success({
             message: formatMessage(messages.customerAlreadyInTestList),
-            getContainer: getNotificationContainer,
           });
           return;
         }
@@ -2720,7 +2710,6 @@ const CommonTestAndPreview = (props) => {
     } catch {
       CapNotification.error({
         message: formatMessage(messages.memberLookupError),
-        getContainer: getNotificationContainer,
       });
     } finally {
       setIsCustomerDataLoading(false);
@@ -2773,12 +2762,10 @@ const CommonTestAndPreview = (props) => {
           if (result) {
             CapNotification.success({
               message: formatMessage(messages.testMessageSent),
-              getContainer: getNotificationContainer,
             });
           } else {
             CapNotification.error({
               message: formatMessage(messages.testMessageFailed),
-              getContainer: getNotificationContainer,
             });
           }
         });
@@ -2900,7 +2887,6 @@ const CommonTestAndPreview = (props) => {
       show={show}
       size="size-xl"
       content={(
-        <div ref={notificationContainerRef} className="common-test-and-preview-notification-container" style={{ position: 'relative', height: '100%' }}>
         <CapSpin
           spinning={isCustomerDataLoading}
           className={`common-test-preview-lookup-spin ${isCustomerDataLoading ? 'common-test-preview-customer-loading' : ''}`}
@@ -2947,7 +2933,6 @@ const CommonTestAndPreview = (props) => {
           )}
           </CapRow>
         </CapSpin>
-        </div>
       )}
     />
   );

package/v2Components/HtmlEditor/hooks/__tests__/useValidation.test.js

@@ -644,6 +644,326 @@ describe('useValidation', () => {
     // The functionality is verified through integration tests and the hasErrors test above
   });
 
+  describe('getLineAndColumnFromPosition utility (lines 36-46)', () => {
+    it('computes correct line and column from position in security issue', async () => {
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => false);
+      // position 12 in "line1\nline2\nX" → line 3, column 1
+      const content = 'line1\nline2\njavascript:alert(1)';
+      findUnsafeContent.mockImplementationOnce(() => [{ type: 'JavaScript Protocol', position: 12 }]);
+
+      render(
+        <TestComponent
+          content={content}
+          options={{ enableRealTime: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const secIssue = issues.find((i) => i.source === 'security');
+        expect(secIssue).toBeDefined();
+        expect(secIssue.line).toBe(3);
+        expect(secIssue.column).toBe(1);
+      });
+    });
+
+    it('defaults line/column to 1 when security issue has no position', async () => {
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => false);
+      findUnsafeContent.mockImplementationOnce(() => [{ type: 'JavaScript Protocol' }]); // no position
+
+      render(
+        <TestComponent
+          content="<a href='javascript:x'>x</a>"
+          options={{ enableRealTime: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const secIssue = issues.find((i) => i.source === 'security');
+        expect(secIssue).toBeDefined();
+        expect(secIssue.line).toBe(1);
+        expect(secIssue.column).toBe(1);
+      });
+    });
+
+    it('handles negative or undefined position in getLineAndColumnFromPosition', async () => {
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => false);
+      findUnsafeContent.mockImplementationOnce(() => [{ type: 'JavaScript Protocol', position: -5 }]);
+
+      render(
+        <TestComponent
+          content="<a href='javascript:x'>x</a>"
+          options={{ enableRealTime: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const secIssue = issues.find((i) => i.source === 'security');
+        expect(secIssue).toBeDefined();
+        // negative position falls back to line 1, column 1
+        expect(secIssue.line).toBe(1);
+        expect(secIssue.column).toBe(1);
+      });
+    });
+  });
+
+  describe('getAllIssues spread — all six arrays included (lines 401-411)', () => {
+    it('includes items from htmlErrors, htmlWarnings, htmlInfo, cssErrors, cssWarnings, cssInfo', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: false,
+        errors: [{ type: 'error', message: 'html error', line: 1, column: 1, rule: 'r1', severity: 'error', source: 'htmlhint' }],
+        warnings: [{ type: 'warning', message: 'html warning', line: 2, column: 1, rule: 'r2', severity: 'warning', source: 'htmlhint' }],
+        info: [{ type: 'info', message: 'html info', line: 3, column: 1, rule: 'r3', severity: 'info', source: 'htmlhint' }],
+      }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({
+        isValid: false,
+        errors: [{ type: 'error', message: 'css error', line: 4, column: 1, rule: 'r4', severity: 'error', source: 'css-validator' }],
+        warnings: [{ type: 'warning', message: 'css warning', line: 5, column: 1, rule: 'r5', severity: 'warning', source: 'css-validator' }],
+        info: [{ type: 'info', message: 'css info', line: 6, column: 1, rule: 'r6', severity: 'info', source: 'css-validator' }],
+      }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>test</div>"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const rules = issues.map((i) => i.rule);
+        expect(rules).toContain('r1'); // htmlErrors
+        expect(rules).toContain('r2'); // htmlWarnings
+        expect(rules).toContain('r3'); // htmlInfo
+        expect(rules).toContain('r4'); // cssErrors
+        expect(rules).toContain('r5'); // cssWarnings
+        expect(rules).toContain('r6'); // cssInfo
+        expect(issues.length).toBeGreaterThanOrEqual(6);
+      });
+    });
+
+    it('sorts issues: errors before warnings before info', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: false,
+        errors: [{ type: 'error', message: 'html error', line: 10, column: 1, rule: 're', severity: 'error', source: 'htmlhint' }],
+        warnings: [{ type: 'warning', message: 'html warning', line: 1, column: 1, rule: 'rw', severity: 'warning', source: 'htmlhint' }],
+        info: [{ type: 'info', message: 'html info', line: 1, column: 1, rule: 'ri', severity: 'info', source: 'htmlhint' }],
+      }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>test</div>"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        const issues = validationState.getAllIssues();
+        const severities = issues.map((i) => i.severity);
+        // Errors should come before warnings, warnings before info
+        const firstError = severities.indexOf('error');
+        const firstWarning = severities.indexOf('warning');
+        const firstInfo = severities.indexOf('info');
+        if (firstError !== -1 && firstWarning !== -1) expect(firstError).toBeLessThan(firstWarning);
+        if (firstWarning !== -1 && firstInfo !== -1) expect(firstWarning).toBeLessThan(firstInfo);
+      });
+    });
+  });
+
+  describe('hasClientSideLiquidErrors and hasBlockingErrors (lines 455-456)', () => {
+    it('sets hasBlockingErrors=true when htmlErrors has a liquid-validator error', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: false,
+        errors: [{
+          type: 'error',
+          message: 'Liquid syntax error',
+          line: 1,
+          column: 1,
+          rule: 'liquid-syntax',
+          severity: 'error',
+          source: 'liquid-validator', // ISSUE_SOURCES.LIQUID
+        }],
+        warnings: [],
+        info: [],
+      }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="{{ invalid liquid }}"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        // hasClientSideLiquidErrors → true because htmlErrors has liquid-validator+error item
+        // therefore hasBlockingErrors → true
+        expect(validationState.hasBlockingErrors).toBe(true);
+      });
+    });
+
+    it('does NOT set hasBlockingErrors from liquid-validator warning (non-error severity)', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({
+        isValid: true,
+        errors: [],
+        warnings: [{
+          type: 'warning',
+          message: 'Liquid warning',
+          line: 1,
+          column: 1,
+          rule: 'liquid-warning',
+          severity: 'warning',
+          source: 'liquid-validator',
+        }],
+        info: [],
+      }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>test</div>"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        // hasClientSideLiquidErrors → false (severity is warning, not error)
+        // No other blocking conditions → hasBlockingErrors → false
+        expect(validationState.hasBlockingErrors).toBe(false);
+      });
+    });
+
+    it('sets hasBlockingErrors=true via API liquid errors', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>test</div>"
+          options={{
+            enableRealTime: false,
+            enableSanitization: false,
+            apiValidationErrors: { liquidErrors: ['API liquid error'], standardErrors: [] },
+          }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        // hasApiErrors → true → hasBlockingErrors → true
+        expect(validationState.hasBlockingErrors).toBe(true);
+      });
+    });
+
+    it('hasBlockingErrors=false when no blocking conditions are present', async () => {
+      const { validateHTML, extractAndValidateCSS } = require('../../utils/htmlValidator');
+      const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');
+      let validationState;
+
+      validateHTML.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      extractAndValidateCSS.mockImplementationOnce(() => ({ isValid: true, errors: [], warnings: [], info: [] }));
+      isContentSafe.mockImplementationOnce(() => true);
+      findUnsafeContent.mockImplementationOnce(() => []);
+
+      render(
+        <TestComponent
+          content="<div>clean</div>"
+          options={{ enableRealTime: false, enableSanitization: false }}
+          onStateChange={(state) => { validationState = state; }}
+        />
+      );
+
+      await waitFor(() => { expect(validationState).toBeDefined(); });
+      await act(async () => { validationState.forceValidation(); await Promise.resolve(); });
+
+      await waitFor(() => {
+        expect(validationState.hasBlockingErrors).toBe(false);
+      });
+    });
+  });
+
   describe('Blocking errors', () => {
     it('treats protocol security issues as blocking errors', async () => {
       const { isContentSafe, findUnsafeContent } = require('../../utils/contentSanitizer');