@exsto/ds 0.0.1-rc.2 → 0.0.1-rc.22

package/dist/ui/src/components/edyn/rich-text-editor/serialize.js

@@ -0,0 +1,55 @@
+import { DOMSerializer } from "@tiptap/pm/model";
+//#region ../ui/src/components/edyn/rich-text-editor/serialize.ts
+var MENTION_MARK = "data-rich-text-mention";
+var defaultMentionToText = (item) => `@${item.id}`;
+/**
+* The document as HTML. Not `editor.getHTML()`: that would write a mention as its chip element, and
+* the HTML must carry the plain text the app chose (`@person@example.test`) and nothing else.
+*/
+var serializeDocument = (doc, toText) => {
+	const schema = doc.type.schema;
+	const nodes = {
+		...DOMSerializer.nodesFromSchema(schema),
+		mention: (node) => [
+			"span",
+			{ [MENTION_MARK]: "" },
+			toText({
+				id: String(node.attrs.id ?? ""),
+				label: String(node.attrs.label ?? "")
+			})
+		]
+	};
+	const serializer = new DOMSerializer(nodes, DOMSerializer.marksFromSchema(schema));
+	const container = document.createElement("div");
+	container.appendChild(serializer.serializeFragment(doc.content));
+	for (const element of Array.from(container.querySelectorAll(`[${MENTION_MARK}]`))) element.replaceWith(document.createTextNode(element.textContent ?? ""));
+	return container.innerHTML;
+};
+/** No text and no mention. A document of blank paragraphs, spaces and line breaks is empty too. */
+var isDocumentEmpty = (doc) => {
+	if (doc.textContent.trim() !== "") return false;
+	let hasMention = false;
+	doc.descendants((node) => {
+		if (node.type.name === "mention") hasMention = true;
+		return !hasMention;
+	});
+	return !hasMention;
+};
+/** Characters the HTML text will have: a mention counts as the text it is written as. */
+var countCharacters = (doc, toText) => {
+	let total = 0;
+	doc.descendants((node) => {
+		if (node.isText) total += node.text?.length ?? 0;
+		else if (node.type.name === "mention") total += toText({
+			id: String(node.attrs.id ?? ""),
+			label: String(node.attrs.label ?? "")
+		}).length;
+		else if (node.type.name === "hardBreak") total += 1;
+		return true;
+	});
+	return total;
+};
+//#endregion
+export { countCharacters, defaultMentionToText, isDocumentEmpty, serializeDocument };
+
+//# sourceMappingURL=serialize.js.map

package/dist/ui/src/components/edyn/rich-text-editor/serialize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"serialize.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/serialize.ts"],"sourcesContent":["import { type DOMOutputSpec, DOMSerializer, type Node as TProseNode } from '@tiptap/pm/model';\nimport type { IRichTextMention } from './types';\n\nexport type TMentionToText = NonNullable<IRichTextMention['toText']>;\n\n// A serializer can only return elements, so a mention leaves as one and is unwrapped to its text below.\nconst MENTION_MARK = 'data-rich-text-mention';\n\nexport const defaultMentionToText: TMentionToText = (item) => `@${item.id}`;\n\n/**\n * The document as HTML. Not `editor.getHTML()`: that would write a mention as its chip element, and\n * the HTML must carry the plain text the app chose (`@person@example.test`) and nothing else.\n */\nexport const serializeDocument = (doc: TProseNode, toText: TMentionToText): string => {\n  const schema = doc.type.schema;\n  const nodes = {\n    ...DOMSerializer.nodesFromSchema(schema),\n    mention: (node: TProseNode): DOMOutputSpec => [\n      'span',\n      { [MENTION_MARK]: '' },\n      toText({ id: String(node.attrs.id ?? ''), label: String(node.attrs.label ?? '') }),\n    ],\n  };\n  const serializer = new DOMSerializer(nodes, DOMSerializer.marksFromSchema(schema));\n  const container = document.createElement('div');\n  container.appendChild(serializer.serializeFragment(doc.content));\n  for (const element of Array.from(container.querySelectorAll(`[${MENTION_MARK}]`))) {\n    element.replaceWith(document.createTextNode(element.textContent ?? ''));\n  }\n  return container.innerHTML;\n};\n\n/** No text and no mention. A document of blank paragraphs, spaces and line breaks is empty too. */\nexport const isDocumentEmpty = (doc: TProseNode): boolean => {\n  if (doc.textContent.trim() !== '') {\n    return false;\n  }\n  let hasMention = false;\n  doc.descendants((node) => {\n    if (node.type.name === 'mention') {\n      hasMention = true;\n    }\n    return !hasMention;\n  });\n  return !hasMention;\n};\n\n/** Characters the HTML text will have: a mention counts as the text it is written as. */\nexport const countCharacters = (doc: TProseNode, toText: TMentionToText): number => {\n  let total = 0;\n  doc.descendants((node) => {\n    if (node.isText) {\n      total += node.text?.length ?? 0;\n    } else if (node.type.name === 'mention') {\n      total += toText({ id: String(node.attrs.id ?? ''), label: String(node.attrs.label ?? '') }).length;\n    } else if (node.type.name === 'hardBreak') {\n      total += 1;\n    }\n    return true;\n  });\n  return total;\n};\n"],"mappings":";;AAMA,IAAM,eAAe;AAErB,IAAa,wBAAwC,SAAS,IAAI,KAAK;;;;;AAMvE,IAAa,qBAAqB,KAAiB,WAAmC;CACpF,MAAM,SAAS,IAAI,KAAK;CACxB,MAAM,QAAQ;EACZ,GAAG,cAAc,gBAAgB,MAAM;EACvC,UAAU,SAAoC;GAC5C;GACA,GAAG,eAAe,GAAG;GACrB,OAAO;IAAE,IAAI,OAAO,KAAK,MAAM,MAAM,EAAE;IAAG,OAAO,OAAO,KAAK,MAAM,SAAS,EAAE;GAAE,CAAC;EACnF;CACF;CACA,MAAM,aAAa,IAAI,cAAc,OAAO,cAAc,gBAAgB,MAAM,CAAC;CACjF,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,YAAY,WAAW,kBAAkB,IAAI,OAAO,CAAC;CAC/D,KAAK,MAAM,WAAW,MAAM,KAAK,UAAU,iBAAiB,IAAI,aAAa,EAAE,CAAC,GAC9E,QAAQ,YAAY,SAAS,eAAe,QAAQ,eAAe,EAAE,CAAC;CAExE,OAAO,UAAU;AACnB;;AAGA,IAAa,mBAAmB,QAA6B;CAC3D,IAAI,IAAI,YAAY,KAAK,MAAM,IAC7B,OAAO;CAET,IAAI,aAAa;CACjB,IAAI,aAAa,SAAS;EACxB,IAAI,KAAK,KAAK,SAAS,WACrB,aAAa;EAEf,OAAO,CAAC;CACV,CAAC;CACD,OAAO,CAAC;AACV;;AAGA,IAAa,mBAAmB,KAAiB,WAAmC;CAClF,IAAI,QAAQ;CACZ,IAAI,aAAa,SAAS;EACxB,IAAI,KAAK,QACP,SAAS,KAAK,MAAM,UAAU;OACzB,IAAI,KAAK,KAAK,SAAS,WAC5B,SAAS,OAAO;GAAE,IAAI,OAAO,KAAK,MAAM,MAAM,EAAE;GAAG,OAAO,OAAO,KAAK,MAAM,SAAS,EAAE;EAAE,CAAC,CAAC,CAAC;OACvF,IAAI,KAAK,KAAK,SAAS,aAC5B,SAAS;EAEX,OAAO;CACT,CAAC;CACD,OAAO;AACT"}

