@stackcraftmx/calcita 0.47.0 → 0.51.0

package/dist/appShell/AppearanceSettings.js

@@ -16,7 +16,7 @@ import LightModeIcon from "@mui/icons-material/LightModeOutlined";
 import { useToolkitSettings } from "../toolkit/toolkitContext.js";
 import { DEFAULT_LANGUAGES } from "../toolkit/toolkitSettings.js";
 import { useFontSize } from "../ui/navigation/useFontSize.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaAppearanceSettings";
 const AppearanceSelectSection = piecePart(THEME_NAME, "SelectSection", Box);
@@ -52,7 +52,7 @@ function SettingSection({ label, value, options, onChange }) {
     )
   ] });
 }
-function AppearanceSettings(props) {
+function AppearanceSettingsContent(props) {
   const {
     showFontSize = true,
     showLanguage = true,
@@ -120,6 +120,7 @@ function AppearanceSettings(props) {
     section
   ] }, section.key));
 }
+const AppearanceSettings = withPieceSlots(AppearanceSettingsContent, THEME_NAME);
 export {
   SettingSection,
   AppearanceSettings as default

package/dist/appShell/AppearanceSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppearanceSettings.js","sources":["../../src/appShell/AppearanceSettings.jsx"],"sourcesContent":["// Los ajustes de cómo se ve la app para esta persona: tamaño de letra, idioma y claro u oscuro, cada uno con sus opciones\n// a la vista (botones de grupo) en lugar de un botón que cambia sin decir a qué. Los usan el engrane del teléfono\n// (SettingsMenu), el menú de la cuenta (AccountMenu) y la pantalla de «Mi perfil» del proyecto: un solo lugar para todos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAppearanceSettings con defaultProps y\n// styleOverrides de sus partes: selectSection, section, sectionLabel, option, divider.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Fragment} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport MenuItem from '@mui/material/MenuItem';\nimport TextField from '@mui/material/TextField';\nimport ToggleButton from '@mui/material/ToggleButton';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup';\nimport Typography from '@mui/material/Typography';\nimport {useColorScheme} from '@mui/material/styles';\nimport AutomaticModeIcon from '@mui/icons-material/BrightnessAutoOutlined';\nimport DarkModeIcon from '@mui/icons-material/DarkModeOutlined';\nimport LightModeIcon from '@mui/icons-material/LightModeOutlined';\n\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {DEFAULT_LANGUAGES} from '@/toolkit/toolkitSettings.js';\nimport {useFontSize} from '@/ui/navigation/useFontSize.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAppearanceSettings)\nconst THEME_NAME = 'CalcitaAppearanceSettings';\nconst AppearanceSelectSection = piecePart(THEME_NAME, 'SelectSection', Box);\nconst AppearanceSection = piecePart(THEME_NAME, 'Section', Box);\nconst AppearanceSectionLabel = piecePart(THEME_NAME, 'SectionLabel', Typography);\nconst AppearanceOption = piecePart(THEME_NAME, 'Option', ToggleButton);\nconst AppearanceDivider = piecePart(THEME_NAME, 'Divider', Divider);\n\n// cuántas opciones caben como botones lado a lado en el menú de la cuenta; con más, lista desplegable\nconst SETTING_BUTTONS_LIMIT = 3;\n\n/**\n * Un ajuste: su nombre y sus opciones a la vista. Es público: el proyecto agrega los suyos al menú de la cuenta con la\n * misma forma (AppLayout accountSettings), como el vidrio en los ejemplos.\n *\n * @param {object} props\n * @param {string} props.label ya traducido\n * @param {string} props.value la opción elegida\n * @param {Object[]} props.options\n * @param {string} props.options[].value\n * @param {string} props.options[].label ya traducido\n * @param {import('react').ReactNode} [props.options[].icon]\n * @param {(value: string) => void} props.onChange\n */\nexport function SettingSection({label, value, options, onChange}) {\n    // con muchas opciones (los idiomas de una app que ofrece cinco) los botones lado a lado no caben: lista desplegable\n    if (options.length > SETTING_BUTTONS_LIMIT) {\n        return (\n            <AppearanceSelectSection ownSx={{px: 1, py: 0.5}}>\n                <TextField select fullWidth size=\"small\" label={label} value={value} onChange={(event) => onChange(event.target.value)}>\n                    {options.map((option) => <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>)}\n                </TextField>\n            </AppearanceSelectSection>\n        );\n    }\n    return (\n        <AppearanceSection ownSx={{px: 1, py: 0.5}}>\n            <AppearanceSectionLabel variant=\"overline\" color=\"text.secondary\" component=\"p\" ownSx={{px: 1, lineHeight: 1.6}}>{label}</AppearanceSectionLabel>\n            <ToggleButtonGroup value={value} exclusive fullWidth size=\"small\" aria-label={label}\n                               onChange={(event, nextValue) => {\n                                   // al picar la opción ya elegida MUI manda null: se queda la que estaba\n                                   if (nextValue) {\n                                       onChange(nextValue);\n                                   }\n                               }}>\n                {options.map((option) => (\n                    <AppearanceOption key={option.value} value={option.value} ownSx={{gap: 0.75}}>{option.icon}{option.label}</AppearanceOption>\n                ))}\n            </ToggleButtonGroup>\n        </AppearanceSection>\n    );\n}\n\n/**\n * @param {object} props\n * @param {boolean} [props.showFontSize] por omisión sí\n * @param {boolean} [props.showLanguage] por omisión sí\n * @param {boolean} [props.showColorScheme] por omisión sí\n * @param {(level: string) => void} [props.onFontSizeChange] la persona eligió otro tamaño de letra (para guardarlo en su\n *     servidor; el idioma ya sale por onLanguageChange de ToolkitProvider)\n * @param {(mode: 'light'|'dark'|'system') => void} [props.onColorSchemeChange] la persona eligió otro modo\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function AppearanceSettings(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAppearanceSettings.defaultProps) y encima lo que llega aquí\n    const {\n    showFontSize = true, showLanguage = true, showColorScheme = true, onFontSizeChange, onColorSchemeChange, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t, language, changeLanguage} = useToolkitTranslation('layout', texts);\n    const {languages = DEFAULT_LANGUAGES} = useToolkitSettings();\n    const {level, setLevel, levels} = useFontSize();\n    const {mode, setMode} = useColorScheme();\n    const chooseFontSize = (nextLevel) => {\n        setLevel(nextLevel);\n        onFontSizeChange?.(nextLevel);\n    };\n    const chooseColorScheme = (nextMode) => {\n        setMode(nextMode);\n        onColorSchemeChange?.(nextMode);\n    };\n\n    const sections = [\n        showFontSize && (\n            <SettingSection key=\"fontSize\" label={t('fontSize.label')} value={level} onChange={chooseFontSize}\n                            options={levels.map((option) => ({value: option.key, label: t(option.labelKey)}))} />\n        ),\n        showLanguage && (\n            <SettingSection key=\"language\" label={t('settings.language')} value={language} onChange={changeLanguage}\n                            // los idiomas de la app; español e inglés con su nombre de siempre, los del proyecto con el suyo\n                            options={languages.map((entry) => ({value: entry.code, label: t(`languageName.${entry.code}`, {defaultValue: entry.label})}))} />\n        ),\n        // antes de montar no se sabe el modo (el servidor no lo conoce): la sección sale ya montada.\n        // Tres opciones: «Automático» (system de MUI) sigue lo que diga el equipo y es lo de omisión. Es la ÚNICA salida\n        // para volver a seguirlo: el botón de la barra (ColorSchemeToggle) fija claro u oscuro para siempre. La guía de\n        // Apple pide seguir el ajuste del equipo; el botón de la barra se queda con dos estados para no sumar una decisión.\n        showColorScheme && mode && (\n            <SettingSection key=\"colorScheme\" label={t('settings.colorScheme')} value={mode} onChange={chooseColorScheme}\n                            options={[\n                                {value: 'light', label: t('settings.light'), icon: <LightModeIcon fontSize=\"small\" />},\n                                {value: 'dark', label: t('settings.dark'), icon: <DarkModeIcon fontSize=\"small\" />},\n                                {value: 'system', label: t('settings.system'), icon: <AutomaticModeIcon fontSize=\"small\" />},\n                            ]} />\n        ),\n    ].filter(Boolean);\n\n    return sections.map((section, index) => (\n        <Fragment key={section.key}>\n            {index > 0 && <AppearanceDivider ownSx={{my: 0.5}} />}\n            {section}\n        </Fragment>\n    ));\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppearanceSettings.js","sources":["../../src/appShell/AppearanceSettings.jsx"],"sourcesContent":["// Los ajustes de cómo se ve la app para esta persona: tamaño de letra, idioma y claro u oscuro, cada uno con sus opciones\n// a la vista (botones de grupo) en lugar de un botón que cambia sin decir a qué. Los usan el engrane del teléfono\n// (SettingsMenu), el menú de la cuenta (AccountMenu) y la pantalla de «Mi perfil» del proyecto: un solo lugar para todos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAppearanceSettings con defaultProps y\n// styleOverrides de sus partes: selectSection, section, sectionLabel, option, divider.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Fragment} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport MenuItem from '@mui/material/MenuItem';\nimport TextField from '@mui/material/TextField';\nimport ToggleButton from '@mui/material/ToggleButton';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup';\nimport Typography from '@mui/material/Typography';\nimport {useColorScheme} from '@mui/material/styles';\nimport AutomaticModeIcon from '@mui/icons-material/BrightnessAutoOutlined';\nimport DarkModeIcon from '@mui/icons-material/DarkModeOutlined';\nimport LightModeIcon from '@mui/icons-material/LightModeOutlined';\n\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport {DEFAULT_LANGUAGES} from '@/toolkit/toolkitSettings.js';\nimport {useFontSize} from '@/ui/navigation/useFontSize.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAppearanceSettings)\nconst THEME_NAME = 'CalcitaAppearanceSettings';\nconst AppearanceSelectSection = piecePart(THEME_NAME, 'SelectSection', Box);\nconst AppearanceSection = piecePart(THEME_NAME, 'Section', Box);\nconst AppearanceSectionLabel = piecePart(THEME_NAME, 'SectionLabel', Typography);\nconst AppearanceOption = piecePart(THEME_NAME, 'Option', ToggleButton);\nconst AppearanceDivider = piecePart(THEME_NAME, 'Divider', Divider);\n\n// cuántas opciones caben como botones lado a lado en el menú de la cuenta; con más, lista desplegable\nconst SETTING_BUTTONS_LIMIT = 3;\n\n/**\n * Un ajuste: su nombre y sus opciones a la vista. Es público: el proyecto agrega los suyos al menú de la cuenta con la\n * misma forma (AppLayout accountSettings), como el vidrio en los ejemplos.\n *\n * @param {object} props\n * @param {string} props.label ya traducido\n * @param {string} props.value la opción elegida\n * @param {Object[]} props.options\n * @param {string} props.options[].value\n * @param {string} props.options[].label ya traducido\n * @param {import('react').ReactNode} [props.options[].icon]\n * @param {(value: string) => void} props.onChange\n */\nexport function SettingSection({label, value, options, onChange}) {\n    // con muchas opciones (los idiomas de una app que ofrece cinco) los botones lado a lado no caben: lista desplegable\n    if (options.length > SETTING_BUTTONS_LIMIT) {\n        return (\n            <AppearanceSelectSection ownSx={{px: 1, py: 0.5}}>\n                <TextField select fullWidth size=\"small\" label={label} value={value} onChange={(event) => onChange(event.target.value)}>\n                    {options.map((option) => <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>)}\n                </TextField>\n            </AppearanceSelectSection>\n        );\n    }\n    return (\n        <AppearanceSection ownSx={{px: 1, py: 0.5}}>\n            <AppearanceSectionLabel variant=\"overline\" color=\"text.secondary\" component=\"p\" ownSx={{px: 1, lineHeight: 1.6}}>{label}</AppearanceSectionLabel>\n            <ToggleButtonGroup value={value} exclusive fullWidth size=\"small\" aria-label={label}\n                               onChange={(event, nextValue) => {\n                                   // al picar la opción ya elegida MUI manda null: se queda la que estaba\n                                   if (nextValue) {\n                                       onChange(nextValue);\n                                   }\n                               }}>\n                {options.map((option) => (\n                    <AppearanceOption key={option.value} value={option.value} ownSx={{gap: 0.75}}>{option.icon}{option.label}</AppearanceOption>\n                ))}\n            </ToggleButtonGroup>\n        </AppearanceSection>\n    );\n}\n\n/**\n * @param {object} props\n * @param {boolean} [props.showFontSize] por omisión sí\n * @param {boolean} [props.showLanguage] por omisión sí\n * @param {boolean} [props.showColorScheme] por omisión sí\n * @param {(level: string) => void} [props.onFontSizeChange] la persona eligió otro tamaño de letra (para guardarlo en su\n *     servidor; el idioma ya sale por onLanguageChange de ToolkitProvider)\n * @param {(mode: 'light'|'dark'|'system') => void} [props.onColorSchemeChange] la persona eligió otro modo\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nfunction AppearanceSettingsContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaAppearanceSettings.defaultProps) y encima lo que llega aquí\n    const {\n    showFontSize = true, showLanguage = true, showColorScheme = true, onFontSizeChange, onColorSchemeChange, texts,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t, language, changeLanguage} = useToolkitTranslation('layout', texts);\n    const {languages = DEFAULT_LANGUAGES} = useToolkitSettings();\n    const {level, setLevel, levels} = useFontSize();\n    const {mode, setMode} = useColorScheme();\n    const chooseFontSize = (nextLevel) => {\n        setLevel(nextLevel);\n        onFontSizeChange?.(nextLevel);\n    };\n    const chooseColorScheme = (nextMode) => {\n        setMode(nextMode);\n        onColorSchemeChange?.(nextMode);\n    };\n\n    const sections = [\n        showFontSize && (\n            <SettingSection key=\"fontSize\" label={t('fontSize.label')} value={level} onChange={chooseFontSize}\n                            options={levels.map((option) => ({value: option.key, label: t(option.labelKey)}))} />\n        ),\n        showLanguage && (\n            <SettingSection key=\"language\" label={t('settings.language')} value={language} onChange={changeLanguage}\n                            // los idiomas de la app; español e inglés con su nombre de siempre, los del proyecto con el suyo\n                            options={languages.map((entry) => ({value: entry.code, label: t(`languageName.${entry.code}`, {defaultValue: entry.label})}))} />\n        ),\n        // antes de montar no se sabe el modo (el servidor no lo conoce): la sección sale ya montada.\n        // Tres opciones: «Automático» (system de MUI) sigue lo que diga el equipo y es lo de omisión. Es la ÚNICA salida\n        // para volver a seguirlo: el botón de la barra (ColorSchemeToggle) fija claro u oscuro para siempre. La guía de\n        // Apple pide seguir el ajuste del equipo; el botón de la barra se queda con dos estados para no sumar una decisión.\n        showColorScheme && mode && (\n            <SettingSection key=\"colorScheme\" label={t('settings.colorScheme')} value={mode} onChange={chooseColorScheme}\n                            options={[\n                                {value: 'light', label: t('settings.light'), icon: <LightModeIcon fontSize=\"small\" />},\n                                {value: 'dark', label: t('settings.dark'), icon: <DarkModeIcon fontSize=\"small\" />},\n                                {value: 'system', label: t('settings.system'), icon: <AutomaticModeIcon fontSize=\"small\" />},\n                            ]} />\n        ),\n    ].filter(Boolean);\n\n    return sections.map((section, index) => (\n        <Fragment key={section.key}>\n            {index > 0 && <AppearanceDivider ownSx={{my: 0.5}} />}\n            {section}\n        </Fragment>\n    ));\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst AppearanceSettings = withPieceSlots(AppearanceSettingsContent, THEME_NAME);\nexport default AppearanceSettings;\n"],"names":[],"mappings":"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"}

package/dist/appShell/AuthLayout.js

@@ -11,7 +11,7 @@ import GlassLensFilter from "../ui/layout/GlassLensFilter.js";
 import DocumentTitle from "../ui/navigation/DocumentTitle.js";
 import ColorSchemeToggle from "../ui/navigation/ColorSchemeToggle.js";
 import LanguageToggle from "../ui/navigation/LanguageToggle.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaAuthLayout";
 const AuthRoot = piecePart(THEME_NAME, "Root", Box);
@@ -26,7 +26,7 @@ const AuthContent = piecePart(THEME_NAME, "Content", Box);
 const AuthFooter = piecePart(THEME_NAME, "Footer", Box);
 const CARD_MAX_WIDTH_PIXELS = 440;
 const cardSurfaceOf = (theme) => isGlassTheme(theme) ? { ...glassStylesOf(theme), borderColor: "transparent", borderRadius: PANEL_RADIUS } : {};
-const AuthLayout = (props) => {
+const AuthLayoutContent = (props) => {
   const { logo, brandName, title, description, children, footer, showLanguageToggle = true, showColorSchemeToggle = true, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { appName } = useToolkitSettings();
@@ -55,6 +55,7 @@ const AuthLayout = (props) => {
     ] })
   ] });
 };
