@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/persistence/generate-css-mapping.js

@@ -0,0 +1,812 @@
+const PER_COMPONENT_SELECTOR = {
+  listbox: ".uxm-listbox, .uxm-listbox__panel",
+  // Menu mirrors Listbox: the `.uxm-menu` wrapper lives in-page around the
+  // trigger, but the `.uxm-menu__panel` portals to document.body, so vars on
+  // the wrapper never reach it. Emit on both so the panel carries them.
+  menu: ".uxm-menu, .uxm-menu__panel"
+  // PhoneInput no longer needs a panel-scoped selector: its country picker
+  // now delegates to the shared `Listbox`, whose portaled panel already gets
+  // its vars via the `listbox` entry above. All `--uxm-phone-input-*` knobs
+  // target the in-page field, so the default `.uxm-phone-input` selector is
+  // correct.
+};
+const PER_COMPONENT_MAPPING = {
+  "input-with-icon": {
+    backgroundColor: "--uxm-input-with-icon-bg",
+    borderColor: "--uxm-input-with-icon-border-color",
+    borderRadius: "--uxm-input-with-icon-radius",
+    paddingX: "--uxm-input-with-icon-padding-x",
+    paddingY: "--uxm-input-with-icon-padding-y",
+    fontSize: "--uxm-input-with-icon-font-size",
+    color: "--uxm-input-with-icon-color"
+  },
+  "input-text": {
+    backgroundColor: "--uxm-input-text-bg",
+    borderColor: "--uxm-input-text-border-color",
+    color: "--uxm-input-text-color",
+    borderRadius: "--uxm-input-text-border-radius",
+    paddingX: "--uxm-input-text-padding-x",
+    paddingY: "--uxm-input-text-padding-y",
+    fontSize: "--uxm-input-text-font-size"
+  },
+  "number-input": {
+    backgroundColor: "--uxm-number-input-bg",
+    borderColor: "--uxm-number-input-border-color",
+    color: "--uxm-number-input-color",
+    borderRadius: "--uxm-number-input-border-radius",
+    paddingX: "--uxm-number-input-padding-x",
+    paddingY: "--uxm-number-input-padding-y",
+    fontSize: "--uxm-number-input-font-size"
+  },
+  // Every key below collides with REAL_CSS_PROPS. The atom passes its class to
+  // `Listbox`, so the emitted rule lands on that in-page ROOT while the styled
+  // element is the `__trigger` child, which declares its own `color`,
+  // `border-color`, `font-size` and `gap` from `--uxm-language-switcher-*` and
+  // therefore beats anything inherited — every one of these would be a silent
+  // no-op. Padding is worse: `padding-inline` on the root pads OUTSIDE the
+  // button while the trigger keeps its default 10px/7px.
+  "language-switcher": {
+    color: "--uxm-language-switcher-color",
+    borderColor: "--uxm-language-switcher-border-color",
+    fontSize: "--uxm-language-switcher-font-size",
+    gap: "--uxm-language-switcher-gap",
+    paddingX: "--uxm-language-switcher-padding-x",
+    paddingY: "--uxm-language-switcher-padding-y"
+  },
+  // Without this entry `fontSize` falls through REAL_CSS_PROPS and emits a
+  // literal `font-size` on `.uxm-color-input`, which the atom's own children
+  // (`__value-field`, `__format`) always beat — so the knob did nothing at all.
+  "color-input": {
+    fontSize: "--uxm-color-input-font-size"
+  },
+  // Every key here collides with REAL_CSS_PROPS, where the generic fallback
+  // emits a REAL property on `.uxm-code-editor` instead of a var. That root is
+  // pure chrome — the text lives in `__input` / `__gutter-lines`, which declare
+  // their own `color` / `font-size` / `line-height` and always beat inherited
+  // values, so Text / Font Size / Line Height would be silent no-ops. Padding is
+  // worse than a no-op: `padding-inline` on the root pads OUTSIDE the code while
+  // `--uxm-code-editor-padding-x` stays unset, so the gutter's absolutely
+  // positioned `left` keeps its 14px default and the numbers leave their column.
+  // Same defect as the `color-input` entry above.
+  "code-editor": {
+    backgroundColor: "--uxm-code-editor-bg",
+    borderColor: "--uxm-code-editor-border-color",
+    color: "--uxm-code-editor-color",
+    borderRadius: "--uxm-code-editor-border-radius",
+    paddingX: "--uxm-code-editor-padding-x",
+    paddingY: "--uxm-code-editor-padding-y",
+    fontSize: "--uxm-code-editor-font-size",
+    lineHeight: "--uxm-code-editor-line-height",
+    minHeight: "--uxm-code-editor-min-height"
+  },
+  "currency-input": {
+    backgroundColor: "--uxm-currency-input-background-color",
+    borderColor: "--uxm-currency-input-border-color",
+    borderRadius: "--uxm-currency-input-border-radius",
+    paddingX: "--uxm-currency-input-padding-x",
+    paddingY: "--uxm-currency-input-padding-y",
+    fontSize: "--uxm-currency-input-font-size",
+    color: "--uxm-currency-input-color"
+  },
+  textarea: {
+    backgroundColor: "--uxm-textarea-bg",
+    borderColor: "--uxm-textarea-border-color",
+    color: "--uxm-textarea-color",
+    minHeight: "--uxm-textarea-min-height",
+    borderRadius: "--uxm-textarea-border-radius",
+    paddingX: "--uxm-textarea-padding-x",
+    paddingY: "--uxm-textarea-padding-y",
+    fontSize: "--uxm-textarea-font-size"
+  },
+  "file-upload": {
+    backgroundColor: "--uxm-file-upload-bg",
+    borderColor: "--uxm-file-upload-border-color",
+    color: "--uxm-file-upload-color",
+    borderRadius: "--uxm-file-upload-border-radius",
+    borderStyle: "--uxm-file-upload-border-style",
+    borderWidth: "--uxm-file-upload-border-width",
+    paddingX: "--uxm-file-upload-padding-x",
+    paddingY: "--uxm-file-upload-padding-y",
+    minHeight: "--uxm-file-upload-min-height",
+    gap: "--uxm-file-upload-gap",
+    rowGap: "--uxm-file-upload-row-gap"
+  },
+  "select-dropdown": {
+    backgroundColor: "--uxm-select-dropdown-bg",
+    borderColor: "--uxm-select-dropdown-border-color",
+    color: "--uxm-select-dropdown-color",
+    borderRadius: "--uxm-select-dropdown-border-radius",
+    paddingX: "--uxm-select-dropdown-padding-x",
+    paddingY: "--uxm-select-dropdown-padding-y",
+    fontSize: "--uxm-select-dropdown-font-size"
+  },
+  "date-input": {
+    backgroundColor: "--uxm-date-input-background-color",
+    borderColor: "--uxm-date-input-border-color",
+    borderRadius: "--uxm-date-input-border-radius",
+    paddingX: "--uxm-date-input-padding-x",
+    paddingY: "--uxm-date-input-padding-y",
+    fontSize: "--uxm-date-input-font-size",
+    color: "--uxm-date-input-color"
+  },
+  "password-input": {
+    backgroundColor: "--uxm-password-input-background-color",
+    borderColor: "--uxm-password-input-border-color",
+    borderRadius: "--uxm-password-input-border-radius",
+    paddingX: "--uxm-password-input-padding-x",
+    paddingY: "--uxm-password-input-padding-y",
+    fontSize: "--uxm-password-input-font-size",
+    color: "--uxm-password-input-color"
+  },
+  "time-input": {
+    backgroundColor: "--uxm-time-input-background-color",
+    borderColor: "--uxm-time-input-border-color",
+    borderRadius: "--uxm-time-input-border-radius",
+    paddingX: "--uxm-time-input-padding-x",
+    paddingY: "--uxm-time-input-padding-y",
+    fontSize: "--uxm-time-input-font-size",
+    color: "--uxm-time-input-color"
+  },
+  "phone-input": {
+    backgroundColor: "--uxm-phone-input-background-color",
+    borderColor: "--uxm-phone-input-border-color",
+    borderRadius: "--uxm-phone-input-border-radius",
+    paddingX: "--uxm-phone-input-padding-x",
+    paddingY: "--uxm-phone-input-padding-y",
+    fontSize: "--uxm-phone-input-font-size",
+    color: "--uxm-phone-input-color"
+  },
+  calendar: {
+    backgroundColor: "--uxm-calendar-background-color",
+    borderColor: "--uxm-calendar-border-color",
+    borderRadius: "--uxm-calendar-border-radius",
+    padding: "--uxm-calendar-padding"
+  },
+  tabs: {
+    gap: "--uxm-tabs-gap",
+    paddingX: "--uxm-tabs-padding-x",
+    paddingY: "--uxm-tabs-padding-y",
+    fontSize: "--uxm-tabs-font-size",
+    fontWeight: "--uxm-tabs-font-weight"
+  },
+  "tabs-underline": {
+    gap: "--uxm-tabs-underline-gap",
+    paddingX: "--uxm-tabs-underline-padding-x",
+    paddingY: "--uxm-tabs-underline-padding-y",
+    fontSize: "--uxm-tabs-underline-font-size",
+    fontWeight: "--uxm-tabs-underline-font-weight"
+  },
+  "filter-tabs": {
+    gap: "--uxm-filter-tabs-gap",
+    paddingX: "--uxm-filter-tabs-padding-x",
+    paddingY: "--uxm-filter-tabs-padding-y",
+    fontSize: "--uxm-filter-tabs-font-size",
+    fontWeight: "--uxm-filter-tabs-font-weight"
+  },
+  "view-switcher": {
+    gap: "--uxm-view-switcher-gap"
+  },
+  "button-group": {
+    borderColor: "--uxm-button-group-border-color",
+    borderRadius: "--uxm-button-group-border-radius",
+    paddingX: "--uxm-button-group-padding-x",
+    paddingY: "--uxm-button-group-padding-y",
+    fontSize: "--uxm-button-group-font-size"
+  },
+  checkbox: {
+    borderRadius: "--uxm-checkbox-border-radius",
+    gap: "--uxm-checkbox-gap"
+  },
+  card: {
+    backgroundColor: "--uxm-card-bg",
+    borderColor: "--uxm-card-border-color",
+    borderRadius: "--uxm-card-radius",
+    padding: "--uxm-card-padding",
+    // `gap` ("Header Gap") collides with REAL_CSS_PROPS — the generic fallback
+    // would emit a literal `gap` property that `.uxm-card` never activates (the
+    // card is only a flex column via the `--gap` modifier). Route it to the var
+    // the modifier actually reads.
+    //
+    // There is deliberately NO Card knob for the CONTENT's row gap. It looks
+    // like it belongs here, but the row gap is owned by the nested Stack /
+    // Cluster, which already have their own Gap knobs — and those emit
+    // `--uxm-stack-gap` DIRECTLY on `.uxm-stack`, where a directly-set custom
+    // property always beats one inherited from `.uxm-card`. A Card-side knob
+    // would therefore lose the moment anyone themed Stack, while also leaking
+    // to every Stack/Cluster at any depth inside any card (custom properties
+    // inherit). One owner per visual property; Card owns only its own gap.
+    gap: "--uxm-card-gap"
+  },
+  "toggle-switch": {
+    width: "--uxm-toggle-switch-width",
+    height: "--uxm-toggle-switch-height"
+  },
+  "radio-group": {
+    gap: "--uxm-radio-group-gap"
+  },
+  loader: {
+    color: "--uxm-loader-color",
+    gap: "--uxm-loader-gap"
+  },
+  "data-table": {
+    borderColor: "--uxm-data-table-border-color",
+    fontSize: "--uxm-data-table-font-size",
+    borderRadius: "--uxm-data-table-border-radius"
+  },
+  "app-sidebar": {
+    borderColor: "--uxm-app-sidebar-border-color",
+    backgroundColor: "--uxm-app-sidebar-background-color"
+  },
+  // Every key here collides with REAL_CSS_PROPS, where the generic fallback
+  // emits the LITERAL css property on the root selector instead of the var.
+  //
+  // For `fontSize` / `fontWeight` that is a silent no-op rather than a mere
+  // detour: the atom reads those vars on `.uxm-sidebar-nav-trigger__value`, and
+  // a `font-size` landing on the root is beaten by the child's own declaration.
+  // The live workbench hides it — that path projects custom properties through
+  // the preview's `buildVars`, so the knob only dies once a brand is SAVED.
+  //
+  // The rest (padding, gap, radius) do sit on the root and would survive the
+  // literal route on source order alone, but they are mapped too: the sibling
+  // `sidebar-nav-item` maps all six, and leaving half of them to cascade luck
+  // invites exactly the question of which half.
+  "sidebar-nav-trigger": {
+    paddingX: "--uxm-sidebar-nav-trigger-padding-x",
+    paddingY: "--uxm-sidebar-nav-trigger-padding-y",
+    fontSize: "--uxm-sidebar-nav-trigger-font-size",
+    fontWeight: "--uxm-sidebar-nav-trigger-font-weight",
+    gap: "--uxm-sidebar-nav-trigger-gap",
+    borderRadius: "--uxm-sidebar-nav-trigger-border-radius"
+  },
+  "sidebar-nav-item": {
+    paddingX: "--uxm-sidebar-nav-item-padding-x",
+    paddingY: "--uxm-sidebar-nav-item-padding-y",
+    fontSize: "--uxm-sidebar-nav-item-font-size",
+    fontWeight: "--uxm-sidebar-nav-item-font-weight",
+    gap: "--uxm-sidebar-nav-item-gap",
+    borderRadius: "--uxm-sidebar-nav-item-border-radius"
+  },
+  "explorer-list-item": {
+    paddingX: "--uxm-explorer-list-item-padding-x",
+    paddingY: "--uxm-explorer-list-item-padding-y",
+    fontSize: "--uxm-explorer-list-item-font-size",
+    fontWeight: "--uxm-explorer-list-item-font-weight",
+    gap: "--uxm-explorer-list-item-gap",
+    borderRadius: "--uxm-explorer-list-item-border-radius"
+  },
+  "app-top-bar": {
+    borderColor: "--uxm-app-top-bar-border-color",
+    backgroundColor: "--uxm-app-top-bar-background-color",
+    height: "--uxm-app-top-bar-height",
+    paddingX: "--uxm-app-top-bar-padding-x",
+    gap: "--uxm-app-top-bar-gap"
+  },
+  "explorer-section": {
+    paddingX: "--uxm-explorer-section-padding-x",
+    paddingY: "--uxm-explorer-section-padding-y",
+    borderRadius: "--uxm-explorer-section-border-radius",
+    gap: "--uxm-explorer-section-gap",
+    fontSize: "--uxm-explorer-section-font-size",
+    fontWeight: "--uxm-explorer-section-font-weight"
+  },
+  "number-field": {
+    backgroundColor: "--uxm-number-field-input-bg",
+    borderColor: "--uxm-number-field-input-border",
+    color: "--uxm-number-field-input-color",
+    borderRadius: "--uxm-number-field-input-radius",
+    paddingX: "--uxm-number-field-input-padding-x",
+    paddingY: "--uxm-number-field-input-padding-y",
+    fontSize: "--uxm-number-field-font-size",
+    gap: "--uxm-number-field-gap"
+  },
+  "icon-button": {
+    color: "--uxm-icon-button-color",
+    backgroundColor: "--uxm-icon-button-bg",
+    hoverBackgroundColor: "--uxm-icon-button-hover-bg",
+    activeBackgroundColor: "--uxm-icon-button-active-bg",
+    borderRadius: "--uxm-icon-button-radius"
+  },
+  "button-primary": {
+    backgroundColor: "--uxm-button-primary-background-color",
+    color: "--uxm-button-primary-color",
+    borderRadius: "--uxm-button-primary-border-radius",
+    fontSize: "--uxm-button-primary-font-size",
+    fontWeight: "--uxm-button-primary-font-weight",
+    paddingX: "--uxm-button-primary-padding-x",
+    paddingY: "--uxm-button-primary-padding-y"
+  },
+  "button-secondary": {
+    backgroundColor: "--uxm-button-secondary-background-color",
+    color: "--uxm-button-secondary-color",
+    borderColor: "--uxm-button-secondary-border-color",
+    borderRadius: "--uxm-button-secondary-border-radius",
+    fontSize: "--uxm-button-secondary-font-size",
+    fontWeight: "--uxm-button-secondary-font-weight",
+    paddingX: "--uxm-button-secondary-padding-x",
+    paddingY: "--uxm-button-secondary-padding-y"
+  },
+  "button-tertiary": {
+    backgroundColor: "--uxm-button-tertiary-background-color",
+    color: "--uxm-button-tertiary-color",
+    borderColor: "--uxm-button-tertiary-border-color",
+    borderRadius: "--uxm-button-tertiary-border-radius",
+    fontSize: "--uxm-button-tertiary-font-size",
+    fontWeight: "--uxm-button-tertiary-font-weight",
+    paddingX: "--uxm-button-tertiary-padding-x",
+    paddingY: "--uxm-button-tertiary-padding-y"
+  },
+  "button-ghost": {
+    backgroundColor: "--uxm-button-ghost-background-color",
+    color: "--uxm-button-ghost-color",
+    borderRadius: "--uxm-button-ghost-border-radius",
+    fontSize: "--uxm-button-ghost-font-size",
+    fontWeight: "--uxm-button-ghost-font-weight",
+    paddingX: "--uxm-button-ghost-padding-x",
+    paddingY: "--uxm-button-ghost-padding-y"
+  },
+  "button-danger": {
+    backgroundColor: "--uxm-button-danger-background-color",
+    color: "--uxm-button-danger-color",
+    borderColor: "--uxm-button-danger-border-color",
+    borderRadius: "--uxm-button-danger-border-radius",
+    fontSize: "--uxm-button-danger-font-size",
+    fontWeight: "--uxm-button-danger-font-weight",
+    paddingX: "--uxm-button-danger-padding-x",
+    paddingY: "--uxm-button-danger-padding-y"
+  },
+  "button-with-icon": {
+    backgroundColor: "--uxm-button-with-icon-background-color",
+    color: "--uxm-button-with-icon-color",
+    borderColor: "--uxm-button-with-icon-border-color",
+    borderRadius: "--uxm-button-with-icon-border-radius",
+    fontSize: "--uxm-button-with-icon-font-size",
+    fontWeight: "--uxm-button-with-icon-font-weight",
+    paddingX: "--uxm-button-with-icon-padding-x",
+    paddingY: "--uxm-button-with-icon-padding-y"
+  },
+  "button-icon": {
+    backgroundColor: "--uxm-button-icon-background-color",
+    color: "--uxm-button-icon-color",
+    borderRadius: "--uxm-button-icon-border-radius"
+  },
+  "back-link": {
+    color: "--uxm-back-link-color",
+    fontSize: "--uxm-back-link-font-size",
+    fontWeight: "--uxm-back-link-font-weight",
+    gap: "--uxm-back-link-gap"
+  },
+  breadcrumb: {
+    fontSize: "--uxm-breadcrumb-font-size",
+    gap: "--uxm-breadcrumb-gap"
+  },
+  disclosure: {
+    paddingX: "--uxm-disclosure-padding-x",
+    paddingY: "--uxm-disclosure-padding-y",
+    fontSize: "--uxm-disclosure-font-size",
+    gap: "--uxm-disclosure-gap",
+    borderRadius: "--uxm-disclosure-border-radius"
+  },
+  "side-flexpane": {
+    paddingX: "--uxm-side-flexpane-padding-x",
+    paddingY: "--uxm-side-flexpane-padding-y",
+    backgroundColor: "--uxm-side-flexpane-background-color",
+    borderColor: "--uxm-side-flexpane-border-color",
+    borderRadius: "--uxm-side-flexpane-border-radius",
+    width: "--uxm-side-flexpane-width"
+  },
+  "list-item": {
+    paddingX: "--uxm-list-item-padding-x",
+    paddingY: "--uxm-list-item-padding-y",
+    fontSize: "--uxm-list-item-font-size",
+    gap: "--uxm-list-item-gap",
+    borderRadius: "--uxm-list-item-border-radius",
+    borderColor: "--uxm-list-item-border-color"
+  },
+  "pill-select": {
+    backgroundColor: "--uxm-pill-select-bg",
+    borderColor: "--uxm-pill-select-border-color",
+    paddingX: "--uxm-pill-select-padding-x",
+    paddingY: "--uxm-pill-select-padding-y"
+  },
+  modal: {
+    backgroundColor: "--uxm-modal-background-color",
+    borderColor: "--uxm-modal-border-color",
+    borderRadius: "--uxm-modal-border-radius",
+    paddingX: "--uxm-modal-padding-x",
+    paddingY: "--uxm-modal-padding-y"
+  },
+  toast: {
+    backgroundColor: "--uxm-toast-background-color",
+    color: "--uxm-toast-color",
+    borderColor: "--uxm-toast-border-color",
+    borderRadius: "--uxm-toast-border-radius",
+    paddingX: "--uxm-toast-padding-x",
+    paddingY: "--uxm-toast-padding-y",
+    fontSize: "--uxm-toast-font-size"
+  },
+  avatar: {
+    backgroundColor: "--uxm-avatar-background-color",
+    borderColor: "--uxm-avatar-border-color",
+    borderRadius: "--uxm-avatar-border-radius",
+    borderWidth: "--uxm-avatar-border-width",
+    color: "--uxm-avatar-color",
+    fontSize: "--uxm-avatar-font-size",
+    fontWeight: "--uxm-avatar-font-weight"
+  },
+  banner: {
+    borderRadius: "--uxm-banner-border-radius",
+    paddingX: "--uxm-banner-padding-x",
+    paddingY: "--uxm-banner-padding-y",
+    fontSize: "--uxm-banner-font-size"
+  },
+  "bulk-action-bar": {
+    backgroundColor: "--uxm-bulk-action-bar-background-color",
+    color: "--uxm-bulk-action-bar-color",
+    borderColor: "--uxm-bulk-action-bar-border-color",
+    borderRadius: "--uxm-bulk-action-bar-border-radius",
+    paddingX: "--uxm-bulk-action-bar-padding-x",
+    paddingY: "--uxm-bulk-action-bar-padding-y",
+    gap: "--uxm-bulk-action-bar-gap",
+    fontSize: "--uxm-bulk-action-bar-font-size"
+  },
+  cluster: {
+    gap: "--uxm-cluster-gap"
+  },
+  "config-component-row": {
+    padding: "--uxm-config-component-row-padding",
+    borderRadius: "--uxm-config-component-row-radius"
+  },
+  "config-segment-item": {
+    paddingX: "--uxm-config-segment-item-padding-x",
+    paddingY: "--uxm-config-segment-item-padding-y",
+    borderRadius: "--uxm-config-segment-item-radius"
+  },
+  "detail-section": {
+    backgroundColor: "--uxm-detail-section-bg",
+    borderColor: "--uxm-detail-section-border-color",
+    borderRadius: "--uxm-detail-section-radius",
+    padding: "--uxm-detail-section-padding"
+  },
+  divider: {
+    color: "--uxm-divider-color",
+    gap: "--uxm-divider-gap"
+  },
+  "editable-cell": {
+    // Dimensions are per-size keys (smallPaddingX, mediumMaxWidth, …) that
+    // resolve via the generic `--uxm-editable-cell-{kebab(key)}` fallback in
+    // toCSS; only the value colour needs an explicit entry (`color` is in
+    // REAL_CSS_PROPS, so the fallback would emit a real CSS property that
+    // outranks the component layer).
+    color: "--uxm-editable-cell-color",
+    // RETIRED knobs, kept mapped on purpose. The per-size split replaced these
+    // four, but `generateOverridesCss` emits whatever keys are PERSISTED — not
+    // what the registry currently declares — so a config saved before the split
+    // still carries them. Without an entry here they'd fall through to
+    // REAL_CSS_PROPS / the paddingX-paddingY special case in toCSS and emit
+    // REAL `min-height` / `padding-inline` / `padding-block` declarations on
+    // `.uxm-editable-cell`, which land in a sheet loaded after the library CSS
+    // and would hard-override BOTH size presets (killing `medium`) and
+    // resurrect the min-height the size work deliberately removed. Mapped to
+    // their old, now-unread custom properties they are true no-ops instead.
+    // Safe to delete once persisted overrides are pruned against the registry.
+    minHeight: "--uxm-editable-cell-min-height",
+    paddingX: "--uxm-editable-cell-padding-x",
+    paddingY: "--uxm-editable-cell-padding-y",
+    // `maxWidth` joined them when the cap went per-size: it is in
+    // REAL_CSS_PROPS, so without this it would emit a real `max-width` that
+    // pins BOTH presets (and would silently re-cap `medium`, whose whole point
+    // is filling its container).
+    maxWidth: "--uxm-editable-cell-max-width"
+  },
+  "empty-state": {
+    padding: "--uxm-empty-state-padding"
+  },
+  "form-field": {
+    gap: "--uxm-form-field-gap",
+    // Per-tint label colours — the component reads `--uxm-form-field-label-
+    // tint-*` (see form-field.scss tone classes); the generic kebab fallback
+    // would emit `--uxm-form-field-tint-strong-color` etc., which nothing
+    // reads, so the saved colour would silently not apply.
+    tintStrongColor: "--uxm-form-field-label-tint-strong",
+    tintDefaultColor: "--uxm-form-field-label-tint-default",
+    tintMutedColor: "--uxm-form-field-label-tint-muted",
+    // MIGRATION — `labelColor` was the single label-colour knob the tints
+    // replaced. It is gone from the registry, but `generateOverridesCss` emits
+    // whatever is PERSISTED, and its generic fallback lands on
+    // `--uxm-form-field-label-color` — the very var the tint classes assign,
+    // at equal specificity from a later sheet. Left alone it would beat ALL
+    // THREE tints and silently disable them, with no knob left in the panel to
+    // notice or clear it. Routed to the STRONG tint instead: strong was the
+    // old (only) label colour and is still the default tone, so a pre-split
+    // theme keeps the exact look it saved. A newly-saved `tintStrongColor`
+    // still wins — overrides are appended, so it emits after this one.
+    labelColor: "--uxm-form-field-label-tint-strong"
+  },
+  "icon-tile": {
+    borderRadius: "--uxm-icon-tile-radius",
+    iconBg: "--uxm-icon-tile-bg",
+    iconColor: "--uxm-icon-tile-color"
+  },
+  icon: {
+    color: "--uxm-icon-color"
+  },
+  "inline-action": {
+    color: "--uxm-inline-action-color",
+    fontSize: "--uxm-inline-action-font-size",
+    fontWeight: "--uxm-inline-action-font-weight",
+    gap: "--uxm-inline-action-gap"
+  },
+  "inline-filter": {
+    gap: "--uxm-inline-filter-gap"
+  },
+  "lifecycle-edge-label": {
+    paddingX: "--uxm-lifecycle-edge-label-padding-x",
+    paddingY: "--uxm-lifecycle-edge-label-padding-y",
+    borderRadius: "--uxm-lifecycle-edge-label-radius",
+    borderWidth: "--uxm-lifecycle-edge-label-border-width",
+    fontSize: "--uxm-lifecycle-edge-label-font-size",
+    fontWeight: "--uxm-lifecycle-edge-label-font-weight"
+  },
+  // Same rule as lifecycle-group-box below — only the REAL_CSS_PROPS collisions
+  // need an entry. `color` is the one that matters: a real `color` declaration
+  // on `.uxm-lifecycle-drop-slot` from a later sheet would paint the text but
+  // leave the dashes on the token, splitting a pair the atom deliberately drives
+  // from one variable. The shape-scoped knobs (`cardRadius`, `pillFontSize`, …)
+  // and `bg` need nothing: the generic `--uxm-{id}-{kebab}` rule already lands
+  // on the names the stylesheet reads.
+  "lifecycle-drop-slot": {
+    borderColor: "--uxm-lifecycle-drop-slot-border-color",
+    borderStyle: "--uxm-lifecycle-drop-slot-border-style",
+    borderWidth: "--uxm-lifecycle-drop-slot-border-width",
+    color: "--uxm-lifecycle-drop-slot-color"
+  },
+  // Only the knobs whose keys collide with REAL_CSS_PROPS need an entry: left
+  // to the generic path they'd emit a real `background-color` / `border-width` /
+  // `padding` on `.uxm-lifecycle-group-box` from a later sheet, hard-overriding
+  // the rule's own `var(--uxm-… , token)` chain — and `padding` is read BY THE
+  // CONSUMER off the custom property to inset the group's members, so a real
+  // declaration would leave that value unreadable.
+  //
+  // `blur` and the three `target*` knobs are absent on purpose: the generic
+  // `--uxm-{id}-{kebab}` rule already lands on the names the stylesheet reads.
+  "lifecycle-group-box": {
+    backgroundColor: "--uxm-lifecycle-group-box-bg",
+    borderColor: "--uxm-lifecycle-group-box-border-color",
+    borderWidth: "--uxm-lifecycle-group-box-border-width",
+    borderRadius: "--uxm-lifecycle-group-box-radius",
+    padding: "--uxm-lifecycle-group-box-padding"
+  },
+  "lifecycle-minimap": {
+    backgroundColor: "--uxm-lifecycle-minimap-bg",
+    borderColor: "--uxm-lifecycle-minimap-border-color",
+    borderRadius: "--uxm-lifecycle-minimap-radius",
+    width: "--uxm-lifecycle-minimap-width",
+    height: "--uxm-lifecycle-minimap-height"
+  },
+  "lifecycle-node-card": {
+    backgroundColor: "--uxm-lifecycle-node-card-bg",
+    borderColor: "--uxm-lifecycle-node-card-border-color",
+    borderRadius: "--uxm-lifecycle-node-card-radius",
+    paddingX: "--uxm-lifecycle-node-card-padding-x",
+    paddingY: "--uxm-lifecycle-node-card-padding-y",
+    width: "--uxm-lifecycle-node-card-width",
+    minHeight: "--uxm-lifecycle-node-card-min-height"
+  },
+  "lifecycle-terminal": {
+    backgroundColor: "--uxm-lifecycle-terminal-bg",
+    borderColor: "--uxm-lifecycle-terminal-border-color",
+    color: "--uxm-lifecycle-terminal-color",
+    borderRadius: "--uxm-lifecycle-terminal-radius",
+    width: "--uxm-lifecycle-terminal-width",
+    height: "--uxm-lifecycle-terminal-height",
+    fontSize: "--uxm-lifecycle-terminal-font-size",
+    fontWeight: "--uxm-lifecycle-terminal-font-weight"
+  },
+  "lifecycle-zoom-control": {
+    backgroundColor: "--uxm-lifecycle-zoom-bg",
+    borderColor: "--uxm-lifecycle-zoom-border-color",
+    borderRadius: "--uxm-lifecycle-zoom-radius",
+    fontSize: "--uxm-lifecycle-zoom-font-size",
+    color: "--uxm-lifecycle-zoom-color",
+    buttonSize: "--uxm-lifecycle-zoom-button-size",
+    iconColor: "--uxm-lifecycle-zoom-icon-color"
+  },
+  link: {
+    fontSize: "--uxm-link-font-size",
+    fontWeight: "--uxm-link-font-weight"
+  },
+  "meta-row": {
+    fontSize: "--uxm-meta-row-font-size",
+    color: "--uxm-meta-row-color",
+    gap: "--uxm-meta-row-gap"
+  },
+  "number-stepper": {
+    backgroundColor: "--uxm-number-stepper-input-bg",
+    borderColor: "--uxm-number-stepper-input-border",
+    color: "--uxm-number-stepper-input-color",
+    borderRadius: "--uxm-number-stepper-input-radius",
+    paddingX: "--uxm-number-stepper-input-padding-x",
+    paddingY: "--uxm-number-stepper-input-padding-y",
+    fontSize: "--uxm-number-stepper-font-size",
+    gap: "--uxm-number-stepper-gap"
+  },
+  "page-header": {
+    gap: "--uxm-page-header-gap",
+    paddingX: "--uxm-page-header-padding-x",
+    paddingY: "--uxm-page-header-padding-y"
+  },
+  "page-shell": {
+    backgroundColor: "--uxm-page-shell-bg"
+  },
+  "property-field": {
+    gap: "--uxm-property-field-gap"
+  },
+  "property-grid": {
+    rowGap: "--uxm-property-grid-row-gap",
+    columnGap: "--uxm-property-grid-column-gap"
+  },
+  "responsive-grid": {
+    gap: "--uxm-responsive-grid-gap"
+  },
+  "section-header": {
+    gap: "--uxm-section-header-gap"
+  },
+  stack: {
+    gap: "--uxm-stack-gap"
+  },
+  "stat-card": {
+    backgroundColor: "--uxm-stat-card-background-color",
+    borderColor: "--uxm-stat-card-border-color",
+    borderRadius: "--uxm-stat-card-border-radius",
+    padding: "--uxm-stat-card-padding"
+  },
+  tag: {
+    borderRadius: "--uxm-tag-border-radius",
+    fontWeight: "--uxm-tag-font-weight"
+  },
+  thumbnail: {
+    borderRadius: "--uxm-thumbnail-border-radius",
+    backgroundColor: "--uxm-thumbnail-background-color",
+    borderColor: "--uxm-thumbnail-border-color",
+    borderWidth: "--uxm-thumbnail-border-width"
+  },
+  "timeline-entry": {
+    gap: "--uxm-timeline-entry-gap"
+  },
+  "segment-row": {
+    paddingX: "--uxm-segment-row-padding-x",
+    paddingY: "--uxm-segment-row-padding-y",
+    gap: "--uxm-segment-row-gap",
+    dragColor: "--uxm-segment-row-drag-color",
+    dragHoverColor: "--uxm-segment-row-drag-hover-color",
+    chevronColor: "--uxm-segment-row-chevron-color",
+    chevronSize: "--uxm-segment-row-chevron-size",
+    accentColor: "--uxm-segment-row-accent-color",
+    accentWidth: "--uxm-segment-row-accent-width",
+    accentRadius: "--uxm-segment-row-accent-radius",
+    titleColor: "--uxm-segment-row-title-color",
+    titleSize: "--uxm-segment-row-title-size",
+    titleWeight: "--uxm-segment-row-title-weight",
+    countBg: "--uxm-segment-row-count-bg",
+    countColor: "--uxm-segment-row-count-color",
+    countSize: "--uxm-segment-row-count-size",
+    countPaddingX: "--uxm-segment-row-count-padding-x",
+    countPaddingY: "--uxm-segment-row-count-padding-y",
+    countRadius: "--uxm-segment-row-count-radius",
+    rowHoverBg: "--uxm-segment-row-row-hover-bg",
+    rowHoverRadius: "--uxm-segment-row-row-hover-radius"
+  },
+  "segment-card": {
+    borderColor: "--uxm-segment-card-border-color",
+    borderWidth: "--uxm-segment-card-border-width",
+    borderRadius: "--uxm-segment-card-border-radius",
+    backgroundColor: "--uxm-segment-card-background",
+    paddingX: "--uxm-segment-card-padding-x",
+    paddingY: "--uxm-segment-card-padding-y",
+    childrenInsetX: "--uxm-segment-card-children-inset-x",
+    childrenInsetY: "--uxm-segment-card-children-inset-y",
+    childrenGap: "--uxm-segment-card-children-gap",
+    dividerColor: "--uxm-segment-card-divider-color",
+    dividerWidth: "--uxm-segment-card-divider-width"
+  },
+  "component-row": {
+    paddingX: "--uxm-component-row-padding-x",
+    paddingY: "--uxm-component-row-padding-y",
+    gap: "--uxm-component-row-gap",
+    backgroundColor: "--uxm-component-row-background",
+    dragColor: "--uxm-component-row-drag-color",
+    dragHoverColor: "--uxm-component-row-drag-hover-color",
+    iconBadgeSize: "--uxm-component-row-icon-badge-size",
+    iconBadgeRadius: "--uxm-component-row-icon-badge-radius",
+    iconBadgePadding: "--uxm-component-row-icon-badge-padding",
+    nameColor: "--uxm-component-row-name-color",
+    nameSize: "--uxm-component-row-name-size",
+    nameWeight: "--uxm-component-row-name-weight",
+    typeLabelColor: "--uxm-component-row-type-label-color",
+    typeLabelSize: "--uxm-component-row-type-label-size",
+    typeLabelWeight: "--uxm-component-row-type-label-weight",
+    chevronColor: "--uxm-component-row-chevron-color",
+    chevronSize: "--uxm-component-row-chevron-size",
+    rowHoverBg: "--uxm-component-row-row-hover-bg",
+    rowHoverRadius: "--uxm-component-row-row-hover-radius"
+  },
+  "option-list": {
+    indent: "--uxm-option-list-indent",
+    backgroundColor: "--uxm-option-list-background",
+    borderColor: "--uxm-option-list-border-color",
+    borderWidth: "--uxm-option-list-border-width",
+    borderRadius: "--uxm-option-list-border-radius",
+    paddingX: "--uxm-option-list-padding-x",
+    paddingY: "--uxm-option-list-padding-y",
+    gap: "--uxm-option-list-gap",
+    rowPaddingX: "--uxm-option-list-row-padding-x",
+    rowPaddingY: "--uxm-option-list-row-padding-y",
+    dragColor: "--uxm-option-list-drag-color",
+    dragHoverColor: "--uxm-option-list-drag-hover-color",
+    bulletSize: "--uxm-option-list-bullet-size",
+    bulletGap: "--uxm-option-list-bullet-gap",
+    nameColor: "--uxm-option-list-name-color",
+    nameSize: "--uxm-option-list-name-size",
+    nameWeight: "--uxm-option-list-name-weight",
+    rowHoverBg: "--uxm-option-list-row-hover-bg",
+    rowHoverRadius: "--uxm-option-list-row-hover-radius"
+  },
+  tooltip: {
+    backgroundColor: "--uxm-tooltip-background-color",
+    color: "--uxm-tooltip-color",
+    borderRadius: "--uxm-tooltip-border-radius",
+    paddingX: "--uxm-tooltip-padding-x",
+    paddingY: "--uxm-tooltip-padding-y",
+    fontSize: "--uxm-tooltip-font-size"
+  },
+  "content-tooltip": {
+    backgroundColor: "--uxm-content-tooltip-background-color",
+    borderColor: "--uxm-content-tooltip-border-color",
+    borderRadius: "--uxm-content-tooltip-border-radius",
+    padding: "--uxm-content-tooltip-padding",
+    maxWidth: "--uxm-content-tooltip-max-width"
+  },
+  "type-overview-card": {
+    backgroundColor: "--uxm-typeoverview-bg",
+    borderColor: "--uxm-typeoverview-border-color",
+    borderRadius: "--uxm-typeoverview-radius",
+    padding: "--uxm-typeoverview-padding",
+    accentColor: "--uxm-typeoverview-accent-color",
+    accentWidth: "--uxm-typeoverview-accent-width",
+    iconBg: "--uxm-typeoverview-icon-bg",
+    iconColor: "--uxm-typeoverview-icon-color",
+    iconBoxSize: "--uxm-typeoverview-icon-tile-size",
+    iconRadius: "--uxm-typeoverview-icon-tile-radius",
+    labelSize: "--uxm-typeoverview-label-size",
+    labelColor: "--uxm-typeoverview-label-color",
+    valueSize: "--uxm-typeoverview-value-size",
+    valueColor: "--uxm-typeoverview-value-color"
+  },
+  // Without an entry here every knob would fall through to the generic
+  // `--uxm-{id}-{kebab}` rule and double the segment — `connectorIdleColor`
+  // under id `lifecycle-connector` becomes
+  // `--uxm-lifecycle-connector-connector-idle-color`. The stylesheet reads the
+  // canonical single-`connector` names (and still accepts the doubled ones as
+  // a fallback alias), so map the knobs explicitly.
+  //
+  // `connectorArrowSize` sizes an SVG polygon rather than setting any CSS
+  // property, so no rule can consume it — `useThemedArrowSize` in
+  // lifecycle-connector.tsx reads `--uxm-lifecycle-connector-arrow-size` back
+  // off the element instead. It is published here for that reason, not for
+  // naming tidiness: drop this line and a saved Arrow Size stops applying.
+  "lifecycle-connector": {
+    connectorIdleColor: "--uxm-lifecycle-connector-idle-color",
+    connectorActiveColor: "--uxm-lifecycle-connector-active-color",
+    connectorIdleStrokeWidth: "--uxm-lifecycle-connector-idle-stroke-width",
+    connectorActiveStrokeWidth: "--uxm-lifecycle-connector-active-stroke-width",
+    connectorDashedColor: "--uxm-lifecycle-connector-dashed-color",
+    connectorDashedStrokeWidth: "--uxm-lifecycle-connector-dashed-stroke-width",
+    connectorDashPattern: "--uxm-lifecycle-connector-dash-pattern",
+    connectorArrowSize: "--uxm-lifecycle-connector-arrow-size"
+  }
+};
+export {
+  PER_COMPONENT_MAPPING,
+  PER_COMPONENT_SELECTOR
+};
+//# sourceMappingURL=generate-css-mapping.js.map