package/dist/ui/src/components/edyn/rich-text-editor/sync.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+/**
+ * Whether commands may be called on the editor. TipTap builds an editor during the render, mounts its view later, and
+ * destroys one that has not been mounted within a moment (useEditor then makes a new one), so an effect can be handed an
+ * editor that is not there yet or no longer is. `isDestroyed` is true for both: it reads true until the view exists. A
+ * destroyed editor has no command manager, so `editor.commands` throws on it.
+ */
+export declare const isLive: (editor: Editor) => boolean;
+/**
+ * Brings the editor to a value the parent passed in, if it is one the editor did not just report itself.
+ * `known` is the last HTML the editor and the parent agree on (the starting value, then whatever the editor emitted or was
+ * given). The caret stays where it was, kept inside the new content, so a value changed from outside while the writer is
+ * typing does not throw the caret to the start.
+ */
+export declare const syncValue: (editor: Editor, value: string | undefined, known: {
+    current: string | undefined;
+}) => void;
+/** Sets whether the editor can be edited without telling the app something changed (TipTap emits an update by default). */
+export declare const syncEditable: (editor: Editor, editable: boolean) => void;

package/dist/ui/src/components/edyn/rich-text-editor/sync.js

@@ -0,0 +1,34 @@
+import { TextSelection } from "@tiptap/pm/state";
+//#region ../ui/src/components/edyn/rich-text-editor/sync.ts
+/**
+* Whether commands may be called on the editor. TipTap builds an editor during the render, mounts its view later, and
+* destroys one that has not been mounted within a moment (useEditor then makes a new one), so an effect can be handed an
+* editor that is not there yet or no longer is. `isDestroyed` is true for both: it reads true until the view exists. A
+* destroyed editor has no command manager, so `editor.commands` throws on it.
+*/
+var isLive = (editor) => editor.isInitialized && !editor.isDestroyed;
+/**
+* Brings the editor to a value the parent passed in, if it is one the editor did not just report itself.
+* `known` is the last HTML the editor and the parent agree on (the starting value, then whatever the editor emitted or was
+* given). The caret stays where it was, kept inside the new content, so a value changed from outside while the writer is
+* typing does not throw the caret to the start.
+*/
+var syncValue = (editor, value, known) => {
+	if (!isLive(editor) || value === void 0 || value === known.current) return;
+	known.current = value;
+	const { from, to } = editor.state.selection;
+	editor.commands.setContent(value, { emitUpdate: false });
+	editor.commands.command(({ tr }) => {
+		const size = tr.doc.content.size;
+		tr.setSelection(TextSelection.between(tr.doc.resolve(Math.min(from, size)), tr.doc.resolve(Math.min(to, size))));
+		return true;
+	});
+};
+/** Sets whether the editor can be edited without telling the app something changed (TipTap emits an update by default). */
+var syncEditable = (editor, editable) => {
+	if (isLive(editor) && editor.isEditable !== editable) editor.setEditable(editable, false);
+};
+//#endregion
+export { isLive, syncEditable, syncValue };
+
+//# sourceMappingURL=sync.js.map

