@homecode/ui 5.1.17 → 5.3.0

package/dist/esm/index.js

@@ -33,6 +33,9 @@ export { Portal } from './src/components/Portal/Portal.js';
 export { PopupMenu } from './src/components/PopupMenu/PopupMenu.js';
 export { Progress } from './src/components/Progress/Progress.js';
 export { ProgressCircular } from './src/components/ProgressCircular/ProgressCircular.js';
+export { PromptComposer } from './src/components/PromptComposer/PromptComposer.js';
+export { usePromptComposerEditor } from './src/components/PromptComposer/usePromptComposerEditor.js';
+export { PROMPT_COMPOSER_COMMAND_CHIP_CLASS, createPromptComposerHandle, getPromptComposerTokenRangeBeforePos, insertPromptComposerContentAtCaret, promptComposerChipHtml, promptComposerMentionNode } from './src/components/PromptComposer/promptComposerInsert.js';
 export { RadioButton } from './src/components/RadioButton/RadioButton.js';
 export { RadioGroup } from './src/components/RadioGroup/RadioGroup.js';
 export { Router, RouterContext, RouterStore } from './src/components/Router/Router.js';
@@ -57,6 +60,8 @@ export { default as VirtualizedListScroll } from './src/components/Virtualized/L
 import * as Virtualized_types from './src/components/Virtualized/Virtualized.types.js';
 export { Virtualized_types as VirtualizedTypes };
 export { Toggle } from './src/components/Toggle/Toggle.js';
+export { DEFAULT_CHAT_SLASH_ITEMS, filterSlashItems } from './src/tiptap/slash-mention/defaultChatSlashItems.js';
+export { createSlashMentionExtension, slashMentionSuggestionRender } from './src/tiptap/slash-mention/createSlashMentionExtension.js';
 import * as i18n from './src/services/i18n.js';
 export { i18n };
 import * as env from './src/tools/env.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -46,6 +46,7 @@ import '../Gallery/Gallery.styl.js';
 import '../Heading/Heading.js';
 import '../InputFile/InputFile.styl.js';
 import '../InputFile/Item/Item.styl.js';
+import '../../tiptap/slash-mention/createSlashMentionExtension.js';
 import '../../services/i18n.js';
 import '../Portal/Portal.js';
 import '../Paranja/Paranja.styl.js';
@@ -56,6 +57,10 @@ import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
+import '../PromptComposer/PromptComposer.js';
+import '@tiptap/extensions';
+import '@tiptap/react';
+import '@tiptap/starter-kit';
 import '../RadioGroup/RadioGroupContext.js';
 import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';

package/dist/esm/src/components/InputFile/InputFile.js

@@ -55,6 +55,11 @@ import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
+import '../PromptComposer/PromptComposer.js';
+import '@tiptap/extensions';
+import '@tiptap/react';
+import '@tiptap/starter-kit';
+import '../../tiptap/slash-mention/createSlashMentionExtension.js';
 import '../RadioGroup/RadioGroupContext.js';
 import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';

package/dist/esm/src/components/PromptComposer/PromptComposer.helpers.js