+const AuthLayout = withPieceSlots(AuthLayoutContent, THEME_NAME);
 export {
   AuthLayout
 };

package/dist/appShell/AuthLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthLayout.js","sources":["../../src/appShell/AuthLayout.jsx"],"sourcesContent":["// La pantalla de entrada (iniciar sesión, «¿olvidó su contraseña?», elegir una contraseña nueva): el logo y el nombre de\n// la app, una tarjeta al centro con su título y lo que lleve adentro, y arriba a la derecha el idioma y claro u oscuro\n// (quien no ha entrado también los necesita). Como la plantilla «Sign in» de MUI.\n//\n//   <AuthLayout logo={<Logo />} title={t('auth:signIn.title')} description={t('auth:signIn.subtitle')}>\n//       <SignInForm onSubmit={signIn} forgotPasswordPath=\"/forgot-password\" />\n//   </AuthLayout>\n//\n// Con el vidrio del tema (createToolkitTheme({glass: true})), el lienzo lleva sus manchas de color y la tarjeta es de\n// vidrio; sin vidrio, una tarjeta con borde sobre el lienzo.\n//\n// También pinta el aviso de versión nueva (cápsula flotante), como el marco: quien abre la app sin sesión (o la deja abierta\n// en esta pantalla) también debe enterarse; antes solo salía en las pantallas con sesión.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAuthLayout con defaultProps y\n// styleOverrides de sus partes: root, tools, body, brand, logo, brandName, card, description, content, footer.\n//\n// Lo renderiza la app: arrow (regla de la casa).\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {PANEL_RADIUS, ambientBackgroundOf, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport NewBuildNotice, {NEW_BUILD_NOTICE_VARIANT} from '@/feedback/NewBuildNotice.jsx';\nimport GlassLensFilter from '@/ui/layout/GlassLensFilter.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport ColorSchemeToggle from '@/ui/navigation/ColorSchemeToggle.jsx';\nimport LanguageToggle from '@/ui/navigation/LanguageToggle.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAuthLayout)\nconst THEME_NAME = 'CalcitaAuthLayout';\nconst AuthRoot = piecePart(THEME_NAME, 'Root', Box);\nconst AuthTools = piecePart(THEME_NAME, 'Tools', Stack);\nconst AuthBody = piecePart(THEME_NAME, 'Body', Box);\nconst AuthBrand = piecePart(THEME_NAME, 'Brand', Stack);\nconst AuthLogo = piecePart(THEME_NAME, 'Logo', Box);\nconst AuthBrandName = piecePart(THEME_NAME, 'BrandName', Typography);\nconst AuthCard = piecePart(THEME_NAME, 'Card', Paper);\nconst AuthDescription = piecePart(THEME_NAME, 'Description', Typography);\nconst AuthContent = piecePart(THEME_NAME, 'Content', Box);\nconst AuthFooter = piecePart(THEME_NAME, 'Footer', Box);\n\n// lo ancho de la tarjeta: lo que cabe cómodo un correo largo\nconst CARD_MAX_WIDTH_PIXELS = 440;\n\n/**\n * La tarjeta: de vidrio si el tema lo trae; si no, con borde.\n *\n * @param {object} theme\n * @returns {object}\n */\nconst cardSurfaceOf = (theme) => (isGlassTheme(theme)\n    ? {...glassStylesOf(theme), borderColor: 'transparent', borderRadius: PANEL_RADIUS}\n    : {});\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.logo] el logo chico (28 px)\n * @param {string} [props.brandName] por omisión el appName de ToolkitProvider\n * @param {string} props.title el título de la tarjeta y de la pestaña, ya traducido\n * @param {import('react').ReactNode} [props.description] el renglón debajo del título\n * @param {import('react').ReactNode} props.children el formulario\n * @param {import('react').ReactNode} [props.footer] debajo de la tarjeta (los botones de prueba, el aviso de privacidad…)\n * @param {boolean} [props.showLanguageToggle] por omisión sí\n * @param {boolean} [props.showColorSchemeToggle] por omisión sí\n */\nexport const AuthLayout = (props) => {\n    // lo que el proyecto puso en su tema (components.CalcitaAuthLayout.defaultProps) y encima lo que llega aquí\n    const {logo, brandName, title, description, children, footer, showLanguageToggle = true, showColorSchemeToggle = true, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {appName} = useToolkitSettings();\n    return (\n        <AuthRoot ownSx={[{minHeight: '100vh', display: 'flex', flexDirection: 'column', bgcolor: 'background.default'},\n            (theme) => (isGlassTheme(theme) ? ambientBackgroundOf(theme) : {})]}>\n            <DocumentTitle title={title} />\n            <GlassLensFilter />\n            <NewBuildNotice variant={NEW_BUILD_NOTICE_VARIANT.floating} />\n            <AuthTools direction=\"row\" spacing={1} ownSx={{justifyContent: 'flex-end', p: 2, pt: 'max(16px, env(safe-area-inset-top))'}}>\n                {showLanguageToggle && <LanguageToggle />}\n                {showColorSchemeToggle && <ColorSchemeToggle />}\n            </AuthTools>\n            <AuthBody component=\"main\" ownSx={{flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', px: 2, pb: 6}}>\n                <AuthBrand direction=\"row\" spacing={1.25} ownSx={{alignItems: 'center', mb: 3}}>\n                    {logo && <AuthLogo ownSx={{width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</AuthLogo>}\n                    <AuthBrandName variant=\"subtitle1\" component=\"p\" ownSx={{fontWeight: 600}}>{brandName ?? appName}</AuthBrandName>\n                </AuthBrand>\n                <AuthCard variant=\"outlined\" ownSx={[{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, p: {xs: 3, sm: 4}}, cardSurfaceOf]}>\n                    <Typography variant=\"h5\" component=\"h1\">{title}</Typography>\n                    {description && <AuthDescription variant=\"body2\" color=\"text.secondary\" ownSx={{mt: 1}}>{description}</AuthDescription>}\n                    <AuthContent ownSx={{mt: 3}}>{children}</AuthContent>\n                </AuthCard>\n                {footer && <AuthFooter ownSx={{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, mt: 2}}>{footer}</AuthFooter>}\n            </AuthBody>\n        </AuthRoot>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AuthLayout.js","sources":["../../src/appShell/AuthLayout.jsx"],"sourcesContent":["// La pantalla de entrada (iniciar sesión, «¿olvidó su contraseña?», elegir una contraseña nueva): el logo y el nombre de\n// la app, una tarjeta al centro con su título y lo que lleve adentro, y arriba a la derecha el idioma y claro u oscuro\n// (quien no ha entrado también los necesita). Como la plantilla «Sign in» de MUI.\n//\n//   <AuthLayout logo={<Logo />} title={t('auth:signIn.title')} description={t('auth:signIn.subtitle')}>\n//       <SignInForm onSubmit={signIn} forgotPasswordPath=\"/forgot-password\" />\n//   </AuthLayout>\n//\n// Con el vidrio del tema (createToolkitTheme({glass: true})), el lienzo lleva sus manchas de color y la tarjeta es de\n// vidrio; sin vidrio, una tarjeta con borde sobre el lienzo.\n//\n// También pinta el aviso de versión nueva (cápsula flotante), como el marco: quien abre la app sin sesión (o la deja abierta\n// en esta pantalla) también debe enterarse; antes solo salía en las pantallas con sesión.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaAuthLayout con defaultProps y\n// styleOverrides de sus partes: root, tools, body, brand, logo, brandName, card, description, content, footer.\n//\n// Lo renderiza la app: arrow (regla de la casa).\nimport {useToolkitSettings} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Paper from '@mui/material/Paper';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport {PANEL_RADIUS, ambientBackgroundOf, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport NewBuildNotice, {NEW_BUILD_NOTICE_VARIANT} from '@/feedback/NewBuildNotice.jsx';\nimport GlassLensFilter from '@/ui/layout/GlassLensFilter.jsx';\nimport DocumentTitle from '@/ui/navigation/DocumentTitle.jsx';\nimport ColorSchemeToggle from '@/ui/navigation/ColorSchemeToggle.jsx';\nimport LanguageToggle from '@/ui/navigation/LanguageToggle.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaAuthLayout)\nconst THEME_NAME = 'CalcitaAuthLayout';\nconst AuthRoot = piecePart(THEME_NAME, 'Root', Box);\nconst AuthTools = piecePart(THEME_NAME, 'Tools', Stack);\nconst AuthBody = piecePart(THEME_NAME, 'Body', Box);\nconst AuthBrand = piecePart(THEME_NAME, 'Brand', Stack);\nconst AuthLogo = piecePart(THEME_NAME, 'Logo', Box);\nconst AuthBrandName = piecePart(THEME_NAME, 'BrandName', Typography);\nconst AuthCard = piecePart(THEME_NAME, 'Card', Paper);\nconst AuthDescription = piecePart(THEME_NAME, 'Description', Typography);\nconst AuthContent = piecePart(THEME_NAME, 'Content', Box);\nconst AuthFooter = piecePart(THEME_NAME, 'Footer', Box);\n\n// lo ancho de la tarjeta: lo que cabe cómodo un correo largo\nconst CARD_MAX_WIDTH_PIXELS = 440;\n\n/**\n * La tarjeta: de vidrio si el tema lo trae; si no, con borde.\n *\n * @param {object} theme\n * @returns {object}\n */\nconst cardSurfaceOf = (theme) => (isGlassTheme(theme)\n    ? {...glassStylesOf(theme), borderColor: 'transparent', borderRadius: PANEL_RADIUS}\n    : {});\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.logo] el logo chico (28 px)\n * @param {string} [props.brandName] por omisión el appName de ToolkitProvider\n * @param {string} props.title el título de la tarjeta y de la pestaña, ya traducido\n * @param {import('react').ReactNode} [props.description] el renglón debajo del título\n * @param {import('react').ReactNode} props.children el formulario\n * @param {import('react').ReactNode} [props.footer] debajo de la tarjeta (los botones de prueba, el aviso de privacidad…)\n * @param {boolean} [props.showLanguageToggle] por omisión sí\n * @param {boolean} [props.showColorSchemeToggle] por omisión sí\n */\nconst AuthLayoutContent = (props) => {\n    // lo que el proyecto puso en su tema (components.CalcitaAuthLayout.defaultProps) y encima lo que llega aquí\n    const {logo, brandName, title, description, children, footer, showLanguageToggle = true, showColorSchemeToggle = true, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {appName} = useToolkitSettings();\n    return (\n        <AuthRoot ownSx={[{minHeight: '100vh', display: 'flex', flexDirection: 'column', bgcolor: 'background.default'},\n            (theme) => (isGlassTheme(theme) ? ambientBackgroundOf(theme) : {})]}>\n            <DocumentTitle title={title} />\n            <GlassLensFilter />\n            <NewBuildNotice variant={NEW_BUILD_NOTICE_VARIANT.floating} />\n            <AuthTools direction=\"row\" spacing={1} ownSx={{justifyContent: 'flex-end', p: 2, pt: 'max(16px, env(safe-area-inset-top))'}}>\n                {showLanguageToggle && <LanguageToggle />}\n                {showColorSchemeToggle && <ColorSchemeToggle />}\n            </AuthTools>\n            <AuthBody component=\"main\" ownSx={{flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', px: 2, pb: 6}}>\n                <AuthBrand direction=\"row\" spacing={1.25} ownSx={{alignItems: 'center', mb: 3}}>\n                    {logo && <AuthLogo ownSx={{width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</AuthLogo>}\n                    <AuthBrandName variant=\"subtitle1\" component=\"p\" ownSx={{fontWeight: 600}}>{brandName ?? appName}</AuthBrandName>\n                </AuthBrand>\n                <AuthCard variant=\"outlined\" ownSx={[{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, p: {xs: 3, sm: 4}}, cardSurfaceOf]}>\n                    <Typography variant=\"h5\" component=\"h1\">{title}</Typography>\n                    {description && <AuthDescription variant=\"body2\" color=\"text.secondary\" ownSx={{mt: 1}}>{description}</AuthDescription>}\n                    <AuthContent ownSx={{mt: 3}}>{children}</AuthContent>\n                </AuthCard>\n                {footer && <AuthFooter ownSx={{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, mt: 2}}>{footer}</AuthFooter>}\n            </AuthBody>\n        </AuthRoot>\n    );\n};\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nexport const AuthLayout = withPieceSlots(AuthLayoutContent, THEME_NAME);\n"],"names":[],"mappings":"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"}