package/dist/ui/src/components/edyn/rich-text-editor/sync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sync.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/sync.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core';\nimport { TextSelection } from '@tiptap/pm/state';\n\n/**\n * Whether commands may be called on the editor. TipTap builds an editor during the render, mounts its view later, and\n * destroys one that has not been mounted within a moment (useEditor then makes a new one), so an effect can be handed an\n * editor that is not there yet or no longer is. `isDestroyed` is true for both: it reads true until the view exists. A\n * destroyed editor has no command manager, so `editor.commands` throws on it.\n */\nexport const isLive = (editor: Editor): boolean => editor.isInitialized && !editor.isDestroyed;\n\n/**\n * Brings the editor to a value the parent passed in, if it is one the editor did not just report itself.\n * `known` is the last HTML the editor and the parent agree on (the starting value, then whatever the editor emitted or was\n * given). The caret stays where it was, kept inside the new content, so a value changed from outside while the writer is\n * typing does not throw the caret to the start.\n */\nexport const syncValue = (editor: Editor, value: string | undefined, known: { current: string | undefined }): void => {\n  if (!isLive(editor) || value === undefined || value === known.current) {\n    return;\n  }\n  known.current = value;\n  const { from, to } = editor.state.selection;\n  editor.commands.setContent(value, { emitUpdate: false });\n  editor.commands.command(({ tr }) => {\n    const size = tr.doc.content.size;\n    tr.setSelection(TextSelection.between(tr.doc.resolve(Math.min(from, size)), tr.doc.resolve(Math.min(to, size))));\n    return true;\n  });\n};\n\n/** Sets whether the editor can be edited without telling the app something changed (TipTap emits an update by default). */\nexport const syncEditable = (editor: Editor, editable: boolean): void => {\n  if (isLive(editor) && editor.isEditable !== editable) {\n    editor.setEditable(editable, false);\n  }\n};\n"],"mappings":";;;;;;;;AASA,IAAa,UAAU,WAA4B,OAAO,iBAAiB,CAAC,OAAO;;;;;;;AAQnF,IAAa,aAAa,QAAgB,OAA2B,UAAiD;CACpH,IAAI,CAAC,OAAO,MAAM,KAAK,UAAU,KAAA,KAAa,UAAU,MAAM,SAC5D;CAEF,MAAM,UAAU;CAChB,MAAM,EAAE,MAAM,OAAO,OAAO,MAAM;CAClC,OAAO,SAAS,WAAW,OAAO,EAAE,YAAY,MAAM,CAAC;CACvD,OAAO,SAAS,SAAS,EAAE,SAAS;EAClC,MAAM,OAAO,GAAG,IAAI,QAAQ;EAC5B,GAAG,aAAa,cAAc,QAAQ,GAAG,IAAI,QAAQ,KAAK,IAAI,MAAM,IAAI,CAAC,GAAG,GAAG,IAAI,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC;EAC/G,OAAO;CACT,CAAC;AACH;;AAGA,IAAa,gBAAgB,QAAgB,aAA4B;CACvE,IAAI,OAAO,MAAM,KAAK,OAAO,eAAe,UAC1C,OAAO,YAAY,UAAU,KAAK;AAEtC"}

package/dist/ui/src/components/edyn/rich-text-editor/sync.test.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Keeping the editor in step with the parent's value without ever touching an editor that is not there. A controlled
+ * RichTextEditor crashed on mount in rc.7 ("Cannot read properties of null (reading 'commands')"): TipTap makes the editor
+ * during the render, mounts its view later and destroys one that is not mounted in time, and the value effect ran at the
+ * first commit for every controlled value and called a command on whatever editor it was handed.
+ *
+ * PATH TAKEN: the destroyed editor is reproduced as the state TipTap leaves it in (no command manager, so `commands`
+ * throws), because the timing that produces it in an app cannot be driven from a test. The real behaviour in a browser,
+ * mount order included, is e2e/rich-text-editor-lifecycle.spec.ts.
+ */
+export {};

package/dist/ui/src/components/edyn/rich-text-editor/toolbar.d.ts

