@wix/patterns-fields 1.93.0 → 1.95.0

package/dist/types/types/validation.d.ts

@@ -45,6 +45,9 @@ export interface PatternFieldValidationRuleConfig {
     tooltip: string;
     inputLabel: string;
     invalidError: string;
+    /** Shown for a pattern that compiles but is refused because matching it
+     *  could hang the page. Falls back to `invalidError`. */
+    unsafeError?: string;
 }
 export type FieldValidationRuleConfig = RequiredFieldValidationRuleConfig | CharactersLimitFieldValidationRuleConfig | SpecificValuesFieldValidationRuleConfig | PatternFieldValidationRuleConfig;
 export type FieldValidationRule = FieldValidationRuleConfig['type'];
@@ -75,7 +78,7 @@ export type FieldValidationViolation = {
     type: 'exclusiveRules';
 } | {
     rule: 'pattern';
-    type: 'invalidPattern';
+    type: 'invalidPattern' | 'unsafePattern';
 };
 export type DataValidationRules = Partial<RequiredValidationRule & CharactersLimitValidationRule & SpecificValuesValidationRule & PatternValidationRule>;
 //# sourceMappingURL=validation.d.ts.map

package/dist/types/types/validation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../src/types/validation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,eAAe,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,cAAc,EAAE,aAAa,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,wCAAwC;IACvD,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACnD,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,uCAAuC;IACtD,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED,MAAM,WAAW,gCAAgC;IAC/C,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,yBAAyB,GACjC,iCAAiC,GACjC,wCAAwC,GACxC,uCAAuC,GACvC,gCAAgC,CAAC;AAErC,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,MAAM,CAAC,CAAC;AAEpE,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,wBAAwB,GAChC;IACE,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,GACD;IAAE,IAAI,EAAE,iBAAiB,CAAC;IAAC,IAAI,EAAE,aAAa,CAAA;CAAE,GAChD;IACE,IAAI,EAAE,gBAAgB,CAAC;IACvB,IAAI,EAAE,OAAO,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;CAClB,GACD;IACE,IAAI,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,SAAS,CAAC;IACvD,IAAI,EAAE,gBAAgB,CAAC;CACxB,GACD;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG,OAAO,CACvC,sBAAsB,GACpB,6BAA6B,GAC7B,4BAA4B,GAC5B,qBAAqB,CACxB,CAAC"}
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../src/types/validation.ts"],"names":[],"mappings":"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"}

package/dist/types/validations/field-validation-settings.d.ts

@@ -1,4 +1,6 @@
 import type { FieldValidationRule, FieldValidationSettingsValue, FieldValidationViolation } from '../types/validation';