@@ -0,0 +1,44 @@
+/** Keep in sync with `PromptComposer.styl` max/min heights. */
+const PROMPT_COMPOSER_MAX_HEIGHT_PX = 200;
+const PROMPT_COMPOSER_MIN_HEIGHT_PX = 40;
+function promptComposerSafeEditorDom(editor) {
+    if (!editor || editor.isDestroyed)
+        return null;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const dom = editor.view?.dom;
+        return dom instanceof HTMLElement ? dom : null;
+    }
+    catch {
+        return null;
+    }
+}
+function promptComposerFloorPx(cs) {
+    const padY = (Number.parseFloat(cs.paddingTop) || 0) +
+        (Number.parseFloat(cs.paddingBottom) || 0);
+    const fs = Number.parseFloat(cs.fontSize) || 14;
+    const linePx = cs.lineHeight === 'normal'
+        ? fs * 1.25
+        : Number.parseFloat(cs.lineHeight) || fs * 1.25;
+    return Math.max(PROMPT_COMPOSER_MIN_HEIGHT_PX, Math.ceil(linePx + padY));
+}
+/** Autosize `.ProseMirror` root: empty -> floor, text -> measured height with clamp. */
+function syncPromptComposerHeight(el, text) {
+    const floor = promptComposerFloorPx(getComputedStyle(el));
+    el.style.overflowY = 'hidden';
+    let contentHeight;
+    const empty = text.trim() === '';
+    if (empty) {
+        contentHeight = floor;
+    }
+    else {
+        el.style.height = '0';
+        contentHeight = el.scrollHeight;
+    }
+    const h = Math.min(Math.max(contentHeight, floor), PROMPT_COMPOSER_MAX_HEIGHT_PX);
+    el.style.height = `${h}px`;
+    el.style.overflowY =
+        contentHeight > PROMPT_COMPOSER_MAX_HEIGHT_PX ? 'auto' : 'hidden';
+}
+
+export { PROMPT_COMPOSER_MAX_HEIGHT_PX, PROMPT_COMPOSER_MIN_HEIGHT_PX, promptComposerSafeEditorDom, syncPromptComposerHeight };

package/dist/esm/src/components/PromptComposer/PromptComposer.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { forwardRef, useMemo, useImperativeHandle } from 'react';
+import { EditorContent } from '@tiptap/react';
+import S from './PromptComposer.styl.js';
+import { createPromptComposerHandle } from './promptComposerInsert.js';
+import { usePromptComposerEditor } from './usePromptComposerEditor.js';
+
+const PromptComposer = forwardRef(function PromptComposer({ disabled = false, placeholder, className, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit = true, onSubmit, onChange, }, ref) {
+    const { editor } = usePromptComposerEditor({
+        disabled,
+        placeholder,
+        slashCommandItems,
+        onSlashItemCommand,
+        prefillMessage,
+        attachmentsCount,
+        allowEnterSubmit,
+        onSubmit,
+        onChange,
+    });
+    const unavailableHandle = useMemo(() => ({
+        insertAtCaret: () => undefined,
+        focus: () => undefined,
+        reset: () => undefined,
+        setContent: () => undefined,
+        getText: () => '',
+        getEditor: () => {
+            throw new Error('PromptComposer editor is not ready yet');
+        },
+    }), []);
+    useImperativeHandle(ref, () => (editor ? createPromptComposerHandle(editor) : unavailableHandle), [editor, unavailableHandle]);
+    return (jsx("div", { className: cn(S.root, className), "data-disabled": disabled ? 'true' : 'false', children: jsx(EditorContent, { editor: editor, className: S.editorMount }) }));
+});
+
+export { PromptComposer };