@@ -0,0 +1,20 @@
+import { Editor } from '@tiptap/core';
+import { RefObject } from 'react';
+import { IRichTextField, IRichTextLabels } from './types';
+/** A typed address becomes a link: "name@example.test" a mailto, "example.test" an https address. */
+export declare const normalizeHref: (raw: string) => string;
+/** Where the writer's selection was when the link box opened: moving focus into the box must not lose it. */
+export interface ILinkRange {
+    from: number;
+    to: number;
+}
+export interface IRichTextToolbarProps {
+    linkRange: RefObject<ILinkRange | null>;
+    editor: Editor;
+    labels: IRichTextLabels;
+    fields: IRichTextField[] | undefined;
+    disabled: boolean;
+    linkOpen: boolean;
+    onLinkOpenChange: (open: boolean) => void;
+}
+export declare const RichTextToolbar: ({ linkRange, editor, labels, fields, disabled, linkOpen, onLinkOpenChange }: IRichTextToolbarProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js

@@ -0,0 +1,235 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../ui/button/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover/popover.js";
+import { isAllowedRichTextHref } from "../rich-text-content/allow-list.js";
+import { Input } from "../../ui/input/input.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu/dropdown-menu.js";
+import { toggleVariants } from "../../ui/toggle/toggle.js";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconBold, IconItalic, IconLink, IconList, IconListNumbers, IconSeparatorHorizontal, IconUnderline, IconVariable } from "@tabler/icons-react";
+import { useEditorState } from "@tiptap/react";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region ../ui/src/components/edyn/rich-text-editor/toolbar.tsx
+var BUTTON_CLASS = cn(toggleVariants({
+	variant: "default",
+	size: "sm"
+}), "size-7 px-0");
+/** A typed address becomes a link: "name@example.test" a mailto, "example.test" an https address. */
+var normalizeHref = (raw) => {
+	const value = raw.trim();
+	if (value === "" || /^[a-z][a-z0-9+.-]*:/i.test(value)) return value;
+	return /^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(value) ? `mailto:${value}` : `https://${value}`;
+};
+var ToolbarButton = ({ label, pressed, disabled, onClick, children }) => /* @__PURE__ */ jsx(Toolbar.Button, {
+	type: "button",
+	"aria-label": label,
+	title: label,
+	"aria-pressed": pressed,
+	"data-pressed": pressed ? "" : void 0,
+	disabled,
+	className: BUTTON_CLASS,
+	onMouseDown: (event) => event.preventDefault(),
+	onClick,
+	children
+});
+var hrefAt = (editor, range) => {
+	const { doc } = editor.state;
+	const marks = range.from < range.to ? doc.nodeAt(range.from)?.marks ?? [] : doc.resolve(range.from).marks();
+	return String(marks.find((mark) => mark.type.name === "link")?.attrs.href ?? "");
+};
+var LinkControl = ({ range, editor, labels, active, disabled, open, onOpenChange }) => {
+	const [address, setAddress] = useState("");
+	const [invalid, setInvalid] = useState(false);
+	useEffect(() => {
+		if (open) {
+			setAddress(range.current ? hrefAt(editor, range.current) : "");
+			setInvalid(false);
+		}
+	}, [
+		editor,
+		open,
+		range
+	]);
+	const apply = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const href = normalizeHref(address);
+		if (!isAllowedRichTextHref(href)) {
+			setInvalid(true);
+			return;
+		}
+		const saved = range.current ?? {
+			from: editor.state.selection.from,
+			to: editor.state.selection.to
+		};
+		const chain = editor.chain().focus().setTextSelection(saved);
+		if (saved.from === saved.to && !hrefAt(editor, saved)) chain.insertContent({
+			type: "text",
+			text: href,
+			marks: [{
+				type: "link",
+				attrs: { href }
+			}]
+		}).run();
+		else chain.extendMarkRange("link").setLink({ href }).run();
+		onOpenChange(false);
+	};
+	const remove = () => {
+		const saved = range.current ?? {
+			from: editor.state.selection.from,
+			to: editor.state.selection.to
+		};
+		editor.chain().focus().setTextSelection(saved).extendMarkRange("link").unsetLink().run();
+		onOpenChange(false);
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			render: /* @__PURE__ */ jsx(Toolbar.Button, {
+				type: "button",
+				"aria-label": labels.link,
+				title: labels.link,
+				"aria-pressed": active,
+				"data-pressed": active ? "" : void 0,
+				disabled,
+				className: BUTTON_CLASS
+			}),
+			children: /* @__PURE__ */ jsx(IconLink, { "aria-hidden": true })
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			className: "w-80",
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-2",
+				onSubmit: apply,
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						type: "text",
+						inputMode: "url",
+						"aria-label": labels.linkAddress,
+						"aria-invalid": invalid || void 0,
+						value: address,
+						onChange: (event) => {
+							setAddress(event.target.value);
+							setInvalid(false);
+						}
+					}),
+					invalid ? /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-destructive",
+						children: labels.linkInvalid
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex justify-end gap-2",
+						children: [active ? /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							onClick: remove,
+							children: labels.linkRemove
+						}) : null, /* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							size: "sm",
+							children: labels.linkApply
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+var RichTextToolbar = ({ linkRange, editor, labels, fields, disabled, linkOpen, onLinkOpenChange }) => {
+	const state = useEditorState({
+		editor,
+		selector: ({ editor: current }) => ({
+			bold: current.isActive("bold"),
+			italic: current.isActive("italic"),
+			underline: current.isActive("underline"),
+			bullets: current.isActive("bulletList"),
+			numbers: current.isActive("orderedList"),
+			link: current.isActive("link")
+		})
+	});
+	return /* @__PURE__ */ jsxs(Toolbar.Root, {
+		"data-slot": "rich-text-toolbar",
+		"aria-label": labels.toolbar,
+		className: "flex flex-wrap items-center gap-0.5 border-b border-control p-1",
+		children: [
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.bold,
+				pressed: state.bold,
+				disabled,
+				onClick: () => editor.chain().focus().toggleBold().run(),
+				children: /* @__PURE__ */ jsx(IconBold, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.italic,
+				pressed: state.italic,
+				disabled,
+				onClick: () => editor.chain().focus().toggleItalic().run(),
+				children: /* @__PURE__ */ jsx(IconItalic, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.underline,
+				pressed: state.underline,
+				disabled,
+				onClick: () => editor.chain().focus().toggleUnderline().run(),
+				children: /* @__PURE__ */ jsx(IconUnderline, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(Toolbar.Separator, { className: "mx-1 h-4 w-px bg-border" }),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.bulletList,
+				pressed: state.bullets,
+				disabled,
+				onClick: () => editor.chain().focus().toggleBulletList().run(),
+				children: /* @__PURE__ */ jsx(IconList, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.numberedList,
+				pressed: state.numbers,
+				disabled,
+				onClick: () => editor.chain().focus().toggleOrderedList().run(),
+				children: /* @__PURE__ */ jsx(IconListNumbers, { "aria-hidden": true })
+			}),
+			/* @__PURE__ */ jsx(LinkControl, {
+				range: linkRange,
+				editor,
+				labels,
+				active: state.link,
+				disabled,
+				open: linkOpen,
+				onOpenChange: onLinkOpenChange
+			}),
+			/* @__PURE__ */ jsx(ToolbarButton, {
+				label: labels.horizontalRule,
+				disabled,
+				onClick: () => editor.chain().focus().setHorizontalRule().run(),
+				children: /* @__PURE__ */ jsx(IconSeparatorHorizontal, { "aria-hidden": true })
+			}),
+			fields && fields.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Toolbar.Separator, { className: "mx-1 h-4 w-px bg-border" }), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+				render: /* @__PURE__ */ jsx(Toolbar.Button, {
+					type: "button",
+					"aria-label": labels.insertField,
+					title: labels.insertField,
+					disabled,
+					className: BUTTON_CLASS
+				}),
+				children: /* @__PURE__ */ jsx(IconVariable, { "aria-hidden": true })
+			}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+				align: "start",
+				className: "w-56",
+				children: fields.map((field) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+					onClick: () => editor.chain().focus().insertContent({
+						type: "text",
+						text: `{{${field.id}}}`
+					}).run(),
+					children: field.label
+				}, field.id))
+			})] })] }) : null
+		]
+	});
+};
+//#endregion
+export { RichTextToolbar, normalizeHref };
+
+//# sourceMappingURL=toolbar.js.map

