@actuate-media/cms-admin 0.13.0 → 0.14.0

package/dist/components/MentionableTextarea.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { type MentionUser } from '../lib/mention-picker.js';
+/**
+ * `<MentionableTextarea />` — drop-in replacement for `<textarea>` /
+ * `<input type="text">` that opens a Radix-styled mention picker
+ * whenever the user types `@`.
+ *
+ * Behaviour
+ * ─────────
+ * - The picker appears anchored to the textarea, below the input.
+ *   We intentionally do NOT track the caret pixel position (that
+ *   requires a textarea-mirror trick which doesn't add enough UX to
+ *   justify the complexity); GitHub, Linear, and Asana all anchor
+ *   their pickers this way on simple textareas.
+ * - Arrow Up / Arrow Down move the highlight. Enter / Tab commit the
+ *   selection. Escape closes the picker without inserting anything.
+ *   Mouse click on a row also commits.
+ * - The picker only fires server queries while a real mention is
+ *   being typed; it short-circuits an empty `query` so the dropdown
+ *   shows up immediately after `@` is typed (with an empty state)
+ *   and only flips to "no matches" once the user has typed at least
+ *   one character.
+ * - The textarea value is fully controlled by the parent — we never
+ *   keep a separate copy. `onChange` is called with the next value
+ *   on every keystroke AND every mention insertion.
+ *
+ * Dependency-injection seam
+ * ─────────────────────────
+ * The `search` prop accepts an override so tests can substitute a
+ * synchronous fake. Production callers leave it unset and the
+ * component uses the real `searchMentionUsers()` REST helper.
+ */
+export interface MentionableTextareaProps {
+    value: string;
+    onChange: (next: string) => void;
+    /** Forwarded to the underlying textarea. */
+    placeholder?: string;
+    /** Forwarded to the underlying textarea. */
+    rows?: number;
+    className?: string;
+    /** Forwarded — useful for keyboard shortcuts the parent owns. */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    /** Forwarded — useful for click-to-stop-propagation in nested cards. */
+    onClick?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
+    /** Test hook — required when rendering with React state assertions. */
+    'data-testid'?: string;
+    /**
+     * Override the user search. The default uses the REST helper.
+     * Tests inject an in-memory fake so dropdown contents are
+     * deterministic without HTTP mocking.
+     */
+    search?: (query: string) => Promise<MentionUser[]>;
+    /**
+     * Optional fixed id for the picker dropdown — pass when the parent
+     * wires up `aria-controls`. We generate one with `useId()` when
+     * unset.
+     */
+    pickerId?: string;
+    /**
+     * Format the displayed token. By default we show `@<name>` while
+     * the underlying value stores `@<userId>`. A future slice can swap
+     * to a rich-text editor where these diverge; the prop lets that
+     * land without changing the picker.
+     */
+    formatLabel?: (user: MentionUser) => string;
+}
+export declare function MentionableTextarea({ value, onChange, placeholder, rows, className, onKeyDown, onClick, 'data-testid': testId, search, pickerId: pickerIdProp, formatLabel, }: MentionableTextareaProps): React.JSX.Element;
+//# sourceMappingURL=MentionableTextarea.d.ts.map

package/dist/components/MentionableTextarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionableTextarea.d.ts","sourceRoot":"","sources":["../../src/components/MentionableTextarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0D,MAAM,OAAO,CAAA;AAE9E,OAAO,EACL,KAAK,WAAW,EAIjB,MAAM,0BAA0B,CAAA;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iEAAiE;IACjE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IACrE,wEAAwE;IACxE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAA;IAChE,uEAAuE;IACvE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,WAAW,EAAE,CAAC,CAAA;IAClD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,CAAA;CAC5C;AAgBD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,WAAW,EACX,IAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,EACP,aAAa,EAAE,MAAM,EACrB,MAAyE,EACzE,QAAQ,EAAE,YAAY,EACtB,WAAiC,GAClC,EAAE,wBAAwB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiO9C"}