package/dist/appShell/BarActionButton.js

@@ -7,7 +7,13 @@ import ListItemText from "@mui/material/ListItemText";
 import MenuItem from "@mui/material/MenuItem";
 import Tooltip from "@mui/material/Tooltip";
 import { useBarActionsPlacement, useCloseBarActionsMenu, BAR_ACTIONS_PLACEMENT } from "./barActionsSlot.js";
-function BarActionButton({ label, icon, onClick, disabled, color = "primary", ...buttonProps }) {
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+const THEME_NAME = "CalcitaBarActionButton";
+const BarActionButtonButton = piecePart(THEME_NAME, "Button", Button);
+const BarActionButtonIconButton = piecePart(THEME_NAME, "IconButton", IconButton);
+const BarActionButtonMenuItem = piecePart(THEME_NAME, "MenuItem", MenuItem);
+function BarActionButtonContent(props) {
+  const { label, icon, onClick, disabled, color = "primary", ...buttonProps } = usePieceProps(props, THEME_NAME);
   const placement = useBarActionsPlacement();
   const closeMenu = useCloseBarActionsMenu();
   if (placement === BAR_ACTIONS_PLACEMENT.menu) {
@@ -15,16 +21,17 @@ function BarActionButton({ label, icon, onClick, disabled, color = "primary", ..
       closeMenu();
       onClick?.(event);
     };
-    return /* @__PURE__ */ jsxs(MenuItem, { onClick: pickFromMenu, disabled, ...buttonProps, children: [
+    return /* @__PURE__ */ jsxs(BarActionButtonMenuItem, { onClick: pickFromMenu, disabled, ...buttonProps, children: [
       icon && /* @__PURE__ */ jsx(ListItemIcon, { children: icon }),
       /* @__PURE__ */ jsx(ListItemText, { inset: !icon, children: label })
     ] });
   }
   if (placement === BAR_ACTIONS_PLACEMENT.capsule && icon) {
-    return /* @__PURE__ */ jsx(Tooltip, { title: label, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { "aria-label": label, onClick, disabled, color, ...buttonProps, children: icon }) }) });
+    return /* @__PURE__ */ jsx(Tooltip, { title: label, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(BarActionButtonIconButton, { "aria-label": label, onClick, disabled, color, ...buttonProps, children: icon }) }) });
   }
-  return /* @__PURE__ */ jsx(Button, { startIcon: icon, onClick, disabled, color, ...buttonProps, children: label });
+  return /* @__PURE__ */ jsx(BarActionButtonButton, { startIcon: icon, onClick, disabled, color, ...buttonProps, children: label });
 }
+const BarActionButton = withPieceSlots(BarActionButtonContent, THEME_NAME);
 export {
   BarActionButton as default
 };

package/dist/appShell/BarActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarActionButton.js","sources":["../../src/appShell/BarActionButton.jsx"],"sourcesContent":["// Un botón de acción de la pantalla que se acomoda solo a donde quedó (lo pidió el autor, y es lo que pide la guía de Apple\n// para las barras: «Prefer simple, recognizable symbols for items instead of text»):\n//   - en una cápsula (arriba en la barra, flotando en el teléfono o en la franja): solo el ícono, con su nombre en el tooltip\n//     y para el lector de pantalla. En el teléfono el tooltip sale al dejar el dedo encima, como en iOS;\n//   - en el menú «⋯» del teléfono (las que ya no caben en el renglón flotante): un renglón con ícono y texto;\n//   - suelto (fuera de BarActions): ícono con texto, botón sin relleno.\n// Lo demás va al botón (disabled, color, component y to para una liga…). Sin ícono, en la cápsula va su texto (un botón sin\n// relleno) y en el «⋯» el renglón sin ícono: mejor un texto que un botón vacío.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport {BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu} from '@/appShell/barActionsSlot.js';\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre de la acción, ya traducido: «Agregar sucursal»\n * @param {import('react').ReactNode} [props.icon] el ícono (<AddRoundedIcon />); sin él, se ve su texto\n * @param {(event: object) => void} [props.onClick]\n * @param {boolean} [props.disabled]\n * @param {'inherit'|'primary'|'secondary'|'success'|'error'|'info'|'warning'} [props.color] por omisión primary\n */\nexport default function BarActionButton({label, icon, onClick, disabled, color = 'primary', ...buttonProps}) {\n    const placement = useBarActionsPlacement();\n    const closeMenu = useCloseBarActionsMenu();\n\n    if (placement === BAR_ACTIONS_PLACEMENT.menu) {\n        // primero se cierra el menú: la acción puede abrir una ventana y el menú quedaba encima\n        const pickFromMenu = (event) => {\n            closeMenu();\n            onClick?.(event);\n        };\n        return (\n            <MenuItem onClick={pickFromMenu} disabled={disabled} {...buttonProps}>\n                {icon && <ListItemIcon>{icon}</ListItemIcon>}\n                <ListItemText inset={!icon}>{label}</ListItemText>\n            </MenuItem>\n        );\n    }\n    if (placement === BAR_ACTIONS_PLACEMENT.capsule && icon) {\n        // OJO: el tooltip envuelve un span para que también salga con el botón deshabilitado (MUI no lo pinta sobre un\n        // elemento deshabilitado)\n        return (\n            <Tooltip title={label}>\n                <span>\n                    <IconButton aria-label={label} onClick={onClick} disabled={disabled} color={color} {...buttonProps}>{icon}</IconButton>\n                </span>\n            </Tooltip>\n        );\n    }\n    return <Button startIcon={icon} onClick={onClick} disabled={disabled} color={color} {...buttonProps}>{label}</Button>;\n}\n"],"names":[],"mappings":";;;;;;;;;AA2BA,SAAwB,gBAAgB,EAAC,OAAO,MAAM,SAAS,UAAU,QAAQ,WAAW,GAAG,eAAc;AACzG,QAAM,YAAY,uBAAA;AAClB,QAAM,YAAY,uBAAA;AAElB,MAAI,cAAc,sBAAsB,MAAM;AAE1C,UAAM,eAAe,CAAC,UAAU;AAC5B,gBAAA;AACA,gBAAU,KAAK;AAAA,IACnB;AACA,gCACK,UAAA,EAAS,SAAS,cAAc,UAAqB,GAAG,aACpD,UAAA;AAAA,MAAA,QAAQ,oBAAC,gBAAc,UAAA,KAAA,CAAK;AAAA,MAC7B,oBAAC,cAAA,EAAa,OAAO,CAAC,MAAO,UAAA,MAAA,CAAM;AAAA,IAAA,GACvC;AAAA,EAER;AACA,MAAI,cAAc,sBAAsB,WAAW,MAAM;AAGrD,+BACK,SAAA,EAAQ,OAAO,OACZ,UAAA,oBAAC,UACG,UAAA,oBAAC,YAAA,EAAW,cAAY,OAAO,SAAkB,UAAoB,OAAe,GAAG,aAAc,UAAA,MAAK,GAC9G,EAAA,CACJ;AAAA,EAER;AACA,SAAO,oBAAC,UAAO,WAAW,MAAM,SAAkB,UAAoB,OAAe,GAAG,aAAc,UAAA,MAAA,CAAM;AAChH;"}
+{"version":3,"file":"BarActionButton.js","sources":["../../src/appShell/BarActionButton.jsx"],"sourcesContent":["// Un botón de acción de la pantalla que se acomoda solo a donde quedó (lo pidió el autor, y es lo que pide la guía de Apple\n// para las barras: «Prefer simple, recognizable symbols for items instead of text»):\n//   - en una cápsula (arriba en la barra, flotando en el teléfono o en la franja): solo el ícono, con su nombre en el tooltip\n//     y para el lector de pantalla. En el teléfono el tooltip sale al dejar el dedo encima, como en iOS;\n//   - en el menú «⋯» del teléfono (las que ya no caben en el renglón flotante): un renglón con ícono y texto;\n//   - suelto (fuera de BarActions): ícono con texto, botón sin relleno.\n// Lo demás va al botón (disabled, color, component y to para una liga…). Sin ícono, en la cápsula va su texto (un botón sin\n// relleno) y en el «⋯» el renglón sin ícono: mejor un texto que un botón vacío.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarActionButton con defaultProps, styleOverrides de\n// sus partes (button, iconButton, menuItem) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\n\nimport {BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu} from '@/appShell/barActionsSlot.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaBarActionButton)\nconst THEME_NAME = 'CalcitaBarActionButton';\nconst BarActionButtonButton = piecePart(THEME_NAME, 'Button', Button);\nconst BarActionButtonIconButton = piecePart(THEME_NAME, 'IconButton', IconButton);\nconst BarActionButtonMenuItem = piecePart(THEME_NAME, 'MenuItem', MenuItem);\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre de la acción, ya traducido: «Agregar sucursal»\n * @param {import('react').ReactNode} [props.icon] el ícono (<AddRoundedIcon />); sin él, se ve su texto\n * @param {(event: object) => void} [props.onClick]\n * @param {boolean} [props.disabled]\n * @param {'inherit'|'primary'|'secondary'|'success'|'error'|'info'|'warning'} [props.color] por omisión primary\n */\nfunction BarActionButtonContent(props) {\n    const {label, icon, onClick, disabled, color = 'primary', ...buttonProps} = usePieceProps(props, THEME_NAME);\n    const placement = useBarActionsPlacement();\n    const closeMenu = useCloseBarActionsMenu();\n\n    if (placement === BAR_ACTIONS_PLACEMENT.menu) {\n        // primero se cierra el menú: la acción puede abrir una ventana y el menú quedaba encima\n        const pickFromMenu = (event) => {\n            closeMenu();\n            onClick?.(event);\n        };\n        return (\n            <BarActionButtonMenuItem onClick={pickFromMenu} disabled={disabled} {...buttonProps}>\n                {icon && <ListItemIcon>{icon}</ListItemIcon>}\n                <ListItemText inset={!icon}>{label}</ListItemText>\n            </BarActionButtonMenuItem>\n        );\n    }\n    if (placement === BAR_ACTIONS_PLACEMENT.capsule && icon) {\n        // OJO: el tooltip envuelve un span para que también salga con el botón deshabilitado (MUI no lo pinta sobre un\n        // elemento deshabilitado)\n        return (\n            <Tooltip title={label}>\n                <span>\n                    <BarActionButtonIconButton aria-label={label} onClick={onClick} disabled={disabled} color={color} {...buttonProps}>{icon}</BarActionButtonIconButton>\n                </span>\n            </Tooltip>\n        );\n    }\n    return <BarActionButtonButton startIcon={icon} onClick={onClick} disabled={disabled} color={color} {...buttonProps}>{label}</BarActionButtonButton>;\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst BarActionButton = withPieceSlots(BarActionButtonContent, THEME_NAME);\nexport default BarActionButton;\n"],"names":[],"mappings":";;;;;;;;;;AAwBA,MAAM,aAAa;AACnB,MAAM,wBAAwB,UAAU,YAAY,UAAU,MAAM;AACpE,MAAM,4BAA4B,UAAU,YAAY,cAAc,UAAU;AAChF,MAAM,0BAA0B,UAAU,YAAY,YAAY,QAAQ;AAU1E,SAAS,uBAAuB,OAAO;AACnC,QAAM,EAAC,OAAO,MAAM,SAAS,UAAU,QAAQ,WAAW,GAAG,YAAA,IAAe,cAAc,OAAO,UAAU;AAC3G,QAAM,YAAY,uBAAA;AAClB,QAAM,YAAY,uBAAA;AAElB,MAAI,cAAc,sBAAsB,MAAM;AAE1C,UAAM,eAAe,CAAC,UAAU;AAC5B,gBAAA;AACA,gBAAU,KAAK;AAAA,IACnB;AACA,gCACK,yBAAA,EAAwB,SAAS,cAAc,UAAqB,GAAG,aACnE,UAAA;AAAA,MAAA,QAAQ,oBAAC,gBAAc,UAAA,KAAA,CAAK;AAAA,MAC7B,oBAAC,cAAA,EAAa,OAAO,CAAC,MAAO,UAAA,MAAA,CAAM;AAAA,IAAA,GACvC;AAAA,EAER;AACA,MAAI,cAAc,sBAAsB,WAAW,MAAM;AAGrD,+BACK,SAAA,EAAQ,OAAO,OACZ,UAAA,oBAAC,UACG,UAAA,oBAAC,2BAAA,EAA0B,cAAY,OAAO,SAAkB,UAAoB,OAAe,GAAG,aAAc,UAAA,MAAK,GAC7H,EAAA,CACJ;AAAA,EAER;AACA,SAAO,oBAAC,yBAAsB,WAAW,MAAM,SAAkB,UAAoB,OAAe,GAAG,aAAc,UAAA,MAAA,CAAM;AAC/H;AAGA,MAAM,kBAAkB,eAAe,wBAAwB,UAAU;"}

package/dist/appShell/BarActions.js

