@scattered-light/loomiere 0.0.0-stage → 0.1.0

package/exporters/mui.mjs

@@ -0,0 +1,666 @@
+/**
+ * MUI (Material UI 6, 7 and 9) theme options: the palette for MUI's own color math, plus
+ * component overrides that give MUI's components the same look as loomiere-base-ui: Button
+ * variants are the brand's emphasis levels, inputs are the field concept, menus are popups
+ * and rows, and so on. Overrides read the theme's --sl- variables, so load tokens.css too.
+ *   import { createTheme, ThemeProvider } from '@mui/material/styles';
+ *   import options from './theme/exports/mui.js';
+ *   const theme = createTheme(options);
+ */
+import { px } from './theme.mjs';
+import { raw, styleKit, toSource } from './component-styles.mjs';
+
+const MUI_GREYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+/** MUI typography variant → text style. */
+const TYPE = {
+  h1: 'maximize-4xl',
+  h2: 'maximize-3xl',
+  h3: 'maximize-2xl',
+  h4: 'maximize-xl',
+  h5: 'maximize-lg',
+  h6: 'maximize-md',
+  subtitle1: 'magnify',
+  subtitle2: 'base-label',
+  body1: 'base',
+  body2: 'condense',
+  caption: 'minimize',
+  button: 'base-trigger',
+  overline: 'condense-subtitle-label',
+};
+/** MUI size → control tier. */
+const SIZE = { small: 'sm', medium: 'md', large: 'lg' };
+/** Button variant → emphasis level, as data-variant does for the Base UI Button. */
+const VARIANT_LEVEL = { contained: 'bold', outlined: 'standard', text: 'quiet' };
+const STATUS = ['error', 'warning', 'info', 'success'];
+
+/** The checkbox and radio drawn the way loomiere-base-ui draws them (MUI's own are icon fonts in SVG). */
+const ICONS = `const check = (mark) => h('span', { className: 'LoomiereCheck', 'aria-hidden': true }, mark);
+const svg = (child) => h('svg', { viewBox: '0 0 10 10', className: 'LoomiereCheckMark' }, child);
+const icons = {
+  checkbox: check(null),
+  checkboxChecked: check(svg(h('path', { fill: 'currentColor', d: 'M9.16 1.122a.75.75 0 0 1 .218 1.038L5.136 8.66a.75.75 0 0 1-1.13.146L1.247 6.308a.75.75 0 1 1 1.006-1.113l2.108 1.91L8.123 1.34a.75.75 0 0 1 1.037-.218Z' }))),
+  checkboxIndeterminate: check(svg(h('path', { d: 'M1.5 5h7', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' }))),
+  radio: h('span', { className: 'LoomiereRadio', 'aria-hidden': true }),
+  radioChecked: h('span', { className: 'LoomiereRadio', 'data-checked': '', 'aria-hidden': true }),
+};`;
+
+export default {
+  id: 'mui',
+  name: 'MUI (Material UI)',
+  file: 'mui.js',
+  for: 'React apps on @mui/material 6, 7 or 9: pass to createTheme(), and load tokens.css.',
+  build(theme) {
+    const { scopes, palettes, roles } = theme;
+    const k = styleKit(theme.prefix ?? 'sl', roles);
+    const { v, text } = k;
+
+    // MUI's palette: real colors, which MUI's own color math (alpha, channels) needs.
+    const color = (name, mode) => {
+      const s = scopes[name]?.[mode];
+      if (!s) return undefined;
+      return { main: s.solid, light: s['solid-hover'], dark: s['solid-active'], contrastText: s['on-solid'] };
+    };
+    // MUI's secondary is the next brand color that isn't the accent.
+    const secondary = ['secondary', 'primary', 'tertiary'].find((p) => p !== roles.accent && scopes[p]) ?? 'chrome';
+    const palette = (mode) => {
+      const m = theme.modes[mode];
+      const chrome = scopes.chrome[mode];
+      return {
+        primary: color('accent', mode),
+        secondary: color(secondary, mode),
+        ...Object.fromEntries(STATUS.filter((p) => scopes[p]).map((p) => [p, color(p, mode)])),
+        grey: Object.fromEntries(MUI_GREYS.map((s) => [s, palettes[roles.chrome][s]]).filter(([, x]) => x)),
+        background: { default: m.bg, paper: m.raised },
+        text: { primary: m.text, secondary: m.textMuted, disabled: m.textDisabled },
+        divider: m.border,
+        action: { hover: chrome.soft, selected: chrome['soft-hover'], focus: chrome['soft-active'] },
+      };
+    };
+
+    /** MUI color prop → palette scope. "primary" (MUI's default) keeps each level's own color. */
+    const COLOR_SCOPE = { primary: undefined, secondary, inherit: 'chrome', ...Object.fromEntries(STATUS.filter((p) => scopes[p]).map((p) => [p, p])) };
+    const gaugeColor = (c) => (c === 'primary' ? 'accent' : COLOR_SCOPE[c]);
+
+    const buttonLevel = (level, palette) => {
+      const e = k.emphasis(level, palette);
+      const rest = { background: e.bg, color: e.fg, borderColor: e.border };
+      return {
+        ...rest,
+        '&:hover': { background: e['bg-hover'], borderColor: e['border-hover'] },
+        '&:active': { background: e['bg-active'] },
+        '&.Mui-focusVisible': {
+          outline: `${v('a11y-focus-outline-width')} solid ${e.focus}`,
+          outlineOffset: v('a11y-focus-outline-offset'),
+          boxShadow: `0 0 0 ${v('focus-halo-spread')} ${e.halo}`,
+        },
+        '&.Mui-disabled': { ...rest, opacity: v('button-opacity-disabled') },
+      };
+    };
+    const sizeVariants = (fn) => Object.entries(SIZE).map(([size, tier]) => ({ props: { size }, style: fn(tier) }));
+
+    const field = (tier) => ({
+      [`& .MuiInputBase-input`]: {
+        boxSizing: 'border-box',
+        height: v(`control-height-${tier}`),
+        paddingBlock: 0,
+        paddingInline: v(`control-padding-inline${tier === 'md' ? '' : `-${tier}`}`),
+      },
+      ...text(tier === 'sm' ? 'condense' : tier === 'lg' ? 'magnify' : 'base'),
+    });
+
+    const components = {
+      MuiButtonBase: { defaultProps: { disableRipple: true } },
+
+      MuiButton: {
+        defaultProps: { disableElevation: true },
+        styleOverrides: {
+          root: {
+            ...k.control('md', { trigger: true }),
+            minWidth: 0,
+            textTransform: 'none',
+            border: `${v('stroke-default')} solid transparent`,
+            borderRadius: v('button-radius'),
+            boxShadow: 'none',
+            transition: v('transition-button'),
+            '&:hover': { boxShadow: 'none' },
+            '& svg': { width: k.iconSize('md'), height: k.iconSize('md') },
+            '& .MuiButton-startIcon, & .MuiButton-endIcon': { margin: 0 },
+            variants: [
+              ...Object.entries(VARIANT_LEVEL).flatMap(([variant, level]) =>
+                Object.entries(COLOR_SCOPE).map(([c, palette]) => ({ props: { variant, color: c }, style: buttonLevel(level, palette) })),
+              ),
+              ...sizeVariants((tier) => ({ ...k.control(tier, { trigger: true }), '& svg': { width: k.iconSize(tier), height: k.iconSize(tier) } })),
+            ],
+          },
+        },
+      },
+
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            ...k.iconButton,
+            '&:hover': k.iconButtonHover,
+            '&.Mui-focusVisible': k.focusRingInset,
+          },
+        },
+      },
+
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            ...k.control('md', { trigger: true }),
+            textTransform: 'none',
+            color: v('text-primary'),
+            background: v('surface-base'),
+            border: `${v('stroke-default')} solid ${v('border-default')}`,
+            borderRadius: v('radius-chrome'),
+            transition: v('transition-button'),
+            '&:hover': { background: v('surface-raised'), borderColor: v('border-strong') },
+            '&.Mui-selected, &.Mui-selected:hover': { color: v('interactive-default'), borderColor: v('border-accent') },
+            '&.Mui-selected': { background: v('interactive-tint-hover') },
+            '&.Mui-selected:hover': { background: v('interactive-tint-strong') },
+            '&.Mui-focusVisible': k.focusRing,
+            '&.Mui-disabled': { opacity: v('toggle-opacity-disabled'), color: v('text-primary') },
+            variants: sizeVariants((tier) => ({ ...k.control(tier, { trigger: true }), borderRadius: v(tier === 'sm' ? 'radius-item' : tier === 'lg' ? 'radius-surface' : 'radius-chrome') })),
+          },
+        },
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: { ...k.barSurface, display: 'inline-flex' },
+          grouped: {
+            margin: 0,
+            borderRadius: v('radius-item'),
+            '&:not(:first-of-type)': { marginLeft: 0, borderLeft: `${v('stroke-default')} solid ${v('border-default')}`, borderRadius: v('radius-item') },
+            '&:not(:last-of-type)': { borderRadius: v('radius-item') },
+          },
+        },
+      },
+
+      // Fields: the label sits above the control, as in Base UI, so it never notches the border.
+      MuiFormControl: { styleOverrides: { root: { gap: 0 } } },
+      MuiInputLabel: {
+        defaultProps: { shrink: true },
+        styleOverrides: {
+          root: {
+            ...text('base-label'),
+            position: 'relative',
+            transform: 'none',
+            maxWidth: 'none',
+            // FieldRoot's gap plus the label's own spacing.
+            marginBottom: `calc(${v('field-gap')} + ${v('field-label-spacing')})`,
+            color: v('text-primary'),
+            '&.Mui-focused, &.Mui-error': { color: v('text-primary') },
+            // A disabled field fades as a whole, as a disabled Base UI Field.Root does.
+            '&.Mui-disabled': { color: v('text-primary'), opacity: v('field-opacity-disabled') },
+          },
+        },
+      },
+      MuiFormLabel: {
+        styleOverrides: {
+          root: {
+            ...text('base-label'),
+            color: v('text-primary'),
+            '&.Mui-focused, &.Mui-error': { color: v('text-primary') },
+            '&.Mui-disabled': { color: v('text-disabled') },
+          },
+        },
+      },
+      MuiFormHelperText: {
+        styleOverrides: {
+          root: {
+            ...text('condense'),
+            margin: `calc(${v('field-gap')} + ${v('field-message-spacing')}) 0 0`,
+            color: v('text-secondary'),
+            '&.Mui-error': { ...text('base-label'), color: v('status-error') },
+          },
+        },
+      },
+      MuiInputBase: {
+        styleOverrides: {
+          root: { ...text('base'), color: v('field-color') },
+          input: { '&::placeholder': k.fieldStates.placeholder, '&.Mui-disabled': { WebkitTextFillColor: v('field-color-disabled') } },
+        },
+      },
+      MuiOutlinedInput: {
+        defaultProps: { notched: false },
+        styleOverrides: {
+          root: {
+            background: v('field-background'),
+            borderRadius: v('field-radius'),
+            transition: v('field-transition'),
+            '& .MuiOutlinedInput-notchedOutline': { top: 0, borderWidth: v('field-border-width'), borderColor: v('field-border-color'), '& legend': { display: 'none' } },
+            '&:hover:not(.Mui-focused):not(.Mui-disabled):not(.Mui-error) .MuiOutlinedInput-notchedOutline': k.fieldStates.hover,
+            '&.Mui-focused': { boxShadow: v('field-shadow-focus') },
+            '&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderWidth: v('field-border-width'), borderColor: v('field-border-color-focus') },
+            '&.Mui-error .MuiOutlinedInput-notchedOutline': k.fieldStates.error,
+            '&.Mui-error.Mui-focused': { boxShadow: v('field-shadow-focus-error') },
+            '&.Mui-disabled': { background: v('field-background-disabled'), color: v('field-color-disabled'), opacity: v('field-opacity-disabled') },
+            '&.Mui-disabled .MuiOutlinedInput-notchedOutline': { borderColor: v('field-border-color') },
+            ...field('md'),
+            '&.MuiInputBase-multiline': { padding: 0 },
+            '& .MuiInputBase-inputMultiline': { height: 'auto', minHeight: '80px', paddingBlock: v('control-padding-block') },
+            '&.MuiInputBase-adornedStart': { paddingLeft: v('control-padding-inline') },
+            '&.MuiInputBase-adornedStart .MuiInputBase-input': { paddingLeft: 0 },
+            '&.MuiInputBase-adornedEnd': { paddingRight: v('control-padding-inline') },
+            '&.MuiInputBase-adornedEnd .MuiInputBase-input': { paddingRight: 0 },
+            variants: [{ props: { size: 'small' }, style: field('sm') }],
+          },
+        },
+      },
+      MuiSelect: {
+        styleOverrides: {
+          select: { display: 'flex', alignItems: 'center' },
+          icon: { color: v('text-tertiary'), right: v('control-padding-inline') },
+        },
+      },
+      MuiInputAdornment: { styleOverrides: { root: { color: v('text-tertiary') } } },
+
+      // Popups and rows.
+      MuiPaper: { styleOverrides: { root: { backgroundImage: 'none' } } },
+      MuiPopover: { styleOverrides: { paper: k.popupSurface } },
+      MuiMenu: {
+        styleOverrides: {
+          paper: { ...k.popupSurface, minWidth: v('popup-min-width') },
+          list: { padding: v('popup-padding') },
+        },
+      },
+      MuiList: { styleOverrides: { root: { '.MuiPopover-paper > &': { padding: v('popup-padding') } } } },
+      MuiMenuItem: {
+        styleOverrides: {
+          root: {
+            ...k.itemRow,
+            '&:hover, &.Mui-focusVisible': k.itemStates.hover,
+            '&.Mui-selected': k.itemStates.selected,
+            '&.Mui-selected:hover, &.Mui-selected.Mui-focusVisible': { ...k.itemStates.selected, background: v('item-background-selected') },
+            '&.Mui-disabled': { ...k.itemStates.disabled, opacity: v('item-opacity-disabled') },
+            '& .MuiListItemIcon-root': { minWidth: 0, color: v('item-indicator-color') },
+            // Menu rows are the dense rows of a Base UI Menu.
+            '.MuiMenu-list > &': { paddingBlock: v('item-padding-block-dense') },
+          },
+        },
+      },
+      MuiListSubheader: { styleOverrides: { root: { ...k.groupLabel, margin: 0, lineHeight: v('font-condense-subtitle-label-line-height') } } },
+      MuiDivider: {
+        styleOverrides: {
+          root: {
+            borderColor: v('border-default'),
+            '.MuiMenu-list > &, .MuiAutocomplete-listbox > &': { margin: `${v('popup-separator-spacing')} 0`, borderColor: v('popup-separator-color') },
+          },
+        },
+      },
+      MuiAutocomplete: {
+        styleOverrides: {
+          inputRoot: { '&.MuiOutlinedInput-root': { paddingBlock: 0, paddingLeft: v('control-padding-inline') }, '& .MuiAutocomplete-input': { paddingInline: 0 } },
+          paper: { ...k.popupSurface, borderRadius: v('popup-radius-field'), marginTop: v('space-1') },
+          listbox: { padding: v('popup-padding'), maxHeight: v('popup-list-max-height') },
+          option: {
+            ...k.itemRow,
+            '&.Mui-focused': k.itemStates.hover,
+            '&[aria-selected="true"], &[aria-selected="true"].Mui-focused': k.itemStates.selected,
+            '&[aria-disabled="true"]': k.itemStates.disabled,
+          },
+          groupLabel: { ...k.groupLabel, lineHeight: v('font-condense-subtitle-label-line-height') },
+          noOptions: { ...text('condense'), color: v('text-tertiary'), textAlign: 'center', paddingBlock: v('popup-empty-padding-block') },
+          clearIndicator: { ...k.iconButton, '&:hover': k.iconButtonHover },
+          popupIndicator: { color: v('text-tertiary') },
+          tag: { margin: v('space-0-5') },
+        },
+      },
+
+      // Checks: the box, the radio circle and the switch track of loomiere-base-ui.
+      MuiFormControlLabel: {
+        styleOverrides: {
+          root: {
+            gap: v('gap-control'),
+            marginLeft: 0,
+            marginRight: 0,
+            color: v('text-primary'),
+            '&.Mui-disabled': { cursor: 'not-allowed' },
+            // A switch's label uses the label style, as SwitchLabel does.
+            '&:has(.MuiSwitch-root) .MuiFormControlLabel-label': text('base-label'),
+          },
+          label: { ...text('base'), '&.Mui-disabled': { color: v('text-disabled') } },
+          // A switch's label is the label style, as SwitchLabel is.
+
+        },
+      },
+      MuiCheckbox: {
+        defaultProps: { icon: raw('icons.checkbox'), checkedIcon: raw('icons.checkboxChecked'), indeterminateIcon: raw('icons.checkboxIndeterminate') },
+        styleOverrides: {
+          root: {
+            '--loomiere-check-size': k.iconSize('md'),
+            '--loomiere-mark-size': v('icon-size-condense'),
+            padding: 0,
+            color: 'inherit',
+            '&:hover': { background: 'transparent' },
+            '& .LoomiereCheck': { ...k.checkBox, width: 'var(--loomiere-check-size)', height: 'var(--loomiere-check-size)', borderRadius: v('check-radius') },
+            '& .LoomiereCheckMark': { display: 'block', width: 'var(--loomiere-mark-size)', height: 'var(--loomiere-mark-size)' },
+            '&:hover .LoomiereCheck': k.checkStates.hover,
+            '&.Mui-checked .LoomiereCheck, &.MuiCheckbox-indeterminate .LoomiereCheck': k.checkStates.checked,
+            '&.Mui-focusVisible .LoomiereCheck': k.focusRing,
+            '&.Mui-disabled .LoomiereCheck': k.checkStates.disabled,
+            variants: [
+              { props: { size: 'small' }, style: { '--loomiere-check-size': k.iconSize('sm'), '--loomiere-mark-size': v('icon-size-minimize') } },
+              { props: { size: 'large' }, style: { '--loomiere-check-size': k.iconSize('lg'), '--loomiere-mark-size': v('icon-size-base') } },
+            ],
+          },
+        },
+      },
+      MuiRadio: {
+        defaultProps: { icon: raw('icons.radio'), checkedIcon: raw('icons.radioChecked') },
+        styleOverrides: {
+          root: {
+            '--loomiere-check-size': k.iconSize('md'),
+            padding: 0,
+            color: 'inherit',
+            '&:hover': { background: 'transparent' },
+            '& .LoomiereRadio': { ...k.checkBox, width: 'var(--loomiere-check-size)', height: 'var(--loomiere-check-size)', borderRadius: v('radius-pill') },
+            '& .LoomiereRadio[data-checked]': k.checkStates.checked,
+            '& .LoomiereRadio[data-checked]::before': {
+              content: '""',
+              width: `round(var(--loomiere-check-size) * ${v('check-dot-scale')}, 1px)`,
+              height: `round(var(--loomiere-check-size) * ${v('check-dot-scale')}, 1px)`,
+              borderRadius: v('radius-pill'),
+              background: v('check-mark-color'),
+            },
+            '&:hover .LoomiereRadio:not([data-checked])': k.checkStates.hover,
+            '&.Mui-focusVisible .LoomiereRadio': k.focusRing,
+            '&.Mui-disabled .LoomiereRadio': k.checkStates.disabled,
+            variants: [
+              { props: { size: 'small' }, style: { '--loomiere-check-size': k.iconSize('sm') } },
+              { props: { size: 'large' }, style: { '--loomiere-check-size': k.iconSize('lg') } },
+            ],
+          },
+        },
+      },
+      MuiRadioGroup: { styleOverrides: { root: { gap: v('gap-stack-sm') } } },
+      MuiSwitch: {
+        styleOverrides: {
+          root: {
+            '--loomiere-switch-width': v('switch-track-width'),
+            '--loomiere-switch-height': v('switch-track-height'),
+            '--loomiere-switch-text': v('switch-track-text-font-size'),
+            width: 'var(--loomiere-switch-width)',
+            height: 'var(--loomiere-switch-height)',
+            padding: 0,
+            overflow: 'visible',
+            variants: [
+              { props: { size: 'small' }, style: { '--loomiere-switch-width': v('switch-track-width-sm'), '--loomiere-switch-height': v('switch-track-height-sm'), '--loomiere-switch-text': v('switch-track-text-font-size-sm') } },
+            ],
+          },
+          switchBase: {
+            padding: `calc(${v('switch-track-padding')} + ${v('check-border-width')})`,
+            '&:hover': { background: 'transparent' },
+            '&.Mui-checked': { transform: 'translateX(calc(var(--loomiere-switch-width) - var(--loomiere-switch-height)))' },
+            '&.Mui-checked + .MuiSwitch-track': { opacity: 1, background: v('check-background-checked'), borderColor: v('check-border-color-checked') },
+            '&.Mui-checked + .MuiSwitch-track::before': { content: '"on"', right: 'auto', left: v('switch-track-padding'), color: v('check-mark-color') },
+            '&:hover:not(.Mui-disabled):not(.Mui-checked) + .MuiSwitch-track': { background: v('fill-strong') },
+            '&.Mui-checked:hover:not(.Mui-disabled) + .MuiSwitch-track': { background: v('interactive-hover') },
+            '&.Mui-focusVisible + .MuiSwitch-track': k.focusRing,
+            '&.Mui-disabled + .MuiSwitch-track': { opacity: v('check-opacity-disabled') },
+            '&.Mui-disabled .MuiSwitch-thumb': { color: v('check-background') },
+          },
+          thumb: {
+            width: `calc(var(--loomiere-switch-height) - 2 * (${v('switch-track-padding')} + ${v('check-border-width')}))`,
+            height: `calc(var(--loomiere-switch-height) - 2 * (${v('switch-track-padding')} + ${v('check-border-width')}))`,
+            color: v('check-background'),
+            boxShadow: v('elevation-sm'),
+          },
+          track: {
+            position: 'relative',
+            boxSizing: 'border-box',
+            opacity: 1,
+            borderRadius: v('radius-pill'),
+            background: v('fill-default'),
+            border: `${v('check-border-width')} solid ${v('check-border-color')}`,
+            transition: `background-color ${v('duration-normal')} ${v('easing-in-out')}`,
+            '&::before': {
+              ...text('condense-subtitle-label'),
+              content: '"off"',
+              position: 'absolute',
+              insetBlock: 0,
+              right: v('switch-track-padding'),
+              width: 'calc(var(--loomiere-switch-width) - var(--loomiere-switch-height))',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 'var(--loomiere-switch-text)',
+              lineHeight: 1,
+              color: v('text-secondary'),
+            },
+          },
+        },
+      },
+      MuiSlider: {
+        styleOverrides: {
+          root: {
+            '--loomiere-fill': v('scope-solid'),
+            '--loomiere-halo': v('scope-soft-hover'),
+            '--loomiere-halo-active': v('scope-soft-active'),
+            height: v('gauge-height-sm'),
+            padding: `calc(${v('slider-thumb-size')} / 2) 0`,
+            color: 'var(--loomiere-fill)',
+            '&.Mui-disabled': { opacity: v('check-opacity-disabled'), color: 'var(--loomiere-fill)' },
+            variants: Object.entries(COLOR_SCOPE).map(([c]) => ({
+              props: { color: c },
+              style: { '--loomiere-fill': k.scope(gaugeColor(c) ?? 'accent', 'solid'), '--loomiere-halo': k.scope(gaugeColor(c) ?? 'accent', 'soft-hover'), '--loomiere-halo-active': k.scope(gaugeColor(c) ?? 'accent', 'soft-active') },
+            })),
+          },
+          rail: { opacity: 1, background: v('gauge-track-color'), borderRadius: v('gauge-radius') },
+          track: { border: 'none', background: 'var(--loomiere-fill)', borderRadius: v('gauge-radius') },
+          thumb: {
+            width: v('slider-thumb-size'),
+            height: v('slider-thumb-size'),
+            boxSizing: 'border-box',
+            background: v('field-background'),
+            border: `${v('stroke-emphasis')} solid var(--loomiere-fill)`,
+            boxShadow: 'none',
+            transition: `box-shadow ${v('duration-normal')} ${v('easing-default')}`,
+            '&::before': { boxShadow: 'none' },
+            '&:hover': { boxShadow: `0 0 0 ${v('focus-halo-spread')} var(--loomiere-halo)` },
+            '&.Mui-focusVisible': k.focusRing,
+            '&.Mui-active': { boxShadow: `0 0 0 calc(${v('focus-halo-spread')} * 1.5) var(--loomiere-halo-active)` },
+          },
+          mark: { width: v('stroke-emphasis'), height: `calc(${v('gauge-height-sm')} * 2)`, background: v('fill-strong'), borderRadius: v('radius-pill') },
+          markActive: { background: v('fill-strong'), opacity: 1 },
+          valueLabel: { ...text('condense'), background: v('surface-inverse'), color: v('text-on-inverse-surface'), borderRadius: v('radius-chrome') },
+        },
+      },
+
+      // Disclosure.
+      MuiTabs: {
+        styleOverrides: {
+          root: { minHeight: 0, borderBottom: `${v('stroke-default')} solid ${v('disclosure-divider-color')}` },
+          indicator: { height: v('disclosure-indicator-width'), background: v('disclosure-indicator-color') },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            ...text('base'),
+            textTransform: 'none',
+            minHeight: 0,
+            minWidth: 0,
+            padding: `${v('space-2')} ${v('space-4')}`,
+            color: v('text-secondary'),
+            opacity: 1,
+            transition: v('transition-button'),
+            '&:hover:not(.Mui-disabled)': { color: v('text-primary'), background: v('disclosure-trigger-background-hover') },
+            '&.Mui-selected': { ...text('base-selected'), color: v('disclosure-selected-color') },
+            '&.Mui-focusVisible': k.focusRingInset,
+            '&.Mui-disabled': { color: v('text-disabled'), opacity: v('disclosure-opacity-disabled') },
+          },
+        },
+      },
+      MuiAccordion: {
+        defaultProps: { disableGutters: true, elevation: 0, square: true },
+        styleOverrides: {
+          root: {
+            background: 'transparent',
+            color: v('text-primary'),
+            borderBottom: `${v('stroke-default')} solid ${v('disclosure-divider-color')}`,
+            '&::before': { display: 'none' },
+            '&:last-of-type': { borderBottom: 'none' },
+            '&.Mui-disabled': { background: 'transparent' },
+          },
+        },
+      },
+      MuiAccordionSummary: {
+        styleOverrides: {
+          root: {
+            ...text('maximize-md'),
+            gap: v('space-4'),
+            minHeight: 0,
+            padding: `${v('space-4')} ${v('space-6')}`,
+            transition: `background-color ${v('disclosure-animation-duration')} ${v('disclosure-animation-easing')}`,
+            '&:hover:not(.Mui-disabled)': { background: v('disclosure-trigger-background-hover') },
+            '&:active:not(.Mui-disabled)': { background: v('disclosure-trigger-background-active') },
+            '&.Mui-focusVisible': { ...k.focusRingInset, background: 'transparent', borderRadius: v('radius-item') },
+            '&.Mui-disabled': { opacity: v('disclosure-opacity-disabled') },
+          },
+          content: { margin: 0, '&.Mui-expanded': { margin: 0 } },
+          expandIconWrapper: { color: v('disclosure-icon-color') },
+        },
+      },
+      MuiAccordionDetails: { styleOverrides: { root: { ...text('base'), padding: `0 ${v('space-6')} ${v('space-4')}`, color: v('disclosure-content-color') } } },
+
+      // Overlays.
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            ...text('condense'),
+            maxWidth: v('tooltip-max-width'),
+            padding: `${v('space-1-5')} ${v('space-2-5')}`,
+            borderRadius: v('radius-chrome'),
+            background: v('surface-inverse'),
+            color: v('text-on-inverse-surface'),
+            boxShadow: v('popup-shadow'),
+          },
+          arrow: { color: v('surface-inverse') },
+        },
+      },
+      MuiBackdrop: { styleOverrides: { root: { variants: [{ props: { invisible: false }, style: { background: v('modal-backdrop') } }] } } },
+      MuiDialog: {
+        styleOverrides: {
+          paper: { ...k.modalSurface, width: v('modal-width'), maxWidth: v('modal-max-width'), maxHeight: v('modal-max-height'), margin: v('space-4') },
+        },
+      },
+      MuiDialogTitle: { styleOverrides: { root: { ...text('maximize-xl'), padding: 0, color: v('modal-title-color') } } },
+      MuiDialogContent: { styleOverrides: { root: { padding: 0, '.MuiDialogTitle-root + &': { paddingTop: 0 } } } },
+      MuiDialogContentText: { styleOverrides: { root: { ...text('base'), color: v('modal-description-color') } } },
+      MuiDialogActions: {
+        styleOverrides: { root: { padding: 0, gap: v('modal-actions-gap'), marginTop: v('modal-actions-spacing'), '& > :not(style) ~ :not(style)': { marginLeft: 0 } } },
+      },
+      MuiDrawer: {
+        styleOverrides: { paper: { background: v('modal-background'), color: v('text-primary'), borderColor: v('modal-border-color'), boxShadow: v('modal-shadow'), backgroundImage: 'none' } },
+      },
+
+      // Feedback.
+      MuiSnackbarContent: { styleOverrides: { root: { ...k.popupSurface, ...text('base'), padding: v('notice-padding') } } },
+      MuiAlert: {
+        styleOverrides: {
+          root: {
+            ...text('base'),
+            padding: v('notice-padding'),
+            gap: v('notice-gap'),
+            borderRadius: v('popup-radius'),
+            border: `${v('popup-border-width')} solid transparent`,
+            '& .MuiAlert-icon': { padding: 0, marginRight: 0, opacity: 1, color: 'inherit' },
+            '& .MuiAlert-message': { padding: 0 },
+            '& .MuiAlert-action': { paddingTop: 0 },
+            variants: STATUS.filter((p) => scopes[p]).flatMap((s) => [
+              { props: { severity: s, variant: 'standard' }, style: { background: k.scope(s, 'soft'), borderColor: k.scope(s, 'border'), color: k.scope(s, 'on-soft') } },
+              { props: { severity: s, variant: 'outlined' }, style: { background: 'transparent', borderColor: k.scope(s, 'border'), color: k.scope(s, 'fg') } },
+              { props: { severity: s, variant: 'filled' }, style: { background: k.scope(s, 'solid'), borderColor: k.scope(s, 'solid'), color: k.scope(s, 'on-solid') } },
+            ]),
+          },
+        },
+      },
+      MuiAlertTitle: { styleOverrides: { root: { ...text('maximize-md'), margin: `0 0 ${v('notice-text-gap')}` } } },
+      MuiLinearProgress: {
+        styleOverrides: {
+          root: {
+            height: v('gauge-height'),
+            borderRadius: v('gauge-radius'),
+            background: v('gauge-track-color'),
+            variants: Object.keys(COLOR_SCOPE).map((c) => ({ props: { color: c }, style: { '--loomiere-fill': k.scope(gaugeColor(c) ?? 'accent', 'solid'), background: v('gauge-track-color') } })),
+          },
+          bar: { background: 'var(--loomiere-fill)', borderRadius: v('gauge-radius') },
+        },
+      },
+      MuiCircularProgress: {
+        styleOverrides: {
+          root: { variants: Object.keys(COLOR_SCOPE).map((c) => ({ props: { color: c }, style: { color: k.scope(gaugeColor(c) ?? 'accent', 'solid') } })) },
+        },
+      },
+
+      // Display.
+      MuiAvatar: {
+        styleOverrides: {
+          root: {
+            ...text('maximize-md'),
+            width: v('avatar-size-md'),
+            height: v('avatar-size-md'),
+            boxSizing: 'border-box',
+            border: `${v('stroke-emphasis')} solid ${v('surface-canvas')}`,
+            boxShadow: v('elevation-sm'),
+            textTransform: 'uppercase',
+          },
+          colorDefault: { background: v('scope-solid'), color: v('scope-on-solid') },
+        },
+      },
+      MuiAvatarGroup: { styleOverrides: { avatar: { border: `${v('stroke-emphasis')} solid ${v('surface-canvas')}`, boxSizing: 'border-box' } } },
+      MuiTableCell: {
+        styleOverrides: {
+          root: { ...text('condense'), color: v('table-color'), borderBottom: `${v('stroke-default')} solid ${v('table-row-border-color')}`, paddingInline: v('table-cell-padding-inline') },
+          head: { ...text('base-label'), background: v('table-header-background'), color: v('table-header-color') },
+        },
+      },
+      MuiTableRow: { styleOverrides: { root: { '&.MuiTableRow-hover:hover': { background: v('table-row-hover') }, '&.Mui-selected, &.Mui-selected:hover': { background: v('table-row-selected') } } } },
+    };
+
+    const options = {
+      cssVariables: { colorSchemeSelector: 'data-theme' },
+      colorSchemes: { light: { palette: palette('light') }, dark: { palette: palette('dark') } },
+      shape: { borderRadius: px(theme.radii.md) ?? 6 },
+      spacing: px(theme.space['1']) ?? 4,
+      typography: {
+        fontFamily: theme.fonts.body,
+        ...Object.fromEntries(Object.entries(TYPE).map(([variant, style]) => [variant, text(style)])),
+        button: { ...text('base-trigger'), textTransform: 'none' },
+      },
+      components,
+    };
+
+    const js = `/**
+ * MUI theme options for "${theme.brand}". Generated by loomiere build; do not edit.
+ * Works with @mui/material 6, 7 and 9. Load the theme's tokens.css as well: the component
+ * overrides read its --${theme.prefix ?? 'sl'}- variables, so they match loomiere-base-ui in light and dark.
+ *
+ *   import './tokens.css';
+ *   import { createTheme, ThemeProvider } from '@mui/material/styles';
+ *   import options from './mui.js';
+ *   const theme = createTheme(options);
+ *
+ * Dark mode: MUI writes data-theme="dark" on <html>, which tokens.css also follows.
+ * Button variants are the brand's emphasis levels (contained = bold, outlined = standard,
+ * text = quiet); color="primary" keeps each level's own color, other colors re-color it.
+ */
+import { createElement as h } from 'react';
+
+${ICONS}
+
+const options = ${toSource(options)};
+
+export default options;
+`;
+    const dts = `/** MUI theme options for "${theme.brand}". Generated by loomiere build; do not edit. */
+import type { ThemeOptions } from '@mui/material/styles';
+
+declare const options: ThemeOptions;
+export default options;
+`;
+    return { 'mui.js': js, 'mui.d.ts': dts };
+  },
+};