@stackcraftmx/calcita 0.0.0-stage → 0.25.0

package/dist/appShell/TopMenu.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { useToolkitNavigation } from "../toolkit/toolkitContext.js";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { menuItemLabelOf } from "./menuItemText.js";
+const ACTIVE_UNDERLINE_PIXELS = 2;
+function TopMenuEntry({ menuItem, activeItem }) {
+  const { t } = useToolkitTranslation("layout");
+  const { Link: RouterLink } = useToolkitNavigation();
+  const [anchorElement, setAnchorElement] = useState(null);
+  const hasChildren = Array.isArray(menuItem.children) && menuItem.children.length > 0;
+  const isActive = menuItem === activeItem || hasChildren && menuItem.children.includes(activeItem);
+  const Icon = menuItem.Icon;
+  const buttonSx = {
+    color: "inherit",
+    borderRadius: 1,
+    px: 1.5,
+    whiteSpace: "nowrap",
+    fontWeight: isActive ? 600 : 500,
+    boxShadow: isActive ? `inset 0 -${ACTIVE_UNDERLINE_PIXELS}px 0 currentColor` : "none"
+  };
+  if (!hasChildren) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        component: RouterLink,
+        to: menuItem.to,
+        startIcon: Icon ? /* @__PURE__ */ jsx(Icon, { fontSize: "small" }) : void 0,
+        "aria-current": isActive ? "page" : void 0,
+        sx: buttonSx,
+        children: menuItemLabelOf(menuItem, t)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: (event) => setAnchorElement(event.currentTarget),
+        "aria-haspopup": "menu",
+        "aria-expanded": Boolean(anchorElement),
+        startIcon: Icon ? /* @__PURE__ */ jsx(Icon, { fontSize: "small" }) : void 0,
+        endIcon: /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }),
+        sx: buttonSx,
+        children: menuItemLabelOf(menuItem, t)
+      }
+    ),
+    /* @__PURE__ */ jsx(Menu, { anchorEl: anchorElement, open: Boolean(anchorElement), onClose: () => setAnchorElement(null), slotProps: { paper: { sx: { minWidth: 220, mt: 0.5 } } }, children: menuItem.children.map((child) => {
+      const ChildIcon = child.Icon;
+      return /* @__PURE__ */ jsxs(MenuItem, { component: RouterLink, to: child.to, selected: child === activeItem, onClick: () => setAnchorElement(null), children: [
+        ChildIcon && /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(ChildIcon, { fontSize: "small" }) }),
+        /* @__PURE__ */ jsx(ListItemText, { primary: menuItemLabelOf(child, t) })
+      ] }, child.to);
+    }) })
+  ] });
+}
+function TopMenu({ menuItems, activeItem }) {
+  const { t } = useToolkitTranslation("layout");
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "nav",
+      "aria-label": t("drawer.ariaLabel"),
+      sx: { display: { xs: "none", md: "flex" }, alignItems: "stretch", alignSelf: "stretch", gap: 0.5, minWidth: 0, overflowX: "auto" },
+      children: menuItems.map((menuItem) => /* @__PURE__ */ jsx(TopMenuEntry, { menuItem, activeItem }, menuItem.to ?? menuItemLabelOf(menuItem, t)))
+    }
+  );
+}
+export {
+  TopMenu as default
+};
+//# sourceMappingURL=TopMenu.js.map

package/dist/appShell/TopMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopMenu.js","sources":["../../src/appShell/TopMenu.jsx"],"sourcesContent":["// El menú dentro de la barra (menuPosition=\"top\"), para apps de pocos módulos: cada entrada es un botón; la que tiene\n// submenú abre una lista debajo. Las secciones no se pintan aquí (en una fila no hay dónde); en el teléfono el menú es\n// el mismo cajón del estilo lateral, con sus secciones.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport ExpandMoreIcon from '@mui/icons-material/ExpandMore';\n\nimport {menuItemLabelOf} from '@/appShell/menuItemText.js';\n\n// la entrada abierta se marca con una raya abajo, del color principal (en la barra naranja, del color del texto)\nconst ACTIVE_UNDERLINE_PIXELS = 2;\n\n/**\n * Un botón del menú de arriba, con su lista si tiene submenú.\n *\n * @param {{menuItem: object, activeItem: object|null}} props\n */\nfunction TopMenuEntry({menuItem, activeItem}) {\n    const {t} = useToolkitTranslation('layout');\n    const {Link: RouterLink} = useToolkitNavigation();\n    const [anchorElement, setAnchorElement] = useState(null);\n    const hasChildren = Array.isArray(menuItem.children) && menuItem.children.length > 0;\n    const isActive = menuItem === activeItem || (hasChildren && menuItem.children.includes(activeItem));\n    const Icon = menuItem.Icon;\n    const buttonSx = {\n        color: 'inherit', borderRadius: 1, px: 1.5, whiteSpace: 'nowrap', fontWeight: isActive ? 600 : 500,\n        boxShadow: isActive ? `inset 0 -${ACTIVE_UNDERLINE_PIXELS}px 0 currentColor` : 'none',\n    };\n\n    if (!hasChildren) {\n        return (\n            <Button component={RouterLink} to={menuItem.to} startIcon={Icon ? <Icon fontSize=\"small\" /> : undefined}\n                    aria-current={isActive ? 'page' : undefined} sx={buttonSx}>\n                {menuItemLabelOf(menuItem, t)}\n            </Button>\n        );\n    }\n    return (\n        <>\n            <Button onClick={(event) => setAnchorElement(event.currentTarget)} aria-haspopup=\"menu\" aria-expanded={Boolean(anchorElement)}\n                    startIcon={Icon ? <Icon fontSize=\"small\" /> : undefined} endIcon={<ExpandMoreIcon fontSize=\"small\" />} sx={buttonSx}>\n                {menuItemLabelOf(menuItem, t)}\n            </Button>\n            <Menu anchorEl={anchorElement} open={Boolean(anchorElement)} onClose={() => setAnchorElement(null)} slotProps={{paper: {sx: {minWidth: 220, mt: 0.5}}}}>\n                {menuItem.children.map((child) => {\n                    const ChildIcon = child.Icon;\n                    return (\n                        <MenuItem key={child.to} component={RouterLink} to={child.to} selected={child === activeItem} onClick={() => setAnchorElement(null)}>\n                            {ChildIcon && <ListItemIcon><ChildIcon fontSize=\"small\" /></ListItemIcon>}\n                            <ListItemText primary={menuItemLabelOf(child, t)} />\n                        </MenuItem>\n                    );\n                })}\n            </Menu>\n        </>\n    );\n}\n\n/**\n * @param {{menuItems: object[], activeItem: object|null}} props\n */\nexport default function TopMenu({menuItems, activeItem}) {\n    const {t} = useToolkitTranslation('layout');\n    return (\n        <Box component=\"nav\" aria-label={t('drawer.ariaLabel')}\n             sx={{display: {xs: 'none', md: 'flex'}, alignItems: 'stretch', alignSelf: 'stretch', gap: 0.5, minWidth: 0, overflowX: 'auto'}}>\n            {menuItems.map((menuItem) => (\n                <TopMenuEntry key={menuItem.to ?? menuItemLabelOf(menuItem, t)} menuItem={menuItem} activeItem={activeItem} />\n            ))}\n        </Box>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAmBA,MAAM,0BAA0B;AAOhC,SAAS,aAAa,EAAC,UAAU,cAAa;AAC1C,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,QAAM,cAAc,MAAM,QAAQ,SAAS,QAAQ,KAAK,SAAS,SAAS,SAAS;AACnF,QAAM,WAAW,aAAa,cAAe,eAAe,SAAS,SAAS,SAAS,UAAU;AACjG,QAAM,OAAO,SAAS;AACtB,QAAM,WAAW;AAAA,IACb,OAAO;AAAA,IAAW,cAAc;AAAA,IAAG,IAAI;AAAA,IAAK,YAAY;AAAA,IAAU,YAAY,WAAW,MAAM;AAAA,IAC/F,WAAW,WAAW,YAAY,uBAAuB,sBAAsB;AAAA,EAAA;AAGnF,MAAI,CAAC,aAAa;AACd,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QAAO,WAAW;AAAA,QAAY,IAAI,SAAS;AAAA,QAAI,WAAW,OAAO,oBAAC,MAAA,EAAK,UAAS,SAAQ,IAAK;AAAA,QACtF,gBAAc,WAAW,SAAS;AAAA,QAAW,IAAI;AAAA,QACpD,UAAA,gBAAgB,UAAU,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGxC;AACA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAO,SAAS,CAAC,UAAU,iBAAiB,MAAM,aAAa;AAAA,QAAG,iBAAc;AAAA,QAAO,iBAAe,QAAQ,aAAa;AAAA,QACpH,WAAW,OAAO,oBAAC,MAAA,EAAK,UAAS,SAAQ,IAAK;AAAA,QAAW,SAAS,oBAAC,gBAAA,EAAe,UAAS,QAAA,CAAQ;AAAA,QAAI,IAAI;AAAA,QAC9G,UAAA,gBAAgB,UAAU,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhC,oBAAC,MAAA,EAAK,UAAU,eAAe,MAAM,QAAQ,aAAa,GAAG,SAAS,MAAM,iBAAiB,IAAI,GAAG,WAAW,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,KAAK,IAAI,IAAA,IAAI,GAC/I,UAAA,SAAS,SAAS,IAAI,CAAC,UAAU;AAC9B,YAAM,YAAY,MAAM;AACxB,aACI,qBAAC,UAAA,EAAwB,WAAW,YAAY,IAAI,MAAM,IAAI,UAAU,UAAU,YAAY,SAAS,MAAM,iBAAiB,IAAI,GAC7H,UAAA;AAAA,QAAA,iCAAc,cAAA,EAAa,UAAA,oBAAC,WAAA,EAAU,UAAS,SAAQ,GAAE;AAAA,4BACzD,cAAA,EAAa,SAAS,gBAAgB,OAAO,CAAC,EAAA,CAAG;AAAA,MAAA,EAAA,GAFvC,MAAM,EAGrB;AAAA,IAER,CAAC,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AAKA,SAAwB,QAAQ,EAAC,WAAW,cAAa;AACrD,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAI,WAAU;AAAA,MAAM,cAAY,EAAE,kBAAkB;AAAA,MAChD,IAAI,EAAC,SAAS,EAAC,IAAI,QAAQ,IAAI,OAAA,GAAS,YAAY,WAAW,WAAW,WAAW,KAAK,KAAK,UAAU,GAAG,WAAW,OAAA;AAAA,MACvH,UAAA,UAAU,IAAI,CAAC,iCACX,cAAA,EAA+D,UAAoB,WAAA,GAAjE,SAAS,MAAM,gBAAgB,UAAU,CAAC,CAA+C,CAC/G;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/appShell/appMenuContext.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, useContext } from "react";
+const AppMenuContext = createContext({ menuItems: [] });
+function useAppMenu() {
+  return useContext(AppMenuContext);
+}
+export {
+  AppMenuContext,
+  useAppMenu
+};
+//# sourceMappingURL=appMenuContext.js.map

