beez-ui 0.7.0 → 0.8.0

package/dist/components/pwa-update-control.d.ts

@@ -0,0 +1,18 @@
+export interface PwaUpdateControlLabels {
+    /** Short notice next to the button; hidden on narrow screens. */
+    badge?: string;
+    action?: string;
+}
+export interface PwaUpdateControlProps {
+    labels?: PwaUpdateControlLabels;
+    /** Message posted to the waiting worker so it activates. */
+    skipWaitingMessage?: unknown;
+    className?: string;
+}
+/**
+ * Renders the update notice and action once an update is waiting; nothing otherwise, including
+ * during server rendering and hydration.
+ * @param props - Optional labels, activation message and class name.
+ * @returns The update control, or nothing.
+ */
+export declare function PwaUpdateControl({ labels, skipWaitingMessage, className }: PwaUpdateControlProps): import("react").JSX.Element | null;

package/dist/components/pwa-update-control.js

@@ -0,0 +1,119 @@
+"use client";
+/**
+* Offers to apply a waiting service worker update. It stays hidden until the browser reports a
+* waiting worker, asks it to activate on demand and reloads once the new worker takes control.
+*/
+import { useEffect, useRef, useState } from "react";
+import { RefreshCw } from "lucide-react";
+import { useIsHydrated } from "../hooks/use-is-hydrated.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Message understood by Workbox and most hand-written workers to call `skipWaiting()`. */
+const DEFAULT_SKIP_WAITING_MESSAGE = { type: "SKIP_WAITING" };
+const INSTALLED_WORKER_STATE = "installed";
+const PWA_UPDATE_DEFAULT_LABELS = {
+	badge: "Hay una nueva versión",
+	action: "Actualizar app"
+};
+/**
+* Tells whether the current page can talk to service workers.
+* @returns Whether the Service Worker API is available.
+*/
+function canUseServiceWorker() {
+	return typeof window !== "undefined" && "serviceWorker" in navigator;
+}
+/**
+* Reports a waiting worker now, or as soon as a newly found one finishes installing.
+* @param registration - Registration of the current page.
+* @param onWaiting - Called when an update is ready to activate.
+* @returns A cleanup that stops watching.
+*/
+function watchForWaitingWorker(registration, onWaiting) {
+	if (registration.waiting) onWaiting();
+	const handleUpdateFound = () => {
+		const installingWorker = registration.installing;
+		if (!installingWorker) return;
+		installingWorker.addEventListener("statechange", () => {
+			// Without a controller this is the first install, not an update.
+			if (installingWorker.state === INSTALLED_WORKER_STATE && navigator.serviceWorker.controller) onWaiting();
+		});
+	};
+	registration.addEventListener("updatefound", handleUpdateFound);
+	return () => registration.removeEventListener("updatefound", handleUpdateFound);
+}
+/**
+* Renders the update notice and action once an update is waiting; nothing otherwise, including
+* during server rendering and hydration.
+* @param props - Optional labels, activation message and class name.
+* @returns The update control, or nothing.
+*/
+export function PwaUpdateControl({ labels, skipWaitingMessage = DEFAULT_SKIP_WAITING_MESSAGE, className }) {
+	const resolvedLabels = {
+		...PWA_UPDATE_DEFAULT_LABELS,
+		...labels
+	};
+	const isHydrated = useIsHydrated();
+	const [hasUpdateReady, setHasUpdateReady] = useState(false);
+	const [isApplyingUpdate, setIsApplyingUpdate] = useState(false);
+	const hasReloadedForControllerChange = useRef(false);
+	useEffect(() => {
+		if (!isHydrated || !canUseServiceWorker()) return;
+		let stopWatchingRegistration = () => {};
+		let isDisposed = false;
+		const markUpdateReady = () => {
+			if (!isDisposed) setHasUpdateReady(true);
+		};
+		const handleControllerChange = () => {
+			if (hasReloadedForControllerChange.current) return;
+			hasReloadedForControllerChange.current = true;
+			window.location.reload();
+		};
+		navigator.serviceWorker.addEventListener("controllerchange", handleControllerChange);
+		const attachUpdateWatcher = async () => {
+			const registration = await navigator.serviceWorker.getRegistration();
+			if (!registration || isDisposed) return;
+			stopWatchingRegistration = watchForWaitingWorker(registration, markUpdateReady);
+			// A failed check (offline, server error) keeps the current version without blocking the page.
+			await registration.update().catch(() => undefined);
+			if (registration.waiting) markUpdateReady();
+		};
+		void attachUpdateWatcher();
+		return () => {
+			isDisposed = true;
+			stopWatchingRegistration();
+			navigator.serviceWorker.removeEventListener("controllerchange", handleControllerChange);
+		};
+	}, [isHydrated]);
+	const applyUpdate = async () => {
+		setIsApplyingUpdate(true);
+		try {
+			const registration = await navigator.serviceWorker.getRegistration();
+			if (!registration) return;
+			if (!registration.waiting) await registration.update();
+			registration.waiting?.postMessage(skipWaitingMessage);
+		} catch (updateError) {
+			console.error("PwaUpdateControl:applyUpdate failed to activate the waiting service worker", updateError);
+		} finally {
+			setIsApplyingUpdate(false);
+		}
+	};
+	if (!isHydrated || !canUseServiceWorker() || !hasUpdateReady) return null;
+	return /* @__PURE__ */ _jsxs("div", {
+		"data-slot": "pwa-update-control",
+		className: cn("inline-flex items-center gap-[0.45rem]", className),
+		children: [/* @__PURE__ */ _jsx("span", {
+			className: "hidden items-center rounded-full border border-[color-mix(in_srgb,var(--border)_84%,var(--primary)_16%)] bg-[color-mix(in_srgb,var(--muted)_90%,var(--primary)_10%)] px-2 py-[0.1rem] text-[0.72rem] leading-tight text-[color-mix(in_srgb,var(--foreground)_78%,var(--primary)_22%)] sm:inline-flex",
+			children: resolvedLabels.badge
+		}), /* @__PURE__ */ _jsxs(Button, {
+			disabled: isApplyingUpdate,
+			size: "sm",
+			type: "button",
+			onClick: () => void applyUpdate(),
+			children: [/* @__PURE__ */ _jsx(RefreshCw, {
+				"aria-hidden": "true",
+				className: cn(isApplyingUpdate && "animate-spin")
+			}), resolvedLabels.action]
+		})]
+	});
+}

