@stackcraftmx/calcita 0.0.0-stage → 0.23.0

package/dist/appShell/AppearanceSettings.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import Typography from "@mui/material/Typography";
+import { useColorScheme } from "@mui/material/styles";
+import AutomaticModeIcon from "@mui/icons-material/BrightnessAutoOutlined";
+import DarkModeIcon from "@mui/icons-material/DarkModeOutlined";
+import LightModeIcon from "@mui/icons-material/LightModeOutlined";
+import { LANGUAGES } from "../ui/navigation/LanguageToggle.js";
+import { useFontSize } from "../ui/navigation/useFontSize.js";
+function SettingSection({ label, value, options, onChange }) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { px: 1, py: 0.5 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", component: "p", sx: { px: 1, lineHeight: 1.6 }, children: label }),
+    /* @__PURE__ */ jsx(
+      ToggleButtonGroup,
+      {
+        value,
+        exclusive: true,
+        fullWidth: true,
+        size: "small",
+        "aria-label": label,
+        onChange: (event, nextValue) => {
+          if (nextValue) {
+            onChange(nextValue);
+          }
+        },
+        children: options.map((option) => /* @__PURE__ */ jsxs(ToggleButton, { value: option.value, sx: { gap: 0.75 }, children: [
+          option.icon,
+          option.label
+        ] }, option.value))
+      }
+    )
+  ] });
+}
+function AppearanceSettings({ showFontSize = true, showLanguage = true, showColorScheme = true }) {
+  const { t, language, changeLanguage } = useToolkitTranslation("layout");
+  const { level, setLevel, levels } = useFontSize();
+  const { mode, setMode } = useColorScheme();
+  const sections = [
+    showFontSize && /* @__PURE__ */ jsx(
+      SettingSection,
+      {
+        label: t("fontSize.label"),
+        value: level,
+        onChange: setLevel,
+        options: levels.map((option) => ({ value: option.key, label: t(option.labelKey) }))
+      },
+      "fontSize"
+    ),
+    showLanguage && /* @__PURE__ */ jsx(
+      SettingSection,
+      {
+        label: t("settings.language"),
+        value: language,
+        onChange: changeLanguage,
+        options: LANGUAGES.map((languageCode) => ({ value: languageCode, label: t(`languageName.${languageCode}`) }))
+      },
+      "language"
+    ),
+    // antes de montar no se sabe el modo (el servidor no lo conoce): la sección sale ya montada.
+    // Tres opciones: «Automático» (system de MUI) sigue lo que diga el equipo y es lo de omisión. Es la ÚNICA salida
+    // para volver a seguirlo: el botón de la barra (ColorSchemeToggle) fija claro u oscuro para siempre. La guía de
+    // Apple pide seguir el ajuste del equipo; el botón de la barra se queda con dos estados para no sumar una decisión.
+    showColorScheme && mode && /* @__PURE__ */ jsx(
+      SettingSection,
+      {
+        label: t("settings.colorScheme"),
+        value: mode,
+        onChange: setMode,
+        options: [
+          { value: "light", label: t("settings.light"), icon: /* @__PURE__ */ jsx(LightModeIcon, { fontSize: "small" }) },
+          { value: "dark", label: t("settings.dark"), icon: /* @__PURE__ */ jsx(DarkModeIcon, { fontSize: "small" }) },
+          { value: "system", label: t("settings.system"), icon: /* @__PURE__ */ jsx(AutomaticModeIcon, { fontSize: "small" }) }
+        ]
+      },
+      "colorScheme"
+    )
+  ].filter(Boolean);
+  return sections.map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }),
+    section
+  ] }, section.key));
+}
+export {
+  SettingSection,
+  AppearanceSettings as default
+};
+//# sourceMappingURL=AppearanceSettings.js.map

package/dist/appShell/AppearanceSettings.js.map