package/dist/ui/src/components/edyn/rich-text-editor/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/toolbar.tsx"],"sourcesContent":["import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';\nimport { isAllowedRichTextHref } from '@edyn/ui/components/edyn/rich-text-content/allow-list';\nimport { Button } from '@edyn/ui/components/ui/button';\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@edyn/ui/components/ui/dropdown-menu';\nimport { Input } from '@edyn/ui/components/ui/input';\nimport { Popover, PopoverContent, PopoverTrigger } from '@edyn/ui/components/ui/popover';\nimport { toggleVariants } from '@edyn/ui/components/ui/toggle';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconBold, IconItalic, IconLink, IconList, IconListNumbers, IconSeparatorHorizontal, IconUnderline, IconVariable } from '@tabler/icons-react';\nimport type { Editor } from '@tiptap/core';\nimport { useEditorState } from '@tiptap/react';\nimport { type FormEvent, type ReactNode, type RefObject, useEffect, useState } from 'react';\nimport type { IRichTextField, IRichTextLabels } from './types';\n\nconst BUTTON_CLASS = cn(toggleVariants({ variant: 'default', size: 'sm' }), 'size-7 px-0');\n\n/** A typed address becomes a link: \"name@example.test\" a mailto, \"example.test\" an https address. */\nexport const normalizeHref = (raw: string): string => {\n  const value = raw.trim();\n  if (value === '' || /^[a-z][a-z0-9+.-]*:/i.test(value)) {\n    return value;\n  }\n  return /^[^\\s@/]+@[^\\s@/]+\\.[^\\s@/]+$/.test(value) ? `mailto:${value}` : `https://${value}`;\n};\n\ninterface IToolbarButtonProps {\n  label: string;\n  pressed?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  children: ReactNode;\n}\n\nconst ToolbarButton = ({ label, pressed, disabled, onClick, children }: IToolbarButtonProps) => (\n  <ToolbarPrimitive.Button\n    type=\"button\"\n    aria-label={label}\n    title={label}\n    aria-pressed={pressed}\n    data-pressed={pressed ? '' : undefined}\n    disabled={disabled}\n    className={BUTTON_CLASS}\n    onMouseDown={(event) => event.preventDefault()}\n    onClick={onClick}\n  >\n    {children}\n  </ToolbarPrimitive.Button>\n);\n\n/** Where the writer's selection was when the link box opened: moving focus into the box must not lose it. */\nexport interface ILinkRange {\n  from: number;\n  to: number;\n}\n\nconst hrefAt = (editor: Editor, range: ILinkRange): string => {\n  const { doc } = editor.state;\n  const marks = range.from < range.to ? (doc.nodeAt(range.from)?.marks ?? []) : doc.resolve(range.from).marks();\n  return String(marks.find((mark) => mark.type.name === 'link')?.attrs.href ?? '');\n};\n\ninterface ILinkControlProps {\n  range: RefObject<ILinkRange | null>;\n  editor: Editor;\n  labels: IRichTextLabels;\n  active: boolean;\n  disabled: boolean;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nconst LinkControl = ({ range, editor, labels, active, disabled, open, onOpenChange }: ILinkControlProps) => {\n  const [address, setAddress] = useState('');\n  const [invalid, setInvalid] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      setAddress(range.current ? hrefAt(editor, range.current) : '');\n      setInvalid(false);\n    }\n  }, [editor, open, range]);\n\n  const apply = (event: FormEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const href = normalizeHref(address);\n    if (!isAllowedRichTextHref(href)) {\n      setInvalid(true);\n      return;\n    }\n    const saved = range.current ?? { from: editor.state.selection.from, to: editor.state.selection.to };\n    const chain = editor.chain().focus().setTextSelection(saved);\n    if (saved.from === saved.to && !hrefAt(editor, saved)) {\n      chain.insertContent({ type: 'text', text: href, marks: [{ type: 'link', attrs: { href } }] }).run();\n    } else {\n      chain.extendMarkRange('link').setLink({ href }).run();\n    }\n    onOpenChange(false);\n  };\n\n  const remove = () => {\n    const saved = range.current ?? { from: editor.state.selection.from, to: editor.state.selection.to };\n    editor.chain().focus().setTextSelection(saved).extendMarkRange('link').unsetLink().run();\n    onOpenChange(false);\n  };\n\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <PopoverTrigger\n        render={\n          <ToolbarPrimitive.Button\n            type=\"button\"\n            aria-label={labels.link}\n            title={labels.link}\n            aria-pressed={active}\n            data-pressed={active ? '' : undefined}\n            disabled={disabled}\n            className={BUTTON_CLASS}\n          />\n        }\n      >\n        <IconLink aria-hidden />\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-80\">\n        <form className=\"flex flex-col gap-2\" onSubmit={apply}>\n          <Input\n            type=\"text\"\n            inputMode=\"url\"\n            aria-label={labels.linkAddress}\n            aria-invalid={invalid || undefined}\n            value={address}\n            onChange={(event) => {\n              setAddress(event.target.value);\n              setInvalid(false);\n            }}\n          />\n          {invalid ? <p className=\"text-xs text-destructive\">{labels.linkInvalid}</p> : null}\n          <div className=\"flex justify-end gap-2\">\n            {active ? (\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={remove}>\n                {labels.linkRemove}\n              </Button>\n            ) : null}\n            <Button type=\"submit\" size=\"sm\">\n              {labels.linkApply}\n            </Button>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport interface IRichTextToolbarProps {\n  linkRange: RefObject<ILinkRange | null>;\n  editor: Editor;\n  labels: IRichTextLabels;\n  fields: IRichTextField[] | undefined;\n  disabled: boolean;\n  linkOpen: boolean;\n  onLinkOpenChange: (open: boolean) => void;\n}\n\nexport const RichTextToolbar = ({ linkRange, editor, labels, fields, disabled, linkOpen, onLinkOpenChange }: IRichTextToolbarProps) => {\n  const state = useEditorState({\n    editor,\n    selector: ({ editor: current }) => ({\n      bold: current.isActive('bold'),\n      italic: current.isActive('italic'),\n      underline: current.isActive('underline'),\n      bullets: current.isActive('bulletList'),\n      numbers: current.isActive('orderedList'),\n      link: current.isActive('link'),\n    }),\n  });\n\n  return (\n    <ToolbarPrimitive.Root\n      data-slot=\"rich-text-toolbar\"\n      aria-label={labels.toolbar}\n      className=\"flex flex-wrap items-center gap-0.5 border-b border-control p-1\"\n    >\n      <ToolbarButton label={labels.bold} pressed={state.bold} disabled={disabled} onClick={() => editor.chain().focus().toggleBold().run()}>\n        <IconBold aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton label={labels.italic} pressed={state.italic} disabled={disabled} onClick={() => editor.chain().focus().toggleItalic().run()}>\n        <IconItalic aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton\n        label={labels.underline}\n        pressed={state.underline}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleUnderline().run()}\n      >\n        <IconUnderline aria-hidden />\n      </ToolbarButton>\n      <ToolbarPrimitive.Separator className=\"mx-1 h-4 w-px bg-border\" />\n      <ToolbarButton\n        label={labels.bulletList}\n        pressed={state.bullets}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleBulletList().run()}\n      >\n        <IconList aria-hidden />\n      </ToolbarButton>\n      <ToolbarButton\n        label={labels.numberedList}\n        pressed={state.numbers}\n        disabled={disabled}\n        onClick={() => editor.chain().focus().toggleOrderedList().run()}\n      >\n        <IconListNumbers aria-hidden />\n      </ToolbarButton>\n      <LinkControl\n        range={linkRange}\n        editor={editor}\n        labels={labels}\n        active={state.link}\n        disabled={disabled}\n        open={linkOpen}\n        onOpenChange={onLinkOpenChange}\n      />\n      <ToolbarButton label={labels.horizontalRule} disabled={disabled} onClick={() => editor.chain().focus().setHorizontalRule().run()}>\n        <IconSeparatorHorizontal aria-hidden />\n      </ToolbarButton>\n      {fields && fields.length > 0 ? (\n        <>\n          <ToolbarPrimitive.Separator className=\"mx-1 h-4 w-px bg-border\" />\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <ToolbarPrimitive.Button\n                  type=\"button\"\n                  aria-label={labels.insertField}\n                  title={labels.insertField}\n                  disabled={disabled}\n                  className={BUTTON_CLASS}\n                />\n              }\n            >\n              <IconVariable aria-hidden />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-56\">\n              {fields.map((field) => (\n                <DropdownMenuItem\n                  key={field.id}\n                  onClick={() =>\n                    editor\n                      .chain()\n                      .focus()\n                      .insertContent({ type: 'text', text: `{{${field.id}}}` })\n                      .run()\n                  }\n                >\n                  {field.label}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </>\n      ) : null}\n    </ToolbarPrimitive.Root>\n  );\n};\n"],"mappings":"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"}

