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

package/dist/ui/src/components/edyn/multi-select/multi-select.d.ts

@@ -30,6 +30,12 @@ export interface IMultiSelectProps {
     options: readonly TMultiSelectOption[];
     value: readonly string[];
     onValueChange: (value: string[]) => void;
+    /**
+     * What the trigger says once something is chosen. `selection` (default) names the one chosen or counts several;
+     * `label` keeps the label and only counts, so a value the page shows elsewhere (as a removable chip, say) is
+     * not repeated here: nothing chosen reads `placeholder`, anything chosen reads `labels.selectedCount(n)`.
+     */
+    summary?: 'selection' | 'label';
     /** For a Label's htmlFor. */
     id?: string;
     'aria-label'?: string;
@@ -73,7 +79,9 @@ export interface IMultiSelectProps {
  */
 export declare const resolveChosen: (value: readonly string[], options: readonly TMultiSelectOption[], selectedOptions?: readonly TMultiSelectOption[]) => TMultiSelectOption[];
 /** What the trigger says: the placeholder, the one picked, or a count. */
-export declare const summarize: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels) => string;
+export declare const summarize: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels, summary?: "selection" | "label") => string;
+/** Every chosen name, for a tooltip on a trigger whose text is cut. With `label` the names are not shown, so it is the text itself. */
+export declare const fullSelection: (chosen: readonly TMultiSelectOption[], placeholder: string, labels: IMultiSelectLabels, summary?: "selection" | "label") => string;
 /**
  * A choice of several from a list: a trigger shaped like a Select that says what is picked
  * (the placeholder, the one picked, or a count), and a popup with a search field and checkbox
@@ -85,4 +93,4 @@ export declare const summarize: (chosen: readonly TMultiSelectOption[], placehol
  * server: the caller fetches the options for the typed text, and says when they are loading,
  * failed, or have another page.
  */
-export declare const MultiSelect: ({ placeholder, searchPlaceholder, options, value, onValueChange, id, disabled, className, onSearchChange, searchDelay, selectedOptions, loading, error, onRetry, hasMore, onLoadMore, loadingMore, labels: labelOverrides, ...rest }: IMultiSelectProps) => import('react').JSX.Element;
+export declare const MultiSelect: ({ placeholder, searchPlaceholder, options, value, onValueChange, id, disabled, className, onSearchChange, searchDelay, selectedOptions, loading, error, onRetry, hasMore, onLoadMore, loadingMore, labels: labelOverrides, summary, ...rest }: IMultiSelectProps) => import('react').JSX.Element;