@@ -14,7 +14,7 @@ import { useBarActionsSlot, BarActionsPlacementContext, BAR_ACTIONS_PLACEMENT, B
 import { DESKTOP_MEDIA_QUERY } from "./shellSizes.js";
 import useFittingActionCount from "./useFittingActionCount.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaBarActions";
 const ActionsGroup = piecePart(THEME_NAME, "Group", Box);
@@ -60,7 +60,7 @@ const PhoneFloatingCapsule = ({ phoneSlot, label, sx, texts, children, ...rest }
     hiddenActions.length > 0 && /* @__PURE__ */ jsx(MoreActionsMenu, { label: t("barActions.more"), children: hiddenActions })
   ] });
 };
-function BarActions(props) {
+function BarActionsContent(props) {
   const { children, label, order, sx, inlineSx, bare = false, exclusive = false, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { slot, phoneSlot, usesCapsules } = useBarActionsSlot();
@@ -106,6 +106,7 @@ function BarActions(props) {
     target
   );
 }
+const BarActions = withPieceSlots(BarActionsContent, THEME_NAME);
 export {
   BarActions as default
 };

package/dist/appShell/BarActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarActions.js","sources":["../../src/appShell/BarActions.jsx"],"sourcesContent":["// Las acciones de UNA pantalla en una cápsula, como las barras de herramientas de Apple: la pantalla las pone en su código\n// donde quiera y el marco decide dónde se ven.\n//\n//   - Escritorio con la barra en cápsulas (TOP_BAR.capsules): suben a la barra, cada <BarActions> en su cápsula. Dos grupos\n//     que no van juntos (buscar; exportar y agregar) son dos <BarActions>, como Apple separa los grupos.\n//   - Teléfono con cápsulas: las mismas cápsulas flotan arriba a la derecha y se quedan al bajar, como los botones de iOS 26\n//     (en el teléfono no hay barra de arriba: la de pestañas va abajo). Se ven todas las que caben, solo con ícono; las que\n//     ya no caben a lo ancho van a un menú «⋯» con su nombre (useFittingActionCount mide el renglón de verdad). Así una\n//     pantalla con muchas acciones arriba no rompe el teléfono.\n//   - Escritorio con la franja: entran a la franja como botones (con el color de la franja).\n//   - Sin lugar (sin AppLayout, la barra fundida al menú, o el teléfono sin cápsulas): se quedan donde la pantalla las puso,\n//     también en una cápsula de solo íconos. PageHeading ya las usa para sus `actions`.\n//\n// Se extiende sin tocar el framework: cualquier contenido adentro (lo normal es BarActionButton, que se acomoda solo), varias\n// por pantalla con su `order`, estilos propios con `sx` (la cápsula de arriba o la flotante) e `inlineSx` (la que se queda en\n// la pantalla), y `bare` cuando lo de adentro ya es una cápsula (el buscador de la tabla). Para una cápsula fuera de todo\n// esto: BarCapsule.\n//\n// OJO: escritorio o teléfono se decide con useMediaQuery (el único lugar del marco): hay que mover los botones a otro lugar\n// del árbol y eso no se puede solo con CSS sin pintarlos dos veces (con sus estados por duplicado). Con Next, el primer\n// pintado los deja en el contenido y se mueven a su lugar al hidratar; con Vite no se nota.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarActions con defaultProps y\n// styleOverrides.group (el grupo sin cápsula); la cápsula, con CalcitaBarCapsule. El sx y el inlineSx de la pantalla siguen\n// ganando a todo.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Children, useState} from 'react';\nimport {createPortal} from 'react-dom';\nimport Box from '@mui/material/Box';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport IconButton from '@mui/material/IconButton';\nimport Menu from '@mui/material/Menu';\nimport Tooltip from '@mui/material/Tooltip';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\n\nimport BarCapsule, {monochromeButtonsSxOf} from '@/appShell/BarCapsule.jsx';\nimport {\n    BAR_ACTIONS_PLACEMENT, BarActionsMenuCloseContext, BarActionsPlacementContext, useBarActionsSlot,\n} from '@/appShell/barActionsSlot.js';\nimport {DESKTOP_MEDIA_QUERY} from '@/appShell/shellSizes.js';\nimport useFittingActionCount from '@/appShell/useFittingActionCount.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaBarActions): el grupo sin cápsula (bare, o en la\n// franja); con cápsula, la cápsula es CalcitaBarCapsule\nconst THEME_NAME = 'CalcitaBarActions';\nconst ActionsGroup = piecePart(THEME_NAME, 'Group', Box);\n\n// la marca de un grupo exclusivo (BarActions exclusive) y la regla que, mientras exista, esconde a los demás grupos del\n// renglón flotante del teléfono (data-phone-bar-actions lo pone AppLayout)\nconst EXCLUSIVE_ATTRIBUTE = 'data-bar-exclusive';\nconst HIDE_NOT_EXCLUSIVE_STYLES = {[`[data-phone-bar-actions] > :not([${EXCLUSIVE_ATTRIBUTE}])`]: {display: 'none !important'}};\n\n/** Lo de adentro sabe que quedó en una cápsula (BarActionButton se vuelve solo ícono). */\nconst InCapsule = ({children}) => (\n    <BarActionsPlacementContext.Provider value={BAR_ACTIONS_PLACEMENT.capsule}>{children}</BarActionsPlacementContext.Provider>\n);\n\n/** El «⋯» del teléfono con las acciones que no caben, como renglones de menú con su nombre. */\nconst MoreActionsMenu = ({label, children}) => {\n    const [anchorElement, setAnchorElement] = useState(null);\n    const close = () => setAnchorElement(null);\n    return (\n        <>\n            <Tooltip title={label}>\n                <IconButton aria-label={label} aria-haspopup=\"menu\" aria-expanded={Boolean(anchorElement)}\n                            onClick={(event) => setAnchorElement(event.currentTarget)}>\n                    <MoreHorizRoundedIcon />\n                </IconButton>\n            </Tooltip>\n            {/* OJO keepMounted: una acción del «⋯» puede abrir algo suyo al picarla (DownloadMenu abre sus formatos y su\n                confirmación); sin él, al cerrarse este menú se desmontaba con todo y lo que abrió */}\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={close} keepMounted\n                  anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} transformOrigin={{vertical: 'top', horizontal: 'right'}}>\n                <BarActionsMenuCloseContext.Provider value={close}>\n                    <BarActionsPlacementContext.Provider value={BAR_ACTIONS_PLACEMENT.menu}>{children}</BarActionsPlacementContext.Provider>\n                </BarActionsMenuCloseContext.Provider>\n            </Menu>\n        </>\n    );\n};\n\n/** La cápsula que flota en el teléfono: las que caben como ícono y, si sobran, el «⋯» con las demás. */\nconst PhoneFloatingCapsule = ({phoneSlot, label, sx, texts, children, ...rest}) => {\n    const {t} = useToolkitTranslation('layout', texts);\n    const [capsuleElement, setCapsuleElement] = useState(null);\n    const actions = Children.toArray(children);\n    const visibleCount = useFittingActionCount(phoneSlot, capsuleElement, actions.length);\n    const hiddenActions = actions.slice(visibleCount);\n    return (\n        <BarCapsule ref={setCapsuleElement} aria-label={label} sx={sx} {...rest}>\n            <InCapsule>{actions.slice(0, visibleCount)}</InCapsule>\n            {hiddenActions.length > 0 && <MoreActionsMenu label={t('barActions.more')}>{hiddenActions}</MoreActionsMenu>}\n        </BarCapsule>\n    );\n};\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children los botones de este grupo (normalmente BarActionButton)\n * @param {string} [props.label] el nombre del grupo (lector de pantalla): «Acciones de pedidos»\n * @param {number} [props.order] en qué lugar va entre los grupos de la pantalla (CSS order; por omisión el de aparición)\n * @param {object|Function|Array} [props.sx] estilos propios de la cápsula de arriba o de la flotante del teléfono (o del\n *     grupo, en la franja)\n * @param {object|Function|Array} [props.inlineSx] estilos de la cápsula cuando se queda en la pantalla\n * @param {boolean} [props.bare] sin cápsula alrededor: lo de adentro ya es una (un buscador)\n * @param {boolean} [props.exclusive] en el teléfono, mientras se ve, es lo único del renglón flotante (con los demás grupos\n *     exclusivos): los otros se esconden, como el modo de edición del iPhone deja solo lo de lo elegido. Lo usa SelectionActions\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nexport default function BarActions(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaBarActions.defaultProps) y encima lo que llega aquí\n    const {children, label, order, sx, inlineSx, bare = false, exclusive = false, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {slot, phoneSlot, usesCapsules} = useBarActionsSlot();\n    const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);\n    // en escritorio, la barra; en el teléfono, el renglón flotante (solo existe con cápsulas)\n    const target = isDesktop ? slot : phoneSlot;\n    const orderSx = order === undefined ? {} : {order};\n    const extraSx = Array.isArray(sx) ? sx : [sx];\n    const extraInlineSx = Array.isArray(inlineSx) ? inlineSx : [inlineSx];\n\n    // sin lugar: donde la pantalla las puso, en su cápsula de íconos\n    if (!target) {\n        if (bare) {\n            return <ActionsGroup role=\"group\" aria-label={label} ownSx={{display: 'flex', alignItems: 'center'}} sx={extraInlineSx}>{children}</ActionsGroup>;\n        }\n        return (\n            <BarCapsule aria-label={label} sx={[{alignSelf: 'flex-start'}, ...extraInlineSx]}>\n                <InCapsule>{children}</InCapsule>\n            </BarCapsule>\n        );\n    }\n    // exclusivo en el teléfono: se marca y esconde a los demás grupos del renglón mientras se ve. OJO: sin esto, con algo\n    // elegido no cabían el conteo, sus acciones, la lupa y las de la pantalla, y el renglón se salía por los dos lados\n    const exclusiveProps = !isDesktop && exclusive ? {[EXCLUSIVE_ATTRIBUTE]: ''} : {};\n    const hideOthers = !isDesktop && exclusive && <GlobalStyles styles={HIDE_NOT_EXCLUSIVE_STYLES} />;\n    // flotando en el teléfono: las que caben y el «⋯»\n    if (!isDesktop && !bare) {\n        return (\n            <>\n                {hideOthers}\n                {createPortal(<PhoneFloatingCapsule phoneSlot={phoneSlot} label={label} sx={[orderSx, ...extraSx]} texts={texts} {...exclusiveProps}>{children}</PhoneFloatingCapsule>, target)}\n            </>\n        );\n    }\n    // arriba en la barra (o el buscador flotando en el teléfono)\n    if (usesCapsules && !bare) {\n        return createPortal(<BarCapsule aria-label={label} sx={[orderSx, ...extraSx]}><InCapsule>{children}</InCapsule></BarCapsule>, target);\n    }\n    if (usesCapsules) {\n        return (\n            <>\n                {hideOthers}\n                {createPortal(<ActionsGroup role=\"group\" aria-label={label} ownSx={[{display: 'flex', alignItems: 'center'}, orderSx]} sx={extraSx} {...exclusiveProps}>{children}</ActionsGroup>, target)}\n            </>\n        );\n    }\n    // en la franja: botones sueltos (solo ícono) con el color de la franja (sobre el naranja de Stackcraft, el color\n    // principal no se vería)\n    return createPortal(\n        <ActionsGroup role=\"group\" aria-label={label}\n                      ownSx={[{display: 'flex', alignItems: 'center', gap: 0.5, ...monochromeButtonsSxOf('inherit')}, orderSx]} sx={extraSx}>\n            <InCapsule>{children}</InCapsule>\n        </ActionsGroup>,\n        target,\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BarActions.js","sources":["../../src/appShell/BarActions.jsx"],"sourcesContent":["// Las acciones de UNA pantalla en una cápsula, como las barras de herramientas de Apple: la pantalla las pone en su código\n// donde quiera y el marco decide dónde se ven.\n//\n//   - Escritorio con la barra en cápsulas (TOP_BAR.capsules): suben a la barra, cada <BarActions> en su cápsula. Dos grupos\n//     que no van juntos (buscar; exportar y agregar) son dos <BarActions>, como Apple separa los grupos.\n//   - Teléfono con cápsulas: las mismas cápsulas flotan arriba a la derecha y se quedan al bajar, como los botones de iOS 26\n//     (en el teléfono no hay barra de arriba: la de pestañas va abajo). Se ven todas las que caben, solo con ícono; las que\n//     ya no caben a lo ancho van a un menú «⋯» con su nombre (useFittingActionCount mide el renglón de verdad). Así una\n//     pantalla con muchas acciones arriba no rompe el teléfono.\n//   - Escritorio con la franja: entran a la franja como botones (con el color de la franja).\n//   - Sin lugar (sin AppLayout, la barra fundida al menú, o el teléfono sin cápsulas): se quedan donde la pantalla las puso,\n//     también en una cápsula de solo íconos. PageHeading ya las usa para sus `actions`.\n//\n// Se extiende sin tocar el framework: cualquier contenido adentro (lo normal es BarActionButton, que se acomoda solo), varias\n// por pantalla con su `order`, estilos propios con `sx` (la cápsula de arriba o la flotante) e `inlineSx` (la que se queda en\n// la pantalla), y `bare` cuando lo de adentro ya es una cápsula (el buscador de la tabla). Para una cápsula fuera de todo\n// esto: BarCapsule.\n//\n// OJO: escritorio o teléfono se decide con useMediaQuery (el único lugar del marco): hay que mover los botones a otro lugar\n// del árbol y eso no se puede solo con CSS sin pintarlos dos veces (con sus estados por duplicado). Con Next, el primer\n// pintado los deja en el contenido y se mueven a su lugar al hidratar; con Vite no se nota.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarActions con defaultProps y\n// styleOverrides.group (el grupo sin cápsula); la cápsula, con CalcitaBarCapsule. El sx y el inlineSx de la pantalla siguen\n// ganando a todo.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {Children, useState} from 'react';\nimport {createPortal} from 'react-dom';\nimport Box from '@mui/material/Box';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport IconButton from '@mui/material/IconButton';\nimport Menu from '@mui/material/Menu';\nimport Tooltip from '@mui/material/Tooltip';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\n\nimport BarCapsule, {monochromeButtonsSxOf} from '@/appShell/BarCapsule.jsx';\nimport {\n    BAR_ACTIONS_PLACEMENT, BarActionsMenuCloseContext, BarActionsPlacementContext, useBarActionsSlot,\n} from '@/appShell/barActionsSlot.js';\nimport {DESKTOP_MEDIA_QUERY} from '@/appShell/shellSizes.js';\nimport useFittingActionCount from '@/appShell/useFittingActionCount.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaBarActions): el grupo sin cápsula (bare, o en la\n// franja); con cápsula, la cápsula es CalcitaBarCapsule\nconst THEME_NAME = 'CalcitaBarActions';\nconst ActionsGroup = piecePart(THEME_NAME, 'Group', Box);\n\n// la marca de un grupo exclusivo (BarActions exclusive) y la regla que, mientras exista, esconde a los demás grupos del\n// renglón flotante del teléfono (data-phone-bar-actions lo pone AppLayout)\nconst EXCLUSIVE_ATTRIBUTE = 'data-bar-exclusive';\nconst HIDE_NOT_EXCLUSIVE_STYLES = {[`[data-phone-bar-actions] > :not([${EXCLUSIVE_ATTRIBUTE}])`]: {display: 'none !important'}};\n\n/** Lo de adentro sabe que quedó en una cápsula (BarActionButton se vuelve solo ícono). */\nconst InCapsule = ({children}) => (\n    <BarActionsPlacementContext.Provider value={BAR_ACTIONS_PLACEMENT.capsule}>{children}</BarActionsPlacementContext.Provider>\n);\n\n/** El «⋯» del teléfono con las acciones que no caben, como renglones de menú con su nombre. */\nconst MoreActionsMenu = ({label, children}) => {\n    const [anchorElement, setAnchorElement] = useState(null);\n    const close = () => setAnchorElement(null);\n    return (\n        <>\n            <Tooltip title={label}>\n                <IconButton aria-label={label} aria-haspopup=\"menu\" aria-expanded={Boolean(anchorElement)}\n                            onClick={(event) => setAnchorElement(event.currentTarget)}>\n                    <MoreHorizRoundedIcon />\n                </IconButton>\n            </Tooltip>\n            {/* OJO keepMounted: una acción del «⋯» puede abrir algo suyo al picarla (DownloadMenu abre sus formatos y su\n                confirmación); sin él, al cerrarse este menú se desmontaba con todo y lo que abrió */}\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={close} keepMounted\n                  anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} transformOrigin={{vertical: 'top', horizontal: 'right'}}>\n                <BarActionsMenuCloseContext.Provider value={close}>\n                    <BarActionsPlacementContext.Provider value={BAR_ACTIONS_PLACEMENT.menu}>{children}</BarActionsPlacementContext.Provider>\n                </BarActionsMenuCloseContext.Provider>\n            </Menu>\n        </>\n    );\n};\n\n/** La cápsula que flota en el teléfono: las que caben como ícono y, si sobran, el «⋯» con las demás. */\nconst PhoneFloatingCapsule = ({phoneSlot, label, sx, texts, children, ...rest}) => {\n    const {t} = useToolkitTranslation('layout', texts);\n    const [capsuleElement, setCapsuleElement] = useState(null);\n    const actions = Children.toArray(children);\n    const visibleCount = useFittingActionCount(phoneSlot, capsuleElement, actions.length);\n    const hiddenActions = actions.slice(visibleCount);\n    return (\n        <BarCapsule ref={setCapsuleElement} aria-label={label} sx={sx} {...rest}>\n            <InCapsule>{actions.slice(0, visibleCount)}</InCapsule>\n            {hiddenActions.length > 0 && <MoreActionsMenu label={t('barActions.more')}>{hiddenActions}</MoreActionsMenu>}\n        </BarCapsule>\n    );\n};\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} props.children los botones de este grupo (normalmente BarActionButton)\n * @param {string} [props.label] el nombre del grupo (lector de pantalla): «Acciones de pedidos»\n * @param {number} [props.order] en qué lugar va entre los grupos de la pantalla (CSS order; por omisión el de aparición)\n * @param {object|Function|Array} [props.sx] estilos propios de la cápsula de arriba o de la flotante del teléfono (o del\n *     grupo, en la franja)\n * @param {object|Function|Array} [props.inlineSx] estilos de la cápsula cuando se queda en la pantalla\n * @param {boolean} [props.bare] sin cápsula alrededor: lo de adentro ya es una (un buscador)\n * @param {boolean} [props.exclusive] en el teléfono, mientras se ve, es lo único del renglón flotante (con los demás grupos\n *     exclusivos): los otros se esconden, como el modo de edición del iPhone deja solo lo de lo elegido. Lo usa SelectionActions\n * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete\n */\nfunction BarActionsContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaBarActions.defaultProps) y encima lo que llega aquí\n    const {children, label, order, sx, inlineSx, bare = false, exclusive = false, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {slot, phoneSlot, usesCapsules} = useBarActionsSlot();\n    const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);\n    // en escritorio, la barra; en el teléfono, el renglón flotante (solo existe con cápsulas)\n    const target = isDesktop ? slot : phoneSlot;\n    const orderSx = order === undefined ? {} : {order};\n    const extraSx = Array.isArray(sx) ? sx : [sx];\n    const extraInlineSx = Array.isArray(inlineSx) ? inlineSx : [inlineSx];\n\n    // sin lugar: donde la pantalla las puso, en su cápsula de íconos\n    if (!target) {\n        if (bare) {\n            return <ActionsGroup role=\"group\" aria-label={label} ownSx={{display: 'flex', alignItems: 'center'}} sx={extraInlineSx}>{children}</ActionsGroup>;\n        }\n        return (\n            <BarCapsule aria-label={label} sx={[{alignSelf: 'flex-start'}, ...extraInlineSx]}>\n                <InCapsule>{children}</InCapsule>\n            </BarCapsule>\n        );\n    }\n    // exclusivo en el teléfono: se marca y esconde a los demás grupos del renglón mientras se ve. OJO: sin esto, con algo\n    // elegido no cabían el conteo, sus acciones, la lupa y las de la pantalla, y el renglón se salía por los dos lados\n    const exclusiveProps = !isDesktop && exclusive ? {[EXCLUSIVE_ATTRIBUTE]: ''} : {};\n    const hideOthers = !isDesktop && exclusive && <GlobalStyles styles={HIDE_NOT_EXCLUSIVE_STYLES} />;\n    // flotando en el teléfono: las que caben y el «⋯»\n    if (!isDesktop && !bare) {\n        return (\n            <>\n                {hideOthers}\n                {createPortal(<PhoneFloatingCapsule phoneSlot={phoneSlot} label={label} sx={[orderSx, ...extraSx]} texts={texts} {...exclusiveProps}>{children}</PhoneFloatingCapsule>, target)}\n            </>\n        );\n    }\n    // arriba en la barra (o el buscador flotando en el teléfono)\n    if (usesCapsules && !bare) {\n        return createPortal(<BarCapsule aria-label={label} sx={[orderSx, ...extraSx]}><InCapsule>{children}</InCapsule></BarCapsule>, target);\n    }\n    if (usesCapsules) {\n        return (\n            <>\n                {hideOthers}\n                {createPortal(<ActionsGroup role=\"group\" aria-label={label} ownSx={[{display: 'flex', alignItems: 'center'}, orderSx]} sx={extraSx} {...exclusiveProps}>{children}</ActionsGroup>, target)}\n            </>\n        );\n    }\n    // en la franja: botones sueltos (solo ícono) con el color de la franja (sobre el naranja de Stackcraft, el color\n    // principal no se vería)\n    return createPortal(\n        <ActionsGroup role=\"group\" aria-label={label}\n                      ownSx={[{display: 'flex', alignItems: 'center', gap: 0.5, ...monochromeButtonsSxOf('inherit')}, orderSx]} sx={extraSx}>\n            <InCapsule>{children}</InCapsule>\n        </ActionsGroup>,\n        target,\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst BarActions = withPieceSlots(BarActionsContent, THEME_NAME);\nexport default BarActions;\n"],"names":[],"mappings":"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"}

package/dist/appShell/BarCapsule.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import { paletteOf } from "../theme/components/paletteOf.js";
 import { isGlassTheme, glassStylesOf } from "../theme/glassSurface.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 const THEME_NAME = "CalcitaBarCapsule";
 const CapsuleRoot = piecePart(THEME_NAME, "Root", Box);
 const BAR_CAPSULE_HEIGHT_PIXELS = 48;
@@ -23,7 +23,7 @@ function monochromeButtonsSxOf(color) {
     }
   };
 }