package/dist/ui/src/components/edyn/rich-text-editor/types.d.ts

@@ -0,0 +1,68 @@
+/** One person (or anything else) the app offers when the writer types @. */
+export interface IRichTextMentionItem {
+    /** What the HTML carries. By default the value is written as `@${id}`, so an email address works as an id. */
+    id: string;
+    /** What the chip shows while the text is being edited. */
+    label: string;
+    /** A second, muted line in the list (a role, an email address). */
+    secondary?: string;
+}
+/** A page of results. Return a plain array instead when there is only ever one page. */
+export interface IRichTextMentionPage {
+    items: IRichTextMentionItem[];
+    /** True when asking for `page + 1` would return more. The list loads it when it is scrolled to the end. */
+    hasMore?: boolean;
+}
+export interface IRichTextMentionSearchOptions {
+    /** 1-based. */
+    page: number;
+    /** Aborted when the writer types on or closes the list: pass it to `fetch` so a stale search stops. */
+    signal: AbortSignal;
+}
+export type TRichTextMentionSearch = (query: string, options: IRichTextMentionSearchOptions) => Promise<IRichTextMentionItem[] | IRichTextMentionPage>;
+export interface IRichTextMention {
+    /** Asked for the first page when the writer types @ and again for every change of the text after it, debounced. */
+    search: TRichTextMentionSearch;
+    /**
+     * How a mention is written into the HTML. The chip exists only while editing; the HTML carries this text
+     * and no element. Default: `@${item.id}`.
+     */
+    toText?: (item: Pick<IRichTextMentionItem, 'id' | 'label'>) => string;
+    /** Milliseconds to wait after the last keystroke before searching. Default 250. */
+    debounce?: number;
+}
+/** A field of a template (a mail merge token). Inserted as the plain text `{{id}}`. */
+export interface IRichTextField {
+    id: string;
+    label: string;
+}
+/** What a ref to the editor can do, for a button outside it (a merge tag, say). */
+export interface IRichTextEditorHandle {
+    /** Writes plain text at the caret (over the selection), and puts focus back in the editor. */
+    insertText: (text: string) => void;
+    focus: () => void;
+}
+/** Every string the editor shows, so an app can translate them. */
+export interface IRichTextLabels {
+    toolbar: string;
+    bold: string;
+    italic: string;
+    underline: string;
+    bulletList: string;
+    numberedList: string;
+    link: string;
+    horizontalRule: string;
+    insertField: string;
+    linkAddress: string;
+    linkApply: string;
+    linkRemove: string;
+    linkInvalid: string;
+    mentionList: string;
+    mentionSearching: string;
+    mentionEmpty: string;
+    mentionError: string;
+    mentionLoadingMore: string;
+    /** Announced as the list changes. `{count}` is replaced. */
+    mentionResults: string;
+}
+export declare const DEFAULT_RICH_TEXT_LABELS: IRichTextLabels;