@@ -0,0 +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// 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 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 {LANGUAGES} from '@/ui/navigation/LanguageToggle.jsx';\nimport {useFontSize} from '@/ui/navigation/useFontSize.js';\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    return (\n        <Box sx={{px: 1, py: 0.5}}>\n            <Typography variant=\"overline\" color=\"text.secondary\" component=\"p\" sx={{px: 1, lineHeight: 1.6}}>{label}</Typography>\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                    <ToggleButton key={option.value} value={option.value} sx={{gap: 0.75}}>{option.icon}{option.label}</ToggleButton>\n                ))}\n            </ToggleButtonGroup>\n        </Box>\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 */\nexport default function AppearanceSettings({showFontSize = true, showLanguage = true, showColorScheme = true}) {\n    const {t, language, changeLanguage} = useToolkitTranslation('layout');\n    const {level, setLevel, levels} = useFontSize();\n    const {mode, setMode} = useColorScheme();\n\n    const sections = [\n        showFontSize && (\n            <SettingSection key=\"fontSize\" label={t('fontSize.label')} value={level} onChange={setLevel}\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                            options={LANGUAGES.map((languageCode) => ({value: languageCode, label: t(`languageName.${languageCode}`)}))} />\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={setMode}\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 && <Divider sx={{my: 0.5}} />}\n            {section}\n        </Fragment>\n    ));\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiCO,SAAS,eAAe,EAAC,OAAO,OAAO,SAAS,YAAW;AAC9D,SACI,qBAAC,OAAI,IAAI,EAAC,IAAI,GAAG,IAAI,OACjB,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,SAAQ,YAAW,OAAM,kBAAiB,WAAU,KAAI,IAAI,EAAC,IAAI,GAAG,YAAY,OAAO,UAAA,OAAM;AAAA,IACzG;AAAA,MAAC;AAAA,MAAA;AAAA,QAAkB;AAAA,QAAc,WAAS;AAAA,QAAC,WAAS;AAAA,QAAC,MAAK;AAAA,QAAQ,cAAY;AAAA,QAC3D,UAAU,CAAC,OAAO,cAAc;AAE5B,cAAI,WAAW;AACX,qBAAS,SAAS;AAAA,UACtB;AAAA,QACJ;AAAA,QACd,UAAA,QAAQ,IAAI,CAAC,WACV,qBAAC,cAAA,EAAgC,OAAO,OAAO,OAAO,IAAI,EAAC,KAAK,QAAQ,UAAA;AAAA,UAAA,OAAO;AAAA,UAAM,OAAO;AAAA,QAAA,EAAA,GAAzE,OAAO,KAAwE,CACrG;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AAQA,SAAwB,mBAAmB,EAAC,eAAe,MAAM,eAAe,MAAM,kBAAkB,QAAO;AAC3G,QAAM,EAAC,GAAG,UAAU,eAAA,IAAkB,sBAAsB,QAAQ;AACpE,QAAM,EAAC,OAAO,UAAU,OAAA,IAAU,YAAA;AAClC,QAAM,EAAC,MAAM,QAAA,IAAW,eAAA;AAExB,QAAM,WAAW;AAAA,IACb,gBACI;AAAA,MAAC;AAAA,MAAA;AAAA,QAA8B,OAAO,EAAE,gBAAgB;AAAA,QAAG,OAAO;AAAA,QAAO,UAAU;AAAA,QACnE,SAAS,OAAO,IAAI,CAAC,YAAY,EAAC,OAAO,OAAO,KAAK,OAAO,EAAE,OAAO,QAAQ,IAAG;AAAA,MAAA;AAAA,MAD5E;AAAA,IAAA;AAAA,IAGxB,gBACI;AAAA,MAAC;AAAA,MAAA;AAAA,QAA8B,OAAO,EAAE,mBAAmB;AAAA,QAAG,OAAO;AAAA,QAAU,UAAU;AAAA,QACzE,SAAS,UAAU,IAAI,CAAC,kBAAkB,EAAC,OAAO,cAAc,OAAO,EAAE,gBAAgB,YAAY,EAAE,IAAG;AAAA,MAAA;AAAA,MADtG;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOxB,mBAAmB,QACf;AAAA,MAAC;AAAA,MAAA;AAAA,QAAiC,OAAO,EAAE,sBAAsB;AAAA,QAAG,OAAO;AAAA,QAAM,UAAU;AAAA,QAC3E,SAAS;AAAA,UACL,EAAC,OAAO,SAAS,OAAO,EAAE,gBAAgB,GAAG,MAAM,oBAAC,eAAA,EAAc,UAAS,QAAA,CAAQ,EAAA;AAAA,UACnF,EAAC,OAAO,QAAQ,OAAO,EAAE,eAAe,GAAG,MAAM,oBAAC,cAAA,EAAa,UAAS,QAAA,CAAQ,EAAA;AAAA,UAChF,EAAC,OAAO,UAAU,OAAO,EAAE,iBAAiB,GAAG,MAAM,oBAAC,mBAAA,EAAkB,UAAS,QAAA,CAAQ,EAAA;AAAA,QAAE;AAAA,MAC/F;AAAA,MALI;AAAA,IAAA;AAAA,EAKD,EAEzB,OAAO,OAAO;AAEhB,SAAO,SAAS,IAAI,CAAC,SAAS,+BACzB,UAAA,EACI,UAAA;AAAA,IAAA,QAAQ,KAAK,oBAAC,SAAA,EAAQ,IAAI,EAAC,IAAI,OAAM;AAAA,IACrC;AAAA,EAAA,KAFU,QAAQ,GAGvB,CACH;AACL;"}