+export declare const compilePattern: (pattern: string | undefined) => RegExp | undefined;
+export declare const matchesPattern: (value: string, pattern: string | undefined) => boolean;
 export interface FieldValidationSettingsOptions {
     /** Whether `specificValues` rejects `charactersLimit`/`pattern` on the same
      *  field. Callers that let a field carry both (e.g. a stored

package/dist/types/validations/field-validation-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-validation-settings.d.ts","sourceRoot":"","sources":["../../../src/validations/field-validation-settings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,wBAAwB,EACzB,MAAM,qBAAqB,CAAC;AA4B7B,MAAM,WAAW,8BAA8B;IAC7C;;+EAE2E;IAC3E,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,eAAO,MAAM,oCAAoC,GAC/C,OAAO,4BAA4B,EACnC,iBAAiB,SAAS,mBAAmB,EAAE,EAC/C,8BAAoC,8BAAmC,KACtE,wBAAwB,EA4F1B,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAC1C,OAAO,4BAA4B,EACnC,iBAAiB,SAAS,mBAAmB,EAAE,EAC/C,UAAU,8BAA8B,YAGvC,CAAC"}
+{"version":3,"file":"field-validation-settings.d.ts","sourceRoot":"","sources":["../../../src/validations/field-validation-settings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,wBAAwB,EACzB,MAAM,qBAAqB,CAAC;AA4B7B,eAAO,MAAM,cAAc,GACzB,SAAS,MAAM,GAAG,SAAS,KAC1B,MAAM,GAAG,SAC2D,CAAC;AAKxE,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EACb,SAAS,MAAM,GAAG,SAAS,KAC1B,OAAuD,CAAC;AAE3D,MAAM,WAAW,8BAA8B;IAC7C;;+EAE2E;IAC3E,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,eAAO,MAAM,oCAAoC,GAC/C,OAAO,4BAA4B,EACnC,iBAAiB,SAAS,mBAAmB,EAAE,EAC/C,8BAAoC,8BAAmC,KACtE,wBAAwB,EAiG1B,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAC1C,OAAO,4BAA4B,EACnC,iBAAiB,SAAS,mBAAmB,EAAE,EAC/C,UAAU,8BAA8B,YAGvC,CAAC"}

package/dist/types/validations/regex-safety.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Whether `pattern` can backtrack catastrophically — an unbounded quantifier
+ * applied to a group that can divide the same input more than one way, as in
+ * `(a+)+`. That is the shape whose match time grows exponentially with input
+ * length, so a 7-character pattern can hang the tab on a 28-character value.
+ *
+ * A group is safe to repeat when each iteration must consume something fixed
+ * that the varying parts cannot also consume: `(?:-[a-z0-9]+)*` has to eat a
+ * literal `-` every time round, which pins the iterations apart and keeps
+ * matching linear. A mandatory atom the varying part could eat instead — the
+ * second `a` in `(a+a)+` — pins nothing.
+ *
+ * Conservative on purpose: it proves nothing about linearity, and rejects some
+ * patterns that would in fact have run fine.
+ */
+export declare const hasNestedQuantifier: (pattern: string) => boolean;
+//# sourceMappingURL=regex-safety.d.ts.map

package/dist/types/validations/regex-safety.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"regex-safety.d.ts","sourceRoot":"","sources":["../../../src/validations/regex-safety.ts"],"names":[],"mappings":"AAuNA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,KAAG,OAkErD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.93.0",
+  "version": "1.95.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -124,7 +124,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.74.0",
+    "@wix/patterns-fields-utils": "1.76.0",
     "@wix/rich-content": "1.0.37",
     "@wix/sdk": "^1.17.2",
     "@wix/wix-ui-icons-common": "^3.189.0",
@@ -152,7 +152,7 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.371.0",
+    "@wix/bex-core": "2.373.0",
     "@wix/design-system": "^1.319.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
@@ -212,5 +212,5 @@
       "optional": true
     }
   },
-  "falconPackageHash": "93ccfc662cebc8393489134c3f20cb2bccee350cfca38161971fc238"
+  "falconPackageHash": "9c2ac5fb91ff026ebe41371d62f5779cf05f0e651e888457449fe55d"
 }

package/src/__tests__/components/field-validation-settings/field-validation-settings-input.spec.tsx

@@ -72,7 +72,12 @@ interface RenderInputOptions {
 
 const renderInput = (
   initialData: FieldValidationSettingsValue,
-  { rules = allRules, readOnly, invalid, disabledRules }: RenderInputOptions = {},
+  {
+    rules = allRules,
+    readOnly,
+    invalid,
+    disabledRules,
+  }: RenderInputOptions = {},
 ) => {
   const onChange = jest.fn<void, [FieldValidationSettingsValue]>();
 
@@ -142,6 +147,42 @@ describe('FieldValidationSettingsInput', () => {
     expect(await driver.getSpecificValuesToggle().exists()).toBe(false);
   });
 
+  it('shows the invalid-pattern error for a pattern that cannot compile', async () => {
+    const { driver } = renderInput({ pattern: '[' }, { rules: [patternRule] });
+
+    expect(await driver.getPatternInput().hasStatus('error')).toBe(true);
+    expect(await driver.getPatternInput().getStatusMessage()).toBe(
+      'Enter a valid regular expression.',
+    );
+  });
+
+  it('shows an error for a pattern that compiles but could hang the page', async () => {
+    const { driver } = renderInput(
+      { pattern: '^(a+)+$' },
+      {
+        rules: [
+          { ...patternRule, unsafeError: 'This expression is too complex.' },
+        ],
+      },
+    );
+
+    expect(await driver.getPatternInput().hasStatus('error')).toBe(true);
+    expect(await driver.getPatternInput().getStatusMessage()).toBe(
+      'This expression is too complex.',
+    );
+  });
+
+  it('falls back to the invalid-pattern copy when no unsafe copy is given', async () => {
+    const { driver } = renderInput(
+      { pattern: '^(a+)+$' },
+      { rules: [patternRule] },
+    );
+
+    expect(await driver.getPatternInput().getStatusMessage()).toBe(
+      'Enter a valid regular expression.',
+    );
+  });
+
   it('does not explain exclusivity when no conflicting rule is configured', async () => {
     const { driver } = renderInput(
       { specificValues: [] },

package/src/__tests__/components/field-validation-settings/pattern-round-trip.spec.tsx

@@ -0,0 +1,37 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import {
+  getFieldValidationSettingsViolations,
+  matchesPattern,
+} from '../../../validations/field-validation-settings';
+
+describe('pattern rule round trip', () => {
+  const pattern = '^[A-Z]{3}-\\d{4}$';
+
+  it('authors a pattern the field model can carry', () => {
+    expect(getFieldValidationSettingsViolations({ pattern })).toEqual([]);
+
+    const field: Field = {
+      id: 'sku',
+      displayName: 'SKU',
+      type: 'SHORT_TEXT',
+      validation: { required: false, pattern },
+    };
+
+    expect(field.validation?.pattern).toBe(pattern);
+  });
+
+  it('enforces the carried pattern against values', () => {
+    expect(matchesPattern('ABC-1234', pattern)).toBe(true);
+    expect(matchesPattern('abc-1234', pattern)).toBe(false);
+  });
+
+  it('refuses to author a pattern the matcher would have to ignore', () => {
+    expect(
+      getFieldValidationSettingsViolations({ pattern: '[' }),
+    ).toContainEqual({ rule: 'pattern', type: 'invalidPattern' });
+    expect(matchesPattern('anything', '[')).toBe(true);
+  });
+});

package/src/__tests__/components/text/form-long-text.spec.tsx

@@ -60,4 +60,59 @@ describe('FormLongText field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  it('shows a pattern error when the value does not match', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'LONG_TEXT',
+        validation: { required: false, pattern: '^[A-Z]+$' },
+      }),
+    });
+
+    await driver.tk.enterText('abc');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.patternMismatch',
+    );
+  });
+
+  it('accepts a value that matches the pattern', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'LONG_TEXT',
+        validation: { required: false, pattern: '^[A-Z]+$' },
+      }),
+    });
+
+    await driver.tk.enterText('ABC');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+
+  it('does not apply a pattern to an empty value', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'LONG_TEXT',
+        validation: { required: false, pattern: '^[A-Z]+$' },
+      }),
+    });
+
+    await driver.tk.enterText('');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+
+  it('enforces nothing when the pattern is refused', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'LONG_TEXT',
+        validation: { required: false, pattern: '^(a+)+$' },
+      }),
+    });
+
+    await driver.tk.enterText('a'.repeat(30));
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
 });