package/dist/ui/src/components/edyn/rich-text-editor/types.js

@@ -0,0 +1,26 @@
+//#region ../ui/src/components/edyn/rich-text-editor/types.ts
+var DEFAULT_RICH_TEXT_LABELS = {
+	toolbar: "Formatting",
+	bold: "Bold",
+	italic: "Italic",
+	underline: "Underline",
+	bulletList: "Bulleted list",
+	numberedList: "Numbered list",
+	link: "Link",
+	horizontalRule: "Horizontal line",
+	insertField: "Insert a field",
+	linkAddress: "Link address",
+	linkApply: "Apply",
+	linkRemove: "Remove link",
+	linkInvalid: "Enter an http, https or mailto address.",
+	mentionList: "Mentions",
+	mentionSearching: "Searching...",
+	mentionEmpty: "No matches",
+	mentionError: "The search failed",
+	mentionLoadingMore: "Loading more...",
+	mentionResults: "{count} results"
+};
+//#endregion
+export { DEFAULT_RICH_TEXT_LABELS };
+
+//# sourceMappingURL=types.js.map

package/dist/ui/src/components/edyn/rich-text-editor/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../../../ui/src/components/edyn/rich-text-editor/types.ts"],"sourcesContent":["/** One person (or anything else) the app offers when the writer types @. */\nexport interface IRichTextMentionItem {\n  /** What the HTML carries. By default the value is written as `@${id}`, so an email address works as an id. */\n  id: string;\n  /** What the chip shows while the text is being edited. */\n  label: string;\n  /** A second, muted line in the list (a role, an email address). */\n  secondary?: string;\n}\n\n/** A page of results. Return a plain array instead when there is only ever one page. */\nexport interface IRichTextMentionPage {\n  items: IRichTextMentionItem[];\n  /** True when asking for `page + 1` would return more. The list loads it when it is scrolled to the end. */\n  hasMore?: boolean;\n}\n\nexport interface IRichTextMentionSearchOptions {\n  /** 1-based. */\n  page: number;\n  /** Aborted when the writer types on or closes the list: pass it to `fetch` so a stale search stops. */\n  signal: AbortSignal;\n}\n\nexport type TRichTextMentionSearch = (\n  query: string,\n  options: IRichTextMentionSearchOptions,\n) => Promise<IRichTextMentionItem[] | IRichTextMentionPage>;\n\nexport interface IRichTextMention {\n  /** Asked for the first page when the writer types @ and again for every change of the text after it, debounced. */\n  search: TRichTextMentionSearch;\n  /**\n   * How a mention is written into the HTML. The chip exists only while editing; the HTML carries this text\n   * and no element. Default: `@${item.id}`.\n   */\n  toText?: (item: Pick<IRichTextMentionItem, 'id' | 'label'>) => string;\n  /** Milliseconds to wait after the last keystroke before searching. Default 250. */\n  debounce?: number;\n}\n\n/** A field of a template (a mail merge token). Inserted as the plain text `{{id}}`. */\nexport interface IRichTextField {\n  id: string;\n  label: string;\n}\n\n/** What a ref to the editor can do, for a button outside it (a merge tag, say). */\nexport interface IRichTextEditorHandle {\n  /** Writes plain text at the caret (over the selection), and puts focus back in the editor. */\n  insertText: (text: string) => void;\n  focus: () => void;\n}\n\n/** Every string the editor shows, so an app can translate them. */\nexport interface IRichTextLabels {\n  toolbar: string;\n  bold: string;\n  italic: string;\n  underline: string;\n  bulletList: string;\n  numberedList: string;\n  link: string;\n  horizontalRule: string;\n  insertField: string;\n  linkAddress: string;\n  linkApply: string;\n  linkRemove: string;\n  linkInvalid: string;\n  mentionList: string;\n  mentionSearching: string;\n  mentionEmpty: string;\n  mentionError: string;\n  mentionLoadingMore: string;\n  /** Announced as the list changes. `{count}` is replaced. */\n  mentionResults: string;\n}\n\nexport const DEFAULT_RICH_TEXT_LABELS: IRichTextLabels = {\n  toolbar: 'Formatting',\n  bold: 'Bold',\n  italic: 'Italic',\n  underline: 'Underline',\n  bulletList: 'Bulleted list',\n  numberedList: 'Numbered list',\n  link: 'Link',\n  horizontalRule: 'Horizontal line',\n  insertField: 'Insert a field',\n  linkAddress: 'Link address',\n  linkApply: 'Apply',\n  linkRemove: 'Remove link',\n  linkInvalid: 'Enter an http, https or mailto address.',\n  mentionList: 'Mentions',\n  mentionSearching: 'Searching...',\n  mentionEmpty: 'No matches',\n  mentionError: 'The search failed',\n  mentionLoadingMore: 'Loading more...',\n  mentionResults: '{count} results',\n};\n"],"mappings":";AA8EA,IAAa,2BAA4C;CACvD,SAAS;CACT,MAAM;CACN,QAAQ;CACR,WAAW;CACX,YAAY;CACZ,cAAc;CACd,MAAM;CACN,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,WAAW;CACX,YAAY;CACZ,aAAa;CACb,aAAa;CACb,kBAAkB;CAClB,cAAc;CACd,cAAc;CACd,oBAAoB;CACpB,gBAAgB;AAClB"}

