@stackcraftmx/calcita 0.0.0-stage → 0.25.0

package/dist/theme/glassSurface.js

@@ -0,0 +1,328 @@
+import { paletteOf } from "./components/paletteOf.js";
+const GLASS_OPACITY = 0.6;
+const GLASS_PANEL_RADIUS_PIXELS = 20;
+const GLASS_MENU_RADIUS_PIXELS = 12;
+const GLASS_INSET_PIXELS = 8;
+const GLASS_BLUR = "blur(20px) saturate(180%)";
+const GLASS_LENS = Object.freeze({
+  control: { filterId: "toolkit-glass-lens-control", edgeFraction: 0.25, scale: 0.2, blurPixels: 3, clearerBy: 0.25 },
+  panel: { filterId: "toolkit-glass-lens-panel", edgeFraction: 0.12, scale: 0.05, blurPixels: 10, clearerBy: 0.1 }
+});
+const DARK_DROP_WHITE_PERCENT = 18;
+const ACCENT_TEXT_SHADE_PERCENT = 30;
+const FIELD_WELL_RADIUS_PIXELS = 12;
+const FIELD_WELL_FILL = Object.freeze({
+  light: { rest: "rgba(118, 118, 128, 0.12)", hover: "rgba(118, 118, 128, 0.18)" },
+  // en oscuro el gris de Apple, MÁS CLARO que lo de atrás (su «tertiary fill»): con negro al 32 % el campo se perdía
+  dark: { rest: "rgba(118, 118, 128, 0.24)", hover: "rgba(118, 118, 128, 0.30)" }
+});
+const CANVAS_FIELD = Object.freeze({
+  light: { rest: "rgba(255, 255, 255, 0.62)", hover: "rgba(255, 255, 255, 0.78)", edge: "rgba(15, 23, 42, 0.10)" },
+  // en oscuro, el gris de relleno de Apple (más claro que el fondo). Con negro al 34 % el campo contra el fondo casi negro
+  // medía 1.01 : 1 y no se veía (lo reportaron: el buscador «se pierde»); con este, 1.26 : 1, y su filo aparte
+  dark: { rest: "rgba(118, 118, 128, 0.24)", hover: "rgba(118, 118, 128, 0.30)", edge: "rgba(255, 255, 255, 0.10)" }
+});
+const MIN_TEXT_CONTRAST = 4.5;
+const FILL_SHARE_STEP_PERCENT = 5;
+const MIN_FILL_SHARE_PERCENT = 30;
+const GLASS_LENS_FLAG_SELECTOR = 'body[data-glass-lens="on"]';
+function insideContentSelectorOf(suffix = "") {
+  return `.MuiPaper-root &${suffix}, ${GLASS_LENS_FLAG_SELECTOR} .MuiPaper-root &${suffix}`;
+}
+const REDUCED_TRANSPARENCY_QUERY = "@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)";
+const NO_BACKDROP_FILTER_QUERY = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const AMBIENT_STRENGTH_LIGHT = Object.freeze({ primary: 40, info: 30, accent: 30, center: 16 });
+const AMBIENT_STRENGTH_DARK = Object.freeze({ primary: 18, info: 18, accent: 12, center: 10 });
+const DARK_CANVAS = Object.freeze({ base: "#05070B" });
+const GLASS_EDGE_LIGHT = Object.freeze({
+  rimLight: "rgba(255, 255, 255, 0.95)",
+  rimShade: "rgba(255, 255, 255, 0.5)",
+  innerGlow: "rgba(255, 255, 255, 0.45)",
+  outline: "rgba(15, 23, 42, 0.07)",
+  shadow: "0 6px 20px rgba(15, 23, 42, 0.10)",
+  controlShadow: "0 1px 2px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06)"
+});
+const GLASS_EDGE_DARK = Object.freeze({
+  rimLight: "rgba(255, 255, 255, 0.32)",
+  rimShade: "rgba(255, 255, 255, 0.12)",
+  innerGlow: "rgba(255, 255, 255, 0.07)",
+  outline: "rgba(0, 0, 0, 0.35)",
+  shadow: "0 8px 28px rgba(0, 0, 0, 0.45)",
+  controlShadow: "0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25)"
+});
+const INNER_GLOW_PIXELS = 12;
+const DARK_GLASS_LIFT_PERCENT = 16;
+const MATERIAL_EDGE_LIGHT = Object.freeze({ outline: "rgba(15, 23, 42, 0.08)", shadow: "0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06)" });
+const MATERIAL_EDGE_DARK = Object.freeze({ outline: "rgba(255, 255, 255, 0.08)", shadow: "0 8px 24px rgba(0, 0, 0, 0.35)" });
+const MATERIAL_OPACITY_OFFSET = Object.freeze({ light: -0.15, dark: -0.05 });
+const THICK_MATERIAL_PERCENT = 92;
+function isGlassTheme(theme) {
+  return Boolean(theme?.toolkit?.glass);
+}
+function glassOpacityOf(theme) {
+  return theme?.toolkit?.glass?.opacity ?? GLASS_OPACITY;
+}
+function glassSurfaceOf(solidColor, { opacity = GLASS_OPACITY, isDark = false, isControl = false } = {}) {
+  const edge = isDark ? GLASS_EDGE_DARK : GLASS_EDGE_LIGHT;
+  const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;
+  return {
+    backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(opacity * 100)}%, transparent)`,
+    backdropFilter: GLASS_BLUR,
+    WebkitBackdropFilter: GLASS_BLUR,
+    backgroundImage: "linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 40%)",
+    boxShadow: [
+      `inset 1px 1px 0 ${edge.rimLight}`,
+      `inset -1px -1px 0 ${edge.rimShade}`,
+      `inset 0 0 ${INNER_GLOW_PIXELS}px ${edge.innerGlow}`,
+      `0 0 0 1px ${edge.outline}`,
+      isControl ? edge.controlShadow : edge.shadow
+    ].join(", "),
+    ...solidFallbackOf({ backgroundColor: solidColor, backdropFilter: "none", WebkitBackdropFilter: "none" })
+  };
+}
+function solidFallbackOf(solidStyle) {
+  return { [REDUCED_TRANSPARENCY_QUERY]: solidStyle, [NO_BACKDROP_FILTER_QUERY]: solidStyle };
+}
+function glassStylesOf(theme, { color, darkColor, opacity, isControl = false } = {}) {
+  const lightColor = color ?? paletteOf(theme).background.paper;
+  const glassOpacity = opacity ?? glassOpacityOf(theme);
+  return {
+    ...glassSurfaceOf(lightColor, { opacity: glassOpacity, isControl }),
+    ...theme.applyStyles("dark", glassSurfaceOf(darkColor ?? lightColor, { opacity: glassOpacity, isDark: true, isControl })),
+    ...lensRulesOf(theme, { lightColor, darkColor: darkColor ?? lightColor, opacity: glassOpacity, isControl })
+  };
+}
+function lensRulesOf(theme, { lightColor, darkColor, opacity, isControl }) {
+  const lens = isControl ? GLASS_LENS.control : GLASS_LENS.panel;
+  const lensOpacity = Math.max(0, opacity - lens.clearerBy);
+  const backdrop = `blur(${lens.blurPixels}px) saturate(180%) url(#${lens.filterId})`;
+  const lensSurfaceOf = (solidColor, isDark) => {
+    const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;
+    return {
+      backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(lensOpacity * 100)}%, transparent)`,
+      backdropFilter: backdrop,
+      WebkitBackdropFilter: backdrop,
+      ...solidFallbackOf({ backgroundColor: solidColor, backdropFilter: "none", WebkitBackdropFilter: "none" })
+    };
+  };
+  const lensKey = `${GLASS_LENS_FLAG_SELECTOR} &`;
+  const darkKey = Object.keys(theme.applyStyles("dark", {}))[0];
+  if (!darkKey) {
+    return { [lensKey]: lensSurfaceOf(lightColor, false) };
+  }
+  const darkLens = darkKey.startsWith("@") ? { [darkKey]: { [lensKey]: lensSurfaceOf(darkColor, true) } } : { [darkKey.replace("&", lensKey)]: lensSurfaceOf(darkColor, true) };
+  return { [lensKey]: lensSurfaceOf(lightColor, false), ...darkLens };
+}
+function lensDisplacementMapOf(edgeFraction) {
+  const inner = 1 - edgeFraction;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" preserveAspectRatio="none"><defs><linearGradient id="x" x1="0" x2="1"><stop offset="0" stop-color="#ff0000"/><stop offset="${edgeFraction}" stop-color="#800000"/><stop offset="${inner}" stop-color="#800000"/><stop offset="1" stop-color="#000000"/></linearGradient><linearGradient id="y" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#00ff00"/><stop offset="${edgeFraction}" stop-color="#008000"/><stop offset="${inner}" stop-color="#008000"/><stop offset="1" stop-color="#000000"/></linearGradient></defs><rect width="100" height="100" fill="url(#x)"/><rect width="100" height="100" fill="url(#y)" style="mix-blend-mode:screen"/></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+function materialSurfaceOf(solidColor, { opacity = GLASS_OPACITY, isDark = false } = {}) {
+  const edge = isDark ? MATERIAL_EDGE_DARK : MATERIAL_EDGE_LIGHT;
+  const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;
+  const offset = isDark ? MATERIAL_OPACITY_OFFSET.dark : MATERIAL_OPACITY_OFFSET.light;
+  const materialOpacity = Math.min(1, Math.max(0, opacity + offset));
+  return {
+    backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(materialOpacity * 100)}%, transparent)`,
+    backdropFilter: GLASS_BLUR,
+    WebkitBackdropFilter: GLASS_BLUR,
+    backgroundImage: "none",
+    boxShadow: `0 0 0 1px ${edge.outline}, ${edge.shadow}`,
+    ...solidFallbackOf({ backgroundColor: solidColor, backdropFilter: "none", WebkitBackdropFilter: "none" })
+  };
+}
+function materialStylesOf(theme, { color, darkColor } = {}) {
+  const lightColor = color ?? paletteOf(theme).background.paper;
+  const opacity = glassOpacityOf(theme);
+  return {
+    ...materialSurfaceOf(lightColor, { opacity }),
+    ...theme.applyStyles("dark", materialSurfaceOf(darkColor ?? lightColor, { opacity, isDark: true }))
+  };
+}
+function materialBackgroundOf(theme, { thick = false } = {}) {
+  const paper = paletteOf(theme).background.paper;
+  const opacityOf = (offset) => thick ? THICK_MATERIAL_PERCENT : Math.round(Math.min(1, Math.max(0, glassOpacityOf(theme) + offset)) * 100);
+  const layerOf = (color) => `linear-gradient(${color}, ${color})`;
+  const frostedOf = (tint, opacity) => ({
+    backgroundImage: layerOf(`color-mix(in srgb, ${tint} ${opacity}%, transparent)`),
+    backdropFilter: GLASS_BLUR,
+    WebkitBackdropFilter: GLASS_BLUR
+  });
+  return {
+    ...frostedOf(paper, opacityOf(MATERIAL_OPACITY_OFFSET.light)),
+    ...theme.applyStyles("dark", frostedOf(`color-mix(in srgb, ${paper}, white ${DARK_GLASS_LIFT_PERCENT}%)`, opacityOf(MATERIAL_OPACITY_OFFSET.dark))),
+    ...solidFallbackOf({ backgroundImage: layerOf(paper), backdropFilter: "none", WebkitBackdropFilter: "none" })
+  };
+}
+function glassDropOf(theme) {
+  const palette = paletteOf(theme);
+  return {
+    backgroundColor: palette.background.paper,
+    color: palette.text.primary,
+    boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08)",
+    ...theme.applyStyles("dark", {
+      backgroundColor: `color-mix(in srgb, ${palette.common.white} ${DARK_DROP_WHITE_PERCENT}%, transparent)`,
+      boxShadow: "0 1px 3px rgba(0, 0, 0, 0.35)"
+    })
+  };
+}
+function whiteLabelFillOf(rawColor) {
+  const channels = hexChannelsOf(rawColor);
+  if (!channels) {
+    return null;
+  }
+  for (let share = 100; share >= MIN_FILL_SHARE_PERCENT; share -= FILL_SHARE_STEP_PERCENT) {
+    const mixed = channels.map((channel) => Math.round(channel * share / 100));
+    if (contrastWithWhiteOf(mixed) >= MIN_TEXT_CONTRAST) {
+      return `#${mixed.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+    }
+  }
+  return `#${channels.map((channel) => Math.round(channel * MIN_FILL_SHARE_PERCENT / 100).toString(16).padStart(2, "0")).join("")}`;
+}
+function hexChannelsOf(color) {
+  const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(color ?? "").trim());
+  if (!match) {
+    return null;
+  }
+  const digits = match[1].length === 3 ? [...match[1]].map((digit) => digit + digit).join("") : match[1];
+  return [0, 2, 4].map((start) => parseInt(digits.slice(start, start + 2), 16));
+}
+function contrastWithWhiteOf(channels) {
+  const [red, green, blue] = channels.map((channel) => {
+    const unit = channel / 255;
+    return unit <= 0.03928 ? unit / 12.92 : ((unit + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+  return 1.05 / (luminance + 0.05);
+}
+function fieldWellStylesOf(theme) {
+  return {
+    backgroundImage: "none",
+    backdropFilter: "none",
+    WebkitBackdropFilter: "none",
+    boxShadow: "none",
+    borderRadius: FIELD_WELL_RADIUS_PIXELS,
+    backgroundColor: FIELD_WELL_FILL.light.rest,
+    "&:hover": { backgroundColor: FIELD_WELL_FILL.light.hover },
+    ...theme.applyStyles("dark", {
+      backgroundColor: FIELD_WELL_FILL.dark.rest,
+      "&:hover": { backgroundColor: FIELD_WELL_FILL.dark.hover }
+    })
+  };
+}
+function canvasFieldStylesOf(theme) {
+  const paper = paletteOf(theme).background.paper;
+  return {
+    backgroundImage: "none",
+    backdropFilter: GLASS_BLUR,
+    WebkitBackdropFilter: GLASS_BLUR,
+    borderRadius: FIELD_WELL_RADIUS_PIXELS,
+    backgroundColor: CANVAS_FIELD.light.rest,
+    boxShadow: `0 0 0 1px ${CANVAS_FIELD.light.edge}`,
+    "&:hover": { backgroundColor: CANVAS_FIELD.light.hover },
+    ...theme.applyStyles("dark", {
+      backgroundColor: CANVAS_FIELD.dark.rest,
+      boxShadow: `0 0 0 1px ${CANVAS_FIELD.dark.edge}`,
+      "&:hover": { backgroundColor: CANVAS_FIELD.dark.hover }
+    }),
+    ...solidFallbackOf({ backgroundColor: paper, backdropFilter: "none", WebkitBackdropFilter: "none" })
+  };
+}
+function accentTextStylesOf(theme, colorName = "primary") {
+  const palette = paletteOf(theme);
+  const main = (palette[colorName] ?? palette.primary).main;
+  const keep = 100 - ACCENT_TEXT_SHADE_PERCENT;
+  return {
+    color: `color-mix(in srgb, ${main} ${keep}%, black)`,
+    ...theme.applyStyles("dark", { color: `color-mix(in srgb, ${main} ${keep}%, white)` })
+  };
+}
+function fixedBackgroundLayerOf(layerStyles, { clipPath } = {}) {
+  return {
+    isolation: "isolate",
+    ...clipPath && { clipPath },
+    // OJO, iPhone: con inset: 0 el alto de la capa cambia cuando la barra de Safari se esconde al deslizar, y el fondo
+    // «seguía al scroll» (lo vio el autor en su teléfono). Medida fija de toda la pantalla (100vw × 100lvh, el alto con
+    // la barra escondida; 100vh donde no hay lvh) y su propia capa de composición (translateZ), que es lo que la deja
+    // quieta en WebKit
+    "&::before": {
+      content: '""',
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100vw",
+      height: "100vh",
+      "@supports (height: 100lvh)": { height: "100lvh" },
+      transform: "translateZ(0)",
+      willChange: "transform",
+      zIndex: -1,
+      pointerEvents: "none",
+      ...layerStyles
+    }
+  };
+}
+function ambientBackgroundOf(theme) {
+  const palette = paletteOf(theme);
+  const washOf = (strength, tones) => [
+    `radial-gradient(60vmax 45vmax at 0% 0%, color-mix(in srgb, ${tones.primary} ${strength.primary}%, transparent), transparent 70%)`,
+    `radial-gradient(50vmax 40vmax at 100% 15%, color-mix(in srgb, ${tones.info} ${strength.info}%, transparent), transparent 70%)`,
+    `radial-gradient(55vmax 45vmax at 70% 100%, color-mix(in srgb, ${tones.accent} ${strength.accent}%, transparent), transparent 70%)`,
+    `radial-gradient(45vmax 35vmax at 45% 50%, color-mix(in srgb, ${tones.info} ${strength.center}%, transparent), transparent 70%)`
+  ].join(", ");
+  const lightTones = { primary: palette.primary.main, info: palette.info.main, accent: palette.primary.light };
+  const darkTones = { primary: palette.primary.dark, info: palette.info.dark, accent: palette.primary.dark };
+  return {
+    backgroundColor: palette.background.default,
+    ...theme.applyStyles("dark", { backgroundColor: DARK_CANVAS.base }),
+    ...fixedBackgroundLayerOf({
+      backgroundColor: palette.background.default,
+      backgroundImage: washOf(AMBIENT_STRENGTH_LIGHT, lightTones),
+      ...theme.applyStyles("dark", { backgroundColor: DARK_CANVAS.base, backgroundImage: washOf(AMBIENT_STRENGTH_DARK, darkTones) })
+    })
+  };
+}
+const SCROLL_EDGE_TINT_PERCENT = 55;
+const SCROLL_EDGE_BLUR_PIXELS = 12;
+function scrollEdgeStylesOf(theme) {
+  const palette = paletteOf(theme);
+  const tintOf = (canvas) => `color-mix(in srgb, ${canvas} ${SCROLL_EDGE_TINT_PERCENT}%, transparent)`;
+  const blur = `blur(${SCROLL_EDGE_BLUR_PIXELS}px)`;
+  const fade = "linear-gradient(to bottom, black 45%, transparent)";
+  return {
+    backgroundColor: tintOf(palette.background.default),
+    ...theme.applyStyles("dark", { backgroundColor: tintOf(DARK_CANVAS.base) }),
+    backdropFilter: blur,
+    WebkitBackdropFilter: blur,
+    maskImage: fade,
+    WebkitMaskImage: fade,
+    ...solidFallbackOf({ backgroundColor: palette.background.default, backdropFilter: "none", WebkitBackdropFilter: "none" })
+  };
+}
+export {
+  GLASS_INSET_PIXELS,
+  GLASS_LENS,
+  GLASS_LENS_FLAG_SELECTOR,
+  GLASS_MENU_RADIUS_PIXELS,
+  GLASS_OPACITY,
+  GLASS_PANEL_RADIUS_PIXELS,
+  accentTextStylesOf,
+  ambientBackgroundOf,
+  canvasFieldStylesOf,
+  fieldWellStylesOf,
+  fixedBackgroundLayerOf,
+  glassDropOf,
+  glassOpacityOf,
+  glassStylesOf,
+  glassSurfaceOf,
+  insideContentSelectorOf,
+  isGlassTheme,
+  lensDisplacementMapOf,
+  materialBackgroundOf,
+  materialStylesOf,
+  materialSurfaceOf,
+  scrollEdgeStylesOf,
+  solidFallbackOf,
+  whiteLabelFillOf
+};
+//# sourceMappingURL=glassSurface.js.map

package/dist/theme/glassSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glassSurface.js","sources":["../../src/theme/glassSurface.js"],"sourcesContent":["// El «vidrio líquido» (Liquid Glass de Apple, 2025) en su versión de CSS: una superficie poco transparente que deja ver,\n// desenfocado, lo que pasa por detrás, con un brillo en el borde de arriba. La guía de Apple (Human Interface Guidelines,\n// «Materials»: https://developer.apple.com/design/human-interface-guidelines/materials) separa dos capas, y aquí igual:\n//   - VIDRIO (glassStylesOf): «a distinct functional layer for controls and navigation elements… that floats above the\n//     content layer». En el framework: la barra de arriba, el menú lateral, los menús y ventanitas, los diálogos, los\n//     tooltips, los avisos, el panel de descargas, el botón flotante y, en los controles, la «gota» que marca lo elegido.\n//   - MATERIAL (materialStylesOf): «Don't use Liquid Glass in the content layer»; el contenido usa los materiales estándar\n//     (vidrio esmerilado, sin el brillo del borde) y los gruesos, más opacos, porque «provide better contrast for text».\n//     Es lo que llevan las tarjetas con createToolkitTheme({glass: {surfaces: true}}).\n//\n// Decisiones, con su porqué:\n//   - 60 % opaco por omisión. Con 80 %, en claro el vidrio era casi blanco sobre un lienzo casi blanco y se leía como\n//     «cápsulas con sombra» (lo dijo el autor), no como vidrio: Apple dice que el vidrio «has no inherent color, and\n//     instead takes on colors from the content directly behind it», y para eso tiene que dejar pasar el color. El material\n//     del contenido es «delgado» (MATERIAL_OPACITY_OFFSET): con 74 % las tarjetas se veían planas, de un solo color (lo dijo\n//     el autor); con el desenfoque de 20 px el texto se sigue leyendo. El proyecto lo cambia con\n//     createToolkitTheme({glass: {opacity: 0.8}}), que mueve las dos.\n//   - Lo que dibuja el vidrio es su filo de luz, como la orilla de una lente: brillante arriba a la izquierda (de donde\n//     viene la luz), más suave abajo a la derecha, y un resplandor por dentro; la sombra de afuera es corta.\n//   - Se pinta sólido si la persona pidió menos transparencia o más contraste en su equipo, o si el navegador no sabe\n//     desenfocar: la misma guía pide respetar «Reducir transparencia», y Apple tuvo que agregar el control en iOS 26.1\n//     porque el texto sobre vidrio no se leía.\n//   - Con vidrio, el lienzo lleva unas manchas de color (ambientBackgroundOf): sobre un lienzo liso, el vidrio no\n//     se distingue de una superficie sólida, porque no hay nada que desenfocar.\n//   - Esquinas concéntricas: la de afuera es la de adentro más el margen (los renglones del menú lateral son de 12 px a 8 px\n//     del borde, así que el panel es de 20 px). Apple lo pide así; si no, las esquinas «no casan» y se nota.\n//   - Sin refracción (la lupa que deforma lo de atrás): en la web solo sale con filtros SVG que hoy funcionan nada más en\n//     Chrome, o con WebGL. Esto es la versión que funciona en todos.\n//   - color-mix y no alpha(): sirve igual con las variables CSS del tema (var(--mui-palette-…)) que con un color normal.\n//\n// OJO: backdrop-filter vuelve a la superficie el «contenedor» de lo que lleve adentro con position: fixed. Lo que deba\n// quedar fijo a la ventana va fuera de ella (los menús de MUI ya van en un portal).\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\n\n/** Qué tan opaca es la superficie (0 a 1). */\nexport const GLASS_OPACITY = 0.6;\n\n/** Las esquinas de lo que flota grande (menú lateral, barra, diálogos): renglones de 12 px a 8 px del borde. */\nexport const GLASS_PANEL_RADIUS_PIXELS = 20;\n\n/** Las esquinas de los menús y ventanitas: renglones de 8 px a 4 px del borde. */\nexport const GLASS_MENU_RADIUS_PIXELS = 12;\n\n/**\n * Lo que se separa de la orilla de la ventana lo que flota (la barra, el menú lateral, los cajones y la hoja de abajo):\n * Apple lo pide para que el contenido se asome por detrás («half sheets are inset from the edge of the display to allow\n * content to peek through from beneath them», Adopting Liquid Glass).\n */\nexport const GLASS_INSET_PIXELS = 8;\n\nconst GLASS_BLUR = 'blur(20px) saturate(180%)';\n\n/**\n * El lente de cada tamaño (ver lensRulesOf), medido en capturas de Chrome: el control chico (botón, chip) más claro y con\n * la orilla más marcada; el panel (barra, menú, diálogo) más grueso, porque lleva texto («Liquid Glass appears more opaque\n * in larger elements like sidebars to preserve legibility», HIG «Color»). edgeFraction y scale van en fracción del tamaño\n * del vidrio; clearerBy es cuánto menos tinte lleva que el esmerilado.\n */\nexport const GLASS_LENS = Object.freeze({\n    control: {filterId: 'toolkit-glass-lens-control', edgeFraction: 0.25, scale: 0.2, blurPixels: 3, clearerBy: 0.25},\n    panel: {filterId: 'toolkit-glass-lens-panel', edgeFraction: 0.12, scale: 0.05, blurPixels: 10, clearerBy: 0.1},\n});\n\n// el gris de la gota en oscuro (por ciento de blanco): lo elegido se tiene que notar (glassDropOf)\nconst DARK_DROP_WHITE_PERCENT = 18;\n// cuánto negro (en claro) o blanco (en oscuro) lleva un texto del color del tema para leerse (accentTextStylesOf)\nconst ACCENT_TEXT_SHADE_PERCENT = 30;\n// el pozo de los campos (fieldWellStylesOf): el gris de relleno de Apple en claro y un oscurecido en oscuro\nconst FIELD_WELL_RADIUS_PIXELS = 12;\nconst FIELD_WELL_FILL = Object.freeze({\n    light: {rest: 'rgba(118, 118, 128, 0.12)', hover: 'rgba(118, 118, 128, 0.18)'},\n    // en oscuro el gris de Apple, MÁS CLARO que lo de atrás (su «tertiary fill»): con negro al 32 % el campo se perdía\n    dark: {rest: 'rgba(118, 118, 128, 0.24)', hover: 'rgba(118, 118, 128, 0.30)'},\n});\n// el campo suelto sobre el lienzo (canvasFieldStylesOf): lámina clara en claro, oscura en oscuro, con su filo\nconst CANVAS_FIELD = Object.freeze({\n    light: {rest: 'rgba(255, 255, 255, 0.62)', hover: 'rgba(255, 255, 255, 0.78)', edge: 'rgba(15, 23, 42, 0.10)'},\n    // en oscuro, el gris de relleno de Apple (más claro que el fondo). Con negro al 34 % el campo contra el fondo casi negro\n    // medía 1.01 : 1 y no se veía (lo reportaron: el buscador «se pierde»); con este, 1.26 : 1, y su filo aparte\n    dark: {rest: 'rgba(118, 118, 128, 0.24)', hover: 'rgba(118, 118, 128, 0.30)', edge: 'rgba(255, 255, 255, 0.10)'},\n});\n// el contraste mínimo de WCAG para letra normal, y cómo se oscurece un relleno hasta lograrlo (whiteLabelFillOf)\nconst MIN_TEXT_CONTRAST = 4.5;\nconst FILL_SHARE_STEP_PERCENT = 5;\nconst MIN_FILL_SHARE_PERCENT = 30;\n\n/** La marca que GlassLensFilter pone en <body> cuando el navegador sí pinta el lente. */\nexport const GLASS_LENS_FLAG_SELECTOR = 'body[data-glass-lens=\"on\"]';\n\n/**\n * El selector de «este control está dentro de una tarjeta» (cualquier Paper: tarjeta, diálogo, menú), donde el control ya\n * no es vidrio. Va en dos versiones, sin y con la marca del lente: la regla del lente (una etiqueta y dos clases) le ganaba\n * a la de la tarjeta (dos clases) y los botones dentro de una tarjeta volvían a ser vidrio. Medido en Chrome.\n *\n * @param {string} [suffix] lo que va pegado al control (p. ej. ':not(.MuiButtonGroup-grouped)')\n * @returns {string}\n */\nexport function insideContentSelectorOf(suffix = '') {\n    return `.MuiPaper-root &${suffix}, ${GLASS_LENS_FLAG_SELECTOR} .MuiPaper-root &${suffix}`;\n}\nconst REDUCED_TRANSPARENCY_QUERY = '@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)';\nconst NO_BACKDROP_FILTER_QUERY = '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))';\n\n// qué tan fuertes son las manchas del lienzo (por ciento del color). En oscuro van MÁS fuertes que en claro: sobre un lienzo\n// casi negro, unas manchas tenues no dan nada que desenfocar y el vidrio se ve como un gris sólido.\n// La de en medio (center) va detrás del contenido: sin ella, en claro las tarjetas de vidrio quedaban sobre blanco y se\n// veían sólidas (medido en las capturas de Chrome).\nconst AMBIENT_STRENGTH_LIGHT = Object.freeze({primary: 40, info: 30, accent: 30, center: 16});\n// en oscuro: manchas de los tonos oscuros sobre un casi negro con un toque azul (como los fondos oscuros de Apple). Antes\n// eran los tonos vivos al 36 % sobre #0A0A0A: aclaraban el fondo hasta el gris de las tarjetas y los elementos se perdían\n// (lo reportaron; medido: tarjeta contra fondo 1.12 : 1). Ahora 1.28 : 1 en el peor punto\nconst AMBIENT_STRENGTH_DARK = Object.freeze({primary: 18, info: 18, accent: 12, center: 10});\nconst DARK_CANVAS = Object.freeze({base: '#05070B'});\n\n// el filo de la lente: la luz de arriba a la izquierda (rimLight), la de abajo a la derecha más suave (rimShade), un\n// resplandor por dentro (innerGlow), una línea fina de afuera que lo separa del lienzo (outline) y la sombra que lo\n// despega (shadow). En oscuro el filo es más tenue, pero la sombra más fuerte: una negra suave no se ve sobre casi negro.\n// Un control chico (botón, chip) lleva una sombra corta (controlShadow): la de un panel se veía como neblina alrededor y,\n// dentro de una tira que se desliza (los filtros rápidos), la tira la cortaba en un rectángulo.\nconst GLASS_EDGE_LIGHT = Object.freeze({\n    rimLight: 'rgba(255, 255, 255, 0.95)', rimShade: 'rgba(255, 255, 255, 0.5)', innerGlow: 'rgba(255, 255, 255, 0.45)',\n    outline: 'rgba(15, 23, 42, 0.07)', shadow: '0 6px 20px rgba(15, 23, 42, 0.10)',\n    controlShadow: '0 1px 2px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06)',\n});\nconst GLASS_EDGE_DARK = Object.freeze({\n    rimLight: 'rgba(255, 255, 255, 0.32)', rimShade: 'rgba(255, 255, 255, 0.12)', innerGlow: 'rgba(255, 255, 255, 0.07)',\n    outline: 'rgba(0, 0, 0, 0.35)', shadow: '0 8px 28px rgba(0, 0, 0, 0.45)',\n    controlShadow: '0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25)',\n});\n// lo ancho del resplandor de adentro (px): lo que se ve como el grosor del vidrio en la orilla\nconst INNER_GLOW_PIXELS = 12;\n// en oscuro el vidrio se aclara un poco sobre su color: un gris igual de oscuro que el lienzo no se distingue de él aunque\n// desenfoque. Es lo que Apple hace en oscuro: lo que va al frente usa los colores «elevated», más claros, «making\n// foreground interfaces appear to advance» (HIG, Dark Mode). Con 8 % las tarjetas y los controles se perdían en el fondo\n// oscuro (lo reportaron); con 16 % y el lienzo nuevo (DARK_CANVAS) la tarjeta se separa 1.28 : 1 del fondo y el control\n// 1.32 : 1 (medido; Apple, su tarjeta #1C1C1E sobre negro: 1.23 : 1)\nconst DARK_GLASS_LIFT_PERCENT = 16;\n\n// el material del contenido: sin brillo de borde (eso es del vidrio de los controles), con una línea fina de afuera que lo\n// separa del lienzo y una sombra suave. En oscuro la línea es clara: una oscura no se ve sobre casi negro\nconst MATERIAL_EDGE_LIGHT = Object.freeze({outline: 'rgba(15, 23, 42, 0.08)', shadow: '0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06)'});\nconst MATERIAL_EDGE_DARK = Object.freeze({outline: 'rgba(255, 255, 255, 0.08)', shadow: '0 8px 24px rgba(0, 0, 0, 0.35)'});\n// el material del contenido es «delgado» (HIG «Materials»: «Thinner materials… help people retain their context by\n// providing a visible reminder of the content that's in the background»): menos opaco que el vidrio de los controles. Con\n// el «grueso» (+0.14, 74 %) las tarjetas se veían planas; el texto se lee por el desenfoque de 20 px, y con «Reducir\n// transparencia» se pinta sólido. En oscuro resta menos: con 45 % la tarjeta casi no se separaba del fondo (medido 1.12 : 1)\nconst MATERIAL_OPACITY_OFFSET = Object.freeze({light: -0.15, dark: -0.05});\n// el material «grueso» (por ciento): tapa lo que pasa por debajo, como la columna fija de una tabla\nconst THICK_MATERIAL_PERCENT = 92;\n\n/**\n * Si el tema trae el vidrio prendido (createToolkitTheme({glass: …})). Lo usan los componentes del framework que flotan\n * (el marco, el panel de descargas, los avisos) y lo puede usar el proyecto para lo suyo.\n *\n * @param {object} theme el tema de MUI\n * @returns {boolean}\n */\nexport function isGlassTheme(theme) {\n    return Boolean(theme?.toolkit?.glass);\n}\n\n/**\n * La opacidad del vidrio del tema: la que pidió el proyecto o GLASS_OPACITY.\n *\n * @param {object} theme\n * @returns {number}\n */\nexport function glassOpacityOf(theme) {\n    return theme?.toolkit?.glass?.opacity ?? GLASS_OPACITY;\n}\n\n/**\n * El estilo de una superficie de vidrio sobre un color.\n *\n * @param {string} solidColor el color sólido de la superficie (p. ej. palette.background.paper o primary.main)\n * @param {object} [options]\n * @param {number} [options.opacity] por omisión GLASS_OPACITY\n * @param {boolean} [options.isDark] en oscuro el vidrio se aclara un poco y su filo brilla más\n * @param {boolean} [options.isControl] un control chico (botón, chip): sombra corta en vez de la de un panel\n * @returns {object} estilos para styleOverrides o sx\n */\nexport function glassSurfaceOf(solidColor, {opacity = GLASS_OPACITY, isDark = false, isControl = false} = {}) {\n    const edge = isDark ? GLASS_EDGE_DARK : GLASS_EDGE_LIGHT;\n    const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;\n    return {\n        backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(opacity * 100)}%, transparent)`,\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n        backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 40%)',\n        boxShadow: [\n            `inset 1px 1px 0 ${edge.rimLight}`,\n            `inset -1px -1px 0 ${edge.rimShade}`,\n            `inset 0 0 ${INNER_GLOW_PIXELS}px ${edge.innerGlow}`,\n            `0 0 0 1px ${edge.outline}`,\n            isControl ? edge.controlShadow : edge.shadow,\n        ].join(', '),\n        ...solidFallbackOf({backgroundColor: solidColor, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * Lo que se pinta en lugar del vidrio si la persona pidió menos transparencia o más contraste, o si el navegador no sabe\n * desenfocar. Para lo transparente que no es una superficie (el fondo oscuro detrás de un diálogo, la perilla del\n * deslizador al arrastrarla).\n *\n * @param {object} solidStyle los estilos sólidos\n * @returns {object}\n */\nexport function solidFallbackOf(solidStyle) {\n    return {[REDUCED_TRANSPARENCY_QUERY]: solidStyle, [NO_BACKDROP_FILTER_QUERY]: solidStyle};\n}\n\n/**\n * El vidrio sobre un color del tema en claro y en oscuro, con la opacidad del tema. Es lo que usan los ajustes de\n * componentes, y lo que usa el proyecto para algo suyo que flote:\n *   sx={(theme) => glassStylesOf(theme)}                                          // sobre el color de las tarjetas\n *   sx={(theme) => glassStylesOf(theme, {color: paletteOf(theme).primary.main})}  // vidrio del color principal\n *\n * @param {object} theme el tema de MUI\n * @param {object} [options]\n * @param {string} [options.color] el color de la superficie; por omisión el de las tarjetas (background.paper)\n * @param {string} [options.darkColor] el de modo oscuro, si es otro; por omisión el mismo\n * @param {number} [options.opacity] por omisión la del tema\n * @param {boolean} [options.isControl] un control chico (botón, chip): sombra corta en vez de la de un panel\n * @returns {object}\n */\nexport function glassStylesOf(theme, {color, darkColor, opacity, isControl = false} = {}) {\n    const lightColor = color ?? paletteOf(theme).background.paper;\n    const glassOpacity = opacity ?? glassOpacityOf(theme);\n    return {\n        ...glassSurfaceOf(lightColor, {opacity: glassOpacity, isControl}),\n        ...theme.applyStyles('dark', glassSurfaceOf(darkColor ?? lightColor, {opacity: glassOpacity, isDark: true, isControl})),\n        ...lensRulesOf(theme, {lightColor, darkColor: darkColor ?? lightColor, opacity: glassOpacity, isControl}),\n    };\n}\n\n/**\n * El LENTE: lo que, según Apple, define al vidrio líquido («The primary way Liquid Glass visually defines itself is through\n * something called Lensing… previous materials scattered light, this new set of materials dynamically bends, shapes, and\n * concentrates light», WWDC25 «Meet Liquid Glass»). La orilla dobla lo de atrás (un filtro SVG de desplazamiento,\n * GlassLensFilter) y el centro queda más claro: menos tinte y menos desenfoque que el esmerilado.\n *\n * Solo en Chrome y sus parientes (Edge, Brave, Arc): son los únicos que aplican un filtro SVG en backdrop-filter; Firefox\n * lo acepta sin pintarlo (el vidrio se quedaría sin desenfoque) y Safari no lo entiende. Por eso va detrás de la marca que\n * GlassLensFilter pone en <body> solo en esos navegadores; en los demás queda el esmerilado. Con «Reducir transparencia» o\n * «Aumentar contraste» se pinta sólido igual que siempre.\n *\n * OJO: el modo oscuro va en su propia regla y no anidado: el selector de oscuro vive en <html> y, anidado debajo de la\n * marca de <body>, buscaría un .dark DENTRO de <body> y nunca coincidiría.\n *\n * @param {object} theme\n * @param {{lightColor: string, darkColor: string, opacity: number, isControl: boolean}} options\n * @returns {object}\n */\nfunction lensRulesOf(theme, {lightColor, darkColor, opacity, isControl}) {\n    const lens = isControl ? GLASS_LENS.control : GLASS_LENS.panel;\n    const lensOpacity = Math.max(0, opacity - lens.clearerBy);\n    const backdrop = `blur(${lens.blurPixels}px) saturate(180%) url(#${lens.filterId})`;\n    const lensSurfaceOf = (solidColor, isDark) => {\n        const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;\n        return {\n            backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(lensOpacity * 100)}%, transparent)`,\n            backdropFilter: backdrop,\n            WebkitBackdropFilter: backdrop,\n            ...solidFallbackOf({backgroundColor: solidColor, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n        };\n    };\n    const lensKey = `${GLASS_LENS_FLAG_SELECTOR} &`;\n    // la regla de oscuro del tema: un selector (*:where(.dark) &) o una media query, según cómo elija el modo el proyecto\n    const darkKey = Object.keys(theme.applyStyles('dark', {}))[0];\n    if (!darkKey) {\n        return {[lensKey]: lensSurfaceOf(lightColor, false)};\n    }\n    const darkLens = darkKey.startsWith('@')\n        ? {[darkKey]: {[lensKey]: lensSurfaceOf(darkColor, true)}}\n        : {[darkKey.replace('&', lensKey)]: lensSurfaceOf(darkColor, true)};\n    return {[lensKey]: lensSurfaceOf(lightColor, false), ...darkLens};\n}\n\n/**\n * El mapa de desplazamiento del lente (una imagen SVG): rojo para lo de lado y verde para lo de arriba abajo; 128 en medio\n * es «no mover». En la orilla de la izquierda y la de arriba vale más (toma de adentro) y en la de la derecha y la de\n * abajo, menos (también de adentro): así la orilla dobla lo de atrás hacia el centro, como una lente convexa, y nunca toma\n * de afuera del vidrio (afuera no hay imagen y la orilla se quedaba en blanco).\n *\n * @param {number} edgeFraction lo ancho de la orilla que dobla (0 a 0.5 del tamaño del vidrio)\n * @returns {string} data URI para el feImage del filtro\n */\nexport function lensDisplacementMapOf(edgeFraction) {\n    const inner = 1 - edgeFraction;\n    const svg = '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" preserveAspectRatio=\"none\"><defs>'\n        + `<linearGradient id=\"x\" x1=\"0\" x2=\"1\"><stop offset=\"0\" stop-color=\"#ff0000\"/><stop offset=\"${edgeFraction}\" stop-color=\"#800000\"/>`\n        + `<stop offset=\"${inner}\" stop-color=\"#800000\"/><stop offset=\"1\" stop-color=\"#000000\"/></linearGradient>`\n        + `<linearGradient id=\"y\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#00ff00\"/><stop offset=\"${edgeFraction}\" stop-color=\"#008000\"/>`\n        + `<stop offset=\"${inner}\" stop-color=\"#008000\"/><stop offset=\"1\" stop-color=\"#000000\"/></linearGradient>`\n        + '</defs><rect width=\"100\" height=\"100\" fill=\"url(#x)\"/><rect width=\"100\" height=\"100\" fill=\"url(#y)\" style=\"mix-blend-mode:screen\"/></svg>';\n    return `data:image/svg+xml,${encodeURIComponent(svg)}`;\n}\n\n/**\n * El material del contenido sobre un color: esmerilado como el vidrio pero sin el brillo del borde, y más transparente.\n *\n * @param {string} solidColor\n * @param {object} [options]\n * @param {number} [options.opacity] la del vidrio; el material le suma MATERIAL_OPACITY_OFFSET de su modo (le resta)\n * @param {boolean} [options.isDark]\n * @returns {object}\n */\nexport function materialSurfaceOf(solidColor, {opacity = GLASS_OPACITY, isDark = false} = {}) {\n    const edge = isDark ? MATERIAL_EDGE_DARK : MATERIAL_EDGE_LIGHT;\n    const tint = isDark ? `color-mix(in srgb, ${solidColor}, white ${DARK_GLASS_LIFT_PERCENT}%)` : solidColor;\n    const offset = isDark ? MATERIAL_OPACITY_OFFSET.dark : MATERIAL_OPACITY_OFFSET.light;\n    const materialOpacity = Math.min(1, Math.max(0, opacity + offset));\n    return {\n        backgroundColor: `color-mix(in srgb, ${tint} ${Math.round(materialOpacity * 100)}%, transparent)`,\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n        backgroundImage: 'none',\n        boxShadow: `0 0 0 1px ${edge.outline}, ${edge.shadow}`,\n        ...solidFallbackOf({backgroundColor: solidColor, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * El material del contenido en claro y en oscuro (las tarjetas con glass: {surfaces: true}). Para algo del proyecto que va\n * en el contenido: sx={(theme) => materialStylesOf(theme)}.\n *\n * @param {object} theme\n * @param {object} [options]\n * @param {string} [options.color] por omisión el de las tarjetas (background.paper)\n * @param {string} [options.darkColor] por omisión el mismo\n * @returns {object}\n */\nexport function materialStylesOf(theme, {color, darkColor} = {}) {\n    const lightColor = color ?? paletteOf(theme).background.paper;\n    const opacity = glassOpacityOf(theme);\n    return {\n        ...materialSurfaceOf(lightColor, {opacity}),\n        ...theme.applyStyles('dark', materialSurfaceOf(darkColor ?? lightColor, {opacity, isDark: true})),\n    };\n}\n\n/**\n * Solo el fondo del material, sin su línea ni su sombra: para lo que va DENTRO de una tarjeta y debe tapar lo que pasa por\n * debajo sin verse como un parche sólido (la columna pegada de la tabla al deslizarla de lado). Va como capa\n * (background-image) y no como color: así el color propio del elemento (el del renglón: la cebra, el cursor encima) se\n * sigue pintando encima.\n *\n * Con {thick: true}, el material «grueso» de Apple (HIG «Materials»: los gruesos son para leer sobre otro contenido): el\n * mismo desenfoque al 92 %. Es el de la columna fija de una tabla: con el delgado de la tarjeta (45 a 55 %) se veían pasar\n * por detrás las otras columnas (lo reportaron).\n *\n * @param {object} theme\n * @param {object} [options]\n * @param {boolean} [options.thick] el material grueso, para tapar lo que pasa por debajo\n * @returns {object}\n */\nexport function materialBackgroundOf(theme, {thick = false} = {}) {\n    const paper = paletteOf(theme).background.paper;\n    const opacityOf = (offset) => (thick ? THICK_MATERIAL_PERCENT : Math.round(Math.min(1, Math.max(0, glassOpacityOf(theme) + offset)) * 100));\n    const layerOf = (color) => `linear-gradient(${color}, ${color})`;\n    const frostedOf = (tint, opacity) => ({\n        backgroundImage: layerOf(`color-mix(in srgb, ${tint} ${opacity}%, transparent)`),\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n    });\n    return {\n        ...frostedOf(paper, opacityOf(MATERIAL_OPACITY_OFFSET.light)),\n        ...theme.applyStyles('dark', frostedOf(`color-mix(in srgb, ${paper}, white ${DARK_GLASS_LIFT_PERCENT}%)`, opacityOf(MATERIAL_OPACITY_OFFSET.dark))),\n        ...solidFallbackOf({backgroundImage: layerOf(paper), backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * La «gota» que marca lo elegido dentro de un control (la pestaña, la opción, el renglón del menú lateral): en claro, una\n * pastilla blanca con su brillo y su sombra; en oscuro, un relleno gris parejo, como el renglón elegido de las barras\n * laterales de Apple en oscuro. No es transparente del todo: va DENTRO de algo que ya puede ser de vidrio (un menú), y\n * vidrio sobre vidrio no se lee.\n * OJO, oscuro: con blanco al 14 % casi no se veía, y su línea de luz arriba dibujaba un arco raro en la esquina («no se\n * nota la selección», «se ve raro»; lo reportaron). Va al 18 % y sin línea.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function glassDropOf(theme) {\n    const palette = paletteOf(theme);\n    return {\n        backgroundColor: palette.background.paper,\n        color: palette.text.primary,\n        boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08)',\n        ...theme.applyStyles('dark', {\n            backgroundColor: `color-mix(in srgb, ${palette.common.white} ${DARK_DROP_WHITE_PERCENT}%, transparent)`,\n            boxShadow: '0 1px 3px rgba(0, 0, 0, 0.35)',\n        }),\n    };\n}\n\n/**\n * El relleno de un control lleno de color (el botón principal, la etiqueta elegida) para llevar letra BLANCA y que se lea:\n * el color del tema oscurecido lo justo para llegar a 4.5 : 1 (WCAG). En oscuro la paleta trae letra negra sobre el\n * naranja («El suyo», «Guardar»: se veía feo, lo reportaron) y el blanco sobre el naranja tal cual da 2.85 : 1; con el\n * naranja al 75 % y blanco da 4.79 : 1. Se calcula con el color que elija el proyecto, no con uno fijo.\n *\n * @param {string} rawColor el color en #RRGGBB o #RGB (el de la paleta, no la variable CSS)\n * @returns {string|null} el relleno en #RRGGBB; null si el color no viene en hexadecimal\n */\nexport function whiteLabelFillOf(rawColor) {\n    const channels = hexChannelsOf(rawColor);\n    if (!channels) {\n        return null;\n    }\n    // del color tal cual hacia el negro, en pasos de 5 %, hasta que la letra blanca se lea\n    for (let share = 100; share >= MIN_FILL_SHARE_PERCENT; share -= FILL_SHARE_STEP_PERCENT) {\n        const mixed = channels.map((channel) => Math.round((channel * share) / 100));\n        if (contrastWithWhiteOf(mixed) >= MIN_TEXT_CONTRAST) {\n            return `#${mixed.map((channel) => channel.toString(16).padStart(2, '0')).join('')}`;\n        }\n    }\n    return `#${channels.map((channel) => Math.round((channel * MIN_FILL_SHARE_PERCENT) / 100).toString(16).padStart(2, '0')).join('')}`;\n}\n\n/**\n * Los tres canales de un color #RRGGBB o #RGB (0 a 255); null si no es hexadecimal.\n *\n * @param {string} color\n * @returns {number[]|null}\n */\nfunction hexChannelsOf(color) {\n    const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(color ?? '').trim());\n    if (!match) {\n        return null;\n    }\n    const digits = match[1].length === 3 ? [...match[1]].map((digit) => digit + digit).join('') : match[1];\n    return [0, 2, 4].map((start) => parseInt(digits.slice(start, start + 2), 16));\n}\n\n/**\n * El contraste de la letra blanca sobre un color (fórmula de WCAG).\n *\n * @param {number[]} channels\n * @returns {number}\n */\nfunction contrastWithWhiteOf(channels) {\n    const [red, green, blue] = channels.map((channel) => {\n        const unit = channel / 255;\n        return unit <= 0.03928 ? unit / 12.92 : ((unit + 0.055) / 1.055) ** 2.4;\n    });\n    const luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;\n    return 1.05 / (luminance + 0.05);\n}\n\n/**\n * El «pozo» de un campo de texto dentro del contenido (una tarjeta, un formulario agrupado), como los de Apple: un relleno\n * parejo con esquinas de 12 px, del gris de relleno de Apple («tertiary fill»): tenue en claro y más claro que la tarjeta en\n * oscuro (con negro, en oscuro se perdía). Sin vidrio adentro de la tarjeta: ahí no tiene nada que dejar\n * ver. Con el cursor encima se marca apenas; antes el relleno salía solo con el cursor y en cuadro («hovers espantosos»).\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function fieldWellStylesOf(theme) {\n    return {\n        backgroundImage: 'none',\n        backdropFilter: 'none',\n        WebkitBackdropFilter: 'none',\n        boxShadow: 'none',\n        borderRadius: FIELD_WELL_RADIUS_PIXELS,\n        backgroundColor: FIELD_WELL_FILL.light.rest,\n        '&:hover': {backgroundColor: FIELD_WELL_FILL.light.hover},\n        ...theme.applyStyles('dark', {\n            backgroundColor: FIELD_WELL_FILL.dark.rest,\n            '&:hover': {backgroundColor: FIELD_WELL_FILL.dark.hover},\n        }),\n    };\n}\n\n/**\n * Un campo de texto suelto sobre el lienzo (fuera de una tarjeta): una lámina de vidrio clara en claro y el gris de relleno\n * de Apple en oscuro, más claro que el fondo casi negro. Con «Reducir transparencia» se pinta sólido.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function canvasFieldStylesOf(theme) {\n    const paper = paletteOf(theme).background.paper;\n    return {\n        backgroundImage: 'none',\n        backdropFilter: GLASS_BLUR,\n        WebkitBackdropFilter: GLASS_BLUR,\n        borderRadius: FIELD_WELL_RADIUS_PIXELS,\n        backgroundColor: CANVAS_FIELD.light.rest,\n        boxShadow: `0 0 0 1px ${CANVAS_FIELD.light.edge}`,\n        '&:hover': {backgroundColor: CANVAS_FIELD.light.hover},\n        ...theme.applyStyles('dark', {\n            backgroundColor: CANVAS_FIELD.dark.rest,\n            boxShadow: `0 0 0 1px ${CANVAS_FIELD.dark.edge}`,\n            '&:hover': {backgroundColor: CANVAS_FIELD.dark.hover},\n        }),\n        ...solidFallbackOf({backgroundColor: paper, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n\n/**\n * El color de un TEXTO que debe ir del color del tema (una liga, un botón de solo texto, el renglón elegido del menú, el\n * valor de una fecha): el color de la paleta oscurecido en claro y aclarado en oscuro, para que se lea. Medido (WCAG pide\n * 4.5 : 1 en letra normal): el naranja de la marca sobre una tarjeta clara daba 2.78 : 1 y sobre su propio tinte en oscuro\n * 4.41 : 1 (el reporte: «cuesta leer», «se pierde»); con 30 % de negro en claro da 5.24 : 1 y con 30 % de blanco en\n * oscuro 8.23 : 1. Los botones con relleno de color NO usan esto: van con letra de un solo color (HIG «Buttons»: «Avoid\n * applying a similar color to button labels and content layer backgrounds»).\n *\n * @param {object} theme\n * @param {string} [colorName] primary, error, success… (por omisión primary)\n * @returns {object} {color, y el de oscuro}\n */\nexport function accentTextStylesOf(theme, colorName = 'primary') {\n    const palette = paletteOf(theme);\n    const main = (palette[colorName] ?? palette.primary).main;\n    const keep = 100 - ACCENT_TEXT_SHADE_PERCENT;\n    return {\n        color: `color-mix(in srgb, ${main} ${keep}%, black)`,\n        ...theme.applyStyles('dark', {color: `color-mix(in srgb, ${main} ${keep}%, white)`}),\n    };\n}\n\n/**\n * Un fondo FIJO a la ventana que no se mueve al deslizar, también en el iPhone: va en una capa aparte (::before con\n * position: fixed) detrás del contenido del elemento. Así el vidrio se ve pasar por encima de un fondo quieto.\n *\n * OJO: background-attachment: fixed no sirve para esto. Safari del iPhone y del iPad lo ignora y el fondo se movía con\n * todo (lo vio el autor en el teléfono); además, en escritorio vuelve a pintar todo el fondo en cada paso al deslizar.\n * La capa va con z-index -1 dentro de un contexto propio (isolation): queda arriba del color del elemento y abajo de su\n * contenido. Si el elemento es una caja con esquinas (la escena de un ejemplo), clip-path la recorta a la caja.\n *\n * @param {object} layerStyles el fondo de la capa (backgroundColor, backgroundImage…; puede llevar el modo oscuro)\n * @param {object} [options]\n * @param {string} [options.clipPath] p. ej. 'inset(0 round 20px)' para una caja; sin él, la capa ocupa toda la ventana\n * @returns {object} estilos para el sx del elemento\n */\nexport function fixedBackgroundLayerOf(layerStyles, {clipPath} = {}) {\n    return {\n        isolation: 'isolate',\n        ...(clipPath && {clipPath}),\n        // OJO, iPhone: con inset: 0 el alto de la capa cambia cuando la barra de Safari se esconde al deslizar, y el fondo\n        // «seguía al scroll» (lo vio el autor en su teléfono). Medida fija de toda la pantalla (100vw × 100lvh, el alto con\n        // la barra escondida; 100vh donde no hay lvh) y su propia capa de composición (translateZ), que es lo que la deja\n        // quieta en WebKit\n        '&::before': {\n            content: '\"\"',\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            width: '100vw',\n            height: '100vh',\n            '@supports (height: 100lvh)': {height: '100lvh'},\n            transform: 'translateZ(0)',\n            willChange: 'transform',\n            zIndex: -1,\n            pointerEvents: 'none',\n            ...layerStyles,\n        },\n    };\n}\n\n/**\n * El fondo del lienzo con vidrio: manchas del color principal y del de información, fijas a la ventana, para\n * que el vidrio tenga algo que desenfocar. AppLayout ya lo pone; una pantalla fuera del marco (el inicio de sesión) lo usa\n * con sx={(theme) => ambientBackgroundOf(theme)}.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function ambientBackgroundOf(theme) {\n    const palette = paletteOf(theme);\n    const washOf = (strength, tones) => [\n        `radial-gradient(60vmax 45vmax at 0% 0%, color-mix(in srgb, ${tones.primary} ${strength.primary}%, transparent), transparent 70%)`,\n        `radial-gradient(50vmax 40vmax at 100% 15%, color-mix(in srgb, ${tones.info} ${strength.info}%, transparent), transparent 70%)`,\n        `radial-gradient(55vmax 45vmax at 70% 100%, color-mix(in srgb, ${tones.accent} ${strength.accent}%, transparent), transparent 70%)`,\n        `radial-gradient(45vmax 35vmax at 45% 50%, color-mix(in srgb, ${tones.info} ${strength.center}%, transparent), transparent 70%)`,\n    ].join(', ');\n    const lightTones = {primary: palette.primary.main, info: palette.info.main, accent: palette.primary.light};\n    // en oscuro, los tonos OSCUROS de la paleta sobre un casi negro: el color tiñe sin aclarar el fondo, y las tarjetas y el\n    // vidrio (más claros) no se pierden (ver DARK_CANVAS)\n    const darkTones = {primary: palette.primary.dark, info: palette.info.dark, accent: palette.primary.dark};\n    return {\n        backgroundColor: palette.background.default,\n        ...theme.applyStyles('dark', {backgroundColor: DARK_CANVAS.base}),\n        ...fixedBackgroundLayerOf({\n            backgroundColor: palette.background.default,\n            backgroundImage: washOf(AMBIENT_STRENGTH_LIGHT, lightTones),\n            ...theme.applyStyles('dark', {backgroundColor: DARK_CANVAS.base, backgroundImage: washOf(AMBIENT_STRENGTH_DARK, darkTones)}),\n        }),\n    };\n}\n\n// la orilla de arriba con la barra en cápsulas: cuánto tinte del lienzo lleva y cuánto desenfoca (px)\nconst SCROLL_EDGE_TINT_PERCENT = 55;\nconst SCROLL_EDGE_BLUR_PIXELS = 12;\n\n/**\n * La orilla de arriba cuando la barra va en cápsulas (TOP_BAR.capsules con vidrio, como las ventanas de macOS Tahoe; Apple le\n * llama «scroll edge effect»): lo que pasa por debajo se desenfoca y se desvanece hacia el contenido, para que el título\n * y las cápsulas se lean sobre cualquier cosa. Con «Reducir transparencia» o sin backdrop-filter, el color del lienzo.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function scrollEdgeStylesOf(theme) {\n    const palette = paletteOf(theme);\n    const tintOf = (canvas) => `color-mix(in srgb, ${canvas} ${SCROLL_EDGE_TINT_PERCENT}%, transparent)`;\n    const blur = `blur(${SCROLL_EDGE_BLUR_PIXELS}px)`;\n    // de arriba (cubre) hacia abajo (se desvanece): sin raya donde termina\n    const fade = 'linear-gradient(to bottom, black 45%, transparent)';\n    return {\n        backgroundColor: tintOf(palette.background.default),\n        ...theme.applyStyles('dark', {backgroundColor: tintOf(DARK_CANVAS.base)}),\n        backdropFilter: blur,\n        WebkitBackdropFilter: blur,\n        maskImage: fade,\n        WebkitMaskImage: fade,\n        ...solidFallbackOf({backgroundColor: palette.background.default, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n    };\n}\n"],"names":[],"mappings":"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"}

package/dist/theme/glassToasterStyles.js

@@ -0,0 +1,50 @@
+import { paletteOf } from "./components/paletteOf.js";
+import { solidFallbackOf, GLASS_MENU_RADIUS_PIXELS } from "./glassSurface.js";
+const TOAST_OPACITY_PERCENT = 88;
+const STATUS_TINT_PERCENT = 14;
+const TOAST_STATUSES = Object.freeze(["success", "info", "warning", "error"]);
+const GLASS_BLUR = "blur(20px) saturate(180%)";
+const TOASTER_LIGHT_SELECTOR = "html [data-sonner-toaster][data-sonner-theme='light']";
+const TOASTER_DARK_SELECTOR = "html [data-sonner-toaster][data-sonner-theme='dark']";
+const TOAST_SELECTOR = "html [data-sonner-toaster] [data-sonner-toast][data-styled='true']";
+function toasterVariablesOf(palette, textShade, surfaceOf) {
+  const variables = {
+    "--border-radius": `${GLASS_MENU_RADIUS_PIXELS}px`,
+    "--normal-bg": surfaceOf(palette.background.paper),
+    "--normal-border": palette.divider,
+    "--normal-text": palette.text.primary
+  };
+  TOAST_STATUSES.forEach((status) => {
+    const statusColor = palette[status];
+    variables[`--${status}-bg`] = surfaceOf(`color-mix(in srgb, ${statusColor.main} ${STATUS_TINT_PERCENT}%, ${palette.background.paper})`);
+    variables[`--${status}-border`] = `color-mix(in srgb, ${statusColor.main} 35%, transparent)`;
+    variables[`--${status}-text`] = statusColor[textShade];
+  });
+  return variables;
+}
+function glassToasterStylesOf(theme) {
+  const palette = paletteOf(theme);
+  const glassOf = (color) => `color-mix(in srgb, ${color} ${TOAST_OPACITY_PERCENT}%, transparent)`;
+  const solidOf = (color) => color;
+  const toastShadow = "inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.12)";
+  return {
+    [TOASTER_LIGHT_SELECTOR]: toasterVariablesOf(palette, "dark", glassOf),
+    [TOASTER_DARK_SELECTOR]: toasterVariablesOf(palette, "light", glassOf),
+    [TOAST_SELECTOR]: {
+      backdropFilter: GLASS_BLUR,
+      WebkitBackdropFilter: GLASS_BLUR,
+      boxShadow: toastShadow,
+      "&:focus-visible": { boxShadow: `${toastShadow}, 0 0 0 2px ${palette.primary.main}` }
+    },
+    // menos transparencia, más contraste o un navegador que no desenfoca: los mismos colores, sólidos
+    ...solidFallbackOf({
+      [TOASTER_LIGHT_SELECTOR]: toasterVariablesOf(palette, "dark", solidOf),
+      [TOASTER_DARK_SELECTOR]: toasterVariablesOf(palette, "light", solidOf),
+      [TOAST_SELECTOR]: { backdropFilter: "none", WebkitBackdropFilter: "none" }
+    })
+  };
+}
+export {
+  glassToasterStylesOf
+};
+//# sourceMappingURL=glassToasterStyles.js.map

package/dist/theme/glassToasterStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glassToasterStyles.js","sources":["../../src/theme/glassToasterStyles.js"],"sourcesContent":["// Los avisos (el <Toaster/> de sonner) de vidrio, cuando el tema lo trae (createToolkitTheme({glass: true})). Los avisos\n// flotan sobre todo: es justo donde la guía del vidrio lo pide.\n//\n// Cómo: sonner pinta sus colores con variables CSS (--normal-bg, --success-bg, --success-text…). Aquí se cambian por los\n// colores del tema de MUI mezclados con transparencia, y a cada aviso se le pone el desenfoque y el brillo del borde. Los\n// colores del tema van como variables de MUI: cambian solos con claro y oscuro.\n//\n// OJO, trampas de sonner:\n//   - sus variables viven en [data-sonner-toaster][data-sonner-theme=light|dark]; sin el `html` de adelante, ganaba la de\n//     sonner o la nuestra según qué hoja se cargara al final.\n//   - su texto de error, aviso… es su propio color; aquí sale del tema: en claro el tono oscuro (`dark`) del color y en\n//     oscuro el claro (`light`), para que se lea sobre el fondo teñido.\n//   - el contorno del foco del teclado estaba en box-shadow, que aquí se reemplaza: se vuelve a poner.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {GLASS_MENU_RADIUS_PIXELS, solidFallbackOf} from '@/theme/glassSurface.js';\n\n// el texto de un aviso es chico: un poco más opaco que el resto del vidrio\nconst TOAST_OPACITY_PERCENT = 88;\n// cuánto del color del aviso (éxito, error…) tiñe su fondo\nconst STATUS_TINT_PERCENT = 14;\nconst TOAST_STATUSES = Object.freeze(['success', 'info', 'warning', 'error']);\nconst GLASS_BLUR = 'blur(20px) saturate(180%)';\n\nconst TOASTER_LIGHT_SELECTOR = \"html [data-sonner-toaster][data-sonner-theme='light']\";\nconst TOASTER_DARK_SELECTOR = \"html [data-sonner-toaster][data-sonner-theme='dark']\";\nconst TOAST_SELECTOR = \"html [data-sonner-toaster] [data-sonner-toast][data-styled='true']\";\n\n/**\n * Las variables de color de sonner con los colores del tema.\n *\n * @param {object} palette la paleta (con variables CSS si las hay)\n * @param {'light'|'dark'} textShade el tono del texto de cada color: en claro el oscuro, en oscuro el claro\n * @param {(color: string) => string} surfaceOf con o sin transparencia\n * @returns {object}\n */\nfunction toasterVariablesOf(palette, textShade, surfaceOf) {\n    const variables = {\n        '--border-radius': `${GLASS_MENU_RADIUS_PIXELS}px`,\n        '--normal-bg': surfaceOf(palette.background.paper),\n        '--normal-border': palette.divider,\n        '--normal-text': palette.text.primary,\n    };\n    TOAST_STATUSES.forEach((status) => {\n        const statusColor = palette[status];\n        variables[`--${status}-bg`] = surfaceOf(`color-mix(in srgb, ${statusColor.main} ${STATUS_TINT_PERCENT}%, ${palette.background.paper})`);\n        variables[`--${status}-border`] = `color-mix(in srgb, ${statusColor.main} 35%, transparent)`;\n        variables[`--${status}-text`] = statusColor[textShade];\n    });\n    return variables;\n}\n\n/**\n * Los estilos globales de los avisos de vidrio (para <GlobalStyles styles={…} />).\n *\n * @param {object} theme el tema de MUI\n * @returns {object}\n */\nexport function glassToasterStylesOf(theme) {\n    const palette = paletteOf(theme);\n    const glassOf = (color) => `color-mix(in srgb, ${color} ${TOAST_OPACITY_PERCENT}%, transparent)`;\n    const solidOf = (color) => color;\n    const toastShadow = 'inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.12)';\n    return {\n        [TOASTER_LIGHT_SELECTOR]: toasterVariablesOf(palette, 'dark', glassOf),\n        [TOASTER_DARK_SELECTOR]: toasterVariablesOf(palette, 'light', glassOf),\n        [TOAST_SELECTOR]: {\n            backdropFilter: GLASS_BLUR,\n            WebkitBackdropFilter: GLASS_BLUR,\n            boxShadow: toastShadow,\n            '&:focus-visible': {boxShadow: `${toastShadow}, 0 0 0 2px ${palette.primary.main}`},\n        },\n        // menos transparencia, más contraste o un navegador que no desenfoca: los mismos colores, sólidos\n        ...solidFallbackOf({\n            [TOASTER_LIGHT_SELECTOR]: toasterVariablesOf(palette, 'dark', solidOf),\n            [TOASTER_DARK_SELECTOR]: toasterVariablesOf(palette, 'light', solidOf),\n            [TOAST_SELECTOR]: {backdropFilter: 'none', WebkitBackdropFilter: 'none'},\n        }),\n    };\n}\n"],"names":[],"mappings":";;AAmBA,MAAM,wBAAwB;AAE9B,MAAM,sBAAsB;AAC5B,MAAM,iBAAiB,OAAO,OAAO,CAAC,WAAW,QAAQ,WAAW,OAAO,CAAC;AAC5E,MAAM,aAAa;AAEnB,MAAM,yBAAyB;AAC/B,MAAM,wBAAwB;AAC9B,MAAM,iBAAiB;AAUvB,SAAS,mBAAmB,SAAS,WAAW,WAAW;AACvD,QAAM,YAAY;AAAA,IACd,mBAAmB,GAAG,wBAAwB;AAAA,IAC9C,eAAe,UAAU,QAAQ,WAAW,KAAK;AAAA,IACjD,mBAAmB,QAAQ;AAAA,IAC3B,iBAAiB,QAAQ,KAAK;AAAA,EACtC;AACI,iBAAe,QAAQ,CAAC,WAAW;AAC/B,UAAM,cAAc,QAAQ,MAAM;AAClC,cAAU,KAAK,MAAM,KAAK,IAAI,UAAU,sBAAsB,YAAY,IAAI,IAAI,mBAAmB,MAAM,QAAQ,WAAW,KAAK,GAAG;AACtI,cAAU,KAAK,MAAM,SAAS,IAAI,sBAAsB,YAAY,IAAI;AACxE,cAAU,KAAK,MAAM,OAAO,IAAI,YAAY,SAAS;AAAA,EACzD,CAAC;AACD,SAAO;AACX;AAQO,SAAS,qBAAqB,OAAO;AACxC,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,UAAU,CAAC,UAAU,sBAAsB,KAAK,IAAI,qBAAqB;AAC/E,QAAM,UAAU,CAAC,UAAU;AAC3B,QAAM,cAAc;AACpB,SAAO;AAAA,IACH,CAAC,sBAAsB,GAAG,mBAAmB,SAAS,QAAQ,OAAO;AAAA,IACrE,CAAC,qBAAqB,GAAG,mBAAmB,SAAS,SAAS,OAAO;AAAA,IACrE,CAAC,cAAc,GAAG;AAAA,MACd,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,WAAW;AAAA,MACX,mBAAmB,EAAC,WAAW,GAAG,WAAW,eAAe,QAAQ,QAAQ,IAAI,GAAE;AAAA,IAC9F;AAAA;AAAA,IAEQ,GAAG,gBAAgB;AAAA,MACf,CAAC,sBAAsB,GAAG,mBAAmB,SAAS,QAAQ,OAAO;AAAA,MACrE,CAAC,qBAAqB,GAAG,mBAAmB,SAAS,SAAS,OAAO;AAAA,MACrE,CAAC,cAAc,GAAG,EAAC,gBAAgB,QAAQ,sBAAsB,OAAM;AAAA,IACnF,CAAS;AAAA,EACT;AACA;"}

package/dist/theme/mergeComponents.js

@@ -0,0 +1,42 @@
+function asStyleFunction(style) {
+  return typeof style === "function" ? style : () => style ?? {};
+}
+function isStyleObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function mergeStyles(baseStyle, extraStyle) {
+  const merged = { ...baseStyle };
+  Object.entries(extraStyle).forEach(([key, extraValue]) => {
+    const baseValue = merged[key];
+    delete merged[key];
+    merged[key] = isStyleObject(baseValue) && isStyleObject(extraValue) ? mergeStyles(baseValue, extraValue) : extraValue;
+  });
+  return merged;
+}
+function mergeComponents(baseComponents, extraComponents) {
+  const merged = { ...baseComponents };
+  Object.entries(extraComponents).forEach(([componentName, extraSettings]) => {
+    const baseSettings = merged[componentName];
+    if (!baseSettings) {
+      merged[componentName] = extraSettings;
+      return;
+    }
+    const styleOverrides = { ...baseSettings.styleOverrides };
+    Object.entries(extraSettings.styleOverrides ?? {}).forEach(([slotName, extraStyle]) => {
+      const baseStyle = styleOverrides[slotName];
+      styleOverrides[slotName] = baseStyle === void 0 ? extraStyle : (props) => mergeStyles(asStyleFunction(baseStyle)(props), asStyleFunction(extraStyle)(props));
+    });
+    merged[componentName] = {
+      ...baseSettings,
+      ...extraSettings,
+      defaultProps: { ...baseSettings.defaultProps, ...extraSettings.defaultProps },
+      styleOverrides
+    };
+  });
+  return merged;
+}
+export {
+  mergeComponents,
+  mergeStyles
+};
+//# sourceMappingURL=mergeComponents.js.map

package/dist/theme/mergeComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeComponents.js","sources":["../../src/theme/mergeComponents.js"],"sourcesContent":["// Junta dos `components` de tema de MUI sin que el segundo borre al primero: si los dos ajustan el mismo componente\n// (la barra normal y la barra de vidrio), se suman sus defaultProps y, en cada parte (root, paper…), sus estilos; con el\n// mismo estilo, gana el segundo.\n//\n// Por qué hace falta: con {...primero, ...segundo}, el MuiAppBar del vidrio reemplazaba completo al normal y la barra\n// perdía su color y su línea de abajo.\n// OJO, trampa pagada al sumar los estilos: con {...primero, ...segundo}, una llave que ya estaba (el modo oscuro) se queda\n// en su lugar original, ANTES de lo que agrega el segundo (el sólido de «reducir transparencia»), y en CSS gana lo último:\n// en oscuro con esa opción la barra salía naranja. Aquí lo del segundo siempre queda al final, y lo anidado (un selector,\n// una media query, el modo oscuro) se suma por dentro en vez de reemplazarse.\n//\n// Funciones puras, sin React: function (regla de la casa). Se prueban con node --test (mergeComponents.test.js).\n\n/**\n * Un estilo de MUI puede ser un objeto o una función que recibe {theme, ownerState}: aquí siempre es función.\n *\n * @param {object|Function|undefined} style\n * @returns {(props: object) => object}\n */\nfunction asStyleFunction(style) {\n    return typeof style === 'function' ? style : () => style ?? {};\n}\n\n/**\n * @param {unknown} value\n * @returns {boolean} si es un objeto de estilos (no un arreglo ni un texto)\n */\nfunction isStyleObject(value) {\n    return value !== null && typeof value === 'object' && !Array.isArray(value);\n}\n\n/**\n * Suma dos objetos de estilos: con la misma propiedad gana el segundo, lo anidado se suma por dentro y lo del segundo\n * queda después de lo del primero (en CSS gana lo último).\n *\n * @param {object} baseStyle\n * @param {object} extraStyle\n * @returns {object}\n */\nexport function mergeStyles(baseStyle, extraStyle) {\n    const merged = {...baseStyle};\n    Object.entries(extraStyle).forEach(([key, extraValue]) => {\n        const baseValue = merged[key];\n        // se borra y se vuelve a poner para que quede al final, aunque la llave ya existiera\n        delete merged[key];\n        merged[key] = isStyleObject(baseValue) && isStyleObject(extraValue) ? mergeStyles(baseValue, extraValue) : extraValue;\n    });\n    return merged;\n}\n\n/**\n * @param {object} baseComponents\n * @param {object} extraComponents gana cuando chocan\n * @returns {object}\n */\nexport function mergeComponents(baseComponents, extraComponents) {\n    const merged = {...baseComponents};\n    Object.entries(extraComponents).forEach(([componentName, extraSettings]) => {\n        const baseSettings = merged[componentName];\n        if (!baseSettings) {\n            merged[componentName] = extraSettings;\n            return;\n        }\n        const styleOverrides = {...baseSettings.styleOverrides};\n        Object.entries(extraSettings.styleOverrides ?? {}).forEach(([slotName, extraStyle]) => {\n            const baseStyle = styleOverrides[slotName];\n            styleOverrides[slotName] = baseStyle === undefined\n                ? extraStyle\n                : (props) => mergeStyles(asStyleFunction(baseStyle)(props), asStyleFunction(extraStyle)(props));\n        });\n        merged[componentName] = {\n            ...baseSettings,\n            ...extraSettings,\n            defaultProps: {...baseSettings.defaultProps, ...extraSettings.defaultProps},\n            styleOverrides,\n        };\n    });\n    return merged;\n}\n"],"names":[],"mappings":"AAmBA,SAAS,gBAAgB,OAAO;AAC5B,SAAO,OAAO,UAAU,aAAa,QAAQ,MAAM,SAAS,CAAA;AAChE;AAMA,SAAS,cAAc,OAAO;AAC1B,SAAO,UAAU,QAAQ,OAAO,UAAU,YAAY,CAAC,MAAM,QAAQ,KAAK;AAC9E;AAUO,SAAS,YAAY,WAAW,YAAY;AAC/C,QAAM,SAAS,EAAC,GAAG,UAAS;AAC5B,SAAO,QAAQ,UAAU,EAAE,QAAQ,CAAC,CAAC,KAAK,UAAU,MAAM;AACtD,UAAM,YAAY,OAAO,GAAG;AAE5B,WAAO,OAAO,GAAG;AACjB,WAAO,GAAG,IAAI,cAAc,SAAS,KAAK,cAAc,UAAU,IAAI,YAAY,WAAW,UAAU,IAAI;AAAA,EAC/G,CAAC;AACD,SAAO;AACX;AAOO,SAAS,gBAAgB,gBAAgB,iBAAiB;AAC7D,QAAM,SAAS,EAAC,GAAG,eAAc;AACjC,SAAO,QAAQ,eAAe,EAAE,QAAQ,CAAC,CAAC,eAAe,aAAa,MAAM;AACxE,UAAM,eAAe,OAAO,aAAa;AACzC,QAAI,CAAC,cAAc;AACf,aAAO,aAAa,IAAI;AACxB;AAAA,IACJ;AACA,UAAM,iBAAiB,EAAC,GAAG,aAAa,eAAc;AACtD,WAAO,QAAQ,cAAc,kBAAkB,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,UAAU,UAAU,MAAM;AACnF,YAAM,YAAY,eAAe,QAAQ;AACzC,qBAAe,QAAQ,IAAI,cAAc,SACnC,aACA,CAAC,UAAU,YAAY,gBAAgB,SAAS,EAAE,KAAK,GAAG,gBAAgB,UAAU,EAAE,KAAK,CAAC;AAAA,IACtG,CAAC;AACD,WAAO,aAAa,IAAI;AAAA,MACpB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,cAAc,EAAC,GAAG,aAAa,cAAc,GAAG,cAAc,aAAY;AAAA,MAC1E;AAAA,IACZ;AAAA,EACI,CAAC;AACD,SAAO;AACX;"}

package/dist/theme/stackcraftPalette.js

@@ -0,0 +1,59 @@
+const STACKCRAFT = Object.freeze({
+  // principales
+  forge: "#FF6B1A",
+  ember: "#CC5614",
+  spark: "#FF8A4D",
+  // neutros
+  carbon: "#0A0A0A",
+  iron: "#1A1A1A",
+  steel: "#4A4A4A",
+  mist: "#E6E6E6",
+  cloud: "#FAFAFA",
+  // SOLO para «no aplica» / neutral sin estatus: un cuarto estado que no es éxito, aviso, error ni información. Frío para
+  // equilibrar el Forge sin competir; 10.4:1 sobre Cloud.
+  slateNavy: "#1E3A8A"
+});
+const STACKCRAFT_GREY = Object.freeze({
+  50: STACKCRAFT.cloud,
+  100: STACKCRAFT.mist,
+  200: "#D6D3D1",
+  300: "#A8A29E",
+  400: "#78716C",
+  500: STACKCRAFT.steel,
+  600: "#3C3C3C",
+  700: "#2A2A2A",
+  800: STACKCRAFT.iron,
+  900: STACKCRAFT.carbon
+});
+const stackcraftLightPalette = Object.freeze({
+  primary: { main: STACKCRAFT.forge, light: STACKCRAFT.spark, dark: STACKCRAFT.ember, contrastText: STACKCRAFT.cloud },
+  secondary: { main: STACKCRAFT.steel, light: STACKCRAFT.mist, dark: STACKCRAFT.iron, contrastText: STACKCRAFT.cloud },
+  success: { main: "#15803d", light: "#4ade80", dark: "#14532d", contrastText: STACKCRAFT.cloud },
+  warning: { main: "#b45309", light: "#fbbf24", dark: "#92400e", contrastText: STACKCRAFT.cloud },
+  error: { main: "#b91c1c", light: "#f87171", dark: "#991b1b", contrastText: STACKCRAFT.cloud },
+  info: { main: "#0369a1", light: "#38bdf8", dark: "#075985", contrastText: STACKCRAFT.cloud },
+  grey: STACKCRAFT_GREY,
+  text: { primary: "rgba(26, 26, 26, 0.92)", secondary: "rgba(26, 26, 26, 0.65)", disabled: "rgba(26, 26, 26, 0.40)" },
+  divider: "rgba(26, 26, 26, 0.14)",
+  background: { default: STACKCRAFT.cloud, paper: "#FFFFFF" },
+  action: { hover: "rgba(26, 26, 26, 0.045)", selected: "rgba(26, 26, 26, 0.07)" }
+});
+const stackcraftDarkPalette = Object.freeze({
+  primary: { main: STACKCRAFT.forge, light: STACKCRAFT.spark, dark: STACKCRAFT.ember, contrastText: STACKCRAFT.carbon },
+  secondary: { main: STACKCRAFT.mist, light: STACKCRAFT.cloud, dark: STACKCRAFT.steel, contrastText: STACKCRAFT.carbon },
+  success: { main: "#4ade80", light: "#86efac", dark: "#16a34a", contrastText: STACKCRAFT.carbon },
+  warning: { main: "#fbbf24", light: "#fde68a", dark: "#d97706", contrastText: STACKCRAFT.carbon },
+  error: { main: "#f87171", light: "#fca5a5", dark: "#dc2626", contrastText: STACKCRAFT.carbon },
+  info: { main: "#38bdf8", light: "#7dd3fc", dark: "#0284c7", contrastText: STACKCRAFT.carbon },
+  grey: STACKCRAFT_GREY,
+  text: { primary: "rgba(230, 230, 230, 0.95)", secondary: "rgba(230, 230, 230, 0.70)", disabled: "rgba(230, 230, 230, 0.42)" },
+  divider: STACKCRAFT.steel,
+  background: { default: STACKCRAFT.carbon, paper: STACKCRAFT.iron },
+  action: { hover: "rgba(230, 230, 230, 0.05)", selected: "rgba(230, 230, 230, 0.08)" }
+});
+export {
+  STACKCRAFT,
+  stackcraftDarkPalette,
+  stackcraftLightPalette
+};
+//# sourceMappingURL=stackcraftPalette.js.map

package/dist/theme/stackcraftPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stackcraftPalette.js","sources":["../../src/theme/stackcraftPalette.js"],"sourcesContent":["// Los colores de Stackcraft (la marca del autor del framework), para claro y oscuro: los que usa createToolkitTheme() si\n// el proyecto no pasa los suyos. Vienen del tema de walk-ot, alineado al manual de identidad de Stackcraft v1.0.\n//\n// Las decisiones que ya se probaron, con su porqué:\n//   1. El lienzo es Cloud #FAFAFA y las tarjetas blanco puro: se distinguen sin sombras.\n//   2. Forge #FF6B1A es el principal en los DOS modos: 3.2:1 sobre Cloud (AA para texto en negrita de 14 px o más) y\n//      6.78:1 sobre Carbon. Un solo naranja simplifica la marca.\n//   3. El texto sobre Forge se invierte con el modo: Cloud (claro) en modo claro, Carbon (oscuro) en modo oscuro.\n//   4. El aviso (warning) es ÁMBAR, no naranja: un naranja de aviso se confundía con el botón principal; el ámbar se\n//      distingue también con daltonismo.\n//   5. El secundario es neutro (Steel / Mist): una sola identidad de color y escala de grises (lo que hacen Vercel o\n//      Linear). Si hace falta otro acento, Ember o Spark.\n//   6. El texto en claro es Iron con transparencia 0.92, no negro puro: cansa menos la vista en jornadas largas.\n//\n// Funciones puras, sin React: function (regla de la casa).\n\n/** Los tokens de la marca, para lo que la paleta de MUI no cubre (un SVG, una insignia decorativa). */\nexport const STACKCRAFT = Object.freeze({\n    // principales\n    forge: '#FF6B1A',\n    ember: '#CC5614',\n    spark: '#FF8A4D',\n    // neutros\n    carbon: '#0A0A0A',\n    iron: '#1A1A1A',\n    steel: '#4A4A4A',\n    mist: '#E6E6E6',\n    cloud: '#FAFAFA',\n    // SOLO para «no aplica» / neutral sin estatus: un cuarto estado que no es éxito, aviso, error ni información. Frío para\n    // equilibrar el Forge sin competir; 10.4:1 sobre Cloud.\n    slateNavy: '#1E3A8A',\n});\n\n// la escala de grises de la marca (tonos cálidos entre Mist y Steel)\nconst STACKCRAFT_GREY = Object.freeze({\n    50: STACKCRAFT.cloud,\n    100: STACKCRAFT.mist,\n    200: '#D6D3D1',\n    300: '#A8A29E',\n    400: '#78716C',\n    500: STACKCRAFT.steel,\n    600: '#3C3C3C',\n    700: '#2A2A2A',\n    800: STACKCRAFT.iron,\n    900: STACKCRAFT.carbon,\n});\n\n/** La paleta del modo claro. */\nexport const stackcraftLightPalette = Object.freeze({\n    primary: {main: STACKCRAFT.forge, light: STACKCRAFT.spark, dark: STACKCRAFT.ember, contrastText: STACKCRAFT.cloud},\n    secondary: {main: STACKCRAFT.steel, light: STACKCRAFT.mist, dark: STACKCRAFT.iron, contrastText: STACKCRAFT.cloud},\n    success: {main: '#15803d', light: '#4ade80', dark: '#14532d', contrastText: STACKCRAFT.cloud},\n    warning: {main: '#b45309', light: '#fbbf24', dark: '#92400e', contrastText: STACKCRAFT.cloud},\n    error: {main: '#b91c1c', light: '#f87171', dark: '#991b1b', contrastText: STACKCRAFT.cloud},\n    info: {main: '#0369a1', light: '#38bdf8', dark: '#075985', contrastText: STACKCRAFT.cloud},\n    grey: STACKCRAFT_GREY,\n    text: {primary: 'rgba(26, 26, 26, 0.92)', secondary: 'rgba(26, 26, 26, 0.65)', disabled: 'rgba(26, 26, 26, 0.40)'},\n    divider: 'rgba(26, 26, 26, 0.14)',\n    background: {default: STACKCRAFT.cloud, paper: '#FFFFFF'},\n    action: {hover: 'rgba(26, 26, 26, 0.045)', selected: 'rgba(26, 26, 26, 0.07)'},\n});\n\n/** La paleta del modo oscuro. */\nexport const stackcraftDarkPalette = Object.freeze({\n    primary: {main: STACKCRAFT.forge, light: STACKCRAFT.spark, dark: STACKCRAFT.ember, contrastText: STACKCRAFT.carbon},\n    secondary: {main: STACKCRAFT.mist, light: STACKCRAFT.cloud, dark: STACKCRAFT.steel, contrastText: STACKCRAFT.carbon},\n    success: {main: '#4ade80', light: '#86efac', dark: '#16a34a', contrastText: STACKCRAFT.carbon},\n    warning: {main: '#fbbf24', light: '#fde68a', dark: '#d97706', contrastText: STACKCRAFT.carbon},\n    error: {main: '#f87171', light: '#fca5a5', dark: '#dc2626', contrastText: STACKCRAFT.carbon},\n    info: {main: '#38bdf8', light: '#7dd3fc', dark: '#0284c7', contrastText: STACKCRAFT.carbon},\n    grey: STACKCRAFT_GREY,\n    text: {primary: 'rgba(230, 230, 230, 0.95)', secondary: 'rgba(230, 230, 230, 0.70)', disabled: 'rgba(230, 230, 230, 0.42)'},\n    divider: STACKCRAFT.steel,\n    background: {default: STACKCRAFT.carbon, paper: STACKCRAFT.iron},\n    action: {hover: 'rgba(230, 230, 230, 0.05)', selected: 'rgba(230, 230, 230, 0.08)'},\n});\n"],"names":[],"mappings":"AAiBY,MAAC,aAAa,OAAO,OAAO;AAAA;AAAA,EAEpC,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA;AAAA,EAEP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA,EAGP,WAAW;AACf,CAAC;AAGD,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAClC,IAAI,WAAW;AAAA,EACf,KAAK,WAAW;AAAA,EAChB,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK,WAAW;AAAA,EAChB,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK,WAAW;AAAA,EAChB,KAAK,WAAW;AACpB,CAAC;AAGW,MAAC,yBAAyB,OAAO,OAAO;AAAA,EAChD,SAAS,EAAC,MAAM,WAAW,OAAO,OAAO,WAAW,OAAO,MAAM,WAAW,OAAO,cAAc,WAAW,MAAK;AAAA,EACjH,WAAW,EAAC,MAAM,WAAW,OAAO,OAAO,WAAW,MAAM,MAAM,WAAW,MAAM,cAAc,WAAW,MAAK;AAAA,EACjH,SAAS,EAAC,MAAM,WAAW,OAAO,WAAW,MAAM,WAAW,cAAc,WAAW,MAAK;AAAA,EAC5F,SAAS,EAAC,MAAM,WAAW,OAAO,WAAW,MAAM,WAAW,cAAc,WAAW,MAAK;AAAA,EAC5F,OAAO,EAAC,MAAM,WAAW,OAAO,WAAW,MAAM,WAAW,cAAc,WAAW,MAAK;AAAA,EAC1F,MAAM,EAAC,MAAM,WAAW,OAAO,WAAW,MAAM,WAAW,cAAc,WAAW,MAAK;AAAA,EACzF,MAAM;AAAA,EACN,MAAM,EAAC,SAAS,0BAA0B,WAAW,0BAA0B,UAAU,yBAAwB;AAAA,EACjH,SAAS;AAAA,EACT,YAAY,EAAC,SAAS,WAAW,OAAO,OAAO,UAAS;AAAA,EACxD,QAAQ,EAAC,OAAO,2BAA2B,UAAU,yBAAwB;AACjF,CAAC;AAGW,MAAC,wBAAwB,OAAO,OAAO;AAAA,EAC/C,SAAS,EAAC,MAAM,WAAW,OAAO,OAAO,WAAW,OAAO,MAAM,WAAW,OAAO,cAAc,WAAW,OAAM;AAAA,EAClH,WAAW,EAAC,MAAM,WAAW,MAAM,OAAO,WAAW,OAAO,MAAM,WAAW,OAAO,cAAc,WAAW,OAAM;AAAA,EACnH,SAAS,EAAC,MAAM,WAAW,OAAO,WAAW,MAAM,WAAW,cAAc,WAAW,OAAM;AAAA,EAC7F,SAAS,EAAC,MAAM,WAAW,OAAO,WAAW,MAAM,WAAW,cAAc,WAAW,OAAM;AAAA,EAC7F,OAAO,EAAC,MAAM,WAAW,OAAO,WAAW,MAAM,WAAW,cAAc,WAAW,OAAM;AAAA,EAC3F,MAAM,EAAC,MAAM,WAAW,OAAO,WAAW,MAAM,WAAW,cAAc,WAAW,OAAM;AAAA,EAC1F,MAAM;AAAA,EACN,MAAM,EAAC,SAAS,6BAA6B,WAAW,6BAA6B,UAAU,4BAA2B;AAAA,EAC1H,SAAS,WAAW;AAAA,EACpB,YAAY,EAAC,SAAS,WAAW,QAAQ,OAAO,WAAW,KAAI;AAAA,EAC/D,QAAQ,EAAC,OAAO,6BAA6B,UAAU,4BAA2B;AACtF,CAAC;"}