package/src/__tests__/components/text/form-short-text.spec.tsx

@@ -167,4 +167,89 @@ describe('FormShortText field', () => {
       'Title must be one of the allowed values',
     );
   });
+
+  it('shows a pattern error when the value does not match', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, pattern: '^[A-Z]{3}$' },
+      }),
+    });
+
+    await driver.tk.enterText('abc');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.patternMismatch',
+    );
+  });
+
+  it('accepts a value that matches the pattern', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, pattern: '^[A-Z]{3}$' },
+      }),
+    });
+
+    await driver.tk.enterText('ABC');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+
+  it('does not apply a pattern to an empty value', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, pattern: '^[A-Z]{3}$' },
+      }),
+    });
+
+    await driver.tk.enterText('');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+
+  it('reports the length error before the pattern error', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: {
+          required: false,
+          stringLengthRange: { minLength: 5 },
+          pattern: '^[A-Z]+$',
+        },
+      }),
+    });
+
+    await driver.tk.enterText('ab');
+
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.minCharacter{charMin=5}',
+    );
+  });
+
+  it('enforces nothing, and returns promptly, for a pattern that could hang', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, pattern: '^(a+)+$' },
+      }),
+    });
+
+    // Must not match: a value the pattern accepts returns fast either way, so
+    // it would pass with the guard removed.
+    const startedAt = Date.now();
+    await driver.tk.enterText(`${'a'.repeat(30)}!`);
+
+    expect(await driver.tk.hasError()).toBe(false);
+    expect(Date.now() - startedAt).toBeLessThan(1000);
+  });
+
+  it('enforces nothing when the pattern cannot compile', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, pattern: '[' },
+      }),
+    });
+
+    await driver.tk.enterText('anything');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
 });

package/src/__tests__/components/url/form-url.spec.tsx

@@ -79,4 +79,48 @@ describe('FormUrl field', () => {
       'cairo.customFields.url-input.error',
     );
   });
+
+  it('shows a pattern error when a valid URL does not match', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'URL',
+        validation: { required: false, pattern: '^https://wix\\.com/.*$' },
+      }),
+    });
+
+    await driver.tk.enterText('https://example.com/page');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.patternMismatch',
+    );
+  });
+
+  it('accepts a valid URL that matches the pattern', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'URL',
+        validation: { required: false, pattern: '^https://wix\\.com/.*$' },
+      }),
+    });
+
+    await driver.tk.enterText('https://wix.com/page');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+
+  it('reports the malformed-URL error before the pattern error', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'URL',
+        validation: { required: false, pattern: '^https://wix\\.com/.*$' },
+      }),
+    });
+
+    await driver.tk.enterText('not a url');
+
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.customFields.url-input.error',
+    );
+  });
 });