package/dist/ui/src/components/edyn/time-field/index.d.ts

@@ -0,0 +1 @@
+export * from './time-field';

package/dist/ui/src/components/edyn/time-field/time-field.d.ts

@@ -0,0 +1,85 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type TTimeFieldGranularity = 'minute' | 'second';
+export type TTimeFieldHourCycle = 12 | 24;
+export type TTimeFieldSegment = 'hour' | 'minute' | 'second' | 'period';
+export type TTimeFieldPeriod = 'AM' | 'PM';
+/** The segments as they are shown: the hour in the field's own cycle (0 to 23, or 1 to 12 beside a period), each empty until entered. */
+export interface ITimeParts {
+    hour: number | null;
+    minute: number | null;
+    second: number | null;
+    period: TTimeFieldPeriod | null;
+}
+export declare const EMPTY_TIME: ITimeParts;
+export interface ITimeFieldLabels {
+    hour: string;
+    minute: string;
+    second: string;
+    /** The AM/PM segment. */
+    period: string;
+    /** Read for a segment with nothing in it. */
+    empty: string;
+}
+export declare const DEFAULT_TIME_FIELD_LABELS: ITimeFieldLabels;
+/** 12 where the reader's locale writes AM and PM, 24 where it does not. */
+export declare const localeHourCycle: () => TTimeFieldHourCycle;
+/** `HH:mm` or `HH:mm:ss` (24-hour, as `<input type="time">` writes it) to the segments; anything else is no time. */
+export declare const parseTime: (value: string, hourCycle: TTimeFieldHourCycle) => ITimeParts;
+/** The segments to `HH:mm` or `HH:mm:ss`, or '' until every segment the field shows is in. */
+export declare const formatTime: (parts: ITimeParts, hourCycle: TTimeFieldHourCycle, granularity: TTimeFieldGranularity) => string;
+export interface IRange {
+    min: number;
+    max: number;
+}
+export declare const rangeOf: (segment: Exclude<TTimeFieldSegment, "period">, hourCycle: TTimeFieldHourCycle) => IRange;
+/** One step up or down inside a range, wrapping at the ends. A segment with nothing in it starts at the end the step is heading away from. */
+export declare const stepValue: (current: number | null, delta: number, { min, max }: IRange) => number;
+/**
+ * Types a digit into a segment. The second digit joins the first when it makes a number the segment can hold; otherwise it starts
+ * over. The segment is done, and focus moves on, at two digits or as soon as no second digit could fit (a 3 in the hours, a 6 in the
+ * minutes).
+ */
+export declare const typeDigit: (buffer: string, digit: string, { min, max }: IRange) => {
+    value: number;
+    buffer: string;
+    done: boolean;
+};
+export interface IEdit {
+    parts: ITimeParts;
+    /** The digits typed so far into this segment and not yet complete. */
+    buffer: string;
+    /** Move to the next segment: this one is finished. */
+    advance: boolean;
+}
+/** What a key does to a segment, or null when the key is not one the segment handles (Tab, a letter in the hours...). */
+export declare const editSegment: (parts: ITimeParts, segment: TTimeFieldSegment, key: string, hourCycle: TTimeFieldHourCycle, buffer: string) => IEdit | null;
+export interface ITimeFieldProps extends Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange' | 'children' | 'role'> {
+    /** The time as `HH:mm` or `HH:mm:ss`, 24-hour whatever the field shows, as `<input type="time">` writes it. '' is no time. */
+    value?: string;
+    defaultValue?: string;
+    /** Called with the time as soon as every segment is in, and with '' when one of a full time is cleared. */
+    onValueChange?: (value: string) => void;
+    /** `second` adds a seconds segment and a `HH:mm:ss` value. */
+    granularity?: TTimeFieldGranularity;
+    /** 12 shows an AM/PM segment, 24 does not. The default is what the reader's locale writes. */
+    hourCycle?: TTimeFieldHourCycle;
+    /** The earliest and the latest time, `HH:mm`. A time outside them is marked invalid; it is not refused. */
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    /** Shown, focusable and readable, not changeable. */
+    readOnly?: boolean;
+    invalid?: boolean;
+    /** Submits the time with a form, under this name, as `HH:mm` or `HH:mm:ss`. */
+    name?: string;
+    labels?: Partial<ITimeFieldLabels>;
+}
+/**
+ * A time of day typed in segments, in the kit's field: hours, minutes, optional seconds, and AM/PM where the reader's locale uses it.
+ * It exists so an app does not fall back to `<input type="time">`, whose look differs between browsers and from the rest of the kit.
+ *
+ * Each segment is a spinbutton: type digits (the focus moves on by itself), ArrowUp and ArrowDown step with wrap-around, PageUp and
+ * PageDown step by more, Home and End jump to the ends, Backspace empties, ArrowLeft and ArrowRight move between segments, and A or P
+ * set the period. The group is named by `aria-label` or `aria-labelledby`; a screen reader reads each segment by its own name and value.
+ */
+export declare const TimeField: ({ value, defaultValue, onValueChange, granularity, hourCycle: hourCycleProp, min, max, disabled, readOnly, invalid, name, labels: labelOverrides, className, ...rest }: ITimeFieldProps) => import('react').JSX.Element;