package/dist/components/MentionableTextarea.js

@@ -0,0 +1,181 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { detectMentionContext, insertMentionToken, searchMentionUsers, } from '../lib/mention-picker.js';
+const initialPicker = {
+    open: false,
+    query: '',
+    highlight: 0,
+    users: [],
+};
+export function MentionableTextarea({ value, onChange, placeholder, rows = 3, className, onKeyDown, onClick, 'data-testid': testId, search = (q) => searchMentionUsers(q).then((r) => (r.ok ? r.result : [])), pickerId: pickerIdProp, formatLabel = (u) => `@${u.name}`, }) {
+    const generatedId = useId();
+    const pickerId = pickerIdProp ?? `actuate-mention-picker-${generatedId}`;
+    const textareaRef = useRef(null);
+    const [picker, setPicker] = useState(initialPicker);
+    // `pickerRef` mirrors `picker` for the keydown handler so the
+    // arrow-key / enter listeners don't go stale between renders.
+    const pickerRef = useRef(picker);
+    useEffect(() => {
+        pickerRef.current = picker;
+    }, [picker]);
+    const requestSeq = useRef(0);
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const closePicker = useCallback(() => {
+        setPicker((p) => (p.open ? initialPicker : p));
+    }, []);
+    // Recompute the active mention context whenever the value or
+    // selection changes. Centralising this in one effect keeps the
+    // open/close logic in a single place — every textarea event
+    // (input, click, keyup) just calls `recompute()`.
+    const recompute = useCallback(async (nextValue, caret) => {
+        const ctx = detectMentionContext(nextValue, caret);
+        if (!ctx) {
+            closePicker();
+            return;
+        }
+        const id = ++requestSeq.current;
+        // Open immediately so the user sees a dropdown the moment they
+        // type `@`. Clear the `users` array on every new query so the
+        // user can never press Enter / Tab and commit a stale row
+        // from the previous query while the new request is in flight
+        // (PR #159 Copilot finding — type `@a` then `@bo` quickly and
+        // hit Enter before the `@bo` results arrive: without this
+        // reset, the picker would commit a row from `@a`).
+        setPicker((p) => ({
+            open: true,
+            query: ctx.query,
+            highlight: 0,
+            users: p.query === ctx.query ? p.users : [],
+        }));
+        try {
+            const users = await search(ctx.query);
+            if (!mountedRef.current)
+                return;
+            // Drop stale responses — only commit if our request is still
+            // the latest one. Otherwise the user has typed more and a
+            // newer query is in flight.
+            if (id !== requestSeq.current)
+                return;
+            setPicker((p) => 
+            // If the picker was closed (Escape) between request and
+            // response, don't reopen it.
+            p.open ? { ...p, users, highlight: 0 } : p);
+        }
+        catch {
+            if (!mountedRef.current)
+                return;
+            if (id !== requestSeq.current)
+                return;
+            // Surface no rows on failure — the textarea must keep
+            // working when the user is offline. The poll loop / native
+            // submit path is unaffected.
+            setPicker((p) => (p.open ? { ...p, users: [] } : p));
+        }
+    }, [closePicker, search]);
+    const commitMention = useCallback((user) => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        const caret = el.selectionStart ?? value.length;
+        const ctx = detectMentionContext(value, caret);
+        if (!ctx) {
+            closePicker();
+            return;
+        }
+        const next = insertMentionToken(value, ctx, user.id);
+        onChange(next.value);
+        closePicker();
+        // Move the caret past the inserted token AFTER React paints
+        // the new value, so the selection isn't clobbered by the
+        // controlled update.
+        requestAnimationFrame(() => {
+            const live = textareaRef.current;
+            if (!live)
+                return;
+            live.focus();
+            live.setSelectionRange(next.caret, next.caret);
+        });
+    }, [closePicker, onChange, value]);
+    const handleChange = (event) => {
+        const next = event.target.value;
+        const caret = event.target.selectionStart ?? next.length;
+        onChange(next);
+        void recompute(next, caret);
+    };
+    const handleKeyDown = (event) => {
+        const p = pickerRef.current;
+        if (p.open && p.users.length > 0) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                setPicker((s) => ({ ...s, highlight: (s.highlight + 1) % s.users.length }));
+                return;
+            }
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                setPicker((s) => ({
+                    ...s,
+                    highlight: (s.highlight - 1 + s.users.length) % s.users.length,
+                }));
+                return;
+            }
+            if (event.key === 'Enter' || event.key === 'Tab') {
+                event.preventDefault();
+                // Defensive: highlight could theoretically point past the
+                // end of `users` if state went stale between renders. Guard
+                // it so we never `undefined`-bang.
+                const target = p.users[p.highlight];
+                if (target)
+                    commitMention(target);
+                return;
+            }
+        }
+        if (event.key === 'Escape' && p.open) {
+            event.preventDefault();
+            closePicker();
+            return;
+        }
+        onKeyDown?.(event);
+    };
+    const handleClick = (event) => {
+        onClick?.(event);
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        void recompute(el.value, el.selectionStart ?? el.value.length);
+    };
+    // Closing on outside click — when the user clicks anywhere outside
+    // the textarea or the picker, the dropdown should disappear so it
+    // doesn't sit on top of unrelated UI.
+    useEffect(() => {
+        if (!picker.open)
+            return;
+        const onDocMouseDown = (ev) => {
+            const t = ev.target;
+            if (!t)
+                return;
+            const parent = textareaRef.current?.parentElement;
+            if (parent && parent.contains(t))
+                return;
+            closePicker();
+        };
+        document.addEventListener('mousedown', onDocMouseDown);
+        return () => document.removeEventListener('mousedown', onDocMouseDown);
+    }, [picker.open, closePicker]);
+    return (_jsxs("div", { className: "relative", children: [_jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, onKeyDown: handleKeyDown, onClick: handleClick, placeholder: placeholder, rows: rows, className: className, "aria-autocomplete": "list", "aria-controls": picker.open ? pickerId : undefined, "aria-expanded": picker.open, "data-testid": testId }), picker.open && (_jsx("div", { id: pickerId, role: "listbox", "aria-label": "Mention a teammate", className: "absolute top-full left-0 z-30 mt-1 max-h-56 w-64 overflow-y-auto rounded border border-gray-200 bg-white shadow-lg", "data-testid": testId ? `${testId}-picker` : 'mention-picker', children: picker.users.length === 0 ? (_jsx("p", { className: "px-3 py-2 text-xs text-gray-500", children: picker.query ? 'No matches' : 'Type a name…' })) : (_jsx("ul", { children: picker.users.map((u, idx) => (_jsx("li", { children: _jsxs("button", { type: "button", role: "option", "aria-selected": idx === picker.highlight, onMouseDown: (e) => {
+                                // mousedown (not click) — prevents the
+                                // textarea from losing focus before we
+                                // commit, which would otherwise hide the
+                                // selection and feel janky.
+                                e.preventDefault();
+                                commitMention(u);
+                            }, onMouseEnter: () => setPicker((s) => ({ ...s, highlight: idx })), className: `block w-full px-3 py-1.5 text-left text-xs ${idx === picker.highlight
+                                ? 'bg-blue-50 text-blue-900'
+                                : 'text-gray-800 hover:bg-gray-50'}`, "data-testid": testId ? `${testId}-picker-row-${u.id}` : `mention-row-${u.id}`, children: [_jsx("div", { className: "font-medium", children: formatLabel(u) }), _jsx("div", { className: "text-[10px] text-gray-500", children: u.email })] }) }, u.id))) })) }))] }));
+}
+//# sourceMappingURL=MentionableTextarea.js.map