package/dist/appShell/appMenuContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appMenuContext.js","sources":["../../src/appShell/appMenuContext.js"],"sourcesContent":["// El menú de la app al alcance de las páginas: AppLayout lo pone y PageHeading lo lee para armar sus migas solas (Inicio ›\n// Sección › Pantalla) sin que cada página las escriba. Fuera de AppLayout el menú está vacío y no hay migas automáticas.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {createContext, useContext} from 'react';\n\nexport const AppMenuContext = createContext({menuItems: []});\n\n/**\n * @returns {{menuItems: object[]}} lo que AppLayout recibió de composeMenu\n */\nexport function useAppMenu() {\n    return useContext(AppMenuContext);\n}\n"],"names":[],"mappings":";;AAMY,MAAC,iBAAiB,cAAc,EAAC,WAAW,GAAE,CAAC;AAKpD,SAAS,aAAa;AACzB,SAAO,WAAW,cAAc;AACpC;"}

package/dist/appShell/barActionsSlot.js

@@ -0,0 +1,26 @@
+"use client";
+import { createContext, useContext } from "react";
+const BAR_ACTIONS_PLACEMENT = Object.freeze({ capsule: "capsule", menu: "menu", inline: "inline" });
+const BarActionsSlotContext = createContext({ slot: null, phoneSlot: null, usesCapsules: false });
+const BarActionsPlacementContext = createContext(BAR_ACTIONS_PLACEMENT.inline);
+const BarActionsMenuCloseContext = createContext(() => {
+});
+function useBarActionsSlot() {
+  return useContext(BarActionsSlotContext);
+}
+function useBarActionsPlacement() {
+  return useContext(BarActionsPlacementContext);
+}
+function useCloseBarActionsMenu() {
+  return useContext(BarActionsMenuCloseContext);
+}
+export {
+  BAR_ACTIONS_PLACEMENT,
+  BarActionsMenuCloseContext,
+  BarActionsPlacementContext,
+  BarActionsSlotContext,
+  useBarActionsPlacement,
+  useBarActionsSlot,
+  useCloseBarActionsMenu
+};
+//# sourceMappingURL=barActionsSlot.js.map

package/dist/appShell/barActionsSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"barActionsSlot.js","sources":["../../src/appShell/barActionsSlot.js"],"sourcesContent":["// Los lugares del marco donde caen las acciones de cada pantalla (BarActions), y cómo va la barra. Los da AppLayout:\n//   - slot: en escritorio, dentro de la barra de arriba (null si no hay barra visible, como con la barra fundida al menú);\n//   - phoneSlot: en el teléfono con cápsulas, el renglón que flota arriba a la derecha y se queda al bajar (null si no hay).\n// Fuera de AppLayout (una prueba, una pantalla sin marco) no hay lugar y las acciones se quedan donde la pantalla las pone.\n// También dice a lo de adentro dónde quedó, para que un botón se acomode solo (BarActionButton):\n//   - en una cápsula (arriba en la barra, flotando en el teléfono o en la pantalla): solo el ícono, con su nombre en el tooltip;\n//   - en el menú «⋯» del teléfono (las que ya no caben en el renglón): un renglón del menú con ícono y texto;\n//   - suelto (fuera de BarActions): ícono con texto.\n//\n// Contexto del paquete: no renderiza (regla de la casa).\nimport {createContext, useContext} from 'react';\n\n/** Dónde quedó un botón de acción: en una cápsula, en el menú «⋯» o suelto. */\nexport const BAR_ACTIONS_PLACEMENT = Object.freeze({capsule: 'capsule', menu: 'menu', inline: 'inline'});\n\nexport const BarActionsSlotContext = createContext({slot: null, phoneSlot: null, usesCapsules: false});\nexport const BarActionsPlacementContext = createContext(BAR_ACTIONS_PLACEMENT.inline);\n// en el menú «⋯»: cómo cerrarlo después de picar una acción\nexport const BarActionsMenuCloseContext = createContext(() => {});\n\n/**\n * @returns {{slot: Element|null, phoneSlot: Element|null, usesCapsules: boolean}} slot: el lugar de la barra en escritorio;\n *     phoneSlot: el renglón flotante del teléfono; usesCapsules: la barra va en cápsulas\n */\nexport function useBarActionsSlot() {\n    return useContext(BarActionsSlotContext);\n}\n\n/**\n * Dónde quedó lo que está adentro de BarActions (BAR_ACTIONS_PLACEMENT). Fuera de BarActions, 'inline'.\n *\n * @returns {string}\n */\nexport function useBarActionsPlacement() {\n    return useContext(BarActionsPlacementContext);\n}\n\n/**\n * En el menú «⋯» del teléfono, la función que lo cierra (para algo propio que haga su acción y deba cerrarlo); fuera de él\n * no hace nada.\n *\n * @returns {() => void}\n */\nexport function useCloseBarActionsMenu() {\n    return useContext(BarActionsMenuCloseContext);\n}\n"],"names":[],"mappings":";;AAaY,MAAC,wBAAwB,OAAO,OAAO,EAAC,SAAS,WAAW,MAAM,QAAQ,QAAQ,SAAQ,CAAC;AAE3F,MAAC,wBAAwB,cAAc,EAAC,MAAM,MAAM,WAAW,MAAM,cAAc,MAAK,CAAC;AACzF,MAAC,6BAA6B,cAAc,sBAAsB,MAAM;AAExE,MAAC,6BAA6B,cAAc,MAAM;AAAC,CAAC;AAMzD,SAAS,oBAAoB;AAChC,SAAO,WAAW,qBAAqB;AAC3C;AAOO,SAAS,yBAAyB;AACrC,SAAO,WAAW,0BAA0B;AAChD;AAQO,SAAS,yBAAyB;AACrC,SAAO,WAAW,0BAA0B;AAChD;"}

package/dist/appShell/barMenuPlacement.js

@@ -0,0 +1,33 @@
+const MENU_GAP_PIXELS = 8;
+const SIDE_GAP_EXTRA_PIXELS = 10;
+function barMenuPlacementOf(anchorElement) {
+  const box = anchorElement && typeof window !== "undefined" ? anchorElement.getBoundingClientRect() : null;
+  const isInLowerHalf = Boolean(box) && box.top > window.innerHeight / 2;
+  const isOnLeftEdge = Boolean(box) && box.right < window.innerWidth / 4;
+  if (isOnLeftEdge) {
+    const vertical = isInLowerHalf ? "bottom" : "top";
+    return {
+      anchorOrigin: { vertical, horizontal: "right" },
+      transformOrigin: { vertical, horizontal: "left" },
+      gapSx: { ml: `${MENU_GAP_PIXELS + SIDE_GAP_EXTRA_PIXELS}px` }
+    };
+  }
+  if (isInLowerHalf) {
+    const bar = anchorElement.closest("header, nav") ?? anchorElement;
+    const insideBarPixels = Math.max(0, box.top - bar.getBoundingClientRect().top);
+    return {
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      transformOrigin: { vertical: "bottom", horizontal: "right" },
+      gapSx: { mt: `-${Math.round(insideBarPixels) + MENU_GAP_PIXELS}px` }
+    };
+  }
+  return {
+    anchorOrigin: { vertical: "bottom", horizontal: "right" },
+    transformOrigin: { vertical: "top", horizontal: "right" },
+    gapSx: { mt: `${MENU_GAP_PIXELS}px` }
+  };
+}
+export {
+  barMenuPlacementOf
+};
+//# sourceMappingURL=barMenuPlacement.js.map

