@viax.io/uxm 4.38.0 → 4.40.0

package/dist/studio/persistence/generate-css.cjs

@@ -22,14 +22,17 @@ __export(generate_css_exports, {
   fontFileUrl: () => fontFileUrl,
   generateOverridesCss: () => generateOverridesCss,
   resolveTypeRoles: () => resolveTypeRoles,
-  safeFontFamily: () => safeFontFamily,
-  safeFontWeight: () => safeFontWeight,
-  safeLineHeight: () => safeLineHeight,
-  safeTokenKey: () => safeTokenKey,
-  safeTokenValue: () => safeTokenValue,
-  safeTypeScale: () => safeTypeScale
+  safeFontFamily: () => import_css_sanitizers2.safeFontFamily,
+  safeFontWeight: () => import_css_sanitizers2.safeFontWeight,
+  safeLineHeight: () => import_css_sanitizers2.safeLineHeight,
+  safeTokenKey: () => import_css_sanitizers2.safeTokenKey,
+  safeTokenValue: () => import_css_sanitizers2.safeTokenValue,
+  safeTypeScale: () => import_css_sanitizers2.safeTypeScale
 });
 module.exports = __toCommonJS(generate_css_exports);
+var import_css_sanitizers = require("./css-sanitizers.cjs");
+var import_generate_css_mapping = require("./generate-css-mapping.cjs");
+var import_css_sanitizers2 = require("./css-sanitizers.cjs");
 const BRAND_FONT_WEIGHTS = "wght@400;500;600;700";
 function fontFileUrl(fontFamily) {
   const encoded = fontFamily.trim().replace(/\s+/g, "+");
@@ -68,815 +71,8 @@ const REAL_CSS_PROPS = /* @__PURE__ */ new Set([
   "overflow",
   "direction"
 ]);
-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"
-  }
-};
 function toCSS(key, componentId) {
-  const componentMapping = PER_COMPONENT_MAPPING[componentId];
+  const componentMapping = import_generate_css_mapping.PER_COMPONENT_MAPPING[componentId];
   if (componentMapping?.[key]) return componentMapping[key];
   const mapping = {
     paddingX: "padding-inline",
@@ -894,42 +90,7 @@ function formatValue(value, key) {
     if (unitless.includes(key) || key.endsWith("Opacity")) return String(value);
     return `${value}px`;
   }
-  return safeTokenValue(value) ?? "";
-}
-function safeUrl(v) {
-  if (typeof v !== "string") return void 0;
-  const trimmed = v.trim();
-  if (!/^(https?:\/\/|\/)/.test(trimmed)) return void 0;
-  if (/[")\n\r]/.test(trimmed)) return void 0;
-  return trimmed;
-}
-function safeFontFamily(v) {
-  if (typeof v !== "string") return void 0;
-  const trimmed = v.trim();
-  return /^[A-Za-z0-9 _-]+$/.test(trimmed) ? trimmed : void 0;
-}
-function safeFontWeight(v) {
-  const s = typeof v === "number" ? String(v) : typeof v === "string" ? v.trim() : void 0;
-  return s !== void 0 && /^(500|600|700)$/.test(s) ? s : void 0;
-}
-function safeTypeScale(v) {
-  const s = typeof v === "number" ? String(v) : typeof v === "string" ? v.trim() : void 0;
-  if (s === void 0 || !/^(?:0|[1-9]\d?)(?:\.\d{1,3})?$/.test(s)) return void 0;
-  const n = Number(s);
-  return n >= 0.5 && n <= 2 ? s : void 0;
-}
-function safeLineHeight(v) {
-  const s = typeof v === "number" ? String(v) : typeof v === "string" ? v.trim() : void 0;
-  if (s === void 0 || !/^[1-9](?:\.\d{1,2})?$/.test(s)) return void 0;
-  const n = Number(s);
-  return n >= 1 && n <= 2.5 ? s : void 0;
-}
-function safeTokenKey(v) {
-  return /^--[A-Za-z0-9-]+$/.test(v);
-}
-function safeTokenValue(v) {
-  if (typeof v !== "string") return void 0;
-  return /[{};\n\r]/.test(v) ? void 0 : v;
+  return (0, import_css_sanitizers.safeTokenValue)(value) ?? "";
 }
 const TYPE_ROLES = [
   { role: "display", family: "displayFontFamily", weight: "displayFontWeight", scale: "displayScale" },
@@ -939,23 +100,23 @@ const TYPE_ROLES = [
 function resolveTypeRoles(brand) {
   return TYPE_ROLES.map((r) => ({
     role: r.role,
-    family: safeFontFamily(brand[r.family]),
-    weight: safeFontWeight(brand[r.weight]),
-    scale: safeTypeScale(brand[r.scale])
+    family: (0, import_css_sanitizers.safeFontFamily)(brand[r.family]),
+    weight: (0, import_css_sanitizers.safeFontWeight)(brand[r.weight]),
+    scale: (0, import_css_sanitizers.safeTypeScale)(brand[r.scale])
   }));
 }
 function generateOverridesCss(allOverrides, brand) {
   const lines = ["/* Auto-generated by UXM \u2014 do not edit manually */", ""];
-  const fontFamily = safeFontFamily(brand.fontFamily);
-  const headingFontFamily = safeFontFamily(brand.headingFontFamily);
-  const headingFontWeight = safeFontWeight(brand.headingFontWeight);
+  const fontFamily = (0, import_css_sanitizers.safeFontFamily)(brand.fontFamily);
+  const headingFontFamily = (0, import_css_sanitizers.safeFontFamily)(brand.headingFontFamily);
+  const headingFontWeight = (0, import_css_sanitizers.safeFontWeight)(brand.headingFontWeight);
   const roles = resolveTypeRoles(brand);
-  const typeScale = safeTypeScale(brand.typeScale);
-  const bodyLineHeight = safeLineHeight(brand.bodyLineHeight);
-  const logoUrl = safeUrl(brand.logoUrl);
-  const iconUrl = safeUrl(brand.iconUrl);
-  const logoUrlDark = safeUrl(brand.logoUrlDark);
-  const iconUrlDark = safeUrl(brand.iconUrlDark);
+  const typeScale = (0, import_css_sanitizers.safeTypeScale)(brand.typeScale);
+  const bodyLineHeight = (0, import_css_sanitizers.safeLineHeight)(brand.bodyLineHeight);
+  const logoUrl = (0, import_css_sanitizers.safeUrl)(brand.logoUrl);
+  const iconUrl = (0, import_css_sanitizers.safeUrl)(brand.iconUrl);
+  const logoUrlDark = (0, import_css_sanitizers.safeUrl)(brand.logoUrlDark);
+  const iconUrlDark = (0, import_css_sanitizers.safeUrl)(brand.iconUrlDark);
   if (fontFamily) {
     lines.push(`@import url("${fontFileUrl(fontFamily)}");`);
     lines.push("");
@@ -1019,8 +180,8 @@ function generateOverridesCss(allOverrides, brand) {
   const emitTokens = (selector, overrides) => {
     if (!overrides) return;
     const safeEntries = Object.entries(overrides).flatMap(([k, v]) => {
-      if (!safeTokenKey(k)) return [];
-      const safeValue = safeTokenValue(v);
+      if (!(0, import_css_sanitizers.safeTokenKey)(k)) return [];
+      const safeValue = (0, import_css_sanitizers.safeTokenValue)(v);
       return safeValue === void 0 ? [] : [[k, safeValue]];
     });
     if (safeEntries.length === 0) return;
@@ -1038,7 +199,7 @@ function generateOverridesCss(allOverrides, brand) {
     const overrides = allOverrides[id];
     const entries = Object.entries(overrides);
     if (entries.length === 0) continue;
-    const selector = PER_COMPONENT_SELECTOR[id] ?? `.uxm-${id}`;
+    const selector = import_generate_css_mapping.PER_COMPONENT_SELECTOR[id] ?? `.uxm-${id}`;
     lines.push(`${selector} {`);
     for (const [key, value] of entries) {
       const cssProp = toCSS(key, id);