@stackcraftmx/calcita 0.32.2 → 0.51.0

package/dist/richText/RichTextLinkPopover.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Button from "@mui/material/Button";
+import Popover from "@mui/material/Popover";
+import Stack from "@mui/material/Stack";
+import TextInput from "../inputs/TextInput.js";
+import { linkUrlOf } from "./richTextRules.js";
+function RichTextLinkPopover({ anchorElement, initialUrl, onSave, onRemove, onClose, t }) {
+  const [typedUrl, setTypedUrl] = useState(initialUrl);
+  const [isRejected, setIsRejected] = useState(false);
+  const save = () => {
+    const url = linkUrlOf(typedUrl);
+    if (!url) {
+      setIsRejected(true);
+      return;
+    }
+    onSave(url);
+  };
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open: Boolean(anchorElement),
+      anchorEl: anchorElement,
+      onClose,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      slotProps: { paper: { sx: { p: 2, width: 340, maxWidth: "calc(100vw - 32px)" } } },
+      children: /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: (event) => {
+        event.preventDefault();
+        save();
+      }, children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            label: t("linkDialog.url"),
+            value: typedUrl,
+            autoFocus: true,
+            placeholder: "https://",
+            onChange: (value) => {
+              setTypedUrl(value);
+              setIsRejected(false);
+            },
+            error: isRejected ? t("linkDialog.invalid") : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { gap: 1, justifyContent: "flex-end" }, children: [
+          initialUrl && /* @__PURE__ */ jsx(Button, { color: "error", onClick: onRemove, children: t("linkDialog.remove") }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: "contained", children: t("linkDialog.save") })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  RichTextLinkPopover as default
+};
+//# sourceMappingURL=RichTextLinkPopover.js.map

package/dist/richText/RichTextLinkPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextLinkPopover.js","sources":["../../src/richText/RichTextLinkPopover.jsx"],"sourcesContent":["// La ventanita para poner o cambiar la liga del texto elegido: la dirección (solo https, http, mailto o tel; un dominio suelto\n// se completa con https://), «Poner la liga» y «Quitar». Una dirección que no se acepta se dice en su campo.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Button from '@mui/material/Button';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\n\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {linkUrlOf} from '@/richText/richTextRules.js';\n\n/**\n * @param {object} props\n * @param {HTMLElement|null} props.anchorElement el botón de la liga (null: cerrada)\n * @param {string} props.initialUrl la liga que ya tiene el texto ('' si no tiene)\n * @param {(url: string) => void} props.onSave recibe la dirección ya revisada\n * @param {() => void} props.onRemove\n * @param {() => void} props.onClose\n * @param {(key: string) => string} props.t el traductor del editor\n */\nexport default function RichTextLinkPopover({anchorElement, initialUrl, onSave, onRemove, onClose, t}) {\n    const [typedUrl, setTypedUrl] = useState(initialUrl);\n    const [isRejected, setIsRejected] = useState(false);\n\n    const save = () => {\n        const url = linkUrlOf(typedUrl);\n        if (!url) {\n            setIsRejected(true);\n            return;\n        }\n        onSave(url);\n    };\n\n    return (\n        <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={onClose}\n                 anchorOrigin={{vertical: 'bottom', horizontal: 'left'}} slotProps={{paper: {sx: {p: 2, width: 340, maxWidth: 'calc(100vw - 32px)'}}}}>\n            <form noValidate onSubmit={(event) => {\n                event.preventDefault();\n                save();\n            }}>\n                <TextInput label={t('linkDialog.url')} value={typedUrl} autoFocus placeholder=\"https://\"\n                           onChange={(value) => {\n                               setTypedUrl(value);\n                               setIsRejected(false);\n                           }}\n                           error={isRejected ? t('linkDialog.invalid') : undefined} />\n                <Stack direction=\"row\" sx={{gap: 1, justifyContent: 'flex-end'}}>\n                    {initialUrl && <Button color=\"error\" onClick={onRemove}>{t('linkDialog.remove')}</Button>}\n                    <Button type=\"submit\" variant=\"contained\">{t('linkDialog.save')}</Button>\n                </Stack>\n            </form>\n        </Popover>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAqBA,SAAwB,oBAAoB,EAAC,eAAe,YAAY,QAAQ,UAAU,SAAS,KAAI;AACnG,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,UAAU;AACnD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,OAAO,MAAM;AACf,UAAM,MAAM,UAAU,QAAQ;AAC9B,QAAI,CAAC,KAAK;AACN,oBAAc,IAAI;AAClB;AAAA,IACJ;AACA,WAAO,GAAG;AAAA,EACd;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAQ,MAAM,QAAQ,aAAa;AAAA,MAAG,UAAU;AAAA,MAAe;AAAA,MACvD,cAAc,EAAC,UAAU,UAAU,YAAY,OAAA;AAAA,MAAS,WAAW,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,GAAG,OAAO,KAAK,UAAU,qBAAA,IAAqB;AAAA,MACvI,+BAAC,QAAA,EAAK,YAAU,MAAC,UAAU,CAAC,UAAU;AAClC,cAAM,eAAA;AACN,aAAA;AAAA,MACJ,GACI,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAAU,OAAO,EAAE,gBAAgB;AAAA,YAAG,OAAO;AAAA,YAAU,WAAS;AAAA,YAAC,aAAY;AAAA,YACnE,UAAU,CAAC,UAAU;AACjB,0BAAY,KAAK;AACjB,4BAAc,KAAK;AAAA,YACvB;AAAA,YACA,OAAO,aAAa,EAAE,oBAAoB,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QACzD,qBAAC,OAAA,EAAM,WAAU,OAAM,IAAI,EAAC,KAAK,GAAG,gBAAgB,WAAA,GAC/C,UAAA;AAAA,UAAA,cAAc,oBAAC,UAAO,OAAM,SAAQ,SAAS,UAAW,UAAA,EAAE,mBAAmB,EAAA,CAAE;AAAA,UAChF,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAa,UAAA,EAAE,iBAAiB,EAAA,CAAE;AAAA,QAAA,EAAA,CACpE;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/richText/RichTextToolbar.js