package/dist/appShell/barMenuPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"barMenuPlacement.js","sources":["../../src/appShell/barMenuPlacement.js"],"sourcesContent":["// Hacia dónde abre un menú de la barra (la cuenta, los ajustes): hacia abajo si el botón está arriba de la pantalla, hacia\n// ARRIBA si está abajo, y hacia la DERECHA si está en la orilla izquierda (el menú lateral encogido hace de barra). En el\n// teléfono con vidrio la barra flota abajo, como la de Safari en el iPhone; un menú que abría hacia abajo no cabía y MUI lo\n// subía encima del botón, tapándolo.\n//\n// Se decide al abrir (con la posición real del botón), no con el ancho de la pantalla: así sirve igual si la barra está\n// arriba o abajo, y no depende de nada que el servidor no pueda saber.\n//\n// Funciones puras, sin React: function (regla de la casa).\n\n// lo que se separa el menú de su botón (px)\nconst MENU_GAP_PIXELS = 8;\n// abriendo de lado desde el menú encogido: lo que hay del botón a la orilla del panel (10 px), para que salga afuera\nconst SIDE_GAP_EXTRA_PIXELS = 10;\n\n/**\n * @param {Element|null} anchorElement el botón que abre el menú\n * @returns {{anchorOrigin: object, transformOrigin: object, gapSx: object}} para el <Menu> de MUI (gapSx va en el sx del papel)\n */\nexport function barMenuPlacementOf(anchorElement) {\n    const box = anchorElement && typeof window !== 'undefined' ? anchorElement.getBoundingClientRect() : null;\n    const isInLowerHalf = Boolean(box) && box.top > window.innerHeight / 2;\n    // en la orilla izquierda (el menú lateral encogido, que hace también de barra): abre HACIA LA DERECHA, o se saldría de\n    // la pantalla. Arriba o abajo según dónde esté el botón\n    const isOnLeftEdge = Boolean(box) && box.right < window.innerWidth / 4;\n    if (isOnLeftEdge) {\n        const vertical = isInLowerHalf ? 'bottom' : 'top';\n        return {\n            anchorOrigin: {vertical, horizontal: 'right'},\n            transformOrigin: {vertical, horizontal: 'left'},\n            gapSx: {ml: `${MENU_GAP_PIXELS + SIDE_GAP_EXTRA_PIXELS}px`},\n        };\n    }\n    if (isInLowerHalf) {\n        // la separación se cuenta desde la orilla de la BARRA, no del botón (que va adentro): si no, el menú tocaba la barra\n        // la barra de arriba (header) o la de pestañas del teléfono (nav)\n        const bar = anchorElement.closest('header, nav') ?? anchorElement;\n        const insideBarPixels = Math.max(0, box.top - bar.getBoundingClientRect().top);\n        return {\n            anchorOrigin: {vertical: 'top', horizontal: 'right'},\n            transformOrigin: {vertical: 'bottom', horizontal: 'right'},\n            gapSx: {mt: `-${Math.round(insideBarPixels) + MENU_GAP_PIXELS}px`},\n        };\n    }\n    return {\n        anchorOrigin: {vertical: 'bottom', horizontal: 'right'},\n        transformOrigin: {vertical: 'top', horizontal: 'right'},\n        gapSx: {mt: `${MENU_GAP_PIXELS}px`},\n    };\n}\n"],"names":[],"mappings":"AAWA,MAAM,kBAAkB;AAExB,MAAM,wBAAwB;AAMvB,SAAS,mBAAmB,eAAe;AAC9C,QAAM,MAAM,iBAAiB,OAAO,WAAW,cAAc,cAAc,sBAAqB,IAAK;AACrG,QAAM,gBAAgB,QAAQ,GAAG,KAAK,IAAI,MAAM,OAAO,cAAc;AAGrE,QAAM,eAAe,QAAQ,GAAG,KAAK,IAAI,QAAQ,OAAO,aAAa;AACrE,MAAI,cAAc;AACd,UAAM,WAAW,gBAAgB,WAAW;AAC5C,WAAO;AAAA,MACH,cAAc,EAAC,UAAU,YAAY,QAAO;AAAA,MAC5C,iBAAiB,EAAC,UAAU,YAAY,OAAM;AAAA,MAC9C,OAAO,EAAC,IAAI,GAAG,kBAAkB,qBAAqB,KAAI;AAAA,IACtE;AAAA,EACI;AACA,MAAI,eAAe;AAGf,UAAM,MAAM,cAAc,QAAQ,aAAa,KAAK;AACpD,UAAM,kBAAkB,KAAK,IAAI,GAAG,IAAI,MAAM,IAAI,sBAAqB,EAAG,GAAG;AAC7E,WAAO;AAAA,MACH,cAAc,EAAC,UAAU,OAAO,YAAY,QAAO;AAAA,MACnD,iBAAiB,EAAC,UAAU,UAAU,YAAY,QAAO;AAAA,MACzD,OAAO,EAAC,IAAI,IAAI,KAAK,MAAM,eAAe,IAAI,eAAe,KAAI;AAAA,IAC7E;AAAA,EACI;AACA,SAAO;AAAA,IACH,cAAc,EAAC,UAAU,UAAU,YAAY,QAAO;AAAA,IACtD,iBAAiB,EAAC,UAAU,OAAO,YAAY,QAAO;AAAA,IACtD,OAAO,EAAC,IAAI,GAAG,eAAe,KAAI;AAAA,EAC1C;AACA;"}

package/dist/appShell/menuItemText.js

@@ -0,0 +1,33 @@
+function menuItemLabelOf(menuItem, t) {
+  return menuItem.label ?? (menuItem.labelKey ? t(menuItem.labelKey) : "");
+}
+function menuItemDescriptionOf(menuItem, t) {
+  return menuItem.description ?? (menuItem.descriptionKey ? t(menuItem.descriptionKey) : void 0);
+}
+function menuItemSectionOf(menuItem, t) {
+  return menuItem.section ?? (menuItem.sectionKey ? t(menuItem.sectionKey) : void 0);
+}
+function menuSectionsOf(menuItems, t) {
+  const sectionsByTitle = /* @__PURE__ */ new Map();
+  menuItems.forEach((menuItem) => {
+    const title = menuItemSectionOf(menuItem, t);
+    if (!sectionsByTitle.has(title)) {
+      sectionsByTitle.set(title, { title, menuItems: [] });
+    }
+    sectionsByTitle.get(title).menuItems.push(menuItem);
+  });
+  return [...sectionsByTitle.values()];
+}
+const NAME_PARTICLES = /* @__PURE__ */ new Set(["de", "del", "la", "las", "los", "y", "e", "da", "das", "do", "dos", "di", "du", "van", "von", "der", "le"]);
+function initialsOf(fullName) {
+  const words = String(fullName ?? "").trim().split(/\s+/).filter((word) => Boolean(word) && !NAME_PARTICLES.has(word.toLowerCase()));
+  return words.slice(0, 2).map((word) => word[0]?.toUpperCase() ?? "").join("") || "?";
+}
+export {
+  initialsOf,
+  menuItemDescriptionOf,
+  menuItemLabelOf,
+  menuItemSectionOf,
+  menuSectionsOf
+};
+//# sourceMappingURL=menuItemText.js.map

