@stackcraftmx/calcita 0.32.2 → 0.47.0

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,26 @@
+"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, usePieceProps } from "../theme/themePieces.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+const THEME_NAME = "CalcitaRichTextView";
+const ViewRoot = piecePart(THEME_NAME, "Root", Box);
+function RichTextView(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 }) });
+}
+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} 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 */\nexport default function RichTextView(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"],"names":[],"mappings":";;;;;;;;;AAkBA,MAAM,aAAa;AACnB,MAAM,WAAW,UAAU,YAAY,QAAQ,GAAG;AASlD,SAAwB,aAAa,OAAO;AACxC,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;"}

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/table.js

@@ -4,6 +4,7 @@ import { default as default4 } from "./DataTable/EmptyState.js";
 import { default as default5 } from "./DataTable/FilterChips.js";
 import { default as default6 } from "./DataTable/GoToPage.js";
 import { default as default7 } from "./DataTable/ServerTable.js";
+import { default as default8 } from "./DataTable/ServerTableFilterDrawer.js";
 import { buildChipConfig } from "./DataTable/buildChipConfig.js";
 import { detailColumn, facetColumn, textColumn } from "./DataTable/columns.js";
 import { TableFilterContext, useTableFilter } from "./DataTable/filterContext.js";
@@ -21,6 +22,7 @@ export {
   default6 as GoToPage,
   SELECTION_PHONE_LAYOUT,
   default7 as ServerTable,
+  default8 as ServerTableFilterDrawer,
   TableFilterContext,
   buildChipConfig,
   buildTableActors,

package/dist/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/theme/components/glassComponents.js

@@ -106,6 +106,20 @@ function whiteLabelOf(theme, colorName) {
   };
   return lightDarkStylesOf(theme, schemeStylesOf("light"), schemeStylesOf("dark"));
 }
+function clockItemStylesOf(theme) {
+  const palette = paletteOf(theme);
+  const selected = {
+    backgroundColor: `color-mix(in srgb, ${palette.primary.main} 22%, transparent)`,
+    ...accentTextStylesOf(theme),
+    fontWeight: 600
+  };
+  return {
+    justifyContent: "center",
+    marginInline: MENU_ROW_INSET_PIXELS,
+    "&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus-visible": selected,
+    "&.Mui-selected::after": { content: "none" }
+  };
+}
 function monogramOf(theme) {
   return lightDarkStylesOf(theme, { color: WHITE_LABEL, backgroundColor: MONOGRAM_GRAY.light }, { color: WHITE_LABEL, backgroundColor: MONOGRAM_GRAY.dark });
 }
@@ -704,6 +718,19 @@ function glassComponents({ surfaces = false } = {}) {
         }
       }
     },
+    // las columnas de horas y minutos de MUI X: sus renglones son MenuItem, así que heredaban la palomita del menú (tapaba
+    // el número y lo corría) y además MUI X les pone el color lleno con la letra de contraste (negra sobre el naranja en
+    // oscuro). Aquí el elegido va como el día elegido del calendario: círculo tenue de su color y número legible, centrado
+    MuiMultiSectionDigitalClockSection: {
+      styleOverrides: {
+        item: ({ theme }) => clockItemStylesOf(theme)
+      }
+    },
+    MuiDigitalClock: {
+      styleOverrides: {
+        item: ({ theme }) => clockItemStylesOf(theme)
+      }
+    },
     // las pestañas: la misma tira, y la marca de abajo se vuelve la gota detrás de la pestaña elegida (se desliza sola)
     MuiTabs: {
       styleOverrides: {