package/src/__tests__/validations/field-validation-settings-pattern.spec.ts

@@ -0,0 +1,87 @@
+import {
+  compilePattern,
+  matchesPattern,
+  hasFieldValidationSettingsError,
+  getFieldValidationSettingsViolations,
+} from '../../validations/field-validation-settings';
+
+describe('matchesPattern', () => {
+  it('accepts a value that matches', () => {
+    expect(matchesPattern('ABC-1234', '^[A-Z]{3}-\\d{4}$')).toBe(true);
+  });
+
+  it('rejects a value that does not match', () => {
+    expect(matchesPattern('nope', '^[A-Z]{3}-\\d{4}$')).toBe(false);
+  });
+
+  it('enforces nothing when there is no pattern', () => {
+    expect(matchesPattern('anything', undefined)).toBe(true);
+    expect(matchesPattern('anything', '')).toBe(true);
+  });
+
+  it('enforces nothing when the pattern cannot compile', () => {
+    expect(matchesPattern('anything', '[')).toBe(true);
+  });
+
+  it('enforces nothing when the pattern exceeds the length cap', () => {
+    expect(matchesPattern('anything', '^'.repeat(501))).toBe(true);
+  });
+
+  it('enforces nothing when the pattern can backtrack catastrophically', () => {
+    expect(matchesPattern('a'.repeat(30), '^(a+)+$')).toBe(true);
+  });
+
+  it('anchors nothing implicitly', () => {
+    expect(matchesPattern('xxABCxx', 'ABC')).toBe(true);
+  });
+});
+
+describe('compilePattern', () => {
+  it('returns a reusable RegExp', () => {
+    const regex = compilePattern('^a+$');
+
+    expect(regex).toBeInstanceOf(RegExp);
+    expect(regex!.test('aaa')).toBe(true);
+  });
+
+  it('returns undefined for an invalid pattern', () => {
+    expect(compilePattern('[')).toBeUndefined();
+  });
+
+  it('refuses to compile a pattern that can backtrack catastrophically', () => {
+    expect(compilePattern('^(a+)+$')).toBeUndefined();
+  });
+
+  it('still compiles a nested quantifier whose iterations are pinned apart', () => {
+    expect(compilePattern('^[a-z0-9]+(?:-[a-z0-9]+)*$')).toBeInstanceOf(RegExp);
+  });
+
+  it('returns a stateless RegExp that can be reused', () => {
+    const regex = compilePattern('^a$')!;
+
+    expect(regex.test('a')).toBe(true);
+    expect(regex.test('a')).toBe(true);
+  });
+});
+
+describe('existing authoring validation still holds', () => {
+  it('treats an empty pattern as authorable, not invalid', () => {
+    expect(hasFieldValidationSettingsError({ pattern: '' })).toBe(false);
+  });
+
+  it('still rejects an uncompilable pattern at authoring time', () => {
+    expect(hasFieldValidationSettingsError({ pattern: '[' })).toBe(true);
+  });
+
+  it('reports a catastrophic pattern as unsafe, not invalid', () => {
+    expect(
+      getFieldValidationSettingsViolations({ pattern: '^(a+)+$' }),
+    ).toEqual([{ rule: 'pattern', type: 'unsafePattern' }]);
+  });
+
+  it('still rejects an over-long pattern at authoring time', () => {
+    expect(hasFieldValidationSettingsError({ pattern: '^'.repeat(501) })).toBe(
+      true,
+    );
+  });
+});

package/src/__tests__/validations/regex-safety.spec.ts