package/dist/appShell/menuItemText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuItemText.js","sources":["../../src/appShell/menuItemText.js"],"sourcesContent":["// Los textos de una entrada del menú y de la persona en la barra, ya listos para pintarse.\n//\n// Una entrada del menú puede traer su texto escrito (label, description, section) o la llave para traducirlo (labelKey,\n// descriptionKey, sectionKey): con llave, cambia de idioma junto con la app.\n//\n// Funciones puras, sin React: function (regla de la casa). Se prueban con node --test (menuItemText.test.js).\n\n/**\n * El nombre de una entrada del menú.\n *\n * @param {{label?: string, labelKey?: string}} menuItem\n * @param {(key: string) => string} t el traductor de la pantalla\n * @returns {string}\n */\nexport function menuItemLabelOf(menuItem, t) {\n    return menuItem.label ?? (menuItem.labelKey ? t(menuItem.labelKey) : '');\n}\n\n/**\n * Para qué sirve una entrada (para las tarjetas de un inicio).\n *\n * @param {{description?: string, descriptionKey?: string}} menuItem\n * @param {(key: string) => string} t\n * @returns {string|undefined}\n */\nexport function menuItemDescriptionOf(menuItem, t) {\n    return menuItem.description ?? (menuItem.descriptionKey ? t(menuItem.descriptionKey) : undefined);\n}\n\n/**\n * El título de la sección del menú lateral donde va la entrada («Operación», «Administración»).\n *\n * @param {{section?: string, sectionKey?: string}} menuItem\n * @param {(key: string) => string} t\n * @returns {string|undefined}\n */\nexport function menuItemSectionOf(menuItem, t) {\n    return menuItem.section ?? (menuItem.sectionKey ? t(menuItem.sectionKey) : undefined);\n}\n\n/**\n * Las entradas juntas por sección: las secciones salen en el orden en que aparece su primera entrada, y adentro cada\n * entrada en su orden. Las entradas sin sección forman su propio bloque sin título.\n *\n * Por qué por título y no por vecindad: con vecindad, dos módulos de la misma sección con un `order` de otra en medio\n * partían la sección en dos («Interfaz» salía dos veces). Así cada módulo dice su sección sin coordinar números.\n *\n * @param {object[]} menuItems lo que regresa composeMenu\n * @param {(key: string) => string} t\n * @returns {Array<{title: string|undefined, menuItems: object[]}>}\n */\nexport function menuSectionsOf(menuItems, t) {\n    const sectionsByTitle = new Map();\n    menuItems.forEach((menuItem) => {\n        const title = menuItemSectionOf(menuItem, t);\n        if (!sectionsByTitle.has(title)) {\n            sectionsByTitle.set(title, {title, menuItems: []});\n        }\n        sectionsByTitle.get(title).menuItems.push(menuItem);\n    });\n    return [...sectionsByTitle.values()];\n}\n\n// las partículas de los nombres («María de la Luz», «Juan van Dijk»): no son iniciales. Con ellas, «Usuario de Ejemplo»\n// salía «UD» en el avatar.\nconst NAME_PARTICLES = new Set(['de', 'del', 'la', 'las', 'los', 'y', 'e', 'da', 'das', 'do', 'dos', 'di', 'du', 'van', 'von', 'der', 'le']);\n\n/**\n * Las iniciales para el avatar: «Ana María López» → «AM», «Usuario de Ejemplo» → «UE». Sin nombre, «?».\n *\n * @param {string|null|undefined} fullName\n * @returns {string}\n */\nexport function initialsOf(fullName) {\n    const words = String(fullName ?? '').trim().split(/\\s+/).filter((word) => Boolean(word) && !NAME_PARTICLES.has(word.toLowerCase()));\n    return words.slice(0, 2).map((word) => word[0]?.toUpperCase() ?? '').join('') || '?';\n}\n"],"names":[],"mappings":"AAcO,SAAS,gBAAgB,UAAU,GAAG;AACzC,SAAO,SAAS,UAAU,SAAS,WAAW,EAAE,SAAS,QAAQ,IAAI;AACzE;AASO,SAAS,sBAAsB,UAAU,GAAG;AAC/C,SAAO,SAAS,gBAAgB,SAAS,iBAAiB,EAAE,SAAS,cAAc,IAAI;AAC3F;AASO,SAAS,kBAAkB,UAAU,GAAG;AAC3C,SAAO,SAAS,YAAY,SAAS,aAAa,EAAE,SAAS,UAAU,IAAI;AAC/E;AAaO,SAAS,eAAe,WAAW,GAAG;AACzC,QAAM,kBAAkB,oBAAI,IAAG;AAC/B,YAAU,QAAQ,CAAC,aAAa;AAC5B,UAAM,QAAQ,kBAAkB,UAAU,CAAC;AAC3C,QAAI,CAAC,gBAAgB,IAAI,KAAK,GAAG;AAC7B,sBAAgB,IAAI,OAAO,EAAC,OAAO,WAAW,CAAA,EAAE,CAAC;AAAA,IACrD;AACA,oBAAgB,IAAI,KAAK,EAAE,UAAU,KAAK,QAAQ;AAAA,EACtD,CAAC;AACD,SAAO,CAAC,GAAG,gBAAgB,QAAQ;AACvC;AAIA,MAAM,iBAAiB,oBAAI,IAAI,CAAC,MAAM,OAAO,MAAM,OAAO,OAAO,KAAK,KAAK,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO,IAAI,CAAC;AAQpI,SAAS,WAAW,UAAU;AACjC,QAAM,QAAQ,OAAO,YAAY,EAAE,EAAE,KAAI,EAAG,MAAM,KAAK,EAAE,OAAO,CAAC,SAAS,QAAQ,IAAI,KAAK,CAAC,eAAe,IAAI,KAAK,YAAW,CAAE,CAAC;AAClI,SAAO,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC,GAAG,iBAAiB,EAAE,EAAE,KAAK,EAAE,KAAK;AACrF;"}

package/dist/appShell/pageTitle.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useContext, useState, useMemo } from "react";
+const PageTitleContext = createContext({
+  title: null,
+  setTitle: () => {
+  },
+  isTitleVisible: true,
+  setTitleVisible: () => {
+  }
+});
+function PageTitleProvider({ children }) {
+  const [title, setTitle] = useState(null);
+  const [isTitleVisible, setTitleVisible] = useState(true);
+  const value = useMemo(() => ({ title, setTitle, isTitleVisible, setTitleVisible }), [title, isTitleVisible]);
+  return /* @__PURE__ */ jsx(PageTitleContext.Provider, { value, children });
+}
+function usePageTitle() {
+  return useContext(PageTitleContext);
+}
+function useRegisterPageTitle(title, titleRef) {
+  const { setTitle, setTitleVisible } = usePageTitle();
+  useEffect(() => {
+    setTitle(title ?? null);
+    return () => setTitle(null);
+  }, [title, setTitle]);
+  useEffect(() => {
+    const titleElement = titleRef.current;
+    if (!titleElement || typeof IntersectionObserver === "undefined") {
+      return void 0;
+    }
+    const observer = new IntersectionObserver(([entry]) => setTitleVisible(entry.isIntersecting), { threshold: 0 });
+    observer.observe(titleElement);
+    return () => {
+      observer.disconnect();
+      setTitleVisible(true);
+    };
+  }, [titleRef, setTitleVisible]);
+}
+export {
+  PageTitleProvider,
+  usePageTitle,
+  useRegisterPageTitle
+};
+//# sourceMappingURL=pageTitle.js.map

package/dist/appShell/pageTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageTitle.js","sources":["../../src/appShell/pageTitle.jsx"],"sourcesContent":["// El título de la pantalla abierta, para la barra de arriba (del marco de walk-ot, como Linear):\n//   - en escritorio, la barra enseña el título SOLO cuando el título grande de la página ya salió de la vista al deslizar;\n//   - en el teléfono, la barra siempre enseña el título (no hay lugar para un encabezado grande y una barra vacía).\n// PageHeader lo registra solo; AppLayout trae el proveedor. Fuera de AppLayout no pasa nada (el contexto por omisión no\n// hace nada).\n//\n// Proveedor y hooks genéricos del paquete: function (regla de la casa).\nimport {createContext, useContext, useEffect, useMemo, useState} from 'react';\n\nconst PageTitleContext = createContext({\n    title: null,\n    setTitle: () => {},\n    isTitleVisible: true,\n    setTitleVisible: () => {},\n});\n\n/**\n * @param {{children: import('react').ReactNode}} props\n */\nexport function PageTitleProvider({children}) {\n    const [title, setTitle] = useState(null);\n    const [isTitleVisible, setTitleVisible] = useState(true);\n    const value = useMemo(() => ({title, setTitle, isTitleVisible, setTitleVisible}), [title, isTitleVisible]);\n    return <PageTitleContext.Provider value={value}>{children}</PageTitleContext.Provider>;\n}\n\n/**\n * El título registrado y si se está viendo.\n *\n * @returns {{title: string|null, setTitle: Function, isTitleVisible: boolean, setTitleVisible: Function}}\n */\nexport function usePageTitle() {\n    return useContext(PageTitleContext);\n}\n\n/**\n * Registra el título de la página y avisa si su elemento se está viendo (para la barra).\n *\n * @param {string|null|undefined} title\n * @param {{current: Element|null}} titleRef el elemento del título grande\n */\nexport function useRegisterPageTitle(title, titleRef) {\n    const {setTitle, setTitleVisible} = usePageTitle();\n\n    useEffect(() => {\n        setTitle(title ?? null);\n        return () => setTitle(null);\n    }, [title, setTitle]);\n\n    useEffect(() => {\n        const titleElement = titleRef.current;\n        // guard clause: sin elemento o sin IntersectionObserver (pintando en el servidor) no hay nada que observar\n        if (!titleElement || typeof IntersectionObserver === 'undefined') {\n            return undefined;\n        }\n        const observer = new IntersectionObserver(([entry]) => setTitleVisible(entry.isIntersecting), {threshold: 0});\n        observer.observe(titleElement);\n        return () => {\n            observer.disconnect();\n            setTitleVisible(true);\n        };\n    }, [titleRef, setTitleVisible]);\n}\n"],"names":[],"mappings":";;;AASA,MAAM,mBAAmB,cAAc;AAAA,EACnC,OAAO;AAAA,EACP,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,gBAAgB;AAAA,EAChB,iBAAiB,MAAM;AAAA,EAAC;AAC5B,CAAC;AAKM,SAAS,kBAAkB,EAAC,YAAW;AAC1C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,IAAI;AACvC,QAAM,CAAC,gBAAgB,eAAe,IAAI,SAAS,IAAI;AACvD,QAAM,QAAQ,QAAQ,OAAO,EAAC,OAAO,UAAU,gBAAgB,oBAAmB,CAAC,OAAO,cAAc,CAAC;AACzG,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,OAAe,SAAA,CAAS;AAC9D;AAOO,SAAS,eAAe;AAC3B,SAAO,WAAW,gBAAgB;AACtC;AAQO,SAAS,qBAAqB,OAAO,UAAU;AAClD,QAAM,EAAC,UAAU,gBAAA,IAAmB,aAAA;AAEpC,YAAU,MAAM;AACZ,aAAS,SAAS,IAAI;AACtB,WAAO,MAAM,SAAS,IAAI;AAAA,EAC9B,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,YAAU,MAAM;AACZ,UAAM,eAAe,SAAS;AAE9B,QAAI,CAAC,gBAAgB,OAAO,yBAAyB,aAAa;AAC9D,aAAO;AAAA,IACX;AACA,UAAM,WAAW,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM,gBAAgB,MAAM,cAAc,GAAG,EAAC,WAAW,GAAE;AAC5G,aAAS,QAAQ,YAAY;AAC7B,WAAO,MAAM;AACT,eAAS,WAAA;AACT,sBAAgB,IAAI;AAAA,IACxB;AAAA,EACJ,GAAG,CAAC,UAAU,eAAe,CAAC;AAClC;"}

