@indxsearch/systm 2.7.0 → 2.10.0

package/CHANGELOG.md

@@ -5,6 +5,41 @@ All notable changes to @indxsearch/systm will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.10.0] - 2026-09-15
+
+### Added
+
+- Chat family, promoted from the components-gallery mockup: `ChatPanel` (header /
+  scrolling thread / composer / hints frame, with `Kbd` and `defaultChatHints`),
+  `UserMessage` and `AssistantMessage`, `Composer` (Enter sends, Shift+Enter breaks
+  the line, grows to `maxLines`, Send becomes Stop while `streaming`), `CitationRef`
+  (inline numbered mark) and `CitationList` (numbered chips with a source-type icon),
+  `StreamStatus`, `Suggestions` and `AnswerActions` (Copy + Ask a follow-up). First
+  used by the docs assistant in indx-docs. Not yet in Blazor.
+
+## [2.9.0] - 2026-09-12
+
+### Added
+
+- `Alert`, `AlertTitle`, `AlertDescription`: an in-page callout with variants
+  `default` / `info` / `success` / `warning` / `destructive`, a default icon per
+  variant (`icon` overrides, `null` suppresses), and `role="alert"` for
+  warning/destructive. No shadow; the variant colours the icon, title and a 2px
+  start edge. Ported to Blazor.
+- Tokens `--CLightBlue` and `--CWarning` in globals.css, matching the Blazor side.
+
+## [2.8.0] - 2026-09-11
+
+### Added
+
+- `Breadcrumbs`: page trail where each step is a link and may carry an
+  independent context switcher (`switcher`: current value, options, and an
+  optional `action` entry such as "New team…" that runs instead of selecting).
+  Sizes `micro` and `default`; step icons render at 14px. Ported to Blazor.
+- `NavigationMenu`: Radix navigation menu with Systm styling (`NavigationMenu`,
+  `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`,
+  `NavigationMenuContent`, `NavigationMenuLink`). Not yet in Blazor.
+
 ## [2.7.0] - 2026-09-08
 
 ### Added

package/README.md

@@ -109,8 +109,48 @@ import '@indxsearch/systm/patterns.css'; // Or import patterns standalone
 }
 ```
 
+## NavigationMenu
+
+Composable site navigation with direct links and dropdown panels, powered by
+Radix and styled with Systm colors, sharp corners, and Pixl dropdown icons.
+Use `micro` (30px, `--text-xs`) or `default` (40px, `--text-sm`). Leading trigger
+icons use 14px, with Button-matched gaps of 7px and 10px respectively.
+
+```tsx
+import {
+  NavigationMenu, NavigationMenuList, NavigationMenuItem,
+  NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
+} from '@indxsearch/systm';
+
+<NavigationMenu size="default" aria-label="Site navigation">
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Explore</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink href="/datasets">Datasets</NavigationMenuLink>
+        <NavigationMenuLink href="/teams">Teams</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+    <NavigationMenuItem>
+      <NavigationMenuLink variant="navigation" href="/" active>
+        Overview
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+
+Use `asChild` on links to wrap a router Link. Triggers accept an `icon` element
+and `disabled`; links accept `active` for the current page. Panels support custom
+layouts such as grids and descriptions. The shared dropdown viewport is included
+by the root and fits its width up to 560px. Radix root props such as `value`,
+`onValueChange`, and `delayDuration` are forwarded. See `/navigation-menu` in the
+component viewer for interactive examples.
+
 ## Dependencies
 