package/dist/components/MentionableTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionableTextarea.js","sourceRoot":"","sources":["../../src/components/MentionableTextarea.tsx"],"names":[],"mappings":"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"}

package/dist/lib/mention-picker.d.ts

@@ -0,0 +1,69 @@
+export interface MentionUser {
+    id: string;
+    name: string;
+    email: string;
+}
+export type MentionSearchOutcome = {
+    ok: true;
+    result: MentionUser[];
+} | {
+    ok: false;
+    error: string;
+    status: number;
+};
+export declare function searchMentionUsers(query: string): Promise<MentionSearchOutcome>;
+/**
+ * Description of an active `@`-mention being typed in a textarea / input.
+ *
+ *  - `start` and `end` are character offsets into the field value: the
+ *    `@` itself sits at `start`, and `end` is the caret position
+ *    (exclusive end of the query slice).
+ *  - `query` is the substring between the `@` and the caret — exactly
+ *    what we should pass to `searchMentionUsers()`.
+ *
+ * Callers replace `value.slice(start, end)` with the chosen token
+ * (`@<userId> `, including the trailing space) to commit a selection.
+ */
+export interface MentionContext {
+    start: number;
+    end: number;
+    query: string;
+}
+/**
+ * Find an active mention at the caret. Mirrors the server-side
+ * `extractMentionedUserIds` regex
+ * (`/(^|\s)@[a-zA-Z0-9_-]{3,64}\b/g`) so the picker's intuition
+ * about what counts as a mention can never disagree with the
+ * server's notification routing.
+ *
+ * Returns `null` whenever:
+ *   - the caret is at offset 0,
+ *   - there is no `@` between the caret and the previous whitespace
+ *     boundary,
+ *   - the `@` is preceded by a non-whitespace, non-newline character
+ *     (so an email address mid-word like `foo@bar` does NOT open
+ *     the picker), or
+ *   - the candidate query contains a character outside the mention
+ *     charset (`[a-zA-Z0-9_-]`).
+ *
+ * The picker DOES open with a 0–2 character query — that's the
+ * "you've started typing a mention" UX. But it can NEVER commit
+ * such a token: `insertMentionToken` only fires for a `MentionUser`
+ * which always has an id of at least 3 chars, matching the server
+ * regex's min-length requirement.
+ */
+export declare function detectMentionContext(value: string, caret: number): MentionContext | null;
+/**
+ * Apply a mention selection to a text value. Returns the new value
+ * plus the caret position where the next keystroke should land.
+ *
+ * Inserts `@<userId> ` (trailing space) so the user can keep typing
+ * without manually moving the cursor past the token. If the caret
+ * already sits before a space, we don't insert a duplicate space.
+ */
+export interface MentionInsertion {
+    value: string;
+    caret: number;
+}
+export declare function insertMentionToken(value: string, context: MentionContext, userId: string): MentionInsertion;
+//# sourceMappingURL=mention-picker.d.ts.map