-function BarCapsule(props) {
+function BarCapsuleContent(props) {
   const { children, sx, role = "group", ...rest } = usePieceProps(props, THEME_NAME);
   return /* @__PURE__ */ jsx(
     CapsuleRoot,
@@ -47,6 +47,7 @@ function BarCapsule(props) {
     }
   );
 }
+const BarCapsule = withPieceSlots(BarCapsuleContent, THEME_NAME);
 export {
   BAR_CAPSULE_HEIGHT_PIXELS,
   BarCapsule as default,

package/dist/appShell/BarCapsule.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarCapsule.js","sources":["../../src/appShell/BarCapsule.jsx"],"sourcesContent":["// Una cápsula de la barra de arriba (como las de las ventanas de macOS Tahoe): un grupo de botones juntos, con vidrio si el\n// tema lo trae y, con el minimalista, un bloque del tono de las tarjetas sin borde ni sombra. La usan el marco (la ☰ con el\n// nombre, la cuenta), las acciones de cada pantalla (BarActions) y el proyecto para algo suyo que deba verse igual (unos\n// botones encima de un mapa, una barra de herramientas propia).\n//\n// Con vidrio, los botones de adentro van SIEMPRE del color del texto y sin relleno, borde ni sombra, aunque quien los usa\n// les ponga color o variante (color=\"primary\", variant=\"contained\" u \"outlined\", un sx propio): en las barras de Apple los\n// símbolos son de un solo color y el color queda para el contenido (HIG Toolbars y Color). Lo pidió el autor. OJO: al\n// principio solo se quitó el color del texto y un «Redactar» con relleno seguía naranja en la barra (lo cachó el autor). Se\n// logra con selectores de más clases que las del botón; los deshabilitados se quedan con su gris. Con el minimalista\n// conservan su color.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarCapsule con defaultProps y\n// styleOverrides.root (el sx de la pantalla sigue ganando a todo).\n//\n// Genérico del paquete: function (regla de la casa).\nimport Box from '@mui/material/Box';\n\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaBarCapsule)\nconst THEME_NAME = 'CalcitaBarCapsule';\nconst CapsuleRoot = piecePart(THEME_NAME, 'Root', Box);\n\n// lo alto de una cápsula (px): cabe en el alto de siempre de la barra con aire arriba y abajo\nexport const BAR_CAPSULE_HEIGHT_PIXELS = 48;\n\n/**\n * Los botones de adentro de un solo color y sin relleno, borde ni sombra (la regla de la barra con vidrio). La usan también\n * la franja (BarActions) y lo que se ponga junto a la barra.\n *\n * @param {string} color el del texto de la barra ('inherit' en la franja)\n * @returns {object} estilos para el sx del contenedor\n */\nexport function monochromeButtonsSxOf(color) {\n    return {\n        '& .MuiIconButton-root:not(.Mui-disabled), & .MuiButton-root:not(.Mui-disabled)': {color},\n        // un botón con relleno o con borde se queda como uno de texto: sin fondo, sin borde y sin sombra, también al pasar el\n        // cursor (ahí lleva el velo de cualquier botón de texto). OJO: la barra es un Paper y el tema tiñe los botones con\n        // borde «dentro de una tarjeta» con body[data-glass-lens] .MuiPaper-root … (cuatro clases y un elemento): por eso\n        // .MuiButton-root va repetido, para pesar cinco clases (con menos, «Restablecer» seguía teñido; medido en Chrome)\n        '& .MuiButton-root.MuiButton-root.MuiButton-root.MuiButton-contained, & .MuiButton-root.MuiButton-root.MuiButton-root.MuiButton-outlined': {\n            backgroundColor: 'transparent', backgroundImage: 'none', boxShadow: 'none', border: 0,\n            '&:hover': {backgroundColor: 'action.hover', boxShadow: 'none'},\n        },\n    };\n}\n\n/**\n * Lo demás va al div de la cápsula: aria-label (el nombre del grupo para quien usa lector de pantalla), id, onClick…\n * role va por omisión en 'group' (lo que se agrupa se anuncia junto).\n *\n * @param {Omit<import('react').HTMLAttributes<HTMLDivElement>, 'children'> & {children: import('react').ReactNode, sx?: object|Function|Array<any>}} props\n *     children: los botones del grupo; sx: estilos propios, encima de los de la cápsula\n */\nexport default function BarCapsule(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaBarCapsule.defaultProps) y encima lo que llega aquí\n    const {children, sx, role = 'group', ...rest} = usePieceProps(props, THEME_NAME);\n    // el estilo de la cápsula va abajo (ownSx): encima el del tema del proyecto y, al final, el sx de la pantalla\n    return (\n        <CapsuleRoot role={role} {...rest}\n             ownSx={(theme) => ({\n                 ...(isGlassTheme(theme) ? glassStylesOf(theme, {isControl: true}) : {backgroundColor: paletteOf(theme).background.paper}),\n                 ...(isGlassTheme(theme) && monochromeButtonsSxOf(paletteOf(theme).text.primary)),\n                 display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0, minWidth: 0,\n                 height: BAR_CAPSULE_HEIGHT_PIXELS, px: 0.75, borderRadius: '999px',\n             })}\n             sx={sx}>\n            {children}\n        </CapsuleRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,GAAG;AAG9C,MAAM,4BAA4B;AASlC,SAAS,sBAAsB,OAAO;AACzC,SAAO;AAAA,IACH,kFAAkF,EAAC,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnF,2IAA2I;AAAA,MACvI,iBAAiB;AAAA,MAAe,iBAAiB;AAAA,MAAQ,WAAW;AAAA,MAAQ,QAAQ;AAAA,MACpF,WAAW,EAAC,iBAAiB,gBAAgB,WAAW,OAAA;AAAA,IAAM;AAAA,EAClE;AAER;AASA,SAAwB,WAAW,OAAO;AAEtC,QAAM,EAAC,UAAU,IAAI,OAAO,SAAS,GAAG,SAAQ,cAAc,OAAO,UAAU;AAE/E,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAY;AAAA,MAAa,GAAG;AAAA,MACxB,OAAO,CAAC,WAAW;AAAA,QACf,GAAI,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,WAAW,KAAA,CAAK,IAAI,EAAC,iBAAiB,UAAU,KAAK,EAAE,WAAW,MAAA;AAAA,QAClH,GAAI,aAAa,KAAK,KAAK,sBAAsB,UAAU,KAAK,EAAE,KAAK,OAAO;AAAA,QAC9E,SAAS;AAAA,QAAQ,YAAY;AAAA,QAAU,KAAK;AAAA,QAAK,YAAY;AAAA,QAAG,UAAU;AAAA,QAC1E,QAAQ;AAAA,QAA2B,IAAI;AAAA,QAAM,cAAc;AAAA,MAAA;AAAA,MAE/D;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"BarCapsule.js","sources":["../../src/appShell/BarCapsule.jsx"],"sourcesContent":["// Una cápsula de la barra de arriba (como las de las ventanas de macOS Tahoe): un grupo de botones juntos, con vidrio si el\n// tema lo trae y, con el minimalista, un bloque del tono de las tarjetas sin borde ni sombra. La usan el marco (la ☰ con el\n// nombre, la cuenta), las acciones de cada pantalla (BarActions) y el proyecto para algo suyo que deba verse igual (unos\n// botones encima de un mapa, una barra de herramientas propia).\n//\n// Con vidrio, los botones de adentro van SIEMPRE del color del texto y sin relleno, borde ni sombra, aunque quien los usa\n// les ponga color o variante (color=\"primary\", variant=\"contained\" u \"outlined\", un sx propio): en las barras de Apple los\n// símbolos son de un solo color y el color queda para el contenido (HIG Toolbars y Color). Lo pidió el autor. OJO: al\n// principio solo se quitó el color del texto y un «Redactar» con relleno seguía naranja en la barra (lo cachó el autor). Se\n// logra con selectores de más clases que las del botón; los deshabilitados se quedan con su gris. Con el minimalista\n// conservan su color.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarCapsule con defaultProps y\n// styleOverrides.root (el sx de la pantalla sigue ganando a todo).\n//\n// Genérico del paquete: function (regla de la casa).\nimport Box from '@mui/material/Box';\n\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaBarCapsule)\nconst THEME_NAME = 'CalcitaBarCapsule';\nconst CapsuleRoot = piecePart(THEME_NAME, 'Root', Box);\n\n// lo alto de una cápsula (px): cabe en el alto de siempre de la barra con aire arriba y abajo\nexport const BAR_CAPSULE_HEIGHT_PIXELS = 48;\n\n/**\n * Los botones de adentro de un solo color y sin relleno, borde ni sombra (la regla de la barra con vidrio). La usan también\n * la franja (BarActions) y lo que se ponga junto a la barra.\n *\n * @param {string} color el del texto de la barra ('inherit' en la franja)\n * @returns {object} estilos para el sx del contenedor\n */\nexport function monochromeButtonsSxOf(color) {\n    return {\n        '& .MuiIconButton-root:not(.Mui-disabled), & .MuiButton-root:not(.Mui-disabled)': {color},\n        // un botón con relleno o con borde se queda como uno de texto: sin fondo, sin borde y sin sombra, también al pasar el\n        // cursor (ahí lleva el velo de cualquier botón de texto). OJO: la barra es un Paper y el tema tiñe los botones con\n        // borde «dentro de una tarjeta» con body[data-glass-lens] .MuiPaper-root … (cuatro clases y un elemento): por eso\n        // .MuiButton-root va repetido, para pesar cinco clases (con menos, «Restablecer» seguía teñido; medido en Chrome)\n        '& .MuiButton-root.MuiButton-root.MuiButton-root.MuiButton-contained, & .MuiButton-root.MuiButton-root.MuiButton-root.MuiButton-outlined': {\n            backgroundColor: 'transparent', backgroundImage: 'none', boxShadow: 'none', border: 0,\n            '&:hover': {backgroundColor: 'action.hover', boxShadow: 'none'},\n        },\n    };\n}\n\n/**\n * Lo demás va al div de la cápsula: aria-label (el nombre del grupo para quien usa lector de pantalla), id, onClick…\n * role va por omisión en 'group' (lo que se agrupa se anuncia junto).\n *\n * @param {Omit<import('react').HTMLAttributes<HTMLDivElement>, 'children'> & {children: import('react').ReactNode, sx?: object|Function|Array<any>}} props\n *     children: los botones del grupo; sx: estilos propios, encima de los de la cápsula\n */\nfunction BarCapsuleContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaBarCapsule.defaultProps) y encima lo que llega aquí\n    const {children, sx, role = 'group', ...rest} = usePieceProps(props, THEME_NAME);\n    // el estilo de la cápsula va abajo (ownSx): encima el del tema del proyecto y, al final, el sx de la pantalla\n    return (\n        <CapsuleRoot role={role} {...rest}\n             ownSx={(theme) => ({\n                 ...(isGlassTheme(theme) ? glassStylesOf(theme, {isControl: true}) : {backgroundColor: paletteOf(theme).background.paper}),\n                 ...(isGlassTheme(theme) && monochromeButtonsSxOf(paletteOf(theme).text.primary)),\n                 display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0, minWidth: 0,\n                 height: BAR_CAPSULE_HEIGHT_PIXELS, px: 0.75, borderRadius: '999px',\n             })}\n             sx={sx}>\n            {children}\n        </CapsuleRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst BarCapsule = withPieceSlots(BarCapsuleContent, THEME_NAME);\nexport default BarCapsule;\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,GAAG;AAG9C,MAAM,4BAA4B;AASlC,SAAS,sBAAsB,OAAO;AACzC,SAAO;AAAA,IACH,kFAAkF,EAAC,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnF,2IAA2I;AAAA,MACvI,iBAAiB;AAAA,MAAe,iBAAiB;AAAA,MAAQ,WAAW;AAAA,MAAQ,QAAQ;AAAA,MACpF,WAAW,EAAC,iBAAiB,gBAAgB,WAAW,OAAA;AAAA,IAAM;AAAA,EAClE;AAER;AASA,SAAS,kBAAkB,OAAO;AAE9B,QAAM,EAAC,UAAU,IAAI,OAAO,SAAS,GAAG,SAAQ,cAAc,OAAO,UAAU;AAE/E,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAY;AAAA,MAAa,GAAG;AAAA,MACxB,OAAO,CAAC,WAAW;AAAA,QACf,GAAI,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,WAAW,KAAA,CAAK,IAAI,EAAC,iBAAiB,UAAU,KAAK,EAAE,WAAW,MAAA;AAAA,QAClH,GAAI,aAAa,KAAK,KAAK,sBAAsB,UAAU,KAAK,EAAE,KAAK,OAAO;AAAA,QAC9E,SAAS;AAAA,QAAQ,YAAY;AAAA,QAAU,KAAK;AAAA,QAAK,YAAY;AAAA,QAAG,UAAU;AAAA,QAC1E,QAAQ;AAAA,QAA2B,IAAI;AAAA,QAAM,cAAc;AAAA,MAAA;AAAA,MAE/D;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGb;AAGA,MAAM,aAAa,eAAe,mBAAmB,UAAU;"}

package/dist/appShell/BarSearch.js

@@ -7,13 +7,13 @@ import SearchIcon from "@mui/icons-material/Search";
 import BarActions from "./BarActions.js";
 import { BAR_CAPSULE_HEIGHT_PIXELS } from "./BarCapsule.js";
 import { PHONE_MEDIA_QUERY } from "./shellSizes.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaBarSearch";
 const SearchField = piecePart(THEME_NAME, "Field", TextField);
 const SEARCH_BOX_MIN_WIDTH_PIXELS = 400;
 const SEARCH_IN_BAR_WIDTH_PIXELS = 380;
-function BarSearch(props) {
+function BarSearchContent(props) {
   const { value, onChange, placeholder, inBar = true, collapsible = true, order = 0, onFocus, onBlur, inputRef, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const [isFocused, setIsFocused] = useState(false);
@@ -92,6 +92,7 @@ function BarSearch(props) {
     }
   );
 }
+const BarSearch = withPieceSlots(BarSearchContent, THEME_NAME);
 export {
   BarSearch as default
 };

package/dist/appShell/BarSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarSearch.js","sources":["../../src/appShell/BarSearch.jsx"],"sourcesContent":["// Una caja de búsqueda que sube a la barra de la app, como el buscador de las ventanas de macOS: sin usar se encoge a la\n// lupa, al picarla (o llegar con Tab) se estira, y con texto se queda abierta. En el teléfono con cápsulas flota arriba con\n// las demás; sin barra en cápsulas se queda donde la pantalla la puso. Escape borra lo escrito y la suelta.\n//\n//   <BarSearch value={query} onChange={setQuery} placeholder=\"Buscar por título o etiqueta\" />\n//\n// La usan la tabla de servidor (searchInBar) y cualquier pantalla que busque en lo suyo (Tareas). Con inBar={false} es la\n// misma caja dentro de la pantalla.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarSearch con defaultProps y\n// styleOverrides de sus partes: field.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\nimport SearchIcon from '@mui/icons-material/Search';\n\nimport BarActions from '@/appShell/BarActions.jsx';\nimport {BAR_CAPSULE_HEIGHT_PIXELS} from '@/appShell/BarCapsule.jsx';\nimport {PHONE_MEDIA_QUERY} from '@/appShell/shellSizes.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaBarSearch)\nconst THEME_NAME = 'CalcitaBarSearch';\nconst SearchField = piecePart(THEME_NAME, 'Field', TextField);\n\n// ancho de la caja dentro de la pantalla en escritorio: cabe un texto de ayuda como «Buscar por pedido, cliente o producto…».\n// OJO: con 280 se cortaba («…cliente o pro»); en el teléfono la caja toma todo el ancho\nconst SEARCH_BOX_MIN_WIDTH_PIXELS = 400;\n// en la barra un poco más angosta: comparte el renglón con el título y las cápsulas\nconst SEARCH_IN_BAR_WIDTH_PIXELS = 380;\n\n/**\n * @param {object} props\n * @param {string} props.value lo escrito\n * @param {(value: string) => void} props.onChange recibe el texto, no el evento\n * @param {string} props.placeholder ya traducido: qué se busca («Buscar por título o etiqueta»); también es su nombre para el\n *     lector de pantalla\n * @param {boolean} [props.inBar] en la barra de la app (por omisión) o dentro de la pantalla\n * @param {boolean} [props.collapsible] en la barra, sin usar se encoge a la lupa; por omisión sí (false: siempre abierta)\n * @param {number} [props.order] en qué lugar va entre las cápsulas de la barra (por omisión la primera)\n * @param {() => void} [props.onFocus]\n * @param {() => void} [props.onBlur]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef] la caja, para enfocarla desde afuera (un atajo «/»)\n */\nexport default function BarSearch(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaBarSearch.defaultProps) y encima lo que llega aquí\n    const {value, onChange, placeholder, inBar = true, collapsible = true, order = 0, onFocus, onBlur, inputRef, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const [isFocused, setIsFocused] = useState(false);\n    // en la barra, chica cuando no se usa: ni tiene el foco ni tiene texto\n    const isCompact = inBar && collapsible && !isFocused && !value;\n    const searchBox = (\n        <SearchField\n            type=\"search\"\n            size=\"small\"\n            inputRef={inputRef}\n            value={value}\n            onChange={(event) => onChange(event.target.value)}\n            onFocus={() => {\n                setIsFocused(true);\n                onFocus?.();\n            }}\n            onBlur={() => {\n                setIsFocused(false);\n                onBlur?.();\n            }}\n            // Escape borra lo escrito y suelta la caja (en la barra, regresa a la lupa)\n            onKeyDown={(event) => {\n                if (event.key === 'Escape') {\n                    onChange('');\n                    event.currentTarget.querySelector('input')?.blur();\n                }\n            }}\n            placeholder={placeholder}\n            ownSx={{\n                minWidth: {xs: 0, md: inBar ? 0 : SEARCH_BOX_MIN_WIDTH_PIXELS},\n                // la × del navegador para type=\"search\" no va: la caja se borra con Escape\n                '& input[type=\"search\"]::-webkit-search-cancel-button': {WebkitAppearance: 'none', display: 'none'},\n            }}\n            slotProps={{\n                input: {startAdornment: <InputAdornment position=\"start\"><SearchIcon fontSize=\"small\" /></InputAdornment>},\n                htmlInput: {'aria-label': placeholder},\n            }}\n        />\n    );\n\n    if (!inBar) {\n        return searchBox;\n    }\n\n    // en la barra: la caja ya es su propia cápsula (bare), del alto y la forma de las demás y más angosta.\n    // OJO: la barra es un Paper y el tema le pone al campo el radio de «campo dentro de tarjeta», con el lente\n    // (body[data-glass-lens] .MuiPaper-root …) aún más específica: por eso las tres clases (con menos salía con esquinas de\n    // 12 px y no en cápsula; medido en Chrome). La lupa no atrapa el clic: lo deja pasar a la caja, que es la que se enfoca\n    return (\n        <BarActions label={placeholder} bare order={order}\n                    sx={(theme) => ({\n                        // en el teléfono flota arriba junto a las demás cápsulas. Su lugar SIEMPRE ocupa lo libre del renglón y\n                        // la caja va pegada a la derecha: así se abre de derecha a izquierda y regresa igual (el ancho pasa de 48 px\n                        // a 100 % con transición). OJO: antes el lugar brincaba de golpe (flex-grow no se anima) y la caja crecía\n                        // de izquierda a derecha. El hueco de la izquierda deja pasar el dedo a lo de abajo; solo la caja lo recibe\n                        [PHONE_MEDIA_QUERY]: {\n                            flexGrow: 1, minWidth: 0, justifyContent: 'flex-end', pointerEvents: 'none',\n                            '& .MuiTextField-root': {pointerEvents: 'auto'},\n                        },\n                        '& .MuiTextField-root': {\n                            width: isCompact ? BAR_CAPSULE_HEIGHT_PIXELS : SEARCH_IN_BAR_WIDTH_PIXELS,\n                            minWidth: 0,\n                            transition: theme.transitions.create('width', {duration: theme.transitions.duration.short}),\n                            '@media (prefers-reduced-motion: reduce)': {transition: 'none'},\n                            [PHONE_MEDIA_QUERY]: {width: isCompact ? BAR_CAPSULE_HEIGHT_PIXELS : '100%'},\n                        },\n                        '& .MuiFormControl-root .MuiInputBase-root.MuiOutlinedInput-root': {\n                            height: BAR_CAPSULE_HEIGHT_PIXELS, borderRadius: '999px', cursor: isCompact ? 'pointer' : 'text',\n                        },\n                        '& .MuiInputAdornment-root': {pointerEvents: 'none'},\n                        '& input::placeholder': {opacity: isCompact ? 0 : undefined},\n                    })}>\n            {searchBox}\n        </BarActions>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,SAAS,SAAS;AAI5D,MAAM,8BAA8B;AAEpC,MAAM,6BAA6B;AAenC,SAAwB,UAAU,OAAO;AAErC,QAAM,EAAC,OAAO,UAAU,aAAa,QAAQ,MAAM,cAAc,MAAM,QAAQ,GAAG,SAAS,QAAQ,UAAU,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC/J,mBAAiB,YAAY,YAAY;AACzC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,YAAY,SAAS,eAAe,CAAC,aAAa,CAAC;AACzD,QAAM,YACF;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAChD,SAAS,MAAM;AACX,qBAAa,IAAI;AACjB,kBAAA;AAAA,MACJ;AAAA,MACA,QAAQ,MAAM;AACV,qBAAa,KAAK;AAClB,iBAAA;AAAA,MACJ;AAAA,MAEA,WAAW,CAAC,UAAU;AAClB,YAAI,MAAM,QAAQ,UAAU;AACxB,mBAAS,EAAE;AACX,gBAAM,cAAc,cAAc,OAAO,GAAG,KAAA;AAAA,QAChD;AAAA,MACJ;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACH,UAAU,EAAC,IAAI,GAAG,IAAI,QAAQ,IAAI,4BAAA;AAAA;AAAA,QAElC,wDAAwD,EAAC,kBAAkB,QAAQ,SAAS,OAAA;AAAA,MAAM;AAAA,MAEtG,WAAW;AAAA,QACP,OAAO,EAAC,gBAAgB,oBAAC,gBAAA,EAAe,UAAS,SAAQ,UAAA,oBAAC,YAAA,EAAW,UAAS,QAAA,CAAQ,EAAA,CAAE,EAAA;AAAA,QACxF,WAAW,EAAC,cAAc,YAAA;AAAA,MAAW;AAAA,IACzC;AAAA,EAAA;AAIR,MAAI,CAAC,OAAO;AACR,WAAO;AAAA,EACX;AAMA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAW,OAAO;AAAA,MAAa,MAAI;AAAA,MAAC;AAAA,MACzB,IAAI,CAAC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKZ,CAAC,iBAAiB,GAAG;AAAA,UACjB,UAAU;AAAA,UAAG,UAAU;AAAA,UAAG,gBAAgB;AAAA,UAAY,eAAe;AAAA,UACrE,wBAAwB,EAAC,eAAe,OAAA;AAAA,QAAM;AAAA,QAElD,wBAAwB;AAAA,UACpB,OAAO,YAAY,4BAA4B;AAAA,UAC/C,UAAU;AAAA,UACV,YAAY,MAAM,YAAY,OAAO,SAAS,EAAC,UAAU,MAAM,YAAY,SAAS,MAAA,CAAM;AAAA,UAC1F,2CAA2C,EAAC,YAAY,OAAA;AAAA,UACxD,CAAC,iBAAiB,GAAG,EAAC,OAAO,YAAY,4BAA4B,OAAA;AAAA,QAAM;AAAA,QAE/E,mEAAmE;AAAA,UAC/D,QAAQ;AAAA,UAA2B,cAAc;AAAA,UAAS,QAAQ,YAAY,YAAY;AAAA,QAAA;AAAA,QAE9F,6BAA6B,EAAC,eAAe,OAAA;AAAA,QAC7C,wBAAwB,EAAC,SAAS,YAAY,IAAI,OAAA;AAAA,MAAS;AAAA,MAEtE,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"BarSearch.js","sources":["../../src/appShell/BarSearch.jsx"],"sourcesContent":["// Una caja de búsqueda que sube a la barra de la app, como el buscador de las ventanas de macOS: sin usar se encoge a la\n// lupa, al picarla (o llegar con Tab) se estira, y con texto se queda abierta. En el teléfono con cápsulas flota arriba con\n// las demás; sin barra en cápsulas se queda donde la pantalla la puso. Escape borra lo escrito y la suelta.\n//\n//   <BarSearch value={query} onChange={setQuery} placeholder=\"Buscar por título o etiqueta\" />\n//\n// La usan la tabla de servidor (searchInBar) y cualquier pantalla que busque en lo suyo (Tareas). Con inBar={false} es la\n// misma caja dentro de la pantalla.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaBarSearch con defaultProps y\n// styleOverrides de sus partes: field.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\nimport SearchIcon from '@mui/icons-material/Search';\n\nimport BarActions from '@/appShell/BarActions.jsx';\nimport {BAR_CAPSULE_HEIGHT_PIXELS} from '@/appShell/BarCapsule.jsx';\nimport {PHONE_MEDIA_QUERY} from '@/appShell/shellSizes.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaBarSearch)\nconst THEME_NAME = 'CalcitaBarSearch';\nconst SearchField = piecePart(THEME_NAME, 'Field', TextField);\n\n// ancho de la caja dentro de la pantalla en escritorio: cabe un texto de ayuda como «Buscar por pedido, cliente o producto…».\n// OJO: con 280 se cortaba («…cliente o pro»); en el teléfono la caja toma todo el ancho\nconst SEARCH_BOX_MIN_WIDTH_PIXELS = 400;\n// en la barra un poco más angosta: comparte el renglón con el título y las cápsulas\nconst SEARCH_IN_BAR_WIDTH_PIXELS = 380;\n\n/**\n * @param {object} props\n * @param {string} props.value lo escrito\n * @param {(value: string) => void} props.onChange recibe el texto, no el evento\n * @param {string} props.placeholder ya traducido: qué se busca («Buscar por título o etiqueta»); también es su nombre para el\n *     lector de pantalla\n * @param {boolean} [props.inBar] en la barra de la app (por omisión) o dentro de la pantalla\n * @param {boolean} [props.collapsible] en la barra, sin usar se encoge a la lupa; por omisión sí (false: siempre abierta)\n * @param {number} [props.order] en qué lugar va entre las cápsulas de la barra (por omisión la primera)\n * @param {() => void} [props.onFocus]\n * @param {() => void} [props.onBlur]\n * @param {import('react').Ref<HTMLInputElement>} [props.inputRef] la caja, para enfocarla desde afuera (un atajo «/»)\n */\nfunction BarSearchContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaBarSearch.defaultProps) y encima lo que llega aquí\n    const {value, onChange, placeholder, inBar = true, collapsible = true, order = 0, onFocus, onBlur, inputRef, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const [isFocused, setIsFocused] = useState(false);\n    // en la barra, chica cuando no se usa: ni tiene el foco ni tiene texto\n    const isCompact = inBar && collapsible && !isFocused && !value;\n    const searchBox = (\n        <SearchField\n            type=\"search\"\n            size=\"small\"\n            inputRef={inputRef}\n            value={value}\n            onChange={(event) => onChange(event.target.value)}\n            onFocus={() => {\n                setIsFocused(true);\n                onFocus?.();\n            }}\n            onBlur={() => {\n                setIsFocused(false);\n                onBlur?.();\n            }}\n            // Escape borra lo escrito y suelta la caja (en la barra, regresa a la lupa)\n            onKeyDown={(event) => {\n                if (event.key === 'Escape') {\n                    onChange('');\n                    event.currentTarget.querySelector('input')?.blur();\n                }\n            }}\n            placeholder={placeholder}\n            ownSx={{\n                minWidth: {xs: 0, md: inBar ? 0 : SEARCH_BOX_MIN_WIDTH_PIXELS},\n                // la × del navegador para type=\"search\" no va: la caja se borra con Escape\n                '& input[type=\"search\"]::-webkit-search-cancel-button': {WebkitAppearance: 'none', display: 'none'},\n            }}\n            slotProps={{\n                input: {startAdornment: <InputAdornment position=\"start\"><SearchIcon fontSize=\"small\" /></InputAdornment>},\n                htmlInput: {'aria-label': placeholder},\n            }}\n        />\n    );\n\n    if (!inBar) {\n        return searchBox;\n    }\n\n    // en la barra: la caja ya es su propia cápsula (bare), del alto y la forma de las demás y más angosta.\n    // OJO: la barra es un Paper y el tema le pone al campo el radio de «campo dentro de tarjeta», con el lente\n    // (body[data-glass-lens] .MuiPaper-root …) aún más específica: por eso las tres clases (con menos salía con esquinas de\n    // 12 px y no en cápsula; medido en Chrome). La lupa no atrapa el clic: lo deja pasar a la caja, que es la que se enfoca\n    return (\n        <BarActions label={placeholder} bare order={order}\n                    sx={(theme) => ({\n                        // en el teléfono flota arriba junto a las demás cápsulas. Su lugar SIEMPRE ocupa lo libre del renglón y\n                        // la caja va pegada a la derecha: así se abre de derecha a izquierda y regresa igual (el ancho pasa de 48 px\n                        // a 100 % con transición). OJO: antes el lugar brincaba de golpe (flex-grow no se anima) y la caja crecía\n                        // de izquierda a derecha. El hueco de la izquierda deja pasar el dedo a lo de abajo; solo la caja lo recibe\n                        [PHONE_MEDIA_QUERY]: {\n                            flexGrow: 1, minWidth: 0, justifyContent: 'flex-end', pointerEvents: 'none',\n                            '& .MuiTextField-root': {pointerEvents: 'auto'},\n                        },\n                        '& .MuiTextField-root': {\n                            width: isCompact ? BAR_CAPSULE_HEIGHT_PIXELS : SEARCH_IN_BAR_WIDTH_PIXELS,\n                            minWidth: 0,\n                            transition: theme.transitions.create('width', {duration: theme.transitions.duration.short}),\n                            '@media (prefers-reduced-motion: reduce)': {transition: 'none'},\n                            [PHONE_MEDIA_QUERY]: {width: isCompact ? BAR_CAPSULE_HEIGHT_PIXELS : '100%'},\n                        },\n                        '& .MuiFormControl-root .MuiInputBase-root.MuiOutlinedInput-root': {\n                            height: BAR_CAPSULE_HEIGHT_PIXELS, borderRadius: '999px', cursor: isCompact ? 'pointer' : 'text',\n                        },\n                        '& .MuiInputAdornment-root': {pointerEvents: 'none'},\n                        '& input::placeholder': {opacity: isCompact ? 0 : undefined},\n                    })}>\n            {searchBox}\n        </BarActions>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst BarSearch = withPieceSlots(BarSearchContent, THEME_NAME);\nexport default BarSearch;\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,SAAS,SAAS;AAI5D,MAAM,8BAA8B;AAEpC,MAAM,6BAA6B;AAenC,SAAS,iBAAiB,OAAO;AAE7B,QAAM,EAAC,OAAO,UAAU,aAAa,QAAQ,MAAM,cAAc,MAAM,QAAQ,GAAG,SAAS,QAAQ,UAAU,GAAG,iBAAgB,cAAc,OAAO,UAAU;AAC/J,mBAAiB,YAAY,YAAY;AACzC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,YAAY,SAAS,eAAe,CAAC,aAAa,CAAC;AACzD,QAAM,YACF;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,MAChD,SAAS,MAAM;AACX,qBAAa,IAAI;AACjB,kBAAA;AAAA,MACJ;AAAA,MACA,QAAQ,MAAM;AACV,qBAAa,KAAK;AAClB,iBAAA;AAAA,MACJ;AAAA,MAEA,WAAW,CAAC,UAAU;AAClB,YAAI,MAAM,QAAQ,UAAU;AACxB,mBAAS,EAAE;AACX,gBAAM,cAAc,cAAc,OAAO,GAAG,KAAA;AAAA,QAChD;AAAA,MACJ;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACH,UAAU,EAAC,IAAI,GAAG,IAAI,QAAQ,IAAI,4BAAA;AAAA;AAAA,QAElC,wDAAwD,EAAC,kBAAkB,QAAQ,SAAS,OAAA;AAAA,MAAM;AAAA,MAEtG,WAAW;AAAA,QACP,OAAO,EAAC,gBAAgB,oBAAC,gBAAA,EAAe,UAAS,SAAQ,UAAA,oBAAC,YAAA,EAAW,UAAS,QAAA,CAAQ,EAAA,CAAE,EAAA;AAAA,QACxF,WAAW,EAAC,cAAc,YAAA;AAAA,MAAW;AAAA,IACzC;AAAA,EAAA;AAIR,MAAI,CAAC,OAAO;AACR,WAAO;AAAA,EACX;AAMA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAW,OAAO;AAAA,MAAa,MAAI;AAAA,MAAC;AAAA,MACzB,IAAI,CAAC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKZ,CAAC,iBAAiB,GAAG;AAAA,UACjB,UAAU;AAAA,UAAG,UAAU;AAAA,UAAG,gBAAgB;AAAA,UAAY,eAAe;AAAA,UACrE,wBAAwB,EAAC,eAAe,OAAA;AAAA,QAAM;AAAA,QAElD,wBAAwB;AAAA,UACpB,OAAO,YAAY,4BAA4B;AAAA,UAC/C,UAAU;AAAA,UACV,YAAY,MAAM,YAAY,OAAO,SAAS,EAAC,UAAU,MAAM,YAAY,SAAS,MAAA,CAAM;AAAA,UAC1F,2CAA2C,EAAC,YAAY,OAAA;AAAA,UACxD,CAAC,iBAAiB,GAAG,EAAC,OAAO,YAAY,4BAA4B,OAAA;AAAA,QAAM;AAAA,QAE/E,mEAAmE;AAAA,UAC/D,QAAQ;AAAA,UAA2B,cAAc;AAAA,UAAS,QAAQ,YAAY,YAAY;AAAA,QAAA;AAAA,QAE9F,6BAA6B,EAAC,eAAe,OAAA;AAAA,QAC7C,wBAAwB,EAAC,SAAS,YAAY,IAAI,OAAA;AAAA,MAAS;AAAA,MAEtE,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;AAGA,MAAM,YAAY,eAAe,kBAAkB,UAAU;"}

package/dist/appShell/HeaderTools.js

@@ -5,12 +5,12 @@ import Divider from "@mui/material/Divider";
 import AccountMenu from "./AccountMenu.js";
 import SettingsMenu from "./SettingsMenu.js";
 import AppearanceSettings from "./AppearanceSettings.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaHeaderTools";
 const ToolsDivider = piecePart(THEME_NAME, "Divider", Divider);
 const ToolsRoot = piecePart(THEME_NAME, "Root", Box);
-function HeaderTools(props) {
+function HeaderToolsContent(props) {
   const {
     headerActions,
     showFontSizeToggle,
@@ -57,6 +57,7 @@ function HeaderTools(props) {
     )
   ] });
 }
+const HeaderTools = withPieceSlots(HeaderToolsContent, THEME_NAME);
 export {
   HeaderTools as default
 };

package/dist/appShell/HeaderTools.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderTools.js","sources":["../../src/appShell/HeaderTools.jsx"],"sourcesContent":["// Lo de la derecha de la barra, igual en los dos estilos de barra (menú lateral o arriba):\n//   - lo que el proyecto agregue (headerActions: un botón de «reporte urgente», un buscador…);\n//   - la cuenta (AccountMenu), y DENTRO de su menú los ajustes de la app: tamaño de letra, idioma, claro u oscuro y los del\n//     proyecto (accountSettings). Antes iban sueltos en la barra, cada uno con su botón: ocupaban lugar y en el menú lateral\n//     encogido (que hace de barra) tapaban el menú (lo reportaron; el autor pidió «un solo menú como el de perfil»);\n//   - sin sesión no hay cuenta: los ajustes van detrás del engrane (SettingsMenu).\n// En columna (vertical) van abajo del menú lateral encogido con vidrio, que hace también de barra (AppLayout).\n//\n// Los botones toman el color de la barra (color: inherit): sobre la barra naranja de Stackcraft van claros, sobre una\n// barra blanca van oscuros, sin que cada botón sepa de qué color es la barra.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaHeaderTools con defaultProps y\n// styleOverrides de sus partes: divider, root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\n\nimport AccountMenu from '@/appShell/AccountMenu.jsx';\nimport SettingsMenu from '@/appShell/SettingsMenu.jsx';\nimport AppearanceSettings from '@/appShell/AppearanceSettings.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaHeaderTools)\nconst THEME_NAME = 'CalcitaHeaderTools';\nconst ToolsDivider = piecePart(THEME_NAME, 'Divider', Divider);\nconst ToolsRoot = piecePart(THEME_NAME, 'Root', Box);\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.headerActions]\n * @param {boolean} props.showFontSizeToggle\n * @param {boolean} props.showLanguageToggle\n * @param {boolean} props.showColorSchemeToggle\n * @param {object|null} props.user\n * @param {string} [props.profilePath]\n * @param {object[]} [props.accountMenuItems]\n * @param {import('react').ReactNode} [props.accountSettings] los ajustes del proyecto, en el menú de la cuenta (SettingSection)\n * @param {boolean} [props.vertical] en columna, para el menú lateral encogido\n * @param {() => void} [props.onSignOut]\n * @param {boolean} [props.isSigningOut]\n */\nexport default function HeaderTools(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaHeaderTools.defaultProps) y encima lo que llega aquí\n    const {\n    headerActions, showFontSizeToggle, showLanguageToggle, showColorSchemeToggle, user, profilePath, accountMenuItems, onSignOut, isSigningOut,\n    accountSettings, vertical = false,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const hasAppearance = showFontSizeToggle || showLanguageToggle || showColorSchemeToggle;\n    const settings = hasAppearance || accountSettings ? (\n        <>\n            <AppearanceSettings showFontSize={showFontSizeToggle} showLanguage={showLanguageToggle} showColorScheme={showColorSchemeToggle} />\n            {hasAppearance && accountSettings && <ToolsDivider ownSx={{my: 0.5}} />}\n            {accountSettings}\n        </>\n    ) : null;\n\n    return (\n        <ToolsRoot ownSx={{display: 'flex', flexDirection: vertical ? 'column' : 'row', alignItems: 'center', gap: 0.5, flexShrink: 0, '& .MuiButtonBase-root': {color: 'inherit'}}}>\n            {headerActions}\n            {user ? (\n                <AccountMenu user={user} profilePath={profilePath} accountMenuItems={accountMenuItems} onSignOut={onSignOut} isSigningOut={isSigningOut}\n                             settings={settings} />\n            ) : (settings || accountMenuItems?.length > 0) && (\n                // sin sesión: el engrane con los ajustes y las ligas propias (en un sistema que ya existía, «Regresar» se perdía)\n                <SettingsMenu showFontSize={showFontSizeToggle} showLanguage={showLanguageToggle} showColorScheme={showColorSchemeToggle}\n                              extraSettings={accountSettings} menuLinks={accountMenuItems} />\n            )}\n        </ToolsRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,WAAW,OAAO;AAC7D,MAAM,YAAY,UAAU,YAAY,QAAQ,GAAG;AAgBnD,SAAwB,YAAY,OAAO;AAEvC,QAAM;AAAA,IACN;AAAA,IAAe;AAAA,IAAoB;AAAA,IAAoB;AAAA,IAAuB;AAAA,IAAM;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAW;AAAA,IAC9H;AAAA,IAAiB,WAAW;AAAA,IAC5B,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,gBAAgB,sBAAsB,sBAAsB;AAClE,QAAM,WAAW,iBAAiB,kBAC9B,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,sBAAmB,cAAc,oBAAoB,cAAc,oBAAoB,iBAAiB,uBAAuB;AAAA,IAC/H,iBAAiB,mBAAmB,oBAAC,cAAA,EAAa,OAAO,EAAC,IAAI,OAAM;AAAA,IACpE;AAAA,EAAA,EAAA,CACL,IACA;AAEJ,SACI,qBAAC,aAAU,OAAO,EAAC,SAAS,QAAQ,eAAe,WAAW,WAAW,OAAO,YAAY,UAAU,KAAK,KAAK,YAAY,GAAG,yBAAyB,EAAC,OAAO,YAAS,GACpK,UAAA;AAAA,IAAA;AAAA,IACA,OACG;AAAA,MAAC;AAAA,MAAA;AAAA,QAAY;AAAA,QAAY;AAAA,QAA0B;AAAA,QAAoC;AAAA,QAAsB;AAAA,QAChG;AAAA,MAAA;AAAA,IAAA,KACZ,YAAY,kBAAkB,SAAS;AAAA,IAExC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,cAAc;AAAA,QAAoB,cAAc;AAAA,QAAoB,iBAAiB;AAAA,QACrF,eAAe;AAAA,QAAiB,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAkB,GAEnF;AAER;"}
+{"version":3,"file":"HeaderTools.js","sources":["../../src/appShell/HeaderTools.jsx"],"sourcesContent":["// Lo de la derecha de la barra, igual en los dos estilos de barra (menú lateral o arriba):\n//   - lo que el proyecto agregue (headerActions: un botón de «reporte urgente», un buscador…);\n//   - la cuenta (AccountMenu), y DENTRO de su menú los ajustes de la app: tamaño de letra, idioma, claro u oscuro y los del\n//     proyecto (accountSettings). Antes iban sueltos en la barra, cada uno con su botón: ocupaban lugar y en el menú lateral\n//     encogido (que hace de barra) tapaban el menú (lo reportaron; el autor pidió «un solo menú como el de perfil»);\n//   - sin sesión no hay cuenta: los ajustes van detrás del engrane (SettingsMenu).\n// En columna (vertical) van abajo del menú lateral encogido con vidrio, que hace también de barra (AppLayout).\n//\n// Los botones toman el color de la barra (color: inherit): sobre la barra naranja de Stackcraft van claros, sobre una\n// barra blanca van oscuros, sin que cada botón sepa de qué color es la barra.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaHeaderTools con defaultProps y\n// styleOverrides de sus partes: divider, root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\n\nimport AccountMenu from '@/appShell/AccountMenu.jsx';\nimport SettingsMenu from '@/appShell/SettingsMenu.jsx';\nimport AppearanceSettings from '@/appShell/AppearanceSettings.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaHeaderTools)\nconst THEME_NAME = 'CalcitaHeaderTools';\nconst ToolsDivider = piecePart(THEME_NAME, 'Divider', Divider);\nconst ToolsRoot = piecePart(THEME_NAME, 'Root', Box);\n\n/**\n * @param {object} props\n * @param {import('react').ReactNode} [props.headerActions]\n * @param {boolean} props.showFontSizeToggle\n * @param {boolean} props.showLanguageToggle\n * @param {boolean} props.showColorSchemeToggle\n * @param {object|null} props.user\n * @param {string} [props.profilePath]\n * @param {object[]} [props.accountMenuItems]\n * @param {import('react').ReactNode} [props.accountSettings] los ajustes del proyecto, en el menú de la cuenta (SettingSection)\n * @param {boolean} [props.vertical] en columna, para el menú lateral encogido\n * @param {() => void} [props.onSignOut]\n * @param {boolean} [props.isSigningOut]\n */\nfunction HeaderToolsContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaHeaderTools.defaultProps) y encima lo que llega aquí\n    const {\n    headerActions, showFontSizeToggle, showLanguageToggle, showColorSchemeToggle, user, profilePath, accountMenuItems, onSignOut, isSigningOut,\n    accountSettings, vertical = false,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const hasAppearance = showFontSizeToggle || showLanguageToggle || showColorSchemeToggle;\n    const settings = hasAppearance || accountSettings ? (\n        <>\n            <AppearanceSettings showFontSize={showFontSizeToggle} showLanguage={showLanguageToggle} showColorScheme={showColorSchemeToggle} />\n            {hasAppearance && accountSettings && <ToolsDivider ownSx={{my: 0.5}} />}\n            {accountSettings}\n        </>\n    ) : null;\n\n    return (\n        <ToolsRoot ownSx={{display: 'flex', flexDirection: vertical ? 'column' : 'row', alignItems: 'center', gap: 0.5, flexShrink: 0, '& .MuiButtonBase-root': {color: 'inherit'}}}>\n            {headerActions}\n            {user ? (\n                <AccountMenu user={user} profilePath={profilePath} accountMenuItems={accountMenuItems} onSignOut={onSignOut} isSigningOut={isSigningOut}\n                             settings={settings} />\n            ) : (settings || accountMenuItems?.length > 0) && (\n                // sin sesión: el engrane con los ajustes y las ligas propias (en un sistema que ya existía, «Regresar» se perdía)\n                <SettingsMenu showFontSize={showFontSizeToggle} showLanguage={showLanguageToggle} showColorScheme={showColorSchemeToggle}\n                              extraSettings={accountSettings} menuLinks={accountMenuItems} />\n            )}\n        </ToolsRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst HeaderTools = withPieceSlots(HeaderToolsContent, THEME_NAME);\nexport default HeaderTools;\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,WAAW,OAAO;AAC7D,MAAM,YAAY,UAAU,YAAY,QAAQ,GAAG;AAgBnD,SAAS,mBAAmB,OAAO;AAE/B,QAAM;AAAA,IACN;AAAA,IAAe;AAAA,IAAoB;AAAA,IAAoB;AAAA,IAAuB;AAAA,IAAM;AAAA,IAAa;AAAA,IAAkB;AAAA,IAAW;AAAA,IAC9H;AAAA,IAAiB,WAAW;AAAA,IAC5B,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,gBAAgB,sBAAsB,sBAAsB;AAClE,QAAM,WAAW,iBAAiB,kBAC9B,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,sBAAmB,cAAc,oBAAoB,cAAc,oBAAoB,iBAAiB,uBAAuB;AAAA,IAC/H,iBAAiB,mBAAmB,oBAAC,cAAA,EAAa,OAAO,EAAC,IAAI,OAAM;AAAA,IACpE;AAAA,EAAA,EAAA,CACL,IACA;AAEJ,SACI,qBAAC,aAAU,OAAO,EAAC,SAAS,QAAQ,eAAe,WAAW,WAAW,OAAO,YAAY,UAAU,KAAK,KAAK,YAAY,GAAG,yBAAyB,EAAC,OAAO,YAAS,GACpK,UAAA;AAAA,IAAA;AAAA,IACA,OACG;AAAA,MAAC;AAAA,MAAA;AAAA,QAAY;AAAA,QAAY;AAAA,QAA0B;AAAA,QAAoC;AAAA,QAAsB;AAAA,QAChG;AAAA,MAAA;AAAA,IAAA,KACZ,YAAY,kBAAkB,SAAS;AAAA,IAExC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,cAAc;AAAA,QAAoB,cAAc;AAAA,QAAoB,iBAAiB;AAAA,QACrF,eAAe;AAAA,QAAiB,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAkB,GAEnF;AAER;AAGA,MAAM,cAAc,eAAe,oBAAoB,UAAU;"}

package/dist/appShell/MobileTabBar.js

@@ -23,7 +23,7 @@ import { accentTextStylesOf, isGlassTheme, glassStylesOf } from "../theme/glassS
 import { mergeStyles } from "../theme/mergeComponents.js";
 import { useToolkitNavigation } from "../toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaMobileTabBar";
 const TabBarTab = piecePart(THEME_NAME, "Tab", ButtonBase);
@@ -155,7 +155,7 @@ function useFittingTabCount(capsule, minTabPixels) {
   }, [capsule, minTabPixels]);
   return tabCount;
 }
-function MobileTabBar(props) {
+function MobileTabBarContent(props) {
   const { menuItems, activeItem, menuBadges, account, moreFooter, minimizeOnScroll = true, onPinnedTabsChange, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("layout");
@@ -355,6 +355,7 @@ function MobileTabBar(props) {
     )
   ] });
 }
+const MobileTabBar = withPieceSlots(MobileTabBarContent, THEME_NAME);
 export {
   MobileTabBar as default
 };