package/dist/esm/src/components/PromptComposer/PromptComposer.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".PromptComposer_root__gfdXN{width:100%}.PromptComposer_editorMount__B9G-o{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;max-height:200px;min-height:40px;min-width:0;padding:0!important}.PromptComposer_editorMount__B9G-o:focus-within{box-shadow:none!important}.PromptComposer_editorMount__B9G-o .promptComposerEditor{border:none!important;box-shadow:none!important;flex:1;margin:0;max-height:200px!important;min-height:40px!important;outline:none!important;overflow-x:hidden!important;overflow-y:auto!important;padding:var(--p-2) 0 0!important;resize:none!important;white-space:pre-wrap;word-break:break-word}.PromptComposer_editorMount__B9G-o .promptComposerEmptyEditor .promptComposerEmptyNode:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}";
+var S = {"root":"PromptComposer_root__gfdXN","editorMount":"PromptComposer_editorMount__B9G-o"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/PromptComposer/promptComposerDoc.js

@@ -0,0 +1,17 @@
+const PROMPT_COMPOSER_EMPTY_DOC = {
+    type: 'doc',
+    content: [{ type: 'paragraph' }],
+};
+function promptComposerParagraphDoc(text) {
+    return {
+        type: 'doc',
+        content: [
+            {
+                type: 'paragraph',
+                content: text ? [{ type: 'text', text }] : [],
+            },
+        ],
+    };
+}
+
+export { PROMPT_COMPOSER_EMPTY_DOC, promptComposerParagraphDoc };

package/dist/esm/src/components/PromptComposer/promptComposerInsert.js

@@ -0,0 +1,101 @@
+import { promptComposerParagraphDoc } from './promptComposerDoc.js';
+
+const PROMPT_COMPOSER_COMMAND_CHIP_CLASS = 'prompt-composer-command-chip';
+function getPromptComposerTokenRangeBeforePos(editor, pos) {
+    const $pos = editor.state.doc.resolve(pos);
+    const textBefore = $pos.parent.textBetween(0, $pos.parentOffset, undefined, '\ufffc');
+    const token = textBefore.match(/[^\s]*$/)?.[0] ?? '';
+    return { from: pos - token.length, to: pos };
+}
+function escapeHtml(text) {
+    return text
+        .replaceAll('&', '&')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;');
+}
+function promptComposerChipHtml(text, className = PROMPT_COMPOSER_COMMAND_CHIP_CLASS) {
+    const cls = className ? ` class="${className}"` : '';
+    return `<span${cls} data-prompt-composer-chip="true">${escapeHtml(text)}</span>`;
+}
+function promptComposerMentionNode(input) {
+    const { id, label = id, className = null, color = null, slashChar = '/', } = input;
+    return {
+        type: 'mention',
+        attrs: {
+            id,
+            label,
+            mentionSuggestionChar: slashChar,
+            className,
+            color,
+        },
+    };
+}
+function insertPromptComposerContentAtCaret(editor, content, options) {
+    if (editor.isDestroyed)
+        return;
+    const { replaceRange, replaceTriggerToken = true, trailingSpace = true, } = options ?? {};
+    const { from: selFrom, to: selTo } = editor.state.selection;
+    let from;
+    let to;
+    if (replaceRange) {
+        from = replaceRange.from;
+        to = replaceRange.to;
+    }
+    else if (replaceTriggerToken) {
+        ({ from, to } = getPromptComposerTokenRangeBeforePos(editor, selFrom));
+    }
+    else {
+        from = selFrom;
+        to = selTo;
+    }
+    const chain = editor.chain().focus().deleteRange({ from, to });
+    if (typeof content === 'string') {
+        chain.insertContentAt(from, trailingSpace ? `${content} ` : content);
+    }
+    else {
+        chain.insertContentAt(from, content);
+        if (trailingSpace) {
+            chain.insertContent(' ');
+        }
+    }
+    chain.run();
+    queueMicrotask(() => {
+        editor.view.dom.ownerDocument?.defaultView
+            ?.getSelection?.()
+            ?.collapseToEnd();
+    });
+}
+function setPromptComposerEditorText(editor, text, options) {
+    if (editor.isDestroyed)
+        return;
+    editor.commands.setContent(promptComposerParagraphDoc(text));
+    if (options?.focus) {
+        editor.commands.focus(options.atEnd === false ? 'start' : 'end');
+    }
+    else if (options?.atEnd !== false) {
+        queueMicrotask(() => {
+            editor.view.dom.ownerDocument?.defaultView
+                ?.getSelection?.()
+                ?.collapseToEnd();
+        });
+    }
+}
+function createPromptComposerHandle(editor) {
+    return {
+        insertAtCaret: (content, options) => insertPromptComposerContentAtCaret(editor, content, options),
+        focus: () => {
+            editor.commands.focus();
+        },
+        reset: () => {
+            editor.chain().clearContent().focus().run();
+        },
+        getText: () => editor.getText(),
+        setContent: (text, options) => {
+            setPromptComposerEditorText(editor, text, options);
+        },
+        getEditor: () => editor,
+    };
+}
+
+export { PROMPT_COMPOSER_COMMAND_CHIP_CLASS, createPromptComposerHandle, getPromptComposerTokenRangeBeforePos, insertPromptComposerContentAtCaret, promptComposerChipHtml, promptComposerMentionNode };

package/dist/esm/src/components/PromptComposer/usePromptComposerEditor.js

@@ -0,0 +1,192 @@
+import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
+import { Placeholder } from '@tiptap/extensions';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { DEFAULT_CHAT_SLASH_ITEMS } from '../../tiptap/slash-mention/defaultChatSlashItems.js';
+import { createSlashMentionExtension } from '../../tiptap/slash-mention/createSlashMentionExtension.js';
+import { promptComposerSafeEditorDom, syncPromptComposerHeight } from './PromptComposer.helpers.js';
+import { PROMPT_COMPOSER_EMPTY_DOC, promptComposerParagraphDoc } from './promptComposerDoc.js';
+
+const PROMPT_COMPOSER_EDITOR_CLASS = 'promptComposerEditor';
+const PROMPT_COMPOSER_EMPTY_EDITOR_CLASS = 'promptComposerEmptyEditor';
+const PROMPT_COMPOSER_EMPTY_NODE_CLASS = 'promptComposerEmptyNode';
+function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit, onSubmit, onChange, }) {
+    const slashOpenRef = useRef(false);
+    const onSlashItemCommandRef = useRef(onSlashItemCommand);
+    onSlashItemCommandRef.current = onSlashItemCommand;
+    const onSubmitRef = useRef(onSubmit);
+    onSubmitRef.current = onSubmit;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const editorRef = useRef(null);
+    const suggestionActiveUpdater = useCallback((active) => {
+        slashOpenRef.current = active;
+    }, []);
+    const slashItemsFingerprint = JSON.stringify(slashCommandItems ?? null);
+    const slashItemsStable = useMemo(() => slashCommandItems ?? DEFAULT_CHAT_SLASH_ITEMS, [slashCommandItems, slashItemsFingerprint]);
+    const placeholderText = useMemo(() => {
+        if (placeholder === undefined || placeholder === null) {
+            return 'Type a message...';
+        }
+        const text = String(placeholder).trim();
+        return text === '' ? 'Type a message...' : text;
+    }, [placeholder]);
+    const ariaLabelComposer = useMemo(() => {
+        if (placeholder === undefined || placeholder === null)
+            return 'Message';
+        const text = String(placeholder).trim();
+        return text === '' ? 'Message' : text;
+    }, [placeholder]);
+    const extensions = useMemo(() => {
+        const exts = [
+            StarterKit.configure({
+                heading: false,
+                bulletList: false,
+                orderedList: false,
+                blockquote: false,
+                codeBlock: false,
+                horizontalRule: false,
+            }),
+            Placeholder.configure({
+                placeholder: placeholderText,
+                showOnlyWhenEditable: true,
+                emptyEditorClass: PROMPT_COMPOSER_EMPTY_EDITOR_CLASS,
+                emptyNodeClass: PROMPT_COMPOSER_EMPTY_NODE_CLASS,
+            }),
+        ];
+        if (slashItemsStable.length > 0) {
+            exts.push(createSlashMentionExtension({
+                items: slashItemsStable,
+                suggestionPlacement: 'above',
+                onSuggestionUiActiveChange: suggestionActiveUpdater,
+                onItemCommand: ctx => onSlashItemCommandRef.current?.(ctx) === true,
+            }));
+        }
+        return exts;
+    }, [placeholderText, slashItemsStable, suggestionActiveUpdater]);
+    const [text, setText] = useState('');
+    const editorDomRef = useRef(null);
+    const bindEditorDom = useCallback(({ editor }) => {
+        const nextText = editor.getText();
+        setText(nextText);
+        queueMicrotask(() => {
+            const dom = promptComposerSafeEditorDom(editor);
+            if (!dom)
+                return;
+            editorDomRef.current = dom;
+            syncPromptComposerHeight(dom, nextText);
+        });
+    }, []);
+    const trimmedText = text.trim();
+    const trimmedTextRef = useRef(trimmedText);
+    trimmedTextRef.current = trimmedText;
+    const attachmentsCountRef = useRef(attachmentsCount);
+    attachmentsCountRef.current = attachmentsCount;
+    const allowEnterSubmitRef = useRef(allowEnterSubmit);
+    allowEnterSubmitRef.current = allowEnterSubmit;
+    const handleEditorKeyDown = useCallback((_view, event) => {
+        if (!(event.key === 'Enter' &&
+            !event.shiftKey &&
+            !event.metaKey &&
+            !event.ctrlKey)) {
+            return false;
+        }
+        if (!allowEnterSubmitRef.current)
+            return false;
+        if (slashOpenRef.current)
+            return false;
+        if (!trimmedTextRef.current && attachmentsCountRef.current === 0) {
+            return false;
+        }
+        event.preventDefault();
+        const activeEditor = editorRef.current;
+        if (!activeEditor)
+            return true;
+        onSubmitRef.current?.(activeEditor.getText(), activeEditor);
+        return true;
+    }, []);
+    const editor = useEditor({
+        extensions,
+        content: PROMPT_COMPOSER_EMPTY_DOC,
+        editable: !disabled,
+        immediatelyRender: true,
+        editorProps: {
+            attributes: {
+                spellcheck: 'true',
+                'aria-label': ariaLabelComposer,
+                class: PROMPT_COMPOSER_EDITOR_CLASS,
+            },
+            handleKeyDown: handleEditorKeyDown,
+        },
+        onTransaction: ({ editor: activeEditor }) => {
+            const dom = promptComposerSafeEditorDom(activeEditor);
+            const nextText = activeEditor.getText();
+            if (dom) {
+                syncPromptComposerHeight(dom, nextText);
+            }
+            setText(nextText);
+            onChangeRef.current?.(nextText, activeEditor);
+        },
+        onCreate: bindEditorDom,
+    }, [extensions, bindEditorDom, ariaLabelComposer, handleEditorKeyDown]);
+    editorRef.current = editor;
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setEditable(!disabled);
+    }, [editor, disabled]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const bind = () => {
+            editorDomRef.current = promptComposerSafeEditorDom(editor);
+        };
+        bind();
+        let rafId = null;
+        if (typeof window !== 'undefined') {
+            rafId = window.requestAnimationFrame(bind);
+        }
+        return () => {
+            if (rafId != null)
+                cancelAnimationFrame(rafId);
+        };
+    }, [editor]);
+    useEffect(() => {
+        if (!editor || prefillMessage == null)
+            return;
+        const current = editor.getText();
+        const next = prefillMessage;
+        if (current === next)
+            return;
+        if (next === '') {
+            editor.commands.setContent(PROMPT_COMPOSER_EMPTY_DOC);
+        }
+        else {
+            editor.commands.setContent(promptComposerParagraphDoc(next));
+        }
+        setText(editor.getText());
+        queueMicrotask(() => {
+            const dom = promptComposerSafeEditorDom(editor);
+            if (dom)
+                syncPromptComposerHeight(dom, editor.getText());
+            if (!disabled && !editor.isDestroyed) {
+                editor.chain().focus('end').run();
+            }
+        });
+    }, [editor, prefillMessage, disabled]);
+    useLayoutEffect(() => {
+        if (!editor)
+            return;
+        const dom = promptComposerSafeEditorDom(editor);
+        if (!dom)
+            return;
+        syncPromptComposerHeight(dom, text);
+    }, [editor, text]);
+    return {
+        editor,
+        text,
+        trimmedText,
+    };
+}
+
+export { usePromptComposerEditor };