package/dist/lib/mention-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-picker.d.ts","sourceRoot":"","sources":["../../src/lib/mention-picker.ts"],"names":[],"mappings":"AAuBA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,oBAAoB,GAC5B;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAAE,GACnC;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhD,wBAAsB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAerF;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,IAAI,CAiCxF;AAwBD;;;;;;;GAOG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,cAAc,EACvB,MAAM,EAAE,MAAM,GACb,gBAAgB,CAclB"}

package/dist/lib/mention-picker.js

@@ -0,0 +1,138 @@
+/**
+ * Mention picker client logic + REST helper.
+ *
+ * Two responsibilities, deliberately separated so each can be unit
+ * tested without rendering React or hitting fetch:
+ *
+ * 1. `searchMentionUsers(query)` — typed wrapper over the new
+ *    `GET /api/cms/users/search` endpoint introduced in Phase 7.
+ *    Returns up to 10 `{ id, name, email }` rows matching the query.
+ * 2. `detectMentionContext(value, caret)` — pure parser that scans a
+ *    text input value backwards from the caret to decide whether the
+ *    user is currently typing a `@`-mention, and if so what the
+ *    query fragment is. Returns `null` when no active mention.
+ *
+ * Wire format note: the picker INSERTS `@<userId>` tokens at the
+ * cursor (matching the server-side `extractMentionedUserIds` regex
+ * in `cms-core/realtime/notifications.ts`). The user sees the chosen
+ * user's *name* in the picker but the textarea always holds the id.
+ * Rendering names back in the comment view is a separate slice that
+ * can ship later without breaking the wire format.
+ */
+import { cmsApi } from './api.js';
+export async function searchMentionUsers(query) {
+    const trimmed = query.trim();
+    if (trimmed.length === 0) {
+        // Mirror the server's contract: an empty query returns an empty
+        // array. We short-circuit here so the picker doesn't spend a
+        // round-trip on a guaranteed-empty response.
+        return { ok: true, result: [] };
+    }
+    const res = await cmsApi(`/users/search?q=${encodeURIComponent(trimmed)}`, {
+        method: 'GET',
+    });
+    if (res.error || !res.data) {
+        return { ok: false, error: res.error ?? `Request failed (${res.status})`, status: res.status };
+    }
+    return { ok: true, result: res.data };
+}
+/**
+ * Find an active mention at the caret. Mirrors the server-side
+ * `extractMentionedUserIds` regex
+ * (`/(^|\s)@[a-zA-Z0-9_-]{3,64}\b/g`) so the picker's intuition
+ * about what counts as a mention can never disagree with the
+ * server's notification routing.
+ *
+ * Returns `null` whenever:
+ *   - the caret is at offset 0,
+ *   - there is no `@` between the caret and the previous whitespace
+ *     boundary,
+ *   - the `@` is preceded by a non-whitespace, non-newline character
+ *     (so an email address mid-word like `foo@bar` does NOT open
+ *     the picker), or
+ *   - the candidate query contains a character outside the mention
+ *     charset (`[a-zA-Z0-9_-]`).
+ *
+ * The picker DOES open with a 0–2 character query — that's the
+ * "you've started typing a mention" UX. But it can NEVER commit
+ * such a token: `insertMentionToken` only fires for a `MentionUser`
+ * which always has an id of at least 3 chars, matching the server
+ * regex's min-length requirement.
+ */
+export function detectMentionContext(value, caret) {
+    if (typeof value !== 'string')
+        return null;
+    if (caret <= 0 || caret > value.length)
+        return null;
+    // Walk back from the caret looking for a `@`. Stop early on any
+    // character that is neither a valid mention char nor `@`. This
+    // means a typed space, newline, punctuation, etc. terminates the
+    // mention candidate the user was building.
+    let i = caret - 1;
+    while (i >= 0) {
+        const ch = value.charCodeAt(i);
+        if (ch === 64 /* @ */)
+            break;
+        if (!isMentionChar(ch))
+            return null;
+        i -= 1;
+    }
+    if (i < 0)
+        return null;
+    // The `@` must sit at the start of the field or be preceded by
+    // whitespace / newline. Otherwise we're mid-word (think `foo@bar`),
+    // which is not a mention.
+    if (i > 0) {
+        const prev = value.charCodeAt(i - 1);
+        if (!isBoundary(prev))
+            return null;
+    }
+    const query = value.slice(i + 1, caret);
+    // Server caps queries at 64 chars; the picker simply stops
+    // suggesting once the typed query exceeds that — extra typing
+    // closes the picker so the user can complete an email or other
+    // long token without staring at a dead dropdown.
+    if (query.length > 64)
+        return null;
+    return { start: i, end: caret, query };
+}
+function isMentionChar(code) {
+    // [a-zA-Z0-9_-] — keep this in lock-step with the regex in
+    // `cms-core/realtime/notifications.ts:extractMentionedUserIds`.
+    if (code === 95 /* _ */ || code === 45 /* - */)
+        return true;
+    if (code >= 48 && code <= 57)
+        return true; // 0-9
+    if (code >= 65 && code <= 90)
+        return true; // A-Z
+    if (code >= 97 && code <= 122)
+        return true; // a-z
+    return false;
+}
+function isBoundary(code) {
+    // ASCII space, tab, line-feed, or carriage-return. We deliberately
+    // do NOT widen this to the full Unicode whitespace class — the
+    // server-side `extractMentionedUserIds` regex in
+    // `cms-core/realtime/notifications.ts` uses `\s` which DOES match
+    // Unicode whitespace, but its `^` anchor means the only realistic
+    // mid-string boundaries in practice are these four ASCII chars
+    // (a CMS comment body containing U+00A0 NBSP before an `@` would
+    // be both unusual and not worth opening the picker for).
+    return code === 32 || code === 9 || code === 10 || code === 13;
+}
+export function insertMentionToken(value, context, userId) {
+    const hasTrailingSpace = value.charAt(context.end) === ' ';
+    // If the user already has a space immediately after the mention
+    // region, reuse it (don't double-space) but still advance the
+    // caret past that space so the next keystroke continues naturally
+    // rather than landing back in front of the space.
+    const trailingSpace = hasTrailingSpace ? '' : ' ';
+    const token = `@${userId}${trailingSpace}`;
+    const before = value.slice(0, context.start);
+    const after = value.slice(context.end);
+    return {
+        value: `${before}${token}${after}`,
+        caret: context.start + token.length + (hasTrailingSpace ? 1 : 0),
+    };
+}
+//# sourceMappingURL=mention-picker.js.map