@@ -0,0 +1,189 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { useEditorState } from "@tiptap/react";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import Tooltip from "@mui/material/Tooltip";
+import CodeIcon from "@mui/icons-material/Code";
+import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
+import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
+import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
+import FormatBoldIcon from "@mui/icons-material/FormatBold";
+import FormatClearIcon from "@mui/icons-material/FormatClear";
+import FormatItalicIcon from "@mui/icons-material/FormatItalic";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
+import FormatQuoteIcon from "@mui/icons-material/FormatQuote";
+import FormatStrikethroughIcon from "@mui/icons-material/FormatStrikethrough";
+import FormatUnderlinedIcon from "@mui/icons-material/FormatUnderlined";
+import InsertLinkIcon from "@mui/icons-material/InsertLink";
+import RedoIcon from "@mui/icons-material/Redo";
+import UndoIcon from "@mui/icons-material/Undo";
+import { RICH_TEXT_HEADING_LEVELS } from "./richTextExtensions.js";
+import RichTextLinkPopover from "./RichTextLinkPopover.js";
+import { RICH_TEXT_FEATURE } from "./richTextRules.js";
+const PARAGRAPH_STYLE = "paragraph";
+const headingStyleOf = (level) => `heading${level}`;
+const TEXT_ALIGNMENTS = Object.freeze([
+  { value: "left", Icon: FormatAlignLeftIcon },
+  { value: "center", Icon: FormatAlignCenterIcon },
+  { value: "right", Icon: FormatAlignRightIcon }
+]);
+const MARK_BUTTONS = Object.freeze([
+  { feature: RICH_TEXT_FEATURE.bold, mark: "bold", Icon: FormatBoldIcon, toggle: (chain) => chain.toggleBold() },
+  { feature: RICH_TEXT_FEATURE.italic, mark: "italic", Icon: FormatItalicIcon, toggle: (chain) => chain.toggleItalic() },
+  { feature: RICH_TEXT_FEATURE.underline, mark: "underline", Icon: FormatUnderlinedIcon, toggle: (chain) => chain.toggleUnderline() },
+  { feature: RICH_TEXT_FEATURE.strike, mark: "strike", Icon: FormatStrikethroughIcon, toggle: (chain) => chain.toggleStrike() }
+]);
+const BLOCK_BUTTONS = Object.freeze([
+  { feature: RICH_TEXT_FEATURE.bulletList, node: "bulletList", Icon: FormatListBulletedIcon, toggle: (chain) => chain.toggleBulletList() },
+  { feature: RICH_TEXT_FEATURE.orderedList, node: "orderedList", Icon: FormatListNumberedIcon, toggle: (chain) => chain.toggleOrderedList() },
+  { feature: RICH_TEXT_FEATURE.blockquote, node: "blockquote", Icon: FormatQuoteIcon, toggle: (chain) => chain.toggleBlockquote() },
+  { feature: RICH_TEXT_FEATURE.codeBlock, node: "codeBlock", Icon: CodeIcon, toggle: (chain) => chain.toggleCodeBlock() }
+]);
+function ToolbarButton({ label, isActive, disabled, onClick, children }) {
+  return /* @__PURE__ */ jsx(Tooltip, { title: label, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      "aria-label": label,
+      "aria-pressed": isActive ?? void 0,
+      disabled,
+      color: isActive ? "primary" : "default",
+      onMouseDown: (event) => event.preventDefault(),
+      onClick,
+      sx: isActive ? { bgcolor: "action.selected" } : void 0,
+      children
+    }
+  ) }) });
+}
+function RichTextToolbar({ editor, features, disabled, t, actions }) {
+  const [linkAnchor, setLinkAnchor] = useState(null);
+  const linkButtonRef = useRef(null);
+  const has = (feature) => features.includes(feature);
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: current }) => {
+      if (!current) {
+        return null;
+      }
+      const headingLevel = RICH_TEXT_HEADING_LEVELS.find((level) => current.isActive("heading", { level }));
+      return {
+        marks: Object.fromEntries(MARK_BUTTONS.filter(({ feature }) => has(feature)).map(({ mark }) => [mark, current.isActive(mark)])),
+        blocks: Object.fromEntries(BLOCK_BUTTONS.filter(({ feature }) => has(feature)).map(({ node }) => [node, current.isActive(node)])),
+        textStyle: headingLevel ? headingStyleOf(headingLevel) : PARAGRAPH_STYLE,
+        alignment: TEXT_ALIGNMENTS.find(({ value }) => current.isActive({ textAlign: value }))?.value ?? TEXT_ALIGNMENTS[0].value,
+        isLink: has(RICH_TEXT_FEATURE.link) && current.isActive("link"),
+        linkHref: has(RICH_TEXT_FEATURE.link) ? current.getAttributes("link").href ?? "" : "",
+        canUndo: has(RICH_TEXT_FEATURE.history) && current.can().undo(),
+        canRedo: has(RICH_TEXT_FEATURE.history) && current.can().redo()
+      };
+    }
+  });
+  if (!editor || !state) {
+    return null;
+  }
+  const chain = () => editor.chain().focus();
+  const isDisabled = disabled || !editor.isEditable;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    has(RICH_TEXT_FEATURE.textStyle) && /* @__PURE__ */ jsxs(
+      Select,
+      {
+        size: "small",
+        variant: "standard",
+        disableUnderline: true,
+        value: state.textStyle,
+        disabled: isDisabled,
+        inputProps: { "aria-label": t("toolbar.textStyle") },
+        sx: { minWidth: 110, mx: 0.5, fontSize: 14 },
+        onChange: (event) => {
+          const style = event.target.value;
+          const level = RICH_TEXT_HEADING_LEVELS.find((candidate) => headingStyleOf(candidate) === style);
+          (level ? chain().setHeading({ level }) : chain().setParagraph()).run();
+        },
+        children: [
+          /* @__PURE__ */ jsx(MenuItem, { value: PARAGRAPH_STYLE, children: t("toolbar.paragraph") }),
+          RICH_TEXT_HEADING_LEVELS.map((level) => /* @__PURE__ */ jsx(MenuItem, { value: headingStyleOf(level), children: t(`toolbar.${headingStyleOf(level)}`) }, level))
+        ]
+      }
+    ),
+    MARK_BUTTONS.filter(({ feature }) => has(feature)).map(({ feature, mark, Icon, toggle }) => /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        label: t(`toolbar.${feature}`),
+        isActive: state.marks[mark],
+        disabled: isDisabled,
+        onClick: () => toggle(chain()).run(),
+        children: /* @__PURE__ */ jsx(Icon, { fontSize: "small" })
+      },
+      feature
+    )),
+    /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+    BLOCK_BUTTONS.filter(({ feature }) => has(feature)).map(({ feature, node, Icon, toggle }) => /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        label: t(`toolbar.${feature}`),
+        isActive: state.blocks[node],
+        disabled: isDisabled,
+        onClick: () => toggle(chain()).run(),
+        children: /* @__PURE__ */ jsx(Icon, { fontSize: "small" })
+      },
+      feature
+    )),
+    has(RICH_TEXT_FEATURE.link) && /* @__PURE__ */ jsx("span", { ref: linkButtonRef, children: /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        label: t("toolbar.link"),
+        isActive: state.isLink,
+        disabled: isDisabled,
+        onClick: () => setLinkAnchor(linkButtonRef.current),
+        children: /* @__PURE__ */ jsx(InsertLinkIcon, { fontSize: "small" })
+      }
+    ) }),
+    has(RICH_TEXT_FEATURE.align) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+      TEXT_ALIGNMENTS.map(({ value, Icon }) => /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          label: t(`toolbar.align.${value}`),
+          isActive: state.alignment === value,
+          disabled: isDisabled,
+          onClick: () => chain().setTextAlign(value).run(),
+          children: /* @__PURE__ */ jsx(Icon, { fontSize: "small" })
+        },
+        value
+      ))
+    ] }),
+    has(RICH_TEXT_FEATURE.clear) && /* @__PURE__ */ jsx(ToolbarButton, { label: t("toolbar.clear"), disabled: isDisabled, onClick: () => chain().unsetAllMarks().clearNodes().run(), children: /* @__PURE__ */ jsx(FormatClearIcon, { fontSize: "small" }) }),
+    has(RICH_TEXT_FEATURE.history) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } }),
+      /* @__PURE__ */ jsx(ToolbarButton, { label: t("toolbar.undo"), disabled: isDisabled || !state.canUndo, onClick: () => chain().undo().run(), children: /* @__PURE__ */ jsx(UndoIcon, { fontSize: "small" }) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { label: t("toolbar.redo"), disabled: isDisabled || !state.canRedo, onClick: () => chain().redo().run(), children: /* @__PURE__ */ jsx(RedoIcon, { fontSize: "small" }) })
+    ] }),
+    actions,
+    linkAnchor && /* @__PURE__ */ jsx(
+      RichTextLinkPopover,
+      {
+        anchorElement: linkAnchor,
+        initialUrl: state.linkHref,
+        t,
+        onClose: () => setLinkAnchor(null),
+        onSave: (url) => {
+          chain().extendMarkRange("link").setLink({ href: url }).run();
+          setLinkAnchor(null);
+        },
+        onRemove: () => {
+          chain().extendMarkRange("link").unsetLink().run();
+          setLinkAnchor(null);
+        }
+      }
+    )
+  ] });
+}
+export {
+  RichTextToolbar as default
+};
+//# sourceMappingURL=RichTextToolbar.js.map