package/dist/appShell/AuthLayout.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useToolkitSettings } from "../toolkit/toolkitContext.js";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { GLASS_PANEL_RADIUS_PIXELS, isGlassTheme, ambientBackgroundOf, glassStylesOf } from "../theme/glassSurface.js";
+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";
+const CARD_MAX_WIDTH_PIXELS = 440;
+const cardSurfaceOf = (theme) => isGlassTheme(theme) ? { ...glassStylesOf(theme), borderColor: "transparent", borderRadius: `${GLASS_PANEL_RADIUS_PIXELS}px` } : {};
+const AuthLayout = ({ logo, brandName, title, description, children, footer, showLanguageToggle = true, showColorSchemeToggle = true }) => {
+  const { appName } = useToolkitSettings();
+  return /* @__PURE__ */ jsxs(Box, { sx: [
+    { minHeight: "100vh", display: "flex", flexDirection: "column", bgcolor: "background.default" },
+    (theme) => isGlassTheme(theme) ? ambientBackgroundOf(theme) : {}
+  ], children: [
+    /* @__PURE__ */ jsx(DocumentTitle, { title }),
+    /* @__PURE__ */ jsx(GlassLensFilter, {}),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { justifyContent: "flex-end", p: 2, pt: "max(16px, env(safe-area-inset-top))" }, children: [
+      showLanguageToggle && /* @__PURE__ */ jsx(LanguageToggle, {}),
+      showColorSchemeToggle && /* @__PURE__ */ jsx(ColorSchemeToggle, {})
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { component: "main", sx: { flexGrow: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", px: 2, pb: 6 }, children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.25, sx: { alignItems: "center", mb: 3 }, children: [
+        logo && /* @__PURE__ */ jsx(Box, { sx: { width: 28, height: 28, display: "flex", alignItems: "center", justifyContent: "center" }, children: logo }),
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", component: "p", sx: { fontWeight: 600 }, children: brandName ?? appName })
+      ] }),
+      /* @__PURE__ */ jsxs(Paper, { variant: "outlined", sx: [{ width: "100%", maxWidth: CARD_MAX_WIDTH_PIXELS, p: { xs: 3, sm: 4 } }, cardSurfaceOf], children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h1", children: title }),
+        description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: description }),
+        /* @__PURE__ */ jsx(Box, { sx: { mt: 3 }, children })
+      ] }),
+      footer && /* @__PURE__ */ jsx(Box, { sx: { width: "100%", maxWidth: CARD_MAX_WIDTH_PIXELS, mt: 2 }, children: footer })
+    ] })
+  ] });
+};
+export {
+  AuthLayout
+};
+//# sourceMappingURL=AuthLayout.js.map

package/dist/appShell/AuthLayout.js.map