@@ -0,0 +1,71 @@
+import { hasNestedQuantifier } from '../../validations/regex-safety';
+
+describe('hasNestedQuantifier', () => {
+  it.each([
+    ['^(a+)+$', 'the classic nested-quantifier blowup'],
+    ['(a*)*', 'star over star'],
+    ['(a+)*', 'star over plus'],
+    ['([a-z]+)+', 'a quantified class inside a quantified group'],
+    ['(\\d+){2,}', 'an open-ended counted quantifier over a quantified group'],
+    ['((a+))+', 'nesting through an intermediate group'],
+    ['(?:a+)+', 'a non-capturing group'],
+    ['(a+|b)+', 'one elastic branch is enough'],
+    ['(\\s*|\\t*)*', 'every branch is elastic'],
+    ['(x+x+)+y', 'two elastic atoms in one branch'],
+    ['^([a-zA-Z0-9]+\\s?)*$', 'an optional atom does not pin anything'],
+    ['(a|a)*$', 'branches that can start with the same character overlap'],
+    ['(a|ab)+', 'one branch is a prefix of the other'],
+    ['(?:https|http)+', 'branches sharing a first character'],
+    ['(.|x)+', 'a wildcard branch overlaps everything'],
+    [
+      '(?:\\d+|[a-z]+)+',
+      'an elastic branch is dangerous even beside a disjoint one',
+    ],
+    ['^x(?:\\w*)*y$', 'a quantified group in the middle of a pattern'],
+    ['^(a+a)+$', 'a mandatory atom the elastic one can also eat pins nothing'],
+    [
+      '^((a+)a)+$',
+      'the overlapping mandatory atom sits outside the inner group',
+    ],
+    ['^(a{1,3})+$', 'a variable counted quantifier is elastic'],
+    ['^(a{2,})+$', 'an open-ended counted quantifier is elastic'],
+    ['^(a?)+$', 'an optional atom alone is elastic'],
+    ['^(a+a?)+$', 'neither atom is fixed'],
+  ])('rejects %s (%s)', (pattern) => {
+    expect(hasNestedQuantifier(pattern)).toBe(true);
+  });
+
+  it.each([
+    ['^[A-Z]{3}-\\d{4}$', 'a bounded SKU pattern'],
+    ['^https://wix\\.com/.*$', 'a URL prefix pattern'],
+    ['(a)+', 'a quantified group with no inner quantifier'],
+    ['(a|b)+', 'a quantified alternation of single characters'],
+    ['a+b+', 'sibling quantifiers, not nested'],
+    ['(a+)', 'an unquantified group holding a quantifier'],
+    ['^\\(\\d+\\)$', 'escaped parentheses around a quantifier'],
+    ['[(+*)]+', 'quantifier characters living inside a character class'],
+    ['[]+]+', 'a leading literal bracket inside a class'],
+    ['(a+){1,3}', 'a bounded quantifier over a quantified group'],
+    ['(a+)?', 'an optional quantified group'],
+    [
+      '^[a-z0-9]+(?:-[a-z0-9]+)*$',
+      'a slug: each iteration must eat a literal -',
+    ],
+    ['^(?:-a+)+$', 'a leading literal pins the iterations apart'],
+    ['(a+b)+', 'a mandatory trailing atom pins the iterations apart'],
+    [
+      '^(?:\\d{3}-)+\\d{4}$',
+      'a bounded atom plus a literal inside a quantified group',
+    ],
+    ['(?:foo|bar)+', 'branches with disjoint first characters'],
+    [
+      '^#?([0-9a-f]{6}|[0-9a-f]{3})$',
+      'an unquantified alternation is never repeated',
+    ],
+    ['(a{2})+', 'a fixed count does not vary, so it pins iterations apart'],
+    ['^(?:\\w|\\s)+$', 'word and whitespace classes do not overlap'],
+    ['', 'an empty pattern'],
+  ])('accepts %s (%s)', (pattern) => {
+    expect(hasNestedQuantifier(pattern)).toBe(false);
+  });
+});

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput2303580790";
+var _namespace_ = "addressinput2635111141";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"addressinput2303580790__root","tableAddressInput":"addressinput2303580790__tableAddressInput"};
+export var classes = {"root":"addressinput2635111141__root","tableAddressInput":"addressinput2635111141__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu2999519234";
+var _namespace_ = "actionsmenu2195877707";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"actionsmenu2999519234__root","action":"actionsmenu2999519234__action"};
+export var classes = {"root":"actionsmenu2195877707__root","action":"actionsmenu2195877707__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/form-audio-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield884720453";
+var _namespace_ = "formaudiofield2679064113";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formaudiofield884720453__root","addItem":"formaudiofield884720453__addItem","mediaTitle":"formaudiofield884720453__mediaTitle"};
+export var classes = {"root":"formaudiofield2679064113__root","addItem":"formaudiofield2679064113__addItem","mediaTitle":"formaudiofield2679064113__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "audioplayer109331119";
+var _namespace_ = "audioplayer1268238730";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"audioplayer109331119__root"};
+export var classes = {"root":"audioplayer1268238730__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/cell-color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview837033563";
+var _namespace_ = "cellcolorview3095201269";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellcolorview837033563__root","hashPrefix":"cellcolorview837033563__hashPrefix"};
+export var classes = {"root":"cellcolorview3095201269__root","hashPrefix":"cellcolorview3095201269__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};