+- `@radix-ui/react-navigation-menu` - Site navigation primitives
+
 - `@indxsearch/pixl` - Icon library
 - `@radix-ui/react-dialog` - Modal/dialog primitives
 - `@radix-ui/react-popover` - Popover component primitives

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export type AlertVariant = 'default' | 'info' | 'success' | 'warning' | 'destructive';
+export interface AlertProps {
+    /** Tone. `destructive` for errors and irreversible outcomes, `warning` for things that need
+     *  attention, `success` for a completed action, `info` for neutral notices. */
+    variant?: AlertVariant;
+    /** Leading icon; defaults per variant (none for `default` and `info`). Pass `null` to suppress. */
+    icon?: React.ReactNode;
+    className?: string;
+    /** Use `AlertTitle` and `AlertDescription` for the standard layout; any content works. */
+    children: React.ReactNode;
+    role?: 'alert' | 'status';
+}
+/** A callout that stays in the flow of the page — for outcomes and conditions the reader must
+ *  not miss, not for transient toasts. Title and description are optional; an alert can be one line. */
+export declare const Alert: React.FC<AlertProps>;
+export declare const AlertTitle: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const AlertDescription: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { SelectOption } from '../Select/Select';
+export interface BreadcrumbItem {
+    id: string;
+    label: string;
+    href?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    /** Leading icon; icon components receive Button-compatible size and color props. */
+    icon?: React.ReactNode;
+    /** Supply a switcher to show an independent dropdown beside the page link. */
+    switcher?: {
+        label: string;
+        value: string;
+        options: SelectOption[];
+        onValueChange: (value: string) => void;
+        disabled?: boolean;
+        /** Optional entry below the options — typically "New …" — that runs instead of selecting. */
+        action?: {
+            label: string;
+            onSelect: () => void;
+        };
+    };
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    size?: 'micro' | 'default';
+    className?: string;
+    separator?: React.ReactNode;
+    /** Return a router link, forwarding these anchor props to preserve styling and accessibility. */
+    renderLink?: (item: BreadcrumbItem, props: React.ComponentPropsWithoutRef<'a'>) => React.ReactNode;
+    'aria-label'?: string;
+}
+/** Page navigation with independently controlled context switchers. */
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;

package/dist/components/Button/Button.d.ts