package/dist/components/reaction-button.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Toggle for likes and similar reactions: the icon pops when the viewer reacts and the counter
+ * rolls in the direction of the change. The (optimistic) reaction state is owned by the caller.
+ */
+import type { ComponentType, MouseEvent, SVGProps } from "react";
+export interface ReactionButtonProps {
+    /** Accessible name, including the current count (for example "Me gusta 3"). */
+    ariaLabel: string;
+    isActive: boolean;
+    count: number;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    isDisabled?: boolean;
+    /** Icon of the reaction. While active it is filled with the destructive color; override it with `[&_svg]:` classes. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Formats the visible count, for example with a locale-aware compact format. */
+    formatCount?: (count: number) => string;
+    className?: string;
+}
+/**
+ * Renders an outline toggle button exposing its state with `aria-pressed`. The icon starts at
+ * rest (`initial={false}`), so server-rendered and already-active reactions never pop on load;
+ * only a change to active does, and not at all with reduced motion.
+ * @param props - Accessible name, state, count, click handler and optional icon.
+ * @returns The reaction button.
+ */
+export declare function ReactionButton({ ariaLabel, isActive, count, onClick, isDisabled, icon: Icon, formatCount, className, }: ReactionButtonProps): import("react").JSX.Element;

package/dist/components/reaction-button.js