package/dist/appShell/shellSizes.js

@@ -0,0 +1,40 @@
+import { GLASS_INSET_PIXELS } from "../theme/glassSurface.js";
+const MAIN_CONTENT_ID = "main-content";
+const DRAWER_WIDTH_EXPANDED = 240;
+const DRAWER_WIDTH_COLLAPSED = 64;
+const APP_BAR_HEIGHT_PIXELS = 56;
+const GLASS_PANEL_GAP_PIXELS = GLASS_INSET_PIXELS;
+const PHONE_MEDIA_QUERY = "@media (max-width: 899.95px), (max-height: 499.95px)";
+const DESKTOP_MEDIA_QUERY = "@media (min-width: 900px) and (min-height: 500px)";
+const PHONE_LANDSCAPE_MEDIA_QUERY = "@media (max-height: 499.95px)";
+const MOBILE_TAB_BAR_HEIGHT_PIXELS = Object.freeze({ portrait: 60, landscape: 46 });
+const FLOATING_BOTTOM_SPACE_CSS_VARIABLE = "--calcita-floating-bottom-space";
+function aboveMobileTabBarOf(gapPixels) {
+  return {
+    [PHONE_MEDIA_QUERY]: {
+      top: "auto",
+      bottom: `calc(${GLASS_PANEL_GAP_PIXELS + MOBILE_TAB_BAR_HEIGHT_PIXELS.portrait + gapPixels}px + env(safe-area-inset-bottom))`
+    },
+    [PHONE_LANDSCAPE_MEDIA_QUERY]: {
+      bottom: `calc(${GLASS_PANEL_GAP_PIXELS + MOBILE_TAB_BAR_HEIGHT_PIXELS.landscape + gapPixels}px + env(safe-area-inset-bottom))`
+    }
+  };
+}
+function drawerTransitionOf(theme, properties = ["width"]) {
+  return theme.transitions.create(properties, { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen });
+}
+export {
+  APP_BAR_HEIGHT_PIXELS,
+  DESKTOP_MEDIA_QUERY,
+  DRAWER_WIDTH_COLLAPSED,
+  DRAWER_WIDTH_EXPANDED,
+  FLOATING_BOTTOM_SPACE_CSS_VARIABLE,
+  GLASS_PANEL_GAP_PIXELS,
+  MAIN_CONTENT_ID,
+  MOBILE_TAB_BAR_HEIGHT_PIXELS,
+  PHONE_LANDSCAPE_MEDIA_QUERY,
+  PHONE_MEDIA_QUERY,
+  aboveMobileTabBarOf,
+  drawerTransitionOf
+};
+//# sourceMappingURL=shellSizes.js.map

package/dist/appShell/shellSizes.js.map

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

package/dist/appShell/tabBarRule.js

@@ -0,0 +1,12 @@
+import { THEME_LOOK, TOP_BAR } from "../theme/createToolkitTheme.js";
+import { isGlassTheme } from "../theme/glassSurface.js";
+function usesMobileTabBar(theme) {
+  if (isGlassTheme(theme)) {
+    return true;
+  }
+  return theme.toolkit?.look === THEME_LOOK.minimal && theme.toolkit?.bar === TOP_BAR.capsules;
+}
+export {
+  usesMobileTabBar
+};
+//# sourceMappingURL=tabBarRule.js.map

package/dist/appShell/tabBarRule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabBarRule.js","sources":["../../src/appShell/tabBarRule.js"],"sourcesContent":["// Si el teléfono lleva la barra de pestañas de abajo (MobileTabBar, como iOS 26) en lugar de la barra de arriba con la ☰\n// y el cajón: con vidrio siempre, y con el minimalista cuando la barra va en cápsulas (lo pidió el autor: «el mínimo con\n// cápsulas también, con el comportamiento de vidrio en el menú»). Con el minimalista y la franja, la barra de arriba de\n// siempre (estilo Material).\n//\n// Un solo lugar para la regla: la usan el marco (AppLayout) y lo que flota encima de esa barra (la invitación a instalar,\n// el aviso de versión nueva), que tienen que saber si hay barra abajo para no taparla.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\nimport {THEME_LOOK, TOP_BAR} from '@/theme/createToolkitTheme.js';\nimport {isGlassTheme} from '@/theme/glassSurface.js';\n\n/**\n * @param {object} theme el tema de MUI\n * @returns {boolean}\n */\nexport function usesMobileTabBar(theme) {\n    if (isGlassTheme(theme)) {\n        return true;\n    }\n    return theme.toolkit?.look === THEME_LOOK.minimal && theme.toolkit?.bar === TOP_BAR.capsules;\n}\n"],"names":[],"mappings":";;AAgBO,SAAS,iBAAiB,OAAO;AACpC,MAAI,aAAa,KAAK,GAAG;AACrB,WAAO;AAAA,EACX;AACA,SAAO,MAAM,SAAS,SAAS,WAAW,WAAW,MAAM,SAAS,QAAQ,QAAQ;AACxF;"}

package/dist/appShell/tabBarScroll.js

@@ -0,0 +1,23 @@
+const MINIMIZE_AFTER_PIXELS = 24;
+const ALWAYS_EXPANDED_UNTIL_PIXELS = 60;
+const TAB_BAR_SCROLL_START = Object.freeze({ isMinimized: false, lastY: 0, travel: 0 });
+function tabBarStateAfterScroll(state, scrollY) {
+  const delta = scrollY - state.lastY;
+  const travel = Math.sign(delta) === Math.sign(state.travel) ? state.travel + delta : delta;
+  let isMinimized = state.isMinimized;
+  if (scrollY <= ALWAYS_EXPANDED_UNTIL_PIXELS) {
+    isMinimized = false;
+  } else if (travel >= MINIMIZE_AFTER_PIXELS) {
+    isMinimized = true;
+  } else if (travel <= -12) {
+    isMinimized = false;
+  }
+  return { isMinimized, lastY: scrollY, travel };
+}
+export {
+  ALWAYS_EXPANDED_UNTIL_PIXELS,
+  MINIMIZE_AFTER_PIXELS,
+  TAB_BAR_SCROLL_START,
+  tabBarStateAfterScroll
+};
+//# sourceMappingURL=tabBarScroll.js.map