@@ -0,0 +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// 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 {GLASS_PANEL_RADIUS_PIXELS, ambientBackgroundOf, glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\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';\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: `${GLASS_PANEL_RADIUS_PIXELS}px`}\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 = ({logo, brandName, title, description, children, footer, showLanguageToggle = true, showColorSchemeToggle = true}) => {\n    const {appName} = useToolkitSettings();\n    return (\n        <Box sx={[{minHeight: '100vh', display: 'flex', flexDirection: 'column', bgcolor: 'background.default'},\n            (theme) => (isGlassTheme(theme) ? ambientBackgroundOf(theme) : {})]}>\n            <DocumentTitle title={title} />\n            <GlassLensFilter />\n            <Stack direction=\"row\" spacing={1} sx={{justifyContent: 'flex-end', p: 2, pt: 'max(16px, env(safe-area-inset-top))'}}>\n                {showLanguageToggle && <LanguageToggle />}\n                {showColorSchemeToggle && <ColorSchemeToggle />}\n            </Stack>\n            <Box component=\"main\" sx={{flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', px: 2, pb: 6}}>\n                <Stack direction=\"row\" spacing={1.25} sx={{alignItems: 'center', mb: 3}}>\n                    {logo && <Box sx={{width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>{logo}</Box>}\n                    <Typography variant=\"subtitle1\" component=\"p\" sx={{fontWeight: 600}}>{brandName ?? appName}</Typography>\n                </Stack>\n                <Paper variant=\"outlined\" sx={[{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, p: {xs: 3, sm: 4}}, cardSurfaceOf]}>\n                    <Typography variant=\"h5\" component=\"h1\">{title}</Typography>\n                    {description && <Typography variant=\"body2\" color=\"text.secondary\" sx={{mt: 1}}>{description}</Typography>}\n                    <Box sx={{mt: 3}}>{children}</Box>\n                </Paper>\n                {footer && <Box sx={{width: '100%', maxWidth: CARD_MAX_WIDTH_PIXELS, mt: 2}}>{footer}</Box>}\n            </Box>\n        </Box>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAyBA,MAAM,wBAAwB;AAQ9B,MAAM,gBAAgB,CAAC,UAAW,aAAa,KAAK,IAC9C,EAAC,GAAG,cAAc,KAAK,GAAG,aAAa,eAAe,cAAc,GAAG,yBAAyB,KAAA,IAChG,CAAA;AAaC,MAAM,aAAa,CAAC,EAAC,MAAM,WAAW,OAAO,aAAa,UAAU,QAAQ,qBAAqB,MAAM,wBAAwB,WAAU;AAC5I,QAAM,EAAC,QAAA,IAAW,mBAAA;AAClB,SACI,qBAAC,OAAI,IAAI;AAAA,IAAC,EAAC,WAAW,SAAS,SAAS,QAAQ,eAAe,UAAU,SAAS,qBAAA;AAAA,IAC9E,CAAC,UAAW,aAAa,KAAK,IAAI,oBAAoB,KAAK,IAAI,CAAA;AAAA,EAAC,GAChE,UAAA;AAAA,IAAA,oBAAC,iBAAc,OAAc;AAAA,wBAC5B,iBAAA,EAAgB;AAAA,IACjB,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,IAAI,EAAC,gBAAgB,YAAY,GAAG,GAAG,IAAI,yCACzE,UAAA;AAAA,MAAA,0CAAuB,gBAAA,EAAe;AAAA,MACtC,6CAA0B,mBAAA,CAAA,CAAkB;AAAA,IAAA,GACjD;AAAA,IACA,qBAAC,OAAI,WAAU,QAAO,IAAI,EAAC,UAAU,GAAG,SAAS,QAAQ,eAAe,UAAU,YAAY,UAAU,gBAAgB,UAAU,IAAI,GAAG,IAAI,KACzI,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,MAAM,IAAI,EAAC,YAAY,UAAU,IAAI,EAAA,GAChE,UAAA;AAAA,QAAA,QAAQ,oBAAC,KAAA,EAAI,IAAI,EAAC,OAAO,IAAI,QAAQ,IAAI,SAAS,QAAQ,YAAY,UAAU,gBAAgB,YAAY,UAAA,MAAK;AAAA,QAClH,oBAAC,YAAA,EAAW,SAAQ,aAAY,WAAU,KAAI,IAAI,EAAC,YAAY,IAAA,GAAO,UAAA,aAAa,QAAA,CAAQ;AAAA,MAAA,GAC/F;AAAA,MACA,qBAAC,SAAM,SAAQ,YAAW,IAAI,CAAC,EAAC,OAAO,QAAQ,UAAU,uBAAuB,GAAG,EAAC,IAAI,GAAG,IAAI,IAAC,GAAI,aAAa,GAC7G,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAW,SAAQ,MAAK,WAAU,MAAM,UAAA,OAAM;AAAA,QAC9C,eAAe,oBAAC,YAAA,EAAW,SAAQ,SAAQ,OAAM,kBAAiB,IAAI,EAAC,IAAI,EAAA,GAAK,UAAA,YAAA,CAAY;AAAA,4BAC5F,KAAA,EAAI,IAAI,EAAC,IAAI,EAAA,GAAK,SAAA,CAAS;AAAA,MAAA,GAChC;AAAA,MACC,UAAU,oBAAC,KAAA,EAAI,IAAI,EAAC,OAAO,QAAQ,UAAU,uBAAuB,IAAI,EAAA,GAAK,UAAA,OAAA,CAAO;AAAA,IAAA,EAAA,CACzF;AAAA,EAAA,GACJ;AAER;"}