package/dist/ui/src/components/edyn/rich-text-content/allow-list.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+export declare const RICH_TEXT_ELEMENTS: readonly ["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). */
+export declare const RICH_TEXT_ATTRIBUTES: Readonly<Record<string, readonly string[]>>;
+/** A link must be absolute and use one of these. `javascript:`, `data:` and relative links are refused. */
+export declare const RICH_TEXT_LINK_PROTOCOLS: readonly ["http", "https", "mailto"];
+export declare const isAllowedRichTextHref: (href: string) => boolean;

package/dist/ui/src/components/edyn/rich-text-content/index.d.ts

@@ -0,0 +1,2 @@
+export * from './allow-list';
+export * from './rich-text-content';

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

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * 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.
+ */
+export declare const 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";
+export declare const RICH_TEXT_MENTION_CLASS = "rounded-sm bg-primary/10 px-1 py-0.5 font-medium text-primary";
+/** The HTML as React elements, keeping only what the editor can produce. Browser only (it needs a DOM parser). */
+export declare const richTextToNodes: (html: string) => ReactNode[];
+export interface IRichTextContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> {
+    /** The HTML to show. Only the editor's elements are rendered, whatever else it holds. */
+    html: string;
+}
+/**
+ * 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.
+ */
+export declare const RichTextContent: ({ html, className, ...props }: IRichTextContentProps) => import('react').JSX.Element;

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

@@ -0,0 +1,8 @@
+/**
+ * RichTextContent shows saved HTML as the editor's own elements and nothing else. It is built as React elements,
+ * so these assertions read the markup it renders: a script or a javascript: link that survived would show here.
+ *
+ * PATH TAKEN: happy-dom parses the input (DOMParser) and renderToStaticMarkup prints the result, which is enough
+ * for what this component decides (what stays, what goes, what is added). How it looks is the browser spec's.
+ */
+export {};

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

@@ -0,0 +1,18 @@
+import { Extension } from '@tiptap/core';
+import { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
+import { TMentionToText } from './serialize';
+import { IRichTextMentionItem } from './types';
+/** What the editor needs from the component while it runs. Held in a ref, so the extensions are built once. */
+export interface IEditorHost {
+    mentionEnabled: () => boolean;
+    maxLength: () => number | undefined;
+    toText: () => TMentionToText;
+    onSuggestion: (props: SuggestionProps<IRichTextMentionItem, IRichTextMentionItem> | null) => void;
+    onSuggestionKey: (props: SuggestionKeyDownProps) => boolean;
+}
+/**
+ * The editor's whole schema: paragraph, line break, bold, italic, underline, bullet and numbered lists, link, and the
+ * mention chip. Whatever else arrives (a paste, `value`) is not in the schema, so ProseMirror drops the markup and keeps
+ * the text.
+ */
+export declare const buildExtensions: (host: IEditorHost) => (Extension<any, any> | import('@tiptap/core').Node<any, any> | import('@tiptap/core').Node<import('@tiptap/extension-paragraph').ParagraphOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-hard-break').HardBreakOptions, any> | import('@tiptap/core').Mark<import('@tiptap/extension-bold').BoldOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-list').BulletListOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-list').ListItemOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-horizontal-rule').HorizontalRuleOptions, any> | import('@tiptap/core').Mark<import('@tiptap/extension-link').LinkOptions, any> | Extension<import('@tiptap/extensions').UndoRedoOptions, any> | import('@tiptap/core').Node<import('@tiptap/extension-mention').MentionOptions<any, import('@tiptap/extension-mention').MentionNodeAttrs>, any>)[];

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

@@ -0,0 +1,3 @@
+export { RICH_TEXT_ATTRIBUTES, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS } from '../rich-text-content/allow-list';
+export * from './rich-text-editor';
+export * from './types';

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

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { IRichTextLabels, IRichTextMention, IRichTextMentionItem } from './types';
+export interface IMentionListProps {
+    query: string;
+    /** Where the @ was typed. */
+    rect: (() => DOMRect | null) | null;
+    config: IRichTextMention;
+    labels: IRichTextLabels;
+    listId: string;
+    onPick: (item: IRichTextMentionItem) => void;
+    /** The editor keeps focus, so the list is driven by its keys: the editor calls this one. */
+    keyHandler: RefObject<((event: KeyboardEvent) => boolean) | null>;
+    /** The id of the option the editor should name as `aria-activedescendant`. */
+    onActiveChange: (optionId: string | undefined) => void;
+}
+/** The list that opens under the caret when the writer types @. */
+export declare const MentionList: ({ query, rect, config, labels, listId, onPick, keyHandler, onActiveChange }: IMentionListProps) => import('react').JSX.Element;

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

