@maggioli-design-system/magma-codemods 2.0.0-beta.0

package/dist/manifest/manifest.js

@@ -0,0 +1,546 @@
+/**
+ * Runtime v1 → v2 migration manifest.
+ *
+ * The bulk is machine-generated by diffing the v1/v2 `documentation.json`
+ * (`manifest.generated.ts`, produced by `scripts/build-candidate-manifest.ts`).
+ * This module layers the **curated corrections** on top — the things the docs
+ * diff cannot infer:
+ *
+ *  - `tone` is migrated by the single global rule (with per-component
+ *    validation), so the generated per-component `tone` remaps are dropped to
+ *    avoid transforming the same attribute twice; the three text-capable
+ *    components override `quiet → text`.
+ *  - semantic prop renames the generator can only see as removals
+ *    (`mds-label labelAction → label`) or missed entirely (`mds-tooltip arrow`).
+ *  - slot → attribute lifts for `label` (`mds-button` preferred;
+ *    `mds-breadcrumb-item` / `mds-tab-item` mandatory — v2 dropped their slot).
+ *  - CSS custom properties the docs diff recorded as removals but that are
+ *    renames in the shipped CSS.
+ *  - utility-class migrations of the styles package (J): the shadow/ring,
+ *    radius, border-width and named-gap token contracts that changed between
+ *    v1 and v2 (invisible to the docs diff, which only sees components).
+ *
+ * Re-run the generator on each alpha/beta and review the diff; keep the
+ * corrections here.
+ */
+import { generatedManifest } from './manifest.generated.js';
+const curate = (base) => {
+    const m = structuredClone(base);
+    // Curated tone mapping. `weak` exists in every component's v2 tone set, so
+    // `quiet → weak` validates everywhere (including mds-banner / mds-label, which
+    // dropped `text`); `ghost → outline` applies where `outline` exists. The three
+    // components whose v2 tone set gained `text` follow the documented design
+    // intent (`quiet → text`) via per-tag overrides.
+    if (m.global.tone) {
+        m.global.tone.map = { ghost: 'outline', quiet: 'weak' };
+        const quietToText = { ghost: 'outline', quiet: 'text' };
+        m.global.tone.overrides = {
+            'mds-button': { ...quietToText },
+            'mds-radial-menu': { ...quietToText },
+            'mds-radial-menu-item': { ...quietToText },
+        };
+    }
+    for (const component of Object.values(m.components)) {
+        // `tone` is handled by the global rule; drop the generated per-component
+        // tone remaps so the attribute is not transformed twice.
+        component.rules = component.rules.filter((r) => !(r.kind === 'enumRemap' && r.prop.prop === 'tone'));
+    }
+    // D — mds-label: `labelAction` was renamed to `label` (the diff only shows a removal).
+    const label = m.components['mds-label'];
+    if (label) {
+        label.rules = label.rules.filter((r) => !(r.kind === 'propRemove' && r.prop.prop === 'labelAction'));
+        label.rules.unshift({
+            kind: 'propRename',
+            from: { attr: 'label-action', prop: 'labelAction' },
+            to: { attr: 'label', prop: 'label' },
+            confidence: 'review',
+            note: 'v1 `labelAction` maps to v2 `label`.',
+        });
+    }
+    // B — boolean inversions the docs diff could not pair: either the v2 prop
+    // shares no stem with the v1 name (the diff only shows removals), the pair
+    // is missing from the diff entirely (mds-tooltip `arrow`), or the rename
+    // landed after the v2.0.0-beta docs snapshot (the mds-calendar set, #685:
+    // range mode, the two navigation buttons and the preselection area stay on
+    // by default, the v2 props opt out). `showPreselection` already defaulted
+    // to false, and the area kept showing up whenever the slot had content, so
+    // its inversion flips no default and needs no behaviour guard.
+    const curatedInversions = [
+        {
+            tag: 'mds-accordion',
+            react: 'MdsAccordion',
+            from: { attr: 'closable', prop: 'closable' },
+            to: { attr: 'disable-close', prop: 'disableClose' },
+            oldDefault: true,
+        },
+        {
+            tag: 'mds-notification',
+            react: 'MdsNotification',
+            from: { attr: 'visible', prop: 'visible' },
+            to: { attr: 'dismissed', prop: 'dismissed' },
+            oldDefault: true,
+        },
+        {
+            tag: 'mds-tooltip',
+            react: 'MdsTooltip',
+            from: { attr: 'arrow', prop: 'arrow' },
+            to: { attr: 'hide-arrow', prop: 'hideArrow' },
+            oldDefault: true,
+        },
+        {
+            tag: 'mds-calendar',
+            react: 'MdsCalendar',
+            from: { attr: 'range-picker', prop: 'rangePicker' },
+            to: { attr: 'single-picker', prop: 'singlePicker' },
+            oldDefault: true,
+        },
+        {
+            tag: 'mds-calendar',
+            react: 'MdsCalendar',
+            from: { attr: 'show-previous-button', prop: 'showPreviousButton' },
+            to: { attr: 'hide-previous-button', prop: 'hidePreviousButton' },
+            oldDefault: true,
+        },
+        {
+            tag: 'mds-calendar',
+            react: 'MdsCalendar',
+            from: { attr: 'show-next-button', prop: 'showNextButton' },
+            to: { attr: 'hide-next-button', prop: 'hideNextButton' },
+            oldDefault: true,
+        },
+        {
+            tag: 'mds-calendar',
+            react: 'MdsCalendar',
+            from: { attr: 'show-preselection', prop: 'showPreselection' },
+            to: { attr: 'hide-preselection', prop: 'hidePreselection' },
+            oldDefault: false,
+        },
+    ];
+    for (const { tag, react, from, to, oldDefault } of curatedInversions) {
+        const component = (m.components[tag] ??= { tag, react, rules: [] });
+        component.rules = component.rules.filter((r) => !(r.kind === 'propRemove' && r.prop.prop === from.prop));
+        component.rules.unshift({
+            kind: 'booleanInvert',
+            from: { ...from },
+            to: { ...to },
+            oldDefault,
+            newDefault: false,
+            confidence: 'review',
+        });
+    }
+    // F2 — lift slotted text into `label` (not derivable from the docs diff).
+    // mds-button keeps reading slotted text in v2, so the lift is the preferred
+    // form; mds-breadcrumb-item and mds-tab-item no longer render a slot at all,
+    // so there the lift is mandatory — v2 silently drops slotted content.
+    const slotLifts = [
+        { tag: 'mds-breadcrumb-item', react: 'MdsBreadcrumbItem' },
+        { tag: 'mds-button', react: 'MdsButton' },
+        { tag: 'mds-tab-item', react: 'MdsTabItem' },
+    ];
+    for (const { tag, react } of slotLifts) {
+        const component = (m.components[tag] ??= { tag, react, rules: [] });
+        if (component.rules.some((r) => r.kind === 'slotToAttr'))
+            continue;
+        component.rules.unshift({
+            kind: 'slotToAttr',
+            slot: 'default',
+            to: { attr: 'label', prop: 'label' },
+            confidence: 'review',
+        });
+    }
+    // G — CSS custom properties the docs diff saw as removals (or could not see
+    // at all) but that are really renames, verified against the shipped component
+    // CSS on both branches. Three flavours:
+    //  - real renames (banner gap, header backdrop, filter `shodow → shadow`);
+    //  - "doc-only v1 name" cases where the shipped v1 CSS already used the v2
+    //    name, so overrides written against the documented name were silently
+    //    inert — the rename activates them (explanatory note attached);
+    //  - typo'd v1 names corrected in v2 (#566, plus the stepper `duaration`
+    //    fixed while registering the properties from globals.css, #328): v1
+    //    shipped the misspelled name, so the working v1 name is renamed to the
+    //    corrected v2 one.
+    const docOnlyNote = (shipped) => `the v1 name was documented but never shipped (the CSS always read \`--${shipped}\`); this override was inert in v1 and becomes effective after the rename`;
+    const cssVarRenames = [
+        {
+            tag: 'mds-banner',
+            from: 'mds-banner-gap',
+            to: 'mds-banner-content-gap',
+            valueFormatChanged: true,
+            note: 'v1 accepted a "row column" gap shorthand; v2 takes a single gap value',
+        },
+        {
+            tag: 'mds-file',
+            from: 'mds-file-preview-icon-bacground',
+            to: 'mds-file-preview-icon-background',
+        },
+        {
+            tag: 'mds-filter',
+            from: 'mds-filter-wrapper-shodow-opacity',
+            to: 'mds-filter-wrapper-shadow-opacity',
+        },
+        {
+            tag: 'mds-filter-item',
+            from: '-mds-filter-item-count-background-selected',
+            to: 'mds-filter-item-count-background-selected',
+            note: docOnlyNote('mds-filter-item-count-background-selected'),
+        },
+        {
+            tag: 'mds-filter-item',
+            from: '-mds-filter-item-count-color-default',
+            to: 'mds-filter-item-count-color-default',
+            note: docOnlyNote('mds-filter-item-count-color-default'),
+        },
+        {
+            tag: 'mds-filter-item',
+            from: '-mds-filter-item-count-color-selected',
+            to: 'mds-filter-item-count-color-selected',
+            note: docOnlyNote('mds-filter-item-count-color-selected'),
+        },
+        {
+            tag: 'mds-header',
+            from: 'mds-header-backdrop-filter',
+            to: 'mds-header-backdrop-blur-strength',
+            valueFormatChanged: true,
+            note: 'v1 took a full backdrop-filter value (e.g. blur(10px)); v2 takes the blur length only',
+        },
+        {
+            tag: 'mds-tab',
+            from: 'mds-tab-item-transition-duration',
+            to: 'mds-tab-transition-duration',
+            note: docOnlyNote('mds-tab-transition-duration'),
+        },
+        {
+            tag: 'mds-tab',
+            from: 'mds-tab-item-transition-timing-function',
+            to: 'mds-tab-transition-timing-function',
+            note: docOnlyNote('mds-tab-transition-timing-function'),
+        },
+        {
+            tag: 'mds-stepper-bar-item',
+            from: 'mds-stepper-bar-item-duaration',
+            to: 'mds-stepper-bar-item-duration',
+        },
+        {
+            tag: 'mds-video-wall',
+            from: 'mds-video-wall-noise-fitler',
+            to: 'mds-video-wall-noise-filter',
+        },
+    ];
+    for (const { tag, from, to, valueFormatChanged, note } of cssVarRenames) {
+        const component = m.components[tag];
+        if (!component)
+            continue;
+        // Drop the stale generated removal for either spelling: the docs diff
+        // recorded `--mds-video-wall-noise-filter` (the rename target) as removed
+        // while v2 still shipped the typo.
+        component.rules = component.rules.filter((r) => !(r.kind === 'cssVarRemove' && (r.name === from || r.name === to)));
+        component.rules.push({
+            kind: 'cssVarRename',
+            from,
+            to,
+            ...(valueFormatChanged ? { valueFormatChanged } : {}),
+            ...(note ? { note } : {}),
+        });
+    }
+    // G3 / A2 - global (non-component) CSS custom-property migrations for the
+    // semantic color system.
+    //  - Seed rename (A2): the bare `--tone-<family>` primitive became
+    //    `--tone-<family>-seed`. A consumer that referenced the bare token keeps
+    //    the pure-extreme value; a note points background users at a surface role.
+    //  - Surface-candidate reports: a neutral tone used as a *background* (the bare
+    //    token or any scale step) is a surface, but the exact role is contextual
+    //    (and often the component's own default, C2 territory), so it is REPORTED
+    //    for manual migration, never rewritten. In a background context the report
+    //    wins over the seed rename, so a background is never seed-renamed.
+    const toneFamilies = ['porcelain', 'kaolin', 'neutral', 'fireclay', 'bisque'];
+    const neutralSteps = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10'];
+    m.global.cssVars = [
+        ...toneFamilies.map((family) => ({
+            kind: 'cssVarRename',
+            from: `tone-${family}`,
+            to: `tone-${family}-seed`,
+            note: 'A2: the bare tone primitive is now the off-scale `-seed` escape hatch (the pure extreme); if it was used as a surface/background, migrate it to a `--magma-surface-*` role instead',
+        })),
+        { kind: 'cssVarSurfaceReport', from: 'tone-neutral' },
+        ...neutralSteps.map((step) => ({
+            kind: 'cssVarSurfaceReport',
+            from: `tone-neutral-${step}`,
+        })),
+    ];
+    // J — utility classes of the styles package (the Tailwind design-token
+    // contract) that changed between v1.12 and v2, verified value-by-value
+    // against the two token sets (box-shadow.json, border-radius.json vs
+    // radius.json, border.json, gap.json vs spacing.json). Renames are
+    // value-exact — the v2 class paints the same pixels; classes with no exact
+    // v2 token are report-only, with the nearest candidates named. Numeric steps
+    // (`p-400`, `gap-200`, `border-50`, …) kept their values everywhere, and the
+    // generic Tailwind 3 → 4 migration is Tailwind's business, not ours.
+    const classRenames = [];
+    const classReports = [];
+    // Shadows. The size scale slid one name down at the bottom (v1 `sm` is v2
+    // `xs`; v2 `DEFAULT`/`sharp` alias the old values, so bare `shadow` and
+    // `shadow-sharp` are unchanged), `inner` became `inset-sm`, and the neutral
+    // ring family `outline-*` was republished as `ring-*` (#641): the suffix is
+    // now the width in px, weak/base/strong is the alpha (0.15 / 0.3 / 0.6).
+    const shadowRenames = [
+        ['shadow-sm', 'shadow-xs'],
+        ['shadow-sm-sharp', 'shadow-xs-sharp'],
+        ['shadow-outline', 'shadow-ring'], // 1px @ 30%
+        ['shadow-outline-50', 'shadow-ring-2'], // 2px @ 30%
+        ['shadow-outline-light', 'shadow-ring-weak'], // 1px @ 15%
+        ['shadow-outline-light-50', 'shadow-ring-weak-2'], // 2px @ 15%
+        ['shadow-outline-strong-50', 'shadow-ring-strong-2'], // 2px @ 60%
+        ['shadow-outline-strong-100', 'shadow-ring-strong-4'], // 4px @ 60%
+    ];
+    for (const [from, to] of shadowRenames)
+        classRenames.push({ kind: 'classRename', from, to });
+    classRenames.push({
+        kind: 'classRename',
+        from: 'shadow-inner',
+        to: 'shadow-inset-sm',
+        note: 'v2 `shadow-inset-sm` adds a 1%-alpha inset hairline to the v1 `shadow-inner` value — visually equivalent',
+    });
+    // v1 ring width×alpha combos that were not republished (the `-75` = 3px step
+    // is gone entirely). `shadow-outline-strong` is the dangerous one: v2 reuses
+    // that exact name for an unrelated black composite shadow, so leaving it
+    // unchanged silently restyles the element.
+    const ringReports = [
+        [
+            'shadow-outline-75',
+            'the v1 3px @ 30% ring has no v2 token; nearest `shadow-ring-2` (2px @ 30%)',
+        ],
+        [
+            'shadow-outline-100',
+            'the v1 4px @ 30% ring has no v2 token; nearest `shadow-ring-strong-4` (4px @ 60%)',
+        ],
+        [
+            'shadow-outline-light-75',
+            'the v1 3px @ 15% ring has no v2 token; nearest `shadow-ring-weak-2` (2px @ 15%)',
+        ],
+        [
+            'shadow-outline-light-100',
+            'the v1 4px @ 15% ring has no v2 token; nearest `shadow-ring-weak-2` (2px @ 15%)',
+        ],
+        [
+            'shadow-outline-strong',
+            'v2 reuses this name for a different shadow (a black composite, not the neutral ring), so leaving it is a silent restyle; the v1 1px @ 60% ring has no v2 token — nearest `shadow-ring` (1px @ 30%) or `shadow-ring-strong-2` (2px @ 60%)',
+        ],
+        [
+            'shadow-outline-strong-75',
+            'the v1 3px @ 60% ring has no v2 token; nearest `shadow-ring-strong-2` (2px) or `shadow-ring-strong-4` (4px)',
+        ],
+    ];
+    for (const [name, message] of ringReports)
+        classReports.push({ kind: 'classReport', name, message });
+    // Radius. The scale was retuned: every v1 step except `sm` keeps its value
+    // under a new (smaller-sounding) name — DEFAULT 4px → `3xs`, md 6px → `2xs`,
+    // lg 8px → `xs`, xl 12px → `md`, 2xl 16px → `lg`, 3xl 24px → `2xl`
+    // (`rounded-none` / `rounded-full` are unchanged). Corner and side variants
+    // share the theme scale, so the map is expanded over every prefix. The
+    // lookup is single-pass, so `rounded-xl → rounded-md` never cascades into
+    // the `rounded-md → rounded-2xs` rule.
+    const roundedPrefixes = [
+        'rounded',
+        'rounded-s',
+        'rounded-e',
+        'rounded-t',
+        'rounded-r',
+        'rounded-b',
+        'rounded-l',
+        'rounded-ss',
+        'rounded-se',
+        'rounded-ee',
+        'rounded-es',
+        'rounded-tl',
+        'rounded-tr',
+        'rounded-br',
+        'rounded-bl',
+    ];
+    const radiusSteps = [
+        ['', '3xs'],
+        ['md', '2xs'],
+        ['lg', 'xs'],
+        ['xl', 'md'],
+        ['2xl', 'lg'],
+        ['3xl', '2xl'],
+    ];
+    for (const prefix of roundedPrefixes) {
+        for (const [from, to] of radiusSteps)
+            classRenames.push({
+                kind: 'classRename',
+                from: from === '' ? prefix : `${prefix}-${from}`,
+                to: `${prefix}-${to}`,
+            });
+        classReports.push({
+            kind: 'classReport',
+            name: `${prefix}-sm`,
+            message: `the v1 2px radius has no v2 step (the scale starts at 4px), and v2 reuses \`${prefix}-sm\` for 10px, so leaving it is a silent restyle; nearest \`${prefix}-3xs\` (4px), or keep 2px with the arbitrary \`${prefix}-[2px]\``,
+        });
+    }
+    // Border widths. The named steps were retuned (md 2px → 3px, lg 8px → 4px,
+    // xl 32px → 5px) but every v1 value survives: 2px under the new `sm` name,
+    // 8px and 32px under the numeric steps that kept their values.
+    const borderPrefixes = [
+        'border',
+        'border-x',
+        'border-y',
+        'border-s',
+        'border-e',
+        'border-t',
+        'border-r',
+        'border-b',
+        'border-l',
+    ];
+    const borderSteps = [
+        ['md', 'sm'],
+        ['lg', '200'],
+        ['xl', '800'],
+    ];
+    for (const prefix of borderPrefixes)
+        for (const [from, to] of borderSteps)
+            classRenames.push({ kind: 'classRename', from: `${prefix}-${from}`, to: `${prefix}-${to}` });
+    // Gap. The named steps moved from the gap-only scale to the global spacing
+    // scale with two casualties: the bare DEFAULT spelling (24px; v2 has no bare
+    // `gap` class — `gap-lg` is the same 24px) and `3xl` (80px in v1, 64px in
+    // v2 — the numeric `gap-2000` keeps 80px). Every other named step (`xs` …
+    // `2xl`) kept its value.
+    for (const prefix of ['gap', 'gap-x', 'gap-y']) {
+        classRenames.push({
+            kind: 'classRename',
+            from: prefix,
+            to: `${prefix}-lg`,
+            note: `bare \`${prefix}\` is assumed to be the Tailwind DEFAULT step (24px); if it is a hand-written class of your own, skip this rule with --skip global/classRename/${prefix}`,
+        });
+        classRenames.push({ kind: 'classRename', from: `${prefix}-3xl`, to: `${prefix}-2000` });
+    }
+    m.global.classes = [...classRenames, ...classReports];
+    // Behavior guard: v2 mds-dropdown enables auto-placement by default (v1 was
+    // off). Add `disable-auto-placement` to dropdowns that set neither prop, to
+    // preserve the v1 behavior. (mds-tooltip's auto-placement default did not
+    // flip, so no guard there.)
+    const dropdown = m.components['mds-dropdown'];
+    if (dropdown && !dropdown.rules.some((r) => r.kind === 'ensureAttr')) {
+        dropdown.rules.push({
+            kind: 'ensureAttr',
+            attr: { attr: 'disable-auto-placement', prop: 'disableAutoPlacement' },
+            unless: [
+                { attr: 'auto-placement', prop: 'autoPlacement' },
+                { attr: 'disable-auto-placement', prop: 'disableAutoPlacement' },
+            ],
+            confidence: 'review',
+            reason: 'v2 enables auto-placement by default (v1 was off); added disable-auto-placement to preserve v1 behavior',
+        });
+    }
+    // Behavior guards for flipped *visual* defaults (same prop, new default —
+    // invisible to the docs diff): v1 `mds-banner` defaulted to variant="light"
+    // (v2: primary) and v1 `mds-label` did not truncate (v2: word). Both v1
+    // values still exist in v2, so pinning them preserves the v1 look.
+    const visualGuards = [
+        {
+            tag: 'mds-banner',
+            attr: { attr: 'variant', prop: 'variant' },
+            value: 'light',
+            reason: 'v2 defaults variant to "primary" (v1 was "light"); added variant="light" to preserve the v1 look',
+        },
+        {
+            tag: 'mds-label',
+            attr: { attr: 'truncate', prop: 'truncate' },
+            value: 'none',
+            reason: 'v2 defaults truncate to "word" (v1 did not truncate); added truncate="none" to preserve the v1 behavior',
+        },
+    ];
+    for (const { tag, attr, value, reason } of visualGuards) {
+        const component = m.components[tag];
+        if (!component ||
+            component.rules.some((r) => r.kind === 'ensureAttr' && r.attr.prop === attr.prop))
+            continue;
+        component.rules.push({
+            kind: 'ensureAttr',
+            attr: { ...attr },
+            value,
+            unless: [{ ...attr }],
+            confidence: 'review',
+            reason,
+        });
+    }
+    // Behavior guard: `mds-push-notification-item.deletable` defaults to true in
+    // v1 but false in v2 (same name, no rename for the diff to see). Add
+    // `deletable` to items that never set it, to preserve the v1 behavior.
+    const pushItem = (m.components['mds-push-notification-item'] ??= {
+        tag: 'mds-push-notification-item',
+        react: 'MdsPushNotificationItem',
+        rules: [],
+    });
+    if (!pushItem.rules.some((r) => r.kind === 'ensureAttr')) {
+        pushItem.rules.push({
+            kind: 'ensureAttr',
+            attr: { attr: 'deletable', prop: 'deletable' },
+            unless: [{ attr: 'deletable', prop: 'deletable' }],
+            confidence: 'review',
+            reason: 'v2 defaults deletable to false (v1 was true); added deletable to preserve v1 behavior',
+        });
+    }
+    // K — mode vs theme (#702). v1 called the light / dark / system control
+    // `mds-pref-theme`; v2 calls it `mds-pref-mode` and gives `mds-pref-theme` to
+    // the named-theme chooser, which v1 never had (the v2 betas shipped it as
+    // `mds-pref-theme-variant`). Every rename below is applied in one pass by
+    // name as written, so the name the two share is never renamed twice.
+    const modeControl = (m.components['mds-pref-theme'] ??= {
+        tag: 'mds-pref-theme',
+        react: 'MdsPrefTheme',
+        rules: [],
+    });
+    const overlayProps = ['fadeout-duration', 'show-duration', 'z-index'];
+    // The docs diff saw the overlay properties as removals: they moved with the tag.
+    modeControl.rules = modeControl.rules.filter((r) => !(r.kind === 'cssVarRemove' &&
+        overlayProps.includes(r.name.replace('mds-pref-theme-overlay-', ''))));
+    modeControl.rules.push({ kind: 'tagRename', to: 'mds-pref-mode', toReact: 'MdsPrefMode' }, ...overlayProps.map((prop) => ({
+        kind: 'cssVarRename',
+        from: `mds-pref-theme-overlay-${prop}`,
+        to: `mds-pref-mode-overlay-${prop}`,
+    })));
+    // v2 beta names, for a page written against a beta: harmless on v1 code.
+    m.components['mds-pref-theme-variant'] ??= {
+        tag: 'mds-pref-theme-variant',
+        react: 'MdsPrefThemeVariant',
+        rules: [{ kind: 'tagRename', to: 'mds-pref-theme', toReact: 'MdsPrefTheme' }],
+    };
+    m.components['mds-pref-theme-variant-item'] ??= {
+        tag: 'mds-pref-theme-variant-item',
+        react: 'MdsPrefThemeVariantItem',
+        rules: [
+            { kind: 'tagRename', to: 'mds-pref-theme-item', toReact: 'MdsPrefThemeItem' },
+            ...['background', 'status-error', 'status-success', 'status-warning', 'variant-primary'].map((color) => ({
+                kind: 'cssVarRename',
+                from: `mds-pref-theme-variant-item-color-${color}`,
+                to: `mds-pref-theme-item-color-${color}`,
+            })),
+        ],
+    };
+    m.global.cssVars = [
+        ...(m.global.cssVars ?? []),
+        { kind: 'cssVarRename', from: 'magma-pref-theme', to: 'magma-pref-mode' },
+        { kind: 'cssVarRename', from: 'magma-pref-theme-name', to: 'magma-pref-theme' },
+    ];
+    // The mode classes on <html>: in markup (a server-rendered first paint) and
+    // in the consumer stylesheets that select them.
+    m.global.classes = [
+        ...(m.global.classes ?? []),
+        ...['light', 'dark', 'system'].map((mode) => ({
+            kind: 'classRename',
+            from: `pref-theme-${mode}`,
+            to: `pref-mode-${mode}`,
+            selectors: true,
+        })),
+        // the transition overlay the mode control appends to <body>
+        {
+            kind: 'classRename',
+            from: 'mds-pref-theme-overlay',
+            to: 'mds-pref-mode-overlay',
+            selectors: true,
+        },
+    ];
+    return m;
+};
+export const manifest = curate(generatedManifest);
+export default manifest;