package/dist/lib/mention-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-picker.js","sourceRoot":"","sources":["../../src/lib/mention-picker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAYjC,MAAM,CAAC,KAAK,UAAU,kBAAkB,CAAC,KAAa;IACpD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;IAC5B,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACzB,gEAAgE;QAChE,6DAA6D;QAC7D,6CAA6C;QAC7C,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAA;IACjC,CAAC;IACD,MAAM,GAAG,GAAG,MAAM,MAAM,CAAgB,mBAAmB,kBAAkB,CAAC,OAAO,CAAC,EAAE,EAAE;QACxF,MAAM,EAAE,KAAK;KACd,CAAC,CAAA;IACF,IAAI,GAAG,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QAC3B,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,IAAI,mBAAmB,GAAG,CAAC,MAAM,GAAG,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,CAAA;IAChG,CAAC;IACD,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,CAAC,IAAI,EAAE,CAAA;AACvC,CAAC;AAoBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAa,EAAE,KAAa;IAC/D,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAA;IAC1C,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM;QAAE,OAAO,IAAI,CAAA;IAEnD,gEAAgE;IAChE,+DAA+D;IAC/D,iEAAiE;IACjE,2CAA2C;IAC3C,IAAI,CAAC,GAAG,KAAK,GAAG,CAAC,CAAA;IACjB,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QACd,MAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;QAC9B,IAAI,EAAE,KAAK,EAAE,CAAC,OAAO;YAAE,MAAK;QAC5B,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;YAAE,OAAO,IAAI,CAAA;QACnC,CAAC,IAAI,CAAC,CAAA;IACR,CAAC;IACD,IAAI,CAAC,GAAG,CAAC;QAAE,OAAO,IAAI,CAAA;IAEtB,+DAA+D;IAC/D,oEAAoE;IACpE,0BAA0B;IAC1B,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QACV,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QACpC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAA;IACpC,CAAC;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAA;IACvC,2DAA2D;IAC3D,8DAA8D;IAC9D,+DAA+D;IAC/D,iDAAiD;IACjD,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE;QAAE,OAAO,IAAI,CAAA;IAElC,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;AACxC,CAAC;AAED,SAAS,aAAa,CAAC,IAAY;IACjC,2DAA2D;IAC3D,gEAAgE;IAChE,IAAI,IAAI,KAAK,EAAE,CAAC,OAAO,IAAI,IAAI,KAAK,EAAE,CAAC,OAAO;QAAE,OAAO,IAAI,CAAA;IAC3D,IAAI,IAAI,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE;QAAE,OAAO,IAAI,CAAA,CAAC,MAAM;IAChD,IAAI,IAAI,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE;QAAE,OAAO,IAAI,CAAA,CAAC,MAAM;IAChD,IAAI,IAAI,IAAI,EAAE,IAAI,IAAI,IAAI,GAAG;QAAE,OAAO,IAAI,CAAA,CAAC,MAAM;IACjD,OAAO,KAAK,CAAA;AACd,CAAC;AAED,SAAS,UAAU,CAAC,IAAY;IAC9B,mEAAmE;IACnE,+DAA+D;IAC/D,iDAAiD;IACjD,kEAAkE;IAClE,kEAAkE;IAClE,+DAA+D;IAC/D,iEAAiE;IACjE,yDAAyD;IACzD,OAAO,IAAI,KAAK,EAAE,IAAI,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,EAAE,IAAI,IAAI,KAAK,EAAE,CAAA;AAChE,CAAC;AAeD,MAAM,UAAU,kBAAkB,CAChC,KAAa,EACb,OAAuB,EACvB,MAAc;IAEd,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,GAAG,CAAA;IAC1D,gEAAgE;IAChE,8DAA8D;IAC9D,kEAAkE;IAClE,kDAAkD;IAClD,MAAM,aAAa,GAAG,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAA;IACjD,MAAM,KAAK,GAAG,IAAI,MAAM,GAAG,aAAa,EAAE,CAAA;IAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAC5C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IACtC,OAAO;QACL,KAAK,EAAE,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE;QAClC,KAAK,EAAE,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACjE,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -87,7 +87,7 @@
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^3.0.0",
-    "@actuate-media/cms-core": "0.24.0",
+    "@actuate-media/cms-core": "0.25.0",
     "@actuate-media/component-blocks": "0.2.0"
   },
   "scripts": {

package/src/__tests__/components/comment-side-panel.test.tsx

@@ -341,3 +341,137 @@ describe('CommentSidePanel — reply, edit, resolve, delete', () => {
     expect(onActive).toHaveBeenCalledWith('c1')
   })
 })