package/dist/appShell/tabBarScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabBarScroll.js","sources":["../../src/appShell/tabBarScroll.js"],"sourcesContent":["// Cuándo se encoge la barra de pestañas del teléfono (MobileTabBar), como la de iOS 26: al leer hacia abajo se vuelve una\n// cápsula chica con la pestaña donde está la persona, y en cuanto sube un poco regresa completa.\n//\n//   - No cuenta cada evento de deslizar sino lo recorrido en la misma dirección: el navegador avisa de a 1 a 3 px y, si\n//     se comparara evento contra evento, nunca pasaría del umbral.\n//   - Cerca de arriba siempre va completa: ahí todavía no hay nada que leer debajo.\n//\n// Funciones puras, no renderizan: function (regla de la casa). Pruebas en tabBarScroll.test.js; el hook que las usa es\n// useTabBarMinimized.js.\n\n// lo que hay que bajar seguido para encogerla y subir para que regrese (px); subir regresa más rápido, como en iOS\nexport const MINIMIZE_AFTER_PIXELS = 24;\nexport const EXPAND_AFTER_PIXELS = 12;\n// arriba de esto siempre va completa (px): lo alto de la barra\nexport const ALWAYS_EXPANDED_UNTIL_PIXELS = 60;\n\n/** Al abrir la pantalla: completa, arriba y sin recorrido. */\nexport const TAB_BAR_SCROLL_START = Object.freeze({isMinimized: false, lastY: 0, travel: 0});\n\n/**\n * El estado de la barra después de que la página se deslizó a scrollY.\n *\n * @param {{isMinimized: boolean, lastY: number, travel: number}} state travel: lo recorrido en la dirección de ahorita\n *     (positivo hacia abajo)\n * @param {number} scrollY cuánto está deslizada la página (window.scrollY)\n * @returns {{isMinimized: boolean, lastY: number, travel: number}}\n */\nexport function tabBarStateAfterScroll(state, scrollY) {\n    const delta = scrollY - state.lastY;\n    // si cambió de dirección, lo recorrido empieza de nuevo\n    const travel = Math.sign(delta) === Math.sign(state.travel) ? state.travel + delta : delta;\n\n    let isMinimized = state.isMinimized;\n    if (scrollY <= ALWAYS_EXPANDED_UNTIL_PIXELS) {\n        isMinimized = false;\n    } else if (travel >= MINIMIZE_AFTER_PIXELS) {\n        isMinimized = true;\n    } else if (travel <= -EXPAND_AFTER_PIXELS) {\n        isMinimized = false;\n    }\n    return {isMinimized, lastY: scrollY, travel};\n}\n"],"names":[],"mappings":"AAWY,MAAC,wBAAwB;AAGzB,MAAC,+BAA+B;AAGhC,MAAC,uBAAuB,OAAO,OAAO,EAAC,aAAa,OAAO,OAAO,GAAG,QAAQ,EAAC,CAAC;AAUpF,SAAS,uBAAuB,OAAO,SAAS;AACnD,QAAM,QAAQ,UAAU,MAAM;AAE9B,QAAM,SAAS,KAAK,KAAK,KAAK,MAAM,KAAK,KAAK,MAAM,MAAM,IAAI,MAAM,SAAS,QAAQ;AAErF,MAAI,cAAc,MAAM;AACxB,MAAI,WAAW,8BAA8B;AACzC,kBAAc;AAAA,EAClB,WAAW,UAAU,uBAAuB;AACxC,kBAAc;AAAA,EAClB,WAAW,UAAU,KAAsB;AACvC,kBAAc;AAAA,EAClB;AACA,SAAO,EAAC,aAAa,OAAO,SAAS,OAAM;AAC/C;"}

package/dist/appShell/useDrawerCollapsed.js

@@ -0,0 +1,29 @@
+"use client";
+import { useState, useCallback, useEffect, useLayoutEffect } from "react";
+const STORAGE_KEY = "calcita:drawerCollapsed";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useDrawerCollapsed(defaultCollapsed = false) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  useBrowserLayoutEffect(() => {
+    try {
+      const storedValue = window.localStorage.getItem(STORAGE_KEY);
+      if (storedValue === "true" || storedValue === "false") {
+        setCollapsed(storedValue === "true");
+      }
+    } catch {
+    }
+  }, []);
+  const remember = useCallback((nextCollapsed) => {
+    setCollapsed(nextCollapsed);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, String(nextCollapsed));
+    } catch {
+    }
+  }, []);
+  const toggle = useCallback(() => remember(!collapsed), [collapsed, remember]);
+  return { collapsed, toggle };
+}
+export {
+  useDrawerCollapsed
+};
+//# sourceMappingURL=useDrawerCollapsed.js.map

package/dist/appShell/useDrawerCollapsed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerCollapsed.js","sources":["../../src/appShell/useDrawerCollapsed.js"],"sourcesContent":["// Si el menú lateral está encogido (solo íconos), recordado en este navegador (del marco de walk-ot).\n//\n//   - La preferencia se lee ANTES del primer pintado del navegador (useLayoutEffect): sin eso, el menú brinca del valor por\n//     omisión al que la persona dejó.\n//   - En el teléfono no aplica: ahí el menú es un cajón que se abre con la hamburguesa (AppLayout lo elige con CSS).\n//   - Sin almacenamiento (ventana privada estricta) se usa el valor por omisión, sin tronar.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useCallback, useEffect, useLayoutEffect, useState} from 'react';\n\nconst STORAGE_KEY = 'calcita:drawerCollapsed';\n// en el servidor useLayoutEffect avisa en consola; ahí no hay nada que leer\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n/**\n * @param {boolean} [defaultCollapsed]\n * @returns {{collapsed: boolean, toggle: () => void}}\n */\nexport function useDrawerCollapsed(defaultCollapsed = false) {\n    const [collapsed, setCollapsed] = useState(defaultCollapsed);\n\n    useBrowserLayoutEffect(() => {\n        try {\n            const storedValue = window.localStorage.getItem(STORAGE_KEY);\n            if (storedValue === 'true' || storedValue === 'false') {\n                setCollapsed(storedValue === 'true');\n            }\n        } catch {\n            // almacenamiento bloqueado: se queda el valor por omisión\n        }\n    }, []);\n\n    const remember = useCallback((nextCollapsed) => {\n        setCollapsed(nextCollapsed);\n        try {\n            window.localStorage.setItem(STORAGE_KEY, String(nextCollapsed));\n        } catch {\n            // almacenamiento bloqueado: cambia igual, solo no se recuerda\n        }\n    }, []);\n\n    const toggle = useCallback(() => remember(!collapsed), [collapsed, remember]);\n\n    return {collapsed, toggle};\n}\n"],"names":[],"mappings":";;AAUA,MAAM,cAAc;AAEpB,MAAM,yBAAyB,OAAO,WAAW,cAAc,YAAY;AAMpE,SAAS,mBAAmB,mBAAmB,OAAO;AACzD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,gBAAgB;AAE3D,yBAAuB,MAAM;AACzB,QAAI;AACA,YAAM,cAAc,OAAO,aAAa,QAAQ,WAAW;AAC3D,UAAI,gBAAgB,UAAU,gBAAgB,SAAS;AACnD,qBAAa,gBAAgB,MAAM;AAAA,MACvC;AAAA,IACJ,QAAQ;AAAA,IAER;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,WAAW,YAAY,CAAC,kBAAkB;AAC5C,iBAAa,aAAa;AAC1B,QAAI;AACA,aAAO,aAAa,QAAQ,aAAa,OAAO,aAAa,CAAC;AAAA,IAClE,QAAQ;AAAA,IAER;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,SAAS,YAAY,MAAM,SAAS,CAAC,SAAS,GAAG,CAAC,WAAW,QAAQ,CAAC;AAE5E,SAAO,EAAC,WAAW,OAAM;AAC7B;"}

package/dist/appShell/useFittingActionCount.js