package/dist/appShell/BarActionButton.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+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 }) {
+  const placement = useBarActionsPlacement();
+  const closeMenu = useCloseBarActionsMenu();
+  if (placement === BAR_ACTIONS_PLACEMENT.menu) {
+    const pickFromMenu = (event) => {
+      closeMenu();
+      onClick?.(event);
+    };
+    return /* @__PURE__ */ jsxs(MenuItem, { onClick: pickFromMenu, disabled, ...buttonProps, children: [
+      /* @__PURE__ */ jsx(ListItemIcon, { children: icon }),
+      /* @__PURE__ */ jsx(ListItemText, { children: label })
+    ] });
+  }
+  if (placement === BAR_ACTIONS_PLACEMENT.capsule) {
+    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(Button, { startIcon: icon, onClick, disabled, color, ...buttonProps, children: label });
+}
+export {
+  BarActionButton as default
+};
+//# sourceMappingURL=BarActionButton.js.map

package/dist/appShell/BarActionButton.js.map

@@ -0,0 +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…).\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 />)\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                <ListItemIcon>{icon}</ListItemIcon>\n                <ListItemText>{label}</ListItemText>\n            </MenuItem>\n        );\n    }\n    if (placement === BAR_ACTIONS_PLACEMENT.capsule) {\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":";;;;;;;;;AA0BA,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,aACrD,UAAA;AAAA,MAAA,oBAAC,gBAAc,UAAA,KAAA,CAAK;AAAA,MACpB,oBAAC,gBAAc,UAAA,MAAA,CAAM;AAAA,IAAA,GACzB;AAAA,EAER;AACA,MAAI,cAAc,sBAAsB,SAAS;AAG7C,+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;"}

package/dist/appShell/BarActions.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, Children } from "react";
+import { createPortal } from "react-dom";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import Tooltip from "@mui/material/Tooltip";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
+import BarCapsule from "./BarCapsule.js";
+import { useBarActionsSlot, BarActionsPlacementContext, BAR_ACTIONS_PLACEMENT, BarActionsMenuCloseContext } from "./barActionsSlot.js";
+import { DESKTOP_MEDIA_QUERY } from "./shellSizes.js";
+import useFittingActionCount from "./useFittingActionCount.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+const InCapsule = ({ children }) => /* @__PURE__ */ jsx(BarActionsPlacementContext.Provider, { value: BAR_ACTIONS_PLACEMENT.capsule, children });
+const MoreActionsMenu = ({ label, children }) => {
+  const [anchorElement, setAnchorElement] = useState(null);
+  const close = () => setAnchorElement(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: label, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": Boolean(anchorElement),
+        onClick: (event) => setAnchorElement(event.currentTarget),
+        children: /* @__PURE__ */ jsx(MoreHorizRoundedIcon, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl: anchorElement,
+        open: Boolean(anchorElement),
+        onClose: close,
+        keepMounted: true,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ jsx(BarActionsMenuCloseContext.Provider, { value: close, children: /* @__PURE__ */ jsx(BarActionsPlacementContext.Provider, { value: BAR_ACTIONS_PLACEMENT.menu, children }) })
+      }
+    )
+  ] });
+};
+const PhoneFloatingCapsule = ({ phoneSlot, label, sx, children }) => {
+  const { t } = useToolkitTranslation("layout");
+  const [capsuleElement, setCapsuleElement] = useState(null);
+  const actions = Children.toArray(children);
+  const visibleCount = useFittingActionCount(phoneSlot, capsuleElement, actions.length);
+  const hiddenActions = actions.slice(visibleCount);
+  return /* @__PURE__ */ jsxs(BarCapsule, { ref: setCapsuleElement, "aria-label": label, sx, children: [
+    /* @__PURE__ */ jsx(InCapsule, { children: actions.slice(0, visibleCount) }),
+    hiddenActions.length > 0 && /* @__PURE__ */ jsx(MoreActionsMenu, { label: t("barActions.more"), children: hiddenActions })
+  ] });
+};
+function BarActions({ children, label, order, sx, inlineSx, bare = false }) {
+  const { slot, phoneSlot, usesCapsules } = useBarActionsSlot();
+  const isDesktop = useMediaQuery(DESKTOP_MEDIA_QUERY);
+  const target = isDesktop ? slot : phoneSlot;
+  const orderSx = order === void 0 ? {} : { order };
+  const extraSx = Array.isArray(sx) ? sx : [sx];
+  const extraInlineSx = Array.isArray(inlineSx) ? inlineSx : [inlineSx];
+  if (!target) {
+    if (bare) {
+      return /* @__PURE__ */ jsx(Box, { role: "group", "aria-label": label, sx: [{ display: "flex", alignItems: "center" }, ...extraInlineSx], children });
+    }
+    return /* @__PURE__ */ jsx(BarCapsule, { "aria-label": label, sx: [{ alignSelf: "flex-start" }, ...extraInlineSx], children: /* @__PURE__ */ jsx(InCapsule, { children }) });
+  }
+  if (!isDesktop && !bare) {
+    return createPortal(/* @__PURE__ */ jsx(PhoneFloatingCapsule, { phoneSlot, label, sx: [orderSx, ...extraSx], children }), target);
+  }
+  if (usesCapsules && !bare) {
+    return createPortal(/* @__PURE__ */ jsx(BarCapsule, { "aria-label": label, sx: [orderSx, ...extraSx], children: /* @__PURE__ */ jsx(InCapsule, { children }) }), target);
+  }
+  if (usesCapsules) {
+    return createPortal(/* @__PURE__ */ jsx(Box, { role: "group", "aria-label": label, sx: [{ display: "flex", alignItems: "center" }, orderSx, ...extraSx], children }), target);
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        role: "group",
+        "aria-label": label,
+        sx: [{ display: "flex", alignItems: "center", gap: 0.5, "& .MuiIconButton-root, & .MuiButton-text": { color: "inherit" } }, orderSx, ...extraSx],
+        children: /* @__PURE__ */ jsx(InCapsule, { children })
+      }
+    ),
+    target
+  );
+}
+export {
+  BarActions as default
+};
+//# sourceMappingURL=BarActions.js.map

