@homecode/ui 5.3.7 → 5.3.8

package/dist/esm/index.js

@@ -35,7 +35,7 @@ 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 { PROMPT_COMPOSER_COMMAND_CHIP_CLASS, createPromptComposerHandle, getPromptComposerTokenRangeBeforePos, insertPromptComposerContentAtCaret, openPromptComposerSlashSuggestion, 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';

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

@@ -7,11 +7,12 @@ 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, scrollProps = {}, }, ref) {
+const PromptComposer = forwardRef(function PromptComposer({ disabled = false, placeholder, className, slashCommandItems, slashSuggestionPlacement, onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit = true, onSubmit, onChange, scrollProps = {}, }, ref) {
     const { editor } = usePromptComposerEditor({
         disabled,
         placeholder,
         slashCommandItems,
+        slashSuggestionPlacement,
         onSlashItemCommand,
         prefillMessage,
         attachmentsCount,
@@ -28,6 +29,7 @@ const PromptComposer = forwardRef(function PromptComposer({ disabled = false, pl
         getEditor: () => {
             throw new Error('PromptComposer editor is not ready yet');
         },
+        openSlashSuggestion: () => undefined,
     }), []);
     useImperativeHandle(ref, () => (editor ? createPromptComposerHandle(editor) : unavailableHandle), [editor, unavailableHandle]);
     return (jsx("div", { className: cn(S.root, className), "data-disabled": disabled ? 'true' : 'false', children: jsx(Scroll, { y: true, fadeSize: "s", ...scrollProps, className: S.scroller, children: jsx(EditorContent, { editor: editor, className: S.editorMount }) }) }));

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

@@ -81,6 +81,22 @@ function setPromptComposerEditorText(editor, text, options) {
         });
     }
 }
+function openPromptComposerSlashSuggestion(editor, slashChar = '/') {
+    if (editor.isDestroyed)
+        return;
+    editor.chain().focus('end').run();
+    const { doc, selection } = editor.state;
+    const pos = selection.to;
+    const $pos = doc.resolve(pos);
+    let insert = slashChar;
+    if ($pos.parentOffset > 0) {
+        const before = doc.textBetween(pos - 1, pos);
+        if (!/\s/.test(before)) {
+            insert = ` ${slashChar}`;
+        }
+    }
+    editor.chain().focus('end').insertContent(insert).run();
+}
 function createPromptComposerHandle(editor) {
     return {
         insertAtCaret: (content, options) => insertPromptComposerContentAtCaret(editor, content, options),
@@ -99,7 +115,8 @@ function createPromptComposerHandle(editor) {
             setPromptComposerEditorText(editor, text, options);
         },
         getEditor: () => editor,
+        openSlashSuggestion: slashChar => openPromptComposerSlashSuggestion(editor, slashChar),
     };
 }
 
-export { PROMPT_COMPOSER_COMMAND_CHIP_CLASS, createPromptComposerHandle, getPromptComposerTokenRangeBeforePos, insertPromptComposerContentAtCaret, promptComposerChipHtml, promptComposerMentionNode };
+export { PROMPT_COMPOSER_COMMAND_CHIP_CLASS, createPromptComposerHandle, getPromptComposerTokenRangeBeforePos, insertPromptComposerContentAtCaret, openPromptComposerSlashSuggestion, promptComposerChipHtml, promptComposerMentionNode };

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

@@ -10,7 +10,7 @@ import { PROMPT_COMPOSER_EMPTY_DOC, promptComposerParagraphDoc } from './promptC
 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, }) {
+function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, slashSuggestionPlacement = 'above', onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit, onSubmit, onChange, }) {
     const slashOpenRef = useRef(false);
     const onSlashItemCommandRef = useRef(onSlashItemCommand);
     onSlashItemCommandRef.current = onSlashItemCommand;
@@ -23,7 +23,7 @@ function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, onS
         slashOpenRef.current = active;
     }, []);
     const slashItemsFingerprint = JSON.stringify(slashCommandItems ?? null);