package/dist/richText/RichTextToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextToolbar.js","sources":["../../src/richText/RichTextToolbar.jsx"],"sourcesContent":["// La barra del editor de texto: estilo (texto, título, subtítulo), negrita, cursiva, subrayado y tachado, listas, cita,\n// código, liga, alineación, quitar el formato y deshacer o rehacer. Solo trae los botones que se piden (features) y cada uno\n// dice si está puesto (aria-pressed) y su nombre al pasar el cursor.\n//\n// OJO: los botones no se llevan el foco al picarlos (onMouseDown sin acción): si se lo llevaran, el texto elegido se\n// perdería antes de darle formato.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useRef, useState} from 'react';\nimport {useEditorState} from '@tiptap/react';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select from '@mui/material/Select';\nimport Tooltip from '@mui/material/Tooltip';\nimport CodeIcon from '@mui/icons-material/Code';\nimport FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';\nimport FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';\nimport FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';\nimport FormatBoldIcon from '@mui/icons-material/FormatBold';\nimport FormatClearIcon from '@mui/icons-material/FormatClear';\nimport FormatItalicIcon from '@mui/icons-material/FormatItalic';\nimport FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';\nimport FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';\nimport FormatQuoteIcon from '@mui/icons-material/FormatQuote';\nimport FormatStrikethroughIcon from '@mui/icons-material/FormatStrikethrough';\nimport FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';\nimport InsertLinkIcon from '@mui/icons-material/InsertLink';\nimport RedoIcon from '@mui/icons-material/Redo';\nimport UndoIcon from '@mui/icons-material/Undo';\n\nimport {RICH_TEXT_HEADING_LEVELS} from '@/richText/richTextExtensions.js';\nimport RichTextLinkPopover from '@/richText/RichTextLinkPopover.jsx';\nimport {RICH_TEXT_FEATURE} from '@/richText/richTextRules.js';\n\n// el estilo del renglón: texto normal o uno de los títulos\nconst PARAGRAPH_STYLE = 'paragraph';\nconst headingStyleOf = (level) => `heading${level}`;\nconst TEXT_ALIGNMENTS = Object.freeze([\n    {value: 'left', Icon: FormatAlignLeftIcon},\n    {value: 'center', Icon: FormatAlignCenterIcon},\n    {value: 'right', Icon: FormatAlignRightIcon},\n]);\n// las marcas que se ponen y se quitan con un botón\nconst MARK_BUTTONS = Object.freeze([\n    {feature: RICH_TEXT_FEATURE.bold, mark: 'bold', Icon: FormatBoldIcon, toggle: (chain) => chain.toggleBold()},\n    {feature: RICH_TEXT_FEATURE.italic, mark: 'italic', Icon: FormatItalicIcon, toggle: (chain) => chain.toggleItalic()},\n    {feature: RICH_TEXT_FEATURE.underline, mark: 'underline', Icon: FormatUnderlinedIcon, toggle: (chain) => chain.toggleUnderline()},\n    {feature: RICH_TEXT_FEATURE.strike, mark: 'strike', Icon: FormatStrikethroughIcon, toggle: (chain) => chain.toggleStrike()},\n]);\n// los bloques que se ponen y se quitan con un botón\nconst BLOCK_BUTTONS = Object.freeze([\n    {feature: RICH_TEXT_FEATURE.bulletList, node: 'bulletList', Icon: FormatListBulletedIcon, toggle: (chain) => chain.toggleBulletList()},\n    {feature: RICH_TEXT_FEATURE.orderedList, node: 'orderedList', Icon: FormatListNumberedIcon, toggle: (chain) => chain.toggleOrderedList()},\n    {feature: RICH_TEXT_FEATURE.blockquote, node: 'blockquote', Icon: FormatQuoteIcon, toggle: (chain) => chain.toggleBlockquote()},\n    {feature: RICH_TEXT_FEATURE.codeBlock, node: 'codeBlock', Icon: CodeIcon, toggle: (chain) => chain.toggleCodeBlock()},\n]);\n\n/**\n * Un botón de la barra: no se lleva el foco, dice si está puesto y su nombre.\n *\n * @param {{label: string, isActive?: boolean, disabled?: boolean, onClick: (event: object) => void, children: import('react').ReactNode}} props\n */\nfunction ToolbarButton({label, isActive, disabled, onClick, children}) {\n    return (\n        <Tooltip title={label}>\n            <span>\n                <IconButton size=\"small\" aria-label={label} aria-pressed={isActive ?? undefined} disabled={disabled} color={isActive ? 'primary' : 'default'}\n                            onMouseDown={(event) => event.preventDefault()} onClick={onClick}\n                            sx={isActive ? {bgcolor: 'action.selected'} : undefined}>\n                    {children}\n                </IconButton>\n            </span>\n        </Tooltip>\n    );\n}\n\n/**\n * @param {object} props\n * @param {import('@tiptap/react').Editor|null} props.editor\n * @param {string[]} props.features\n * @param {boolean} props.disabled\n * @param {(key: string, values?: object) => string} props.t el traductor del editor (namespace richText)\n * @param {import('react').ReactNode} [props.actions] botones del proyecto al final de la barra\n */\nexport default function RichTextToolbar({editor, features, disabled, t, actions}) {\n    const [linkAnchor, setLinkAnchor] = useState(null);\n    const linkButtonRef = useRef(null);\n    const has = (feature) => features.includes(feature);\n    // lo que está puesto donde está el cursor: la barra se pinta otra vez solo cuando eso cambia\n    const state = useEditorState({\n        editor,\n        selector: ({editor: current}) => {\n            if (!current) {\n                return null;\n            }\n            const headingLevel = RICH_TEXT_HEADING_LEVELS.find((level) => current.isActive('heading', {level}));\n            return {\n                marks: Object.fromEntries(MARK_BUTTONS.filter(({feature}) => has(feature)).map(({mark}) => [mark, current.isActive(mark)])),\n                blocks: Object.fromEntries(BLOCK_BUTTONS.filter(({feature}) => has(feature)).map(({node}) => [node, current.isActive(node)])),\n                textStyle: headingLevel ? headingStyleOf(headingLevel) : PARAGRAPH_STYLE,\n                alignment: TEXT_ALIGNMENTS.find(({value}) => current.isActive({textAlign: value}))?.value ?? TEXT_ALIGNMENTS[0].value,\n                isLink: has(RICH_TEXT_FEATURE.link) && current.isActive('link'),\n                linkHref: has(RICH_TEXT_FEATURE.link) ? current.getAttributes('link').href ?? '' : '',\n                canUndo: has(RICH_TEXT_FEATURE.history) && current.can().undo(),\n                canRedo: has(RICH_TEXT_FEATURE.history) && current.can().redo(),\n            };\n        },\n    });\n\n    if (!editor || !state) {\n        return null;\n    }\n    const chain = () => editor.chain().focus();\n    const isDisabled = disabled || !editor.isEditable;\n\n    return (\n        <>\n            {has(RICH_TEXT_FEATURE.textStyle) && (\n                <Select size=\"small\" variant=\"standard\" disableUnderline value={state.textStyle} disabled={isDisabled}\n                        inputProps={{'aria-label': t('toolbar.textStyle')}} sx={{minWidth: 110, mx: 0.5, fontSize: 14}}\n                        onChange={(event) => {\n                            const style = event.target.value;\n                            const level = RICH_TEXT_HEADING_LEVELS.find((candidate) => headingStyleOf(candidate) === style);\n                            (level ? chain().setHeading({level}) : chain().setParagraph()).run();\n                        }}>\n                    <MenuItem value={PARAGRAPH_STYLE}>{t('toolbar.paragraph')}</MenuItem>\n                    {RICH_TEXT_HEADING_LEVELS.map((level) => (\n                        <MenuItem key={level} value={headingStyleOf(level)}>{t(`toolbar.${headingStyleOf(level)}`)}</MenuItem>\n                    ))}\n                </Select>\n            )}\n            {MARK_BUTTONS.filter(({feature}) => has(feature)).map(({feature, mark, Icon, toggle}) => (\n                <ToolbarButton key={feature} label={t(`toolbar.${feature}`)} isActive={state.marks[mark]} disabled={isDisabled}\n                               onClick={() => toggle(chain()).run()}>\n                    <Icon fontSize=\"small\" />\n                </ToolbarButton>\n            ))}\n            <Divider orientation=\"vertical\" flexItem sx={{mx: 0.5}} />\n            {BLOCK_BUTTONS.filter(({feature}) => has(feature)).map(({feature, node, Icon, toggle}) => (\n                <ToolbarButton key={feature} label={t(`toolbar.${feature}`)} isActive={state.blocks[node]} disabled={isDisabled}\n                               onClick={() => toggle(chain()).run()}>\n                    <Icon fontSize=\"small\" />\n                </ToolbarButton>\n            ))}\n            {has(RICH_TEXT_FEATURE.link) && (\n                <span ref={linkButtonRef}>\n                    <ToolbarButton label={t('toolbar.link')} isActive={state.isLink} disabled={isDisabled}\n                                   onClick={() => setLinkAnchor(linkButtonRef.current)}>\n                        <InsertLinkIcon fontSize=\"small\" />\n                    </ToolbarButton>\n                </span>\n            )}\n            {has(RICH_TEXT_FEATURE.align) && (\n                <>\n                    <Divider orientation=\"vertical\" flexItem sx={{mx: 0.5}} />\n                    {TEXT_ALIGNMENTS.map(({value, Icon}) => (\n                        <ToolbarButton key={value} label={t(`toolbar.align.${value}`)} isActive={state.alignment === value} disabled={isDisabled}\n                                       onClick={() => chain().setTextAlign(value).run()}>\n                            <Icon fontSize=\"small\" />\n                        </ToolbarButton>\n                    ))}\n                </>\n            )}\n            {has(RICH_TEXT_FEATURE.clear) && (\n                <ToolbarButton label={t('toolbar.clear')} disabled={isDisabled} onClick={() => chain().unsetAllMarks().clearNodes().run()}>\n                    <FormatClearIcon fontSize=\"small\" />\n                </ToolbarButton>\n            )}\n            {has(RICH_TEXT_FEATURE.history) && (\n                <>\n                    <Divider orientation=\"vertical\" flexItem sx={{mx: 0.5}} />\n                    <ToolbarButton label={t('toolbar.undo')} disabled={isDisabled || !state.canUndo} onClick={() => chain().undo().run()}>\n                        <UndoIcon fontSize=\"small\" />\n                    </ToolbarButton>\n                    <ToolbarButton label={t('toolbar.redo')} disabled={isDisabled || !state.canRedo} onClick={() => chain().redo().run()}>\n                        <RedoIcon fontSize=\"small\" />\n                    </ToolbarButton>\n                </>\n            )}\n            {actions}\n            {linkAnchor && (\n                <RichTextLinkPopover anchorElement={linkAnchor} initialUrl={state.linkHref} t={t}\n                                     onClose={() => setLinkAnchor(null)}\n                                     onSave={(url) => {\n                                         chain().extendMarkRange('link').setLink({href: url}).run();\n                                         setLinkAnchor(null);\n                                     }}\n                                     onRemove={() => {\n                                         chain().extendMarkRange('link').unsetLink().run();\n                                         setLinkAnchor(null);\n                                     }} />\n            )}\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/richText/RichTextView.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEditor, EditorContent } from "@tiptap/react";
+import Box from "@mui/material/Box";
+import { richTextContentSxOf } from "./richTextContentSx.js";
+import { richTextExtensionsOf } from "./richTextExtensions.js";
+import { DEFAULT_RICH_TEXT_FEATURES } from "./richTextRules.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const THEME_NAME = "CalcitaRichTextView";
+const ViewRoot = piecePart(THEME_NAME, "Root", Box);
+function RichTextViewContent(props) {
+  const { value, features = DEFAULT_RICH_TEXT_FEATURES, extensions, sx, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const editor = useEditor({
+    extensions: richTextExtensionsOf({ features, extensions }),
+    content: value ?? "",
+    editable: false,
+    immediatelyRender: false
+  }, [value, features.join(",")]);
+  return /* @__PURE__ */ jsx(ViewRoot, { ownSx: richTextContentSxOf, sx, children: /* @__PURE__ */ jsx(EditorContent, { editor }) });
+}
+const RichTextView = withPieceSlots(RichTextViewContent, THEME_NAME);
+export {
+  RichTextView as default
+};
+//# sourceMappingURL=RichTextView.js.map

package/dist/richText/RichTextView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextView.js","sources":["../../src/richText/RichTextView.jsx"],"sourcesContent":["// Enseña el texto con formato que guardó RichTextEditor, sin poder editarlo. Pasa por el mismo esquema del editor: solo entra\n// lo que el editor entiende (párrafos, títulos, listas, ligas seguras…) y lo demás se queda afuera. Un <script>, un\n// onclick o una liga javascript: pegados en el HTML no llegan a la página (XSS), sin otra librería para limpiarlo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaRichTextView con defaultProps y\n// styleOverrides de su parte root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {EditorContent, useEditor} from '@tiptap/react';\nimport Box from '@mui/material/Box';\n\nimport {richTextContentSxOf} from '@/richText/richTextContentSx.js';\nimport {richTextExtensionsOf} from '@/richText/richTextExtensions.js';\nimport {DEFAULT_RICH_TEXT_FEATURES} from '@/richText/richTextRules.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaRichTextView)\nconst THEME_NAME = 'CalcitaRichTextView';\nconst ViewRoot = piecePart(THEME_NAME, 'Root', Box);\n\n/**\n * @param {object} props\n * @param {string|null|undefined} props.value el HTML guardado\n * @param {string[]} [props.features] lo que se deja pasar (por omisión, lo de un editor completo)\n * @param {Array<object>} [props.extensions] las extensiones de Tiptap del proyecto (las mismas que tiene su editor)\n * @param {object} [props.sx]\n */\nfunction RichTextViewContent(props) {\n    const {value, features = DEFAULT_RICH_TEXT_FEATURES, extensions, sx, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const editor = useEditor({\n        extensions: richTextExtensionsOf({features, extensions}),\n        content: value ?? '',\n        editable: false,\n        immediatelyRender: false,\n    }, [value, features.join(',')]);\n\n    return (\n        <ViewRoot ownSx={richTextContentSxOf} sx={sx}>\n            <EditorContent editor={editor} />\n        </ViewRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst RichTextView = withPieceSlots(RichTextViewContent, THEME_NAME);\nexport default RichTextView;\n"],"names":[],"mappings":";;;;;;;;;AAkBA,MAAM,aAAa;AACnB,MAAM,WAAW,UAAU,YAAY,QAAQ,GAAG;AASlD,SAAS,oBAAoB,OAAO;AAChC,QAAM,EAAC,OAAO,WAAW,4BAA4B,YAAY,IAAI,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACvH,mBAAiB,YAAY,YAAY;AACzC,QAAM,SAAS,UAAU;AAAA,IACrB,YAAY,qBAAqB,EAAC,UAAU,YAAW;AAAA,IACvD,SAAS,SAAS;AAAA,IAClB,UAAU;AAAA,IACV,mBAAmB;AAAA,EAAA,GACpB,CAAC,OAAO,SAAS,KAAK,GAAG,CAAC,CAAC;AAE9B,SACI,oBAAC,YAAS,OAAO,qBAAqB,IAClC,UAAA,oBAAC,eAAA,EAAc,QAAgB,EAAA,CACnC;AAER;AAGA,MAAM,eAAe,eAAe,qBAAqB,UAAU;"}

package/dist/richText/richTextContentSx.js

@@ -0,0 +1,42 @@
+function richTextContentSxOf(theme) {
+  const palette = (theme.vars ?? theme).palette;
+  return {
+    "& .tiptap": {
+      outline: "none",
+      ...theme.typography.body1,
+      "& > :first-of-type": { mt: 0 },
+      "& > :last-child": { mb: 0 },
+      "& p": { my: 1 },
+      "& h2": { ...theme.typography.h6, mt: 2, mb: 1 },
+      "& h3": { ...theme.typography.subtitle1, fontWeight: 600, mt: 1.5, mb: 0.5 },
+      "& ul, & ol": { pl: 3, my: 1 },
+      "& li > p": { my: 0.25 },
+      "& blockquote": { borderLeft: 3, borderColor: "divider", pl: 2, ml: 0, my: 1.5, color: "text.secondary" },
+      "& pre": {
+        bgcolor: "action.hover",
+        borderRadius: 1,
+        px: 2,
+        py: 1.5,
+        my: 1.5,
+        overflowX: "auto",
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        fontSize: "0.875em"
+      },
+      "& code": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: "0.9em", bgcolor: "action.hover", borderRadius: 0.5, px: 0.5 },
+      "& pre code": { bgcolor: "transparent", p: 0 },
+      "& a": { color: palette.primary.main, textDecorationThickness: 1 },
+      // el texto de ejemplo con el editor vacío (Placeholder de Tiptap)
+      "& p.is-editor-empty:first-of-type::before": {
+        content: "attr(data-placeholder)",
+        color: "text.disabled",
+        float: "left",
+        height: 0,
+        pointerEvents: "none"
+      }
+    }
+  };
+}
+export {
+  richTextContentSxOf
+};
+//# sourceMappingURL=richTextContentSx.js.map