package/dist/appShell/BarActions.js.map

@@ -0,0 +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// 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 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 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';\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, children}) => {\n    const {t} = useToolkitTranslation('layout');\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}>\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 */\nexport default function BarActions({children, label, order, sx, inlineSx, bare = false}) {\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 <Box role=\"group\" aria-label={label} sx={[{display: 'flex', alignItems: 'center'}, ...extraInlineSx]}>{children}</Box>;\n        }\n        return (\n            <BarCapsule aria-label={label} sx={[{alignSelf: 'flex-start'}, ...extraInlineSx]}>\n                <InCapsule>{children}</InCapsule>\n            </BarCapsule>\n        );\n    }\n    // flotando en el teléfono: las que caben y el «⋯»\n    if (!isDesktop && !bare) {\n        return createPortal(<PhoneFloatingCapsule phoneSlot={phoneSlot} label={label} sx={[orderSx, ...extraSx]}>{children}</PhoneFloatingCapsule>, target);\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 createPortal(<Box role=\"group\" aria-label={label} sx={[{display: 'flex', alignItems: 'center'}, orderSx, ...extraSx]}>{children}</Box>, target);\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        <Box role=\"group\" aria-label={label}\n             sx={[{display: 'flex', alignItems: 'center', gap: 0.5, '& .MuiIconButton-root, & .MuiButton-text': {color: 'inherit'}}, orderSx, ...extraSx]}>\n            <InCapsule>{children}</InCapsule>\n        </Box>,\n        target,\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/appShell/BarCapsule.js