package/dist/manifest/registry.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Deterministic name helpers and manifest accessors shared by the generator
+ * (which builds the manifest from `documentation.json`) and the transformers
+ * (which consume it).
+ */
+import { type ComponentManifest, type EnumRemapRule, type Manifest, type Rule, type TagRenameRule } from './schema.js';
+/** camelCase prop → kebab-case attribute: `autoPlacement` → `auto-placement`. */
+export declare const propToAttr: (prop: string) => string;
+/** kebab-case attribute → camelCase prop: `auto-placement` → `autoPlacement`. */
+export declare const attrToProp: (attr: string) => string;
+/** Custom-element tag → React component name: `mds-dropdown` → `MdsDropdown`. */
+export declare const tagToReactName: (tag: string) => string;
+/** Stencil event name → React handler prop: `mdsChange` → `onMdsChange`. */
+export declare const eventToReactProp: (event: string) => string;
+/** A stable identifier for a rule, used by `--only`/`--skip` and the report. */
+export declare const ruleId: (tag: string, rule: Rule) => string;
+export declare const getByTag: (manifest: Manifest, tag: string) => ComponentManifest | undefined;
+export declare const getByReactName: (manifest: Manifest, react: string) => ComponentManifest | undefined;
+/**
+ * The effective rule list for a component: the global per-component rules
+ * (currently `tone`) resolved against this component, followed by its own
+ * rules. Global `tone` only materialises for components that declare the
+ * referenced v2 enum set.
+ *
+ * Note: `removeDefaultSlot` is intentionally *not* expanded here — `slot="default"`
+ * lives on the projected child (any tag), not on the `mds-*` element, so each
+ * surface applies it globally by reading `manifest.global.removeDefaultSlot`.
+ */
+export declare const rulesForComponent: (manifest: Manifest, component: ComponentManifest) => Rule[];
+/** Resolve the v2 enum set referenced by an `enumRemap` rule, if any. */
+export declare const v2SetFor: (component: ComponentManifest, rule: EnumRemapRule) => readonly string[] | undefined;
+export declare const tagRenamesOf: (manifest: Manifest) => Map<string, TagRenameRule>;