@@ -0,0 +1,114 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { HeartIcon } from "lucide-react";
+import { motion } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { MOTION_EASE, MOTION_TIMING } from "../motion/tokens.js";
+import { AnimatedCount } from "./animated-count.js";
+import { Button } from "./button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Peak scale the icon reaches while popping into the active state. */
+const REACTION_ICON_POP_SCALE = 1.28;
+const REACTION_ICON_VARIANTS = {
+	idle: { scale: 1 },
+	active: {
+		scale: [
+			1,
+			REACTION_ICON_POP_SCALE,
+			1
+		],
+		transition: {
+			duration: MOTION_TIMING.pop,
+			ease: MOTION_EASE
+		}
+	}
+};
+/**
+* Renders an outline toggle button exposing its state with `aria-pressed`. The icon starts at
+* rest (`initial={false}`), so server-rendered and already-active reactions never pop on load;
+* only a change to active does, and not at all with reduced motion.
+* @param props - Accessible name, state, count, click handler and optional icon.
+* @returns The reaction button.
+*/
+export function ReactionButton(t0) {
+	const $ = _c(19);
+	const { ariaLabel, isActive, count, onClick, isDisabled: t1, icon: t2, formatCount, className } = t0;
+	const isDisabled = t1 === undefined ? false : t1;
+	const Icon = t2 === undefined ? HeartIcon : t2;
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const t3 = isActive || undefined;
+	let t4;
+	if ($[0] !== className) {
+		t4 = cn("group/reaction", className);
+		$[0] = className;
+		$[1] = t4;
+	} else {
+		t4 = $[1];
+	}
+	const t5 = isActive && !shouldReduceMotion ? "active" : "idle";
+	let t6;
+	if ($[2] !== Icon) {
+		t6 = /* @__PURE__ */ _jsx(Icon, { className: "size-4 transition-[fill,color] group-data-active/reaction:fill-current group-data-active/reaction:text-destructive" });
+		$[2] = Icon;
+		$[3] = t6;
+	} else {
+		t6 = $[3];
+	}
+	let t7;
+	if ($[4] !== t5 || $[5] !== t6) {
+		t7 = /* @__PURE__ */ _jsx(motion.span, {
+			animate: t5,
+			"aria-hidden": true,
+			className: "inline-flex origin-center items-center justify-center",
+			initial: false,
+			variants: REACTION_ICON_VARIANTS,
+			children: t6
+		});
+		$[4] = t5;
+		$[5] = t6;
+		$[6] = t7;
+	} else {
+		t7 = $[6];
+	}
+	let t8;
+	if ($[7] !== count || $[8] !== formatCount) {
+		t8 = /* @__PURE__ */ _jsx(AnimatedCount, {
+			className: "min-w-[1ch]",
+			value: count,
+			format: formatCount
+		});
+		$[7] = count;
+		$[8] = formatCount;
+		$[9] = t8;
+	} else {
+		t8 = $[9];
+	}
+	let t9;
+	if ($[10] !== ariaLabel || $[11] !== isActive || $[12] !== isDisabled || $[13] !== onClick || $[14] !== t3 || $[15] !== t4 || $[16] !== t7 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs(Button, {
+			"data-slot": "reaction-button",
+			"data-active": t3,
+			"aria-label": ariaLabel,
+			"aria-pressed": isActive,
+			className: t4,
+			disabled: isDisabled,
+			onClick,
+			type: "button",
+			variant: "outline",
+			children: [t7, t8]
+		});
+		$[10] = ariaLabel;
+		$[11] = isActive;
+		$[12] = isDisabled;
+		$[13] = onClick;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else {
+		t9 = $[18];
+	}
+	return t9;
+}

package/dist/components/rich-link-editor.d.ts

@@ -0,0 +1,25 @@
+import type { RichLinkEditorController } from "../hooks/use-rich-link-editor.js";
+/** Copy for the link popover. Every entry is optional and defaults to Spanish. */
+export type RichLinkEditorCopy = {
+    editAction: string;
+    editCancel: string;
+    editSave: string;
+    popoverTextLabel: string;
+    popoverUrlLabel: string;
+    removeAction: string;
+};
+export type RichLinkEditorProps = {
+    ariaLabel: string;
+    copy?: Partial<RichLinkEditorCopy>;
+    editor: RichLinkEditorController;
+    placeholder: string;
+    ariaDescribedBy?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+};
+/**
+ * `contentEditable` rich link editor: renders the controller's preview segments,
+ * turning each link into a popover that edits or removes it. All state lives in
+ * the `useRichLinkEditor` controller; this component is presentation only.
+ */
+export declare function RichLinkEditor({ ariaDescribedBy, ariaLabel, copy: copyOverrides, editor, isDisabled, isInvalid, placeholder, }: RichLinkEditorProps): import("react").JSX.Element;

package/dist/components/rich-link-editor.js

@@ -0,0 +1,320 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** `contentEditable` editor for plain text with markdown links, driven by `useRichLinkEditor`. */
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/utils.js";
+import { RICH_LINK_POPOVER_MODE, RICH_TEXT_EDITOR_KEY, RICH_TEXT_SEGMENT_TYPE } from "../lib/rich-text/link-markdown-constants.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BUTTON_TYPE = "button";
+const BUTTON_VARIANT = {
+	ghost: "ghost",
+	outline: "outline"
+};
+const URL_INPUT_TYPE = "url";
+const LINK_TARGET = "_blank";
+const LINK_REL = "noreferrer";
+/**
+* Presentation of each part. iOS Safari zooms the page when a focused editable region renders
+* text below 16px, so the editor and the inputs are pinned to 1rem on phones.
+*/
+const RICH_LINK_EDITOR_CLASS_NAMES = {
+	editor: "min-h-28 w-full cursor-text border-0 bg-background p-0 leading-[1.65] whitespace-pre-wrap text-foreground [font:inherit] [overflow-wrap:anywhere] focus:outline-0 empty:before:pointer-events-none empty:before:text-muted-foreground/75 empty:before:content-[attr(data-placeholder)] max-md:text-base",
+	editorInvalid: "rounded-[0.35rem] shadow-[inset_0_-2px_0_var(--destructive)] outline-0",
+	editorLink: "cursor-pointer rounded-[0.2rem] font-bold text-primary underline decoration-[0.08em] underline-offset-[0.18em] transition-colors hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+	popover: "gap-3",
+	editForm: "grid gap-3 animate-in fade-in slide-in-from-bottom-1 duration-200",
+	actions: "flex flex-wrap items-center gap-2",
+	label: "grid gap-[0.35rem] text-[0.85rem] font-bold text-muted-foreground",
+	input: "min-h-8 rounded-lg border border-border/80 bg-background px-[0.65rem] font-normal text-foreground outline-0 transition-[border-color,box-shadow] [font:inherit] focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--ring)_35%,transparent)] aria-invalid:border-destructive aria-invalid:focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--destructive)_25%,transparent)] max-md:text-base"
+};
+const RICH_LINK_EDITOR_DEFAULT_COPY = {
+	editAction: "Editar",
+	editCancel: "Cancelar",
+	editSave: "Guardar",
+	popoverTextLabel: "Texto",
+	popoverUrlLabel: "Enlace",
+	removeAction: "Quitar enlace"
+};
+/**
+* `contentEditable` rich link editor: renders the controller's preview segments,
+* turning each link into a popover that edits or removes it. All state lives in
+* the `useRichLinkEditor` controller; this component is presentation only.
+*/
+export function RichLinkEditor(t0) {
+	const $ = _c(50);
+	const { ariaDescribedBy, ariaLabel, copy: copyOverrides, editor, isDisabled: t1, isInvalid: t2, placeholder } = t0;
+	const isDisabled = t1 === undefined ? false : t1;
+	const isInvalid = t2 === undefined ? false : t2;
+	const { activeLink, closeLinkPopover, handleBeforeInput, handleInput, handleKeyDown, handlePaste, hasContent, hasInvalidLinkUrl, isLinkEditValid, linkTextInput, linkUrlInput, openLinkPopover, popoverMode, removeLink, saveLinkEdit, segments, setEditorElement, setLinkTextInput, setLinkUrlInput, setPopoverMode } = editor;
+	let t3;
+	if ($[0] !== copyOverrides) {
+		t3 = {
+			...RICH_LINK_EDITOR_DEFAULT_COPY,
+			...copyOverrides
+		};
+		$[0] = copyOverrides;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	const copy = t3;
+	const linkTextInputRef = useRef(null);
+	const isEditingLink = popoverMode === RICH_LINK_POPOVER_MODE.edit;
+	const t4 = isInvalid && RICH_LINK_EDITOR_CLASS_NAMES.editorInvalid;
+	let t5;
+	if ($[2] !== t4) {
+		t5 = cn(RICH_LINK_EDITOR_CLASS_NAMES.editor, t4);
+		$[2] = t4;
+		$[3] = t5;
+	} else {
+		t5 = $[3];
+	}
+	const editorClassName = t5;
+	let t6;
+	let t7;
+	if ($[4] !== closeLinkPopover || $[5] !== isDisabled) {
+		t6 = () => {
+			if (isDisabled) {
+				closeLinkPopover();
+			}
+		};
+		t7 = [closeLinkPopover, isDisabled];
+		$[4] = closeLinkPopover;
+		$[5] = isDisabled;
+		$[6] = t6;
+		$[7] = t7;
+	} else {
+		t6 = $[6];
+		t7 = $[7];
+	}
+	useEffect(t6, t7);
+	let t8;
+	if ($[8] !== isEditingLink) {
+		t8 = () => {
+			if (isEditingLink) {
+				linkTextInputRef.current?.focus();
+			}
+		};
+		$[8] = isEditingLink;
+		$[9] = t8;
+	} else {
+		t8 = $[9];
+	}
+	const t9 = activeLink?.key;
+	let t10;
+	if ($[10] !== isEditingLink || $[11] !== t9) {
+		t10 = [isEditingLink, t9];
+		$[10] = isEditingLink;
+		$[11] = t9;
+		$[12] = t10;
+	} else {
+		t10 = $[12];
+	}
+	useEffect(t8, t10);
+	let t11;
+	if ($[13] !== activeLink || $[14] !== isLinkEditValid || $[15] !== saveLinkEdit) {
+		t11 = (event) => {
+			if (event.key !== RICH_TEXT_EDITOR_KEY.enter) {
+				return;
+			}
+			event.preventDefault();
+			if (activeLink && isLinkEditValid) {
+				saveLinkEdit(activeLink);
+			}
+		};
+		$[13] = activeLink;
+		$[14] = isLinkEditValid;
+		$[15] = saveLinkEdit;
+		$[16] = t11;
+	} else {
+		t11 = $[16];
+	}
+	const handleEditFieldKeyDown = t11;
+	const t12 = !isDisabled;
+	let t13;
+	if ($[17] !== activeLink || $[18] !== closeLinkPopover || $[19] !== copy || $[20] !== handleEditFieldKeyDown || $[21] !== hasContent || $[22] !== hasInvalidLinkUrl || $[23] !== isDisabled || $[24] !== isLinkEditValid || $[25] !== linkTextInput || $[26] !== linkUrlInput || $[27] !== openLinkPopover || $[28] !== popoverMode || $[29] !== removeLink || $[30] !== saveLinkEdit || $[31] !== segments || $[32] !== setLinkTextInput || $[33] !== setLinkUrlInput || $[34] !== setPopoverMode) {
+		t13 = hasContent ? segments.map((segment) => segment.type === RICH_TEXT_SEGMENT_TYPE.link ? isDisabled ? /* @__PURE__ */ _jsx("a", {
+			"aria-disabled": true,
+			className: RICH_LINK_EDITOR_CLASS_NAMES.editorLink,
+			href: segment.url,
+			onClick: _temp,
+			rel: LINK_REL,
+			tabIndex: -1,
+			target: LINK_TARGET,
+			children: segment.text
+		}, segment.key) : /* @__PURE__ */ _jsxs(Popover, {
+			onOpenChange: (isOpen) => {
+				if (isOpen) {
+					openLinkPopover(segment);
+				} else {
+					if (activeLink?.key === segment.key) {
+						closeLinkPopover();
+					}
+				}
+			},
+			open: activeLink?.key === segment.key,
+			children: [/* @__PURE__ */ _jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ _jsx("a", {
+					className: RICH_LINK_EDITOR_CLASS_NAMES.editorLink,
+					href: segment.url,
+					onClick: (event_1) => {
+						event_1.preventDefault();
+						openLinkPopover(segment);
+					},
+					rel: LINK_REL,
+					target: LINK_TARGET,
+					children: segment.text
+				})
+			}), /* @__PURE__ */ _jsx(PopoverContent, {
+				className: RICH_LINK_EDITOR_CLASS_NAMES.popover,
+				onBeforeInput: _temp2,
+				onInput: _temp3,
+				onKeyDown: _temp4,
+				onPaste: _temp5,
+				children: popoverMode === RICH_LINK_POPOVER_MODE.actions ? /* @__PURE__ */ _jsxs("div", {
+					className: RICH_LINK_EDITOR_CLASS_NAMES.actions,
+					children: [/* @__PURE__ */ _jsx(Button, {
+						onClick: () => {
+							setPopoverMode(RICH_LINK_POPOVER_MODE.edit);
+						},
+						type: BUTTON_TYPE,
+						variant: BUTTON_VARIANT.ghost,
+						children: copy.editAction
+					}), /* @__PURE__ */ _jsx(Button, {
+						onClick: () => {
+							removeLink(segment);
+						},
+						type: BUTTON_TYPE,
+						variant: BUTTON_VARIANT.ghost,
+						children: copy.removeAction
+					})]
+				}) : /* @__PURE__ */ _jsxs("div", {
+					className: RICH_LINK_EDITOR_CLASS_NAMES.editForm,
+					children: [
+						/* @__PURE__ */ _jsxs("label", {
+							className: RICH_LINK_EDITOR_CLASS_NAMES.label,
+							children: [/* @__PURE__ */ _jsx("span", { children: copy.popoverTextLabel }), /* @__PURE__ */ _jsx("input", {
+								className: RICH_LINK_EDITOR_CLASS_NAMES.input,
+								onChange: (event_6) => {
+									setLinkTextInput(event_6.currentTarget.value);
+								},
+								onKeyDown: handleEditFieldKeyDown,
+								ref: linkTextInputRef,
+								value: linkTextInput
+							})]
+						}),
+						/* @__PURE__ */ _jsxs("label", {
+							className: RICH_LINK_EDITOR_CLASS_NAMES.label,
+							children: [/* @__PURE__ */ _jsx("span", { children: copy.popoverUrlLabel }), /* @__PURE__ */ _jsx("input", {
+								"aria-invalid": hasInvalidLinkUrl,
+								className: RICH_LINK_EDITOR_CLASS_NAMES.input,
+								onChange: (event_7) => {
+									setLinkUrlInput(event_7.currentTarget.value);
+								},
+								onKeyDown: handleEditFieldKeyDown,
+								type: URL_INPUT_TYPE,
+								value: linkUrlInput
+							})]
+						}),
+						/* @__PURE__ */ _jsxs("div", {
+							className: RICH_LINK_EDITOR_CLASS_NAMES.actions,
+							children: [/* @__PURE__ */ _jsx(Button, {
+								disabled: !isLinkEditValid,
+								onClick: () => {
+									if (activeLink) {
+										saveLinkEdit(activeLink);
+									}
+								},
+								type: BUTTON_TYPE,
+								children: copy.editSave
+							}), /* @__PURE__ */ _jsx(Button, {
+								onClick: closeLinkPopover,
+								type: BUTTON_TYPE,
+								variant: BUTTON_VARIANT.outline,
+								children: copy.editCancel
+							})]
+						})
+					]
+				})
+			})]
+		}, segment.key) : segment.text) : null;
+		$[17] = activeLink;
+		$[18] = closeLinkPopover;
+		$[19] = copy;
+		$[20] = handleEditFieldKeyDown;
+		$[21] = hasContent;
+		$[22] = hasInvalidLinkUrl;
+		$[23] = isDisabled;
+		$[24] = isLinkEditValid;
+		$[25] = linkTextInput;
+		$[26] = linkUrlInput;
+		$[27] = openLinkPopover;
+		$[28] = popoverMode;
+		$[29] = removeLink;
+		$[30] = saveLinkEdit;
+		$[31] = segments;
+		$[32] = setLinkTextInput;
+		$[33] = setLinkUrlInput;
+		$[34] = setPopoverMode;
+		$[35] = t13;
+	} else {
+		t13 = $[35];
+	}
+	let t14;
+	if ($[36] !== ariaDescribedBy || $[37] !== ariaLabel || $[38] !== editorClassName || $[39] !== handleBeforeInput || $[40] !== handleInput || $[41] !== handleKeyDown || $[42] !== handlePaste || $[43] !== isDisabled || $[44] !== isInvalid || $[45] !== placeholder || $[46] !== setEditorElement || $[47] !== t12 || $[48] !== t13) {
+		t14 = /* @__PURE__ */ _jsx("div", {
+			"aria-describedby": ariaDescribedBy,
+			"aria-disabled": isDisabled,
+			"aria-invalid": isInvalid,
+			"aria-label": ariaLabel,
+			"aria-multiline": true,
+			className: editorClassName,
+			"data-slot": "rich-link-editor",
+			contentEditable: t12,
+			"data-placeholder": placeholder,
+			onBeforeInput: handleBeforeInput,
+			onInput: handleInput,
+			onKeyDown: handleKeyDown,
+			onPaste: handlePaste,
+			ref: setEditorElement,
+			role: "textbox",
+			suppressContentEditableWarning: true,
+			children: t13
+		});
+		$[36] = ariaDescribedBy;
+		$[37] = ariaLabel;
+		$[38] = editorClassName;
+		$[39] = handleBeforeInput;
+		$[40] = handleInput;
+		$[41] = handleKeyDown;
+		$[42] = handlePaste;
+		$[43] = isDisabled;
+		$[44] = isInvalid;
+		$[45] = placeholder;
+		$[46] = setEditorElement;
+		$[47] = t12;
+		$[48] = t13;
+		$[49] = t14;
+	} else {
+		t14 = $[49];
+	}
+	return t14;
+}
+function _temp5(event_5) {
+	event_5.stopPropagation();
+}
+function _temp4(event_4) {
+	event_4.stopPropagation();
+}
+function _temp3(event_3) {
+	event_3.stopPropagation();
+}
+function _temp2(event_2) {
+	event_2.stopPropagation();
+}
+function _temp(event_0) {
+	event_0.preventDefault();
+}

