@stackcraftmx/calcita 0.32.1 → 0.47.0

package/dist/upload/ImageInput.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import ButtonBase from "@mui/material/ButtonBase";
+import FormHelperText from "@mui/material/FormHelperText";
+import Stack from "@mui/material/Stack";
+import AddPhotoAlternateOutlinedIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
+import { translateValidationMessage } from "../forms/validationMessages.js";
+import FieldFrame from "../inputs/FieldFrame.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { useFilePicker } from "./useFilePicker.js";
+const IMAGE_SHAPE = Object.freeze({ circle: "circle", rounded: "rounded" });
+const THEME_NAME = "CalcitaImageInput";
+const ImageRoot = piecePart(THEME_NAME, "Root", Stack);
+const ImagePreview = piecePart(THEME_NAME, "Preview", ButtonBase);
+const ImagePicture = piecePart(THEME_NAME, "Image", "img");
+const ImagePlaceholder = piecePart(THEME_NAME, "Placeholder", Box);
+const ImageActions = piecePart(THEME_NAME, "Actions", Stack);
+const DEFAULT_PREVIEW_SIZE = 96;
+function usePreviewUrl(value) {
+  const [fileUrl, setFileUrl] = useState(null);
+  const isFile = typeof File !== "undefined" && value instanceof File;
+  useEffect(() => {
+    if (!isFile) {
+      setFileUrl(null);
+      return void 0;
+    }
+    const url = URL.createObjectURL(value);
+    setFileUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [isFile, value]);
+  if (isFile) {
+    return fileUrl;
+  }
+  return typeof value === "string" && value ? value : null;
+}
+function ImageInput(props) {
+  const {
+    name,
+    label,
+    value = null,
+    onChange,
+    onBlur,
+    shape = IMAGE_SHAPE.circle,
+    size = DEFAULT_PREVIEW_SIZE,
+    alt,
+    placeholder,
+    accept = "image",
+    maxSize,
+    error,
+    helperText = " ",
+    chooseLabel,
+    removeLabel,
+    disabled = false,
+    busy = false,
+    onReject,
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const generatedId = useId();
+  const previewId = `${name ?? "image"}-${generatedId}`;
+  const errorText = translateValidationMessage(t, error);
+  const isLocked = disabled || busy;
+  const previewUrl = usePreviewUrl(value);
+  const change = (file) => {
+    onChange(file);
+    onBlur?.();
+  };
+  const picker = useFilePicker({ accept, maxSize, disabled: isLocked, onAccept: change, onReject, texts });
+  const pickText = chooseLabel ?? t(value ? "upload.changeImage" : "upload.chooseImage");
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId: previewId, label, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(ImageRoot, { direction: "row", "aria-busy": busy, ownSx: { alignItems: "center", gap: 2, ...sx }, children: [
+      /* @__PURE__ */ jsx("input", { ...picker.inputProps, name, "aria-hidden": "true", tabIndex: -1 }),
+      /* @__PURE__ */ jsx(
+        ImagePreview,
+        {
+          id: previewId,
+          onClick: picker.open,
+          disabled: isLocked,
+          "aria-label": pickText,
+          ...picker.dropHandlers,
+          ownSx: {
+            width: size,
+            height: size,
+            flexShrink: 0,
+            overflow: "hidden",
+            borderRadius: shape === IMAGE_SHAPE.circle ? "50%" : 2,
+            bgcolor: "action.hover",
+            color: "text.secondary",
+            outline: picker.isDragging ? 2 : 0,
+            outlineStyle: "dashed",
+            outlineColor: "primary.main",
+            outlineOffset: 2,
+            "&.Mui-focusVisible": { outline: 2, outlineStyle: "solid", outlineColor: "primary.main", outlineOffset: 2 }
+          },
+          children: previewUrl ? /* @__PURE__ */ jsx(
+            ImagePicture,
+            {
+              src: previewUrl,
+              alt: alt ?? (typeof label === "string" ? label : ""),
+              ownSx: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+            }
+          ) : /* @__PURE__ */ jsx(ImagePlaceholder, { ownSx: { display: "grid", placeItems: "center", width: "100%", height: "100%" }, children: placeholder ?? /* @__PURE__ */ jsx(AddPhotoAlternateOutlinedIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsxs(ImageActions, { ownSx: { alignItems: "flex-start", gap: 0.5 }, children: [
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "outlined", onClick: picker.open, disabled: isLocked, children: pickText }),
+        value && /* @__PURE__ */ jsx(Button, { size: "small", color: "error", onClick: () => change(null), disabled: isLocked, children: removeLabel ?? t("upload.removeImage") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperText, { error: Boolean(errorText), children: errorText ?? helperText })
+  ] }) });
+}
+export {
+  IMAGE_SHAPE,
+  ImageInput as default
+};
+//# sourceMappingURL=ImageInput.js.map

package/dist/upload/ImageInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageInput.js","sources":["../../src/upload/ImageInput.jsx"],"sourcesContent":["// Una imagen con su vista previa: la foto de un perfil (círculo) o la de un producto o una sucursal (recuadro). Se pica la\n// vista previa o «Elegir imagen» para abrir la ventana de archivos, o se suelta la imagen encima; «Quitar la imagen» la\n// borra. Dentro de una FormSection se vuelve renglón, como los demás campos.\n//\n// Solo ELIGE (controlado), con las reglas de los demás cargadores (accept, por omisión imágenes; maxSize; useFilePicker).\n// value es la imagen nueva (File), la que ya está guardada (su dirección, en texto) o null; onChange recibe File o null.\n// Enviarla es de la pantalla.\n//\n// La vista previa de un archivo nuevo se pinta en el navegador, sin subirlo (URL.createObjectURL); se libera al cambiarla.\n//\n// Huecos: shape (IMAGE_SHAPE), size, placeholder (lo que se ve sin imagen: las iniciales de la persona, por ejemplo), alt,\n// los textos de los botones y texts. Con formik: FormImageField; con react-hook-form, el del mismo nombre.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaImageInput con defaultProps y\n// styleOverrides de sus partes: root, preview, image, placeholder, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useId, useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Stack from '@mui/material/Stack';\nimport AddPhotoAlternateOutlinedIcon from '@mui/icons-material/AddPhotoAlternateOutlined';\n\nimport {translateValidationMessage} from '@/forms/validationMessages.js';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {useFilePicker} from '@/upload/useFilePicker.js';\n\n/** La forma de la vista previa: círculo para una persona, recuadro para lo demás. */\nexport const IMAGE_SHAPE = Object.freeze({circle: 'circle', rounded: 'rounded'});\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaImageInput)\nconst THEME_NAME = 'CalcitaImageInput';\nconst ImageRoot = piecePart(THEME_NAME, 'Root', Stack);\nconst ImagePreview = piecePart(THEME_NAME, 'Preview', ButtonBase);\nconst ImagePicture = piecePart(THEME_NAME, 'Image', 'img');\nconst ImagePlaceholder = piecePart(THEME_NAME, 'Placeholder', Box);\nconst ImageActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n// el tamaño de la vista previa si la pantalla no dice otro (como un avatar grande de perfil)\nconst DEFAULT_PREVIEW_SIZE = 96;\n\n/**\n * La dirección de la vista previa: la de un archivo nuevo se crea en el navegador y se libera al cambiar; la guardada se\n * usa tal cual.\n *\n * @param {File|string|null} value\n * @returns {string|null}\n */\nfunction usePreviewUrl(value) {\n    const [fileUrl, setFileUrl] = useState(null);\n    const isFile = typeof File !== 'undefined' && value instanceof File;\n\n    useEffect(() => {\n        if (!isFile) {\n            setFileUrl(null);\n            return undefined;\n        }\n        const url = URL.createObjectURL(value);\n        setFileUrl(url);\n        return () => URL.revokeObjectURL(url);\n    }, [isFile, value]);\n\n    if (isFile) {\n        return fileUrl;\n    }\n    return typeof value === 'string' && value ? value : null;\n}\n\n/**\n * @param {object} props\n * @param {string} [props.name]\n * @param {import('react').ReactNode} [props.label] ya traducida\n * @param {File|string|null} [props.value] la imagen nueva, la dirección de la que ya está guardada o null\n * @param {(file: File|null) => void} props.onChange null al quitarla\n * @param {() => void} [props.onBlur] se llama al elegir o quitar (para que el formulario lo marque como tocado)\n * @param {'circle'|'rounded'} [props.shape] IMAGE_SHAPE; por omisión, círculo\n * @param {number} [props.size] el lado de la vista previa en px; por omisión 96\n * @param {string} [props.alt] ya traducido: qué se ve en la imagen (por omisión, la etiqueta)\n * @param {import('react').ReactNode} [props.placeholder] lo que se ve sin imagen; por omisión, un ícono\n * @param {string|string[]} [props.accept] por omisión, cualquier imagen\n * @param {number|string} [props.maxSize] bytes o '2 MB'\n * @param {string|{key: string, values?: object}} [props.error]\n * @param {string} [props.helperText] ya traducida (p. ej. «JPG o PNG, cuadrada, hasta 2 MB»)\n * @param {string} [props.chooseLabel] ya traducido; por omisión «Elegir imagen» (o «Cambiar la imagen» si ya hay una)\n * @param {string} [props.removeLabel] ya traducido; por omisión «Quitar la imagen»\n * @param {boolean} [props.disabled]\n * @param {boolean} [props.busy] candado mientras se sube\n * @param {(file: File, reason: string) => void} [props.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {object} [props.sx]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function ImageInput(props) {\n    const {\n        name, label, value = null, onChange, onBlur, shape = IMAGE_SHAPE.circle, size = DEFAULT_PREVIEW_SIZE, alt, placeholder,\n        accept = 'image', maxSize, error, helperText = ' ', chooseLabel, removeLabel, disabled = false, busy = false, onReject, sx, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const previewId = `${name ?? 'image'}-${generatedId}`;\n    const errorText = translateValidationMessage(t, error);\n    const isLocked = disabled || busy;\n    const previewUrl = usePreviewUrl(value);\n    const change = (file) => {\n        onChange(file);\n        onBlur?.();\n    };\n    const picker = useFilePicker({accept, maxSize, disabled: isLocked, onAccept: change, onReject, texts});\n    const pickText = chooseLabel ?? t(value ? 'upload.changeImage' : 'upload.chooseImage');\n\n    return (\n        <FieldFrame inputId={previewId} label={label}>\n            <div>\n                <ImageRoot direction=\"row\" aria-busy={busy} ownSx={{alignItems: 'center', gap: 2, ...sx}}>\n                    <input {...picker.inputProps} name={name} aria-hidden=\"true\" tabIndex={-1} />\n                    <ImagePreview\n                        id={previewId}\n                        onClick={picker.open}\n                        disabled={isLocked}\n                        aria-label={pickText}\n                        {...picker.dropHandlers}\n                        ownSx={{\n                            width: size, height: size, flexShrink: 0, overflow: 'hidden',\n                            borderRadius: shape === IMAGE_SHAPE.circle ? '50%' : 2,\n                            bgcolor: 'action.hover', color: 'text.secondary',\n                            outline: picker.isDragging ? 2 : 0, outlineStyle: 'dashed', outlineColor: 'primary.main', outlineOffset: 2,\n                            '&.Mui-focusVisible': {outline: 2, outlineStyle: 'solid', outlineColor: 'primary.main', outlineOffset: 2},\n                        }}\n                    >\n                        {previewUrl ? (\n                            <ImagePicture src={previewUrl} alt={alt ?? (typeof label === 'string' ? label : '')}\n                                          ownSx={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}} />\n                        ) : (\n                            <ImagePlaceholder ownSx={{display: 'grid', placeItems: 'center', width: '100%', height: '100%'}}>\n                                {placeholder ?? <AddPhotoAlternateOutlinedIcon />}\n                            </ImagePlaceholder>\n                        )}\n                    </ImagePreview>\n                    <ImageActions ownSx={{alignItems: 'flex-start', gap: 0.5}}>\n                        <Button size=\"small\" variant=\"outlined\" onClick={picker.open} disabled={isLocked}>{pickText}</Button>\n                        {value && (\n                            <Button size=\"small\" color=\"error\" onClick={() => change(null)} disabled={isLocked}>\n                                {removeLabel ?? t('upload.removeImage')}\n                            </Button>\n                        )}\n                    </ImageActions>\n                </ImageRoot>\n                <FormHelperText error={Boolean(errorText)}>{errorText ?? helperText}</FormHelperText>\n            </div>\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiCO,MAAM,cAAc,OAAO,OAAO,EAAC,QAAQ,UAAU,SAAS,WAAU;AAG/E,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,KAAK;AACrD,MAAM,eAAe,UAAU,YAAY,WAAW,UAAU;AAChE,MAAM,eAAe,UAAU,YAAY,SAAS,KAAK;AACzD,MAAM,mBAAmB,UAAU,YAAY,eAAe,GAAG;AACjE,MAAM,eAAe,UAAU,YAAY,WAAW,KAAK;AAG3D,MAAM,uBAAuB;AAS7B,SAAS,cAAc,OAAO;AAC1B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,SAAS,OAAO,SAAS,eAAe,iBAAiB;AAE/D,YAAU,MAAM;AACZ,QAAI,CAAC,QAAQ;AACT,iBAAW,IAAI;AACf,aAAO;AAAA,IACX;AACA,UAAM,MAAM,IAAI,gBAAgB,KAAK;AACrC,eAAW,GAAG;AACd,WAAO,MAAM,IAAI,gBAAgB,GAAG;AAAA,EACxC,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,MAAI,QAAQ;AACR,WAAO;AAAA,EACX;AACA,SAAO,OAAO,UAAU,YAAY,QAAQ,QAAQ;AACxD;AAyBA,SAAwB,WAAW,OAAO;AACtC,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAO,QAAQ;AAAA,IAAM;AAAA,IAAU;AAAA,IAAQ,QAAQ,YAAY;AAAA,IAAQ,OAAO;AAAA,IAAsB;AAAA,IAAK;AAAA,IAC3G,SAAS;AAAA,IAAS;AAAA,IAAS;AAAA,IAAO,aAAa;AAAA,IAAK;AAAA,IAAa;AAAA,IAAa,WAAW;AAAA,IAAO,OAAO;AAAA,IAAO;AAAA,IAAU;AAAA,IAAI;AAAA,IAC5H,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,cAAc,MAAA;AACpB,QAAM,YAAY,GAAG,QAAQ,OAAO,IAAI,WAAW;AACnD,QAAM,YAAY,2BAA2B,GAAG,KAAK;AACrD,QAAM,WAAW,YAAY;AAC7B,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,SAAS,CAAC,SAAS;AACrB,aAAS,IAAI;AACb,aAAA;AAAA,EACJ;AACA,QAAM,SAAS,cAAc,EAAC,QAAQ,SAAS,UAAU,UAAU,UAAU,QAAQ,UAAU,MAAA,CAAM;AACrG,QAAM,WAAW,eAAe,EAAE,QAAQ,uBAAuB,oBAAoB;AAErF,6BACK,YAAA,EAAW,SAAS,WAAW,OAC5B,+BAAC,OAAA,EACG,UAAA;AAAA,IAAA,qBAAC,WAAA,EAAU,WAAU,OAAM,aAAW,MAAM,OAAO,EAAC,YAAY,UAAU,KAAK,GAAG,GAAG,MACjF,UAAA;AAAA,MAAA,oBAAC,SAAA,EAAO,GAAG,OAAO,YAAY,MAAY,eAAY,QAAO,UAAU,IAAI;AAAA,MAC3E;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAI;AAAA,UACJ,SAAS,OAAO;AAAA,UAChB,UAAU;AAAA,UACV,cAAY;AAAA,UACX,GAAG,OAAO;AAAA,UACX,OAAO;AAAA,YACH,OAAO;AAAA,YAAM,QAAQ;AAAA,YAAM,YAAY;AAAA,YAAG,UAAU;AAAA,YACpD,cAAc,UAAU,YAAY,SAAS,QAAQ;AAAA,YACrD,SAAS;AAAA,YAAgB,OAAO;AAAA,YAChC,SAAS,OAAO,aAAa,IAAI;AAAA,YAAG,cAAc;AAAA,YAAU,cAAc;AAAA,YAAgB,eAAe;AAAA,YACzG,sBAAsB,EAAC,SAAS,GAAG,cAAc,SAAS,cAAc,gBAAgB,eAAe,EAAA;AAAA,UAAC;AAAA,UAG3G,UAAA,aACG;AAAA,YAAC;AAAA,YAAA;AAAA,cAAa,KAAK;AAAA,cAAY,KAAK,QAAQ,OAAO,UAAU,WAAW,QAAQ;AAAA,cAClE,OAAO,EAAC,OAAO,QAAQ,QAAQ,QAAQ,WAAW,SAAS,SAAS,QAAA;AAAA,YAAO;AAAA,UAAA,IAEzF,oBAAC,kBAAA,EAAiB,OAAO,EAAC,SAAS,QAAQ,YAAY,UAAU,OAAO,QAAQ,QAAQ,OAAA,GACnF,UAAA,eAAe,oBAAC,iCAA8B,EAAA,CACnD;AAAA,QAAA;AAAA,MAAA;AAAA,MAGR,qBAAC,gBAAa,OAAO,EAAC,YAAY,cAAc,KAAK,OACjD,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAO,MAAK,SAAQ,SAAQ,YAAW,SAAS,OAAO,MAAM,UAAU,UAAW,UAAA,SAAA,CAAS;AAAA,QAC3F,SACG,oBAAC,QAAA,EAAO,MAAK,SAAQ,OAAM,SAAQ,SAAS,MAAM,OAAO,IAAI,GAAG,UAAU,UACrE,UAAA,eAAe,EAAE,oBAAoB,EAAA,CAC1C;AAAA,MAAA,EAAA,CAER;AAAA,IAAA,GACJ;AAAA,wBACC,gBAAA,EAAe,OAAO,QAAQ,SAAS,GAAI,uBAAa,WAAA,CAAW;AAAA,EAAA,EAAA,CACxE,EAAA,CACJ;AAER;"}

package/dist/upload/TemplateDownloadButton.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
+import { startDownload } from "../downloads/downloadQueue.js";
+import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const THEME_NAME = "CalcitaTemplateDownloadButton";
+const TemplateButtonRoot = piecePart(THEME_NAME, "Root", Button);
+function TemplateDownloadButton(props) {
+  const {
+    href,
+    fileName,
+    request,
+    format,
+    label,
+    onDownload,
+    variant = "text",
+    size,
+    disabled = false,
+    startIcon,
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const text = label ?? t("upload.template");
+  const icon = startIcon ?? /* @__PURE__ */ jsx(FileDownloadOutlinedIcon, {});
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      TemplateButtonRoot,
+      {
+        component: "a",
+        href,
+        download: fileName ?? true,
+        variant,
+        size,
+        disabled,
+        startIcon: icon,
+        onClick: onDownload,
+        sx,
+        children: text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TemplateButtonRoot,
+    {
+      variant,
+      size,
+      disabled: disabled || !request,
+      startIcon: icon,
+      sx,
+      onClick: () => {
+        onDownload?.();
+        startDownload({ label: text, format, request });
+      },
+      children: text
+    }
+  );
+}
+export {
+  TemplateDownloadButton as default
+};
+//# sourceMappingURL=TemplateDownloadButton.js.map

package/dist/upload/TemplateDownloadButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateDownloadButton.js","sources":["../../src/upload/TemplateDownloadButton.jsx"],"sourcesContent":["// «Descargar la plantilla»: el botón que va junto a un cargador para bajar el formato que el archivo debe seguir (el Excel\n// con sus columnas, el CSV de ejemplo). Los cargadores del paquete lo ponen en su lugar con su prop `template`; también se\n// usa suelto.\n//\n// Dos formas de bajarlo:\n//   href      un archivo fijo (public/plantillas/inventario.xlsx): un enlace de descarga, sin pasar por el panel.\n//   request   lo arma o lo da el API: va por startDownload, así sale en el panel de descargas con su avance y, si el\n//             servidor dice que no, su motivo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaTemplateDownloadButton con defaultProps y\n// styleOverrides de su parte root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Button from '@mui/material/Button';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\n\nimport {startDownload} from '@/downloads/downloadQueue.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaTemplateDownloadButton)\nconst THEME_NAME = 'CalcitaTemplateDownloadButton';\nconst TemplateButtonRoot = piecePart(THEME_NAME, 'Root', Button);\n\n/**\n * @param {object} props\n * @param {string} [props.href] un archivo fijo; se baja con un enlace\n * @param {string} [props.fileName] con href: con qué nombre se guarda (por omisión, el del archivo)\n * @param {(transferOptions: {signal: AbortSignal, onDownloadProgress: (progress: {loaded: number, total?: number|null}) => void}) => Promise<{blob: Blob, fileName: string}>} [props.request]\n *     lo pide al API y va al panel de descargas (startDownload)\n * @param {string} [props.format] con request: el tipo de archivo, para su ícono en el panel (xlsx, csv…)\n * @param {string} [props.label] ya traducido; por omisión «Descargar la plantilla»\n * @param {() => void} [props.onDownload] al empezar la descarga (para medir cuántos la bajan, por ejemplo)\n * @param {'text'|'outlined'|'contained'} [props.variant]\n * @param {'small'|'medium'|'large'} [props.size]\n * @param {boolean} [props.disabled]\n * @param {import('react').ReactNode} [props.startIcon] por omisión, la flecha de descarga\n * @param {object} [props.sx]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`\n */\nexport default function TemplateDownloadButton(props) {\n    const {\n        href, fileName, request, format, label, onDownload, variant = 'text', size, disabled = false, startIcon, sx, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const text = label ?? t('upload.template');\n    const icon = startIcon ?? <FileDownloadOutlinedIcon />;\n\n    // un archivo fijo: el enlace del navegador (download con su nombre)\n    if (href) {\n        return (\n            <TemplateButtonRoot component=\"a\" href={href} download={fileName ?? true} variant={variant} size={size} disabled={disabled} startIcon={icon}\n                                onClick={onDownload} sx={sx}>\n                {text}\n            </TemplateButtonRoot>\n        );\n    }\n\n    return (\n        <TemplateButtonRoot\n            variant={variant}\n            size={size}\n            disabled={disabled || !request}\n            startIcon={icon}\n            sx={sx}\n            onClick={() => {\n                onDownload?.();\n                startDownload({label: text, format, request});\n            }}\n        >\n            {text}\n        </TemplateButtonRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAsBA,MAAM,aAAa;AACnB,MAAM,qBAAqB,UAAU,YAAY,QAAQ,MAAM;AAkB/D,SAAwB,uBAAuB,OAAO;AAClD,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAU;AAAA,IAAS;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAY,UAAU;AAAA,IAAQ;AAAA,IAAM,WAAW;AAAA,IAAO;AAAA,IAAW;AAAA,IAAI;AAAA,IAC7G,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,OAAO,SAAS,EAAE,iBAAiB;AACzC,QAAM,OAAO,aAAa,oBAAC,0BAAA,CAAA,CAAyB;AAGpD,MAAI,MAAM;AACN,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QAAmB,WAAU;AAAA,QAAI;AAAA,QAAY,UAAU,YAAY;AAAA,QAAM;AAAA,QAAkB;AAAA,QAAY;AAAA,QAAoB,WAAW;AAAA,QACnH,SAAS;AAAA,QAAY;AAAA,QACpC,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY,CAAC;AAAA,MACvB,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM;AACX,qBAAA;AACA,sBAAc,EAAC,OAAO,MAAM,QAAQ,SAAQ;AAAA,MAChD;AAAA,MAEC,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/upload/fileAppearance.js

@@ -0,0 +1,21 @@
+"use client";
+import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
+import ImageOutlinedIcon from "@mui/icons-material/ImageOutlined";
+import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
+import PictureAsPdfOutlinedIcon from "@mui/icons-material/PictureAsPdfOutlined";
+import TableViewOutlinedIcon from "@mui/icons-material/TableViewOutlined";
+const FILE_APPEARANCES = [
+  { pattern: /\.(xlsx?|csv)$/, Icon: TableViewOutlinedIcon, color: "success" },
+  { pattern: /\.pdf$/, Icon: PictureAsPdfOutlinedIcon, color: "error" },
+  { pattern: /\.(png|jpe?g|gif|webp|svg|avif)$/, Icon: ImageOutlinedIcon, color: "info" },
+  { pattern: /\.(docx?|txt|md)$/, Icon: DescriptionOutlinedIcon, color: "primary" }
+];
+const DEFAULT_FILE_APPEARANCE = { Icon: InsertDriveFileOutlinedIcon, color: "action" };
+function fileAppearanceOf(fileName) {
+  const lowerCaseName = fileName.toLowerCase();
+  return FILE_APPEARANCES.find(({ pattern }) => pattern.test(lowerCaseName)) ?? DEFAULT_FILE_APPEARANCE;
+}
+export {
+  fileAppearanceOf
+};
+//# sourceMappingURL=fileAppearance.js.map

package/dist/upload/fileAppearance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileAppearance.js","sources":["../../src/upload/fileAppearance.js"],"sourcesContent":["// El ícono y el color de un archivo según su tipo, con los mismos colores que el panel de descargas: Excel y CSV en verde,\n// PDF en rojo, imágenes en azul, documentos en el color del tema. Lo comparten los cargadores del paquete.\n//\n// Genérico del paquete: function (regla de la casa).\nimport DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';\nimport ImageOutlinedIcon from '@mui/icons-material/ImageOutlined';\nimport InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';\nimport PictureAsPdfOutlinedIcon from '@mui/icons-material/PictureAsPdfOutlined';\nimport TableViewOutlinedIcon from '@mui/icons-material/TableViewOutlined';\n\nconst FILE_APPEARANCES = [\n    {pattern: /\\.(xlsx?|csv)$/, Icon: TableViewOutlinedIcon, color: 'success'},\n    {pattern: /\\.pdf$/, Icon: PictureAsPdfOutlinedIcon, color: 'error'},\n    {pattern: /\\.(png|jpe?g|gif|webp|svg|avif)$/, Icon: ImageOutlinedIcon, color: 'info'},\n    {pattern: /\\.(docx?|txt|md)$/, Icon: DescriptionOutlinedIcon, color: 'primary'},\n];\nconst DEFAULT_FILE_APPEARANCE = {Icon: InsertDriveFileOutlinedIcon, color: 'action'};\n\n/**\n * @param {string} fileName\n * @returns {{Icon: import('react').ElementType, color: string}}\n */\nexport function fileAppearanceOf(fileName) {\n    const lowerCaseName = fileName.toLowerCase();\n    return FILE_APPEARANCES.find(({pattern}) => pattern.test(lowerCaseName)) ?? DEFAULT_FILE_APPEARANCE;\n}\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,mBAAmB;AAAA,EACrB,EAAC,SAAS,kBAAkB,MAAM,uBAAuB,OAAO,UAAS;AAAA,EACzE,EAAC,SAAS,UAAU,MAAM,0BAA0B,OAAO,QAAO;AAAA,EAClE,EAAC,SAAS,oCAAoC,MAAM,mBAAmB,OAAO,OAAM;AAAA,EACpF,EAAC,SAAS,qBAAqB,MAAM,yBAAyB,OAAO,UAAS;AAClF;AACA,MAAM,0BAA0B,EAAC,MAAM,6BAA6B,OAAO,SAAQ;AAM5E,SAAS,iBAAiB,UAAU;AACvC,QAAM,gBAAgB,SAAS,YAAW;AAC1C,SAAO,iBAAiB,KAAK,CAAC,EAAC,QAAO,MAAM,QAAQ,KAAK,aAAa,CAAC,KAAK;AAChF;"}

package/dist/upload/fileRules.js

@@ -52,11 +52,37 @@ function parseFileSize(size) {
   }
   return Math.round(Number(match[1]) * BYTES_BY_UNIT[(match[2] ?? "b").toLowerCase()]);
 }
+function screenFiles(pickedFiles, { resolvedAccept, maxBytes = null, maxFiles, maxTotalBytes = null, keptFiles = [] } = {}) {
+  const kept = keptFiles.filter((keptFile) => !pickedFiles.some((picked) => picked.name === keptFile.name));
+  const accepted = [];
+  const rejected = [];
+  let totalBytes = kept.reduce((sum, keptFile) => sum + (keptFile.size ?? 0), 0);
+  for (const file of pickedFiles) {
+    let reason = null;
+    if (!matchesAccept(file, resolvedAccept)) {
+      reason = FILE_REJECTION.type;
+    } else if (maxBytes && file.size > maxBytes) {
+      reason = FILE_REJECTION.size;
+    } else if (maxFiles && kept.length + accepted.length >= maxFiles) {
+      reason = FILE_REJECTION.count;
+    } else if (maxTotalBytes && totalBytes + (file.size ?? 0) > maxTotalBytes) {
+      reason = FILE_REJECTION.total;
+    }
+    if (reason) {
+      rejected.push({ file, reason });
+    } else {
+      accepted.push(file);
+      totalBytes += file.size ?? 0;
+    }
+  }
+  return { files: [...kept, ...accepted], accepted, rejected };
+}
 export {
   FILE_ACCEPT_PRESETS,
   FILE_REJECTION,
   matchesAccept,
   parseFileSize,
-  resolveAccept
+  resolveAccept,
+  screenFiles
 };
 //# sourceMappingURL=fileRules.js.map

package/dist/upload/fileRules.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileRules.js","sources":["../../src/upload/fileRules.js"],"sourcesContent":["// Las reglas de qué archivo se acepta: su tipo (accept) y su peso (maxSize). Las comparten las dos zonas para soltar\n// archivos del paquete, la de MUI (upload/FileDropzone.jsx) y la de FilePond (filepond/FileDropzone.jsx), para que se\n// configuren igual.\n//\n//   accept   un nombre del menú ('excel'), una lista (['excel', 'pdf']) o lo de siempre del input ('.xlsx,.xls',\n//            'image/*'); se pueden mezclar: ['excel', '.dat'].\n//   maxSize  bytes (número) o texto con unidades: '500 KB', '10mb', '1 GB'.\n//\n// OJO: los tamaños van en base 1000 (1 MB = 1,000,000 bytes), igual que formatFileSize y que el navegador en sus\n// descargas. En base 1024 un límite de «10 MB» se pintaría como «10.5 MB».\n//\n// Funciones puras, sin React: function (regla de la casa). Se prueban con node --test (fileRules.test.js).\n\n/**\n * Por qué se rechazó un archivo (lo que recibe onReject de las dos zonas). La de MUI solo rechaza por tipo y por peso;\n * la de FilePond además por el peso de todos juntos, por cantidad y por contenido (validate).\n */\nexport const FILE_REJECTION = Object.freeze({type: 'type', size: 'size', total: 'total', count: 'count', content: 'content'});\n\n/** El menú de tipos comunes, para no memorizar extensiones. */\nexport const FILE_ACCEPT_PRESETS = Object.freeze({\n    excel: '.xlsx,.xls',\n    csv: '.csv',\n    pdf: '.pdf',\n    word: '.doc,.docx',\n    text: '.txt',\n    json: '.json',\n    xml: '.xml',\n    zip: '.zip,.rar,.7z',\n    image: 'image/*',\n    audio: 'audio/*',\n    video: 'video/*',\n});\n\n// bytes de cada unidad que se puede escribir en maxSize\nconst BYTES_BY_UNIT = Object.freeze({b: 1, kb: 1e3, mb: 1e6, gb: 1e9});\nconst SIZE_TEXT = /^\\s*(\\d+(?:\\.\\d+)?)\\s*(b|kb|mb|gb)?\\s*$/i;\nconst ACCEPT_SEPARATOR = ',';\nconst WILDCARD_SUFFIX = '/*';\n\n/**\n * El accept del paquete como lo entiende el input del navegador.\n *\n * @param {string|string[]|undefined} accept 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'\n * @returns {string|undefined} '.xlsx,.xls,.pdf'; undefined si se acepta todo\n */\nexport function resolveAccept(accept) {\n    if (!accept) {\n        return undefined;\n    }\n    const parts = Array.isArray(accept) ? accept : [accept];\n    return parts.map((part) => FILE_ACCEPT_PRESETS[String(part).toLowerCase()] ?? part).join(ACCEPT_SEPARATOR);\n}\n\n/**\n * ¿El archivo es de un tipo permitido? Revisa la extensión (.xlsx), el tipo exacto (application/pdf) o la familia\n * (image/*). El input del navegador ya filtra al elegir, pero al soltar un archivo no filtra nada.\n *\n * @param {{name: string, type?: string}} file\n * @param {string|undefined} resolvedAccept lo que regresa resolveAccept\n * @returns {boolean}\n */\nexport function matchesAccept(file, resolvedAccept) {\n    if (!resolvedAccept) {\n        return true;\n    }\n    const fileName = file.name.toLowerCase();\n    const fileType = (file.type ?? '').toLowerCase();\n    return resolvedAccept\n        .split(ACCEPT_SEPARATOR)\n        .map((rule) => rule.trim().toLowerCase())\n        .filter(Boolean)\n        .some((rule) => {\n            if (rule.startsWith('.')) {\n                return fileName.endsWith(rule);\n            }\n            if (rule.endsWith(WILDCARD_SUFFIX)) {\n                return fileType.startsWith(rule.slice(0, -1));\n            }\n            return fileType === rule;\n        });\n}\n\n/**\n * Un tamaño escrito por una persona en bytes: '10 MB' → 10000000.\n *\n * @param {number|string|undefined|null} size\n * @returns {number|null} null si no hay límite\n */\nexport function parseFileSize(size) {\n    if (size === undefined || size === null || size === '') {\n        return null;\n    }\n    if (typeof size === 'number') {\n        return size;\n    }\n    const match = SIZE_TEXT.exec(size);\n    // guard clause: un límite mal escrito es error de quien configura, no algo que se ignore callado\n    if (!match) {\n        throw new Error(`«${size}» no es un tamaño: se espera un número de bytes o algo como '10 MB'`);\n    }\n    return Math.round(Number(match[1]) * BYTES_BY_UNIT[(match[2] ?? 'b').toLowerCase()]);\n}\n"],"names":[],"mappings":"AAiBY,MAAC,iBAAiB,OAAO,OAAO,EAAC,MAAM,QAAQ,MAAM,QAAQ,OAAO,SAAS,OAAO,SAAS,SAAS,UAAS,CAAC;AAGhH,MAAC,sBAAsB,OAAO,OAAO;AAAA,EAC7C,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACX,CAAC;AAGD,MAAM,gBAAgB,OAAO,OAAO,EAAC,GAAG,GAAG,IAAI,KAAK,IAAI,KAAK,IAAI,IAAG,CAAC;AACrE,MAAM,YAAY;AAClB,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AAQjB,SAAS,cAAc,QAAQ;AAClC,MAAI,CAAC,QAAQ;AACT,WAAO;AAAA,EACX;AACA,QAAM,QAAQ,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AACtD,SAAO,MAAM,IAAI,CAAC,SAAS,oBAAoB,OAAO,IAAI,EAAE,YAAW,CAAE,KAAK,IAAI,EAAE,KAAK,gBAAgB;AAC7G;AAUO,SAAS,cAAc,MAAM,gBAAgB;AAChD,MAAI,CAAC,gBAAgB;AACjB,WAAO;AAAA,EACX;AACA,QAAM,WAAW,KAAK,KAAK,YAAW;AACtC,QAAM,YAAY,KAAK,QAAQ,IAAI,YAAW;AAC9C,SAAO,eACF,MAAM,gBAAgB,EACtB,IAAI,CAAC,SAAS,KAAK,KAAI,EAAG,YAAW,CAAE,EACvC,OAAO,OAAO,EACd,KAAK,CAAC,SAAS;AACZ,QAAI,KAAK,WAAW,GAAG,GAAG;AACtB,aAAO,SAAS,SAAS,IAAI;AAAA,IACjC;AACA,QAAI,KAAK,SAAS,eAAe,GAAG;AAChC,aAAO,SAAS,WAAW,KAAK,MAAM,GAAG,EAAE,CAAC;AAAA,IAChD;AACA,WAAO,aAAa;AAAA,EACxB,CAAC;AACT;AAQO,SAAS,cAAc,MAAM;AAChC,MAAI,SAAS,UAAa,SAAS,QAAQ,SAAS,IAAI;AACpD,WAAO;AAAA,EACX;AACA,MAAI,OAAO,SAAS,UAAU;AAC1B,WAAO;AAAA,EACX;AACA,QAAM,QAAQ,UAAU,KAAK,IAAI;AAEjC,MAAI,CAAC,OAAO;AACR,UAAM,IAAI,MAAM,IAAI,IAAI,qEAAqE;AAAA,EACjG;AACA,SAAO,KAAK,MAAM,OAAO,MAAM,CAAC,CAAC,IAAI,eAAe,MAAM,CAAC,KAAK,KAAK,YAAW,CAAE,CAAC;AACvF;"}
+{"version":3,"file":"fileRules.js","sources":["../../src/upload/fileRules.js"],"sourcesContent":["// Las reglas de qué archivo se acepta: su tipo (accept) y su peso (maxSize). Las comparten las dos zonas para soltar\n// archivos del paquete, la de MUI (upload/FileDropzone.jsx) y la de FilePond (filepond/FileDropzone.jsx), para que se\n// configuren igual.\n//\n//   accept   un nombre del menú ('excel'), una lista (['excel', 'pdf']) o lo de siempre del input ('.xlsx,.xls',\n//            'image/*'); se pueden mezclar: ['excel', '.dat'].\n//   maxSize  bytes (número) o texto con unidades: '500 KB', '10mb', '1 GB'.\n//\n// OJO: los tamaños van en base 1000 (1 MB = 1,000,000 bytes), igual que formatFileSize y que el navegador en sus\n// descargas. En base 1024 un límite de «10 MB» se pintaría como «10.5 MB».\n//\n// Funciones puras, sin React: function (regla de la casa). Se prueban con node --test (fileRules.test.js).\n\n/**\n * Por qué se rechazó un archivo (lo que recibe onReject de las dos zonas). La de MUI solo rechaza por tipo y por peso;\n * la de FilePond además por el peso de todos juntos, por cantidad y por contenido (validate).\n */\nexport const FILE_REJECTION = Object.freeze({type: 'type', size: 'size', total: 'total', count: 'count', content: 'content'});\n\n/** El menú de tipos comunes, para no memorizar extensiones. */\nexport const FILE_ACCEPT_PRESETS = Object.freeze({\n    excel: '.xlsx,.xls',\n    csv: '.csv',\n    pdf: '.pdf',\n    word: '.doc,.docx',\n    text: '.txt',\n    json: '.json',\n    xml: '.xml',\n    zip: '.zip,.rar,.7z',\n    image: 'image/*',\n    audio: 'audio/*',\n    video: 'video/*',\n});\n\n// bytes de cada unidad que se puede escribir en maxSize\nconst BYTES_BY_UNIT = Object.freeze({b: 1, kb: 1e3, mb: 1e6, gb: 1e9});\nconst SIZE_TEXT = /^\\s*(\\d+(?:\\.\\d+)?)\\s*(b|kb|mb|gb)?\\s*$/i;\nconst ACCEPT_SEPARATOR = ',';\nconst WILDCARD_SUFFIX = '/*';\n\n/**\n * El accept del paquete como lo entiende el input del navegador.\n *\n * @param {string|string[]|undefined} accept 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'\n * @returns {string|undefined} '.xlsx,.xls,.pdf'; undefined si se acepta todo\n */\nexport function resolveAccept(accept) {\n    if (!accept) {\n        return undefined;\n    }\n    const parts = Array.isArray(accept) ? accept : [accept];\n    return parts.map((part) => FILE_ACCEPT_PRESETS[String(part).toLowerCase()] ?? part).join(ACCEPT_SEPARATOR);\n}\n\n/**\n * ¿El archivo es de un tipo permitido? Revisa la extensión (.xlsx), el tipo exacto (application/pdf) o la familia\n * (image/*). El input del navegador ya filtra al elegir, pero al soltar un archivo no filtra nada.\n *\n * @param {{name: string, type?: string}} file\n * @param {string|undefined} resolvedAccept lo que regresa resolveAccept\n * @returns {boolean}\n */\nexport function matchesAccept(file, resolvedAccept) {\n    if (!resolvedAccept) {\n        return true;\n    }\n    const fileName = file.name.toLowerCase();\n    const fileType = (file.type ?? '').toLowerCase();\n    return resolvedAccept\n        .split(ACCEPT_SEPARATOR)\n        .map((rule) => rule.trim().toLowerCase())\n        .filter(Boolean)\n        .some((rule) => {\n            if (rule.startsWith('.')) {\n                return fileName.endsWith(rule);\n            }\n            if (rule.endsWith(WILDCARD_SUFFIX)) {\n                return fileType.startsWith(rule.slice(0, -1));\n            }\n            return fileType === rule;\n        });\n}\n\n/**\n * Un tamaño escrito por una persona en bytes: '10 MB' → 10000000.\n *\n * @param {number|string|undefined|null} size\n * @returns {number|null} null si no hay límite\n */\nexport function parseFileSize(size) {\n    if (size === undefined || size === null || size === '') {\n        return null;\n    }\n    if (typeof size === 'number') {\n        return size;\n    }\n    const match = SIZE_TEXT.exec(size);\n    // guard clause: un límite mal escrito es error de quien configura, no algo que se ignore callado\n    if (!match) {\n        throw new Error(`«${size}» no es un tamaño: se espera un número de bytes o algo como '10 MB'`);\n    }\n    return Math.round(Number(match[1]) * BYTES_BY_UNIT[(match[2] ?? 'b').toLowerCase()]);\n}\n\n/**\n * Lo que queda al elegir o soltar archivos: cuáles pasan y cuáles no, con su motivo. La usan los cargadores de MUI del\n * paquete (la zona, el compacto, «Adjuntar» y la imagen), así rechazan igual y con los mismos motivos.\n *\n * Un archivo con el MISMO nombre que uno que ya estaba lo reemplaza (se volvió a elegir corregido) y no cuenta doble ni\n * en la cantidad ni en el peso. Se revisa en este orden: tipo, peso del archivo, cantidad y peso de todos juntos.\n *\n * @param {Array<{name: string, type?: string, size?: number}>} pickedFiles lo que se eligió o se soltó\n * @param {object} rules\n * @param {string} [rules.resolvedAccept] lo que regresa resolveAccept\n * @param {number|null} [rules.maxBytes] el peso máximo de cada archivo\n * @param {number} [rules.maxFiles] cuántos como máximo entre los que ya estaban y los nuevos\n * @param {number|null} [rules.maxTotalBytes] cuánto pueden pesar todos juntos\n * @param {Array<{name: string, size?: number}>} [rules.keptFiles] los que ya estaban (un archivo guardado sin peso cuenta 0)\n * @returns {{files: Array<object>, accepted: Array<object>, rejected: Array<{file: object, reason: string}>}} files: los\n *     que ya estaban (sin los reemplazados) y después los nuevos que pasaron\n */\nexport function screenFiles(pickedFiles, {resolvedAccept, maxBytes = null, maxFiles, maxTotalBytes = null, keptFiles = []} = {}) {\n    const kept = keptFiles.filter((keptFile) => !pickedFiles.some((picked) => picked.name === keptFile.name));\n    const accepted = [];\n    const rejected = [];\n    let totalBytes = kept.reduce((sum, keptFile) => sum + (keptFile.size ?? 0), 0);\n\n    for (const file of pickedFiles) {\n        let reason = null;\n        if (!matchesAccept(file, resolvedAccept)) {\n            reason = FILE_REJECTION.type;\n        } else if (maxBytes && file.size > maxBytes) {\n            reason = FILE_REJECTION.size;\n        } else if (maxFiles && kept.length + accepted.length >= maxFiles) {\n            reason = FILE_REJECTION.count;\n        } else if (maxTotalBytes && totalBytes + (file.size ?? 0) > maxTotalBytes) {\n            reason = FILE_REJECTION.total;\n        }\n\n        if (reason) {\n            rejected.push({file, reason});\n        } else {\n            accepted.push(file);\n            totalBytes += file.size ?? 0;\n        }\n    }\n\n    return {files: [...kept, ...accepted], accepted, rejected};\n}\n"],"names":[],"mappings":"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"}

package/dist/upload/transferProgress.js

@@ -0,0 +1,23 @@
+const PERCENT = 100;
+const MILLISECONDS_PER_SECOND = 1e3;
+const MIN_SECONDS_FOR_SPEED = 0.5;
+function transferProgressOf({ loaded, total, rate, estimated }, startedAt, now = Date.now()) {
+  const elapsedSeconds = (now - startedAt) / MILLISECONDS_PER_SECOND;
+  const measuredSpeed = elapsedSeconds >= MIN_SECONDS_FOR_SPEED && loaded > 0 ? loaded / elapsedSeconds : null;
+  const bytesPerSecond = rate ?? measuredSpeed;
+  let remainingSeconds = estimated ?? null;
+  if (remainingSeconds == null && bytesPerSecond) {
+    remainingSeconds = Math.max(0, Math.ceil((total - loaded) / bytesPerSecond));
+  }
+  return {
+    percent: total > 0 ? Math.min(PERCENT, Math.round(loaded * PERCENT / total)) : 0,
+    loaded,
+    total,
+    bytesPerSecond,
+    remainingSeconds
+  };
+}
+export {
+  transferProgressOf
+};
+//# sourceMappingURL=transferProgress.js.map

package/dist/upload/transferProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transferProgress.js","sources":["../../src/upload/transferProgress.js"],"sourcesContent":["// Cuánto va de una subida, para decirlo en palabras: el porcentaje, lo que va de lo que pesa, la velocidad y cuánto falta.\n// La velocidad y lo que falta salen de lo que ha viajado desde que empezó; si la subida ya los da (axios trae rate y\n// estimated), se usan esos.\n//\n// Puro (sin React): se prueba con node (transferProgress.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\nconst PERCENT = 100;\nconst MILLISECONDS_PER_SECOND = 1000;\n// con menos de medio segundo de subida la velocidad todavía brinca: mejor no decirla\nconst MIN_SECONDS_FOR_SPEED = 0.5;\n\n/**\n * @param {{loaded: number, total: number, rate?: number, estimated?: number}} transfer lo que avisa la subida (bytes)\n * @param {number} startedAt cuándo empezó la subida, en milisegundos\n * @param {number} [now]\n * @returns {{percent: number, loaded: number, total: number, bytesPerSecond: number|null, remainingSeconds: number|null}}\n */\nexport function transferProgressOf({loaded, total, rate, estimated}, startedAt, now = Date.now()) {\n    const elapsedSeconds = (now - startedAt) / MILLISECONDS_PER_SECOND;\n    const measuredSpeed = elapsedSeconds >= MIN_SECONDS_FOR_SPEED && loaded > 0 ? loaded / elapsedSeconds : null;\n    const bytesPerSecond = rate ?? measuredSpeed;\n    let remainingSeconds = estimated ?? null;\n    if (remainingSeconds == null && bytesPerSecond) {\n        remainingSeconds = Math.max(0, Math.ceil((total - loaded) / bytesPerSecond));\n    }\n    return {\n        percent: total > 0 ? Math.min(PERCENT, Math.round((loaded * PERCENT) / total)) : 0,\n        loaded,\n        total,\n        bytesPerSecond,\n        remainingSeconds,\n    };\n}\n"],"names":[],"mappings":"AAQA,MAAM,UAAU;AAChB,MAAM,0BAA0B;AAEhC,MAAM,wBAAwB;AAQvB,SAAS,mBAAmB,EAAC,QAAQ,OAAO,MAAM,UAAS,GAAG,WAAW,MAAM,KAAK,OAAO;AAC9F,QAAM,kBAAkB,MAAM,aAAa;AAC3C,QAAM,gBAAgB,kBAAkB,yBAAyB,SAAS,IAAI,SAAS,iBAAiB;AACxG,QAAM,iBAAiB,QAAQ;AAC/B,MAAI,mBAAmB,aAAa;AACpC,MAAI,oBAAoB,QAAQ,gBAAgB;AAC5C,uBAAmB,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,UAAU,cAAc,CAAC;AAAA,EAC/E;AACA,SAAO;AAAA,IACH,SAAS,QAAQ,IAAI,KAAK,IAAI,SAAS,KAAK,MAAO,SAAS,UAAW,KAAK,CAAC,IAAI;AAAA,IACjF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACR;AACA;"}

package/dist/upload/uploadMachine.js

@@ -1,5 +1,5 @@
 import { assign, setup, fromCallback } from "xstate";
-const resetContext = assign({ progress: null, result: null, problem: null });
+const resetContext = assign({ progress: null, transfer: null, result: null, problem: null });
 const uploadMachine = setup({
   actors: {
     upload: fromCallback(() => {
@@ -13,7 +13,7 @@ const uploadMachine = setup({
 }).createMachine({
   id: "upload",
   initial: "idle",
-  context: { progress: null, result: null, problem: null },
+  context: { progress: null, transfer: null, result: null, problem: null },
   states: {
     idle: {
       on: { UPLOAD: { target: "uploading", actions: resetContext } }
@@ -25,8 +25,8 @@ const uploadMachine = setup({
         sending: {
           on: {
             PROGRESS: [
-              { guard: "isFullySent", target: "processing", actions: assign({ progress: ({ event }) => event.percent }) },
-              { actions: assign({ progress: ({ event }) => event.percent }) }
+              { guard: "isFullySent", target: "processing", actions: assign({ progress: ({ event }) => event.percent, transfer: ({ event }) => event.transfer ?? null }) },
+              { actions: assign({ progress: ({ event }) => event.percent, transfer: ({ event }) => event.transfer ?? null }) }
             ]
           }
         },
@@ -34,10 +34,10 @@ const uploadMachine = setup({
         processing: {}
       },
       on: {
-        DONE: { target: "done", actions: assign({ result: ({ event }) => event.output, progress: null }) },
-        FAIL: { target: "failed", actions: assign({ problem: ({ event }) => event.problem, progress: null }) },
+        DONE: { target: "done", actions: assign({ result: ({ event }) => event.output, progress: null, transfer: null }) },
+        FAIL: { target: "failed", actions: assign({ problem: ({ event }) => event.problem, progress: null, transfer: null }) },
         // salir de uploading DETIENE el actor y su cleanup aborta la petición de verdad (no solo la UI)
-        CANCEL: { target: "cancelled", actions: assign({ progress: null }) }
+        CANCEL: { target: "cancelled", actions: assign({ progress: null, transfer: null }) }
       }
     },
     done: {
@@ -56,7 +56,7 @@ function buildUploadActors(uploadFile) {
   return {
     upload: fromCallback(({ input, sendBack }) => {
       const abortController = new AbortController();
-      uploadFile(input, (percent) => sendBack({ type: "PROGRESS", percent }), abortController.signal).then((output) => sendBack({ type: "DONE", output })).catch((problem) => {
+      uploadFile(input, (percent, transfer) => sendBack({ type: "PROGRESS", percent, transfer }), abortController.signal).then((output) => sendBack({ type: "DONE", output })).catch((problem) => {
         if (problem?.name === "AbortError" || problem?.name === "CanceledError") {
           return;
         }

package/dist/upload/uploadMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"uploadMachine.js","sources":["../../src/upload/uploadMachine.js"],"sourcesContent":["// Máquina del flujo de SUBIDA de un archivo (compañera de una zona para soltar archivos).\n//\n//   idle ──UPLOAD──▶ uploading.sending ──(PROGRESS 100%)──▶ uploading.processing\n//                         │                                        │\n//                         ├────────────── DONE ────────────────────┼──▶ done\n//                         ├────────────── FAIL ────────────────────┴──▶ failed\n//                         └─── CANCEL (el cleanup aborta la petición) ──▶ cancelled\n//\n// Por qué máquina y no cuatro useState: los estados imposibles dejan de existir (no hay \"resultado y error a la vez\"\n// ni \"progreso sin carga\") y el flujo sending → processing → done queda DECLARADO, no regado en callbacks.\n//\n// Contexto: progress (% de bytes enviados; null fuera de sending) · result (lo que resuelva la subida) · problem (el\n// error RFC 9457 del rechazo, normalmente un ApiError).\n//\n// Uso:\n//   const [uploadSnapshot, sendToUpload] = useMachine(uploadMachine.provide({actors: buildUploadActors(uploadFile)}));\n//   sendToUpload({type: 'UPLOAD', input: {file}});\n//\n// Pura: solo importa xstate.\nimport {assign, fromCallback, setup} from 'xstate';\n\nconst resetContext = assign({progress: null, result: null, problem: null});\n\nexport const uploadMachine = setup({\n    actors: {\n        upload: fromCallback(() => {\n            throw new Error('uploadMachine: falta proveer upload con buildUploadActors().');\n        }),\n    },\n    guards: {\n        // 100% enviado no es terminado: el servidor sigue trabajando\n        isFullySent: ({event}) => event.percent >= 100,\n    },\n}).createMachine({\n    id: 'upload',\n    initial: 'idle',\n    context: {progress: null, result: null, problem: null},\n    states: {\n        idle: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}},\n        },\n        uploading: {\n            invoke: {src: 'upload', input: ({event}) => event.input},\n            initial: 'sending',\n            states: {\n                sending: {\n                    on: {\n                        PROGRESS: [\n                            {guard: 'isFullySent', target: 'processing', actions: assign({progress: ({event}) => event.percent})},\n                            {actions: assign({progress: ({event}) => event.percent})},\n                        ],\n                    },\n                },\n                // cuerpo entregado; esperando la respuesta del servidor (progreso indeterminado)\n                processing: {},\n            },\n            on: {\n                DONE: {target: 'done', actions: assign({result: ({event}) => event.output, progress: null})},\n                FAIL: {target: 'failed', actions: assign({problem: ({event}) => event.problem, progress: null})},\n                // salir de uploading DETIENE el actor y su cleanup aborta la petición de verdad (no solo la UI)\n                CANCEL: {target: 'cancelled', actions: assign({progress: null})},\n            },\n        },\n        done: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}, RESET: {target: 'idle', actions: resetContext}},\n        },\n        failed: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}, RESET: {target: 'idle', actions: resetContext}},\n        },\n        // cancelado por la persona: el archivo sigue elegido y se puede reintentar o limpiar\n        cancelled: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}, RESET: {target: 'idle', actions: resetContext}},\n        },\n    },\n});\n\n/**\n * El actor upload a partir de la función de la pantalla.\n *\n * fromCallback y no fromPromise: hacen falta EVENTOS a medio camino (el avance) y un CLEANUP que aborte la petición.\n *\n * @param {(input: object, onProgress: (percent: number) => void, signal: AbortSignal) => Promise<unknown>} uploadFile\n */\nexport function buildUploadActors(uploadFile) {\n    return {\n        upload: fromCallback(({input, sendBack}) => {\n            const abortController = new AbortController();\n            uploadFile(input, (percent) => sendBack({type: 'PROGRESS', percent}), abortController.signal)\n                .then((output) => sendBack({type: 'DONE', output}))\n                .catch((problem) => {\n                    // aborto esperado (CANCEL): la máquina ya cambió de estado sola\n                    if (problem?.name === 'AbortError' || problem?.name === 'CanceledError') {\n                        return;\n                    }\n                    sendBack({type: 'FAIL', problem});\n                });\n            return () => abortController.abort();\n        }),\n    };\n}\n"],"names":[],"mappings":";AAqBA,MAAM,eAAe,OAAO,EAAC,UAAU,MAAM,QAAQ,MAAM,SAAS,KAAI,CAAC;AAE7D,MAAC,gBAAgB,MAAM;AAAA,EAC/B,QAAQ;AAAA,IACJ,QAAQ,aAAa,MAAM;AACvB,YAAM,IAAI,MAAM,8DAA8D;AAAA,IAClF,CAAC;AAAA,EACT;AAAA,EACI,QAAQ;AAAA;AAAA,IAEJ,aAAa,CAAC,EAAC,MAAK,MAAM,MAAM,WAAW;AAAA,EACnD;AACA,CAAC,EAAE,cAAc;AAAA,EACb,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,SAAS,EAAC,UAAU,MAAM,QAAQ,MAAM,SAAS,KAAI;AAAA,EACrD,QAAQ;AAAA,IACJ,MAAM;AAAA,MACF,IAAI,EAAC,QAAQ,EAAC,QAAQ,aAAa,SAAS,aAAY,EAAC;AAAA,IACrE;AAAA,IACQ,WAAW;AAAA,MACP,QAAQ,EAAC,KAAK,UAAU,OAAO,CAAC,EAAC,MAAK,MAAM,MAAM,MAAK;AAAA,MACvD,SAAS;AAAA,MACT,QAAQ;AAAA,QACJ,SAAS;AAAA,UACL,IAAI;AAAA,YACA,UAAU;AAAA,cACN,EAAC,OAAO,eAAe,QAAQ,cAAc,SAAS,OAAO,EAAC,UAAU,CAAC,EAAC,MAAK,MAAM,MAAM,QAAO,CAAC,EAAC;AAAA,cACpG,EAAC,SAAS,OAAO,EAAC,UAAU,CAAC,EAAC,MAAK,MAAM,MAAM,QAAO,CAAC,EAAC;AAAA,YACpF;AAAA,UACA;AAAA,QACA;AAAA;AAAA,QAEgB,YAAY,CAAA;AAAA,MAC5B;AAAA,MACY,IAAI;AAAA,QACA,MAAM,EAAC,QAAQ,QAAQ,SAAS,OAAO,EAAC,QAAQ,CAAC,EAAC,MAAK,MAAM,MAAM,QAAQ,UAAU,KAAI,CAAC,EAAC;AAAA,QAC3F,MAAM,EAAC,QAAQ,UAAU,SAAS,OAAO,EAAC,SAAS,CAAC,EAAC,MAAK,MAAM,MAAM,SAAS,UAAU,KAAI,CAAC,EAAC;AAAA;AAAA,QAE/F,QAAQ,EAAC,QAAQ,aAAa,SAAS,OAAO,EAAC,UAAU,KAAI,CAAC,EAAC;AAAA,MAC/E;AAAA,IACA;AAAA,IACQ,MAAM;AAAA,MACF,IAAI,EAAC,QAAQ,EAAC,QAAQ,aAAa,SAAS,aAAY,GAAG,OAAO,EAAC,QAAQ,QAAQ,SAAS,aAAY,EAAC;AAAA,IACrH;AAAA,IACQ,QAAQ;AAAA,MACJ,IAAI,EAAC,QAAQ,EAAC,QAAQ,aAAa,SAAS,aAAY,GAAG,OAAO,EAAC,QAAQ,QAAQ,SAAS,aAAY,EAAC;AAAA,IACrH;AAAA;AAAA,IAEQ,WAAW;AAAA,MACP,IAAI,EAAC,QAAQ,EAAC,QAAQ,aAAa,SAAS,aAAY,GAAG,OAAO,EAAC,QAAQ,QAAQ,SAAS,aAAY,EAAC;AAAA,IACrH;AAAA,EACA;AACA,CAAC;AASM,SAAS,kBAAkB,YAAY;AAC1C,SAAO;AAAA,IACH,QAAQ,aAAa,CAAC,EAAC,OAAO,SAAQ,MAAM;AACxC,YAAM,kBAAkB,IAAI,gBAAe;AAC3C,iBAAW,OAAO,CAAC,YAAY,SAAS,EAAC,MAAM,YAAY,QAAO,CAAC,GAAG,gBAAgB,MAAM,EACvF,KAAK,CAAC,WAAW,SAAS,EAAC,MAAM,QAAQ,OAAM,CAAC,CAAC,EACjD,MAAM,CAAC,YAAY;AAEhB,YAAI,SAAS,SAAS,gBAAgB,SAAS,SAAS,iBAAiB;AACrE;AAAA,QACJ;AACA,iBAAS,EAAC,MAAM,QAAQ,QAAO,CAAC;AAAA,MACpC,CAAC;AACL,aAAO,MAAM,gBAAgB,MAAK;AAAA,IACtC,CAAC;AAAA,EACT;AACA;"}
+{"version":3,"file":"uploadMachine.js","sources":["../../src/upload/uploadMachine.js"],"sourcesContent":["// Máquina del flujo de SUBIDA de un archivo (compañera de una zona para soltar archivos).\n//\n//   idle ──UPLOAD──▶ uploading.sending ──(PROGRESS 100%)──▶ uploading.processing\n//                         │                                        │\n//                         ├────────────── DONE ────────────────────┼──▶ done\n//                         ├────────────── FAIL ────────────────────┴──▶ failed\n//                         └─── CANCEL (el cleanup aborta la petición) ──▶ cancelled\n//\n// Por qué máquina y no cuatro useState: los estados imposibles dejan de existir (no hay \"resultado y error a la vez\"\n// ni \"progreso sin carga\") y el flujo sending → processing → done queda DECLARADO, no regado en callbacks.\n//\n// Contexto: progress (% de bytes enviados; null fuera de sending) · transfer (cuánto va y cuánto pesa, {loaded, total}, si\n// la subida lo da) · result (lo que resuelva la subida) · problem (el error RFC 9457 del rechazo, normalmente un ApiError).\n//\n// Uso:\n//   const [uploadSnapshot, sendToUpload] = useMachine(uploadMachine.provide({actors: buildUploadActors(uploadFile)}));\n//   sendToUpload({type: 'UPLOAD', input: {file}});\n//\n// Pura: solo importa xstate.\nimport {assign, fromCallback, setup} from 'xstate';\n\nconst resetContext = assign({progress: null, transfer: null, result: null, problem: null});\n\nexport const uploadMachine = setup({\n    actors: {\n        upload: fromCallback(() => {\n            throw new Error('uploadMachine: falta proveer upload con buildUploadActors().');\n        }),\n    },\n    guards: {\n        // 100% enviado no es terminado: el servidor sigue trabajando\n        isFullySent: ({event}) => event.percent >= 100,\n    },\n}).createMachine({\n    id: 'upload',\n    initial: 'idle',\n    context: {progress: null, transfer: null, result: null, problem: null},\n    states: {\n        idle: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}},\n        },\n        uploading: {\n            invoke: {src: 'upload', input: ({event}) => event.input},\n            initial: 'sending',\n            states: {\n                sending: {\n                    on: {\n                        PROGRESS: [\n                            {guard: 'isFullySent', target: 'processing', actions: assign({progress: ({event}) => event.percent, transfer: ({event}) => event.transfer ?? null})},\n                            {actions: assign({progress: ({event}) => event.percent, transfer: ({event}) => event.transfer ?? null})},\n                        ],\n                    },\n                },\n                // cuerpo entregado; esperando la respuesta del servidor (progreso indeterminado)\n                processing: {},\n            },\n            on: {\n                DONE: {target: 'done', actions: assign({result: ({event}) => event.output, progress: null, transfer: null})},\n                FAIL: {target: 'failed', actions: assign({problem: ({event}) => event.problem, progress: null, transfer: null})},\n                // salir de uploading DETIENE el actor y su cleanup aborta la petición de verdad (no solo la UI)\n                CANCEL: {target: 'cancelled', actions: assign({progress: null, transfer: null})},\n            },\n        },\n        done: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}, RESET: {target: 'idle', actions: resetContext}},\n        },\n        failed: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}, RESET: {target: 'idle', actions: resetContext}},\n        },\n        // cancelado por la persona: el archivo sigue elegido y se puede reintentar o limpiar\n        cancelled: {\n            on: {UPLOAD: {target: 'uploading', actions: resetContext}, RESET: {target: 'idle', actions: resetContext}},\n        },\n    },\n});\n\n/**\n * El actor upload a partir de la función de la pantalla.\n *\n * fromCallback y no fromPromise: hacen falta EVENTOS a medio camino (el avance) y un CLEANUP que aborte la petición.\n *\n * @param {(input: object, onProgress: (percent: number, transfer?: {loaded: number, total: number}) => void, signal: AbortSignal) => Promise<unknown>} uploadFile\n *     onProgress lleva, si se sabe, cuánto va y cuánto pesa (para la velocidad y lo que falta)\n */\nexport function buildUploadActors(uploadFile) {\n    return {\n        upload: fromCallback(({input, sendBack}) => {\n            const abortController = new AbortController();\n            uploadFile(input, (percent, transfer) => sendBack({type: 'PROGRESS', percent, transfer}), abortController.signal)\n                .then((output) => sendBack({type: 'DONE', output}))\n                .catch((problem) => {\n                    // aborto esperado (CANCEL): la máquina ya cambió de estado sola\n                    if (problem?.name === 'AbortError' || problem?.name === 'CanceledError') {\n                        return;\n                    }\n                    sendBack({type: 'FAIL', problem});\n                });\n            return () => abortController.abort();\n        }),\n    };\n}\n"],"names":[],"mappings":"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"}

package/dist/upload/uploadWithProgress.js

@@ -27,7 +27,7 @@ function uploadWithProgress(url, formData, { headers = {}, onProgress, signal, w
     }
     request.upload.onprogress = (event) => {
       if (event.lengthComputable) {
-        onProgress?.(Math.round(event.loaded / event.total * PERCENT));
+        onProgress?.(Math.round(event.loaded / event.total * PERCENT), { loaded: event.loaded, total: event.total });
       }
     };
     request.onload = () => {

package/dist/upload/uploadWithProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"uploadWithProgress.js","sources":["../../src/upload/uploadWithProgress.js"],"sourcesContent":["// Subir un formulario con archivos (multipart) con el AVANCE real de la subida.\n//\n// fetch no dice cuántos bytes del cuerpo ya viajaron; XMLHttpRequest sí (xhr.upload.onprogress). Es UNA petición normal,\n// el mismo POST de siempre, pero la pantalla puede pintar «Subiendo 47 %».\n//\n// El avance llega a 100 % cuando el CUERPO terminó de viajar; lo que sigue (el servidor procesando y la respuesta\n// bajando) ya no se puede medir aquí: la pantalla cambia a «procesando…» sin porcentaje (uploadMachine lo hace sola).\n//\n// Responde como fetch: un Response (res.ok, res.status, res.headers, res.json(), res.blob()), así quien llama trata el\n// error RFC 9457 igual que con cualquier otra petición. La cancelación también es la de fetch: AbortSignal → AbortError.\n//\n// Funciones del navegador, sin React: function (regla de la casa). Se prueba con node --test (uploadWithProgress.test.js)\n// con un XMLHttpRequest de mentira.\nimport {toolkitSettings} from '@/toolkit/toolkitSettings.js';\n\nconst PERCENT = 100;\n\n/**\n * Los headers de XMLHttpRequest ('k: v\\r\\nk2: v2') como objeto para Response.\n *\n * @param {string|null} rawHeaders\n * @returns {Record<string, string>}\n */\nfunction headersOf(rawHeaders) {\n    const headers = {};\n    for (const line of String(rawHeaders ?? '').trim().split(/[\\r\\n]+/)) {\n        const separatorPosition = line.indexOf(': ');\n        if (separatorPosition > 0) {\n            headers[line.slice(0, separatorPosition)] = line.slice(separatorPosition + 2);\n        }\n    }\n    return headers;\n}\n\n/**\n * @param {string} url\n * @param {FormData} formData los archivos y los campos que pida el backend\n * @param {object} [options]\n * @param {Record<string, string>} [options.headers] p. ej. Authorization; Accept-Language ya va con el idioma activo\n * @param {(percent: number) => void} [options.onProgress] 0 a 100 de lo que ya viajó del cuerpo\n * @param {AbortSignal} [options.signal]\n * @param {boolean} [options.withCredentials] manda las cookies a otro dominio (sesión de Sanctum en otro subdominio)\n * @returns {Promise<Response>}\n */\nexport function uploadWithProgress(url, formData, {headers = {}, onProgress, signal, withCredentials = false} = {}) {\n    return new Promise((resolve, reject) => {\n        // guard clause: ya venía cancelada\n        if (signal?.aborted) {\n            reject(new DOMException('La subida se canceló', 'AbortError'));\n            return;\n        }\n\n        const request = new XMLHttpRequest();\n        request.open('POST', url);\n        request.responseType = 'blob';\n        request.withCredentials = withCredentials;\n        signal?.addEventListener('abort', () => request.abort(), {once: true});\n\n        // OJO: Content-Type NO se pone a mano: el navegador lo arma con el separador del multipart; puesto a mano, el\n        // servidor no encuentra los archivos\n        const finalHeaders = {'Accept-Language': toolkitSettings().language, ...headers};\n        for (const [name, value] of Object.entries(finalHeaders)) {\n            request.setRequestHeader(name, value);\n        }\n\n        request.upload.onprogress = (event) => {\n            if (event.lengthComputable) {\n                onProgress?.(Math.round((event.loaded / event.total) * PERCENT));\n            }\n        };\n        request.onload = () => {\n            resolve(new Response(request.response, {status: request.status, headers: headersOf(request.getAllResponseHeaders())}));\n        };\n        request.onerror = () => reject(new TypeError('No hubo respuesta del servidor'));\n        request.ontimeout = () => reject(new TypeError('El servidor tardó demasiado en responder'));\n        request.onabort = () => reject(new DOMException('La subida se canceló', 'AbortError'));\n        request.send(formData);\n    });\n}\n"],"names":[],"mappings":";AAeA,MAAM,UAAU;AAQhB,SAAS,UAAU,YAAY;AAC3B,QAAM,UAAU,CAAA;AAChB,aAAW,QAAQ,OAAO,cAAc,EAAE,EAAE,KAAI,EAAG,MAAM,SAAS,GAAG;AACjE,UAAM,oBAAoB,KAAK,QAAQ,IAAI;AAC3C,QAAI,oBAAoB,GAAG;AACvB,cAAQ,KAAK,MAAM,GAAG,iBAAiB,CAAC,IAAI,KAAK,MAAM,oBAAoB,CAAC;AAAA,IAChF;AAAA,EACJ;AACA,SAAO;AACX;AAYO,SAAS,mBAAmB,KAAK,UAAU,EAAC,UAAU,CAAA,GAAI,YAAY,QAAQ,kBAAkB,MAAK,IAAI,CAAA,GAAI;AAChH,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AAEpC,QAAI,QAAQ,SAAS;AACjB,aAAO,IAAI,aAAa,wBAAwB,YAAY,CAAC;AAC7D;AAAA,IACJ;AAEA,UAAM,UAAU,IAAI,eAAc;AAClC,YAAQ,KAAK,QAAQ,GAAG;AACxB,YAAQ,eAAe;AACvB,YAAQ,kBAAkB;AAC1B,YAAQ,iBAAiB,SAAS,MAAM,QAAQ,SAAS,EAAC,MAAM,KAAI,CAAC;AAIrE,UAAM,eAAe,EAAC,mBAAmB,gBAAe,EAAG,UAAU,GAAG,QAAO;AAC/E,eAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,YAAY,GAAG;AACtD,cAAQ,iBAAiB,MAAM,KAAK;AAAA,IACxC;AAEA,YAAQ,OAAO,aAAa,CAAC,UAAU;AACnC,UAAI,MAAM,kBAAkB;AACxB,qBAAa,KAAK,MAAO,MAAM,SAAS,MAAM,QAAS,OAAO,CAAC;AAAA,MACnE;AAAA,IACJ;AACA,YAAQ,SAAS,MAAM;AACnB,cAAQ,IAAI,SAAS,QAAQ,UAAU,EAAC,QAAQ,QAAQ,QAAQ,SAAS,UAAU,QAAQ,sBAAqB,CAAE,EAAC,CAAC,CAAC;AAAA,IACzH;AACA,YAAQ,UAAU,MAAM,OAAO,IAAI,UAAU,gCAAgC,CAAC;AAC9E,YAAQ,YAAY,MAAM,OAAO,IAAI,UAAU,0CAA0C,CAAC;AAC1F,YAAQ,UAAU,MAAM,OAAO,IAAI,aAAa,wBAAwB,YAAY,CAAC;AACrF,YAAQ,KAAK,QAAQ;AAAA,EACzB,CAAC;AACL;"}
+{"version":3,"file":"uploadWithProgress.js","sources":["../../src/upload/uploadWithProgress.js"],"sourcesContent":["// Subir un formulario con archivos (multipart) con el AVANCE real de la subida.\n//\n// fetch no dice cuántos bytes del cuerpo ya viajaron; XMLHttpRequest sí (xhr.upload.onprogress). Es UNA petición normal,\n// el mismo POST de siempre, pero la pantalla puede pintar «Subiendo 47 %».\n//\n// El avance llega a 100 % cuando el CUERPO terminó de viajar; lo que sigue (el servidor procesando y la respuesta\n// bajando) ya no se puede medir aquí: la pantalla cambia a «procesando…» sin porcentaje (uploadMachine lo hace sola).\n//\n// Responde como fetch: un Response (res.ok, res.status, res.headers, res.json(), res.blob()), así quien llama trata el\n// error RFC 9457 igual que con cualquier otra petición. La cancelación también es la de fetch: AbortSignal → AbortError.\n//\n// Funciones del navegador, sin React: function (regla de la casa). Se prueba con node --test (uploadWithProgress.test.js)\n// con un XMLHttpRequest de mentira.\nimport {toolkitSettings} from '@/toolkit/toolkitSettings.js';\n\nconst PERCENT = 100;\n\n/**\n * Los headers de XMLHttpRequest ('k: v\\r\\nk2: v2') como objeto para Response.\n *\n * @param {string|null} rawHeaders\n * @returns {Record<string, string>}\n */\nfunction headersOf(rawHeaders) {\n    const headers = {};\n    for (const line of String(rawHeaders ?? '').trim().split(/[\\r\\n]+/)) {\n        const separatorPosition = line.indexOf(': ');\n        if (separatorPosition > 0) {\n            headers[line.slice(0, separatorPosition)] = line.slice(separatorPosition + 2);\n        }\n    }\n    return headers;\n}\n\n/**\n * @param {string} url\n * @param {FormData} formData los archivos y los campos que pida el backend\n * @param {object} [options]\n * @param {Record<string, string>} [options.headers] p. ej. Authorization; Accept-Language ya va con el idioma activo\n * @param {(percent: number, transfer: {loaded: number, total: number}) => void} [options.onProgress] 0 a 100 de lo que ya\n *     viajó del cuerpo, y los bytes (para la velocidad y lo que falta)\n * @param {AbortSignal} [options.signal]\n * @param {boolean} [options.withCredentials] manda las cookies a otro dominio (sesión de Sanctum en otro subdominio)\n * @returns {Promise<Response>}\n */\nexport function uploadWithProgress(url, formData, {headers = {}, onProgress, signal, withCredentials = false} = {}) {\n    return new Promise((resolve, reject) => {\n        // guard clause: ya venía cancelada\n        if (signal?.aborted) {\n            reject(new DOMException('La subida se canceló', 'AbortError'));\n            return;\n        }\n\n        const request = new XMLHttpRequest();\n        request.open('POST', url);\n        request.responseType = 'blob';\n        request.withCredentials = withCredentials;\n        signal?.addEventListener('abort', () => request.abort(), {once: true});\n\n        // OJO: Content-Type NO se pone a mano: el navegador lo arma con el separador del multipart; puesto a mano, el\n        // servidor no encuentra los archivos\n        const finalHeaders = {'Accept-Language': toolkitSettings().language, ...headers};\n        for (const [name, value] of Object.entries(finalHeaders)) {\n            request.setRequestHeader(name, value);\n        }\n\n        request.upload.onprogress = (event) => {\n            if (event.lengthComputable) {\n                onProgress?.(Math.round((event.loaded / event.total) * PERCENT), {loaded: event.loaded, total: event.total});\n            }\n        };\n        request.onload = () => {\n            resolve(new Response(request.response, {status: request.status, headers: headersOf(request.getAllResponseHeaders())}));\n        };\n        request.onerror = () => reject(new TypeError('No hubo respuesta del servidor'));\n        request.ontimeout = () => reject(new TypeError('El servidor tardó demasiado en responder'));\n        request.onabort = () => reject(new DOMException('La subida se canceló', 'AbortError'));\n        request.send(formData);\n    });\n}\n"],"names":[],"mappings":";AAeA,MAAM,UAAU;AAQhB,SAAS,UAAU,YAAY;AAC3B,QAAM,UAAU,CAAA;AAChB,aAAW,QAAQ,OAAO,cAAc,EAAE,EAAE,KAAI,EAAG,MAAM,SAAS,GAAG;AACjE,UAAM,oBAAoB,KAAK,QAAQ,IAAI;AAC3C,QAAI,oBAAoB,GAAG;AACvB,cAAQ,KAAK,MAAM,GAAG,iBAAiB,CAAC,IAAI,KAAK,MAAM,oBAAoB,CAAC;AAAA,IAChF;AAAA,EACJ;AACA,SAAO;AACX;AAaO,SAAS,mBAAmB,KAAK,UAAU,EAAC,UAAU,CAAA,GAAI,YAAY,QAAQ,kBAAkB,MAAK,IAAI,CAAA,GAAI;AAChH,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AAEpC,QAAI,QAAQ,SAAS;AACjB,aAAO,IAAI,aAAa,wBAAwB,YAAY,CAAC;AAC7D;AAAA,IACJ;AAEA,UAAM,UAAU,IAAI,eAAc;AAClC,YAAQ,KAAK,QAAQ,GAAG;AACxB,YAAQ,eAAe;AACvB,YAAQ,kBAAkB;AAC1B,YAAQ,iBAAiB,SAAS,MAAM,QAAQ,SAAS,EAAC,MAAM,KAAI,CAAC;AAIrE,UAAM,eAAe,EAAC,mBAAmB,gBAAe,EAAG,UAAU,GAAG,QAAO;AAC/E,eAAW,CAAC,MAAM,KAAK,KAAK,OAAO,QAAQ,YAAY,GAAG;AACtD,cAAQ,iBAAiB,MAAM,KAAK;AAAA,IACxC;AAEA,YAAQ,OAAO,aAAa,CAAC,UAAU;AACnC,UAAI,MAAM,kBAAkB;AACxB,qBAAa,KAAK,MAAO,MAAM,SAAS,MAAM,QAAS,OAAO,GAAG,EAAC,QAAQ,MAAM,QAAQ,OAAO,MAAM,MAAK,CAAC;AAAA,MAC/G;AAAA,IACJ;AACA,YAAQ,SAAS,MAAM;AACnB,cAAQ,IAAI,SAAS,QAAQ,UAAU,EAAC,QAAQ,QAAQ,QAAQ,SAAS,UAAU,QAAQ,sBAAqB,CAAE,EAAC,CAAC,CAAC;AAAA,IACzH;AACA,YAAQ,UAAU,MAAM,OAAO,IAAI,UAAU,gCAAgC,CAAC;AAC9E,YAAQ,YAAY,MAAM,OAAO,IAAI,UAAU,0CAA0C,CAAC;AAC1F,YAAQ,UAAU,MAAM,OAAO,IAAI,aAAa,wBAAwB,YAAY,CAAC;AACrF,YAAQ,KAAK,QAAQ;AAAA,EACzB,CAAC;AACL;"}

package/dist/upload/useFilePicker.js

@@ -0,0 +1,101 @@
+"use client";
+import { useRef, useState } from "react";
+import { toastError } from "../feedback/toast.js";
+import { useFormatters } from "../toolkit/useFormatters.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+import { resolveAccept, parseFileSize, screenFiles, FILE_REJECTION } from "./fileRules.js";
+function useFilePicker({
+  accept,
+  maxSize,
+  multiple = false,
+  maxFiles,
+  maxTotalSize,
+  keptFiles = [],
+  disabled = false,
+  onAccept,
+  onReject,
+  texts
+}) {
+  const { t } = useToolkitTranslation("common", texts);
+  const { formatFileSize } = useFormatters();
+  const inputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const resolvedAccept = resolveAccept(accept);
+  const maxBytes = parseFileSize(maxSize);
+  const maxTotalBytes = multiple ? parseFileSize(maxTotalSize) : null;
+  const rejectionTextOf = (file, reason) => {
+    switch (reason) {
+      case FILE_REJECTION.size:
+        return t("upload.tooLarge", { name: file.name, max: formatFileSize(maxBytes) });
+      case FILE_REJECTION.count:
+        return t("upload.tooManyFiles", { count: maxFiles });
+      case FILE_REJECTION.total:
+        return t("upload.totalTooLarge", { name: file.name, max: formatFileSize(maxTotalBytes) });
+      default:
+        return t("upload.invalidType", { name: file.name, accept: resolvedAccept });
+    }
+  };
+  const pickFiles = (fileList) => {
+    const picked = [...fileList ?? []].slice(0, multiple ? void 0 : 1);
+    if (!picked.length || disabled) {
+      return;
+    }
+    const { files, accepted, rejected } = screenFiles(picked, {
+      resolvedAccept,
+      maxBytes,
+      maxFiles: multiple ? maxFiles : void 0,
+      maxTotalBytes,
+      keptFiles: multiple ? keptFiles : []
+    });
+    for (const { file, reason } of rejected) {
+      if (onReject) {
+        onReject(file, reason);
+      } else {
+        toastError(rejectionTextOf(file, reason));
+      }
+    }
+    if (accepted.length) {
+      onAccept(multiple ? files : accepted[0]);
+    }
+  };
+  const open = () => {
+    if (disabled || !inputRef.current) {
+      return;
+    }
+    inputRef.current.value = "";
+    inputRef.current.click();
+  };
+  return {
+    open,
+    pickFiles,
+    isDragging,
+    resolvedAccept,
+    maxBytes,
+    maxTotalBytes,
+    inputProps: {
+      ref: inputRef,
+      type: "file",
+      accept: resolvedAccept,
+      multiple,
+      hidden: true,
+      disabled,
+      onChange: (event) => pickFiles(event.target.files)
+    },
+    dropHandlers: {
+      onDragOver: (event) => {
+        event.preventDefault();
+        setIsDragging(!disabled);
+      },
+      onDragLeave: () => setIsDragging(false),
+      onDrop: (event) => {
+        event.preventDefault();
+        setIsDragging(false);
+        pickFiles(event.dataTransfer?.files);
+      }
+    }
+  };
+}
+export {
+  useFilePicker
+};
+//# sourceMappingURL=useFilePicker.js.map

package/dist/upload/useFilePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilePicker.js","sources":["../../src/upload/useFilePicker.js"],"sourcesContent":["// Lo que necesita cualquier cargador para ELEGIR archivos: la ventana de archivos del sistema, soltar encima, revisar tipo,\n// peso, cuántos y cuánto pesan juntos (screenFiles), y avisar lo que no pasó. Lo usan los cargadores del paquete (la zona,\n// el compacto, «Adjuntar» y la imagen) y queda suelto para que un proyecto arme el suyo con su propio botón:\n//\n//   const picker = useFilePicker({accept: 'pdf', maxSize: '5 MB', onAccept: setFile});\n//   <input {...picker.inputProps} />\n//   <Button onClick={picker.open} {...picker.dropHandlers}>Subir el contrato</Button>\n//\n// Solo elige: enviarlo es de la pantalla (uploadWithProgress). Lo rechazado se avisa con toastError y los textos del\n// paquete; con onReject la pantalla decide qué hacer.\n//\n// Hook genérico: function (regla de la casa).\nimport {useRef, useState} from 'react';\n\nimport {toastError} from '@/feedback/toast.jsx';\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {FILE_REJECTION, parseFileSize, resolveAccept, screenFiles} from '@/upload/fileRules.js';\n\n/**\n * @param {object} options\n * @param {string|string[]} [options.accept] 'excel' | ['excel', 'pdf'] | '.xlsx,.xls' | 'image/*'\n * @param {number|string} [options.maxSize] el peso máximo de cada archivo: bytes o '10 MB'\n * @param {boolean} [options.multiple] varios a la vez; sin él, solo el primero que se elija o se suelte\n * @param {number} [options.maxFiles] con multiple: cuántos como máximo, contando los que ya estaban\n * @param {number|string} [options.maxTotalSize] con multiple: cuánto pueden pesar todos juntos\n * @param {Array<{name: string, size?: number}>} [options.keptFiles] con multiple: los que ya estaban (cuentan en los topes)\n * @param {boolean} [options.disabled] no se puede elegir ni soltar (también mientras se sube)\n * @param {(picked: any) => void} options.onAccept sin multiple, el archivo; con multiple, la lista completa (los que ya\n *     estaban y los nuevos), lista para guardarse\n * @param {(file: File, reason: string) => void} [options.onReject] reason es uno de FILE_REJECTION; sin él, un aviso\n * @param {object} [options.texts] los textos que cambian, con la forma de `common`\n * @returns {{inputProps: object, open: () => void, pickFiles: (fileList: FileList|File[]|null|undefined) => void, isDragging: boolean, dropHandlers: object, resolvedAccept: string|undefined, maxBytes: number|null, maxTotalBytes: number|null}}\n */\nexport function useFilePicker({\n    accept, maxSize, multiple = false, maxFiles, maxTotalSize, keptFiles = [], disabled = false, onAccept, onReject, texts,\n}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const {formatFileSize} = useFormatters();\n    const inputRef = useRef(null);\n    const [isDragging, setIsDragging] = useState(false);\n    const resolvedAccept = resolveAccept(accept);\n    const maxBytes = parseFileSize(maxSize);\n    const maxTotalBytes = multiple ? parseFileSize(maxTotalSize) : null;\n\n    // el aviso de cada motivo, con el nombre del archivo y el límite que no cumplió\n    const rejectionTextOf = (file, reason) => {\n        switch (reason) {\n            case FILE_REJECTION.size:\n                return t('upload.tooLarge', {name: file.name, max: formatFileSize(maxBytes)});\n            case FILE_REJECTION.count:\n                return t('upload.tooManyFiles', {count: maxFiles});\n            case FILE_REJECTION.total:\n                return t('upload.totalTooLarge', {name: file.name, max: formatFileSize(maxTotalBytes)});\n            default:\n                return t('upload.invalidType', {name: file.name, accept: resolvedAccept});\n        }\n    };\n\n    const pickFiles = (fileList) => {\n        // se cerró la ventana sin elegir, o el candado está puesto\n        const picked = [...(fileList ?? [])].slice(0, multiple ? undefined : 1);\n        if (!picked.length || disabled) {\n            return;\n        }\n        const {files, accepted, rejected} = screenFiles(picked, {\n            resolvedAccept, maxBytes, maxFiles: multiple ? maxFiles : undefined, maxTotalBytes, keptFiles: multiple ? keptFiles : [],\n        });\n        for (const {file, reason} of rejected) {\n            if (onReject) {\n                onReject(file, reason);\n            } else {\n                toastError(rejectionTextOf(file, reason));\n            }\n        }\n        if (accepted.length) {\n            onAccept(multiple ? files : accepted[0]);\n        }\n    };\n\n    const open = () => {\n        if (disabled || !inputRef.current) {\n            return;\n        }\n        // OJO: se limpia el valor del input para poder volver a elegir EL MISMO archivo (corregido en disco); sin esto el\n        // navegador no avisa el cambio\n        inputRef.current.value = '';\n        inputRef.current.click();\n    };\n\n    return {\n        open,\n        pickFiles,\n        isDragging,\n        resolvedAccept,\n        maxBytes,\n        maxTotalBytes,\n        inputProps: {\n            ref: inputRef, type: 'file', accept: resolvedAccept, multiple, hidden: true, disabled,\n            onChange: (event) => pickFiles(event.target.files),\n        },\n        dropHandlers: {\n            onDragOver: (event) => {\n                event.preventDefault();\n                setIsDragging(!disabled);\n            },\n            onDragLeave: () => setIsDragging(false),\n            onDrop: (event) => {\n                event.preventDefault();\n                setIsDragging(false);\n                pickFiles(event.dataTransfer?.files);\n            },\n        },\n    };\n}\n"],"names":[],"mappings":";;;;;;AAkCO,SAAS,cAAc;AAAA,EAC1B;AAAA,EAAQ;AAAA,EAAS,WAAW;AAAA,EAAO;AAAA,EAAU;AAAA,EAAc,YAAY,CAAA;AAAA,EAAI,WAAW;AAAA,EAAO;AAAA,EAAU;AAAA,EAAU;AACrH,GAAG;AACC,QAAM,EAAC,EAAC,IAAI,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,eAAc,IAAI,cAAa;AACtC,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,iBAAiB,cAAc,MAAM;AAC3C,QAAM,WAAW,cAAc,OAAO;AACtC,QAAM,gBAAgB,WAAW,cAAc,YAAY,IAAI;AAG/D,QAAM,kBAAkB,CAAC,MAAM,WAAW;AACtC,YAAQ,QAAM;AAAA,MACV,KAAK,eAAe;AAChB,eAAO,EAAE,mBAAmB,EAAC,MAAM,KAAK,MAAM,KAAK,eAAe,QAAQ,EAAC,CAAC;AAAA,MAChF,KAAK,eAAe;AAChB,eAAO,EAAE,uBAAuB,EAAC,OAAO,SAAQ,CAAC;AAAA,MACrD,KAAK,eAAe;AAChB,eAAO,EAAE,wBAAwB,EAAC,MAAM,KAAK,MAAM,KAAK,eAAe,aAAa,EAAC,CAAC;AAAA,MAC1F;AACI,eAAO,EAAE,sBAAsB,EAAC,MAAM,KAAK,MAAM,QAAQ,eAAc,CAAC;AAAA,IACxF;AAAA,EACI;AAEA,QAAM,YAAY,CAAC,aAAa;AAE5B,UAAM,SAAS,CAAC,GAAI,YAAY,EAAG,EAAE,MAAM,GAAG,WAAW,SAAY,CAAC;AACtE,QAAI,CAAC,OAAO,UAAU,UAAU;AAC5B;AAAA,IACJ;AACA,UAAM,EAAC,OAAO,UAAU,SAAQ,IAAI,YAAY,QAAQ;AAAA,MACpD;AAAA,MAAgB;AAAA,MAAU,UAAU,WAAW,WAAW;AAAA,MAAW;AAAA,MAAe,WAAW,WAAW,YAAY,CAAA;AAAA,IAClI,CAAS;AACD,eAAW,EAAC,MAAM,OAAM,KAAK,UAAU;AACnC,UAAI,UAAU;AACV,iBAAS,MAAM,MAAM;AAAA,MACzB,OAAO;AACH,mBAAW,gBAAgB,MAAM,MAAM,CAAC;AAAA,MAC5C;AAAA,IACJ;AACA,QAAI,SAAS,QAAQ;AACjB,eAAS,WAAW,QAAQ,SAAS,CAAC,CAAC;AAAA,IAC3C;AAAA,EACJ;AAEA,QAAM,OAAO,MAAM;AACf,QAAI,YAAY,CAAC,SAAS,SAAS;AAC/B;AAAA,IACJ;AAGA,aAAS,QAAQ,QAAQ;AACzB,aAAS,QAAQ,MAAK;AAAA,EAC1B;AAEA,SAAO;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,MACR,KAAK;AAAA,MAAU,MAAM;AAAA,MAAQ,QAAQ;AAAA,MAAgB;AAAA,MAAU,QAAQ;AAAA,MAAM;AAAA,MAC7E,UAAU,CAAC,UAAU,UAAU,MAAM,OAAO,KAAK;AAAA,IAC7D;AAAA,IACQ,cAAc;AAAA,MACV,YAAY,CAAC,UAAU;AACnB,cAAM,eAAc;AACpB,sBAAc,CAAC,QAAQ;AAAA,MAC3B;AAAA,MACA,aAAa,MAAM,cAAc,KAAK;AAAA,MACtC,QAAQ,CAAC,UAAU;AACf,cAAM,eAAc;AACpB,sBAAc,KAAK;AACnB,kBAAU,MAAM,cAAc,KAAK;AAAA,MACvC;AAAA,IACZ;AAAA,EACA;AACA;"}