@sybilion/uilib 1.3.43 → 1.3.46

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.d.ts

@@ -1,6 +1,7 @@
-import { type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import type { Editor } from '@tiptap/core';
 import type { ChatAttachmentDropItem } from '../Chat.types';
+import { type ChatPromptComposerHandle } from './chatPromptComposerInsert';
+export type { ChatPromptComposerHandle, ChatPromptComposerInsertOptions, } from './ChatPromptComposer.types';
 export type ChatPromptComposerProps = {
     editor: Editor;
     disabled: boolean;
@@ -8,6 +9,5 @@ export type ChatPromptComposerProps = {
     attachments: ChatAttachmentDropItem[];
     attachmentAccept?: string;
     onAttachmentFiles?: (files: File[]) => void;
-    onComposerKeyDown: (event: ReactKeyboardEvent) => void;
 };
-export declare function ChatPromptComposer({ editor, disabled, trimmedMessage, attachments, attachmentAccept, onAttachmentFiles, onComposerKeyDown, }: ChatPromptComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare const ChatPromptComposer: import("react").ForwardRefExoticComponent<ChatPromptComposerProps & import("react").RefAttributes<ChatPromptComposerHandle>>;

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.types.d.ts

@@ -0,0 +1,2 @@
+export type { ChatPromptComposerHandle, ChatPromptComposerInsertOptions, } from './chatPromptComposerInsert';
+export { CHAT_PROMPT_COMMAND_CHIP_CLASS, chatPromptChipHtml, createChatPromptComposerHandle, getChatPromptTokenRangeBeforePos, insertChatPromptContentAtCaret, } from './chatPromptComposerInsert';

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/chatPromptComposerInsert.d.ts

@@ -0,0 +1,35 @@
+import type { Editor, JSONContent } from '@tiptap/core';
+export type ChatPromptComposerInsertOptions = {
+    /**
+     * Doc range to replace before insert (e.g. slash suggestion `range` covering `/query`).
+     * When set, `replaceTriggerToken` is ignored.
+     */
+    replaceRange?: {
+        from: number;
+        to: number;
+    };
+    /**
+     * When true and no `replaceRange`, delete text from caret back to the preceding
+     * space or start of line before insert. Default true.
+     */
+    replaceTriggerToken?: boolean;
+    /** Append a space after inserted content so the user can keep typing. Default true. */
+    trailingSpace?: boolean;
+};
+/** Global class for inline command chips inserted via `insertAtCaret`. */
+export declare const CHAT_PROMPT_COMMAND_CHIP_CLASS = "chat-prompt-command-chip";
+export type ChatPromptComposerHandle = {
+    /** Insert HTML string or TipTap JSON at the caret (or after clearing trigger text). */
+    insertAtCaret: (content: string | JSONContent, options?: ChatPromptComposerInsertOptions) => void;
+    focus: () => void;
+    getEditor: () => Editor;
+};
+/** Range of the unfinished token immediately before `pos` (back to space or line start). */
+export declare function getChatPromptTokenRangeBeforePos(editor: Editor, pos: number): {
+    from: number;
+    to: number;
+};
+/** Build inline chip HTML for `insertAtCaret` (uses global `CHAT_PROMPT_COMMAND_CHIP_CLASS`). */
+export declare function chatPromptChipHtml(text: string, className?: string): string;
+export declare function insertChatPromptContentAtCaret(editor: Editor, content: string | JSONContent, options?: ChatPromptComposerInsertOptions): void;
+export declare function createChatPromptComposerHandle(editor: Editor): ChatPromptComposerHandle;

package/dist/esm/types/src/components/ui/Chat/ChatPrompt/useChatPromptEditor.d.ts

@@ -1,4 +1,3 @@
-import { type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import type { SlashCommandItem, SlashOnItemCommand } from '#uilib/tiptap/slash-mention/types';
 import type { Editor } from '@tiptap/core';
 export type UseChatPromptEditorOptions = {
@@ -16,6 +15,5 @@ export type UseChatPromptEditorResult = {
     editor: Editor | null;
     trimmedMessage: string;
     resetAfterSend: () => void;
-    handleComposerKeyDown: (event: ReactKeyboardEvent) => void;
 };
 export declare function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount, onEnterSubmit, }: UseChatPromptEditorOptions): UseChatPromptEditorResult;

package/dist/esm/types/src/components/ui/Chat/index.d.ts

@@ -11,6 +11,9 @@ export type { ChatSheetActions, ChatSheetProps } from './ChatSheet/ChatSheet';
 export type { UseChatPanelChromeModelInput, UseChatPanelChromeModelResult, } from './ChatSheet/useChatPanelChromeModel';
 export { ChatMessage } from './ChatMessage';
 export { ChatPrompt } from './ChatPrompt';
+export type { ChatPromptComposerHandle } from './ChatPrompt/ChatPromptComposer';
+export { CHAT_PROMPT_COMMAND_CHIP_CLASS, chatPromptChipHtml, createChatPromptComposerHandle, getChatPromptTokenRangeBeforePos, insertChatPromptContentAtCaret, } from './ChatPrompt/chatPromptComposerInsert';
+export type { ChatPromptComposerInsertOptions } from './ChatPrompt/ChatPromptComposer.types';
 export { ChatPresets } from './ChatPresets';
 export type { ChatEmptyStateConfig, ChatEmptyStateContext, ChatEmptyStateProps, } from './ChatEmptyState/ChatEmptyState.types';
 export type { Chat as ChatType, ChatAttachmentDropItem, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserTextFileAttachment, } from './Chat.types';

package/dist/esm/types/src/components/ui/Page/PageFooter/PageFooter.d.ts

@@ -7,7 +7,6 @@ export interface PageFooterLinkItem {
     ariaLabel?: string;
 }
 export interface PageFooterProps {
-    logo?: ReactNode;
     /** Rendered between logo block and copyright (e.g. debug UI from the app). */
     children?: ReactNode;
     /** When non-empty, version badge links here (e.g. `/releases`). */
@@ -25,4 +24,4 @@ export interface PageFooterProps {
      */
     links?: PageFooterLinkItem[];
 }
-export declare function PageFooter({ children, versionLink, versionLabel, homeTo, brandText, logo, websiteHref, mailHref, copyrightText, links: linksProp, }: PageFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageFooter({ children, versionLink, versionLabel, homeTo, brandText, websiteHref, mailHref, copyrightText, links: linksProp, }: PageFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/docs/pages/ChatSheetPage.d.ts

@@ -0,0 +1 @@
+export default function ChatSheetPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/tiptap/slash-mention/types.d.ts

@@ -3,6 +3,10 @@ export type SlashCommandItem = {
     id: string;
     label: string;
     description?: string;
+    /** Extra class on the inserted mention chip (merged with `slash-mention`). */
+    className?: string;
+    /** CSS color for chip text; background is 30% of this color mixed with transparent. */
+    color?: string;
 };
 export type SlashItemCommandContext = {
     item: SlashCommandItem;
@@ -11,8 +15,9 @@ export type SlashItemCommandContext = {
     range?: Range;
 };
 /**
- * If provided, run when a slash item is picked. Return true to skip mention insert
- * (extension clears the trigger text from the composer).
+ * If provided, run when a slash item is picked. Return true to skip default mention insert
+ * and handle the composer yourself (e.g. `createChatPromptComposerHandle(editor).insertAtCaret`
+ * with `{ replaceRange: range }` to replace `/query` with a custom chip).
  */
 export type SlashOnItemCommand = (ctx: SlashItemCommandContext) => boolean;
 /** Where the slash palette opens relative to the caret. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.43",
+  "version": "1.3.46",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chart/Chart.styl

@@ -91,7 +91,7 @@
   border 1px solid var(--border) / 0.5
   // background-color var(--background)
   backdrop-filter blur(10px)
-  background-color unquote('color-mix(in srgb, var(--background) 50%, transparent)')
+  background-color unquote('color-mix(in srgb, var(--background) 70%, transparent)')
   font-size 0.75rem /* text-xs */
   line-height 1rem
   box-shadow 0 10px 10px -5px rgba(0 0 0 0.2), 0 0 1px 0 var(--muted-foreground)
@@ -99,6 +99,7 @@
   transition opacity 0.5s ease-out
 
   :global(.dark) &
+    background-color unquote('color-mix(in srgb, var(--background) 50%, transparent)')
     box-shadow 0 0 1px 0 var(--sb-slate-700), 0 10px 10px -5px rgba(0 0 0 0.7)
 
   .chartContainer:hover &

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.tsx

@@ -103,8 +103,15 @@ export function ChartAreaInteractive({
     const raw = selectedAnalysisId ?? selectedForecast?.id ?? null;
     const anchorId =
       raw == null ? null : typeof raw === 'number' ? raw : Number(raw);
+    const anchorForecastLoaded =
+      anchorId != null &&
+      Number.isFinite(anchorId) &&
+      chartData.some(row => {
+        const value = row[`forecast_${anchorId}`];
+        return typeof value === 'number' && Number.isFinite(value);
+      });
     const opts =
-      anchorId != null && Number.isFinite(anchorId)
+      anchorId != null && Number.isFinite(anchorId) && anchorForecastLoaded
         ? { endDateAnchorAnalysisId: anchorId }
         : undefined;
     return filterDataForTimeRange(chartData, timeRange, opts);

package/src/components/ui/Chat/Chat.types.ts

@@ -98,7 +98,7 @@ export interface ChatPromptProps {
   onAttachmentFiles?: (files: File[]) => void;
   /** Slash menu (`/`); omit or pass empty to disable Mention trigger (no default items). */
   slashCommandItems?: SlashCommandItem[];
-  /** Custom slash pick handler; return true to skip default mention insert. */
+  /** Custom slash pick handler; return true to skip default mention insert and insert via composer API. */
   onSlashItemCommand?: SlashOnItemCommand;
 }
 

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.styl

@@ -62,13 +62,38 @@ INPUT_MAX_HEIGHT = 200px
     overflow-y auto !important
     overflow-x hidden !important
 
-  & :global(.ProseMirror p.is-empty::before)
+  & :global(.ProseMirror p.is-empty.is-editor-empty::before)
     color var(--muted-foreground)
     content attr(data-placeholder)
     float left
     height 0
     pointer-events none
 
+  & :global(.ProseMirror .slash-mention)
+    display inline-flex
+    align-items center
+    padding 0 var(--p-1)
+    border-radius var(--radius-sm)
+    background var(--muted)
+    font-size 0.875em
+    line-height 1.4
+    white-space nowrap
+    user-select none
+    vertical-align baseline
+
+  & :global(.ProseMirror .chat-prompt-command-chip)
+    display inline-flex
+    align-items center
+    padding 0 var(--p-1)
+    border-radius var(--radius-sm)
+    background var(--muted)
+    color var(--foreground)
+    font-size 0.875em
+    line-height 1.4
+    white-space nowrap
+    user-select none
+    vertical-align baseline
+
 .submitColumn
   display flex
   flex-direction column

package/src/components/ui/Chat/ChatPrompt/ChatPrompt.tsx

@@ -1,31 +1,46 @@
 import cn from 'classnames';
-import { FormEvent, useCallback, useRef } from 'react';
+import {
+  FormEvent,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 
 import type { ChatPromptProps } from '../Chat.types';
 import S from './ChatPrompt.styl';
 import { ChatPromptAttachments } from './ChatPromptAttachments';
-import { ChatPromptComposer } from './ChatPromptComposer';
+import {
+  ChatPromptComposer,
+  type ChatPromptComposerHandle,
+} from './ChatPromptComposer';
+import { createChatPromptComposerHandle } from './chatPromptComposerInsert';
 import { useChatPromptEditor } from './useChatPromptEditor';
 
-export function ChatPrompt({
-  onSubmit,
-  placeholder,
-  className,
-  footer,
-  prefillMessage,
-  slashCommandItems,
-  onSlashItemCommand,
-  attachments = [],
-  onRemoveAttachment,
-  disabled = false,
-  attachmentAccept,
-  onAttachmentFiles,
-}: ChatPromptProps) {
-  const attachmentsCount = attachments.length;
+export type { ChatPromptComposerHandle } from './ChatPromptComposer';
 
-  const emitSubmitRef = useRef(() => {});
-  const { editor, trimmedMessage, resetAfterSend, handleComposerKeyDown } =
-    useChatPromptEditor({
+export const ChatPrompt = forwardRef<ChatPromptComposerHandle, ChatPromptProps>(
+  function ChatPrompt(
+    {
+      onSubmit,
+      placeholder,
+      className,
+      footer,
+      prefillMessage,
+      slashCommandItems,
+      onSlashItemCommand,
+      attachments = [],
+      onRemoveAttachment,
+      disabled = false,
+      attachmentAccept,
+      onAttachmentFiles,
+    },
+    ref,
+  ) {
+    const attachmentsCount = attachments.length;
+
+    const emitSubmitRef = useRef(() => {});
+    const { editor, trimmedMessage, resetAfterSend } = useChatPromptEditor({
       disabled,
       placeholder,
       slashCommandItems,
@@ -35,53 +50,59 @@ export function ChatPrompt({
       onEnterSubmit: () => emitSubmitRef.current(),
     });
 
-  const emitSubmitAndClear = useCallback(() => {
-    if (!editor) return;
-    if (!trimmedMessage && attachmentsCount === 0) return;
+    useImperativeHandle(
+      ref,
+      () => (editor ? createChatPromptComposerHandle(editor) : null!),
+      [editor],
+    );
+
+    const emitSubmitAndClear = useCallback(() => {
+      if (!editor) return;
+      if (!trimmedMessage && attachmentsCount === 0) return;
 
-    const msg = trimmedMessage;
-    resetAfterSend();
-    onSubmit(msg, attachmentsCount > 0 ? attachments : undefined);
-  }, [
-    attachments,
-    attachmentsCount,
-    editor,
-    onSubmit,
-    resetAfterSend,
-    trimmedMessage,
-  ]);
+      const msg = trimmedMessage;
+      resetAfterSend();
+      onSubmit(msg, attachmentsCount > 0 ? attachments : undefined);
+    }, [
+      attachments,
+      attachmentsCount,
+      editor,
+      onSubmit,
+      resetAfterSend,
+      trimmedMessage,
+    ]);
 
-  emitSubmitRef.current = emitSubmitAndClear;
+    emitSubmitRef.current = emitSubmitAndClear;
 
-  const handleSubmitForm = useCallback(
-    (e?: FormEvent) => {
-      e?.preventDefault();
-      emitSubmitAndClear();
-    },
-    [emitSubmitAndClear],
-  );
+    const handleSubmitForm = useCallback(
+      (e?: FormEvent) => {
+        e?.preventDefault();
+        emitSubmitAndClear();
+      },
+      [emitSubmitAndClear],
+    );
 
-  if (!editor) {
-    return null;
-  }
+    if (!editor) {
+      return null;
+    }
 
-  return (
-    <form onSubmit={handleSubmitForm} className={cn(S.root, className)}>
-      <ChatPromptAttachments
-        attachments={attachments}
-        onRemove={index => onRemoveAttachment?.(index)}
-        disabled={disabled}
-      />
-      <ChatPromptComposer
-        editor={editor}
-        disabled={disabled}
-        trimmedMessage={trimmedMessage}
-        attachments={attachments}
-        attachmentAccept={attachmentAccept}
-        onAttachmentFiles={onAttachmentFiles}
-        onComposerKeyDown={handleComposerKeyDown}
-      />
-      {footer}
-    </form>
-  );
-}
+    return (
+      <form onSubmit={handleSubmitForm} className={cn(S.root, className)}>
+        <ChatPromptAttachments
+          attachments={attachments}
+          onRemove={index => onRemoveAttachment?.(index)}
+          disabled={disabled}
+        />
+        <ChatPromptComposer
+          editor={editor}
+          disabled={disabled}
+          trimmedMessage={trimmedMessage}
+          attachments={attachments}
+          attachmentAccept={attachmentAccept}
+          onAttachmentFiles={onAttachmentFiles}
+        />
+        {footer}
+      </form>
+    );
+  },
+);

package/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.tsx

@@ -1,7 +1,8 @@
 import {
   type ChangeEvent,
-  type KeyboardEvent as ReactKeyboardEvent,
+  forwardRef,
   useCallback,
+  useImperativeHandle,
   useRef,
 } from 'react';
 
@@ -12,6 +13,15 @@ import { PaperclipIcon, SendHorizontalIcon } from 'lucide-react';
 import { Button } from '../../Button';
 import type { ChatAttachmentDropItem } from '../Chat.types';
 import S from './ChatPrompt.styl';
+import {
+  type ChatPromptComposerHandle,
+  createChatPromptComposerHandle,
+} from './chatPromptComposerInsert';
+
+export type {
+  ChatPromptComposerHandle,
+  ChatPromptComposerInsertOptions,
+} from './ChatPromptComposer.types';
 
 export type ChatPromptComposerProps = {
   editor: Editor;
@@ -20,21 +30,29 @@ export type ChatPromptComposerProps = {
   attachments: ChatAttachmentDropItem[];
   attachmentAccept?: string;
   onAttachmentFiles?: (files: File[]) => void;
-  onComposerKeyDown: (event: ReactKeyboardEvent) => void;
 };
 
-export function ChatPromptComposer({
-  editor,
-  disabled,
-  trimmedMessage,
-  attachments,
-  attachmentAccept,
-  onAttachmentFiles,
-  onComposerKeyDown,
-}: ChatPromptComposerProps) {
+export const ChatPromptComposer = forwardRef<
+  ChatPromptComposerHandle,
+  ChatPromptComposerProps
+>(function ChatPromptComposer(
+  {
+    editor,
+    disabled,
+    trimmedMessage,
+    attachments,
+    attachmentAccept,
+    onAttachmentFiles,
+  },
+  ref,
+) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const showAttachButton = Boolean(attachmentAccept && onAttachmentFiles);
 
+  useImperativeHandle(ref, () => createChatPromptComposerHandle(editor), [
+    editor,
+  ]);
+
   const handleFileInputChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       const files = Array.from(e.target.files ?? []);
@@ -79,7 +97,7 @@ export function ChatPromptComposer({
         </>
       ) : null}
 
-      <div className={S.editorWrap} onKeyDown={onComposerKeyDown}>
+      <div className={S.editorWrap}>
         <EditorContent editor={editor} className={S.editorMount} />
       </div>
 
@@ -95,4 +113,4 @@ export function ChatPromptComposer({
       </div>
     </div>
   );
-}
+});

package/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.types.ts

@@ -0,0 +1,11 @@
+export type {
+  ChatPromptComposerHandle,
+  ChatPromptComposerInsertOptions,
+} from './chatPromptComposerInsert';
+export {
+  CHAT_PROMPT_COMMAND_CHIP_CLASS,
+  chatPromptChipHtml,
+  createChatPromptComposerHandle,
+  getChatPromptTokenRangeBeforePos,
+  insertChatPromptContentAtCaret,
+} from './chatPromptComposerInsert';

package/src/components/ui/Chat/ChatPrompt/chatPromptComposerInsert.ts

@@ -0,0 +1,122 @@
+import type { Editor, JSONContent } from '@tiptap/core';
+
+export type ChatPromptComposerInsertOptions = {
+  /**
+   * Doc range to replace before insert (e.g. slash suggestion `range` covering `/query`).
+   * When set, `replaceTriggerToken` is ignored.
+   */
+  replaceRange?: { from: number; to: number };
+  /**
+   * When true and no `replaceRange`, delete text from caret back to the preceding
+   * space or start of line before insert. Default true.
+   */
+  replaceTriggerToken?: boolean;
+  /** Append a space after inserted content so the user can keep typing. Default true. */
+  trailingSpace?: boolean;
+};
+
+/** Global class for inline command chips inserted via `insertAtCaret`. */
+export const CHAT_PROMPT_COMMAND_CHIP_CLASS = 'chat-prompt-command-chip';
+
+export type ChatPromptComposerHandle = {
+  /** Insert HTML string or TipTap JSON at the caret (or after clearing trigger text). */
+  insertAtCaret: (
+    content: string | JSONContent,
+    options?: ChatPromptComposerInsertOptions,
+  ) => void;
+  focus: () => void;
+  getEditor: () => Editor;
+};
+
+/** Range of the unfinished token immediately before `pos` (back to space or line start). */
+export function getChatPromptTokenRangeBeforePos(
+  editor: Editor,
+  pos: number,
+): { from: number; to: number } {
+  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: string): string {
+  return text
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;');
+}
+
+/** Build inline chip HTML for `insertAtCaret` (uses global `CHAT_PROMPT_COMMAND_CHIP_CLASS`). */
+export function chatPromptChipHtml(
+  text: string,
+  className: string = CHAT_PROMPT_COMMAND_CHIP_CLASS,
+): string {
+  const cls = className ? ` class="${className}"` : '';
+  return `<span${cls} data-chat-prompt-chip="true">${escapeHtml(text)}</span>`;
+}
+
+export function insertChatPromptContentAtCaret(
+  editor: Editor,
+  content: string | JSONContent,
+  options?: ChatPromptComposerInsertOptions,
+): void {
+  if (editor.isDestroyed) return;
+
+  const {
+    replaceRange,
+    replaceTriggerToken = true,
+    trailingSpace = true,
+  } = options ?? {};
+
+  const { from: selFrom, to: selTo } = editor.state.selection;
+  let from: number;
+  let to: number;
+
+  if (replaceRange) {
+    from = replaceRange.from;
+    to = replaceRange.to;
+  } else if (replaceTriggerToken) {
+    ({ from, to } = getChatPromptTokenRangeBeforePos(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();
+  });
+}
+
+export function createChatPromptComposerHandle(
+  editor: Editor,
+): ChatPromptComposerHandle {
+  return {
+    insertAtCaret: (content, options) =>
+      insertChatPromptContentAtCaret(editor, content, options),
+    focus: () => {
+      editor.commands.focus();
+    },
+    getEditor: () => editor,
+  };
+}