@@ -7,6 +7,10 @@ type ButtonBaseProps = {
     size?: 'micro' | 'default' | 'large';
     variant?: 'primary' | 'secondary' | 'ghost';
     disabled?: boolean;
+    /** The action behind this button is in progress: a Spinner takes the left-icon slot and the
+     *  button is disabled until it clears. Set it on every button that starts work the user has
+     *  to wait for, so a slow operation never reads as a dead click. */
+    loading?: boolean;
     iconLeft?: React.ReactElement<IconProps>;
     iconRight?: React.ReactElement<IconProps>;
     className?: string;

package/dist/components/Chat/AnswerActions.d.ts

@@ -0,0 +1,10 @@
+export interface AnswerActionsProps {
+    onCopy?: () => void;
+    /** Flip briefly after `onCopy` to acknowledge the copy. */
+    copied?: boolean;
+    onFollowUp?: () => void;
+    followUpLabel?: string;
+    className?: string;
+}
+/** The row under a finished answer: Copy on the left, the follow-up prompt on the right. */
+export declare function AnswerActions({ onCopy, copied, onFollowUp, followUpLabel, className }: AnswerActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/ChatPanel.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface ChatPanelProps {
+    /** Rendered above the thread — typically a mode `Tabs`. */
+    header?: React.ReactNode;
+    /** The conversation: messages, status lines, suggestions. Scrolls independently. */
+    children: React.ReactNode;
+    /** Rendered below the thread — typically a `Composer`. */
+    composer?: React.ReactNode;
+    /** Keyboard hints under the composer; `false` hides the row. */
+    hints?: React.ReactNode | false;
+    className?: string;
+    /** Ref to the scrolling thread, so a caller can keep the newest message in view. */
+    threadRef?: React.Ref<HTMLDivElement>;
+    'aria-label'?: string;
+}
+/** Keyboard hint pill for the hints row. */
+export declare function Kbd({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** Default hints: Enter sends, Shift+Enter breaks a line, Escape closes. */
+export declare const defaultChatHints: import("react/jsx-runtime").JSX.Element;
+/** The frame of a conversation: optional header, a scrolling thread, the composer and a hints row.
+ *  Sized by its container — give it a height (or let a modal/dialog do so) and the thread scrolls. */
+export declare function ChatPanel({ header, children, composer, hints, className, threadRef, 'aria-label': ariaLabel }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/Citation.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+interface IconProps {
+    size?: string | number;
+    color?: string;
+}
+export interface CitationRefProps {
+    /** The number the source list shows for this citation. */
+    n: number;
+    /** Where the source lives; rendered as a link when given. */
+    href?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    title?: string;
+    className?: string;
+}
+/** Numbered inline mark that sits in the running text and points at an entry in `CitationList`. */
+export declare function CitationRef({ n, href, onClick, title, className }: CitationRefProps): import("react/jsx-runtime").JSX.Element;
+export interface CitationItem {
+    n: number;
+    title: string;
+    href?: string;
+    /** Icon of the source type — a pixl icon element. */
+    icon?: React.ReactElement<IconProps>;
+    onClick?: (e: React.MouseEvent) => void;
+}
+export interface CitationListProps {
+    items: CitationItem[];
+    /** Heading over the list. */
+    label?: string;
+    className?: string;
+}
+/** The sources an answer drew on, as a row of numbered chips. */
+export declare function CitationList({ items, label, className }: CitationListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Chat/Composer.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export interface ComposerProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Called with the trimmed text on Enter or the send button. Not called while `streaming`. */
+    onSend: (text: string) => void;
+    /** Called by the Stop button, which replaces Send while `streaming`. */
+    onStop?: () => void;
+    /** An answer is in flight: the send button becomes Stop and Enter does nothing. */
+    streaming?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    /** Leading icon; defaults to the pixl AI agent. `null` hides it. */
+    icon?: React.ReactNode;
+    /** Tallest the field grows before it scrolls, in lines. */
+    maxLines?: number;
+    className?: string;
+    'aria-label'?: string;
+}
+export interface ComposerHandle {
+    focus: () => void;
+}
+/** The message field. Enter sends, Shift+Enter breaks the line; the field grows with its text up
+ *  to `maxLines`. Send becomes Stop while an answer streams. */
+export declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<ComposerHandle>>;

package/dist/components/Chat/Message.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface UserMessageProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/** What the person typed: right-aligned, on a raised tone. Line breaks are kept. */
+export declare function UserMessage({ children, className }: UserMessageProps): import("react/jsx-runtime").JSX.Element;
+export interface AssistantMessageProps {
+    /** Name shown above the answer. */
+    label?: string;
+    /** Icon before the name; defaults to the pixl AI agent. */
+    icon?: React.ReactNode;
+    /** The answer and anything under it — `StreamStatus`, `CitationList`, `AnswerActions`. */
+    children: React.ReactNode;
+    className?: string;
+}
+/** The assistant's turn: a small labelled head, then whatever the answer is made of. */
+export declare function AssistantMessage({ label, icon, children, className }: AssistantMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/StreamStatus.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export interface StreamStatusProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/** One quiet line saying what the assistant is doing right now — "Searching the docs…", "Writing…". */
+export declare function StreamStatus({ children, className }: StreamStatusProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/Suggestions.d.ts

@@ -0,0 +1,9 @@
+export interface SuggestionsProps {
+    items: string[];
+    onPick: (text: string) => void;
+    /** Heading over the row. */
+    label?: string;
+    className?: string;
+}
+/** Questions to start from, shown while the thread is empty. */
+export declare function Suggestions({ items, onPick, label, className }: SuggestionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chat/index.d.ts

@@ -0,0 +1,7 @@
+export { ChatPanel, Kbd, defaultChatHints, type ChatPanelProps } from './ChatPanel';
+export { UserMessage, AssistantMessage, type UserMessageProps, type AssistantMessageProps } from './Message';
+export { Composer, type ComposerProps, type ComposerHandle } from './Composer';
+export { CitationRef, CitationList, type CitationRefProps, type CitationItem, type CitationListProps } from './Citation';
+export { StreamStatus, type StreamStatusProps } from './StreamStatus';
+export { Suggestions, type SuggestionsProps } from './Suggestions';
+export { AnswerActions, type AnswerActionsProps } from './AnswerActions';

package/dist/components/NavigationMenu/NavigationMenu.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import * as Primitive from '@radix-ui/react-navigation-menu';
+export interface NavigationMenuProps extends React.ComponentPropsWithoutRef<typeof Primitive.Root> {
+    size?: 'micro' | 'default';
+}
+/** Compose with List, Item, Trigger, Content and Link. The shared panel is included. */
+export declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+export declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<Primitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export declare const NavigationMenuItem: React.ForwardRefExoticComponent<Primitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+type Icon = React.ReactElement<{
+    size?: string | number;
+    color?: string;
+}>;
+export interface NavigationMenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Primitive.Trigger>, 'asChild'> {
+    icon?: Icon;
+}
+export declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<Primitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface NavigationMenuLinkProps extends React.ComponentPropsWithoutRef<typeof Primitive.Link> {
+    /** Use navigation for a direct link in the top-level list. */
+    variant?: 'navigation' | 'panel';
+}
+/** Supports asChild for React Router and other link components. */
+export declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};