package/dist/richText/richTextContentSx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"richTextContentSx.js","sources":["../../src/richText/richTextContentSx.js"],"sourcesContent":["// Cómo se ve el texto con formato, dentro del editor y en la vista de solo lectura: párrafos, títulos, listas, cita, código y\n// ligas con los colores y la tipografía del tema. Uno solo para los dos: lo que se escribe se ve igual a como se guarda.\n//\n// Genérico del paquete: function (regla de la casa).\n\n/**\n * El sx del contenido (.tiptap es la caja que edita Tiptap; en la vista es la misma, sin editar).\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function richTextContentSxOf(theme) {\n    const palette = (theme.vars ?? theme).palette;\n    return {\n        '& .tiptap': {\n            outline: 'none',\n            ...theme.typography.body1,\n            '& > :first-of-type': {mt: 0},\n            '& > :last-child': {mb: 0},\n            '& p': {my: 1},\n            '& h2': {...theme.typography.h6, mt: 2, mb: 1},\n            '& h3': {...theme.typography.subtitle1, fontWeight: 600, mt: 1.5, mb: 0.5},\n            '& ul, & ol': {pl: 3, my: 1},\n            '& li > p': {my: 0.25},\n            '& blockquote': {borderLeft: 3, borderColor: 'divider', pl: 2, ml: 0, my: 1.5, color: 'text.secondary'},\n            '& pre': {\n                bgcolor: 'action.hover', borderRadius: 1, px: 2, py: 1.5, my: 1.5, overflowX: 'auto',\n                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '0.875em',\n            },\n            '& code': {fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '0.9em', bgcolor: 'action.hover', borderRadius: 0.5, px: 0.5},\n            '& pre code': {bgcolor: 'transparent', p: 0},\n            '& a': {color: palette.primary.main, textDecorationThickness: 1},\n            // el texto de ejemplo con el editor vacío (Placeholder de Tiptap)\n            '& p.is-editor-empty:first-of-type::before': {\n                content: 'attr(data-placeholder)', color: 'text.disabled', float: 'left', height: 0, pointerEvents: 'none',\n            },\n        },\n    };\n}\n"],"names":[],"mappings":"AAWO,SAAS,oBAAoB,OAAO;AACvC,QAAM,WAAW,MAAM,QAAQ,OAAO;AACtC,SAAO;AAAA,IACH,aAAa;AAAA,MACT,SAAS;AAAA,MACT,GAAG,MAAM,WAAW;AAAA,MACpB,sBAAsB,EAAC,IAAI,EAAC;AAAA,MAC5B,mBAAmB,EAAC,IAAI,EAAC;AAAA,MACzB,OAAO,EAAC,IAAI,EAAC;AAAA,MACb,QAAQ,EAAC,GAAG,MAAM,WAAW,IAAI,IAAI,GAAG,IAAI,EAAC;AAAA,MAC7C,QAAQ,EAAC,GAAG,MAAM,WAAW,WAAW,YAAY,KAAK,IAAI,KAAK,IAAI,IAAG;AAAA,MACzE,cAAc,EAAC,IAAI,GAAG,IAAI,EAAC;AAAA,MAC3B,YAAY,EAAC,IAAI,KAAI;AAAA,MACrB,gBAAgB,EAAC,YAAY,GAAG,aAAa,WAAW,IAAI,GAAG,IAAI,GAAG,IAAI,KAAK,OAAO,iBAAgB;AAAA,MACtG,SAAS;AAAA,QACL,SAAS;AAAA,QAAgB,cAAc;AAAA,QAAG,IAAI;AAAA,QAAG,IAAI;AAAA,QAAK,IAAI;AAAA,QAAK,WAAW;AAAA,QAC9E,YAAY;AAAA,QAAkD,UAAU;AAAA,MACxF;AAAA,MACY,UAAU,EAAC,YAAY,kDAAkD,UAAU,SAAS,SAAS,gBAAgB,cAAc,KAAK,IAAI,IAAG;AAAA,MAC/I,cAAc,EAAC,SAAS,eAAe,GAAG,EAAC;AAAA,MAC3C,OAAO,EAAC,OAAO,QAAQ,QAAQ,MAAM,yBAAyB,EAAC;AAAA;AAAA,MAE/D,6CAA6C;AAAA,QACzC,SAAS;AAAA,QAA0B,OAAO;AAAA,QAAiB,OAAO;AAAA,QAAQ,QAAQ;AAAA,QAAG,eAAe;AAAA,MACpH;AAAA,IACA;AAAA,EACA;AACA;"}

