@stackcraftmx/calcita 0.30.1 → 0.31.0

package/README.md

@@ -429,6 +429,16 @@ createTheme({
 });
 ```
 
+Para un ajuste solo en escritorio o solo en el teléfono, las mismas reglas que usa el marco: `DESKTOP_MEDIA_QUERY` y
+`PHONE_MEDIA_QUERY` (teléfono es angosto, menos de 900 px, o bajito, menos de 500 px de alto: un teléfono acostado).
+
+```js
+import {DESKTOP_MEDIA_QUERY} from '@stackcraftmx/calcita';
+
+// la barra sin el espacio de la izquierda, solo en escritorio
+createToolkitTheme({components: {CalcitaAppLayout: {styleOverrides: {toolbar: {[DESKTOP_MEDIA_QUERY]: {paddingLeft: 0}}}}}});
+```
+
 ## El marco de la app, el menú y los permisos
 
 `AppLayout` es el marco de las plantillas de MUI: la barra a todo lo ancho, con el logo y el nombre de la app; debajo,

package/dist/appShell/shellSizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"shellSizes.js","sources":["../../src/appShell/shellSizes.js"],"sourcesContent":["// Las medidas y tiempos del marco de la app (AppLayout, del marco de walk-ot), en un solo lugar para que el menú, la barra y\n// el botón flotante se muevan juntos.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {GLASS_INSET_PIXELS} from '@/theme/glassSurface.js';\n\n/** El id del contenido: a donde lleva «Saltar al contenido». */\nexport const MAIN_CONTENT_ID = 'main-content';\n\n/** El menú lateral abierto (ícono y nombre; 240 como las plantillas de MUI) y encogido (solo íconos, el rail). */\nexport const DRAWER_WIDTH_EXPANDED = 240;\nexport const DRAWER_WIDTH_COLLAPSED = 64;\n\n/** El alto de la barra de arriba (sin avisos). */\nexport const APP_BAR_HEIGHT_PIXELS = 56;\n\n/**\n * Con vidrio (createToolkitTheme({glass: true})), el menú lateral y la barra flotan separados de la orilla de la ventana\n * y entre ellos, como los paneles de macOS 26: así el contenido pasa por detrás y el vidrio tiene qué desenfocar. Es la\n * misma separación que el tema les da a los cajones y a la hoja de abajo (GLASS_INSET_PIXELS), para que todo flote igual.\n */\nexport const GLASS_PANEL_GAP_PIXELS = GLASS_INSET_PIXELS;\n\n/**\n * Teléfono o escritorio. Teléfono: angosto (menos de 900 px, el «md» de MUI) O bajito (menos de 500 px de alto: un teléfono\n * acostado). Solo con el ancho, un iPhone Pro Max acostado (932 × 430) salía con el marco de escritorio y su menú lateral\n * no cabía (lo reportaron). Van como media queries para usarse en sx: [PHONE_MEDIA_QUERY]: {...}.\n */\nexport const PHONE_MEDIA_QUERY = '@media (max-width: 899.95px), (max-height: 499.95px)';\nexport const DESKTOP_MEDIA_QUERY = '@media (min-width: 900px) and (min-height: 500px)';\n/** El teléfono acostado: la barra de pestañas va compacta (ícono y nombre lado a lado) para dejarle el alto al contenido. */\nexport const PHONE_LANDSCAPE_MEDIA_QUERY = '@media (max-height: 499.95px)';\n\n/** La barra de pestañas del teléfono con vidrio (MobileTabBar): su alto parado y acostado. */\nexport const MOBILE_TAB_BAR_HEIGHT_PIXELS = Object.freeze({portrait: 60, landscape: 46});\n\n// Lo que flota abajo encima de la barra de pestañas y dura un rato (las acciones de los elegidos de una tabla) pide su alto\n// aquí mientras se ve: el marco lo suma al espacio de abajo del contenido y el final de la página (el paginador) no queda\n// tapado. Lo pone quien flota con GlobalStyles; sin nada, vale 0.\nexport const FLOATING_BOTTOM_SPACE_CSS_VARIABLE = '--calcita-floating-bottom-space';\n\n/**\n * Lo que flota abajo al centro en el teléfono con vidrio (el aviso de versión nueva, la invitación a instalar): encima de\n * la barra de pestañas, con la separación de la barra a la orilla, su alto, la separación pedida y la zona del gesto de\n * inicio del iPhone. Para el sx: ...aboveMobileTabBarOf(8).\n *\n * @param {number} gapPixels lo que se separa de la barra de pestañas (px)\n * @returns {object}\n */\nexport function aboveMobileTabBarOf(gapPixels) {\n    return {\n        [PHONE_MEDIA_QUERY]: {\n            top: 'auto',\n            bottom: `calc(${GLASS_PANEL_GAP_PIXELS + MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait + gapPixels}px + env(safe-area-inset-bottom))`,\n        },\n        [PHONE_LANDSCAPE_MEDIA_QUERY]: {\n            bottom: `calc(${GLASS_PANEL_GAP_PIXELS + MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape + gapPixels}px + env(safe-area-inset-bottom))`,\n        },\n    };\n}\n\n/**\n * La transición que comparten el menú, la barra y el botón flotante: si cada uno usara la suya, terminarían en frames\n * distintos y el ojo lo lee como un salto.\n *\n * @param {object} theme el tema de MUI\n * @param {string[]} [properties] lo que se anima\n * @returns {string}\n */\nexport function drawerTransitionOf(theme, properties = ['width']) {\n    return theme.transitions.create(properties, {easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen});\n}\n"],"names":[],"mappings":";AAOY,MAAC,kBAAkB;AAGnB,MAAC,wBAAwB;AACzB,MAAC,yBAAyB;AAG1B,MAAC,wBAAwB;AAOzB,MAAC,yBAAyB;AAO1B,MAAC,oBAAoB;AACrB,MAAC,sBAAsB;AAEvB,MAAC,8BAA8B;AAG/B,MAAC,+BAA+B,OAAO,OAAO,EAAC,UAAU,IAAI,WAAW,GAAE,CAAC;AAK3E,MAAC,qCAAqC;AAU3C,SAAS,oBAAoB,WAAW;AAC3C,SAAO;AAAA,IACH,CAAC,iBAAiB,GAAG;AAAA,MACjB,KAAK;AAAA,MACL,QAAQ,QAAQ,yBAAyB,6BAA6B,WAAW,SAAS;AAAA,IACtG;AAAA,IACQ,CAAC,2BAA2B,GAAG;AAAA,MAC3B,QAAQ,QAAQ,yBAAyB,6BAA6B,YAAY,SAAS;AAAA,IACvG;AAAA,EACA;AACA;AAUO,SAAS,mBAAmB,OAAO,aAAa,CAAC,OAAO,GAAG;AAC9D,SAAO,MAAM,YAAY,OAAO,YAAY,EAAC,QAAQ,MAAM,YAAY,OAAO,OAAO,UAAU,MAAM,YAAY,SAAS,eAAc,CAAC;AAC7I;"}
+{"version":3,"file":"shellSizes.js","sources":["../../src/appShell/shellSizes.js"],"sourcesContent":["// Las medidas y tiempos del marco de la app (AppLayout, del marco de walk-ot), en un solo lugar para que el menú, la barra y\n// el botón flotante se muevan juntos.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {GLASS_INSET_PIXELS} from '@/theme/glassSurface.js';\n\n/** El id del contenido: a donde lleva «Saltar al contenido». */\nexport const MAIN_CONTENT_ID = 'main-content';\n\n/** El menú lateral abierto (ícono y nombre; 240 como las plantillas de MUI) y encogido (solo íconos, el rail). */\nexport const DRAWER_WIDTH_EXPANDED = 240;\nexport const DRAWER_WIDTH_COLLAPSED = 64;\n\n/** El alto de la barra de arriba (sin avisos). */\nexport const APP_BAR_HEIGHT_PIXELS = 56;\n\n/**\n * Con vidrio (createToolkitTheme({glass: true})), el menú lateral y la barra flotan separados de la orilla de la ventana\n * y entre ellos, como los paneles de macOS 26: así el contenido pasa por detrás y el vidrio tiene qué desenfocar. Es la\n * misma separación que el tema les da a los cajones y a la hoja de abajo (GLASS_INSET_PIXELS), para que todo flote igual.\n */\nexport const GLASS_PANEL_GAP_PIXELS = GLASS_INSET_PIXELS;\n\n/**\n * Teléfono o escritorio. Teléfono: angosto (menos de 900 px, el «md» de MUI) O bajito (menos de 500 px de alto: un teléfono\n * acostado). Solo con el ancho, un iPhone Pro Max acostado (932 × 430) salía con el marco de escritorio y su menú lateral\n * no cabía (lo reportaron). Van como media queries para usarse en sx: [PHONE_MEDIA_QUERY]: {...}. Se exportan: un proyecto que\n * ajusta una pieza del marco desde su tema (solo en escritorio o solo en el teléfono) usa la misma regla que el marco y no\n * una copia que se le pueda desfasar.\n */\nexport const PHONE_MEDIA_QUERY = '@media (max-width: 899.95px), (max-height: 499.95px)';\nexport const DESKTOP_MEDIA_QUERY = '@media (min-width: 900px) and (min-height: 500px)';\n/** El teléfono acostado: la barra de pestañas va compacta (ícono y nombre lado a lado) para dejarle el alto al contenido. */\nexport const PHONE_LANDSCAPE_MEDIA_QUERY = '@media (max-height: 499.95px)';\n\n/** La barra de pestañas del teléfono con vidrio (MobileTabBar): su alto parado y acostado. */\nexport const MOBILE_TAB_BAR_HEIGHT_PIXELS = Object.freeze({portrait: 60, landscape: 46});\n\n// Lo que flota abajo encima de la barra de pestañas y dura un rato (las acciones de los elegidos de una tabla) pide su alto\n// aquí mientras se ve: el marco lo suma al espacio de abajo del contenido y el final de la página (el paginador) no queda\n// tapado. Lo pone quien flota con GlobalStyles; sin nada, vale 0.\nexport const FLOATING_BOTTOM_SPACE_CSS_VARIABLE = '--calcita-floating-bottom-space';\n\n/**\n * Lo que flota abajo al centro en el teléfono con vidrio (el aviso de versión nueva, la invitación a instalar): encima de\n * la barra de pestañas, con la separación de la barra a la orilla, su alto, la separación pedida y la zona del gesto de\n * inicio del iPhone. Para el sx: ...aboveMobileTabBarOf(8).\n *\n * @param {number} gapPixels lo que se separa de la barra de pestañas (px)\n * @returns {object}\n */\nexport function aboveMobileTabBarOf(gapPixels) {\n    return {\n        [PHONE_MEDIA_QUERY]: {\n            top: 'auto',\n            bottom: `calc(${GLASS_PANEL_GAP_PIXELS + MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait + gapPixels}px + env(safe-area-inset-bottom))`,\n        },\n        [PHONE_LANDSCAPE_MEDIA_QUERY]: {\n            bottom: `calc(${GLASS_PANEL_GAP_PIXELS + MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape + gapPixels}px + env(safe-area-inset-bottom))`,\n        },\n    };\n}\n\n/**\n * La transición que comparten el menú, la barra y el botón flotante: si cada uno usara la suya, terminarían en frames\n * distintos y el ojo lo lee como un salto.\n *\n * @param {object} theme el tema de MUI\n * @param {string[]} [properties] lo que se anima\n * @returns {string}\n */\nexport function drawerTransitionOf(theme, properties = ['width']) {\n    return theme.transitions.create(properties, {easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen});\n}\n"],"names":[],"mappings":";AAOY,MAAC,kBAAkB;AAGnB,MAAC,wBAAwB;AACzB,MAAC,yBAAyB;AAG1B,MAAC,wBAAwB;AAOzB,MAAC,yBAAyB;AAS1B,MAAC,oBAAoB;AACrB,MAAC,sBAAsB;AAEvB,MAAC,8BAA8B;AAG/B,MAAC,+BAA+B,OAAO,OAAO,EAAC,UAAU,IAAI,WAAW,GAAE,CAAC;AAK3E,MAAC,qCAAqC;AAU3C,SAAS,oBAAoB,WAAW;AAC3C,SAAO;AAAA,IACH,CAAC,iBAAiB,GAAG;AAAA,MACjB,KAAK;AAAA,MACL,QAAQ,QAAQ,yBAAyB,6BAA6B,WAAW,SAAS;AAAA,IACtG;AAAA,IACQ,CAAC,2BAA2B,GAAG;AAAA,MAC3B,QAAQ,QAAQ,yBAAyB,6BAA6B,YAAY,SAAS;AAAA,IACvG;AAAA,EACA;AACA;AAUO,SAAS,mBAAmB,OAAO,aAAa,CAAC,OAAO,GAAG;AAC9D,SAAO,MAAM,YAAY,OAAO,YAAY,EAAC,QAAQ,MAAM,YAAY,OAAO,OAAO,UAAU,MAAM,YAAY,SAAS,eAAc,CAAC;AAC7I;"}

package/dist/index.js

@@ -39,7 +39,7 @@ import { BAR_CAPSULE_HEIGHT_PIXELS, default as default16 } from "./appShell/BarC
 import { usesMobileTabBar } from "./appShell/tabBarRule.js";
 import { default as default17, SettingSection } from "./appShell/AppearanceSettings.js";
 import { barMenuPlacementOf } from "./appShell/barMenuPlacement.js";
-import { DRAWER_WIDTH_COLLAPSED, DRAWER_WIDTH_EXPANDED, MAIN_CONTENT_ID } from "./appShell/shellSizes.js";
+import { DESKTOP_MEDIA_QUERY, DRAWER_WIDTH_COLLAPSED, DRAWER_WIDTH_EXPANDED, MAIN_CONTENT_ID, PHONE_MEDIA_QUERY } from "./appShell/shellSizes.js";
 import { useAppMenu } from "./appShell/appMenuContext.js";
 import { usePageTitle } from "./appShell/pageTitle.js";
 import { initialsOf, menuItemDescriptionOf, menuItemLabelOf, menuItemSectionOf, menuSectionsOf } from "./appShell/menuItemText.js";
@@ -168,6 +168,7 @@ export {
   DEFAULT_LANGUAGE,
   DEFAULT_LANGUAGES,
   DEFAULT_PASSWORD_POLICY,
+  DESKTOP_MEDIA_QUERY,
   DOWNLOAD_STATUS,
   DRAWER_WIDTH_COLLAPSED,
   DRAWER_WIDTH_EXPANDED,
@@ -218,6 +219,7 @@ export {
   default7 as NewBuildNotice,
   default59 as NumberInput,
   PASSWORD_RULE,
+  PHONE_MEDIA_QUERY,
   default41 as PageBreadcrumbs,
   default31 as PageHeader,
   default32 as PageHeading,

package/dist/types/appShell/shellSizes.d.ts

@@ -14,7 +14,9 @@ export declare const GLASS_PANEL_GAP_PIXELS = 8;
 /**
  * Teléfono o escritorio. Teléfono: angosto (menos de 900 px, el «md» de MUI) O bajito (menos de 500 px de alto: un teléfono
  * acostado). Solo con el ancho, un iPhone Pro Max acostado (932 × 430) salía con el marco de escritorio y su menú lateral
- * no cabía (lo reportaron). Van como media queries para usarse en sx: [PHONE_MEDIA_QUERY]: {...}.
+ * no cabía (lo reportaron). Van como media queries para usarse en sx: [PHONE_MEDIA_QUERY]: {...}. Se exportan: un proyecto que
+ * ajusta una pieza del marco desde su tema (solo en escritorio o solo en el teléfono) usa la misma regla que el marco y no
+ * una copia que se le pueda desfasar.
  */
 export declare const PHONE_MEDIA_QUERY = "@media (max-width: 899.95px), (max-height: 499.95px)";
 export declare const DESKTOP_MEDIA_QUERY = "@media (min-width: 900px) and (min-height: 500px)";

package/dist/types/index.d.ts

@@ -29,7 +29,7 @@ export { BAR_CAPSULE_HEIGHT_PIXELS, default as BarCapsule } from './appShell/Bar
 export { usesMobileTabBar } from './appShell/tabBarRule.js';
 export { SettingSection, default as AppearanceSettings } from './appShell/AppearanceSettings.js';
 export { barMenuPlacementOf } from './appShell/barMenuPlacement.js';
-export { DRAWER_WIDTH_COLLAPSED, DRAWER_WIDTH_EXPANDED, MAIN_CONTENT_ID } from './appShell/shellSizes.js';
+export { DESKTOP_MEDIA_QUERY, DRAWER_WIDTH_COLLAPSED, DRAWER_WIDTH_EXPANDED, MAIN_CONTENT_ID, PHONE_MEDIA_QUERY } from './appShell/shellSizes.js';
 export { useAppMenu } from './appShell/appMenuContext.js';
 export { usePageTitle } from './appShell/pageTitle.js';
 export { initialsOf, menuItemDescriptionOf, menuItemLabelOf, menuItemSectionOf, menuSectionsOf } from './appShell/menuItemText.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stackcraftmx/calcita",
-    "version": "0.30.1",
+    "version": "0.31.0",
     "description": "Componentes y utilidades de React con MUI para arrancar proyectos rápido: tabla de servidor, diálogos, avisos, descargas, formularios, formatos y reportes en Excel.",
     "license": "FSL-1.1-MIT",
     "author": "calcifux",