package/dist/components/rich-markdown-content.d.ts

@@ -0,0 +1,10 @@
+export interface RichMarkdownContentProps {
+    content: string;
+    className?: string;
+}
+/**
+ * Parses and renders the content as paragraphs and lists.
+ * @param props - Stored content and optional class name.
+ * @returns The rendered blocks.
+ */
+export declare function RichMarkdownContent({ content, className }: RichMarkdownContentProps): import("react").JSX.Element;

package/dist/components/rich-markdown-content.js

@@ -0,0 +1,56 @@
+/**
+* Renders long-form content with a safe markdown subset: paragraphs, unordered lists, inline
+* bold and the shared link syntax. Raw HTML in the content is never interpreted as markup.
+*/
+import { cn } from "../lib/utils.js";
+import { RICH_MARKDOWN_BLOCK_TYPE, RICH_MARKDOWN_INLINE_TYPE, parseRichMarkdownBlocks } from "../lib/rich-text/rich-markdown.js";
+import { RICH_TEXT_LINK_CLASS_NAME } from "./rich-text-content.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const LINK_TARGET = "_blank";
+const LINK_REL = "noreferrer";
+/**
+* Renders the inline pieces of a paragraph or list item.
+* @param segments - Parsed inline segments.
+* @returns Text, bold runs and links.
+*/
+function renderInlineSegments(segments) {
+	return segments.map((segment, segmentIndex) => {
+		const segmentKey = segment.type + String(segmentIndex);
+		if (segment.type === RICH_MARKDOWN_INLINE_TYPE.link) {
+			return /* @__PURE__ */ _jsx("a", {
+				"data-slot": "rich-text-link",
+				className: RICH_TEXT_LINK_CLASS_NAME,
+				href: segment.url,
+				rel: LINK_REL,
+				target: LINK_TARGET,
+				children: segment.text
+			}, segmentKey);
+		}
+		if (segment.type === RICH_MARKDOWN_INLINE_TYPE.bold) {
+			return /* @__PURE__ */ _jsx("strong", { children: segment.text }, segmentKey);
+		}
+		return segment.text;
+	});
+}
+/**
+* Parses and renders the content as paragraphs and lists.
+* @param props - Stored content and optional class name.
+* @returns The rendered blocks.
+*/
+export function RichMarkdownContent({ content, className }) {
+	const blocks = parseRichMarkdownBlocks(content);
+	return /* @__PURE__ */ _jsx("div", {
+		"data-slot": "rich-markdown-content",
+		className: cn("grid gap-[0.9rem]", className),
+		children: blocks.map((block, blockIndex) => block.type === RICH_MARKDOWN_BLOCK_TYPE.list ? /* @__PURE__ */ _jsx("ul", {
+			className: "m-0 grid list-disc gap-[0.35rem] pl-[1.4rem]",
+			children: block.items.map((itemSegments, itemIndex) => /* @__PURE__ */ _jsx("li", {
+				className: "leading-[1.7] [overflow-wrap:anywhere] marker:text-muted-foreground",
+				children: renderInlineSegments(itemSegments)
+			}, block.type + String(blockIndex) + String(itemIndex)))
+		}, block.type + String(blockIndex)) : /* @__PURE__ */ _jsx("p", {
+			className: "m-0 leading-[1.7] whitespace-pre-wrap [overflow-wrap:anywhere]",
+			children: renderInlineSegments(block.segments)
+		}, block.type + String(blockIndex)))
+	});
+}