package/dist/richText/richTextExtensions.js

@@ -0,0 +1,44 @@
+import TextAlign from "@tiptap/extension-text-align";
+import { Placeholder, CharacterCount } from "@tiptap/extensions";
+import StarterKit from "@tiptap/starter-kit";
+import { RICH_TEXT_FEATURE, isSafeLinkUrl } from "./richTextRules.js";
+const RICH_TEXT_HEADING_LEVELS = Object.freeze([2, 3]);
+const ALIGNABLE_NODES = Object.freeze(["heading", "paragraph"]);
+function richTextExtensionsOf({ features, placeholder, maxLength, extensions = [] }) {
+  const has = (feature) => features.includes(feature);
+  const onlyIf = (feature, options = {}) => has(feature) ? options : false;
+  return [
+    StarterKit.configure({
+      heading: onlyIf(RICH_TEXT_FEATURE.textStyle, { levels: [...RICH_TEXT_HEADING_LEVELS] }),
+      bold: onlyIf(RICH_TEXT_FEATURE.bold),
+      italic: onlyIf(RICH_TEXT_FEATURE.italic),
+      underline: onlyIf(RICH_TEXT_FEATURE.underline),
+      strike: onlyIf(RICH_TEXT_FEATURE.strike),
+      bulletList: onlyIf(RICH_TEXT_FEATURE.bulletList),
+      orderedList: onlyIf(RICH_TEXT_FEATURE.orderedList),
+      // sin listas tampoco hay renglones de lista
+      listItem: has(RICH_TEXT_FEATURE.bulletList) || has(RICH_TEXT_FEATURE.orderedList) ? {} : false,
+      blockquote: onlyIf(RICH_TEXT_FEATURE.blockquote),
+      codeBlock: onlyIf(RICH_TEXT_FEATURE.codeBlock),
+      // el código dentro de un renglón lo pide solo el bloque de código
+      code: onlyIf(RICH_TEXT_FEATURE.codeBlock),
+      undoRedo: onlyIf(RICH_TEXT_FEATURE.history),
+      link: onlyIf(RICH_TEXT_FEATURE.link, {
+        openOnClick: false,
+        autolink: true,
+        defaultProtocol: "https",
+        isAllowedUri: (url) => isSafeLinkUrl(url),
+        HTMLAttributes: { rel: "noopener noreferrer nofollow", target: "_blank" }
+      })
+    }),
+    ...has(RICH_TEXT_FEATURE.align) ? [TextAlign.configure({ types: [...ALIGNABLE_NODES] })] : [],
+    ...placeholder ? [Placeholder.configure({ placeholder })] : [],
+    CharacterCount.configure({ limit: maxLength ?? null }),
+    ...extensions
+  ];
+}
+export {
+  RICH_TEXT_HEADING_LEVELS,
+  richTextExtensionsOf
+};
+//# sourceMappingURL=richTextExtensions.js.map

