@exsto/ds 0.0.1-rc.6 → 0.0.1-rc.7

package/README.md

@@ -80,9 +80,42 @@ query, so a subtree can be dark inside a light page.
 | Import | What it is |
 |---|---|
 | `@exsto/ds` | React components |
+| `@exsto/ds/rich-text-editor` | The rich-text editor, on its own entry so its engine loads only where it is used |
 | `@exsto/ds/styles.css` | Precompiled tokens and component styles |
 | `@exsto/ds/theme.css` | Uncompiled tokens, brand layer, and the Tailwind `@theme` mapping |
 
+## Rich text
+
+`RichTextEditor` is a small rich-text field: paragraphs, bold, italic, underline, bulleted and numbered lists, links and a horizontal line, with optional `@mentions` that your app searches. It lives on its own entry because it carries an editor engine (about 138 KB gzipped); an app that never imports it never pays for it.
+
+```tsx
+import { RichTextContent } from '@exsto/ds';
+import { RichTextEditor } from '@exsto/ds/rich-text-editor';
+
+<RichTextEditor
+  aria-label="Comment"
+  value={html}
+  onChange={setHtml} // "" when there is no text
+  minRows={3}
+  mention={{ search: async (query, { page, signal }) => fetchPeople(query, page, signal) }}
+/>;
+
+<RichTextContent html={savedHtml} />;
+```
+
+The value is HTML. **The editor emits only these elements and attributes**, whatever is typed or pasted (anything else is dropped on paste and on load, keeping its text), so a server allow-list can be exactly this; the same lists are exported as `RICH_TEXT_ELEMENTS`, `RICH_TEXT_ATTRIBUTES` and `RICH_TEXT_LINK_PROTOCOLS`:
+
+| Element | Attributes |
+|---|---|
+| `p`, `br`, `hr`, `strong`, `em`, `u`, `ul`, `ol`, `li` | none (no `class`, no `style`) |
+| `a` | `href`, which must be absolute `http`, `https` or `mailto` |
+
+Strong and em, not b and i; no `target` or `rel` on links (add them when you render, as `RichTextContent` does). The editor is a convenience for the writer, not a security boundary: sanitise on the server as well.
+
+**Mentions.** Typing `@` opens a list under the caret that calls `mention.search(query, { page, signal })` after a pause (250 ms by default), aborting the previous call. Return an array (one page) or `{ items, hasMore }` (the next page is asked for when the list is scrolled to its end). An item is `{ id, label, secondary? }`: the chip shows `label` while editing, and the HTML carries **plain text, `@${id}` followed by a space, and no element** (`mention.toText` changes that). A value loaded back into the editor shows that text as text, not as a chip. `RichTextContent` marks runs that look like `@person@example.test` and `@assignees` as pills.
+
+Also: `ref` gives `insertText(text)` and `focus()` for buttons outside the editor; `fields` adds an "Insert a field" menu that writes `{{id}}`; `maxLength` refuses edits past a number of characters; `onPasteFiles` receives files pasted without any text; `invalid` and `aria-invalid`, `disabled`, `readOnly`, `placeholder`, `labels` (every string) and `toolbar={false}` do what they say. The box is `minRows` lines tall when empty and grows to `maxRows`, then scrolls inside.
+
 ## Status
 
 Release candidates (`0.0.1-rc.N`). The API is not stable yet; treat minor versions

package/dist/chunks/toggle-C2c5oDaE.js