@@ -0,0 +1,53 @@
+import { ComponentPropsWithoutRef, Ref } from 'react';
+import { IRichTextEditorHandle, IRichTextField, IRichTextLabels, IRichTextMention } from './types';
+export interface IRichTextEditorProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'id'> {
+    /** The HTML, when the parent owns it. Pass back what `onChange` gave. An empty editor is `""`. */
+    value?: string;
+    /** The HTML to start from when the editor owns its own value. */
+    defaultValue?: string;
+    /** Called with the HTML after every edit. Only the elements in `RICH_TEXT_ELEMENTS` can appear, and `""` when there is no text. */
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Shows the content and keeps it selectable and copyable, with no toolbar. */
+    readOnly?: boolean;
+    /** Draws the error border and sets `aria-invalid`. The message is the form's to draw: point `aria-describedby` at it. */
+    invalid?: boolean;
+    /**
+     * Lines the box is tall when empty.
+     * @default 6
+     */
+    minRows?: number;
+    /**
+     * Lines it grows to before it scrolls inside.
+     * @default 20
+     */
+    maxRows?: number;
+    /** The most characters of text (a mention counts as the text it is written as). An edit past it is refused. Off by default. */
+    maxLength?: number;
+    /** Turns @ into a search the app answers. Without it, @ is an ordinary character. */
+    mention?: IRichTextMention;
+    /** Adds an "Insert a field" menu that writes `{{id}}` at the caret. */
+    fields?: IRichTextField[];
+    /**
+     * Whether the formatting toolbar shows.
+     * @default true
+     */
+    toolbar?: boolean;
+    /** Replaces any of the strings the editor shows (the defaults are English). */
+    labels?: Partial<IRichTextLabels>;
+    /** On the editable element, so a form can name it. */
+    id?: string;
+    autoFocus?: boolean;
+    /** Called with the files when the writer pastes only files (a screenshot). Without it, such a paste does nothing. */
+    onPasteFiles?: (files: File[]) => void;
+    /** Gives `insertText` and `focus`, for buttons outside the editor. */
+    ref?: Ref<IRichTextEditorHandle>;
+}
+/**
+ * A small rich-text field: paragraphs, bold, italic, underline, bulleted and numbered lists and links, with optional
+ * @mentions the app answers asynchronously. The value is HTML in and out, and only the elements in `RICH_TEXT_ELEMENTS`
+ * can come out (no class, no style), whatever is pasted. A mention is a chip while editing and plain text in the HTML.
+ * The server should still sanitise: this is a convenience for the writer, not a security boundary.
+ */
+export declare const RichTextEditor: ({ value, defaultValue, onChange, placeholder, disabled, readOnly, invalid, minRows, maxRows, maxLength, mention, fields, toolbar, labels, id, autoFocus, onPasteFiles, ref, className, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: IRichTextEditorProps) => import('react').JSX.Element;

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

@@ -0,0 +1,6 @@
+/**
+ * The editor's schema decides what HTML can come out, whatever goes in. These tests drive the real extension set
+ * through a headless ProseMirror editor and read what it serialises, so the allow-list the docs promise is the one
+ * that is checked. Typing, focus and the mention list need a real browser: e2e/rich-text-editor.spec.ts.
+ */
+export {};

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

@@ -0,0 +1,13 @@
+import { Node as TProseNode } from '@tiptap/pm/model';
+import { IRichTextMention } from './types';
+export type TMentionToText = NonNullable<IRichTextMention['toText']>;
+export declare const defaultMentionToText: TMentionToText;
+/**
+ * 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.
+ */
+export declare const serializeDocument: (doc: TProseNode, toText: TMentionToText) => string;
+/** No text and no mention. A document of blank paragraphs, spaces and line breaks is empty too. */
+export declare const isDocumentEmpty: (doc: TProseNode) => boolean;
+/** Characters the HTML text will have: a mention counts as the text it is written as. */
+export declare const countCharacters: (doc: TProseNode, toText: TMentionToText) => number;

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/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/ui/popover/popover.d.ts

@@ -2,7 +2,7 @@ import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import type * as React from 'react';
 export declare const Popover: ({ ...props }: PopoverPrimitive.Root.Props) => React.JSX.Element;
 export declare const PopoverTrigger: ({ ...props }: PopoverPrimitive.Trigger.Props) => React.JSX.Element;
-export declare const PopoverContent: ({ className, align, alignOffset, side, sideOffset, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) => React.JSX.Element;
+export declare const PopoverContent: ({ className, align, alignOffset, side, sideOffset, anchor, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "anchor" | "side" | "sideOffset">) => React.JSX.Element;
 export declare const PopoverHeader: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
 export declare const PopoverTitle: ({ className, ...props }: PopoverPrimitive.Title.Props) => React.JSX.Element;
 export declare const PopoverDescription: ({ className, ...props }: PopoverPrimitive.Description.Props) => React.JSX.Element;

package/dist/ui/src/components/ui/progress/progress.d.ts

@@ -1,13 +1,47 @@
 import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
 import { VariantProps } from 'class-variance-authority';
-declare const progressIndicatorVariants: (props?: ({
-    tone?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+/**
+ * The tones: a closed set of semantic colours rather than a class string, so a bar cannot carry a
+ * colour the theme does not define and dark mode and a re-theme keep working. Each is the theme token
+ * the fill uses; the track is a 20% tint of the same token.
+ */
+declare const TONE_TOKEN: {
+    readonly default: "var(--primary)";
+    readonly info: "var(--info)";
+    readonly success: "var(--success)";
+    readonly warning: "var(--warning)";
+    readonly destructive: "var(--destructive)";
+};
+export type TProgressTone = keyof typeof TONE_TOKEN;
+/**
+ * Colours an app can set without a class string. --progress-color replaces the fill (any colour, such as an
+ * app's own status tokens); --progress-track replaces the track, which does not follow the fill: an app
+ * that wants a neutral track sets it to var(--muted). Both are read where the bar is, so they follow the
+ * theme and can be set on :root or on any ancestor.
+ */
+export declare const progressFill: (tone: TProgressTone) => string;
+export declare const progressTrack: (tone: TProgressTone) => string;
+/**
+ * How the fill eases its width. The defaults are the 300ms ease-in-out it always had; an app retunes them
+ * with --progress-duration and --progress-ease, or turns the easing off with `animated={false}` when the
+ * number it shows is itself animated and the bar is driven from the same clock.
+ */
+export declare const PROGRESS_DURATION = "var(--progress-duration, 300ms)";
+export declare const PROGRESS_EASE = "var(--progress-ease, cubic-bezier(0.4, 0, 0.2, 1))";
+declare const progressTrackVariants: (props?: ({
+    size?: "default" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type TProgressTone = NonNullable<VariantProps<typeof progressIndicatorVariants>['tone']>;
 export interface IProgressProps extends Omit<ProgressPrimitive.Root.Props, 'value'> {
     value?: number | null;
     /** The bar's colour: a share of a total reads as `warning` when nearly used up, `success` when done. */
     tone?: TProgressTone;
+    /** 4px (`sm`) or 8px (default) tall. */
+    size?: VariantProps<typeof progressTrackVariants>['size'];
+    /**
+     * Whether the fill eases when `value` changes. Turn it off when the value already moves smoothly
+     * (driven from an animated number's clock), or the bar eases a second time behind it.
+     */
+    animated?: boolean;
 }
-export declare const Progress: ({ value, tone, className, ...props }: IProgressProps) => import('react').JSX.Element;
+export declare const Progress: ({ value, tone, size, animated, className, ...props }: IProgressProps) => import('react').JSX.Element;
 export {};

package/dist/ui/src/index.d.ts

@@ -4,6 +4,7 @@ export * from './components/edyn/date-range-picker';
 export * from './components/edyn/initials-avatar';
 export * from './components/edyn/multi-select';
 export * from './components/edyn/progress-line';
+export * from './components/edyn/rich-text-content';
 export * from './components/edyn/video-player';
 export * from './components/ui/accordion';
 export * from './components/ui/alert';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exsto/ds",
-  "version": "0.0.1-rc.5",
+  "version": "0.0.1-rc.7",
   "description": "The eDynamix design system: React components and design tokens.",
   "license": "Apache-2.0",
   "keywords": [
@@ -27,6 +27,10 @@
       "types": "./dist/ds/src/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./rich-text-editor": {
+      "types": "./dist/ds/src/rich-text-editor.d.ts",
+      "default": "./dist/rich-text-editor.js"
+    },
     "./styles.css": {
       "types": "./dist/styles.css.d.ts",
       "default": "./dist/styles.css"
@@ -46,6 +50,22 @@
     "@shadcn/react": "^0.3.1",
     "@tabler/icons-react": "^3.44.0",
     "@tanstack/react-virtual": "^3.13.0",
+    "@tiptap/core": "3.32.2",
+    "@tiptap/extension-bold": "3.32.2",
+    "@tiptap/extension-document": "3.32.2",
+    "@tiptap/extension-hard-break": "3.32.2",
+    "@tiptap/extension-horizontal-rule": "3.32.2",
+    "@tiptap/extension-italic": "3.32.2",
+    "@tiptap/extension-link": "3.32.2",
+    "@tiptap/extension-list": "3.32.2",
+    "@tiptap/extension-mention": "3.32.2",
+    "@tiptap/extension-paragraph": "3.32.2",
+    "@tiptap/extension-text": "3.32.2",
+    "@tiptap/extension-underline": "3.32.2",
+    "@tiptap/extensions": "3.32.2",
+    "@tiptap/pm": "3.32.2",
+    "@tiptap/react": "3.32.2",
+    "@tiptap/suggestion": "3.32.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",