+
+// ---------------------------------------------------------------------------
+// Mention picker integration — Phase 7 carry-over
+// ---------------------------------------------------------------------------
+
+describe('CommentSidePanel — mention picker integration', () => {
+  /**
+   * Drive a `<textarea>` the same way the picker test does. The
+   * comment panel's three composer surfaces (new thread, reply,
+   * edit) are all `<MentionableTextarea>` now, so this helper works
+   * uniformly across them.
+   */
+  async function typeAt(el: HTMLTextAreaElement, value: string, caret = value.length) {
+    await act(async () => {
+      el.focus()
+      const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set
+      if (setter) setter.call(el, value)
+      else el.value = value
+      el.setSelectionRange(caret, caret)
+      el.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+  }
+
+  function fakeMentionSearch() {
+    return vi.fn(async (q: string) => {
+      const all = [
+        { id: 'u_alice', name: 'Alice Anderson', email: 'alice@example.com' },
+        { id: 'u_bob', name: 'Bob Brown', email: 'bob@example.com' },
+      ]
+      const ql = q.toLowerCase()
+      return all.filter(
+        (u) => u.name.toLowerCase().includes(ql) || u.email.toLowerCase().includes(ql),
+      )
+    })
+  }
+
+  it('opens the mention picker from the new-thread composer and submits @<userId>', async () => {
+    const fake = createFakeApi()
+    const mentionSearch = fakeMentionSearch()
+    render(
+      <CommentSidePanel
+        documentId="doc-1"
+        currentUserId="current"
+        api={fake.api}
+        mentionSearch={mentionSearch}
+      />,
+    )
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+
+    const composer = screen.getByTestId('comment-composer') as HTMLTextAreaElement
+    await typeAt(composer, '@ali')
+    await waitFor(() => expect(screen.getByTestId('comment-composer-picker')).toBeTruthy())
+    await act(async () => {
+      fireEvent.mouseDown(screen.getByTestId('comment-composer-picker-row-u_alice'))
+    })
+    expect((composer as HTMLTextAreaElement).value).toBe('@u_alice ')
+
+    // Continue typing then submit — the resulting comment body must
+    // carry the `@<userId>` token so `extractMentionedUserIds` picks
+    // it up server-side.
+    await typeAt(composer, '@u_alice please review')
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('comment-submit'))
+    })
+    expect(fake.api.create).toHaveBeenCalledWith(
+      expect.objectContaining({ body: '@u_alice please review' }),
+    )
+  })
+
+  it('opens the mention picker from a reply input and inserts @<userId>', async () => {
+    const fake = createFakeApi()
+    fake.rows.push(comment({ id: 'root', body: 'root' }))
+    const mentionSearch = fakeMentionSearch()
+    render(
+      <CommentSidePanel
+        documentId="doc-1"
+        currentUserId="current"
+        api={fake.api}
+        mentionSearch={mentionSearch}
+      />,
+    )
+    await waitFor(() => expect(screen.getByTestId('comment-thread-root')).toBeTruthy())
+
+    const reply = screen.getByTestId('reply-input-root') as HTMLTextAreaElement
+    await typeAt(reply, '@bo')
+    await waitFor(() => expect(screen.getByTestId('reply-input-root-picker')).toBeTruthy())
+    fireEvent.keyDown(reply, { key: 'Enter' })
+    await waitFor(() => expect(reply.value).toBe('@u_bob '))
+  })
+
+  it('opens the mention picker from the edit-textarea while editing a comment', async () => {
+    const fake = createFakeApi()
+    fake.rows.push(comment({ id: 'c1', userId: 'current', body: 'before' }))
+    const mentionSearch = fakeMentionSearch()
+    render(
+      <CommentSidePanel
+        documentId="doc-1"
+        currentUserId="current"
+        api={fake.api}
+        mentionSearch={mentionSearch}
+      />,
+    )
+    await waitFor(() => expect(screen.getByTestId('comment-thread-c1')).toBeTruthy())
+    fireEvent.click(screen.getByTestId('edit-c1'))
+    const edit = screen.getByTestId('edit-textarea-c1') as HTMLTextAreaElement
+    await typeAt(edit, '@al')
+    await waitFor(() => expect(screen.getByTestId('edit-textarea-c1-picker')).toBeTruthy())
+    await act(async () => {
+      fireEvent.mouseDown(screen.getByTestId('edit-textarea-c1-picker-row-u_alice'))
+    })
+    expect(edit.value).toBe('@u_alice ')
+  })
+
+  it('escape closes the picker without committing a selection', async () => {
+    const fake = createFakeApi()
+    const mentionSearch = fakeMentionSearch()
+    render(
+      <CommentSidePanel
+        documentId="doc-1"
+        currentUserId="current"
+        api={fake.api}
+        mentionSearch={mentionSearch}
+      />,
+    )
+    await waitFor(() => expect(screen.getByText('No comments yet.')).toBeTruthy())
+
+    const composer = screen.getByTestId('comment-composer') as HTMLTextAreaElement
+    await typeAt(composer, '@al')
+    await waitFor(() => expect(screen.getByTestId('comment-composer-picker')).toBeTruthy())
+    fireEvent.keyDown(composer, { key: 'Escape' })
+    expect(screen.queryByTestId('comment-composer-picker')).toBeNull()
+    expect((composer as HTMLTextAreaElement).value).toBe('@al')
+  })
+})