@@ -0,0 +1,45 @@
+"use client";
+import { useState, useLayoutEffect } from "react";
+import { BAR_CAPSULE_HEIGHT_PIXELS } from "./BarCapsule.js";
+const FALLBACK_BUTTON_PIXELS = 40;
+const pixelsOf = (value) => Number.parseFloat(value) || 0;
+const goesBefore = (sibling, capsule) => {
+  const siblingOrder = pixelsOf(window.getComputedStyle(sibling).order);
+  const capsuleOrder = pixelsOf(window.getComputedStyle(capsule).order);
+  if (siblingOrder !== capsuleOrder) {
+    return siblingOrder < capsuleOrder;
+  }
+  return Boolean(sibling.compareDocumentPosition(capsule) & Node.DOCUMENT_POSITION_FOLLOWING);
+};
+const occupiedWidthOf = (sibling) => pixelsOf(window.getComputedStyle(sibling).flexGrow) > 0 ? BAR_CAPSULE_HEIGHT_PIXELS : sibling.getBoundingClientRect().width;
+function useFittingActionCount(slot, capsule, actionCount) {
+  const [visibleCount, setVisibleCount] = useState(actionCount);
+  useLayoutEffect(() => {
+    if (!slot || !capsule) {
+      setVisibleCount(actionCount);
+      return void 0;
+    }
+    const measure = () => {
+      const rowGap = pixelsOf(window.getComputedStyle(slot).columnGap);
+      const siblingsBefore = [...slot.children].filter((sibling) => sibling !== capsule && goesBefore(sibling, capsule));
+      const takenBefore = siblingsBefore.reduce((total, sibling) => total + occupiedWidthOf(sibling) + rowGap, 0);
+      const freeWidth = slot.clientWidth - takenBefore;
+      const capsuleStyle = window.getComputedStyle(capsule);
+      const padding = pixelsOf(capsuleStyle.paddingLeft) + pixelsOf(capsuleStyle.paddingRight);
+      const buttonGap = pixelsOf(capsuleStyle.columnGap);
+      const buttonWidth = capsule.firstElementChild?.getBoundingClientRect().width || FALLBACK_BUTTON_PIXELS;
+      const fitting = Math.max(1, Math.floor((freeWidth - padding + buttonGap) / (buttonWidth + buttonGap)));
+      setVisibleCount(fitting >= actionCount ? actionCount : fitting - 1);
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(slot);
+    [...slot.children].forEach((sibling) => observer.observe(sibling));
+    return () => observer.disconnect();
+  }, [slot, capsule, actionCount]);
+  return Math.min(visibleCount, actionCount);
+}
+export {
+  useFittingActionCount as default
+};
+//# sourceMappingURL=useFittingActionCount.js.map

package/dist/appShell/useFittingActionCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFittingActionCount.js","sources":["../../src/appShell/useFittingActionCount.js"],"sourcesContent":["// En el teléfono, cuántos botones de un grupo de acciones (BarActions) caben en el renglón que flota arriba. Lo que no cabe\n// va a un menú «⋯» (guía de Apple, Toolbars: «Create a More menu to include additional items»); si caben todos, no hay «⋯».\n//\n// Cómo se reparte el renglón: los grupos que van ANTES (el de `order` menor, y con el mismo order el que se escribió\n// primero) tienen preferencia; este grupo usa lo que sobra. Así, si no cabe todo, el último grupo es el que manda sus\n// botones al «⋯», y la cuenta no da vueltas: lo de antes no depende de lo de después.\n//\n// OJO: no se mide el ancho de la propia cápsula para decidir (cambia al esconder botones y la cuenta daría vueltas sin fin);\n// se mide el renglón y lo que ocupan los de antes. Un grupo que se estira (el buscador abierto, con flex-grow) cuenta como\n// la lupa chica: si no, al abrir el buscador las acciones se irían al «⋯».\n//\n// Gancho del paquete; no renderiza.\nimport {useLayoutEffect, useState} from 'react';\n\nimport {BAR_CAPSULE_HEIGHT_PIXELS} from '@/appShell/BarCapsule.jsx';\n\n// si todavía no hay botones que medir: lo que mide un IconButton de MUI\nconst FALLBACK_BUTTON_PIXELS = 40;\n\nconst pixelsOf = (value) => Number.parseFloat(value) || 0;\n\n/** ¿El hermano va antes que la cápsula en el renglón? (por su `order` de CSS y, si empatan, por cómo están escritos) */\nconst goesBefore = (sibling, capsule) => {\n    const siblingOrder = pixelsOf(window.getComputedStyle(sibling).order);\n    const capsuleOrder = pixelsOf(window.getComputedStyle(capsule).order);\n    if (siblingOrder !== capsuleOrder) {\n        return siblingOrder < capsuleOrder;\n    }\n    return Boolean(sibling.compareDocumentPosition(capsule) & Node.DOCUMENT_POSITION_FOLLOWING);\n};\n\n/** Lo que ocupa un hermano en el renglón; el que se estira (buscador abierto) cuenta como la lupa chica. */\nconst occupiedWidthOf = (sibling) => (\n    pixelsOf(window.getComputedStyle(sibling).flexGrow) > 0 ? BAR_CAPSULE_HEIGHT_PIXELS : sibling.getBoundingClientRect().width\n);\n\n/**\n * @param {Element|null} slot el renglón flotante del teléfono (null: no se mide y se ven todos)\n * @param {HTMLElement|null} capsule la cápsula de este grupo\n * @param {number} actionCount cuántos botones trae el grupo\n * @returns {number} cuántos se ven como ícono; si es menor que actionCount, los demás van al «⋯»\n */\nexport default function useFittingActionCount(slot, capsule, actionCount) {\n    const [visibleCount, setVisibleCount] = useState(actionCount);\n\n    // antes de pintar (layout effect): así nunca se ve el renglón saliéndose de la pantalla\n    useLayoutEffect(() => {\n        if (!slot || !capsule) {\n            setVisibleCount(actionCount);\n            return undefined;\n        }\n        const measure = () => {\n            const rowGap = pixelsOf(window.getComputedStyle(slot).columnGap);\n            const siblingsBefore = [...slot.children].filter((sibling) => sibling !== capsule && goesBefore(sibling, capsule));\n            const takenBefore = siblingsBefore.reduce((total, sibling) => total + occupiedWidthOf(sibling) + rowGap, 0);\n            const freeWidth = slot.clientWidth - takenBefore;\n\n            const capsuleStyle = window.getComputedStyle(capsule);\n            const padding = pixelsOf(capsuleStyle.paddingLeft) + pixelsOf(capsuleStyle.paddingRight);\n            const buttonGap = pixelsOf(capsuleStyle.columnGap);\n            const buttonWidth = capsule.firstElementChild?.getBoundingClientRect().width || FALLBACK_BUTTON_PIXELS;\n            // cuántos botones caben: relleno + n botones + (n - 1) huecos <= lo libre\n            const fitting = Math.max(1, Math.floor((freeWidth - padding + buttonGap) / (buttonWidth + buttonGap)));\n            // si no caben todos, uno de esos lugares es para el «⋯»\n            setVisibleCount(fitting >= actionCount ? actionCount : fitting - 1);\n        };\n        measure();\n        // se vuelve a medir al girar el teléfono o cuando cambia lo que ocupan los de antes\n        const observer = new ResizeObserver(measure);\n        observer.observe(slot);\n        [...slot.children].forEach((sibling) => observer.observe(sibling));\n        return () => observer.disconnect();\n    }, [slot, capsule, actionCount]);\n\n    return Math.min(visibleCount, actionCount);\n}\n"],"names":[],"mappings":";;;AAiBA,MAAM,yBAAyB;AAE/B,MAAM,WAAW,CAAC,UAAU,OAAO,WAAW,KAAK,KAAK;AAGxD,MAAM,aAAa,CAAC,SAAS,YAAY;AACrC,QAAM,eAAe,SAAS,OAAO,iBAAiB,OAAO,EAAE,KAAK;AACpE,QAAM,eAAe,SAAS,OAAO,iBAAiB,OAAO,EAAE,KAAK;AACpE,MAAI,iBAAiB,cAAc;AAC/B,WAAO,eAAe;AAAA,EAC1B;AACA,SAAO,QAAQ,QAAQ,wBAAwB,OAAO,IAAI,KAAK,2BAA2B;AAC9F;AAGA,MAAM,kBAAkB,CAAC,YACrB,SAAS,OAAO,iBAAiB,OAAO,EAAE,QAAQ,IAAI,IAAI,4BAA4B,QAAQ,wBAAwB;AAS3G,SAAS,sBAAsB,MAAM,SAAS,aAAa;AACtE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,WAAW;AAG5D,kBAAgB,MAAM;AAClB,QAAI,CAAC,QAAQ,CAAC,SAAS;AACnB,sBAAgB,WAAW;AAC3B,aAAO;AAAA,IACX;AACA,UAAM,UAAU,MAAM;AAClB,YAAM,SAAS,SAAS,OAAO,iBAAiB,IAAI,EAAE,SAAS;AAC/D,YAAM,iBAAiB,CAAC,GAAG,KAAK,QAAQ,EAAE,OAAO,CAAC,YAAY,YAAY,WAAW,WAAW,SAAS,OAAO,CAAC;AACjH,YAAM,cAAc,eAAe,OAAO,CAAC,OAAO,YAAY,QAAQ,gBAAgB,OAAO,IAAI,QAAQ,CAAC;AAC1G,YAAM,YAAY,KAAK,cAAc;AAErC,YAAM,eAAe,OAAO,iBAAiB,OAAO;AACpD,YAAM,UAAU,SAAS,aAAa,WAAW,IAAI,SAAS,aAAa,YAAY;AACvF,YAAM,YAAY,SAAS,aAAa,SAAS;AACjD,YAAM,cAAc,QAAQ,mBAAmB,sBAAqB,EAAG,SAAS;AAEhF,YAAM,UAAU,KAAK,IAAI,GAAG,KAAK,OAAO,YAAY,UAAU,cAAc,cAAc,UAAU,CAAC;AAErG,sBAAgB,WAAW,cAAc,cAAc,UAAU,CAAC;AAAA,IACtE;AACA,YAAO;AAEP,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AACrB,KAAC,GAAG,KAAK,QAAQ,EAAE,QAAQ,CAAC,YAAY,SAAS,QAAQ,OAAO,CAAC;AACjE,WAAO,MAAM,SAAS,WAAU;AAAA,EACpC,GAAG,CAAC,MAAM,SAAS,WAAW,CAAC;AAE/B,SAAO,KAAK,IAAI,cAAc,WAAW;AAC7C;"}

package/dist/appShell/usePinnedMobileTabs.js

@@ -0,0 +1,32 @@
+"use client";
+import { useState, useCallback, useEffect, useLayoutEffect } from "react";
+const STORAGE_KEY = "calcita:mobileTabs";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function usePinnedMobileTabs() {
+  const [pinnedKeys, setStoredKeys] = useState(null);
+  useBrowserLayoutEffect(() => {
+    try {
+      const stored = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? "null");
+      if (Array.isArray(stored) && stored.every((key) => typeof key === "string")) {
+        setStoredKeys(stored);
+      }
+    } catch {
+    }
+  }, []);
+  const setPinnedKeys = useCallback((keys) => {
+    setStoredKeys(keys);
+    try {
+      if (keys) {
+        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(keys));
+      } else {
+        window.localStorage.removeItem(STORAGE_KEY);
+      }
+    } catch {
+    }
+  }, []);
+  return { pinnedKeys, setPinnedKeys };
+}
+export {
+  usePinnedMobileTabs
+};
+//# sourceMappingURL=usePinnedMobileTabs.js.map