package/dist/esm/src/components/Slider/Slider.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Slider_root__hLZtd{color:var(--accent-color);position:relative;width:100%}.Slider_disabled__jz0lx{opacity:.4;pointer-events:none}.Slider_disabled__jz0lx .Slider_control__vtxup[disabled]{opacity:1}.Slider_hasLabel__Epyqi{align-items:center;display:flex;gap:var(--p-2)}.Slider_label__Gi7GI{color:inherit;font-size:inherit;white-space:nowrap}.Slider_trackWrap__PX861{display:flex;flex:1;flex-direction:column;min-width:0;position:relative}.Slider_hasMarkers__YfnMG{gap:var(--p-1)}.Slider_trackRow__hbQdR{align-items:center;display:flex;position:relative;width:100%}.Slider_markersRow__l-yga{flex-shrink:0;height:var(--marker-size);position:relative;width:100%}.Slider_markerWrap__6hLJN{pointer-events:auto;position:absolute;top:50%;transform:translate(-50%,-50%)}.Slider_marker__vtOv9{background:var(--accent-color);border:none;border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-800);cursor:pointer;display:block;height:var(--marker-size);margin:0;padding:0;width:var(--marker-size)}.Slider_marker__vtOv9:hover{background:var(--active-color)}.Slider_marker__vtOv9:disabled{cursor:default;opacity:.5}.Slider_control__vtxup{--track-radius:50px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;height:var(--thumb-size);margin:0;padding:0;position:relative;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;width:100%;z-index:2}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background-color:var(--active-color-alpha-100)}.Slider_control__vtxup[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background:transparent!important}.Slider_control__vtxup:focus{box-shadow:inset 0 0 0 2px none}.Slider_control__vtxup::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--active-color) 0,var(--active-color) var(--progress),var(--accent-color-alpha-100) var(--progress),var(--accent-color-alpha-100) 100%);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--active-color);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size))/2);width:var(--thumb-size)}.Slider_control__vtxup::-moz-range-track{background:var(--accent-color-alpha-100);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-progress{background:var(--active-color);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-thumb{background:var(--active-color);border:none;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size)}.Slider_ghost__tfPtm{background:var(--accent-color);border-radius:50%;height:var(--ghost-size);left:0;opacity:.45;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--ghost-size);z-index:2}.Slider_size-xs__v6UDK{--track-height:1px;--thumb-size:10px;--ghost-size:10px;--marker-size:6px;font-size:12px}.Slider_size-s__8hGSO{--track-height:2px;--thumb-size:12px;--ghost-size:12px;--marker-size:7px;font-size:14px}.Slider_size-m__Dj7LT{--track-height:8px;--thumb-size:16px;--ghost-size:16px;--marker-size:8px;font-size:16px}.Slider_size-l__Qi6tI{--track-height:12px;--thumb-size:20px;--ghost-size:20px;--marker-size:10px;font-size:18px}.Slider_size-xl__85Gcz{--track-height:16px;--thumb-size:24px;--ghost-size:24px;--marker-size:12px;font-size:20px}";
+var css_248z = ".Slider_root__hLZtd{color:var(--accent-color);position:relative;width:100%}.Slider_disabled__jz0lx{opacity:.4;pointer-events:none}.Slider_disabled__jz0lx .Slider_control__vtxup[disabled]{opacity:1}.Slider_hasLabel__Epyqi{align-items:center;display:flex;gap:var(--p-2)}.Slider_label__Gi7GI{color:inherit;font-size:inherit;white-space:nowrap}.Slider_trackWrap__PX861{display:flex;flex:1;flex-direction:column;min-width:0;position:relative}.Slider_hasMarkers__YfnMG{gap:var(--p-1)}.Slider_trackRow__hbQdR{align-items:center;display:flex;position:relative;width:100%}.Slider_markersRow__l-yga{flex-shrink:0;height:0;position:absolute;width:100%;z-index:2}.Slider_markerWrap__6hLJN{pointer-events:auto;position:absolute;top:-3px}.Slider_marker__vtOv9{background:var(--accent-color);border:none;border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-800);cursor:pointer;display:block;height:var(--marker-size);margin:0;padding:0;position:relative;width:var(--marker-size)}.Slider_marker__vtOv9:before{border-radius:50%;content:\"\";display:block;height:40px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:40px}.Slider_marker__vtOv9:hover{background:var(--active-color)}.Slider_marker__vtOv9:disabled{cursor:default;opacity:.5}.Slider_control__vtxup{--track-radius:50px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;height:var(--thumb-size);margin:0;padding:0;position:relative;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;width:100%;z-index:2}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background-color:var(--active-color-alpha-100)}.Slider_control__vtxup[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background:transparent!important}.Slider_control__vtxup:focus{box-shadow:inset 0 0 0 2px none}.Slider_control__vtxup::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--active-color) 0,var(--active-color) var(--progress),var(--accent-color-alpha-100) var(--progress),var(--accent-color-alpha-100) 100%);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--active-color);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size))/2);width:var(--thumb-size)}.Slider_control__vtxup::-moz-range-track{background:var(--accent-color-alpha-100);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-progress{background:var(--active-color);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-thumb{background:var(--active-color);border:none;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size)}.Slider_ghost__tfPtm{background:var(--accent-color);border-radius:50%;height:var(--ghost-size);left:0;opacity:.45;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--ghost-size);z-index:2}.Slider_size-xs__v6UDK{--track-height:1px;--thumb-size:10px;--ghost-size:10px;--marker-size:6px;font-size:12px}.Slider_size-s__8hGSO{--track-height:2px;--thumb-size:12px;--ghost-size:12px;--marker-size:7px;font-size:14px}.Slider_size-s__8hGSO .Slider_markersRow__l-yga{top:-1px}.Slider_size-m__Dj7LT{--track-height:8px;--thumb-size:16px;--ghost-size:16px;--marker-size:12px;font-size:16px}.Slider_size-m__Dj7LT .Slider_markersRow__l-yga{top:1px}.Slider_size-l__Qi6tI{--track-height:12px;--thumb-size:20px;--ghost-size:20px;--marker-size:16px;font-size:18px}.Slider_size-l__Qi6tI .Slider_markersRow__l-yga{top:4px}.Slider_size-xl__85Gcz{--track-height:16px;--thumb-size:24px;--ghost-size:24px;--marker-size:20px;font-size:20px}.Slider_size-xl__85Gcz .Slider_markersRow__l-yga{top:5px}";
 var S = {"root":"Slider_root__hLZtd","disabled":"Slider_disabled__jz0lx","control":"Slider_control__vtxup","hasLabel":"Slider_hasLabel__Epyqi","label":"Slider_label__Gi7GI","trackWrap":"Slider_trackWrap__PX861","hasMarkers":"Slider_hasMarkers__YfnMG","trackRow":"Slider_trackRow__hbQdR","markersRow":"Slider_markersRow__l-yga","markerWrap":"Slider_markerWrap__6hLJN","marker":"Slider_marker__vtOv9","ghost":"Slider_ghost__tfPtm","size-xs":"Slider_size-xs__v6UDK","size-s":"Slider_size-s__8hGSO","size-m":"Slider_size-m__Dj7LT","size-l":"Slider_size-l__Qi6tI","size-xl":"Slider_size-xl__85Gcz"};
 styleInject(css_248z);
 

