@nordmanai/nif 0.2.2 → 0.2.4

package/dist/ui/components/nm-ai/nm-ai.d.ts

@@ -32,10 +32,12 @@ export declare function NmMessage(props: {
     onAction?: (id: string) => void;
     footer?: ReactNode;
 }): ReactNode;
+/** `label` is the heading in the product's language; without it the heading says Thinking, or how long the thought took. */
 export declare function NmReasoning(props: {
     text: string;
     streaming?: boolean;
     seconds?: number;
+    label?: string;
     defaultOpen?: boolean;
 }): ReactNode;
 export type NmChainStep = {
@@ -173,8 +175,10 @@ export declare function NmTestResults(props: {
     suites: readonly NmTestSuite[];
     defaultOpen?: boolean;
 }): ReactNode;
+/** `title` is the row's heading in the product's language; without it the heading is built from the state and name. */
 export declare function NmTool(props: {
     name: string;
+    title?: string;
     state: NmToolState;
     input?: string;
     output?: string;

package/dist/ui/components/nm-alert/nm-alert.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps, ReactNode } from 'react';
+export type NmAlertTone = 'default' | 'info' | 'warning' | 'danger' | 'success';
+/**
+ * A notice inside the page. The shadcn Alert composition, styled by NIF tokens.
+ * Compose with NmIcon, NmAlertTitle, NmAlertDescription and NmAlertAction.
+ */
+export declare function NmAlert({ tone, icon, className, children, ...props }: ComponentProps<'div'> & {
+    tone?: NmAlertTone;
+    icon?: ReactNode;
+}): ReactNode;
+export declare function NmAlertTitle({ className, ...props }: ComponentProps<'div'>): ReactNode;
+export declare function NmAlertDescription({ className, ...props }: ComponentProps<'div'>): ReactNode;
+export declare function NmAlertAction({ className, ...props }: ComponentProps<'div'>): ReactNode;

package/dist/ui/components/nm-button/nm-button.d.ts

@@ -1,8 +1,10 @@
-import { type ButtonHTMLAttributes } from 'react';
+import { type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NM_BUTTON_SIZES, NM_BUTTON_TONES, type NmButtonSize, type NmButtonTone } from '../../config/nm-button.ts';
 export type NmButtonProps = {
     label: string;
+    /** Content of the button in place of the icon and label, for a button that holds more than text. The label is still its accessible name when icon only. */
+    children?: ReactNode;
     tone: NmButtonTone;
     size?: NmButtonSize;
     block?: boolean;
@@ -13,7 +15,7 @@ export type NmButtonProps = {
     /** Shows the icon alone, in a square. The label is still its accessible name. */
     iconOnly?: boolean;
     testId?: string;
-    onClick?: () => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 /** Any other button attribute, ref and event goes to the button, so a Base UI trigger can render a NmButton. */
 type NmButtonNativeProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof NmButtonProps | 'children' | 'aria-pressed'>;

package/dist/ui/components/nm-checkbox/nm-checkbox.d.ts

@@ -1,2 +1,2 @@
-import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { Checkbox as CheckboxPrimitive } from '../../lib/nm-motion.ts';
 export declare function NmCheckbox({ className, ...props }: CheckboxPrimitive.Root.Props): import("react").JSX.Element;

package/dist/ui/components/nm-chip/nm-chip.d.ts

@@ -1,13 +1,16 @@
 import type { ComponentProps, ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 export declare const NM_CHIP_TONES: readonly ['neutral', 'outline', 'filled', 'ok', 'warn', 'error'];
-export declare const NM_CHIP_SIZES: readonly ['default', 'sm'];
+/** `inline` takes the size of the text around it, for a chip that sits in a sentence. */
+export declare const NM_CHIP_SIZES: readonly ['default', 'sm', 'inline'];
 export type NmChipTone = (typeof NM_CHIP_TONES)[number];
 export type NmChipSize = (typeof NM_CHIP_SIZES)[number];
 type NmChipBase = {
     tone?: NmChipTone;
     size?: NmChipSize;
     icon?: NmIconId;
+    /** A mark in the icon's place, such as an app's logo. `icon` wins when both are given. */
+    leading?: ReactNode;
     /** A chip that stands for a chosen filter or option. */
     selected?: boolean;
     disabled?: boolean;
@@ -34,5 +37,5 @@ export type NmChipProps = NmChipBase & ({
  * A small label for a status, a filter, an attachment or a tag. Static by default. Give it `onClick` and it
  * becomes a button, `href` and it becomes a link, `onRemove` and it gains a remove button.
  */
-export declare function NmChip({ tone, size, icon, selected, disabled, children, className, onClick, href, onRemove, removeLabel, ...rest }: NmChipProps): import("react").JSX.Element;
+export declare function NmChip({ tone, size, icon, leading, selected, disabled, children, className, onClick, href, onRemove, removeLabel, ...rest }: NmChipProps): import("react").JSX.Element;
 export {};

package/dist/ui/components/nm-collapsible/nm-collapsible.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import { Collapsible as CollapsiblePrimitive } from '../../lib/nm-motion.ts';
+/** Content that opens and closes under a trigger. Built on the Base UI Collapsible, animated by Animate UI. */
+export declare function NmCollapsible(props: CollapsiblePrimitive.Root.Props): ReactNode;
+export declare function NmCollapsibleTrigger(props: CollapsiblePrimitive.Trigger.Props): ReactNode;
+export declare function NmCollapsibleContent({ className, ...props }: CollapsiblePrimitive.Panel.Props): ReactNode;

package/dist/ui/components/nm-combobox/nm-combobox.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+import { Combobox as ComboboxPrimitive } from '../../lib/nm-motion.ts';
 /**
  * Base UI Combobox, in the shadcn composition, styled by NIF tokens. A select you can search: type to filter the
  * list, then choose. The list is the same surface as the Dropdown Menu and the Select.

package/dist/ui/components/nm-command/nm-command.d.ts

@@ -5,7 +5,10 @@ import { NmDialog } from '../nm-dialog/nm-dialog.tsx';
  * Command: search and run. The shadcn Command composition on cmdk, which gives filtering, arrow-key
  * navigation and the listbox roles. Everything you see is NIF tokens.
  */
-export declare function NmCommand({ className, ...props }: ComponentProps<typeof CommandPrimitive>): import("react").JSX.Element;
+/** `variant="menu"` is the compact list for a popover: no frame, rows the size of menu rows. */
+export declare function NmCommand({ className, variant, ...props }: ComponentProps<typeof CommandPrimitive> & {
+    variant?: 'panel' | 'menu';
+}): import("react").JSX.Element;
 export declare function NmCommandDialog({ title, description, children, ...props }: Omit<ComponentProps<typeof NmDialog>, 'children'> & {
     title?: string;
     description?: string;
@@ -35,3 +38,7 @@ export declare function NmCommandItem({ className, children, ...props }: Compone
 /** Shown on the right of an item, and only while the item is selected. */
 export declare function NmCommandItemActions({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
 export declare function NmCommandShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+/** A quiet line after an item's name. In the menu variant it sits at the end of the row. */
+export declare function NmCommandDescription({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+/** The slot for a mark at the start of an item, such as an app's logo. It sizes whatever it holds. */
+export declare function NmCommandIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;

package/dist/ui/components/nm-composer/nm-composer.d.ts

@@ -1,5 +1,8 @@
-import { type ReactNode } from 'react';
+import { type ReactNode, type Ref, type TextareaHTMLAttributes } from 'react';
 import { type NmComposerAttachment, type NmComposerQueued } from '../../config/nm-composer.ts';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import type { OrbAdapter } from 'orb-ui';
+import type { NmVoiceOrbAgentState } from '../../config/nm-voice-orb.ts';
 export type NmComposerProps = {
     value: string;
     onChange: (value: string) => void;
@@ -18,16 +21,56 @@ export type NmComposerProps = {
     onRemoveAttachment?: (id: string) => void;
     /** The add button on the left. Omit it to hide the button. */
     onAdd?: () => void;
-    /** Dictation. Pressed while it listens. */
+    /** Dictation. Starts listening. */
     onMic?: () => void;
-    micActive?: boolean;
-    /** Voice mode. It shows while the box is empty. Typing swaps it for Send. */
+    /** Listening: the field gives way to `listeningContent` (the waveform), and the bar offers Cancel and Done. */
+    listening?: boolean;
+    listeningContent?: ReactNode;
+    onCancelListening?: () => void;
+    onConfirmListening?: () => void;
+    /** Done was pressed and the text is being transcribed. */
+    confirming?: boolean;
+    /** Voice mode. The button shows while the box is empty. Typing swaps it for Send. */
     onVoice?: () => void;
+    /** Voice mode is running: the orb takes the place of the voice button and ends the session when pressed. */
+    voiceActive?: boolean;
+    voiceState?: NmVoiceOrbAgentState;
+    voiceAdapter?: OrbAdapter;
+    getInputVolume?: () => number;
+    getOutputVolume?: () => number;
+    onVoiceStop?: () => void;
+    /** The microphone in voice mode. */
+    voiceMuted?: boolean;
+    onVoiceMute?: () => void;
     /** Replaces the add button, for a menu of what to add. Give the trigger the composer button class. */
     addControl?: ReactNode;
     /** Controls beside the add button, such as the model selector. */
     start?: ReactNode;
     disabled?: boolean;
+    /** Something other than text can be sent, such as an attached file. */
+    sendable?: boolean;
     testId?: string;
+    /** Chips and pills that belong to the message, such as quotes, skills and connections. They sit above the field. */
+    header?: ReactNode;
+    /** Drawn over the field, for marks that follow the text. */
+    overlay?: ReactNode;
+    /**
+     * Inline chips. A chip sits in the text as its label between two NM_COMPOSER_INLINE_MARK characters,
+     * and is drawn as a NIF chip. This says which icon or mark, and which text, a label gets.
+     */
+    inlineChip?: (label: string) => {
+        icon?: NmIconId;
+        leading?: ReactNode;
+        text?: string;
+    } | null;
+    /** More controls at the end of the bar, before the action, such as usage and dictation. */
+    end?: ReactNode;
+    /** The field's own ref and handlers (keys, paste, focus, composition), for a host that reads the text itself. */
+    fieldRef?: Ref<HTMLTextAreaElement>;
+    fieldProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'className' | 'rows' | 'placeholder' | 'disabled'>;
+    /** Render a div instead of a form, for a host that already sits inside one. Send is then a submit button of that form. */
+    formless?: boolean;
+    /** The host owns the text: the field is not controlled by `value`, and `value` only says whether there is any. */
+    uncontrolled?: boolean;
 };
 export declare function NmComposer(props: NmComposerProps): ReactNode;

package/dist/ui/components/nm-context-menu/nm-context-menu.d.ts

@@ -1,4 +1,4 @@
-import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+import { ContextMenu as ContextMenuPrimitive } from '../../lib/nm-motion.ts';
 /**
  * Base UI Context Menu: the menu that opens on right click or long press. Its items are the dropdown menu parts
  * (NmDropdownMenuItem, NmDropdownMenuSub, NmDropdownMenuCheckboxItem and the rest).

package/dist/ui/components/nm-dialog/nm-dialog.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { Dialog as DialogPrimitive } from '../../lib/nm-motion.ts';
 /** Base UI Dialog, in the shadcn composition, styled by NIF tokens. */
 export declare function NmDialog(props: DialogPrimitive.Root.Props): import("react").JSX.Element;
 export declare function NmDialogTrigger(props: DialogPrimitive.Trigger.Props): import("react").JSX.Element;

package/dist/ui/components/nm-dropdown/nm-dropdown.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode, type Ref } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import { NM_DROPDOWN_ALIGN, NM_DROPDOWN_REVEAL, NM_DROPDOWN_TONE, NM_DROPDOWN_TRIGGER } from '../../config/nm-dropdown.ts';
-import { type NmDropdownItem } from './nm-dropdown-item';
+import type { NmDropdownItem } from './nm-dropdown-item';
 export type { NmDropdownItem };
 export type NmDropdownProps = {
     label: string;

package/dist/ui/components/nm-dropdown-menu/nm-dropdown-menu.d.ts

@@ -1,11 +1,13 @@
-import type { ComponentProps } from 'react';
-import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { type ComponentProps } from 'react';
+import { Menu as MenuPrimitive } from '../../lib/nm-motion.ts';
+import type { NmDropdownItem } from '../nm-dropdown/nm-dropdown-item.ts';
 /** Base UI Menu, in the shadcn dropdown-menu composition, styled by NIF tokens. */
 export declare function NmDropdownMenu(props: MenuPrimitive.Root.Props): import("react").JSX.Element;
 export declare function NmDropdownMenuTrigger(props: MenuPrimitive.Trigger.Props): import("react").JSX.Element;
 type PositionProps = Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>;
 export declare function NmDropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & PositionProps): import("react").JSX.Element;
 export declare function NmDropdownMenuGroup(props: MenuPrimitive.Group.Props): import("react").JSX.Element;
+/** A heading in the menu. Inside a group it names the group. On its own it is a plain heading, and never breaks the menu. */
 export declare function NmDropdownMenuLabel({ className, ...props }: MenuPrimitive.GroupLabel.Props): import("react").JSX.Element;
 export declare function NmDropdownMenuItem({ className, variant, ...props }: MenuPrimitive.Item.Props & {
     variant?: 'default' | 'destructive';
@@ -27,4 +29,11 @@ export declare function NmDropdownMenuText({ title, description }: {
 export declare function NmDropdownMenuDot({ status }: {
     status?: 'ok' | 'error';
 }): import("react").JSX.Element;
+/** A list of NmDropdownItem as animated menu rows: branches become submenus, `checked` rows keep a mark. */
+export declare function NmDropdownMenuItems({ items, selected, onSelect, onBranchExpand, }: {
+    items: readonly NmDropdownItem[];
+    selected?: string | null;
+    onSelect?: (id: string) => void;
+    onBranchExpand?: (id: string) => void;
+}): import("react").JSX.Element;
 export {};

package/dist/ui/components/nm-field/nm-field.d.ts

@@ -47,6 +47,8 @@ export type NmFieldProps = {
     onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
     onFocus?: () => void;
     onBlur?: () => void;
+    openInPanel?: boolean;
+    panelTitle?: string;
 };
 export declare const NmField: import("react").ForwardRefExoticComponent<NmFieldProps & import("react").RefAttributes<HTMLDivElement>>;
 export { NM_FIELD_KINDS, NM_FIELD_LAYOUT };

package/dist/ui/components/nm-hover-card/nm-hover-card.d.ts

@@ -1,4 +1,4 @@
-import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+import { PreviewCard as PreviewCardPrimitive } from '../../lib/nm-motion.ts';
 /** Base UI Preview Card, in the shadcn hover-card composition, styled by NIF tokens. */
 export declare function NmHoverCard(props: PreviewCardPrimitive.Root.Props): import("react").JSX.Element;
 export declare function NmHoverCardTrigger(props: PreviewCardPrimitive.Trigger.Props): import("react").JSX.Element;

package/dist/ui/components/nm-icon/animated/activity.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { type IconProps } from '@animate-ui/react/icons';
+type ActivityProps = IconProps<keyof typeof animations>;
+declare const animations: {
+    readonly default: {
+        path: {
+            initial: {
+                opacity: number;
+                pathLength: number;
+                pathOffset: number;
+            };
+            animate: {
+                opacity: number[];
+                pathLength: number[];
+                pathOffset: number[];
+                transition: {
+                    duration: number;
+                    ease: "easeInOut";
+                    opacity: {
+                        duration: number;
+                    };
+                };
+            };
+        };
+    };
+    readonly 'default-return': {
+        path: {
+            initial: {
+                opacity: number;
+                pathLength: number;
+                pathOffset: number;
+            };
+            animate: {
+                opacity: number[];
+                pathLength: number[];
+                pathOffset: number[];
+                transition: {
+                    duration: number;
+                    ease: "easeInOut";
+                    opacity: {
+                        duration: number;
+                    };
+                };
+            };
+        };
+    };
+    readonly 'default-loop': {
+        path: {
+            initial: {
+                opacity: number;
+                pathLength: number;
+                pathOffset: number;
+            };
+            animate: {
+                opacity: number[];
+                pathLength: number[];
+                pathOffset: number[];
+                transition: {
+                    duration: number;
+                    ease: "easeInOut";
+                    repeat: number;
+                    repeatType: "loop";
+                    opacity: {
+                        duration: number;
+                    };
+                };
+            };
+        };
+    };
+};
+declare function Activity(props: ActivityProps): React.JSX.Element;
+export { animations, Activity as ActivityAnimated };

package/dist/ui/components/nm-icon/animated/archive.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { type IconProps } from '@animate-ui/react/icons';
+type ArchiveProps = IconProps<keyof typeof animations>;
+declare const animations: {
+    readonly default: {
+        lid: {
+            initial: {
+                y: number;
+                rotate: number;
+                transformOrigin: string;
+                transition: {
+                    duration: number;
+                };
+            };
+            animate: {
+                y: number[];
+                rotate: number[];
+                transformOrigin: string;
+                transition: {
+                    duration: number;
+                    times: number[];
+                    ease: "easeInOut";
+                };
+            };
+        };
+        body: {};
+        handle: {};
+    };
+};
+declare function Archive(props: ArchiveProps): React.JSX.Element;
+export { animations, Archive as ArchiveAnimated };

package/dist/ui/components/nm-icon/animated/arrow-down.d.ts

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { type IconProps } from '@animate-ui/react/icons';
+type ArrowDownProps = IconProps<keyof typeof animations>;
+declare const animations: {
+    readonly default: {
+        group: {
+            initial: {
+                y: number;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+            animate: {
+                y: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+        path1: {};
+        path2: {};
+    };
+    readonly 'default-loop': {
+        group: {
+            initial: {
+                y: number;
+            };
+            animate: {
+                y: (string | number)[];
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+        path1: {};
+        path2: {};
+    };
+    readonly pointing: {
+        group: {};
+        path1: {
+            initial: {
+                d: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+            animate: {
+                d: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+        path2: {
+            initial: {
+                d: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+            animate: {
+                d: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+    };
+    readonly 'pointing-loop': {
+        group: {};
+        path1: {
+            initial: {
+                d: string;
+            };
+            animate: {
+                d: string[];
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+        path2: {
+            initial: {
+                d: string;
+            };
+            animate: {
+                d: string[];
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+    };
+    readonly out: {
+        group: {
+            initial: {
+                y: number;
+            };
+            animate: {
+                y: (string | number)[];
+                transition: {
+                    default: {
+                        ease: "easeInOut";
+                        duration: number;
+                    };
+                    y: {
+                        ease: "easeInOut";
+                        duration: number;
+                        times: number[];
+                    };
+                };
+            };
+        };
+        path1: {};
+        path2: {};
+    };
+};
+declare function ArrowDown(props: ArrowDownProps): React.JSX.Element;
+export { animations, ArrowDown as ArrowDownAnimated };

package/dist/ui/components/nm-icon/animated/arrow-left.d.ts

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import { type IconProps } from '@animate-ui/react/icons';
+type ArrowLeftProps = IconProps<keyof typeof animations>;
+declare const animations: {
+    readonly default: {
+        group: {
+            initial: {
+                x: number;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+            animate: {
+                x: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+        path1: {};
+        path2: {};
+    };
+    readonly 'default-loop': {
+        group: {
+            initial: {
+                x: number;
+            };
+            animate: {
+                x: (string | number)[];
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+        path1: {};
+        path2: {};
+    };
+    readonly pointing: {
+        group: {};
+        path1: {
+            initial: {
+                d: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+            animate: {
+                d: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+        path2: {
+            initial: {
+                d: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+            animate: {
+                d: string;
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+    };
+    readonly 'pointing-loop': {
+        group: {};
+        path1: {
+            initial: {
+                d: string;
+            };
+            animate: {
+                d: string[];
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+        path2: {
+            initial: {
+                d: string;
+            };
+            animate: {
+                d: string[];
+                transition: {
+                    ease: "easeInOut";
+                    duration: number;
+                };
+            };
+        };
+    };
+    readonly out: {
+        group: {
+            initial: {
+                x: number;
+            };
+            animate: {
+                x: (string | number)[];
+                transition: {
+                    default: {
+                        ease: "easeInOut";
+                        duration: number;
+                    };
+                    x: {
+                        ease: "easeInOut";
+                        duration: number;
+                        times: number[];
+                    };
+                };
+            };
+        };
+        path1: {};
+        path2: {};
+    };
+};
+declare function ArrowLeft(props: ArrowLeftProps): React.JSX.Element;
+export { animations, ArrowLeft as ArrowLeftAnimated };