@stackcraftmx/calcita 0.56.0 → 0.58.0

package/dist/theme/glassSurface.js.map

@@ -1 +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';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\nimport {cssTokenOf} from '@/theme/cssTokens.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// las esquinas y el desenfoque como variables CSS que el proyecto cambia de un jalón (cssTokens.js), con el valor de siempre\n// como respaldo\nexport const PANEL_RADIUS = cssTokenOf('panelRadius', `${GLASS_PANEL_RADIUS_PIXELS}px`);\nexport const MENU_RADIUS = cssTokenOf('menuRadius', `${GLASS_MENU_RADIUS_PIXELS}px`);\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\nexport const GLASS_BLUR = `blur(${cssTokenOf('glassBlur')}) saturate(${cssTokenOf('glassSaturate')})`;\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        ...lightDarkStylesOf(theme,\n            glassSurfaceOf(lightColor, {opacity: glassOpacity, isControl}),\n            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 lightDarkStylesOf(theme, materialSurfaceOf(lightColor, {opacity}), materialSurfaceOf(darkColor ?? lightColor, {opacity, isDark: true}));\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        ...lightDarkStylesOf(theme,\n            frostedOf(paper, opacityOf(MATERIAL_OPACITY_OFFSET.light)),\n            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 lightDarkStylesOf(theme, {\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    }, {\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 * 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 * Los tonos de los campos por omisión, por modo: fill (el relleno), hoverFill (con el cursor encima), border y hoverBorder\n * (la orilla; transparente: el pozo de Apple no lleva). createToolkitTheme los pone en la paleta de cada modo\n * (palette.field) y el proyecto los cambia con `fields` o con su paleta: blancos con borde, del tono de su marca…\n */\nexport const FIELD_TONES = Object.freeze({\n    light: Object.freeze({fill: FIELD_WELL_FILL.light.rest, hoverFill: FIELD_WELL_FILL.light.hover, border: 'transparent', hoverBorder: 'transparent'}),\n    dark: Object.freeze({fill: FIELD_WELL_FILL.dark.rest, hoverFill: FIELD_WELL_FILL.dark.hover, border: 'transparent', hoverBorder: 'transparent'}),\n});\n\n/**\n * Los tonos de los campos del tema (palette.field, que llena createToolkitTheme; con sus variables CSS cambian solos con el\n * modo, sin reglas de oscuro), o null si el tema no los trae (un createTheme de MUI sin Calcita).\n *\n * @param {object} theme\n * @returns {{fill: string, hoverFill: string, border: string, hoverBorder: string}|null}\n */\nexport function fieldPaletteOf(theme) {\n    return paletteOf(theme).field ?? null;\n}\n\n/** La orilla de un campo: una línea por dentro (sombra inset), que no mueve el texto ni pelea con el aro del foco (outline). */\nfunction fieldEdgeOf(color) {\n    return `inset 0 0 0 1px ${color}`;\n}\n\n// los campos de un renglón de FormSection son cápsulas. OJO: así se aprobaron, aunque salían por accidente: el renglón\n// decía 12 y sx lo multiplicaba por el radio del tema (96 px). Con la variable el número se lee en px, así que la cápsula\n// se escribe tal cual (999 px: con 40 px de alto da lo mismo que 96)\nconst FORM_ROW_FIELD_RADIUS = '999px';\n\n/** Un radio en px: un número lleva «px» (en sx un número se multiplica por el radio del tema); un texto va tal cual. */\nfunction pixelsOf(radius) {\n    return typeof radius === 'number' ? `${radius}px` : radius;\n}\n\n/**\n * Las esquinas de los campos: las que pidió el proyecto en su tema (createToolkitTheme fields.radius; un número va en px\n * en todos lados), o la variable --calcita-field-radius con las de cada estilo de respaldo.\n */\nfunction fieldRadiusOf(theme, lookRadius) {\n    const projectRadius = theme.toolkit?.fields?.radius;\n    return projectRadius !== undefined && projectRadius !== null ? pixelsOf(projectRadius) : cssTokenOf('fieldRadius', pixelsOf(lookRadius));\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 * Los tonos y las esquinas los puede cambiar el proyecto (createToolkitTheme fields).\n *\n * @param {object} theme\n * @param {{radius?: number}} [options] las esquinas del estilo que lo pide (el minimalista las tiene más chicas)\n * @returns {object}\n */\nexport function fieldWellStylesOf(theme, {radius = FIELD_WELL_RADIUS_PIXELS} = {}) {\n    const base = {backgroundImage: 'none', backdropFilter: 'none', WebkitBackdropFilter: 'none', borderRadius: fieldRadiusOf(theme, radius)};\n    const field = fieldPaletteOf(theme);\n    if (field) {\n        return {\n            ...base,\n            backgroundColor: field.fill,\n            boxShadow: fieldEdgeOf(field.border),\n            '&:hover': {backgroundColor: field.hoverFill, boxShadow: fieldEdgeOf(field.hoverBorder)},\n        };\n    }\n    const {light, dark} = FIELD_TONES;\n    return {\n        ...base,\n        ...lightDarkStylesOf(theme,\n            {backgroundColor: light.fill, boxShadow: fieldEdgeOf(light.border), '&:hover': {backgroundColor: light.hoverFill, boxShadow: fieldEdgeOf(light.hoverBorder)}},\n            {backgroundColor: dark.fill, boxShadow: fieldEdgeOf(dark.border), '&:hover': {backgroundColor: dark.hoverFill, boxShadow: fieldEdgeOf(dark.hoverBorder)}}),\n    };\n}\n\n/**\n * Los tonos de los campos como variables (--calcita-field-*) para un contenedor: el renglón de FormSection las pone en sí\n * mismo y sus campos las leen (fieldWellFromVariablesOf). OJO, trampa pagada: el renglón le gana al tema con selectores\n * largos («html body &&& .MuiOutlinedInput-root») y una regla de oscuro anidada ahí abajo nunca aplicaba (en oscuro el\n * campo salía con el gris de claro). En el contenedor la regla de oscuro sí aplica, y los campos heredan la variable.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function fieldVariablesOf(theme) {\n    const variablesOf = (tones) => ({\n        '--calcita-field-fill': tones.fill,\n        '--calcita-field-hover-fill': tones.hoverFill,\n        '--calcita-field-edge': fieldEdgeOf(tones.border),\n        '--calcita-field-hover-edge': fieldEdgeOf(tones.hoverBorder),\n    });\n    const field = fieldPaletteOf(theme);\n    if (field) {\n        return variablesOf(field);\n    }\n    return {...variablesOf(FIELD_TONES.light), ...theme.applyStyles('dark', variablesOf(FIELD_TONES.dark))};\n}\n\n/**\n * El pozo de un campo leyendo las variables de su contenedor (fieldVariablesOf).\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function fieldWellFromVariablesOf(theme) {\n    return {\n        backgroundImage: 'none',\n        backdropFilter: 'none',\n        WebkitBackdropFilter: 'none',\n        borderRadius: fieldRadiusOf(theme, FORM_ROW_FIELD_RADIUS),\n        backgroundColor: 'var(--calcita-field-fill)',\n        boxShadow: 'var(--calcita-field-edge)',\n        '&:hover': {backgroundColor: 'var(--calcita-field-hover-fill)', boxShadow: 'var(--calcita-field-hover-edge)'},\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: cssTokenOf('fieldRadius', `${FIELD_WELL_RADIUS_PIXELS}px`),\n        ...lightDarkStylesOf(theme, {\n            backgroundColor: CANVAS_FIELD.light.rest,\n            boxShadow: `0 0 0 1px ${CANVAS_FIELD.light.edge}`,\n            '&:hover': {backgroundColor: CANVAS_FIELD.light.hover},\n        }, {\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 lightDarkStylesOf(theme, {color: `color-mix(in srgb, ${main} ${keep}%, black)`}, {color: `color-mix(in srgb, ${main} ${keep}%, white)`});\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        ...lightDarkStylesOf(theme, {backgroundColor: palette.background.default}, {backgroundColor: DARK_CANVAS.base}),\n        ...fixedBackgroundLayerOf(lightDarkStylesOf(theme,\n            {backgroundColor: palette.background.default, backgroundImage: washOf(AMBIENT_STRENGTH_LIGHT, lightTones)},\n            {backgroundColor: DARK_CANVAS.base, backgroundImage: washOf(AMBIENT_STRENGTH_DARK, darkTones)})),\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        ...lightDarkStylesOf(theme, {backgroundColor: tintOf(palette.background.default)}, {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":";;;AAuCY,MAAC,gBAAgB;AAGjB,MAAC,4BAA4B;AAG7B,MAAC,2BAA2B;AAI5B,MAAC,eAAe,WAAW,eAAe,GAAG,yBAAyB,IAAI;AAC1E,MAAC,cAAc,WAAW,cAAc,GAAG,wBAAwB,IAAI;AAOvE,MAAC,qBAAqB;AAEtB,MAAC,aAAa,QAAQ,WAAW,WAAW,CAAC,cAAc,WAAW,eAAe,CAAC;AAQtF,MAAC,aAAa,OAAO,OAAO;AAAA,EACpC,SAAS,EAAC,UAAU,8BAA8B,cAAc,MAAM,OAAO,KAAK,YAAY,GAAG,WAAW,KAAI;AAAA,EAChH,OAAO,EAAC,UAAU,4BAA4B,cAAc,MAAM,OAAO,MAAM,YAAY,IAAI,WAAW,IAAG;AACjH,CAAC;AAGD,MAAM,0BAA0B;AAEhC,MAAM,4BAA4B;AAElC,MAAM,2BAA2B;AACjC,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAClC,OAAO,EAAC,MAAM,6BAA6B,OAAO,4BAA2B;AAAA;AAAA,EAE7E,MAAM,EAAC,MAAM,6BAA6B,OAAO,4BAA2B;AAChF,CAAC;AAED,MAAM,eAAe,OAAO,OAAO;AAAA,EAC/B,OAAO,EAAC,MAAM,6BAA6B,OAAO,6BAA6B,MAAM,yBAAwB;AAAA;AAAA;AAAA,EAG7G,MAAM,EAAC,MAAM,6BAA6B,OAAO,6BAA6B,MAAM,4BAA2B;AACnH,CAAC;AAED,MAAM,oBAAoB;AAC1B,MAAM,0BAA0B;AAChC,MAAM,yBAAyB;AAGnB,MAAC,2BAA2B;AAUjC,SAAS,wBAAwB,SAAS,IAAI;AACjD,SAAO,mBAAmB,MAAM,KAAK,wBAAwB,oBAAoB,MAAM;AAC3F;AACA,MAAM,6BAA6B;AACnC,MAAM,2BAA2B;AAMjC,MAAM,yBAAyB,OAAO,OAAO,EAAC,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,QAAQ,GAAE,CAAC;AAI5F,MAAM,wBAAwB,OAAO,OAAO,EAAC,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,QAAQ,GAAE,CAAC;AAC3F,MAAM,cAAc,OAAO,OAAO,EAAC,MAAM,UAAS,CAAC;AAOnD,MAAM,mBAAmB,OAAO,OAAO;AAAA,EACnC,UAAU;AAAA,EAA6B,UAAU;AAAA,EAA4B,WAAW;AAAA,EACxF,SAAS;AAAA,EAA0B,QAAQ;AAAA,EAC3C,eAAe;AACnB,CAAC;AACD,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAClC,UAAU;AAAA,EAA6B,UAAU;AAAA,EAA6B,WAAW;AAAA,EACzF,SAAS;AAAA,EAAuB,QAAQ;AAAA,EACxC,eAAe;AACnB,CAAC;AAED,MAAM,oBAAoB;AAM1B,MAAM,0BAA0B;AAIhC,MAAM,sBAAsB,OAAO,OAAO,EAAC,SAAS,0BAA0B,QAAQ,sEAAqE,CAAC;AAC5J,MAAM,qBAAqB,OAAO,OAAO,EAAC,SAAS,6BAA6B,QAAQ,iCAAgC,CAAC;AAKzH,MAAM,0BAA0B,OAAO,OAAO,EAAC,OAAO,OAAO,MAAM,MAAK,CAAC;AAEzE,MAAM,yBAAyB;AASxB,SAAS,aAAa,OAAO;AAChC,SAAO,QAAQ,OAAO,SAAS,KAAK;AACxC;AAQO,SAAS,eAAe,OAAO;AAClC,SAAO,OAAO,SAAS,OAAO,WAAW;AAC7C;AAYO,SAAS,eAAe,YAAY,EAAC,UAAU,eAAe,SAAS,OAAO,YAAY,MAAK,IAAI,IAAI;AAC1G,QAAM,OAAO,SAAS,kBAAkB;AACxC,QAAM,OAAO,SAAS,sBAAsB,UAAU,WAAW,uBAAuB,OAAO;AAC/F,SAAO;AAAA,IACH,iBAAiB,sBAAsB,IAAI,IAAI,KAAK,MAAM,UAAU,GAAG,CAAC;AAAA,IACxE,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,iBAAiB;AAAA,IACjB,WAAW;AAAA,MACP,mBAAmB,KAAK,QAAQ;AAAA,MAChC,qBAAqB,KAAK,QAAQ;AAAA,MAClC,aAAa,iBAAiB,MAAM,KAAK,SAAS;AAAA,MAClD,aAAa,KAAK,OAAO;AAAA,MACzB,YAAY,KAAK,gBAAgB,KAAK;AAAA,IAClD,EAAU,KAAK,IAAI;AAAA,IACX,GAAG,gBAAgB,EAAC,iBAAiB,YAAY,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EAC9G;AACA;AAUO,SAAS,gBAAgB,YAAY;AACxC,SAAO,EAAC,CAAC,0BAA0B,GAAG,YAAY,CAAC,wBAAwB,GAAG,WAAU;AAC5F;AAgBO,SAAS,cAAc,OAAO,EAAC,OAAO,WAAW,SAAS,YAAY,MAAK,IAAI,IAAI;AACtF,QAAM,aAAa,SAAS,UAAU,KAAK,EAAE,WAAW;AACxD,QAAM,eAAe,WAAW,eAAe,KAAK;AACpD,SAAO;AAAA,IACH,GAAG;AAAA,MAAkB;AAAA,MACjB,eAAe,YAAY,EAAC,SAAS,cAAc,UAAS,CAAC;AAAA,MAC7D,eAAe,aAAa,YAAY,EAAC,SAAS,cAAc,QAAQ,MAAM,UAAS,CAAC;AAAA,IAAC;AAAA,IAC7F,GAAG,YAAY,OAAO,EAAC,YAAY,WAAW,aAAa,YAAY,SAAS,cAAc,UAAS,CAAC;AAAA,EAChH;AACA;AAoBA,SAAS,YAAY,OAAO,EAAC,YAAY,WAAW,SAAS,UAAS,GAAG;AACrE,QAAM,OAAO,YAAY,WAAW,UAAU,WAAW;AACzD,QAAM,cAAc,KAAK,IAAI,GAAG,UAAU,KAAK,SAAS;AACxD,QAAM,WAAW,QAAQ,KAAK,UAAU,2BAA2B,KAAK,QAAQ;AAChF,QAAM,gBAAgB,CAAC,YAAY,WAAW;AAC1C,UAAM,OAAO,SAAS,sBAAsB,UAAU,WAAW,uBAAuB,OAAO;AAC/F,WAAO;AAAA,MACH,iBAAiB,sBAAsB,IAAI,IAAI,KAAK,MAAM,cAAc,GAAG,CAAC;AAAA,MAC5E,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,GAAG,gBAAgB,EAAC,iBAAiB,YAAY,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,IAClH;AAAA,EACI;AACA,QAAM,UAAU,GAAG,wBAAwB;AAE3C,QAAM,UAAU,OAAO,KAAK,MAAM,YAAY,QAAQ,CAAA,CAAE,CAAC,EAAE,CAAC;AAC5D,MAAI,CAAC,SAAS;AACV,WAAO,EAAC,CAAC,OAAO,GAAG,cAAc,YAAY,KAAK,EAAC;AAAA,EACvD;AACA,QAAM,WAAW,QAAQ,WAAW,GAAG,IACjC,EAAC,CAAC,OAAO,GAAG,EAAC,CAAC,OAAO,GAAG,cAAc,WAAW,IAAI,EAAC,EAAC,IACvD,EAAC,CAAC,QAAQ,QAAQ,KAAK,OAAO,CAAC,GAAG,cAAc,WAAW,IAAI,EAAC;AACtE,SAAO,EAAC,CAAC,OAAO,GAAG,cAAc,YAAY,KAAK,GAAG,GAAG,SAAQ;AACpE;AAWO,SAAS,sBAAsB,cAAc;AAChD,QAAM,QAAQ,IAAI;AAClB,QAAM,MAAM,+LACuF,YAAY,yCACxF,KAAK,2LACqF,YAAY,yCACtG,KAAK;AAE5B,SAAO,sBAAsB,mBAAmB,GAAG,CAAC;AACxD;AAWO,SAAS,kBAAkB,YAAY,EAAC,UAAU,eAAe,SAAS,MAAK,IAAI,IAAI;AAC1F,QAAM,OAAO,SAAS,qBAAqB;AAC3C,QAAM,OAAO,SAAS,sBAAsB,UAAU,WAAW,uBAAuB,OAAO;AAC/F,QAAM,SAAS,SAAS,wBAAwB,OAAO,wBAAwB;AAC/E,QAAM,kBAAkB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,MAAM,CAAC;AACjE,SAAO;AAAA,IACH,iBAAiB,sBAAsB,IAAI,IAAI,KAAK,MAAM,kBAAkB,GAAG,CAAC;AAAA,IAChF,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,iBAAiB;AAAA,IACjB,WAAW,aAAa,KAAK,OAAO,KAAK,KAAK,MAAM;AAAA,IACpD,GAAG,gBAAgB,EAAC,iBAAiB,YAAY,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EAC9G;AACA;AAYO,SAAS,iBAAiB,OAAO,EAAC,OAAO,UAAS,IAAI,CAAA,GAAI;AAC7D,QAAM,aAAa,SAAS,UAAU,KAAK,EAAE,WAAW;AACxD,QAAM,UAAU,eAAe,KAAK;AACpC,SAAO,kBAAkB,OAAO,kBAAkB,YAAY,EAAC,QAAO,CAAC,GAAG,kBAAkB,aAAa,YAAY,EAAC,SAAS,QAAQ,KAAI,CAAC,CAAC;AACjJ;AAiBO,SAAS,qBAAqB,OAAO,EAAC,QAAQ,MAAK,IAAI,CAAA,GAAI;AAC9D,QAAM,QAAQ,UAAU,KAAK,EAAE,WAAW;AAC1C,QAAM,YAAY,CAAC,WAAY,QAAQ,yBAAyB,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,eAAe,KAAK,IAAI,MAAM,CAAC,IAAI,GAAG;AACzI,QAAM,UAAU,CAAC,UAAU,mBAAmB,KAAK,KAAK,KAAK;AAC7D,QAAM,YAAY,CAAC,MAAM,aAAa;AAAA,IAClC,iBAAiB,QAAQ,sBAAsB,IAAI,IAAI,OAAO,iBAAiB;AAAA,IAC/E,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,EAC9B;AACI,SAAO;AAAA,IACH,GAAG;AAAA,MAAkB;AAAA,MACjB,UAAU,OAAO,UAAU,wBAAwB,KAAK,CAAC;AAAA,MACzD,UAAU,sBAAsB,KAAK,WAAW,uBAAuB,MAAM,UAAU,wBAAwB,IAAI,CAAC;AAAA,IAAC;AAAA,IACzH,GAAG,gBAAgB,EAAC,iBAAiB,QAAQ,KAAK,GAAG,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EAClH;AACA;AAaO,SAAS,YAAY,OAAO;AAC/B,QAAM,UAAU,UAAU,KAAK;AAC/B,SAAO,kBAAkB,OAAO;AAAA,IAC5B,iBAAiB,QAAQ,WAAW;AAAA,IACpC,OAAO,QAAQ,KAAK;AAAA,IACpB,WAAW;AAAA,EACnB,GAAO;AAAA,IACC,iBAAiB,sBAAsB,QAAQ,OAAO,KAAK,IAAI,uBAAuB;AAAA,IACtF,WAAW;AAAA,EACnB,CAAK;AACL;AAWO,SAAS,iBAAiB,UAAU;AACvC,QAAM,WAAW,cAAc,QAAQ;AACvC,MAAI,CAAC,UAAU;AACX,WAAO;AAAA,EACX;AAEA,WAAS,QAAQ,KAAK,SAAS,wBAAwB,SAAS,yBAAyB;AACrF,UAAM,QAAQ,SAAS,IAAI,CAAC,YAAY,KAAK,MAAO,UAAU,QAAS,GAAG,CAAC;AAC3E,QAAI,oBAAoB,KAAK,KAAK,mBAAmB;AACjD,aAAO,IAAI,MAAM,IAAI,CAAC,YAAY,QAAQ,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AAAA,IACrF;AAAA,EACJ;AACA,SAAO,IAAI,SAAS,IAAI,CAAC,YAAY,KAAK,MAAO,UAAU,yBAA0B,GAAG,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AACrI;AAQA,SAAS,cAAc,OAAO;AAC1B,QAAM,QAAQ,gCAAgC,KAAK,OAAO,SAAS,EAAE,EAAE,MAAM;AAC7E,MAAI,CAAC,OAAO;AACR,WAAO;AAAA,EACX;AACA,QAAM,SAAS,MAAM,CAAC,EAAE,WAAW,IAAI,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,QAAQ,KAAK,EAAE,KAAK,EAAE,IAAI,MAAM,CAAC;AACrG,SAAO,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,SAAS,OAAO,MAAM,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC;AAChF;AAQA,SAAS,oBAAoB,UAAU;AACnC,QAAM,CAAC,KAAK,OAAO,IAAI,IAAI,SAAS,IAAI,CAAC,YAAY;AACjD,UAAM,OAAO,UAAU;AACvB,WAAO,QAAQ,UAAU,OAAO,UAAU,OAAO,SAAS,UAAU;AAAA,EACxE,CAAC;AACD,QAAM,YAAY,SAAS,MAAM,SAAS,QAAQ,SAAS;AAC3D,SAAO,QAAQ,YAAY;AAC/B;AAOY,MAAC,cAAc,OAAO,OAAO;AAAA,EACrC,OAAO,OAAO,OAAO,EAAC,MAAM,gBAAgB,MAAM,MAAM,WAAW,gBAAgB,MAAM,OAAO,QAAQ,eAAe,aAAa,cAAa,CAAC;AAAA,EAClJ,MAAM,OAAO,OAAO,EAAC,MAAM,gBAAgB,KAAK,MAAM,WAAW,gBAAgB,KAAK,OAAO,QAAQ,eAAe,aAAa,cAAa,CAAC;AACnJ,CAAC;AASM,SAAS,eAAe,OAAO;AAClC,SAAO,UAAU,KAAK,EAAE,SAAS;AACrC;AAGA,SAAS,YAAY,OAAO;AACxB,SAAO,mBAAmB,KAAK;AACnC;AAKA,MAAM,wBAAwB;AAG9B,SAAS,SAAS,QAAQ;AACtB,SAAO,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AACxD;AAMA,SAAS,cAAc,OAAO,YAAY;AACtC,QAAM,gBAAgB,MAAM,SAAS,QAAQ;AAC7C,SAAO,kBAAkB,UAAa,kBAAkB,OAAO,SAAS,aAAa,IAAI,WAAW,eAAe,SAAS,UAAU,CAAC;AAC3I;AAaO,SAAS,kBAAkB,OAAO,EAAC,SAAS,yBAAwB,IAAI,CAAA,GAAI;AAC/E,QAAM,OAAO,EAAC,iBAAiB,QAAQ,gBAAgB,QAAQ,sBAAsB,QAAQ,cAAc,cAAc,OAAO,MAAM,EAAC;AACvI,QAAM,QAAQ,eAAe,KAAK;AAClC,MAAI,OAAO;AACP,WAAO;AAAA,MACH,GAAG;AAAA,MACH,iBAAiB,MAAM;AAAA,MACvB,WAAW,YAAY,MAAM,MAAM;AAAA,MACnC,WAAW,EAAC,iBAAiB,MAAM,WAAW,WAAW,YAAY,MAAM,WAAW,EAAC;AAAA,IACnG;AAAA,EACI;AACA,QAAM,EAAC,OAAO,KAAI,IAAI;AACtB,SAAO;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,MAAkB;AAAA,MACjB,EAAC,iBAAiB,MAAM,MAAM,WAAW,YAAY,MAAM,MAAM,GAAG,WAAW,EAAC,iBAAiB,MAAM,WAAW,WAAW,YAAY,MAAM,WAAW,EAAC,EAAC;AAAA,MAC5J,EAAC,iBAAiB,KAAK,MAAM,WAAW,YAAY,KAAK,MAAM,GAAG,WAAW,EAAC,iBAAiB,KAAK,WAAW,WAAW,YAAY,KAAK,WAAW,EAAC,EAAC;AAAA,IAAC;AAAA,EACrK;AACA;AAWO,SAAS,iBAAiB,OAAO;AACpC,QAAM,cAAc,CAAC,WAAW;AAAA,IAC5B,wBAAwB,MAAM;AAAA,IAC9B,8BAA8B,MAAM;AAAA,IACpC,wBAAwB,YAAY,MAAM,MAAM;AAAA,IAChD,8BAA8B,YAAY,MAAM,WAAW;AAAA,EACnE;AACI,QAAM,QAAQ,eAAe,KAAK;AAClC,MAAI,OAAO;AACP,WAAO,YAAY,KAAK;AAAA,EAC5B;AACA,SAAO,EAAC,GAAG,YAAY,YAAY,KAAK,GAAG,GAAG,MAAM,YAAY,QAAQ,YAAY,YAAY,IAAI,CAAC,EAAC;AAC1G;AAQO,SAAS,yBAAyB,OAAO;AAC5C,SAAO;AAAA,IACH,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,cAAc,cAAc,OAAO,qBAAqB;AAAA,IACxD,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,WAAW,EAAC,iBAAiB,mCAAmC,WAAW,kCAAiC;AAAA,EACpH;AACA;AASO,SAAS,oBAAoB,OAAO;AACvC,QAAM,QAAQ,UAAU,KAAK,EAAE,WAAW;AAC1C,SAAO;AAAA,IACH,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,cAAc,WAAW,eAAe,GAAG,wBAAwB,IAAI;AAAA,IACvE,GAAG,kBAAkB,OAAO;AAAA,MACxB,iBAAiB,aAAa,MAAM;AAAA,MACpC,WAAW,aAAa,aAAa,MAAM,IAAI;AAAA,MAC/C,WAAW,EAAC,iBAAiB,aAAa,MAAM,MAAK;AAAA,IACjE,GAAW;AAAA,MACC,iBAAiB,aAAa,KAAK;AAAA,MACnC,WAAW,aAAa,aAAa,KAAK,IAAI;AAAA,MAC9C,WAAW,EAAC,iBAAiB,aAAa,KAAK,MAAK;AAAA,IAChE,CAAS;AAAA,IACD,GAAG,gBAAgB,EAAC,iBAAiB,OAAO,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EACzG;AACA;AAcO,SAAS,mBAAmB,OAAO,YAAY,WAAW;AAC7D,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,QAAQ,QAAQ,SAAS,KAAK,QAAQ,SAAS;AACrD,QAAM,OAAO,MAAM;AACnB,SAAO,kBAAkB,OAAO,EAAC,OAAO,sBAAsB,IAAI,IAAI,IAAI,YAAW,GAAG,EAAC,OAAO,sBAAsB,IAAI,IAAI,IAAI,YAAW,CAAC;AAClJ;AAgBO,SAAS,uBAAuB,aAAa,EAAC,SAAQ,IAAI,CAAA,GAAI;AACjE,SAAO;AAAA,IACH,WAAW;AAAA,IACX,GAAI,YAAY,EAAC,SAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzB,aAAa;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,8BAA8B,EAAC,QAAQ,SAAQ;AAAA,MAC/C,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,GAAG;AAAA,IACf;AAAA,EACA;AACA;AAUO,SAAS,oBAAoB,OAAO;AACvC,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,SAAS,CAAC,UAAU,UAAU;AAAA,IAChC,8DAA8D,MAAM,OAAO,IAAI,SAAS,OAAO;AAAA,IAC/F,iEAAiE,MAAM,IAAI,IAAI,SAAS,IAAI;AAAA,IAC5F,iEAAiE,MAAM,MAAM,IAAI,SAAS,MAAM;AAAA,IAChG,gEAAgE,MAAM,IAAI,IAAI,SAAS,MAAM;AAAA,EACrG,EAAM,KAAK,IAAI;AACX,QAAM,aAAa,EAAC,SAAS,QAAQ,QAAQ,MAAM,MAAM,QAAQ,KAAK,MAAM,QAAQ,QAAQ,QAAQ,MAAK;AAGzG,QAAM,YAAY,EAAC,SAAS,QAAQ,QAAQ,MAAM,MAAM,QAAQ,KAAK,MAAM,QAAQ,QAAQ,QAAQ,KAAI;AACvG,SAAO;AAAA,IACH,GAAG,kBAAkB,OAAO,EAAC,iBAAiB,QAAQ,WAAW,QAAO,GAAG,EAAC,iBAAiB,YAAY,KAAI,CAAC;AAAA,IAC9G,GAAG,uBAAuB;AAAA,MAAkB;AAAA,MACxC,EAAC,iBAAiB,QAAQ,WAAW,SAAS,iBAAiB,OAAO,wBAAwB,UAAU,EAAC;AAAA,MACzG,EAAC,iBAAiB,YAAY,MAAM,iBAAiB,OAAO,uBAAuB,SAAS,EAAC;AAAA,IAAC,CAAC;AAAA,EAC3G;AACA;AAGA,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAUzB,SAAS,mBAAmB,OAAO;AACtC,QAAM,UAAU,UAAU,KAAK;AAC/B,QAAM,SAAS,CAAC,WAAW,sBAAsB,MAAM,IAAI,wBAAwB;AACnF,QAAM,OAAO,QAAQ,uBAAuB;AAE5C,QAAM,OAAO;AACb,SAAO;AAAA,IACH,GAAG,kBAAkB,OAAO,EAAC,iBAAiB,OAAO,QAAQ,WAAW,OAAO,EAAC,GAAG,EAAC,iBAAiB,OAAO,YAAY,IAAI,EAAC,CAAC;AAAA,IAC9H,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,GAAG,gBAAgB,EAAC,iBAAiB,QAAQ,WAAW,SAAS,gBAAgB,QAAQ,sBAAsB,OAAM,CAAC;AAAA,EAC9H;AACA;"}
+{"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';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\nimport {cssTokenOf} from '@/theme/cssTokens.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// las esquinas y el desenfoque como variables CSS que el proyecto cambia de un jalón (cssTokens.js), con el valor de siempre\n// como respaldo\nexport const PANEL_RADIUS = cssTokenOf('panelRadius', `${GLASS_PANEL_RADIUS_PIXELS}px`);\nexport const MENU_RADIUS = cssTokenOf('menuRadius', `${GLASS_MENU_RADIUS_PIXELS}px`);\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\nexport const GLASS_BLUR = `blur(${cssTokenOf('glassBlur')}) saturate(${cssTokenOf('glassSaturate')})`;\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        ...lightDarkStylesOf(theme,\n            glassSurfaceOf(lightColor, {opacity: glassOpacity, isControl}),\n            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 lightDarkStylesOf(theme, materialSurfaceOf(lightColor, {opacity}), materialSurfaceOf(darkColor ?? lightColor, {opacity, isDark: true}));\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        ...lightDarkStylesOf(theme,\n            frostedOf(paper, opacityOf(MATERIAL_OPACITY_OFFSET.light)),\n            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 lightDarkStylesOf(theme, {\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    }, {\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 * 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 * Los tonos de los campos por omisión, por modo: fill (el relleno), hoverFill (con el cursor encima), border y hoverBorder\n * (la orilla; transparente: el pozo de Apple no lleva). createToolkitTheme los pone en la paleta de cada modo\n * (palette.field) y el proyecto los cambia con `fields` o con su paleta: blancos con borde, del tono de su marca…\n */\nexport const FIELD_TONES = Object.freeze({\n    light: Object.freeze({fill: FIELD_WELL_FILL.light.rest, hoverFill: FIELD_WELL_FILL.light.hover, border: 'transparent', hoverBorder: 'transparent'}),\n    dark: Object.freeze({fill: FIELD_WELL_FILL.dark.rest, hoverFill: FIELD_WELL_FILL.dark.hover, border: 'transparent', hoverBorder: 'transparent'}),\n});\n\n/**\n * Los tonos de los campos del tema (palette.field, que llena createToolkitTheme; con sus variables CSS cambian solos con el\n * modo, sin reglas de oscuro), o null si el tema no los trae (un createTheme de MUI sin Calcita).\n *\n * @param {object} theme\n * @returns {{fill: string, hoverFill: string, border: string, hoverBorder: string}|null}\n */\nexport function fieldPaletteOf(theme) {\n    return paletteOf(theme).field ?? null;\n}\n\n/** La orilla de un campo: una línea por dentro (sombra inset), que no mueve el texto ni pelea con el aro del foco (outline). */\nfunction fieldEdgeOf(color) {\n    return `inset 0 0 0 1px ${color}`;\n}\n\n// los campos de un renglón de FormSection son cápsulas. OJO: así se aprobaron, aunque salían por accidente: el renglón\n// decía 12 y sx lo multiplicaba por el radio del tema (96 px). Con la variable el número se lee en px, así que la cápsula\n// se escribe tal cual (999 px: con 40 px de alto da lo mismo que 96)\nconst FORM_ROW_FIELD_RADIUS = '999px';\n\n/** Un radio en px: un número lleva «px» (en sx un número se multiplica por el radio del tema); un texto va tal cual. */\nfunction pixelsOf(radius) {\n    return typeof radius === 'number' ? `${radius}px` : radius;\n}\n\n/**\n * Las esquinas de los campos: las que pidió el proyecto en su tema (createToolkitTheme fields.radius; un número va en px\n * en todos lados), o la variable --calcita-field-radius con las de cada estilo de respaldo.\n */\nfunction fieldRadiusOf(theme, lookRadius) {\n    const projectRadius = theme.toolkit?.fields?.radius;\n    return projectRadius !== undefined && projectRadius !== null ? pixelsOf(projectRadius) : cssTokenOf('fieldRadius', pixelsOf(lookRadius));\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 * Los tonos y las esquinas los puede cambiar el proyecto (createToolkitTheme fields).\n *\n * @param {object} theme\n * @param {{radius?: number}} [options] las esquinas del estilo que lo pide (el minimalista las tiene más chicas)\n * @returns {object}\n */\nexport function fieldWellStylesOf(theme, {radius = FIELD_WELL_RADIUS_PIXELS} = {}) {\n    const base = {backgroundImage: 'none', backdropFilter: 'none', WebkitBackdropFilter: 'none', borderRadius: fieldRadiusOf(theme, radius)};\n    const field = fieldPaletteOf(theme);\n    if (field) {\n        return {...base, ...fieldWellOfTones(field)};\n    }\n    const {light, dark} = FIELD_TONES;\n    return {...base, ...lightDarkStylesOf(theme, fieldWellOfTones(light), fieldWellOfTones(dark))};\n}\n\n/**\n * El relleno y la orilla de un pozo con unos tonos, detrás de las variables --calcita-field-*: si el proyecto las pone en el\n * campo o en algo que lo contiene (su tema, en oscuro, con el azul de su marca), mandan; si no, salen estos tonos, igual que\n * antes. OJO, trampa pagada: las reglas de los campos dentro del contenido llevan selectores largos y el proyecto no les gana\n * con un backgroundColor en MuiOutlinedInput; la variable sí, porque manda la definición más cercana, no la más específica.\n * Así un campo del cajón de filtros o de una ventana sigue la misma regla que uno de FormSection.\n */\nfunction fieldWellOfTones(tones) {\n    return {\n        backgroundColor: `var(--calcita-field-fill, ${tones.fill})`,\n        boxShadow: `var(--calcita-field-edge, ${fieldEdgeOf(tones.border)})`,\n        '&:hover': {\n            backgroundColor: `var(--calcita-field-hover-fill, ${tones.hoverFill})`,\n            boxShadow: `var(--calcita-field-hover-edge, ${fieldEdgeOf(tones.hoverBorder)})`,\n        },\n    };\n}\n\n/**\n * Los tonos de los campos como variables (--calcita-field-*) para un contenedor: el renglón de FormSection las pone en sí\n * mismo y sus campos las leen (fieldWellFromVariablesOf). OJO, trampa pagada: el renglón le gana al tema con selectores\n * largos («html body &&& .MuiOutlinedInput-root») y una regla de oscuro anidada ahí abajo nunca aplicaba (en oscuro el\n * campo salía con el gris de claro). En el contenedor la regla de oscuro sí aplica, y los campos heredan la variable.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function fieldVariablesOf(theme) {\n    const variablesOf = (tones) => ({\n        '--calcita-field-fill': tones.fill,\n        '--calcita-field-hover-fill': tones.hoverFill,\n        '--calcita-field-edge': fieldEdgeOf(tones.border),\n        '--calcita-field-hover-edge': fieldEdgeOf(tones.hoverBorder),\n    });\n    const field = fieldPaletteOf(theme);\n    if (field) {\n        return variablesOf(field);\n    }\n    return {...variablesOf(FIELD_TONES.light), ...theme.applyStyles('dark', variablesOf(FIELD_TONES.dark))};\n}\n\n/**\n * El pozo de un campo leyendo las variables de su contenedor (fieldVariablesOf).\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function fieldWellFromVariablesOf(theme) {\n    return {\n        backgroundImage: 'none',\n        backdropFilter: 'none',\n        WebkitBackdropFilter: 'none',\n        borderRadius: fieldRadiusOf(theme, FORM_ROW_FIELD_RADIUS),\n        backgroundColor: 'var(--calcita-field-fill)',\n        boxShadow: 'var(--calcita-field-edge)',\n        '&:hover': {backgroundColor: 'var(--calcita-field-hover-fill)', boxShadow: 'var(--calcita-field-hover-edge)'},\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: cssTokenOf('fieldRadius', `${FIELD_WELL_RADIUS_PIXELS}px`),\n        ...lightDarkStylesOf(theme, {\n            backgroundColor: CANVAS_FIELD.light.rest,\n            boxShadow: `0 0 0 1px ${CANVAS_FIELD.light.edge}`,\n            '&:hover': {backgroundColor: CANVAS_FIELD.light.hover},\n        }, {\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 lightDarkStylesOf(theme, {color: `color-mix(in srgb, ${main} ${keep}%, black)`}, {color: `color-mix(in srgb, ${main} ${keep}%, white)`});\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        ...lightDarkStylesOf(theme, {backgroundColor: palette.background.default}, {backgroundColor: DARK_CANVAS.base}),\n        ...fixedBackgroundLayerOf(lightDarkStylesOf(theme,\n            {backgroundColor: palette.background.default, backgroundImage: washOf(AMBIENT_STRENGTH_LIGHT, lightTones)},\n            {backgroundColor: DARK_CANVAS.base, backgroundImage: washOf(AMBIENT_STRENGTH_DARK, darkTones)})),\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        ...lightDarkStylesOf(theme, {backgroundColor: tintOf(palette.background.default)}, {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/themePieces.js

@@ -1,7 +1,9 @@
 "use client";
 import { createContext, useContext, createElement } from "react";
+import Stack from "@mui/material/Stack";
 import { styled, useThemeProps } from "@mui/material/styles";
 const PIECE_ONLY_PROPS = /* @__PURE__ */ new Set(["ownSx", "ownerState", "theme", "as"]);
+const STACK_LAYOUT_PROPS = Object.freeze(["spacing", "direction", "useFlexGap", "divider"]);
 const SLOT_PROP_NAMES = Object.freeze(["slots", "slotProps"]);
 const PieceSlotsContext = createContext(null);
 function partKeyOf(slot) {
@@ -28,23 +30,27 @@ function mergedSlotProps(partProps, extra) {
   }
   return merged;
 }
+function withoutStackLayout(partProps) {
+  return Object.fromEntries(Object.entries(partProps).filter(([propName]) => !STACK_LAYOUT_PROPS.includes(propName)));
+}
 function piecePart(name, slot, component = "div") {
   const StyledPart = styled(component, { name, slot, shouldForwardProp: (prop) => !PIECE_ONLY_PROPS.has(prop) })(
     ({ theme, ownSx }) => ownSx ? theme.unstable_sx(ownSx) : {}
   );
   const partKey = partKeyOf(slot);
+  const isStackPart = component === Stack;
   function PiecePart(props) {
     const pieceSlots = useContext(PieceSlotsContext)?.[name];
     if (!pieceSlots) {
       return createElement(StyledPart, props);
     }
-    const partProps = mergedSlotProps(props, pieceSlots.slotProps?.[partKey]);
+    const extraProps = pieceSlots.slotProps?.[partKey];
     const Replacement = pieceSlots.slots?.[partKey];
     if (!Replacement) {
-      return createElement(StyledPart, partProps);
+      return createElement(StyledPart, mergedSlotProps(props, extraProps));
     }
-    const { ownSx: unusedOwnSx, ownerState: unusedOwnerState, ...replacementProps } = partProps;
-    return createElement(Replacement, replacementProps);
+    const { ownSx: unusedOwnSx, ownerState: unusedOwnerState, ...calcitaProps } = props;
+    return createElement(Replacement, mergedSlotProps(isStackPart ? withoutStackLayout(calcitaProps) : calcitaProps, extraProps));
   }
   PiecePart.displayName = `${name}${slot}`;
   return PiecePart;

package/dist/theme/themePieces.js.map

@@ -1 +1 @@
-{"version":3,"file":"themePieces.js","sources":["../../src/theme/themePieces.js"],"sourcesContent":["// Las piezas de Calcita se cambian desde el tema del proyecto como las de MUI: theme.components.Calcita<Pieza> con\n// defaultProps y styleOverrides de cada una de sus partes (root, title, card…). Lo del proyecto va DESPUÉS del estilo de\n// Calcita y le gana; los números se leen como en MUI (borderRadius: 4 son 4 px).\n//\n// Cómo se arma una parte con nombre: piecePart(nombre, parte, componente) da el componente (Box, Paper, Typography…) con su\n// lugar en el tema, y el estilo de Calcita le llega en `ownSx` (lo mismo que antes iba en `sx`, con su forma de sx: objeto,\n// lista o función del tema). Va en la base de la parte, ANTES de lo que ponga el proyecto. OJO: si quedara en `sx`, MUI lo\n// aplicaría al final y el tema del proyecto ya no le podría ganar.\n//\n//   const CardRoot = piecePart('CalcitaMetricCard', 'Root', Paper);\n//   <CardRoot variant=\"outlined\" ownSx={{p: 2, borderRadius: 3}}>…</CardRoot>\n//\n// Y sus props por omisión: const {label, value} = usePieceProps(props, 'CalcitaMetricCard').\n//\n// SLOTS, como en MUI: cada parte con nombre también se puede cambiar por otro componente (`slots`) o recibir props de más\n// (`slotProps`), con el nombre de la parte en minúscula, el mismo de styleOverrides. Desde la pantalla o desde el tema\n// (defaultProps), sin pedirle nada a Calcita:\n//\n//   <RecordCard slots={{avatar: MiAvatar}} slotProps={{title: {component: 'h2'}}} … />\n//   components: {CalcitaRecordCard: {defaultProps: {slotProps: {root: {elevation: 2}}}}}\n//\n// Cada pieza se exporta envuelta con withPieceSlots(Contenido, nombre): la envoltura lee slots y slotProps y se los da a\n// sus partes por contexto (de cada pieza el suyo: una pieza dentro de otra no se los roba).\n//\n// Funciones genéricas del paquete: function (regla de la casa).\nimport {createContext, createElement, useContext} from 'react';\nimport {styled, useThemeProps} from '@mui/material/styles';\n\n// lo que la parte usa y no se le pasa al componente de adentro (ni al HTML)\nconst PIECE_ONLY_PROPS = new Set(['ownSx', 'ownerState', 'theme', 'as']);\n// lo que la pieza recibe para sus partes: no le llega al contenido (no son props suyas)\nconst SLOT_PROP_NAMES = Object.freeze(['slots', 'slotProps']);\n\n// pieza → {slots, slotProps} de la que se está pintando (y de las de afuera)\nconst PieceSlotsContext = createContext(null);\n\n/** El nombre de la parte como va en el tema y en slots: 'Root' → 'root', 'ItemIcon' → 'itemIcon'. */\nfunction partKeyOf(slot) {\n    return `${slot.charAt(0).toLowerCase()}${slot.slice(1)}`;\n}\n\n/**\n * El sx de la pantalla como lista, para ponerlo DESPUÉS del de la pieza sin mezclarlo dentro del mismo objeto.\n *\n * OJO, trampa pagada: `{...estiloDeLaPieza, ...sx}` reemplaza la llave entera cuando las dos traen la misma\n * ('& .MuiDataGrid-cell': la pieza ponía display flex y la pantalla solo quería alinear arriba: se perdía el flex sin\n * avisar). En una lista, MUI aplica cada elemento encima del anterior y se combinan regla por regla.\n *\n *   sx={[{p: 2}, ...sxListOf(sx)]}\n *\n * @param {object|Function|Array<object|Function|boolean|null|undefined>|null|undefined} sx\n * @returns {Array<object|Function|boolean|null|undefined>}\n */\nexport function sxListOf(sx) {\n    if (sx === undefined || sx === null) {\n        return [];\n    }\n    return Array.isArray(sx) ? sx : [sx];\n}\n\n/**\n * Las props de una parte con las de slotProps encima: las de la pantalla ganan, menos className (se suman), style (se\n * juntan) y sx (va después y se combina regla por regla).\n *\n * @param {object} partProps las que le pone Calcita\n * @param {object|((partProps: object) => object)|undefined} extra las de slotProps (o una función que las da)\n * @returns {object}\n */\nexport function mergedSlotProps(partProps, extra) {\n    const extraProps = typeof extra === 'function' ? extra(partProps) : extra;\n    if (!extraProps) {\n        return partProps;\n    }\n    const className = [partProps.className, extraProps.className].filter(Boolean).join(' ') || undefined;\n    const merged = {...partProps, ...extraProps, className};\n    if (partProps.style || extraProps.style) {\n        merged.style = {...partProps.style, ...extraProps.style};\n    }\n    if (partProps.sx !== undefined || extraProps.sx !== undefined) {\n        merged.sx = [...sxListOf(partProps.sx), ...sxListOf(extraProps.sx)];\n    }\n    return merged;\n}\n\n/**\n * Un componente con su lugar en el tema: theme.components[name].styleOverrides[parte con minúscula] se aplica después\n * del estilo de Calcita (ownSx) y gana. La parte también se puede cambiar o recibir props de más con slots y slotProps\n * de su pieza.\n *\n * @template {import('react').ElementType} C\n * @param {string} name el nombre de la pieza en el tema (CalcitaMetricCard)\n * @param {string} slot la parte, con mayúscula: Root, Title, Card…\n * @param {C} [component] lo que se pinta (por omisión un div)\n * @returns {import('react').ComponentType<any>}\n */\nexport function piecePart(name, slot, component = 'div') {\n    const StyledPart = styled(component, {name, slot, shouldForwardProp: (prop) => !PIECE_ONLY_PROPS.has(prop)})(\n        ({theme, ownSx}) => (ownSx ? theme.unstable_sx(ownSx) : {}),\n    );\n    const partKey = partKeyOf(slot);\n\n    // React 19: ref llega como una prop más y se pasa tal cual\n    function PiecePart(props) {\n        const pieceSlots = useContext(PieceSlotsContext)?.[name];\n        if (!pieceSlots) {\n            return createElement(StyledPart, props);\n        }\n        const partProps = mergedSlotProps(props, pieceSlots.slotProps?.[partKey]);\n        const Replacement = pieceSlots.slots?.[partKey];\n        if (!Replacement) {\n            return createElement(StyledPart, partProps);\n        }\n        // el componente de la pantalla no sabe de los estilos de Calcita: le llega lo demás\n        const {ownSx: unusedOwnSx, ownerState: unusedOwnerState, ...replacementProps} = partProps;\n        return createElement(Replacement, replacementProps);\n    }\n    PiecePart.displayName = `${name}${slot}`;\n    return PiecePart;\n}\n\n/**\n * Los props de la pieza con los defaultProps del tema del proyecto debajo: lo que llega en la pantalla gana. Sin slots ni\n * slotProps: esos son de sus partes (withPieceSlots).\n *\n * OJO: una pieza cuyo `slotProps` ya es de otra cosa (TextInput se lo pasa al TextField de MUI: input, htmlInput…) lo\n * conserva con {ownSlotProps: true} y no se envuelve con withPieceSlots.\n *\n * @template {object} P\n * @param {P} props\n * @param {string} name el nombre de la pieza en el tema\n * @param {{ownSlotProps?: boolean}} [options]\n * @returns {P}\n */\nexport function usePieceProps(props, name, {ownSlotProps = false} = {}) {\n    const themedProps = useThemeProps({props, name});\n    if (ownSlotProps || !SLOT_PROP_NAMES.some((propName) => propName in themedProps)) {\n        return themedProps;\n    }\n    const {slots: unusedSlots, slotProps: unusedSlotProps, ...pieceProps} = themedProps;\n    return pieceProps;\n}\n\n/**\n * La pieza con slots y slotProps: lee los de la pantalla (y los de defaultProps del tema) y se los da a sus partes.\n *\n * OJO con el tipo: se toma del componente entero (Parameters) y no de un genérico de sus props: con las props opcionales\n * (ColorSchemeToggle) TypeScript las deducía como `object` y se perdían.\n *\n * Una parte que también se exporta sola y se pinta DENTRO de su pieza madre con el mismo nombre (las tarjetas de\n * TableCardsView dentro de ServerTable, las dos CalcitaServerTable) va con {sharedWithParent: true}: adentro usa los slots\n * de la madre (sin eso los borraría con los suyos, vacíos), salvo que la pantalla le dé los suyos; sola, los suyos.\n *\n * @template {(props: any) => any} C\n * @param {C} Content la pieza\n * @param {string} name el nombre de la pieza en el tema\n * @param {{sharedWithParent?: boolean}} [options]\n * @returns {(props: NonNullable<Parameters<C>[0]> & {slots?: Record<string, import('react').ElementType>, slotProps?: Record<string, object|((partProps: object) => object)>}) => ReturnType<C>}\n */\nexport function withPieceSlots(Content, name, {sharedWithParent = false} = {}) {\n    function PieceWithSlots(props) {\n        const {slots, slotProps} = useThemeProps({props, name});\n        const outerSlots = useContext(PieceSlotsContext);\n        // slots y slotProps son de las partes, no de la pieza: no le llegan (una pieza que avisa de props que no conoce\n        // los tomaría por un error de la pantalla)\n        const {slots: unusedSlots, slotProps: unusedSlotProps, ...contentProps} = props;\n        // dentro de su madre con el mismo nombre se queda con los de ella, salvo que la pantalla le dé los suyos\n        const usesParentSlots = sharedWithParent && Boolean(outerSlots?.[name]) && !props.slots && !props.slotProps;\n        // sin slots ni slotProps (lo de casi siempre) no se agrega nada: la pieza se pinta igual que antes\n        if (usesParentSlots || (!slots && !slotProps && !outerSlots?.[name])) {\n            return createElement(Content, contentProps);\n        }\n        // la de adentro con el mismo nombre (una tarjeta dentro de otra) no hereda los de afuera\n        const value = {...outerSlots, [name]: {slots, slotProps}};\n        return createElement(PieceSlotsContext.Provider, {value}, createElement(Content, contentProps));\n    }\n    PieceWithSlots.displayName = (Content.displayName ?? Content.name ?? name).replace(/Content$/, '');\n    return PieceWithSlots;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"themePieces.js","sources":["../../src/theme/themePieces.js"],"sourcesContent":["// Las piezas de Calcita se cambian desde el tema del proyecto como las de MUI: theme.components.Calcita<Pieza> con\n// defaultProps y styleOverrides de cada una de sus partes (root, title, card…). Lo del proyecto va DESPUÉS del estilo de\n// Calcita y le gana; los números se leen como en MUI (borderRadius: 4 son 4 px).\n//\n// Cómo se arma una parte con nombre: piecePart(nombre, parte, componente) da el componente (Box, Paper, Typography…) con su\n// lugar en el tema, y el estilo de Calcita le llega en `ownSx` (lo mismo que antes iba en `sx`, con su forma de sx: objeto,\n// lista o función del tema). Va en la base de la parte, ANTES de lo que ponga el proyecto. OJO: si quedara en `sx`, MUI lo\n// aplicaría al final y el tema del proyecto ya no le podría ganar.\n//\n//   const CardRoot = piecePart('CalcitaMetricCard', 'Root', Paper);\n//   <CardRoot variant=\"outlined\" ownSx={{p: 2, borderRadius: 3}}>…</CardRoot>\n//\n// Y sus props por omisión: const {label, value} = usePieceProps(props, 'CalcitaMetricCard').\n//\n// SLOTS, como en MUI: cada parte con nombre también se puede cambiar por otro componente (`slots`) o recibir props de más\n// (`slotProps`), con el nombre de la parte en minúscula, el mismo de styleOverrides. Desde la pantalla o desde el tema\n// (defaultProps), sin pedirle nada a Calcita:\n//\n//   <RecordCard slots={{avatar: MiAvatar}} slotProps={{title: {component: 'h2'}}} … />\n//   components: {CalcitaRecordCard: {defaultProps: {slotProps: {root: {elevation: 2}}}}}\n//\n// Una parte propia recibe su contenido y lo demás que le pasa Calcita, pero no su estilo (ownSx) ni, si la parte es un Stack,\n// su acomodo (spacing, direction): eso lo pone ella.\n//\n// Cada pieza se exporta envuelta con withPieceSlots(Contenido, nombre): la envoltura lee slots y slotProps y se los da a\n// sus partes por contexto (de cada pieza el suyo: una pieza dentro de otra no se los roba).\n//\n// Funciones genéricas del paquete: function (regla de la casa).\nimport {createContext, createElement, useContext} from 'react';\nimport Stack from '@mui/material/Stack';\nimport {styled, useThemeProps} from '@mui/material/styles';\n\n// lo que la parte usa y no se le pasa al componente de adentro (ni al HTML)\nconst PIECE_ONLY_PROPS = new Set(['ownSx', 'ownerState', 'theme', 'as']);\n// el acomodo que Calcita le pone a una parte que es un Stack (la separación, la dirección): solo Stack lo entiende. Una parte\n// propia (slots) no lo recibe, igual que no recibe el estilo de Calcita: un Box o un div lo pintaba como atributo del HTML y\n// React avisaba en la consola. Lo que la pantalla pase en slotProps sí le llega.\nconst STACK_LAYOUT_PROPS = Object.freeze(['spacing', 'direction', 'useFlexGap', 'divider']);\n// lo que la pieza recibe para sus partes: no le llega al contenido (no son props suyas)\nconst SLOT_PROP_NAMES = Object.freeze(['slots', 'slotProps']);\n\n// pieza → {slots, slotProps} de la que se está pintando (y de las de afuera)\nconst PieceSlotsContext = createContext(null);\n\n/** El nombre de la parte como va en el tema y en slots: 'Root' → 'root', 'ItemIcon' → 'itemIcon'. */\nfunction partKeyOf(slot) {\n    return `${slot.charAt(0).toLowerCase()}${slot.slice(1)}`;\n}\n\n/**\n * El sx de la pantalla como lista, para ponerlo DESPUÉS del de la pieza sin mezclarlo dentro del mismo objeto.\n *\n * OJO, trampa pagada: `{...estiloDeLaPieza, ...sx}` reemplaza la llave entera cuando las dos traen la misma\n * ('& .MuiDataGrid-cell': la pieza ponía display flex y la pantalla solo quería alinear arriba: se perdía el flex sin\n * avisar). En una lista, MUI aplica cada elemento encima del anterior y se combinan regla por regla.\n *\n *   sx={[{p: 2}, ...sxListOf(sx)]}\n *\n * @param {object|Function|Array<object|Function|boolean|null|undefined>|null|undefined} sx\n * @returns {Array<object|Function|boolean|null|undefined>}\n */\nexport function sxListOf(sx) {\n    if (sx === undefined || sx === null) {\n        return [];\n    }\n    return Array.isArray(sx) ? sx : [sx];\n}\n\n/**\n * Las props de una parte con las de slotProps encima: las de la pantalla ganan, menos className (se suman), style (se\n * juntan) y sx (va después y se combina regla por regla).\n *\n * @param {object} partProps las que le pone Calcita\n * @param {object|((partProps: object) => object)|undefined} extra las de slotProps (o una función que las da)\n * @returns {object}\n */\nexport function mergedSlotProps(partProps, extra) {\n    const extraProps = typeof extra === 'function' ? extra(partProps) : extra;\n    if (!extraProps) {\n        return partProps;\n    }\n    const className = [partProps.className, extraProps.className].filter(Boolean).join(' ') || undefined;\n    const merged = {...partProps, ...extraProps, className};\n    if (partProps.style || extraProps.style) {\n        merged.style = {...partProps.style, ...extraProps.style};\n    }\n    if (partProps.sx !== undefined || extraProps.sx !== undefined) {\n        merged.sx = [...sxListOf(partProps.sx), ...sxListOf(extraProps.sx)];\n    }\n    return merged;\n}\n\n/** Las props de una parte sin el acomodo que solo entiende Stack (STACK_LAYOUT_PROPS). */\nfunction withoutStackLayout(partProps) {\n    return Object.fromEntries(Object.entries(partProps).filter(([propName]) => !STACK_LAYOUT_PROPS.includes(propName)));\n}\n\n/**\n * Un componente con su lugar en el tema: theme.components[name].styleOverrides[parte con minúscula] se aplica después\n * del estilo de Calcita (ownSx) y gana. La parte también se puede cambiar o recibir props de más con slots y slotProps\n * de su pieza.\n *\n * @template {import('react').ElementType} C\n * @param {string} name el nombre de la pieza en el tema (CalcitaMetricCard)\n * @param {string} slot la parte, con mayúscula: Root, Title, Card…\n * @param {C} [component] lo que se pinta (por omisión un div)\n * @returns {import('react').ComponentType<any>}\n */\nexport function piecePart(name, slot, component = 'div') {\n    const StyledPart = styled(component, {name, slot, shouldForwardProp: (prop) => !PIECE_ONLY_PROPS.has(prop)})(\n        ({theme, ownSx}) => (ownSx ? theme.unstable_sx(ownSx) : {}),\n    );\n    const partKey = partKeyOf(slot);\n    const isStackPart = component === Stack;\n\n    // React 19: ref llega como una prop más y se pasa tal cual\n    function PiecePart(props) {\n        const pieceSlots = useContext(PieceSlotsContext)?.[name];\n        if (!pieceSlots) {\n            return createElement(StyledPart, props);\n        }\n        const extraProps = pieceSlots.slotProps?.[partKey];\n        const Replacement = pieceSlots.slots?.[partKey];\n        if (!Replacement) {\n            return createElement(StyledPart, mergedSlotProps(props, extraProps));\n        }\n        // el componente de la pantalla no sabe de los estilos ni del acomodo de Calcita: le llega lo demás, y encima lo que\n        // la pantalla le dé en slotProps\n        const {ownSx: unusedOwnSx, ownerState: unusedOwnerState, ...calcitaProps} = props;\n        return createElement(Replacement, mergedSlotProps(isStackPart ? withoutStackLayout(calcitaProps) : calcitaProps, extraProps));\n    }\n    PiecePart.displayName = `${name}${slot}`;\n    return PiecePart;\n}\n\n/**\n * Los props de la pieza con los defaultProps del tema del proyecto debajo: lo que llega en la pantalla gana. Sin slots ni\n * slotProps: esos son de sus partes (withPieceSlots).\n *\n * OJO: una pieza cuyo `slotProps` ya es de otra cosa (TextInput se lo pasa al TextField de MUI: input, htmlInput…) lo\n * conserva con {ownSlotProps: true} y no se envuelve con withPieceSlots.\n *\n * @template {object} P\n * @param {P} props\n * @param {string} name el nombre de la pieza en el tema\n * @param {{ownSlotProps?: boolean}} [options]\n * @returns {P}\n */\nexport function usePieceProps(props, name, {ownSlotProps = false} = {}) {\n    const themedProps = useThemeProps({props, name});\n    if (ownSlotProps || !SLOT_PROP_NAMES.some((propName) => propName in themedProps)) {\n        return themedProps;\n    }\n    const {slots: unusedSlots, slotProps: unusedSlotProps, ...pieceProps} = themedProps;\n    return pieceProps;\n}\n\n/**\n * La pieza con slots y slotProps: lee los de la pantalla (y los de defaultProps del tema) y se los da a sus partes.\n *\n * OJO con el tipo: se toma del componente entero (Parameters) y no de un genérico de sus props: con las props opcionales\n * (ColorSchemeToggle) TypeScript las deducía como `object` y se perdían.\n *\n * Una parte que también se exporta sola y se pinta DENTRO de su pieza madre con el mismo nombre (las tarjetas de\n * TableCardsView dentro de ServerTable, las dos CalcitaServerTable) va con {sharedWithParent: true}: adentro usa los slots\n * de la madre (sin eso los borraría con los suyos, vacíos), salvo que la pantalla le dé los suyos; sola, los suyos.\n *\n * @template {(props: any) => any} C\n * @param {C} Content la pieza\n * @param {string} name el nombre de la pieza en el tema\n * @param {{sharedWithParent?: boolean}} [options]\n * @returns {(props: NonNullable<Parameters<C>[0]> & {slots?: Record<string, import('react').ElementType>, slotProps?: Record<string, object|((partProps: object) => object)>}) => ReturnType<C>}\n */\nexport function withPieceSlots(Content, name, {sharedWithParent = false} = {}) {\n    function PieceWithSlots(props) {\n        const {slots, slotProps} = useThemeProps({props, name});\n        const outerSlots = useContext(PieceSlotsContext);\n        // slots y slotProps son de las partes, no de la pieza: no le llegan (una pieza que avisa de props que no conoce\n        // los tomaría por un error de la pantalla)\n        const {slots: unusedSlots, slotProps: unusedSlotProps, ...contentProps} = props;\n        // dentro de su madre con el mismo nombre se queda con los de ella, salvo que la pantalla le dé los suyos\n        const usesParentSlots = sharedWithParent && Boolean(outerSlots?.[name]) && !props.slots && !props.slotProps;\n        // sin slots ni slotProps (lo de casi siempre) no se agrega nada: la pieza se pinta igual que antes\n        if (usesParentSlots || (!slots && !slotProps && !outerSlots?.[name])) {\n            return createElement(Content, contentProps);\n        }\n        // la de adentro con el mismo nombre (una tarjeta dentro de otra) no hereda los de afuera\n        const value = {...outerSlots, [name]: {slots, slotProps}};\n        return createElement(PieceSlotsContext.Provider, {value}, createElement(Content, contentProps));\n    }\n    PieceWithSlots.displayName = (Content.displayName ?? Content.name ?? name).replace(/Content$/, '');\n    return PieceWithSlots;\n}\n"],"names":[],"mappings":"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"}

package/dist/types/DataTable/ServerTableFilterDrawer.d.ts

@@ -5,6 +5,8 @@ declare const ServerTableFilterDrawer: (props: {
     title?: string;
     buttonLabel?: string;
     onApply?: (values: Record<string, unknown>) => void;
+    stackPairsBelow?: number;
+    drawerProps?: object;
     children?: import('react').ReactNode;
     texts?: object;
 } & {

package/dist/types/downloads/fileTypes.d.ts

@@ -1,19 +1,19 @@
 /** Los tipos de la casa: su ícono y su color (de la paleta del tema, claro y oscuro). */
 export declare const DEFAULT_FILE_TYPES: Readonly<{
     xlsx: Readonly<{
-        Icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/SvgIcon").SvgIconTypeMap<{}, "svg">> & {
+        Icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         color: "success.main";
     }>;
     csv: Readonly<{
-        Icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/SvgIcon").SvgIconTypeMap<{}, "svg">> & {
+        Icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         color: "info.main";
     }>;
     pdf: Readonly<{
-        Icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/SvgIcon").SvgIconTypeMap<{}, "svg">> & {
+        Icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
         color: "error.main";
@@ -21,7 +21,7 @@ export declare const DEFAULT_FILE_TYPES: Readonly<{
 }>;
 /** Un tipo que nadie declaró: el ícono de archivo y el gris del texto. */
 export declare const UNKNOWN_FILE_TYPE: Readonly<{
-    Icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/SvgIcon").SvgIconTypeMap<{}, "svg">> & {
+    Icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
         muiName: string;
     };
     color: "text.secondary";

package/dist/types/forms/SubmitButton.d.ts

@@ -2,7 +2,7 @@ declare const SubmitButton: (props: {
     children: import('react').ReactNode;
     disabled?: boolean;
     isPending?: boolean;
-} & Omit<import("@mui/material/Button").ButtonProps<"button", {}>, "children" | "type"> & {
+} & Omit<import("@mui/material").ButtonProps<"button", {}>, "children" | "type"> & {
     slots?: Record<string, import('react').ElementType>;
     slotProps?: Record<string, object | ((partProps: object) => object)>;
 }) => import("react").JSX.Element;

package/dist/types/locales/en.d.ts

@@ -214,6 +214,8 @@ declare const _default: Readonly<{
                 lte: string;
             };
             rangeBackwards: string;
+            dateBeforeMin: string;
+            dateAfterMax: string;
             chipFrom: string;
             chipTo: string;
         };
@@ -959,6 +961,19 @@ declare const _default: Readonly<{
         emptyFiltered: string;
         empty: string;
     };
+    sortableTable: {
+        instructions: string;
+        handleHeader: string;
+        handle: string;
+        position: string;
+        lifted: string;
+        moving: string;
+        dropped: string;
+        cancelled: string;
+        reverted: string;
+        empty: string;
+        noValue: string;
+    };
     inbox: {
         labels: string;
         select: string;

package/dist/types/locales/es.d.ts

@@ -214,6 +214,8 @@ declare const _default: Readonly<{
                 lte: string;
             };
             rangeBackwards: string;
+            dateBeforeMin: string;
+            dateAfterMax: string;
             chipFrom: string;
             chipTo: string;
         };
@@ -959,6 +961,19 @@ declare const _default: Readonly<{
         emptyFiltered: string;
         empty: string;
     };
+    sortableTable: {
+        instructions: string;
+        handleHeader: string;
+        handle: string;
+        position: string;
+        lifted: string;
+        moving: string;
+        dropped: string;
+        cancelled: string;
+        reverted: string;
+        empty: string;
+        noValue: string;
+    };
     inbox: {
         labels: string;
         select: string;

package/dist/types/sortable/FormSortableField.d.ts

@@ -0,0 +1,15 @@
+import SortableTable from './SortableTable.js';
+/**
+ * @template {object} Row
+ * @param {{name: string, onReorder?: (change: {rows: Row[], rowId: string|number, fromIndex: number, toIndex: number}) => void} & Omit<Parameters<typeof SortableTable<Row>>[0], 'rows'|'onReorder'|'error'>} props
+ *     las de SortableTable (columns, ariaLabel, getRowId…) sin rows ni error; su onReorder corre después del cambio del campo
+ */
+export default function FormSortableField<Row extends object>({ name, onReorder, disabled, ...tableProps }: {
+    name: string;
+    onReorder?: (change: {
+        rows: Row[];
+        rowId: string | number;
+        fromIndex: number;
+        toIndex: number;
+    }) => void;
+} & Omit<Parameters<typeof SortableTable<Row>>[0], 'rows' | 'onReorder' | 'error'>): import("react").JSX.Element;

package/dist/types/sortable/SortableTable.d.ts

@@ -0,0 +1,77 @@
+export type SortableTableColumn<Row> = {
+    /**
+     * la llave del renglón que se pinta (y la del encabezado)
+     */
+    field: string;
+    /**
+     * el encabezado, ya traducido
+     */
+    headerName: string;
+    /**
+     * ancho fijo en px
+     */
+    width?: number;
+    /**
+     * cuánto del espacio libre toma, como en la tabla de servidor (por omisión 1)
+     */
+    flex?: number;
+    /**
+     * el mínimo en px de una columna sin ancho fijo (por omisión 96)
+     */
+    minWidth?: number;
+    /**
+     * los números a la derecha
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * lo de la celda a la
+     * medida; position es la que ve la persona (desde 1)
+     */
+    renderCell?: (row: Row, place: {
+        index: number;
+        position: number;
+    }) => import('react').ReactNode;
+};
+/**
+ * Los renglones conservan el tipo que usa la pantalla (Row): onReorder los regresa del mismo tipo, ya en su orden nuevo.
+ *
+ * @template {object} Row
+ * @param {object} props
+ * @param {Row[]} props.rows en su orden
+ * @param {SortableTableColumn<Row>[]} props.columns
+ * @param {(change: {rows: Row[], rowId: string|number, fromIndex: number, toIndex: number}) => Promise<unknown>|void} props.onReorder
+ *     al soltar un renglón en otro lugar: rows ya en el orden nuevo; fromIndex y toIndex desde 0. Si regresa una promesa, el
+ *     orden nuevo se enseña mientras se cumple y regresa si truena
+ * @param {string} props.ariaLabel qué es la tabla, ya traducido
+ * @param {(row: Row) => string|number} [props.getRowId] por omisión row.id
+ * @param {(row: Row) => string} [props.getRowLabel] el nombre del renglón que oye el lector de pantalla («Polanco»); por omisión
+ *     lo de la primera columna
+ * @param {boolean} [props.showPosition] la columna «Orden» con 1..n (por omisión sí)
+ * @param {boolean} [props.disabled] nada se arrastra (mientras se envía el formulario, o de solo lectura)
+ * @param {import('react').ReactNode} [props.error] el error de la lista (en rojo, abajo de la tabla)
+ * @param {import('react').ReactNode} [props.helperText] una ayuda abajo de la tabla (el error gana)
+ * @param {import('@mui/material').SxProps<import('@mui/material').Theme>} [props.sx] lo de afuera de la tabla
+ * @param {object} [props.texts] los textos que cambian, con la forma de `sortableTable` en los textos del paquete
+ */
+declare function SortableTableContent<Row extends object>(props: {
+    rows: Row[];
+    columns: SortableTableColumn<Row>[];
+    onReorder: (change: {
+        rows: Row[];
+        rowId: string | number;
+        fromIndex: number;
+        toIndex: number;
+    }) => Promise<unknown> | void;
+    ariaLabel: string;
+    getRowId?: (row: Row) => string | number;
+    getRowLabel?: (row: Row) => string;
+    showPosition?: boolean;
+    disabled?: boolean;
+    error?: import('react').ReactNode;
+    helperText?: import('react').ReactNode;
+    sx?: import('@mui/material').SxProps<import('@mui/material').Theme>;
+    texts?: object;
+}): import("react").JSX.Element;
+/** @type {typeof SortableTableContent} */
+declare const SortableTable: typeof SortableTableContent;
+export default SortableTable;

package/dist/types/sortable/sortableRows.d.ts

@@ -0,0 +1,12 @@
+/**
+ * La lista con un renglón movido a otro lugar. No toca la lista que recibe: regresa una nueva.
+ *
+ * Una posición fuera de la lista (o la misma) regresa una copia igual: nada que mover.
+ *
+ * @template T
+ * @param {ReadonlyArray<T>} rows en su orden de hoy
+ * @param {number} fromIndex dónde está el renglón (desde 0)
+ * @param {number} toIndex dónde queda (desde 0, contado en la lista ya sin él, como lo da el arrastre)
+ * @returns {T[]}
+ */
+export declare function moveRow<T>(rows: ReadonlyArray<T>, fromIndex: number, toIndex: number): T[];

package/dist/types/sortable.d.ts

@@ -0,0 +1,3 @@
+export { default as FormSortableField } from './sortable/FormSortableField.js';
+export { default as SortableTable } from './sortable/SortableTable.js';
+export { moveRow } from './sortable/sortableRows.js';

package/dist/types/ui/filters/FilterDrawer.d.ts

@@ -14,6 +14,7 @@ declare const FilterDrawer: (props: {
     title?: string;
     applyLabel?: string;
     closeOnApply?: boolean;
+    stackPairsBelow?: number;
     children?: import('react').ReactNode;
     texts?: object;
 } & {