@@ -0,0 +1,35 @@
+"use client";
+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";
+const BAR_CAPSULE_HEIGHT_PIXELS = 48;
+function BarCapsule({ children, sx, role = "group", ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role,
+      ...rest,
+      sx: [(theme) => ({
+        ...isGlassTheme(theme) ? glassStylesOf(theme, { isControl: true }) : { backgroundColor: paletteOf(theme).background.paper },
+        ...isGlassTheme(theme) && {
+          "& .MuiIconButton-root:not(.Mui-disabled), & .MuiButton-root:not(.Mui-disabled)": { color: paletteOf(theme).text.primary }
+        },
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        flexShrink: 0,
+        minWidth: 0,
+        height: BAR_CAPSULE_HEIGHT_PIXELS,
+        px: 0.75,
+        borderRadius: "999px"
+      }), ...Array.isArray(sx) ? sx : [sx]],
+      children
+    }
+  );
+}
+export {
+  BAR_CAPSULE_HEIGHT_PIXELS,
+  BarCapsule as default
+};
+//# sourceMappingURL=BarCapsule.js.map

package/dist/appShell/BarCapsule.js.map

@@ -0,0 +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, aunque quien los usa les ponga color (color=\"primary\"\n// o un sx propio): en las barras de Apple los símbolos son de un solo color y el color queda para el contenido (HIG\n// Toolbars y Color). Lo pidió el autor. Se logra con un selector de dos clases, que le gana a la clase de color del botón;\n// los deshabilitados se quedan con su gris. Con el minimalista conservan su color.\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';\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 * 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({children, sx, role = 'group', ...rest}) {\n    return (\n        <Box role={role} {...rest}\n             sx={[(theme) => ({\n                 ...(isGlassTheme(theme) ? glassStylesOf(theme, {isControl: true}) : {backgroundColor: paletteOf(theme).background.paper}),\n                 ...(isGlassTheme(theme) && {\n                     '& .MuiIconButton-root:not(.Mui-disabled), & .MuiButton-root:not(.Mui-disabled)': {color: paletteOf(theme).text.primary},\n                 }),\n                 display: 'flex', alignItems: 'center', gap: 0.5, flexShrink: 0, minWidth: 0,\n                 height: BAR_CAPSULE_HEIGHT_PIXELS, px: 0.75, borderRadius: '999px',\n             }), ...(Array.isArray(sx) ? sx : [sx])]}>\n            {children}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;AAiBO,MAAM,4BAA4B;AASzC,SAAwB,WAAW,EAAC,UAAU,IAAI,OAAO,SAAS,GAAG,QAAO;AACxE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAI;AAAA,MAAa,GAAG;AAAA,MAChB,IAAI,CAAC,CAAC,WAAW;AAAA,QACb,GAAI,aAAa,KAAK,IAAI,cAAc,OAAO,EAAC,WAAW,KAAA,CAAK,IAAI,EAAC,iBAAiB,UAAU,KAAK,EAAE,WAAW,MAAA;AAAA,QAClH,GAAI,aAAa,KAAK,KAAK;AAAA,UACvB,kFAAkF,EAAC,OAAO,UAAU,KAAK,EAAE,KAAK,QAAA;AAAA,QAAO;AAAA,QAE3H,SAAS;AAAA,QAAQ,YAAY;AAAA,QAAU,KAAK;AAAA,QAAK,YAAY;AAAA,QAAG,UAAU;AAAA,QAC1E,QAAQ;AAAA,QAA2B,IAAI;AAAA,QAAM,cAAc;AAAA,MAAA,IAC3D,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,CAAC,EAAE,CAAE;AAAA,MACtC;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/appShell/HeaderTools.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import AccountMenu from "./AccountMenu.js";
+import SettingsMenu from "./SettingsMenu.js";
+import AppearanceSettings from "./AppearanceSettings.js";
+function HeaderTools({
+  headerActions,
+  showFontSizeToggle,
+  showLanguageToggle,
+  showColorSchemeToggle,
+  user,
+  profilePath,
+  accountMenuItems,
+  onSignOut,
+  isSigningOut,
+  accountSettings,
+  vertical = false
+}) {
+  const hasAppearance = showFontSizeToggle || showLanguageToggle || showColorSchemeToggle;
+  const settings = hasAppearance || accountSettings ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AppearanceSettings, { showFontSize: showFontSizeToggle, showLanguage: showLanguageToggle, showColorScheme: showColorSchemeToggle }),
+    hasAppearance && accountSettings && /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }),
+    accountSettings
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: vertical ? "column" : "row", alignItems: "center", gap: 0.5, flexShrink: 0, "& .MuiButtonBase-root": { color: "inherit" } }, children: [
+    headerActions,
+    user ? /* @__PURE__ */ jsx(
+      AccountMenu,
+      {
+        user,
+        profilePath,
+        accountMenuItems,
+        onSignOut,
+        isSigningOut,
+        settings
+      }
+    ) : settings && /* @__PURE__ */ jsx(
+      SettingsMenu,
+      {
+        showFontSize: showFontSizeToggle,
+        showLanguage: showLanguageToggle,
+        showColorScheme: showColorSchemeToggle,
+        extraSettings: accountSettings
+      }
+    )
+  ] });
+}
+export {
+  HeaderTools as default
+};
+//# sourceMappingURL=HeaderTools.js.map