package/dist/richText/richTextExtensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"richTextExtensions.js","sources":["../../src/richText/richTextExtensions.js"],"sourcesContent":["// Las extensiones de Tiptap del editor de la casa, armadas según los botones que se piden (features). Lo que no se pide se\n// quita también del documento: si la barra no trae código, un bloque de código pegado llega como texto normal.\n//\n// Las ligas solo con protocolos seguros (richTextRules.js) y con rel=\"noopener noreferrer nofollow\": la página que se abre no\n// puede tocar la de la app ni sumar puntos de búsqueda.\n//\n// Genérico del paquete: function (regla de la casa).\nimport TextAlign from '@tiptap/extension-text-align';\nimport {CharacterCount, Placeholder} from '@tiptap/extensions';\nimport StarterKit from '@tiptap/starter-kit';\n\nimport {RICH_TEXT_FEATURE, isSafeLinkUrl} from '@/richText/richTextRules.js';\n\n// los títulos que ofrece la barra: el de la página ya es h1, el texto va de h2 para abajo\nexport const RICH_TEXT_HEADING_LEVELS = Object.freeze([2, 3]);\nconst ALIGNABLE_NODES = Object.freeze(['heading', 'paragraph']);\n\n/**\n * @param {object} options\n * @param {string[]} options.features los botones de la barra (RICH_TEXT_FEATURE)\n * @param {string} [options.placeholder] ya traducido: lo que se ve con el editor vacío\n * @param {number} [options.maxLength] el tope de caracteres; sin él, sin tope\n * @param {Array<object>} [options.extensions] extensiones de Tiptap del proyecto, al final\n * @returns {Array<object>}\n */\nexport function richTextExtensionsOf({features, placeholder, maxLength, extensions = []}) {\n    const has = (feature) => features.includes(feature);\n    const onlyIf = (feature, options = {}) => (has(feature) ? options : false);\n\n    return [\n        StarterKit.configure({\n            heading: onlyIf(RICH_TEXT_FEATURE.textStyle, {levels: [...RICH_TEXT_HEADING_LEVELS]}),\n            bold: onlyIf(RICH_TEXT_FEATURE.bold),\n            italic: onlyIf(RICH_TEXT_FEATURE.italic),\n            underline: onlyIf(RICH_TEXT_FEATURE.underline),\n            strike: onlyIf(RICH_TEXT_FEATURE.strike),\n            bulletList: onlyIf(RICH_TEXT_FEATURE.bulletList),\n            orderedList: onlyIf(RICH_TEXT_FEATURE.orderedList),\n            // sin listas tampoco hay renglones de lista\n            listItem: has(RICH_TEXT_FEATURE.bulletList) || has(RICH_TEXT_FEATURE.orderedList) ? {} : false,\n            blockquote: onlyIf(RICH_TEXT_FEATURE.blockquote),\n            codeBlock: onlyIf(RICH_TEXT_FEATURE.codeBlock),\n            // el código dentro de un renglón lo pide solo el bloque de código\n            code: onlyIf(RICH_TEXT_FEATURE.codeBlock),\n            undoRedo: onlyIf(RICH_TEXT_FEATURE.history),\n            link: onlyIf(RICH_TEXT_FEATURE.link, {\n                openOnClick: false,\n                autolink: true,\n                defaultProtocol: 'https',\n                isAllowedUri: (url) => isSafeLinkUrl(url),\n                HTMLAttributes: {rel: 'noopener noreferrer nofollow', target: '_blank'},\n            }),\n        }),\n        ...(has(RICH_TEXT_FEATURE.align) ? [TextAlign.configure({types: [...ALIGNABLE_NODES]})] : []),\n        ...(placeholder ? [Placeholder.configure({placeholder})] : []),\n        CharacterCount.configure({limit: maxLength ?? null}),\n        ...extensions,\n    ];\n}\n"],"names":[],"mappings":";;;;AAcY,MAAC,2BAA2B,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;AAC5D,MAAM,kBAAkB,OAAO,OAAO,CAAC,WAAW,WAAW,CAAC;AAUvD,SAAS,qBAAqB,EAAC,UAAU,aAAa,WAAW,aAAa,CAAA,EAAE,GAAG;AACtF,QAAM,MAAM,CAAC,YAAY,SAAS,SAAS,OAAO;AAClD,QAAM,SAAS,CAAC,SAAS,UAAU,CAAA,MAAQ,IAAI,OAAO,IAAI,UAAU;AAEpE,SAAO;AAAA,IACH,WAAW,UAAU;AAAA,MACjB,SAAS,OAAO,kBAAkB,WAAW,EAAC,QAAQ,CAAC,GAAG,wBAAwB,EAAC,CAAC;AAAA,MACpF,MAAM,OAAO,kBAAkB,IAAI;AAAA,MACnC,QAAQ,OAAO,kBAAkB,MAAM;AAAA,MACvC,WAAW,OAAO,kBAAkB,SAAS;AAAA,MAC7C,QAAQ,OAAO,kBAAkB,MAAM;AAAA,MACvC,YAAY,OAAO,kBAAkB,UAAU;AAAA,MAC/C,aAAa,OAAO,kBAAkB,WAAW;AAAA;AAAA,MAEjD,UAAU,IAAI,kBAAkB,UAAU,KAAK,IAAI,kBAAkB,WAAW,IAAI,CAAA,IAAK;AAAA,MACzF,YAAY,OAAO,kBAAkB,UAAU;AAAA,MAC/C,WAAW,OAAO,kBAAkB,SAAS;AAAA;AAAA,MAE7C,MAAM,OAAO,kBAAkB,SAAS;AAAA,MACxC,UAAU,OAAO,kBAAkB,OAAO;AAAA,MAC1C,MAAM,OAAO,kBAAkB,MAAM;AAAA,QACjC,aAAa;AAAA,QACb,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,cAAc,CAAC,QAAQ,cAAc,GAAG;AAAA,QACxC,gBAAgB,EAAC,KAAK,gCAAgC,QAAQ,SAAQ;AAAA,MACtF,CAAa;AAAA,IACb,CAAS;AAAA,IACD,GAAI,IAAI,kBAAkB,KAAK,IAAI,CAAC,UAAU,UAAU,EAAC,OAAO,CAAC,GAAG,eAAe,EAAC,CAAC,CAAC,IAAI,CAAA;AAAA,IAC1F,GAAI,cAAc,CAAC,YAAY,UAAU,EAAC,YAAW,CAAC,CAAC,IAAI;IAC3D,eAAe,UAAU,EAAC,OAAO,aAAa,KAAI,CAAC;AAAA,IACnD,GAAG;AAAA,EACX;AACA;"}

package/dist/richText/richTextRules.js

@@ -0,0 +1,46 @@
+const RICH_TEXT_FEATURE = Object.freeze({
+  textStyle: "textStyle",
+  bold: "bold",
+  italic: "italic",
+  underline: "underline",
+  strike: "strike",
+  bulletList: "bulletList",
+  orderedList: "orderedList",
+  blockquote: "blockquote",
+  codeBlock: "codeBlock",
+  link: "link",
+  align: "align",
+  clear: "clear",
+  history: "history"
+});
+const DEFAULT_RICH_TEXT_FEATURES = Object.freeze(Object.values(RICH_TEXT_FEATURE));
+const SAFE_LINK_PROTOCOLS = Object.freeze(["https", "http", "mailto", "tel"]);
+const PROTOCOL_PATTERN = /^([a-z][a-z\d+.-]*):/i;
+const BARE_DOMAIN_PATTERN = /^[\w-]+(\.[\w-]+)+(\/\S*)?$/;
+const EMPTY_DOCUMENT_PATTERN = /^\s*(<p>\s*<\/p>\s*)*$/;
+function linkUrlOf(typedUrl) {
+  const url = (typedUrl ?? "").trim();
+  if (!url) {
+    return null;
+  }
+  const protocol = PROTOCOL_PATTERN.exec(url)?.[1]?.toLowerCase();
+  if (protocol) {
+    return SAFE_LINK_PROTOCOLS.includes(protocol) ? url : null;
+  }
+  return BARE_DOMAIN_PATTERN.test(url) ? `https://${url}` : null;
+}
+function isSafeLinkUrl(url) {
+  return linkUrlOf(url) !== null;
+}
+function normalizedHtmlOf(html) {
+  return !html || EMPTY_DOCUMENT_PATTERN.test(html) ? "" : html;
+}
+export {
+  DEFAULT_RICH_TEXT_FEATURES,
+  RICH_TEXT_FEATURE,
+  SAFE_LINK_PROTOCOLS,
+  isSafeLinkUrl,
+  linkUrlOf,
+  normalizedHtmlOf
+};
+//# sourceMappingURL=richTextRules.js.map