package/dist/esm/src/tiptap/slash-mention/SlashSuggestionList.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import { Menu } from '../../components/Menu/Menu.js';
+import S from './SlashSuggestionList.styl.js';
+
+function SlashSuggestionListInner({ items, command, listHandleRef, }) {
+    const [selected, setSelected] = useState(0);
+    useEffect(() => {
+        setSelected(s => Math.min(s, Math.max(items.length - 1, 0)));
+    }, [items.length]);
+    const safeSel = Math.min(selected, Math.max(items.length - 1, 0));
+    const onPick = useCallback((index) => {
+        const item = items[index];
+        if (!item)
+            return;
+        command(item);
+    }, [command, items]);
+    const onKeyboardEvent = useCallback((event) => {
+        if (items.length === 0)
+            return false;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            setSelected(s => Math.min(s + 1, items.length - 1));
+            return true;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            setSelected(s => Math.max(s - 1, 0));
+            return true;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const max = Math.max(items.length - 1, 0);
+            const idx = Math.min(selected, max);
+            const item = items[idx];
+            if (item)
+                command(item);
+            return true;
+        }
+        if (event.key === 'Escape') {
+            return false;
+        }
+        return false;
+    }, [command, items, selected]);
+    useImperativeHandle(listHandleRef, () => ({ onKeyboardEvent }), [
+        onKeyboardEvent,
+    ]);
+    return (jsx("div", { className: S.root, children: jsx(Menu, { className: S.menu, role: "listbox", "aria-label": "Slash commands", children: items.map((item, idx) => (jsxs(Menu.Item, { role: "option", "aria-selected": idx === safeSel, className: cn(S.item, idx === safeSel && S.itemHighlighted), onMouseDown: e => e.preventDefault(), onMouseEnter: () => setSelected(idx), onClick: () => onPick(idx), textOverflow: true, children: [jsxs("span", { className: S.itemLabel, children: ["/", item.label] }), item.description ? (jsx("span", { className: S.itemDesc, children: item.description })) : null] }, `${item.id}-${idx}`))) }) }));
+}
+function SlashSuggestionList(props) {
+    if (props.items.length === 0)
+        return null;
+    return (jsx(SlashSuggestionListInner, { items: props.items, command: props.command, listHandleRef: props.listHandleRef }));
+}
+
+export { SlashSuggestionList };