package/dist/appShell/HeaderTools.js.map

@@ -0,0 +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// 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';\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({\n    headerActions, showFontSizeToggle, showLanguageToggle, showColorSchemeToggle, user, profilePath, accountMenuItems, onSignOut, isSigningOut,\n    accountSettings, vertical = false,\n}) {\n    const hasAppearance = showFontSizeToggle || showLanguageToggle || showColorSchemeToggle;\n    const settings = hasAppearance || accountSettings ? (\n        <>\n            <AppearanceSettings showFontSize={showFontSizeToggle} showLanguage={showLanguageToggle} showColorScheme={showColorSchemeToggle} />\n            {hasAppearance && accountSettings && <Divider sx={{my: 0.5}} />}\n            {accountSettings}\n        </>\n    ) : null;\n\n    return (\n        <Box sx={{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 && (\n                <SettingsMenu showFontSize={showFontSizeToggle} showLanguage={showLanguageToggle} showColorScheme={showColorSchemeToggle}\n                              extraSettings={accountSettings} />\n            )}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAiCA,SAAwB,YAAY;AAAA,EAChC;AAAA,EAAe;AAAA,EAAoB;AAAA,EAAoB;AAAA,EAAuB;AAAA,EAAM;AAAA,EAAa;AAAA,EAAkB;AAAA,EAAW;AAAA,EAC9H;AAAA,EAAiB,WAAW;AAChC,GAAG;AACC,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,SAAA,EAAQ,IAAI,EAAC,IAAI,OAAM;AAAA,IAC5D;AAAA,EAAA,EAAA,CACL,IACA;AAEJ,SACI,qBAAC,OAAI,IAAI,EAAC,SAAS,QAAQ,eAAe,WAAW,WAAW,OAAO,YAAY,UAAU,KAAK,KAAK,YAAY,GAAG,yBAAyB,EAAC,OAAO,YAAS,GAC3J,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,IACb,YACA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,cAAc;AAAA,QAAoB,cAAc;AAAA,QAAoB,iBAAiB;AAAA,QACrF,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAiB,GAEtD;AAER;"}