-    const slashItemsStable = useMemo(() => slashCommandItems ?? DEFAULT_CHAT_SLASH_ITEMS, [slashCommandItems, slashItemsFingerprint]);
+    const slashItemsStable = useMemo(() => slashCommandItems ?? DEFAULT_CHAT_SLASH_ITEMS, [slashItemsFingerprint]);
     const placeholderText = useMemo(() => {
         if (placeholder === undefined || placeholder === null) {
             return 'Type a message...';
@@ -57,13 +57,18 @@ function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, onS
         if (slashItemsStable.length > 0) {
             exts.push(createSlashMentionExtension({
                 items: slashItemsStable,
-                suggestionPlacement: 'above',
+                suggestionPlacement: slashSuggestionPlacement,
                 onSuggestionUiActiveChange: suggestionActiveUpdater,
                 onItemCommand: ctx => onSlashItemCommandRef.current?.(ctx) === true,
             }));
         }
         return exts;
-    }, [placeholderText, slashItemsStable, suggestionActiveUpdater]);
+    }, [
+        placeholderText,
+        slashItemsStable,
+        slashSuggestionPlacement,
+        suggestionActiveUpdater,
+    ]);
     const [text, setText] = useState('');
     const editorDomRef = useRef(null);
     const bindEditorDom = useCallback(({ editor }) => {

package/dist/esm/src/hooks/useListKeyboardControl.js

@@ -28,6 +28,10 @@ const useListKeyboardControl = ({ isActive, itemsCount, onSelect, }) => {
         if (e.key === 'Enter') {
             if (newIndex < 0 || newIndex >= itemsCount)
                 return;
+            const active = document.activeElement;
+            if (active?.closest('.promptComposerEditor, .ProseMirror, [contenteditable="true"], [aria-label="Slash commands"]')) {
+                return;
+            }
             e.preventDefault();
             e.stopPropagation();
             onSelect?.(newIndex);

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

@@ -31,6 +31,7 @@ function SlashSuggestionListInner({ items, command, listHandleRef, }) {
         }
         if (event.key === 'Enter') {
             event.preventDefault();
+            event.stopPropagation();
             const max = Math.max(items.length - 1, 0);
             const idx = Math.min(selected, max);
             const item = items[idx];
@@ -46,7 +47,7 @@ function SlashSuggestionListInner({ items, command, listHandleRef, }) {
     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, item.className), 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}`))) }) }));
+    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, item.className), onMouseDown: e => e.preventDefault(), onMouseEnter: () => setSelected(idx), onClick: () => onPick(idx), textOverflow: true, children: [jsx("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)

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

@@ -31,11 +31,13 @@ const SlashMention = Mention.extend({
     },
 });
 const SUGGESTION_GAP_PX = 4;
-function placeSlashSuggestionPopup(popupElement, clientRect, placement) {
+function placeSlashSuggestionPopup(popupElement, clientRect, placement, editorElement) {
     if (!clientRect)
         return;
     const el = popupElement;
-    const popupHeight = el.getBoundingClientRect().height;
+    const popupRect = el.getBoundingClientRect();
+    const popupHeight = popupRect.height;
+    const popupWidth = popupRect.width;
     const spaceBelow = window.innerHeight - clientRect.bottom - SUGGESTION_GAP_PX;
     const spaceAbove = clientRect.top - SUGGESTION_GAP_PX;
     let showAbove = placement === 'above';
@@ -45,7 +47,11 @@ function placeSlashSuggestionPopup(popupElement, clientRect, placement) {
     const top = showAbove
         ? Math.max(SUGGESTION_GAP_PX, clientRect.top - popupHeight - SUGGESTION_GAP_PX)
         : clientRect.bottom + SUGGESTION_GAP_PX;
-    el.style.left = `${clientRect.left}px`;
+    const editorRect = editorElement?.getBoundingClientRect();
+    let left = editorRect ? editorRect.left : clientRect.left;
+    const maxLeft = window.innerWidth - popupWidth - SUGGESTION_GAP_PX;
+    left = Math.max(SUGGESTION_GAP_PX, Math.min(left, maxLeft));
+    el.style.left = `${left}px`;
     el.style.top = `${top}px`;
 }
 function slashMentionSuggestionRender(uiRef, placement = 'below') {
@@ -53,7 +59,7 @@ function slashMentionSuggestionRender(uiRef, placement = 'below') {
     const place = (props) => {
         if (!popup?.element)
             return;
-        placeSlashSuggestionPopup(popup.element, props.clientRect?.() ?? null, placement);
+        placeSlashSuggestionPopup(popup.element, props.clientRect?.() ?? null, placement, props.editor.view.dom);
     };
     return {
         onStart: props => {

package/dist/esm/types/src/components/PromptComposer/PromptComposer.d.ts

@@ -1,9 +1,10 @@
 import { type PromptComposerHandle } from './promptComposerInsert';
 export type { PromptComposerHandle, PromptComposerInsertOptions, } from './promptComposerInsert';
-export declare const PromptComposer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+export declare const PromptComposer: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onSubmit" | "onChange"> & {
     disabled?: boolean;
     placeholder?: string;
     slashCommandItems?: import(".").SlashCommandItem[];
+    slashSuggestionPlacement?: import(".").SlashSuggestionPlacement;
     onSlashItemCommand?: import(".").SlashOnItemCommand;
     prefillMessage?: string;
     attachmentsCount?: number;

package/dist/esm/types/src/components/PromptComposer/PromptComposer.types.d.ts

@@ -1,11 +1,13 @@
 import type { Editor } from '@tiptap/core';
 import type { HTMLAttributes } from 'react';
-import type { SlashCommandItem, SlashOnItemCommand } from '../../tiptap/slash-mention';
+import type { SlashCommandItem, SlashOnItemCommand, SlashSuggestionPlacement } from '../../tiptap/slash-mention';
 import type { Props as ScrollProps } from '../Scroll/Scroll.types';
 export type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onSubmit' | 'onChange'> & {
     disabled?: boolean;
     placeholder?: string;
     slashCommandItems?: SlashCommandItem[];
+    /** Slash menu vertical placement; defaults to above chat input. */
+    slashSuggestionPlacement?: SlashSuggestionPlacement;
     onSlashItemCommand?: SlashOnItemCommand;
     prefillMessage?: string | null;
     /** Staged attachment count - Enter can submit even when text empty. */

package/dist/esm/types/src/components/PromptComposer/index.d.ts

@@ -2,6 +2,6 @@ export { PromptComposer } from './PromptComposer';
 export type { PromptComposerProps } from './PromptComposer.types';
 export { usePromptComposerEditor } from './usePromptComposerEditor';
 export type { UsePromptComposerEditorOptions } from './usePromptComposerEditor';
-export { getPromptComposerTokenRangeBeforePos, createPromptComposerHandle, insertPromptComposerContentAtCaret, promptComposerChipHtml, promptComposerMentionNode, PROMPT_COMPOSER_COMMAND_CHIP_CLASS, } from './promptComposerInsert';
+export { getPromptComposerTokenRangeBeforePos, createPromptComposerHandle, insertPromptComposerContentAtCaret, openPromptComposerSlashSuggestion, promptComposerChipHtml, promptComposerMentionNode, PROMPT_COMPOSER_COMMAND_CHIP_CLASS, } from './promptComposerInsert';
 export type { PromptComposerHandle, PromptComposerInsertOptions, PromptComposerMentionNodeInput, } from './promptComposerInsert';
 export type { SlashCommandItem, SlashItemCommandContext, SlashOnItemCommand, SlashSuggestionPlacement, } from '../../tiptap/slash-mention';

package/dist/esm/types/src/components/PromptComposer/promptComposerInsert.d.ts

@@ -24,6 +24,8 @@ export type PromptComposerHandle = {
         atEnd?: boolean;
     }) => void;
     getEditor: () => Editor;
+    /** Inserts `/` (with leading space when needed) to open slash suggestions. */
+    openSlashSuggestion: (slashChar?: string) => void;
 };
 export declare function getPromptComposerTokenRangeBeforePos(editor: Editor, pos: number): {
     from: number;
@@ -39,4 +41,5 @@ export type PromptComposerMentionNodeInput = {
 };
 export declare function promptComposerMentionNode(input: PromptComposerMentionNodeInput): JSONContent;
 export declare function insertPromptComposerContentAtCaret(editor: Editor, content: string | JSONContent, options?: PromptComposerInsertOptions): void;
+export declare function openPromptComposerSlashSuggestion(editor: Editor, slashChar?: string): void;
 export declare function createPromptComposerHandle(editor: Editor): PromptComposerHandle;

package/dist/esm/types/src/components/PromptComposer/usePromptComposerEditor.d.ts

@@ -1,9 +1,10 @@
 import { type Editor } from '@tiptap/core';
-import type { SlashCommandItem, SlashOnItemCommand } from '../../tiptap/slash-mention';
+import type { SlashCommandItem, SlashOnItemCommand, SlashSuggestionPlacement } from '../../tiptap/slash-mention';
 export type UsePromptComposerEditorOptions = {
     disabled: boolean;
     placeholder?: string;
     slashCommandItems?: SlashCommandItem[];
+    slashSuggestionPlacement?: SlashSuggestionPlacement;
     onSlashItemCommand?: SlashOnItemCommand;
     prefillMessage?: string | null;
     attachmentsCount?: number;
@@ -16,4 +17,4 @@ export type UsePromptComposerEditorResult = {
     text: string;
     trimmedText: string;
 };
-export declare function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount, allowEnterSubmit, onSubmit, onChange, }: UsePromptComposerEditorOptions): UsePromptComposerEditorResult;
+export declare function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, slashSuggestionPlacement, onSlashItemCommand, prefillMessage, attachmentsCount, allowEnterSubmit, onSubmit, onChange, }: UsePromptComposerEditorOptions): UsePromptComposerEditorResult;

package/graphify-out/.graphify_labels.json

@@ -0,0 +1 @@
+{"0": "Docs Examples Index", "1": "PromptComposer", "2": "Build Toolchain", "3": "Form Examples", "4": "Autocomplete Examples", "5": "Checkbox Showcase", "6": "Theme Config", "7": "Type Props Schema", "8": "Notifications System", "9": "Button Checkbox Core", "10": "Optional Value Props", "11": "Select Component", "12": "Input AssistiveText", "13": "Gallery Component", "14": "Virtualized Examples", "15": "TypeScript Config", "16": "Package Dependencies", "17": "Card Component", "18": "Debounce Paranja", "19": "UILIB Docs Assets", "20": "Component Type Props", "21": "Flex Gallery", "22": "DatePicker Examples", "23": "Comment Value Props", "24": "Docs Index Pages", "25": "i18n LangSelector", "26": "Package Metadata", "27": "Popup Positioning", "28": "Popup Component", "29": "Docs Code Layout", "30": "Draggable Types", "31": "Slider Component", "32": "Small Component Props", "33": "Select Popup Types", "34": "Router Core", "35": "Calendar Helpers", "36": "AssistiveText Menu", "37": "Button DatePicker Types", "38": "Container Icon", "39": "Checkbox Props", "40": "NPM Scripts", "41": "Calendar DatePicker", "42": "DateTime Types", "43": "Autocomplete Core", "44": "Global Type Kinds", "45": "Date Type Fields", "46": "Form Types", "47": "Docs App Store", "48": "Component Types JSON", "49": "Option Value Types", "50": "Generic Props", "51": "Draggable Component", "52": "Heading Scroll", "53": "Progress Indicators", "54": "Table Virtualized", "55": "Virtualized Lifecycle", "56": "Docs Pages", "57": "Code Example Helpers", "58": "Media Control Icons", "59": "Text Heading", "60": "Type Parser Script", "61": "ButtonGroup Tabs", "62": "DateTime Component", "63": "Display Format Props", "64": "Calendar Day Props", "65": "Dialogue Props", "66": "Arrow Chevron Icons", "67": "InputFile Upload", "68": "InputFile Types", "69": "Virtualized List", "70": "List Lifecycle", "71": "Icon Index Exports", "72": "Webpack Paths Config", "73": "DatePicker Helpers", "74": "Calendar Day", "75": "Calendar Pointer Props", "76": "Size Enum Props", "77": "Code Editor", "78": "Communication Icons", "79": "Select Constants", "80": "TextShimmer", "81": "Virtualized Cards", "82": "ClassName Props", "83": "Ukrainian i18n", "84": "Icon RequiredStar Types", "85": "Navigation Icons", "86": "File Action Icons", "87": "Label Helpers", "88": "Lazy Types", "89": "Select Example Helpers", "90": "Menu More Icons", "91": "Social Media Icons", "92": "Rollup Build Config", "93": "Tabs Types", "94": "VH Component", "95": "Docs Navigation", "96": "Footer Alignment", "97": "Calendar Day Disabled", "98": "Render Day Props", "99": "Render Months Label", "100": "Render Month Label", "101": "Render Weekday Label", "102": "Render Year Label", "103": "Start Of Week", "104": "Weekend ClassName", "105": "Weekend Styling", "106": "Icon Name Helpers", "107": "Media Placeholder Icons", "108": "Utility Icons", "109": "Commerce Icons", "110": "Data Usage Icons", "111": "Peer Dependencies", "112": "Table Render", "113": "Theme Docs", "114": "Number Formatting", "115": "Virtualized Index Helpers", "116": "Docs Scope", "117": "Auto Scroll Props", "118": "Content Props", "119": "Content ClassName", "120": "Footer Props", "121": "Icon Props", "122": "Max Height Props", "123": "No Scroll Props", "124": "Subtitle Props", "125": "Subtitle ClassName", "126": "Title Props", "127": "Title ClassName", "128": "Trigger Props", "129": "Trigger ClassName", "130": "Width Props", "131": "Docs Examples", "132": "Expand Types", "133": "Brand Avatar Icons", "134": "Communication Action Icons", "135": "Status Action Icons", "136": "OAuth Brand Icons", "137": "View Fullscreen Icons", "138": "Add Remove Icons", "139": "Route Navigation Icons", "140": "Settings Tool Icons", "141": "Input Label Constants", "142": "Lazy Docs Example", "143": "More Docs Examples", "144": "Docs Scope Pages", "145": "Additional Docs Examples", "146": "Brand Logo Assets", "147": "Test Utilities", "148": "PostCSS Config", "149": "Single Doc Page", "150": "Gallery Dots", "151": "Docs Entry Point", "152": "Bookmark Icons", "153": "Drag Handler Icons", "154": "Lock Security Icons", "155": "Save Undo Icons", "156": "SVG Test Mock", "157": "Store Declarations", "158": "Global Window Types", "159": "Gallery Singleton", "160": "Minimize Prop", "161": "Forward Icon", "162": "Router Context", "163": "Router Store", "164": "Select Helpers", "165": "Theme Styl Types", "166": "Test Setup"}

package/graphify-out/.graphify_python

@@ -0,0 +1 @@
+/Users/oleh_1/.local/pipx/venvs/graphifyy/bin/python

package/graphify-out/.graphify_root

@@ -0,0 +1 @@
+/Users/oleh_1/prj/ui