package/dist/appShell/usePinnedMobileTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedMobileTabs.js","sources":["../../src/appShell/usePinnedMobileTabs.js"],"sourcesContent":["// Las pestañas que la persona fijó en la barra del teléfono (desde «Más» → «Editar la barra»), recordadas en este\n// navegador. La guía de Apple para las barras de pestañas pide dejar que cada quien la acomode a su gusto.\n//\n//   - Se lee ANTES del primer pintado (useLayoutEffect): sin eso, la barra brinca de las del proyecto a las suyas.\n//   - null = no ha elegido: van las que marca el proyecto (mobileTab en menu.js).\n//   - Sin almacenamiento (ventana privada estricta) cambia igual, solo no se recuerda.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useCallback, useEffect, useLayoutEffect, useState} from 'react';\n\nconst STORAGE_KEY = 'calcita:mobileTabs';\n// en el servidor useLayoutEffect avisa en consola; ahí no hay nada que leer\nconst useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n/**\n * @returns {{pinnedKeys: string[]|null, setPinnedKeys: (keys: string[]|null) => void}} las llaves son menuItemKeyOf\n */\nexport function usePinnedMobileTabs() {\n    const [pinnedKeys, setStoredKeys] = useState(null);\n\n    useBrowserLayoutEffect(() => {\n        try {\n            const stored = JSON.parse(window.localStorage.getItem(STORAGE_KEY) ?? 'null');\n            // algo editado a mano o de otra versión: se ignora\n            if (Array.isArray(stored) && stored.every((key) => typeof key === 'string')) {\n                setStoredKeys(stored);\n            }\n        } catch {\n            // almacenamiento bloqueado o texto que no es JSON: van las del proyecto\n        }\n    }, []);\n\n    const setPinnedKeys = useCallback((keys) => {\n        setStoredKeys(keys);\n        try {\n            if (keys) {\n                window.localStorage.setItem(STORAGE_KEY, JSON.stringify(keys));\n            } else {\n                window.localStorage.removeItem(STORAGE_KEY);\n            }\n        } catch {\n            // almacenamiento bloqueado: cambia igual, solo no se recuerda\n        }\n    }, []);\n\n    return {pinnedKeys, setPinnedKeys};\n}\n"],"names":[],"mappings":";;AAUA,MAAM,cAAc;AAEpB,MAAM,yBAAyB,OAAO,WAAW,cAAc,YAAY;AAKpE,SAAS,sBAAsB;AAClC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AAEjD,yBAAuB,MAAM;AACzB,QAAI;AACA,YAAM,SAAS,KAAK,MAAM,OAAO,aAAa,QAAQ,WAAW,KAAK,MAAM;AAE5E,UAAI,MAAM,QAAQ,MAAM,KAAK,OAAO,MAAM,CAAC,QAAQ,OAAO,QAAQ,QAAQ,GAAG;AACzE,sBAAc,MAAM;AAAA,MACxB;AAAA,IACJ,QAAQ;AAAA,IAER;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,QAAM,gBAAgB,YAAY,CAAC,SAAS;AACxC,kBAAc,IAAI;AAClB,QAAI;AACA,UAAI,MAAM;AACN,eAAO,aAAa,QAAQ,aAAa,KAAK,UAAU,IAAI,CAAC;AAAA,MACjE,OAAO;AACH,eAAO,aAAa,WAAW,WAAW;AAAA,MAC9C;AAAA,IACJ,QAAQ;AAAA,IAER;AAAA,EACJ,GAAG,CAAA,CAAE;AAEL,SAAO,EAAC,YAAY,cAAa;AACrC;"}

package/dist/appShell/useTabBarMinimized.js

@@ -0,0 +1,33 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { TAB_BAR_SCROLL_START, tabBarStateAfterScroll } from "./tabBarScroll.js";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function useTabBarMinimized(isEnabled) {
+  const [isMinimized, setIsMinimized] = useState(false);
+  const scrollState = useRef(TAB_BAR_SCROLL_START);
+  useEffect(() => {
+    if (!isEnabled || typeof window === "undefined") {
+      return void 0;
+    }
+    const reducedMotion = window.matchMedia?.(REDUCED_MOTION_QUERY);
+    scrollState.current = { ...TAB_BAR_SCROLL_START, lastY: window.scrollY };
+    const onScroll = () => {
+      if (reducedMotion?.matches) {
+        return;
+      }
+      scrollState.current = tabBarStateAfterScroll(scrollState.current, window.scrollY);
+      setIsMinimized(scrollState.current.isMinimized);
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [isEnabled]);
+  const expand = useCallback(() => {
+    scrollState.current = { ...scrollState.current, isMinimized: false, travel: 0 };
+    setIsMinimized(false);
+  }, []);
+  return { isMinimized: isEnabled && isMinimized, expand };
+}
+export {
+  useTabBarMinimized
+};
+//# sourceMappingURL=useTabBarMinimized.js.map

package/dist/appShell/useTabBarMinimized.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabBarMinimized.js","sources":["../../src/appShell/useTabBarMinimized.js"],"sourcesContent":["// Si la barra de pestañas del teléfono va encogida, según cómo se desliza la página (la regla está en tabBarScroll.js).\n//\n//   - Con «reducir movimiento» encendido en el equipo no se encoge: la guía de Apple pide que el movimiento sea opcional.\n//   - Solo cambia el estado cuando cambia la decisión (encogida o completa), no en cada evento de deslizar.\n//   - expand() la regresa completa: es lo que hace tocar la cápsula chica.\n//\n// Hook genérico del paquete: function (regla de la casa).\nimport {useCallback, useEffect, useRef, useState} from 'react';\n\nimport {TAB_BAR_SCROLL_START, tabBarStateAfterScroll} from '@/appShell/tabBarScroll.js';\n\nconst REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';\n\n/**\n * @param {boolean} isEnabled false: siempre completa\n * @returns {{isMinimized: boolean, expand: () => void}}\n */\nexport function useTabBarMinimized(isEnabled) {\n    const [isMinimized, setIsMinimized] = useState(false);\n    const scrollState = useRef(TAB_BAR_SCROLL_START);\n\n    useEffect(() => {\n        // pintando en el servidor no hay ventana que deslizar\n        if (!isEnabled || typeof window === 'undefined') {\n            return undefined;\n        }\n        const reducedMotion = window.matchMedia?.(REDUCED_MOTION_QUERY);\n        scrollState.current = {...TAB_BAR_SCROLL_START, lastY: window.scrollY};\n        const onScroll = () => {\n            if (reducedMotion?.matches) {\n                return;\n            }\n            scrollState.current = tabBarStateAfterScroll(scrollState.current, window.scrollY);\n            setIsMinimized(scrollState.current.isMinimized);\n        };\n        window.addEventListener('scroll', onScroll, {passive: true});\n        return () => window.removeEventListener('scroll', onScroll);\n    }, [isEnabled]);\n\n    const expand = useCallback(() => {\n        scrollState.current = {...scrollState.current, isMinimized: false, travel: 0};\n        setIsMinimized(false);\n    }, []);\n\n    return {isMinimized: isEnabled && isMinimized, expand};\n}\n"],"names":[],"mappings":";;;AAWA,MAAM,uBAAuB;AAMtB,SAAS,mBAAmB,WAAW;AAC1C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,cAAc,OAAO,oBAAoB;AAE/C,YAAU,MAAM;AAEZ,QAAI,CAAC,aAAa,OAAO,WAAW,aAAa;AAC7C,aAAO;AAAA,IACX;AACA,UAAM,gBAAgB,OAAO,aAAa,oBAAoB;AAC9D,gBAAY,UAAU,EAAC,GAAG,sBAAsB,OAAO,OAAO,QAAO;AACrE,UAAM,WAAW,MAAM;AACnB,UAAI,eAAe,SAAS;AACxB;AAAA,MACJ;AACA,kBAAY,UAAU,uBAAuB,YAAY,SAAS,OAAO,OAAO;AAChF,qBAAe,YAAY,QAAQ,WAAW;AAAA,IAClD;AACA,WAAO,iBAAiB,UAAU,UAAU,EAAC,SAAS,KAAI,CAAC;AAC3D,WAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,EAC9D,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,SAAS,YAAY,MAAM;AAC7B,gBAAY,UAAU,EAAC,GAAG,YAAY,SAAS,aAAa,OAAO,QAAQ,EAAC;AAC5E,mBAAe,KAAK;AAAA,EACxB,GAAG,CAAA,CAAE;AAEL,SAAO,EAAC,aAAa,aAAa,aAAa,OAAM;AACzD;"}