@wix/patterns 1.420.0 → 1.422.0

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

package/src/components/Fade/Fade.st.css.ts

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

package/src/components/Heading/Heading.st.css.ts

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

package/src/components/ImportButton/CAIRO-4230-create-new-field.md

@@ -20,17 +20,17 @@ is created as part of the import flow itself** — shown in the mapping dropdown
 
 **In scope**
 - Ability to create a new field from an unmapped column during the mapping step.
-- Field type is **always `text` for now** (no data-driven type detection).
+- **Data-driven field-type detection** (CAIRO-4131 — done): the `(New)` suggestion's
+  type is inferred from the column's data (number / date / boolean / url / text).
+  See "Field type is detected from the column data" below.
 - A way to **choose the default behavior** for unmapped columns (create new field vs.
-  don't import). Likely the **presence of the create-field callback prop itself is the
-  opt-in** (see below) — no separate flag.
+  don't import). The **presence of the `updateSchema` callback prop itself is the
+  opt-in** — no separate flag.
 
-**Out of scope (deferred — CAIRO-4131)**
-- CSV column **type detection** (Number/Date/Boolean/URL/Text "best fit"). The
-  `(New)` suggestion will always be a text field for now.
+**Out of scope (deferred)**
 - The "Edit Field" entry point that opens a type selector pre-populated with the
-  detected type. (We may still surface a static "This will be a new text field"
-  label, but no editing flow.)
+  detected type ([CAIRO-4398](https://wix.atlassian.net/browse/CAIRO-4398)), and the
+  "+ Create New Field" dropdown footer ([CAIRO-4399](https://wix.atlassian.net/browse/CAIRO-4399)).
 
 > Note: the **default-behavior prop is the deliverable the tickets call out explicitly**
 > ("some entry points want this as default, some want 'don't import' as a default").
@@ -140,20 +140,43 @@ during implementation are **not** committed and must be registered in TC):
 (`cairo.import.newFieldOption` = `"{column} (New)"` and `cairo.import.fieldType.text`
 were earlier forms; superseded.)
 
-### Field type is static (`text`) but the code is dynamic-ready
-- `NewFieldType` (core) is the single source of truth for the type union — today
-  just `'text'`.
-- The mapping carries `fieldType` end-to-end: `setNewFieldMapping` /
-  `getDefaultMapping` set it, and `_resolveFieldMapping` passes it to
-  `updateSchema`. To go dynamic, set the detected type there instead of `'text'`.
+### Field type is detected from the column data (CAIRO-4131 — done)
+
+Detection is **split by layer and injected** (`detectColumnType` is a DI prop on
+`ImportState`), because media detection needs a media-URI parser that core must
+not depend on (`utils → core → cairo/fields`):
+
+- **core** (`detectFieldType.ts`) owns the `NewFieldType` union
+  (`text | number | date | boolean | url | image | video | document | audio`), the
+  sampling + ⅔-majority vote (`detectColumnType(values, detectValue?)`), and the
+  **primitive** per-cell detector (`detectValueType`: number / date / boolean /
+  url, else text — ported from cm-import `detectFieldConfig` /
+  `guessFieldConfigFromSamples`). This is the default when nothing is injected.
+- **fields** (`utils/detect-field-type.ts`, exported as
+  `@wix/patterns-fields/detect-field-type`) owns the **media-aware** detector:
+  it composes a per-cell detector that recognizes Wix media URIs (image / video /
+  document / audio, via the local `parseMediaItemUri` port) and external image
+  URLs *before* delegating to core's primitive detector, then reuses core's
+  `detectColumnType` sampling. No new runtime dep — `parseMediaItemUri` is the
+  existing zero-dep port; the heavy `@wix/cm-media-utils` bundle is not pulled in.
+- **cairo** (`ImportButtonModalLayout`) injects the fields detector into
+  `ImportState` via `useCreateImport({ detectColumnType })`. So `@wix/patterns`
+  gets full media-aware detection; bare-core consumers get primitive detection.
+- The mapping carries `fieldType` end-to-end: `getDefaultMapping` /
+  `setNewFieldMapping` set it from the injected `detectColumnType`, and
+  `_resolveFieldMapping` passes it to `updateSchema`.
 - The helper text resolves the type name from the **shared patterns-fields**
   field-type translations via `NEW_FIELD_TYPE_TITLE_KEY`, a
-  `Record<NewFieldType, …>` in `ImportStepConfiguration`. Widening `NewFieldType`
-  makes the missing entries a **compile error** — the one place to extend.
+  `Record<NewFieldType, …>` in `ImportStepConfiguration` (keys
+  `auto-patterns.fields.field_type_<type>_title`). Adding a `NewFieldType` makes
+  the missing map entry a **compile error** — the one place to extend.
 - Those translations live in the patterns-fields artifact (fields'
   `useTranslations()`), so the import modal is wrapped in `PatternsFieldsProvider`
-  **only when field creation is enabled** (`ImportButtonModalLayout`). The provider/
-  fields container is not initialized for plain imports.
+  **only when field creation is enabled** (`ImportButtonModalLayout`).
+- **Consumer follow-up:** the `updateSchema` consumer must map each
+  `NewFieldType` to its source field type (auto-patterns `useImport` currently
+  hardcodes `SHORT_TEXT`; the CMS reverse map needs `URL` / `IMAGE` / `VIDEO` /
+  `DOCUMENT` / `AUDIO`). Gated on the new `@wix/patterns` preview being published.
 
 ## Testing
 

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -10,6 +10,7 @@ import { getImportModalStepProps } from './getImportModalStepProps';
 import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useCreateImport } from '@wix/bex-core';
+import { detectFieldType } from '@wix/patterns-fields';
 import { ImportButtonModalLayoutProps } from './ImportProps';
 import { addEventListener } from '@wix/bex-core/util';
 import { useIsMobile } from '../../hooks/useIsMobile';
@@ -37,6 +38,9 @@ function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
     bulkUploadItems,
     backup,
     updateSchema,
+    // Media-aware detection (image/video/document/audio) lives in
+    // patterns-fields; core defaults to primitive detection without it.
+    detectColumnType: detectFieldType,
     batchSize,
     importModalState,
   });

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -29,13 +29,29 @@ const CREATE_NEW_FIELD_OPTION_ID = '$createNewField';
 
 // Translation key for each new-field type's name, injected (lowercased) into the
 // helper text ("This will be a new {typeName} field."). Reuses the shared
-// patterns-fields field-type names. Keyed by `NewFieldType` so that when
-// CAIRO-4131 adds data-driven types (number/date/boolean/url/...), the missing
-// entries become a compile error here — the single place to extend.
-type FieldTypeTitleKey = 'auto-patterns.fields.field_type_text_title';
+// patterns-fields field-type names. Keyed by `NewFieldType` so adding a detected
+// type makes the missing entry a compile error here — the single place to extend.
+type FieldTypeTitleKey =
+  | 'auto-patterns.fields.field_type_text_title'
+  | 'auto-patterns.fields.field_type_number_title'
+  | 'auto-patterns.fields.field_type_date_title'
+  | 'auto-patterns.fields.field_type_boolean_title'
+  | 'auto-patterns.fields.field_type_url_title'
+  | 'auto-patterns.fields.field_type_image_title'
+  | 'auto-patterns.fields.field_type_video_title'
+  | 'auto-patterns.fields.field_type_document_title'
+  | 'auto-patterns.fields.field_type_audio_title';
 
 const NEW_FIELD_TYPE_TITLE_KEY: Record<NewFieldType, FieldTypeTitleKey> = {
   text: 'auto-patterns.fields.field_type_text_title',
+  number: 'auto-patterns.fields.field_type_number_title',
+  date: 'auto-patterns.fields.field_type_date_title',
+  boolean: 'auto-patterns.fields.field_type_boolean_title',
+  url: 'auto-patterns.fields.field_type_url_title',
+  image: 'auto-patterns.fields.field_type_image_title',
+  video: 'auto-patterns.fields.field_type_video_title',
+  document: 'auto-patterns.fields.field_type_document_title',
+  audio: 'auto-patterns.fields.field_type_audio_title',
 };
 
 type DropdownOption = ReturnType<typeof listItemSelectBuilder>;

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2837626154";
+var _namespace_ = "ImportStepUpload3633925322";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ImportStepUpload2837626154__root","fileUpload":"ImportStepUpload2837626154__fileUpload"};
+export var classes = {"root":"ImportStepUpload3633925322__root","fileUpload":"ImportStepUpload3633925322__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ImportButton/import-create-new-field-issues.md

@@ -7,7 +7,7 @@ PR: [feat(Import): create new fields via updateSchema #5476](https://github.com/
 
 | # | Issue | Component / Where | Severity | Status | Resolution recommendation |
 |---|---|---|---|---|---|
-| 1 | Dropdown clear (✕) button also reopens the dropdown | `Dropdown` (`@wix/design-system`) — import config step mapping dropdowns (`ImportStepConfiguration` → `import-mapping-<header>`) | Minor | open | Fix in `@wix/design-system`: clear handler should `stopPropagation` and not reopen the popover. Confirm modal focus-trap involvement; isolate WDS vs. our `(New)` option / `PatternsFieldsProvider` changes. |
+| 1 | Dropdown clear (✕) button also reopens the dropdown | `Dropdown` (`@wix/design-system`) — import config step mapping dropdowns (`ImportStepConfiguration` → `import-mapping-<header>`) | Minor | in progress | Fix in `@wix/design-system` — WDS PR in progress: [wix-design-systems#16421](https://github.com/wix-private/wix-design-systems/pull/16421). Clear handler should `stopPropagation` and not reopen the popover. |
 | 2 | "Edit Field" link in the new-field helper is not implemented | Import config step — `NewFieldHelperText` (`ImportStepConfiguration`) | Feature ([CAIRO-4398](https://wix.atlassian.net/browse/CAIRO-4398)) | open | Implement the "Edit Field" entry point: open a field editor from the helper so the user can change the new field's name/type before import. Wire it to the resolved `NewFieldDefinition`. |
 | 3 | New field's display name duplicates an existing field name (only the key is deduped) | `ImportState._resolveFieldMapping` / `uniqueFieldNameAndKey` (`packages/core`) | Bug · Minor | **done** | Fixed: `uniqueFieldNameAndKey` now dedupes the **display name** (suffix `-N`) and derives the key from the suffixed name, checking both name and key against existing fields + sibling new fields — mirrors cm-import `generateFieldNameAndKey`. Tests added (duplicate-derived-key + existing-field collision). |
 | 4 | Mapping dropdown is missing the "+ Create New Field" footer action | `FieldMappingCell` (`ImportStepConfiguration`) — WDS `Dropdown` `fixedFooter` | Feature ([CAIRO-4399](https://wix.atlassian.net/browse/CAIRO-4399)) | open | Add a sticky "+ Create New Field" footer to the mapping dropdown; clicking opens the field editor (shared with #2) and maps the column to the created field. |
@@ -19,7 +19,9 @@ PR: [feat(Import): create new fields via updateSchema #5476](https://github.com/
 
 ### 1. Dropdown clear button also opens the dropdown
 
-- **Component:** `Dropdown` (`@wix/design-system`) — likely fix location is WDS, not Cairo.
+- **Status:** in progress — fix in `@wix/design-system`, PR
+  [wix-design-systems#16421](https://github.com/wix-private/wix-design-systems/pull/16421).
+- **Component:** `Dropdown` (`@wix/design-system`) — fix location is WDS, not Cairo.
 - **Feature:** Import → "create new field" (CAIRO-4230).
 
 **Symptom:** Clicking a mapping `Dropdown`'s clear (✕) button clears the selected
@@ -43,9 +45,10 @@ propagation / preventing the reopen.
 - [ ] Minimal repro: a `Dropdown` with `clearButton` inside a WDS modal vs. outside,
       and with/without the `(New)` option, to isolate WDS vs. our changes.
 - [ ] Confirm whether it's focus-trap-driven (modal) or general.
-- [ ] File a `@wix/design-system` issue / PR; clear handler should `stopPropagation`
-      and not reopen the popover.
-- [ ] Track WDS fix version; remove any Cairo-side workaround once shipped.
+- [x] File a `@wix/design-system` PR — [#16421](https://github.com/wix-private/wix-design-systems/pull/16421)
+      (clear handler should `stopPropagation` and not reopen the popover).
+- [ ] Land WDS PR #16421; bump `@wix/design-system` and remove any Cairo-side
+      workaround once shipped.
 
 ### 2. Implement the "Edit Field" button
 

package/src/components/ImportButton/pr-5490-review-comments.md

@@ -0,0 +1,44 @@
+# PR #5490 — Review Comments Tracker
+
+PR: [feat(Import): detect new field type from column data #CAIRO-4131](https://github.com/wix-private/cairo/pull/5490)
+Reviewers: **liorgu-wix** (human) + **Codex** (`github-actions[bot]`). CI/bundle/status bots excluded.
+
+> **liorgu-wix summary (no blocking bugs):** "The DI seam (core owns the `NewFieldType`
+> vocabulary + sampling/vote, fields injects media-awareness) is the right shape and
+> respects `utils → core → cairo/fields`. Wiring is correct and happy-path tests pass."
+> Recurring theme: code/comments claim fidelity to cm-import the implementation doesn't
+> actually have (sample size, URL validation, ordering, audio/vector) — either match
+> cm-import or own the deliberate divergences.
+> [review](https://github.com/wix-private/cairo/pull/5490#pullrequestreview-4539585402)
+
+Status: `open` / `done` / `dismiss` · Severity: Major / Test gap / Minor / Nit / Info
+
+The **vs cm-import today** column records how our behavior compares to cm-import
+(`wix-data-client/cm-import`) — the source of liorgu's recurring "claims fidelity it
+doesn't have" theme.
+
+| # | Comment link | Description | vs cm-import today | Severity | Status | Resolution recommendation |
+|---|---|---|---|---|---|---|
+| 1 | [codex](https://github.com/wix-private/cairo/pull/5490#discussion_r3436393090) — `ImportState.ts` (date) | Date detection uses browser-dependent `new Date(value)` after a regex check; same CSV can infer `date` in one browser, `text` in another → inconsistent `updateSchema` payloads. | **Same** — cm-import's `detectFieldConfig.js` uses the identical `new Date(value).getTime()` heuristic. The reviewer wants us to *improve on* cm-import, not match it. | Major | open | Strict-parse the supported date formats (validate y/m/d components) instead of `new Date`/`Date.parse` heuristics. |
+| 2 | [liorgu §1](https://github.com/wix-private/cairo/pull/5490#pullrequestreview-4539585402) — cross-cutting | Confirm **no current `updateSchema` consumer** (esp. the CMS source adapter) switches on `fieldType` and would now receive `number`/`date`/`image`/… and mishandle/throw. If CMS is already live, that's a regression vector, not a follow-up. | **Diverges** — cm-import's `createFieldDefinition` maps each detected `fieldType` and creates it. Ours: the only consumer (auto-patterns `useImport`) hardcoded `SHORT_TEXT`; the CMS `addField`/`addFields` reverse map threw "not supported" on anything but text/number/boolean/date. | Major (verify) | **done** | **Audit: no live regression** — the only consumer discarded the detected type (always `SHORT_TEXT`). **Fixed forward** in auto-cairo: the 4-type cap was a **UI limitation, not an API one** — `@wix/data` creates all field types — so widened `PatternsFieldTypeToCmsFieldType` to add URL/IMAGE/VIDEO/DOCUMENT/AUDIO, and `useImport` now maps each detected `NewFieldType` → its field type (SHORT_TEXT fallback). `addFields` creates the real type instead of throwing. Tests updated (media now creates; throw-path uses REFERENCE) — 29 green. Forward-compatible once #5490 publishes. (auto-cairo repo.) |
+| 3 | [liorgu](https://github.com/wix-private/cairo/pull/5490#discussion_r3448316713) — `Table.importButton.spec.tsx:743` | Test gaps: mixed column → `text` (the ⅔ vote itself), empty-heavy column, `audio`/`video`, **core default (no injection)** proving the DI seam gates media detection, and direct unit specs for the pure functions. | N/A (our test coverage) — cm-import exercises the majority/fallback in its own `guessFieldConfigFromSamples` specs; we don't yet. | Test gap | **done** | Added direct unit specs: `core/__tests__/state/detectFieldType.spec.ts` (14 — number/date/boolean/url branch edges, majority, **fallback**, **empty-heavy**, sample truncation, DI hook, and **core-default media→text/url** proving the seam) and `fields/src/__tests__/utils/detect-field-type.spec.ts` (6 — image/video/document/**audio**/vector, external-image-URL→image, primitives, mixed→text). |
+| 4 | [liorgu](https://github.com/wix-private/cairo/pull/5490#discussion_r3448316710) — `detect-field-type.ts:23` | Detects **more** than cm-import while comments claim a match: `audio` and `vector→image`. | **Diverges (superset)** — cm-import's `validationOrder` has **no audio** entry (never detects audio); its *detection* path (`detectionSchema` = `wix-image-with-extension`) does **not** check `isWixVectorUri`. We detect both. | Minor + Test gap | **done** | Reworded the `detectMediaType` comment to document audio + vector→image as **intentional supersets** of cm-import's detection path (dropped the "matches cm-import" framing); added the audio test (fields spec). |
+| 5 | [liorgu](https://github.com/wix-private/cairo/pull/5490#discussion_r3448316711) + [codex](https://github.com/wix-private/cairo/pull/5490#discussion_r3436393101) — `ImportState.ts:456` | `_columnValues()` materializes the whole column although only the first 50 are used → O(rows×cols) allocations at parse time. | **Diverges (less efficient)** — cm-import's `_getSamples` does `importData.slice(0, sampleSize).map(...)` — slices *before* mapping, so it never allocates the full column. We map the full column then slice. | Minor (perf) | **done** | Exported `TYPE_SAMPLE_SIZE` from `detectFieldType`; `_columnValues` now `slice(0, TYPE_SAMPLE_SIZE)` **before** mapping, so only the head is copied — matching cm-import's `_getSamples`. |
+| 6 | [liorgu](https://github.com/wix-private/cairo/pull/5490#discussion_r3448316706) — `detectFieldType.ts:38` | `SAMPLE_SIZE = 50` is attributed to cm-import, but the comment is wrong. | **Diverges** — cm-import's `constants.sampleSize` is **6**; we use **50**. | Nit (doc) | **done** | Kept 50; rewrote the `TYPE_SAMPLE_SIZE` comment + `detectColumnType` JSDoc to own it as a deliberate larger sample than cm-import's 6 (same 2/3 vote). |
+| 7 | [liorgu](https://github.com/wix-private/cairo/pull/5490#discussion_r3448316707) — `detectFieldType.ts:59` | URL/email/phone helpers are re-implementations, not a port; `isValidWebsiteUrl` is laxer than cm-import. | **Diverges (looser)** — cm-import's `validators/url.js` delegates to `@wix/santa-core-utils` `isValidUrl`/`isValidEmail` for structural validation **and** requires a protocol; ours only checks protocol-prefix + no-whitespace, so e.g. `https://{garbage}` → we say `url`, cm-import says no. | Nit (doc) / Minor | **done** | `isValidWebsiteUrl` now **delegates to the platform `URL` parser** (rejects empty-host / whitespace / malformed authorities) instead of a prefix check; `@wix/santa-core-utils` isn't available here, so the comment owns the residual gap (`URL` accepts some odd hosts santa rejects). Added invalid-URL→text tests. |
+| 8 | [liorgu](https://github.com/wix-private/cairo/pull/5490#discussion_r3448316709) — `detect-field-type.ts:48` | "media-first" comment claims cm-import precedence it doesn't have. | **Diverges (order; equivalent result)** — cm-import runs `detectPrimitiveType` (number → boolean → date) **first**, media only on fall-through; we check media first. Same result in practice (media URIs don't match the number/bool/date regexes). | Nit (doc) | **done** | Reworded the `detectValueTypeWithMedia` comment to state our order differs from cm-import's and why the result still matches (fixed alongside #4 in the same block). |
+| 9 | [liorgu](https://github.com/wix-private/cairo/pull/5490#discussion_r3448316712) — `ImportState.ts:577` | `index >= 0 ? … : 'text'` — `header` always comes from `csvHeaders`, so the `'text'` branch is dead. | N/A — our code structure (cm-import keys samples off the selected column, no such guard). | Nit | open | Drop the guard, or add a one-line "defensive" comment. |
+| 10 | [liorgu](https://github.com/wix-private/cairo/pull/5490#discussion_r3448316708) — `detectFieldType.ts:102` | Empty cells count as `text` votes; an optional column >⅓ blank falls back to `text` even if every non-blank value is a number. | **Same** — cm-import's `detectFieldConfig('') → text` and `_getSamples` doesn't filter blanks. Faithful, but a sharp edge worth flagging. | Info | open | Flag to product; optionally ignore blanks in the vote (would depart from cm-import — decide consciously). |
+| 11 | [liorgu §2](https://github.com/wix-private/cairo/pull/5490#pullrequestreview-4539585402) — cross-cutting | Leading-zero data loss later: zip/phone/IDs (`01234`) detect as `number` once the consumer honors it. | **Same** — inherited directly from cm-import's number detection. Out of scope here. | Info | open | Note on the consumer follow-up ticket so it's a conscious choice. |
+| 12 | [liorgu](https://github.com/wix-private/cairo/pull/5490#discussion_r3448316714) — `import-create-new-field-issues.md:10` | Non-blocking / pre-existing: git-tracked issue-tracker markdown in the component source tree goes stale and reads as noise in a feature diff. | N/A — repo hygiene, unrelated to cm-import. | Info (non-blocking) | open | Team decision: keep these `.md` files in-repo vs. move to Jira/docs. Not introduced by this PR. |
+
+## Notes
+
+- **Build-failure bot (resolved):** `devex-ai-build-agent` flagged a `TranslationsKeys`
+  mismatch at `ImportStepConfiguration.tsx:78` on an earlier commit (before the
+  patterns-fields title keys were added/rebuilt). Latest Falcon CI is **PASSED** on
+  `c80c2f9` — already fixed, no action.
+- **Theme across 4, 6, 7, 8:** all the same root note from liorgu — the "ported from
+  cm-import" framing overclaims fidelity. Cheapest resolution is a doc pass that owns
+  the deliberate divergences (sample size, URL approximation, ordering, audio/vector
+  superset), unless we choose to match cm-import exactly.

package/src/components/InputOverflow/InputOverflow.st.css.ts

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

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2525601910";
+var _namespace_ = "LoadingRow1239235736";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow2525601910__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2525601910__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow1239235736__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow1239235736__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

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

package/src/components/MaxLines/MaxLines.st.css.ts

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

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1086315672";
+var _namespace_ = "MultiBulkActionToolbar2448718076";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar1086315672__root","leftGroupWrapper":"MultiBulkActionToolbar1086315672__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1086315672__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1086315672__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar2448718076__root","leftGroupWrapper":"MultiBulkActionToolbar2448718076__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar2448718076__selectedCountItem","selectedCountText":"MultiBulkActionToolbar2448718076__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTable/NestedTablePlaceholderStatesRow.st.css.ts

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

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow555326429";
+var _namespace_ = "NestedTableRow3557414379";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"NestedTableRow555326429__root","firstLevel":"NestedTableRow555326429__firstLevel","placeholder":"NestedTableRow555326429__placeholder","parentHovered":"NestedTableRow555326429__parentHovered"};
+export var classes = {"root":"NestedTableRow3557414379__root","firstLevel":"NestedTableRow3557414379__firstLevel","placeholder":"NestedTableRow3557414379__placeholder","parentHovered":"NestedTableRow3557414379__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

package/src/components/PickerContent/PickerContent.st.css.ts

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep661572362";
+var _namespace_ = "PickerContentAdditionalStep638239034";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"PickerContentAdditionalStep661572362__root","titles":"PickerContentAdditionalStep661572362__titles","suffix":"PickerContentAdditionalStep661572362__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep638239034__root","titles":"PickerContentAdditionalStep638239034__titles","suffix":"PickerContentAdditionalStep638239034__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

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

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

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

package/src/components/SetupWidget/SetupWidget.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget93558347";
+var _namespace_ = "SetupWidget1301138261";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SetupWidget93558347__root","row":"SetupWidget93558347__row","completedCta":"SetupWidget93558347__completedCta","card":"SetupWidget93558347__card"};
+export var classes = {"root":"SetupWidget1301138261__root","row":"SetupWidget1301138261__row","completedCta":"SetupWidget1301138261__completedCta","card":"SetupWidget1301138261__card"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard440848084";
+var _namespace_ = "SkeletonCard1867398531";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SkeletonCard440848084__root","headerLoading":"SkeletonCard440848084__headerLoading"};
+export var classes = {"root":"SkeletonCard1867398531__root","headerLoading":"SkeletonCard1867398531__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

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

package/src/components/TabsFilter/TabsFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1009034254";
+var _namespace_ = "TabsFilter1604621513";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"TabsFilter1009034254__root","title":"TabsFilter1009034254__title"};
+export var classes = {"root":"TabsFilter1604621513__root","title":"TabsFilter1604621513__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};