@@ -0,0 +1,629 @@
+import { createElement, isValidElement, useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cva } from "class-variance-authority";
+import { IconCheck, IconChevronRight } from "@tabler/icons-react";
+import { Popover } from "@base-ui/react/popover";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+import { Input } from "@base-ui/react/input";
+import { Menu } from "@base-ui/react/menu";
+import { Toggle } from "@base-ui/react/toggle";
+//#region ../ui/src/lib/utils.ts
+var cn = (...inputs) => twMerge(clsx(inputs));
+/**
+* Normalise a size prop to a CSS length.
+*
+* Bare numbers become px, which is also what a bare numeric *string* means: an
+* element attribute arrives as a string, so `width="480"` and `width={480}` have
+* to land on the same value. Anything with a unit, a percentage or a keyword
+* passes through untouched.
+*/
+var cssLength = (value) => {
+	if (value == null || value === "") return;
+	if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
+	return /^-?\d*\.?\d+$/.test(value.trim()) ? `${value.trim()}px` : value;
+};
+//#endregion
+//#region ../ui/src/components/ui/button/button.tsx
+var buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all motion-reduce:transition-none motion-reduce:transform-none outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/15 dark:hover:bg-destructive/20 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* Whether this Button is rendering a link rather than a button, so it can keep
+* link semantics. Covers `render={<a href="..." />}` and a routing component
+* that takes an `href` (Next's Link). A component with a different prop for its
+* destination (react-router's `to`) cannot be recognised from here: give those
+* `nativeButton={false} role={undefined}` directly.
+*/
+var rendersALink = (render) => isValidElement(render) && (render.type === "a" || typeof render.props.href === "string");
+/**
+* A link that looks like a button is still a link, and has to be announced as
+* one: it opens in a new tab, it has an address, Enter follows it and Space
+* scrolls the page.
+*
+* Base UI needs telling, in two steps. Rendering an anchor while `nativeButton`
+* is true (its default) warns in development and puts `type="button"` on the
+* anchor; following the warning and passing `nativeButton={false}` then adds
+* `role="button"`, which is what takes the link semantics away. So this does
+* both: non-native, with the role and the tabindex Base UI would add cleared
+* again. An explicit prop from the caller still wins over either.
+*/
+var LINK_PROPS = {
+	nativeButton: false,
+	role: void 0,
+	tabIndex: void 0
+};
+var Button$1 = ({ className, variant = "default", size = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		...rendersALink(props.render) ? LINK_PROPS : {},
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+};
+//#endregion
+//#region ../ui/src/components/ui/popover/popover.tsx
+var Popover$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+};
+var PopoverTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+};
+var PopoverContent = ({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, anchor, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		align,
+		alignOffset,
+		anchor,
+		side,
+		sideOffset,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"data-slot": "popover-content",
+			className: cn("z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 motion-reduce:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+};
+var PopoverHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "popover-header",
+		className: cn("flex flex-col gap-0.5 text-sm", className),
+		...props
+	});
+};
+var PopoverTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-slot": "popover-title",
+		className: cn("font-medium", className),
+		...props
+	});
+};
+var PopoverDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-slot": "popover-description",
+		className: cn("text-muted-foreground", className),
+		...props
+	});
+};
+//#endregion
+//#region ../ui/src/hooks/use-merged-refs.ts
+var assignRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref !== null) ref.current = value;
+};
+var mergeRefs = (...refs) => {
+	return (node) => {
+		for (const ref of refs) if (ref) assignRef(ref, node);
+	};
+};
+var useMergedRefs = (...refs) => {
+	return useCallback(mergeRefs(...refs), [...refs]);
+};
+//#endregion
+//#region ../ui/src/components/ui/scroll-area/scroll-area.tsx
+var ScrollBar = ({ className, orientation = "vertical", visibility = "hover", ...props }) => {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: cn("peer/scrollbar z-100 flex touch-none select-none motion-safe:transition-opacity motion-safe:duration-150", orientation === "vertical" && "h-(--scroll-bar-length) w-(--scroll-bar-size) me-(--scroll-bar-gap) mt-(--scroll-bar-offset-top) border-l border-l-transparent p-px", orientation === "horizontal" && "h-(--scroll-bar-size) ms-(--scroll-bar-gap) me-(--scroll-bar-gap) mb-(--scroll-bar-gap) flex-col border-t border-t-transparent p-px", visibility !== "always" && "opacity-0 data-scrolling:opacity-100", visibility === "hover" && "data-hovering:opacity-100 group-hover/scroll-area:opacity-100", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-muted-foreground/50 transition-colors hover:bg-muted-foreground/70 data-scrolling:bg-muted-foreground/70" })
+	});
+};
+/**
+* Which axes fade, published for scroll-fade.css to key its mask off. The
+* stylesheet reaches this element's own viewport through a child combinator, so a
+* ScrollArea nested in another one cannot pick up its ancestor's edges.
+*/
+/**
+* Base UI gives the root, the viewport and the content `role="presentation"`. On
+* a div that changes nothing for a screen reader, but it is an EXPLICIT role, and
+* axe treats explicit presentation children as foreign to a parent that owns
+* required children. A ScrollArea inside `role="menu"` or `role="listbox"` then
+* fails as a critical aria-required-children violation, while the same div with
+* no role passes straight through. Clearing it is what makes a ScrollArea legal
+* in a popup list. A spread because the literal `role={undefined}` is flagged by
+* the a11y lint rule, which cannot tell it from an invalid role.
+*/
+var NO_ROLE = { role: void 0 };
+/** Base UI makes the viewport a tab stop (0, or -1 with nothing to scroll); undefined takes that away. */
+var NO_TAB_STOP = { tabIndex: void 0 };
+var FADE_AXIS = {
+	vertical: "block",
+	horizontal: "inline",
+	both: "both"
+};
+/**
+* Themed scroll container (Base UI): overflowing content scrolls INSIDE the component
+* with a slim overlay scrollbar instead of exposing a native browser scrollbar. House
+* rule: wide/tall content (tables, lists, code) always goes through this, never a bare
+* overflow-* utility.
+*
+* Cap the height with a plain class on the component itself, e.g.
+* `<ScrollArea className="max-h-88">`. The viewport picks the cap up through
+* `max-h-inherit`, which matters because the viewport is the element that actually
+* scrolls: a cap that lands only on the root leaves tall content spilling out
+* underneath with no scrollbar, and that reads as a working height right up until the
+* content outgrows it.
+*
+* `fade` fades out each edge that is currently hiding content, rather than always
+* fading one: a permanent fade is a lie half the time, dimming the last row that fits
+* and promising more below when the reader is already at the end. It is cut into the
+* content by a mask (@edyn/theme/scroll-fade.css), so it needs no surface colour and
+* reads correctly over a tint, a gradient or a glow. A host that keeps something
+* unscrolled at the top, such as a sticky table header, exempts that band by setting
+* --scroll-fade-offset on the ScrollArea. The static faded-* utilities in
+* @edyn/theme/utilities.css are the other tool, for DECORATIVE edges that do not
+* track scroll position.
+*
+* The viewport publishes its size as --scroll-area-width/--scroll-area-height CSS vars
+* so children can size against the visible area.
+*/
+var ScrollArea$1 = ({ className, children, orientation = "vertical", type = "hover", fade = false, fadeFrom = "card", scrollbarClassName, viewportId, viewportRef, viewportClassName, scrollRestorationId, focusable = true, viewPortId, viewPortRef, viewPortClassName, scrollVerticalClassName, scrollHorizontalClassName, ...props }) => {
+	const refInner = useRef(null);
+	const refsViewport = useMergedRefs(refInner, viewportRef ?? viewPortRef);
+	useEffect(() => {
+		const el = refInner.current;
+		if (!el) return;
+		const observer = new ResizeObserver(() => {
+			el.style.setProperty("--scroll-area-width", `${el.clientWidth}px`);
+			el.style.setProperty("--scroll-area-height", `${el.clientHeight}px`);
+		});
+		observer.observe(el);
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		"data-slot": "scroll-area",
+		"data-focus": "inset",
+		className: cn("group/scroll-area relative grid min-w-0 grid-rows-1 overflow-hidden", className),
+		"data-fade": fade ? FADE_AXIS[orientation] : void 0,
+		...NO_ROLE,
+		...props,
+		children: [
+			(orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "vertical",
+				visibility: type,
+				className: cn(scrollbarClassName, scrollVerticalClassName)
+			}),
+			(orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(ScrollBar, {
+				orientation: "horizontal",
+				visibility: type,
+				className: cn(scrollbarClassName, scrollHorizontalClassName)
+			}),
+			/* @__PURE__ */ jsx(ScrollArea.Corner, {}),
+			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				id: viewportId ?? viewPortId,
+				ref: refsViewport,
+				"data-scroll-restoration-id": scrollRestorationId,
+				...NO_ROLE,
+				...focusable ? null : NO_TAB_STOP,
+				className: cn("max-h-inherit w-full rounded-[inherit]", orientation === "vertical" && "overflow-x-hidden!", orientation === "horizontal" && "overflow-y-hidden!", viewportClassName ?? viewPortClassName),
+				children: /* @__PURE__ */ jsx(ScrollArea.Content, {
+					...NO_ROLE,
+					style: orientation === "vertical" ? { minWidth: 0 } : void 0,
+					children
+				})
+			})
+		]
+	});
+};
+//#endregion
+//#region ../ui/src/lib/popup-list.ts
+var ITEM_BASE = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none select-none [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-muted-foreground [&>svg:not([class*='size-'])]:size-4";
+var ITEM_STATES = {
+	"base-ui": "data-highlighted:bg-foreground/6 data-highlighted:[&>svg]:text-foreground data-[selected]:font-medium data-disabled:pointer-events-none data-disabled:opacity-50",
+	cmdk: "data-[selected=true]:bg-foreground/6 data-[selected=true]:[&>svg]:text-foreground data-[checked=true]:font-medium data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+};
+/** The shared item look. `checkable` leaves room at the end for the check. */
+var popupItemClass = (flavor = "base-ui", checkable = false) => cn(ITEM_BASE, ITEM_STATES[flavor], checkable && "pr-8");
+/**
+* The check's slot, at the end of the item and the same size whether or not the
+* check is in it, so a list does not shift as the choice moves.
+*/
+var POPUP_ITEM_INDICATOR_CLASS = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-foreground";
+/** A group's heading in any of these lists. */
+var POPUP_GROUP_LABEL_CLASS = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
+//#endregion
+//#region ../ui/src/components/edyn/rich-text-content/allow-list.ts
+/**
+* The HTML the rich-text editor emits, and the only HTML RichTextContent renders. An app that
+* sanitises on a server takes its allow-list from here: nothing outside these elements and this
+* attribute ever comes out of the editor, whatever was pasted into it.
+*/
+var RICH_TEXT_ELEMENTS = [
+	"p",
+	"br",
+	"hr",
+	"strong",
+	"em",
+	"u",
+	"ul",
+	"ol",
+	"li",
+	"a"
+];
+/** The attributes each element may carry. Every other element carries none (no class, no style). */
+var RICH_TEXT_ATTRIBUTES = { a: ["href"] };
+/** A link must be absolute and use one of these. `javascript:`, `data:` and relative links are refused. */
+var RICH_TEXT_LINK_PROTOCOLS = [
+	"http",
+	"https",
+	"mailto"
+];
+var isAllowedRichTextHref = (href) => {
+	const cleaned = Array.from(href).filter((char) => char.charCodeAt(0) > 32).join("");
+	const colon = cleaned.indexOf(":");
+	if (colon < 1) return false;
+	const protocol = cleaned.slice(0, colon).toLowerCase();
+	return RICH_TEXT_LINK_PROTOCOLS.includes(protocol);
+};
+//#endregion
+//#region ../ui/src/components/edyn/rich-text-content/rich-text-content.tsx
+/**
+* How rich text looks, shared by the editor and by RichTextContent so a comment reads the same while it is typed and
+* after it is saved. Descendant selectors rather than classes on the elements, because the HTML that is stored carries
+* no classes.
+*/
+var RICH_TEXT_BODY_CLASS = "text-sm leading-6 wrap-break-word [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_hr]:my-3 [&_hr]:border-0 [&_hr]:border-t [&_hr]:border-border [&_ol]:list-decimal [&_ol]:ps-5 [&_p+p]:mt-2 [&_ul]:list-disc [&_ul]:ps-5 [&_ul+p]:mt-2 [&_ol+p]:mt-2 [&_p+ul]:mt-2 [&_p+ol]:mt-2";
+var MENTION_PATTERN = /(?<![\w.+-])@(?:assignees\b|[A-Za-z0-9._%+-]+@[A-Za-z0-9-]+(?:\.[A-Za-z0-9-]+)+)/g;
+var RICH_TEXT_MENTION_CLASS = "rounded-sm bg-primary/10 px-1 py-0.5 font-medium text-primary";
+var TAG_FOR = {
+	b: "strong",
+	i: "em"
+};
+var KEPT = /* @__PURE__ */ new Set([
+	"p",
+	"strong",
+	"em",
+	"u",
+	"ul",
+	"ol",
+	"li",
+	"a",
+	"br",
+	"hr"
+]);
+var DROPPED_WITH_CONTENT = /* @__PURE__ */ new Set([
+	"script",
+	"style",
+	"template",
+	"iframe",
+	"object",
+	"embed",
+	"noscript",
+	"svg",
+	"math",
+	"head",
+	"title"
+]);
+var withMentions = (text, key) => {
+	const parts = [];
+	let last = 0;
+	for (const match of text.matchAll(MENTION_PATTERN)) {
+		const start = match.index ?? 0;
+		if (start > last) parts.push(text.slice(last, start));
+		parts.push(/* @__PURE__ */ jsx("span", {
+			"data-slot": "rich-text-mention",
+			className: RICH_TEXT_MENTION_CLASS,
+			children: match[0]
+		}, `${key}-${start}`));
+		last = start + match[0].length;
+	}
+	if (last < text.length) parts.push(text.slice(last));
+	return parts;
+};
+var toNodes = (parent, key, insideLink) => {
+	const out = [];
+	parent.childNodes.forEach((child, index) => {
+		const childKey = `${key}.${index}`;
+		if (child.nodeType === 3) {
+			const text = child.textContent ?? "";
+			out.push(...insideLink ? [text] : withMentions(text, childKey));
+			return;
+		}
+		if (child.nodeType !== 1) return;
+		const element = child;
+		const name = element.tagName.toLowerCase();
+		if (DROPPED_WITH_CONTENT.has(name)) return;
+		const tag = TAG_FOR[name] ?? name;
+		if (!KEPT.has(tag)) {
+			out.push(...toNodes(element, childKey, insideLink));
+			return;
+		}
+		if (tag === "br") {
+			out.push(/* @__PURE__ */ jsx("br", {}, childKey));
+			return;
+		}
+		if (tag === "hr") {
+			out.push(/* @__PURE__ */ jsx("hr", {}, childKey));
+			return;
+		}
+		if (tag === "a") {
+			const href = element.getAttribute("href") ?? "";
+			const inner = toNodes(element, childKey, true);
+			out.push(...isAllowedRichTextHref(href) ? [/* @__PURE__ */ jsx("a", {
+				href: href.trim(),
+				rel: "noopener noreferrer",
+				target: "_blank",
+				children: inner
+			}, childKey)] : inner);
+			return;
+		}
+		out.push(createElement(tag, { key: childKey }, ...toNodes(element, childKey, insideLink)));
+	});
+	return out;
+};
+/** The HTML as React elements, keeping only what the editor can produce. Browser only (it needs a DOM parser). */
+var richTextToNodes = (html) => {
+	if (typeof DOMParser === "undefined" || html === "") return [];
+	return toNodes(new DOMParser().parseFromString(`<body>${html}`, "text/html").body, "r", false);
+};
+/**
+* Shows rich text the editor produced (or any HTML), as the same elements the editor emits and nothing else:
+* `p`, `br`, `hr`, `strong`, `em`, `u`, `ul`, `ol`, `li` and `a` with an `href` (http, https or mailto; it opens in a new tab
+* with `rel="noopener noreferrer"`). Everything else is dropped and its text kept. Built as React elements, not injected
+* as markup, so it is safe on HTML that has not been cleaned. A run like `@name@example.test` or `@assignees` is shown
+* as a chip.
+*/
+var RichTextContent = ({ html, className, ...props }) => {
+	const nodes = useMemo(() => richTextToNodes(html), [html]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "rich-text-content",
+		className: cn(RICH_TEXT_BODY_CLASS, className),
+		...props,
+		children: nodes
+	});
+};
+//#endregion
+//#region ../ui/src/components/ui/input/input.tsx
+var Input$1 = ({ className, type, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		type,
+		"data-slot": "input",
+		className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+		...props
+	});
+};
+//#endregion
+//#region ../ui/src/components/ui/dropdown-menu/dropdown-menu.tsx
+var DropdownMenu = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+};
+var DropdownMenuPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+};
+var DropdownMenuTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+};
+/**
+* Scrolls inside a DS ScrollArea like the other popup lists, with the bar shown
+* for as long as the menu overflows and a fade on whichever end is cut off.
+*
+* Base UI puts `role="menu"` on this popup itself and offers no inner list part
+* to move it onto, so the ScrollArea sits INSIDE the role. That is only legal
+* because ScrollArea drops the `role="presentation"` Base UI gives its root,
+* viewport and content: a menu may not own presentation wrappers (axe reports
+* a critical aria-required-children violation), but it may own plain divs.
+* e2e/a11y.spec.ts scans the open menu in both themes to keep it that way.
+*/
+var DropdownMenuContent = ({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, children, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", "motion-reduce:animate-none", className),
+			...props,
+			children: /* @__PURE__ */ jsx(ScrollArea$1, {
+				type: "always",
+				fade: true,
+				focusable: false,
+				className: "max-h-inherit",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "p-1",
+					children
+				})
+			})
+		})
+	}) });
+};
+var DropdownMenuGroup = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+};
+var DropdownMenuLabel = ({ className, inset, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn(POPUP_GROUP_LABEL_CLASS, "data-[inset=true]:pl-7", className),
+		...props
+	});
+};
+var DropdownMenuItem = ({ className, inset, variant = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item", popupItemClass(), "data-[inset=true]:pl-7", "data-[variant=destructive]:text-destructive data-[variant=destructive]:[&>svg]:text-destructive", "data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive", className),
+		...props
+	});
+};
+var DropdownMenuSub = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+};
+var DropdownMenuSubTrigger = ({ className, inset, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn(popupItemClass(), "data-[inset=true]:pl-7 data-popup-open:bg-foreground/6 data-popup-open:[&>svg]:text-foreground", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(IconChevronRight, { className: "ml-auto" })]
+	});
+};
+var DropdownMenuSubContent = ({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "motion-reduce:animate-none", className),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		...props
+	});
+};
+var DropdownMenuCheckboxItem = ({ className, children, checked, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn(popupItemClass("base-ui", true), "data-checked:font-medium data-[inset=true]:pl-7", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, {}) })
+		}), children]
+	});
+};
+var DropdownMenuRadioGroup = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+};
+var DropdownMenuRadioItem = ({ className, children, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn(popupItemClass("base-ui", true), "data-checked:font-medium data-[inset=true]:pl-7", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(IconCheck, {}) })
+		}), children]
+	});
+};
+var DropdownMenuSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+};
+var DropdownMenuShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
+		...props
+	});
+};
+//#endregion
+//#region ../ui/src/components/ui/toggle/toggle.tsx
+var toggleVariants = cva("inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-transparent text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-pressed:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\"size-\"])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-transparent hover:bg-muted hover:text-foreground data-pressed:bg-muted",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground data-pressed:bg-muted dark:border-input dark:bg-input/30 dark:hover:bg-input/50"
+		},
+		size: {
+			sm: "h-7 px-2.5 text-[0.8rem]",
+			default: "h-8 px-2.5",
+			lg: "h-9 px-3"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var Toggle$1 = ({ className, variant = "default", size = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Toggle, {
+		"data-slot": "toggle",
+		className: cn(toggleVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+};
+//#endregion
+export { ScrollBar as A, cn as B, RICH_TEXT_ATTRIBUTES as C, POPUP_ITEM_INDICATOR_CLASS as D, isAllowedRichTextHref as E, PopoverHeader as F, PopoverTitle as I, PopoverTrigger as L, Popover$1 as M, PopoverContent as N, popupItemClass as O, PopoverDescription as P, Button$1 as R, richTextToNodes as S, RICH_TEXT_LINK_PROTOCOLS as T, cssLength as V, DropdownMenuTrigger as _, DropdownMenuContent as a, RICH_TEXT_MENTION_CLASS as b, DropdownMenuLabel as c, DropdownMenuRadioItem as d, DropdownMenuSeparator as f, DropdownMenuSubTrigger as g, DropdownMenuSubContent as h, DropdownMenuCheckboxItem as i, useMergedRefs as j, ScrollArea$1 as k, DropdownMenuPortal as l, DropdownMenuSub as m, toggleVariants as n, DropdownMenuGroup as o, DropdownMenuShortcut as p, DropdownMenu as r, DropdownMenuItem as s, Toggle$1 as t, DropdownMenuRadioGroup as u, Input$1 as v, RICH_TEXT_ELEMENTS as w, RichTextContent as x, RICH_TEXT_BODY_CLASS as y, buttonVariants as z };
+
+//# sourceMappingURL=toggle-C2c5oDaE.js.map