package/dist/esm/src/tiptap/slash-mention/SlashSuggestionList.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".SlashSuggestionList_root__9KCb1{background-color:var(--decent-color);border-radius:8px;border-radius:var(--radius-lg,8px);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 8px 24px rgba(0,0,0,.2);color:var(--foreground);max-width:90vw;min-width:220px;overflow:hidden;position:relative}.SlashSuggestionList_root__9KCb1:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.dark .SlashSuggestionList_root__9KCb1{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 8px 24px rgba(0,0,0,.5)}.SlashSuggestionList_menu__s-jK3{margin:0;max-height:40vh}.SlashSuggestionList_item__9JBeY{align-items:flex-start;border-radius:var(--p-2);display:flex;flex-direction:column;height:auto!important;justify-content:center;min-height:0;overflow:visible!important;padding:var(--p-1) var(--p-2)!important;position:relative;text-overflow:clip!important;white-space:normal!important;width:100%}.SlashSuggestionList_itemHighlighted__cStZr,.SlashSuggestionList_item__9JBeY:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.SlashSuggestionList_itemLabel__OMaov{font-weight:600}.SlashSuggestionList_itemDesc__fAdcA{color:var(--muted-foreground);font-size:80%;white-space:normal}.SlashSuggestionList_mention__aT45p{align-items:center;background:var(--muted);border-radius:var(--p-1);display:inline-flex;line-height:1.4;margin:0 var(--p-1);padding:0 var(--p-1);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}";
+var S = {"root":"SlashSuggestionList_root__9KCb1","menu":"SlashSuggestionList_menu__s-jK3","item":"SlashSuggestionList_item__9JBeY","itemHighlighted":"SlashSuggestionList_itemHighlighted__cStZr","itemLabel":"SlashSuggestionList_itemLabel__OMaov","itemDesc":"SlashSuggestionList_itemDesc__fAdcA","mention":"SlashSuggestionList_mention__aT45p"};
+styleInject(css_248z);
+
+export { S as default };