package/dist/richText/richTextRules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"richTextRules.js","sources":["../../src/richText/richTextRules.js"],"sourcesContent":["// Lo que el editor de texto decide sin pantalla: qué botones trae (RICH_TEXT_FEATURE), qué dirección de liga se acepta y\n// cómo queda el texto vacío.\n//\n// Ligas: solo https, http, mailto y tel. Una dirección sin protocolo («calcita.mx») se completa con https://. Lo demás\n// (javascript:, data:, file:) se rechaza: una liga así ejecuta código al picarla (XSS).\n//\n// Vacío: el editor deja «<p></p>» cuando se borra todo; al formulario llega '' para que required() funcione.\n//\n// Puro (sin React): se prueba con node (richTextRules.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\n/** Los botones que puede traer la barra del editor. */\nexport const RICH_TEXT_FEATURE = Object.freeze({\n    textStyle: 'textStyle',\n    bold: 'bold',\n    italic: 'italic',\n    underline: 'underline',\n    strike: 'strike',\n    bulletList: 'bulletList',\n    orderedList: 'orderedList',\n    blockquote: 'blockquote',\n    codeBlock: 'codeBlock',\n    link: 'link',\n    align: 'align',\n    clear: 'clear',\n    history: 'history',\n});\n\n/** Los de siempre: todos. Un editor más sencillo pasa su lista (features={[RICH_TEXT_FEATURE.bold, …]}). */\nexport const DEFAULT_RICH_TEXT_FEATURES = Object.freeze(Object.values(RICH_TEXT_FEATURE));\n\n/** Los protocolos que puede llevar una liga. */\nexport const SAFE_LINK_PROTOCOLS = Object.freeze(['https', 'http', 'mailto', 'tel']);\n\nconst PROTOCOL_PATTERN = /^([a-z][a-z\\d+.-]*):/i;\n// «calcita.mx», «www.ejemplo.com/ruta»: un dominio sin protocolo\nconst BARE_DOMAIN_PATTERN = /^[\\w-]+(\\.[\\w-]+)+(\\/\\S*)?$/;\nconst EMPTY_DOCUMENT_PATTERN = /^\\s*(<p>\\s*<\\/p>\\s*)*$/;\n\n/**\n * La dirección de una liga lista para guardarse, o null si no se acepta.\n *\n * @param {string|null|undefined} typedUrl lo que escribió la persona\n * @returns {string|null}\n */\nexport function linkUrlOf(typedUrl) {\n    const url = (typedUrl ?? '').trim();\n    if (!url) {\n        return null;\n    }\n    const protocol = PROTOCOL_PATTERN.exec(url)?.[1]?.toLowerCase();\n    if (protocol) {\n        return SAFE_LINK_PROTOCOLS.includes(protocol) ? url : null;\n    }\n    return BARE_DOMAIN_PATTERN.test(url) ? `https://${url}` : null;\n}\n\n/**\n * ¿Se acepta esta dirección como liga? (lo que pide la extensión de ligas del editor)\n *\n * @param {string} url\n * @returns {boolean}\n */\nexport function isSafeLinkUrl(url) {\n    return linkUrlOf(url) !== null;\n}\n\n/**\n * El HTML del editor como se guarda: '' si no hay nada escrito.\n *\n * @param {string|null|undefined} html\n * @returns {string}\n */\nexport function normalizedHtmlOf(html) {\n    return !html || EMPTY_DOCUMENT_PATTERN.test(html) ? '' : html;\n}\n"],"names":[],"mappings":"AAaY,MAAC,oBAAoB,OAAO,OAAO;AAAA,EAC3C,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACb,CAAC;AAGW,MAAC,6BAA6B,OAAO,OAAO,OAAO,OAAO,iBAAiB,CAAC;AAG5E,MAAC,sBAAsB,OAAO,OAAO,CAAC,SAAS,QAAQ,UAAU,KAAK,CAAC;AAEnF,MAAM,mBAAmB;AAEzB,MAAM,sBAAsB;AAC5B,MAAM,yBAAyB;AAQxB,SAAS,UAAU,UAAU;AAChC,QAAM,OAAO,YAAY,IAAI,KAAI;AACjC,MAAI,CAAC,KAAK;AACN,WAAO;AAAA,EACX;AACA,QAAM,WAAW,iBAAiB,KAAK,GAAG,IAAI,CAAC,GAAG,YAAW;AAC7D,MAAI,UAAU;AACV,WAAO,oBAAoB,SAAS,QAAQ,IAAI,MAAM;AAAA,EAC1D;AACA,SAAO,oBAAoB,KAAK,GAAG,IAAI,WAAW,GAAG,KAAK;AAC9D;AAQO,SAAS,cAAc,KAAK;AAC/B,SAAO,UAAU,GAAG,MAAM;AAC9B;AAQO,SAAS,iBAAiB,MAAM;AACnC,SAAO,CAAC,QAAQ,uBAAuB,KAAK,IAAI,IAAI,KAAK;AAC7D;"}

package/dist/security/ActivityLog.js

@@ -21,7 +21,7 @@ import SyncLockOutlinedIcon from "@mui/icons-material/SyncLockOutlined";
 import { useFormatters } from "../toolkit/useFormatters.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import SectionCard from "../ui/layout/SectionCard.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaActivityLog";
 const ActivityItemIcon = piecePart(THEME_NAME, "ItemIcon", ListItemIcon);
@@ -53,7 +53,7 @@ const EVENT_LOOK = Object.freeze({
 });
 const DEFAULT_LOOK = Object.freeze({ Icon: EventNoteOutlinedIcon });
 const LOADING_HEIGHT_PIXELS = 160;
-function ActivityLog(props) {
+function ActivityLogContent(props) {
   const { events, error = null, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("security", texts);
@@ -79,6 +79,7 @@ function ActivityLog(props) {
     }) })
   ] }) });
 }
