@omnitron-dev/prism 0.2.0 → 0.3.0

package/dist/{chunk-MEFT6XPH.js → chunk-ZTATTUH7.js}

@@ -22,6 +22,7 @@ import { formLabelClasses } from '@mui/material/FormLabel';
 import { jsx } from 'react/jsx-runtime';
 import { tabClasses } from '@mui/material/Tab';
 import { autocompleteClasses } from '@mui/material/Autocomplete';
+import '@mui/x-data-grid/themeAugmentation';
 import { createTheme, responsiveFontSizes } from '@mui/material/styles';
 import * as locales from '@mui/material/locale';
 
@@ -146,22 +147,9 @@ function generateColorScale(baseColor) {
   }
   return scale;
 }
-function getLuminanceForContrast(hex) {
-  const rgb = hex.replace("#", "").match(/.{2}/g);
-  if (!rgb) return 0;
-  const [r, g, b] = rgb.map((c) => {
-    const val = parseInt(c, 16) / 255;
-    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-  });
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-function getContrastTextColor(bgColor) {
-  const luminance = getLuminanceForContrast(bgColor);
-  return luminance < 0.4 ? "#FFFFFF" : "#212121";
-}
 function createPaletteColorFromScale(scale, mode = "light") {
   const mainColor = mode === "dark" ? scale[400] : scale[500];
-  const contrastText = getContrastTextColor(mainColor);
+  const contrastText = getContrastText(mainColor, "#FFFFFF", "#212121");
   if (mode === "dark") {
     return {
       lighter: scale[950],
@@ -214,7 +202,7 @@ function isLightColor(hex) {
   return getLuminance(hex) > 0.5;
 }
 function getContrastText(background, lightText = "#FFFFFF", darkText = "#000000") {
-  return isLightColor(background) ? darkText : lightText;
+  return getContrastRatio(background, lightText) >= getContrastRatio(background, darkText) ? lightText : darkText;
 }
 function lighten(hex, amount) {
   const hsl = hexToHsl(hex);
@@ -395,22 +383,9 @@ var baseColors = {
 };
 
 // src/theme/palette/builder.ts
-function getLuminance2(hex) {
-  const rgb = hex.replace("#", "").match(/.{2}/g);
-  if (!rgb) return 0;
-  const [r, g, b] = rgb.map((c) => {
-    const val = parseInt(c, 16) / 255;
-    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
-  });
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-function getContrastText2(bgColor) {
-  const luminance = getLuminance2(bgColor);
-  return luminance < 0.3 ? "#FFFFFF" : "#212121";
-}
 function buildPaletteColor(scale, mode = "light") {
   const mainColor = mode === "dark" ? scale[400] : scale[500];
-  const contrastText = getContrastText2(mainColor);
+  const contrastText = getContrastText(mainColor, "#FFFFFF", "#212121");
   const color = mode === "dark" ? {
     lighter: scale[950],
     light: scale[700],
@@ -814,15 +789,21 @@ function createButtonOverrides(config) {
       // outlinedSize* class slots were removed in MUI v9 in favour
       // of the `variants` array on the component override. See
       // https://mui.com/material-ui/migration/upgrade-to-v9/.
+      // The icon slot wraps a single child (the icon SVG). `:first-child`
+      // is the modern, tag-agnostic way to target it — replaces
+      // `:first-of-type` which only matched if the wrapped element was
+      // the first sibling of its tag (fine for the common case, but
+      // brittle when a consumer wraps the icon in a tooltip or fragment
+      // that introduces a non-element node before the SVG).
       startIcon: {
         marginRight: 4,
-        [`& > *:first-of-type`]: {
+        "& > :first-child": {
           fontSize: 16
         }
       },
       endIcon: {
         marginLeft: 4,
-        [`& > *:first-of-type`]: {
+        "& > :first-child": {
           fontSize: 16
         }
       }
@@ -1009,7 +990,14 @@ function menuItemStyles(theme) {
     ...theme.typography.body2,
     padding: theme.spacing(0.75, 1),
     borderRadius: Number(theme.shape.borderRadius) * 0.75,
-    "&:not(:last-of-type)": {
+    // `:not(:last-child)` is the universal sibling-position selector
+    // that works regardless of element type. `:last-of-type` only
+    // matches the last sibling of the SAME tag, so a fragment-rendered
+    // <Divider /> next to <MenuItem /> can fool it (Divider becomes
+    // the last-of-type MenuItem too, so the previous MenuItem keeps
+    // its margin instead of dropping it). Switching to :last-child
+    // also satisfies MUI v9's lint-against-of-type-selectors guidance.
+    "&:not(:last-child)": {
       marginBottom: 4
     },
     "&.Mui-selected": {
@@ -1494,9 +1482,21 @@ function createOutlinedInputOverrides(config) {
         ...outlinedInputStyles.root(theme, borderRadius),
         variants: outlinedInputVariants.root
       }),
-      input: {
+      // MUI v9 narrowed `styleOverrides[slot]` to `CSSObject` and
+      // hoisted the `variants` API to the component-level
+      // `variants` field. We still emit the variants on the slot
+      // because (a) MUI's styled engine honours them there at
+      // runtime, (b) per-slot variant styles wouldn't translate
+      // cleanly to component-level (each entry would need a
+      // descendant selector targeting the slot class).
+      //
+      // The cast escapes the narrowed type without lying about
+      // runtime shape — the engine reads `variants` from the
+      // returned object regardless of where TypeScript thinks it
+      // belongs.
+      input: () => ({
         variants: [...outlinedInputVariants.input, ...multilineInputVariants]
-      },
+      }),
       notchedOutline: ({ theme }) => outlinedInputStyles.notchedOutline(theme)
     }
   };
@@ -1574,9 +1574,10 @@ function createFilledInputOverrides(config) {
         ...filledInputStyles.root(theme, borderRadius),
         variants: filledInputVariants.root
       }),
-      input: {
+      // See the OutlinedInput counterpart above for the rationale.
+      input: () => ({
         variants: [...filledInputVariants.input, ...multilineInputVariants]
-      }
+      })
     }
   };
 }
@@ -2109,8 +2110,6 @@ function createAutocompleteOverrides(config) {
     }
   };
 }
-
-// src/theme/components/DataGrid.ts
 function createDataGridOverrides(config) {
   const { borderRadius } = config;
   return {
@@ -2322,6 +2321,37 @@ function componentOverrides(config) {
     // =========================================================================
     ...createCardOverrides(config),
     // =========================================================================
+    // LAYOUT
+    // =========================================================================
+    /**
+     * `Stack` spaces its children with CSS `gap`, never with margins.
+     *
+     * MUI's own default (`useFlexGap: false`) gives every child but the first
+     * a margin on the spacing side, and resets every child's own margin to 0.
+     * Both halves of that were measured in this codebase on 2026-09-22:
+     *
+     *   - when a row wraps, the first item of every wrapped line keeps its
+     *     margin and the first item of the first line does not, so the first
+     *     line sits one gap to the left of the rest. The release console's
+     *     gate strip showed it; the same shape — a wrapping `Stack` with
+     *     `spacing` — was in 146 places across the console, prism and the
+     *     portal;
+     *   - a child's own margin is silently discarded. `ml: 'auto'` does not
+     *     push, `mt: -1.5` does not pull a subtitle up, `FormControlLabel`
+     *     loses the -11px that aligns its control with the text around it —
+     *     which is why `ml: 'auto !important'` appears in both apps, and why
+     *     eight `ml: 'auto'` in the portal did nothing at all.
+     *
+     * `gap` has neither problem, every browser the apps support implements it,
+     * and MUI recommends turning it on here, globally. A child's margin now
+     * ADDS to the gap, as margins do everywhere else in CSS.
+     */
+    MuiStack: {
+      defaultProps: {
+        useFlexGap: true
+      }
+    },
+    // =========================================================================
     // PAPER & SURFACES
     // =========================================================================
     MuiPaper: {
@@ -2406,21 +2436,28 @@ function componentOverrides(config) {
           "&::before": {
             display: "none"
           },
-          "&:first-of-type": {
+          // Position selectors switched from `:first-of-type` /
+          // `:last-of-type` to `:first-child` / `:last-child` —
+          // accordions are intended to be direct siblings, so the
+          // child-position form gives the correct result without
+          // depending on element-tag homogeneity (an interspersed
+          // <Divider /> would break the of-type form silently by
+          // making each accordion the only "of-type" sibling).
+          "&:first-child": {
             borderTopLeftRadius: borderRadius,
             borderTopRightRadius: borderRadius
           },
-          "&:last-of-type": {
+          "&:last-child": {
             borderBottomLeftRadius: borderRadius,
             borderBottomRightRadius: borderRadius
           },
-          "&:not(:last-of-type)": {
+          "&:not(:last-child)": {
             borderBottom: 0
           },
           [`&.${accordionClasses.expanded}`]: {
             margin: 0,
-            "&:first-of-type": { marginTop: 0 },
-            "&:last-of-type": { marginBottom: 0 }
+            "&:first-child": { marginTop: 0 },
+            "&:last-child": { marginBottom: 0 }
           },
           [`&.${accordionClasses.disabled}`]: {
             backgroundColor: "transparent"
@@ -2939,7 +2976,12 @@ function componentOverrides(config) {
           borderRadius: borderRadius - 2,
           margin: 2,
           padding: `${8 * dm}px ${12 * dm}px`,
-          "&:not(:last-of-type)": {
+          // `:not(:last-child)` — element-tag-agnostic position
+          // selector. The `:last-of-type` form was wrong when a
+          // <Divider /> ended the list (the previous MenuItem
+          // became the last-of-type MenuItem and kept its
+          // margin-bottom, creating an inconsistent gap).
+          "&:not(:last-child)": {
             marginBottom: 4
           },
           "&.Mui-selected": {
@@ -3014,7 +3056,18 @@ function componentOverrides(config) {
           border: `1px solid ${paletteVar(theme, "divider")}`,
           [`&.${toggleButtonClasses.selected}`]: {
             backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.08)`,
-            borderColor: paletteVar(theme, "primary.main"),
+            // `currentColor` makes the border track the foreground
+            // colour set on the selected state — by default that
+            // foreground is primary (set on the same rule below),
+            // but consumers that override `color` via the MUI
+            // `color` prop or an inline `sx` (e.g. /admin/messaging
+            // settings sets per-button OPT_COLOR for success /
+            // warning / error / info modes) get a border that
+            // matches without needing to also override the border
+            // shorthand. Defeats the prior "half-and-half" bug
+            // where prism forced primary on left+top while the
+            // consumer's sx painted right+bottom in OPT_COLOR.
+            borderColor: "currentColor",
             color: paletteVar(theme, "primary.main"),
             "&:hover": {
               backgroundColor: `rgba(${getColorChannel(theme, "primary")} / 0.16)`
@@ -3037,37 +3090,69 @@ function componentOverrides(config) {
         }
       }
     },
-    // The group only owns layout (gap, sibling border). Per-button
-    // styling (border, radius, padding) is already covered by the
-    // MuiToggleButton override above — the previous descendant
-    // selector with `!important` here was redundant.
+    // ToggleButtonGroup is a single connected segmented control,
+    // not a row of independent buttons. The canonical MUI v9
+    // implementation tags non-edge children with the
+    // `firstButton / middleButton / lastButton` classes (replacing
+    // the deprecated `:not(:first-of-type)` sibling pattern from
+    // MUI v5) and uses an overlap-and-collapse trick:
+    //
+    //   horizontal: margin-left: -1; border-left: 1px solid transparent
+    //               border-top/bottom-left-radius: 0
+    //   vertical:   margin-top:  -1; border-top:  1px solid transparent
+    //               border-top-left/right-radius:  0
+    //
+    // So the visible seam between segments is the *previous*
+    // button's right (or bottom) border, painted through a
+    // transparent slot on the next button.
     //
-    // The sibling-border explicitly carries the same `divider`
-    // colour used by each button's own border, otherwise the
-    // shorthand `1px solid` would fall back to `currentColor`
-    // (text colour) and the first-of-type's left edge looked
-    // brighter than the seams between subsequent buttons.
+    // The bug the user hit: the selected button's left edge stayed
+    // transparent, so the indigo outline looked broken on its
+    // joining side. The fix is a single rule — lift the selected
+    // segment above its neighbours with z-index, and restate the
+    // seam-edge as primary so it overpaints the divider that the
+    // previous sibling owns. We deliberately do NOT force `gap` or
+    // a per-button left border (the historical prism override),
+    // because that fragments the control into independent boxes
+    // and breaks the segmented-control affordance.
+    //
+    // No `:not(:first-of-type)` here — MUI v9 fully removed that
+    // pattern in favour of position classes, and using both
+    // mechanisms creates cascade ambiguity that bit us before.
     MuiToggleButtonGroup: {
       styleOverrides: {
-        root: {
-          gap: 4
-        },
         grouped: ({ theme }) => ({
-          "&:not(:first-of-type)": {
-            marginLeft: 0,
-            borderLeft: `1px solid ${paletteVar(theme, "divider")}`,
-            // The MuiToggleButton override sets `borderColor: primary`
-            // when selected via a longhand on the .selected class, but
-            // that rule's specificity equals ours and MUI's
-            // toggle-button-group styleOverrides land later in source
-            // order — so the left edge stayed `divider` even after
-            // selection. Re-state the primary colour inside our
-            // selected branch so it wins on cascade (specificity here
-            // is one class higher than the MuiToggleButton.selected
-            // rule).
-            [`&.${toggleButtonClasses.selected}`]: {
-              borderLeftColor: paletteVar(theme, "primary.main")
-            }
+          // Restate the seam-edge with the divider colour on
+          // unselected middle/last buttons. MUI's default is
+          // `1px solid transparent` for the legacy "overlap with
+          // negative margin" pattern (inline-flex layout). That
+          // pattern hides the transparent seam under the previous
+          // sibling's right border. But consumers regularly pass
+          // `sx={{ display: 'grid' }}` (e.g. /admin/messaging
+          // settings) — and grid ignores the negative margin, so
+          // the seam-edge becomes a visibly missing border.
+          //
+          // Painting the seam as `divider` here is a no-op in the
+          // canonical inline-flex layout (it sits exactly under
+          // prev's right border) and restores the missing edge in
+          // grid/custom layouts. One rule, both cases.
+          borderLeftColor: paletteVar(theme, "divider"),
+          borderTopColor: paletteVar(theme, "divider"),
+          [`&.${toggleButtonClasses.selected}`]: {
+            // Lift above neighbours so the selected outline paints
+            // OVER the prev sibling's seam border. Without z-index
+            // the divider connecting two segments swallows the
+            // selected segment's leading edge in inline-flex.
+            zIndex: 1,
+            // Seam edges use `currentColor` rather than a hard-
+            // coded primary so per-button colour overrides (MUI
+            // `color` prop, inline `sx={{ color }}`) propagate
+            // uniformly to all four sides. The previous primary-
+            // forced longhands fought consumer styling on the
+            // left/top while letting it through on right/bottom,
+            // producing the visible "half-and-half" border bug.
+            borderLeftColor: "currentColor",
+            borderTopColor: "currentColor"
           }
         })
       }
@@ -3536,7 +3621,7 @@ var lightPalette = {
     main: "#42A5F5",
     dark: "#1E88E5",
     darker: "#1565C0",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   info: {
     lighter: "#E0F7FA",
@@ -3544,7 +3629,7 @@ var lightPalette = {
     main: "#26C6DA",
     dark: "#00ACC1",
     darker: "#00838F",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   success: {
     lighter: "#E8F5E9",
@@ -3552,7 +3637,7 @@ var lightPalette = {
     main: "#66BB6A",
     dark: "#43A047",
     darker: "#2E7D32",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   warning: {
     lighter: "#FFF8E1",
@@ -3605,7 +3690,7 @@ var darkPalette = {
     main: "#42A5F5",
     dark: "#1E88E5",
     darker: "#1565C0",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   secondary: {
     lighter: "#E3F2FD",
@@ -3613,7 +3698,7 @@ var darkPalette = {
     main: "#64B5F6",
     dark: "#42A5F5",
     darker: "#1E88E5",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   info: {
     lighter: "#E0F7FA",
@@ -3621,7 +3706,7 @@ var darkPalette = {
     main: "#4DD0E1",
     dark: "#26C6DA",
     darker: "#00ACC1",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   success: {
     lighter: "#E8F5E9",
@@ -3629,7 +3714,7 @@ var darkPalette = {
     main: "#81C784",
     dark: "#66BB6A",
     darker: "#4CAF50",
-    contrastText: "#FFFFFF"
+    contrastText: "#000000"
   },
   warning: {
     lighter: "#FFF8E1",
@@ -4294,14 +4379,14 @@ function applyPrimaryOverride(basePalette, primaryColor, mode) {
       main: primaryColor,
       dark: colorGroup.palette[300],
       darker: colorGroup.palette[100],
-      contrastText: colorGroup.palette[950]
+      contrastText: getContrastText(primaryColor)
     }) : generatePaletteColorWithChannels({
       lighter: colorGroup.palette[50],
       light: colorGroup.palette[400],
       main: primaryColor,
       dark: colorGroup.palette[600],
       darker: colorGroup.palette[900],
-      contrastText: colorGroup.palette[50]
+      contrastText: getContrastText(primaryColor)
     });
     return { ...basePalette, primary: newPrimary2 };
   }
@@ -4312,14 +4397,14 @@ function applyPrimaryOverride(basePalette, primaryColor, mode) {
     main: generatedScale[400],
     dark: generatedScale[300],
     darker: generatedScale[100],
-    contrastText: generatedScale[950]
+    contrastText: getContrastText(generatedScale[400])
   }) : generatePaletteColorWithChannels({
     lighter: generatedScale[50],
     light: generatedScale[400],
     main: generatedScale[500],
     dark: generatedScale[600],
     darker: generatedScale[900],
-    contrastText: generatedScale[50]
+    contrastText: getContrastText(generatedScale[500])
   });
   return { ...basePalette, primary: newPrimary };
 }
@@ -4489,5 +4574,5 @@ function getPresetDisplayName(preset) {
 }
 
 export { COLOR_GROUPS, PRESET_DISPLAY_NAMES, PRESET_INHERENT_MODE, PRESET_NAMES, arcticPreset, baseColors, basic, blue, buildAction, buildBackground, buildChartColors, buildPalette, buildPaletteColor, buildText, buildVibrant, componentOverrides, createButtonBaseOverrides, createButtonGroupOverrides, createButtonOverrides, createPaletteColorFromScale, createPrismTheme, createShadows, createTypography, cssVarRgba, customScrollbarMixin, darkShadow, darken, defaultDarkPalette, defaultLightPalette, draculaPreset, emberPreset, focusRingMixin, generateColorScale, generateColorScaleWithChannels, generatePaletteColorWithChannels, getContrastRatio, getContrastText, getLuminance, getPresetDisplayName, glassMixin, green, grey, hexToHsl, hexToRgb, hexToRgbChannel, hideScrollbarMixin, hslToHex, invertColorScale, isLightColor, lightBlue, lighten, luxuryColors, luxuryError, luxuryInfo, luxuryNeutral, luxuryPrimary, luxurySecondary, luxurySuccess, luxuryWarning, midnightPreset, minimalPreset, mix, mixins, multiLineEllipsisMixin, orange, purple, red, retroPreset, rgbToHex, rgba, shadows, textEllipsisMixin, typography };
-//# sourceMappingURL=chunk-MEFT6XPH.js.map
-//# sourceMappingURL=chunk-MEFT6XPH.js.map
+//# sourceMappingURL=chunk-ZTATTUH7.js.map
+//# sourceMappingURL=chunk-ZTATTUH7.js.map