+const ActivityLog = withPieceSlots(ActivityLogContent, THEME_NAME);
 export {
   ACCOUNT_EVENT_KIND,
   ActivityLog as default

package/dist/security/ActivityLog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityLog.js","sources":["../../src/security/ActivityLog.jsx"],"sourcesContent":["// La bitácora de la cuenta: lo último que pasó (entró, contraseña equivocada, cambió su contraseña, activó la verificación,\n// agregó una llave…), con la hora, el equipo y la red a medias. Para que la persona reconozca lo que no fue ella.\n//\n// Cada evento llega con su tipo (kind) y el texto sale de los textos del paquete (security:activity.kinds.<kind>); un tipo\n// propio del proyecto trae su texto en description.\n//\n//   <ActivityLog events={events} />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaActivityLog con defaultProps y\n// styleOverrides de sus partes: itemIcon.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Alert from '@mui/material/Alert';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';\nimport EventNoteOutlinedIcon from '@mui/icons-material/EventNoteOutlined';\nimport FingerprintOutlinedIcon from '@mui/icons-material/FingerprintOutlined';\nimport KeyOutlinedIcon from '@mui/icons-material/KeyOutlined';\nimport LoginOutlinedIcon from '@mui/icons-material/LoginOutlined';\nimport LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';\nimport PasswordOutlinedIcon from '@mui/icons-material/PasswordOutlined';\nimport PhonelinkLockOutlinedIcon from '@mui/icons-material/PhonelinkLockOutlined';\nimport PhonelinkEraseOutlinedIcon from '@mui/icons-material/PhonelinkEraseOutlined';\nimport SyncLockOutlinedIcon from '@mui/icons-material/SyncLockOutlined';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport SectionCard from '@/ui/layout/SectionCard.jsx';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaActivityLog)\nconst THEME_NAME = 'CalcitaActivityLog';\nconst ActivityItemIcon = piecePart(THEME_NAME, 'ItemIcon', ListItemIcon);\n\n/** Los tipos de evento que el paquete conoce, con su texto en security:activity.kinds. */\nexport const ACCOUNT_EVENT_KIND = Object.freeze({\n    signedIn: 'signedIn',\n    signInFailed: 'signInFailed',\n    signedOut: 'signedOut',\n    passwordChanged: 'passwordChanged',\n    twoStepEnabled: 'twoStepEnabled',\n    twoStepDisabled: 'twoStepDisabled',\n    passkeyAdded: 'passkeyAdded',\n    passkeyRemoved: 'passkeyRemoved',\n    recoveryCodesGenerated: 'recoveryCodesGenerated',\n    recoveryCodeUsed: 'recoveryCodeUsed',\n    sessionsClosed: 'sessionsClosed',\n});\n\n// el ícono de cada tipo, y en rojo lo que pide atención (un intento con contraseña equivocada, quitar protección)\nconst EVENT_LOOK = Object.freeze({\n    [ACCOUNT_EVENT_KIND.signedIn]: {Icon: LoginOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.signInFailed]: {Icon: CancelOutlinedIcon, color: 'error'},\n    [ACCOUNT_EVENT_KIND.signedOut]: {Icon: LogoutOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.passwordChanged]: {Icon: PasswordOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.twoStepEnabled]: {Icon: PhonelinkLockOutlinedIcon, color: 'success'},\n    [ACCOUNT_EVENT_KIND.twoStepDisabled]: {Icon: PhonelinkEraseOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.passkeyAdded]: {Icon: FingerprintOutlinedIcon, color: 'success'},\n    [ACCOUNT_EVENT_KIND.passkeyRemoved]: {Icon: FingerprintOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.recoveryCodesGenerated]: {Icon: KeyOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.recoveryCodeUsed]: {Icon: KeyOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.sessionsClosed]: {Icon: SyncLockOutlinedIcon},\n});\nconst DEFAULT_LOOK = Object.freeze({Icon: EventNoteOutlinedIcon});\nconst LOADING_HEIGHT_PIXELS = 160;\n\n/**\n * @param {object} props\n * @param {Array<{id: string, kind: string, occurredAt: string, device?: string|null, network?: string|null, description?: string}>|null} props.events\n *     del más nuevo al más viejo; null mientras llegan\n * @param {string|null} [props.error] ya traducido si no se pudieron traer\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nexport default function ActivityLog(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaActivityLog.defaultProps) y encima lo que llega aquí\n    const {events, error = null, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('security', texts);\n    const {formatDateTime} = useFormatters();\n\n    return (\n        <SectionCard title={t('activity.title')}>\n            <Stack spacing={2}>\n                <Typography variant=\"body2\" color=\"text.secondary\">{t('activity.description')}</Typography>\n                {error && <Alert severity=\"error\">{error}</Alert>}\n                {!events && !error && <Skeleton variant=\"rounded\" height={LOADING_HEIGHT_PIXELS} />}\n                {events?.length === 0 && <Typography variant=\"body2\" color=\"text.secondary\">{t('activity.empty')}</Typography>}\n                {events?.length > 0 && (\n                    <List dense disablePadding>\n                        {events.map((event) => {\n                            const look = EVENT_LOOK[event.kind] ?? DEFAULT_LOOK;\n                            const where = event.device && event.network ? ` · ${t('activity.from', {device: event.device, network: event.network})}` : '';\n                            return (\n                                <ListItem key={event.id} disableGutters>\n                                    <ActivityItemIcon ownSx={{minWidth: 36}}><look.Icon fontSize=\"small\" color={look.color ?? 'action'} /></ActivityItemIcon>\n                                    <ListItemText primary={event.description ?? t(`activity.kinds.${event.kind}`)}\n                                                  secondary={`${formatDateTime(event.occurredAt)}${where}`} />\n                                </ListItem>\n                            );\n                        })}\n                    </List>\n                )}\n            </Stack>\n        </SectionCard>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActivityLog.js","sources":["../../src/security/ActivityLog.jsx"],"sourcesContent":["// La bitácora de la cuenta: lo último que pasó (entró, contraseña equivocada, cambió su contraseña, activó la verificación,\n// agregó una llave…), con la hora, el equipo y la red a medias. Para que la persona reconozca lo que no fue ella.\n//\n// Cada evento llega con su tipo (kind) y el texto sale de los textos del paquete (security:activity.kinds.<kind>); un tipo\n// propio del proyecto trae su texto en description.\n//\n//   <ActivityLog events={events} />\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaActivityLog con defaultProps y\n// styleOverrides de sus partes: itemIcon.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Alert from '@mui/material/Alert';\nimport List from '@mui/material/List';\nimport ListItem from '@mui/material/ListItem';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Skeleton from '@mui/material/Skeleton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';\nimport EventNoteOutlinedIcon from '@mui/icons-material/EventNoteOutlined';\nimport FingerprintOutlinedIcon from '@mui/icons-material/FingerprintOutlined';\nimport KeyOutlinedIcon from '@mui/icons-material/KeyOutlined';\nimport LoginOutlinedIcon from '@mui/icons-material/LoginOutlined';\nimport LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';\nimport PasswordOutlinedIcon from '@mui/icons-material/PasswordOutlined';\nimport PhonelinkLockOutlinedIcon from '@mui/icons-material/PhonelinkLockOutlined';\nimport PhonelinkEraseOutlinedIcon from '@mui/icons-material/PhonelinkEraseOutlined';\nimport SyncLockOutlinedIcon from '@mui/icons-material/SyncLockOutlined';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport SectionCard from '@/ui/layout/SectionCard.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaActivityLog)\nconst THEME_NAME = 'CalcitaActivityLog';\nconst ActivityItemIcon = piecePart(THEME_NAME, 'ItemIcon', ListItemIcon);\n\n/** Los tipos de evento que el paquete conoce, con su texto en security:activity.kinds. */\nexport const ACCOUNT_EVENT_KIND = Object.freeze({\n    signedIn: 'signedIn',\n    signInFailed: 'signInFailed',\n    signedOut: 'signedOut',\n    passwordChanged: 'passwordChanged',\n    twoStepEnabled: 'twoStepEnabled',\n    twoStepDisabled: 'twoStepDisabled',\n    passkeyAdded: 'passkeyAdded',\n    passkeyRemoved: 'passkeyRemoved',\n    recoveryCodesGenerated: 'recoveryCodesGenerated',\n    recoveryCodeUsed: 'recoveryCodeUsed',\n    sessionsClosed: 'sessionsClosed',\n});\n\n// el ícono de cada tipo, y en rojo lo que pide atención (un intento con contraseña equivocada, quitar protección)\nconst EVENT_LOOK = Object.freeze({\n    [ACCOUNT_EVENT_KIND.signedIn]: {Icon: LoginOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.signInFailed]: {Icon: CancelOutlinedIcon, color: 'error'},\n    [ACCOUNT_EVENT_KIND.signedOut]: {Icon: LogoutOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.passwordChanged]: {Icon: PasswordOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.twoStepEnabled]: {Icon: PhonelinkLockOutlinedIcon, color: 'success'},\n    [ACCOUNT_EVENT_KIND.twoStepDisabled]: {Icon: PhonelinkEraseOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.passkeyAdded]: {Icon: FingerprintOutlinedIcon, color: 'success'},\n    [ACCOUNT_EVENT_KIND.passkeyRemoved]: {Icon: FingerprintOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.recoveryCodesGenerated]: {Icon: KeyOutlinedIcon},\n    [ACCOUNT_EVENT_KIND.recoveryCodeUsed]: {Icon: KeyOutlinedIcon, color: 'warning'},\n    [ACCOUNT_EVENT_KIND.sessionsClosed]: {Icon: SyncLockOutlinedIcon},\n});\nconst DEFAULT_LOOK = Object.freeze({Icon: EventNoteOutlinedIcon});\nconst LOADING_HEIGHT_PIXELS = 160;\n\n/**\n * @param {object} props\n * @param {Array<{id: string, kind: string, occurredAt: string, device?: string|null, network?: string|null, description?: string}>|null} props.events\n *     del más nuevo al más viejo; null mientras llegan\n * @param {string|null} [props.error] ya traducido si no se pudieron traer\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nfunction ActivityLogContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaActivityLog.defaultProps) y encima lo que llega aquí\n    const {events, error = null, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('security', texts);\n    const {formatDateTime} = useFormatters();\n\n    return (\n        <SectionCard title={t('activity.title')}>\n            <Stack spacing={2}>\n                <Typography variant=\"body2\" color=\"text.secondary\">{t('activity.description')}</Typography>\n                {error && <Alert severity=\"error\">{error}</Alert>}\n                {!events && !error && <Skeleton variant=\"rounded\" height={LOADING_HEIGHT_PIXELS} />}\n                {events?.length === 0 && <Typography variant=\"body2\" color=\"text.secondary\">{t('activity.empty')}</Typography>}\n                {events?.length > 0 && (\n                    <List dense disablePadding>\n                        {events.map((event) => {\n                            const look = EVENT_LOOK[event.kind] ?? DEFAULT_LOOK;\n                            const where = event.device && event.network ? ` · ${t('activity.from', {device: event.device, network: event.network})}` : '';\n                            return (\n                                <ListItem key={event.id} disableGutters>\n                                    <ActivityItemIcon ownSx={{minWidth: 36}}><look.Icon fontSize=\"small\" color={look.color ?? 'action'} /></ActivityItemIcon>\n                                    <ListItemText primary={event.description ?? t(`activity.kinds.${event.kind}`)}\n                                                  secondary={`${formatDateTime(event.occurredAt)}${where}`} />\n                                </ListItem>\n                            );\n                        })}\n                    </List>\n                )}\n            </Stack>\n        </SectionCard>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ActivityLog = withPieceSlots(ActivityLogContent, THEME_NAME);\nexport default ActivityLog;\n"],"names":[],"mappings":"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"}

package/dist/security/RecoveryCodesDialog.js

@@ -16,7 +16,7 @@ import { saveBlob } from "../files.js";
 import { useToolkitSettings } from "../toolkit/toolkitContext.js";
 import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
 import CopyButton from "../ui/actions/CopyButton.js";
-import { piecePart, usePieceProps } from "../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
 import { warnUnknownProps } from "../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaRecoveryCodesDialog";
 const RecoveryCodes = piecePart(THEME_NAME, "Codes", Box);
@@ -25,7 +25,7 @@ const CODE_FONT = "ui-monospace, SFMono-Regular, Menlo, monospace";
 function todayText() {
   return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
 }
-function RecoveryCodesDialog(props) {
+function RecoveryCodesDialogContent(props) {
   const { codes, account = "", onClose, onCodesSaved, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("security", texts);
@@ -86,6 +86,7 @@ function RecoveryCodesDialog(props) {
     ] })
   );
 }
+const RecoveryCodesDialog = withPieceSlots(RecoveryCodesDialogContent, THEME_NAME);
 export {
   RecoveryCodesDialog as default
 };