@nordmanai/nif 0.1.0 → 0.2.0

package/dist/tokens.css

@@ -22,7 +22,7 @@
   /* One geometry for controls on every page. */
   --control-h:32px; --control-h-sm:28px; --control-h-lg:40px;
   --control-r:6px; --control-px:calc(12px * var(--nm-space-scale, 1)); --control-gap:calc(8px * var(--nm-space-scale, 1));
-  --control-fs:14px; --control-fw:500; --btn-hover:.88;
+  --control-fs:14px; --control-fw:var(--nm-weight-medium); --btn-hover:.88;
   --field-label-fs:13px; --field-label-gap:calc(6px * var(--nm-space-scale, 1)); --field-area-py:calc(10px * var(--nm-space-scale, 1));
   --tab-py:calc(10px * var(--nm-space-scale, 1)); --tab-px:calc(14px * var(--nm-space-scale, 1)); --tab-rule:2px;
   --toggle-pad:calc(3px * var(--nm-space-scale, 1)); --toggle-h:30px; --toggle-px:calc(14px * var(--nm-space-scale, 1)); --toggle-r:999px;
@@ -67,3 +67,6 @@
   --nm-font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
   --nm-weight-light:300; --nm-weight-regular:400; --nm-weight-medium:500; --nm-weight-semibold:600; --nm-weight-bold:700;
 }
+
+/* One height for every field: input, select, date, colour, input group. Content never changes it. */
+:root{ --nm-field-h:var(--control-h-lg); }

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

@@ -4,12 +4,6 @@ export declare function NmBubble(props: {
     role: 'user' | 'assistant';
     children: ReactNode;
 }): ReactNode;
-export declare function NmCodeBlock(props: {
-    children: string;
-    label?: string;
-    nowrap?: boolean;
-    maxHeight?: string;
-}): ReactNode;
 export declare function NmBadge(props: {
     tone?: NmAiBadgeTone;
     children: ReactNode;
@@ -81,10 +75,15 @@ export type NmFileNode = {
     name: string;
     children?: readonly NmFileNode[];
 };
+type TreeSelection = {
+    selected?: string;
+    onSelect?: (path: string) => void;
+};
+/** Folders open and close. Give it `onSelect` and a file can be chosen. `selected` is its path, like `src/App.tsx`. */
 export declare function NmFileTree(props: {
     nodes: readonly NmFileNode[];
     defaultOpen?: boolean;
-}): ReactNode;
+} & TreeSelection): ReactNode;
 export declare function NmInlineCitation(props: {
     label: string;
     title: string;
@@ -220,3 +219,4 @@ export declare function NmChat(props: {
     };
     streaming?: boolean;
 }): ReactNode;
+export {};

package/dist/ui/components/nm-brand-logo/nm-brand-logo.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+/**
+ * A brand logo from its SVG source, such as the strings in @thesvg/icons. The markup must come from a trusted
+ * package, never from user input. It is drawn at the icon size, and a mono logo (`mono`) takes the text colour, so it reads on any theme.
+ */
+export declare function NmBrandLogo({ svg, label, mono, className, ...props }: Omit<ComponentProps<'span'>, 'children'> & {
+    svg: string;
+    label?: string;
+    mono?: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+/** The path to the current page. The shadcn Breadcrumb composition, styled by NIF tokens. */
+export declare function NmBreadcrumb({ className, ...props }: ComponentProps<'nav'>): import("react").JSX.Element;
+export declare function NmBreadcrumbList({ className, ...props }: ComponentProps<'ol'>): import("react").JSX.Element;
+export declare function NmBreadcrumbItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
+export declare function NmBreadcrumbLink({ className, ...props }: ComponentProps<'a'>): import("react").JSX.Element;
+/** The current page. It is not a link. */
+export declare function NmBreadcrumbPage({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export declare function NmBreadcrumbSeparator({ className, children, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
+/** Stands for the levels left out. Put it in a dropdown menu trigger to let people reach them. */
+export declare function NmBreadcrumbEllipsis({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;

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

@@ -10,6 +10,8 @@ export type NmButtonProps = {
     disabled?: boolean;
     pressed?: boolean;
     icon?: NmIconId;
+    /** Shows the icon alone, in a square. The label is still its accessible name. */
+    iconOnly?: boolean;
     testId?: string;
     onClick?: () => void;
 };

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

@@ -0,0 +1,17 @@
+import { type ComponentProps, type ReactElement } from 'react';
+import { NmSeparator } from '../nm-separator/nm-separator.tsx';
+/**
+ * Joins buttons, and the controls that sit beside them, into one bar. Neighbours share a border and only the outer
+ * corners stay round. Nest groups to set sets of buttons apart. The shadcn Button Group composition, styled by NIF tokens.
+ */
+export declare function NmButtonGroup({ className, orientation, ...props }: ComponentProps<'div'> & {
+    orientation?: 'horizontal' | 'vertical';
+}): import("react").JSX.Element;
+/** A line between buttons that have no border of their own. Outline buttons do not need one. */
+export declare function NmButtonGroupSeparator({ className, orientation, ...props }: ComponentProps<typeof NmSeparator>): import("react").JSX.Element;
+/** Text in the bar, set like a button. Give `render` an element, such as a Label, to draw the text with it. */
+export declare function NmButtonGroupText({ className, render, children, ...props }: ComponentProps<'div'> & {
+    render?: ReactElement<{
+        className?: string;
+    }>;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { type DayPickerProps } from 'react-day-picker';
+/** react-day-picker, in the shadcn Calendar composition, drawn entirely by NIF tokens. Single, multiple or range. */
+export declare function NmCalendar({ className, showOutsideDays, ...props }: DayPickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,34 @@
+import type { ComponentProps } from 'react';
+export declare const NM_CARD_VARIANTS: readonly ['default', 'outline', 'muted'];
+export declare const NM_CARD_SIZES: readonly ['default', 'sm'];
+export type NmCardVariant = (typeof NM_CARD_VARIANTS)[number];
+export type NmCardSize = (typeof NM_CARD_SIZES)[number];
+type CardOptions = {
+    variant?: NmCardVariant;
+    size?: NmCardSize;
+    /** The card is the person's current choice. */
+    selected?: boolean;
+    /** The card cannot be used. */
+    disabled?: boolean;
+};
+/**
+ * A surface that groups related content. The shadcn Card composition, styled by NIF tokens.
+ * Give it an `href` and it becomes a link, with hover and focus states.
+ */
+export declare function NmCard({ className, variant, size, selected, disabled, href, ...props }: Omit<ComponentProps<'div'>, 'onClick'> & CardOptions & {
+    href?: string;
+    onClick?: ComponentProps<'a'>['onClick'];
+}): import("react").JSX.Element;
+/** `align="center"` centres a leading icon and a trailing action against the text, as in a row of apps. */
+export declare function NmCardHeader({ className, align, ...props }: ComponentProps<'div'> & {
+    align?: 'start' | 'center';
+}): import("react").JSX.Element;
+export declare function NmCardTitle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmCardDescription({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Sits at the end of the header, beside the title. */
+export declare function NmCardAction({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmCardContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmCardFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** A leading icon or image in the header. The title, description and footer line up beside it. */
+export declare function NmCardMedia({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,38 @@
+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'];
+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 chip that stands for a chosen filter or option. */
+    selected?: boolean;
+    disabled?: boolean;
+    children: ReactNode;
+    className?: string;
+};
+export type NmChipProps = NmChipBase & ({
+    onClick?: undefined;
+    href?: undefined;
+    onRemove?: () => void;
+    removeLabel?: string;
+} | {
+    onClick: () => void;
+    href?: undefined;
+    onRemove?: undefined;
+    removeLabel?: undefined;
+} | {
+    href: string;
+    onClick?: undefined;
+    onRemove?: undefined;
+    removeLabel?: undefined;
+}) & Omit<ComponentProps<'span'>, 'children' | 'className' | 'onClick'>;
+/**
+ * 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 {};

package/dist/ui/components/nm-code-block/nm-code-block.d.ts

@@ -0,0 +1,55 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export declare const NM_CODE_BLOCK_VARIANTS: readonly ['default', 'destructive'];
+export declare const NM_CODE_BLOCK_SIZES: readonly ['default', 'sm'];
+export type NmCodeBlockVariant = (typeof NM_CODE_BLOCK_VARIANTS)[number];
+export type NmCodeBlockSize = (typeof NM_CODE_BLOCK_SIZES)[number];
+/**
+ * Displays code, terminal output and diffs with an optional header, line numbers and a copy button.
+ * The shadcn Code Block composition, styled by NIF tokens. Colours for syntax come from the --nm-syntax tokens.
+ */
+export declare function NmCodeBlock({ className, variant, size, ...props }: ComponentProps<'div'> & {
+    variant?: NmCodeBlockVariant;
+    size?: NmCodeBlockSize;
+}): import("react").JSX.Element;
+export declare function NmCodeBlockHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmCodeBlockTitle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Buttons for the header. Placed straight in the block, they float over its top right corner. */
+export declare function NmCodeBlockActions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** An icon button that copies `value`. It shows a tick for a moment afterwards. */
+export declare function NmCodeBlockCopyButton({ value, label, copiedLabel }: {
+    value: string;
+    label?: string;
+    copiedLabel?: string;
+}): import("react").JSX.Element;
+/** One line. `variant` marks it as highlighted, added or removed. */
+export declare function NmCodeBlockLine({ className, variant, children, html, language, ...props }: Omit<ComponentProps<'span'>, 'children'> & {
+    variant?: 'default' | 'highlighted' | 'added' | 'removed';
+    children?: ReactNode;
+    html?: string;
+    language?: NmCodeLanguage;
+}): import("react").JSX.Element;
+/** Splits highlighted markup from shiki into one string per line. */
+export declare function nmHighlightedLines(html: string): string[];
+export declare const NM_CODE_LANGUAGES: readonly ['tsx', 'ts', 'js', 'json', 'css', 'bash'];
+export type NmCodeLanguage = (typeof NM_CODE_LANGUAGES)[number];
+export type NmCodeBlockContentProps = Omit<ComponentProps<'pre'>, 'children'> & {
+    /** A string, or a list of NmCodeBlockLine. */
+    children?: ReactNode;
+    /** Code already highlighted, as shiki writes it. Used in place of children. */
+    html?: string;
+    /** Colour the code in this language. Use `html` instead for a highlighter of your own. */
+    language?: NmCodeLanguage;
+    wrap?: boolean;
+    lineNumbers?: boolean;
+    startLine?: number;
+    /** Show only this many lines, dimmed, with a button to show the rest. */
+    collapsedLines?: number;
+    labels?: {
+        show: string;
+        hide: string;
+    };
+};
+/** The pre that scrolls or wraps. */
+export declare function NmCodeBlockContent({ className, children, html, language, wrap, lineNumbers, startLine, collapsedLines, labels, style, ...props }: NmCodeBlockContentProps): import("react").JSX.Element;
+/** A row under the code, for a note or a button. */
+export declare function NmCodeBlockFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

package/dist/ui/components/nm-color-picker/nm-color-picker.d.ts

@@ -0,0 +1,15 @@
+/** One colour as a swatch. The colour picker and the theme list both draw it. */
+export declare function NmColorSwatch({ color, shape }: {
+    color: string;
+    shape?: 'square' | 'round';
+}): import("react").JSX.Element;
+/** A colour field. The picker opens in a popover, drawn by NIF tokens around react-colorful. */
+export declare function NmColorPicker({ value, onValueChange, swatches, label, caption, disabled, }: {
+    value: string;
+    onValueChange: (hex: string) => void;
+    swatches?: readonly string[];
+    label?: string;
+    /** A caption above the field, set like the caption of a Field. */
+    caption?: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+/**
+ * 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.
+ */
+export declare function NmCombobox<Value = string>(props: ComboboxPrimitive.Root.Props<Value>): import("react").JSX.Element;
+/** The field you type in, with the button that opens the list. `bare` drops its own box, for use inside a Field. */
+export declare function NmComboboxInput({ className, bare, showClear, ...props }: ComboboxPrimitive.Input.Props & {
+    bare?: boolean;
+    showClear?: boolean;
+}): import("react").JSX.Element;
+/** `anchor` is the element the list lines up with. It defaults to the input. */
+export declare function NmComboboxContent({ className, children, anchor, ...props }: ComboboxPrimitive.Popup.Props & {
+    anchor?: HTMLElement | null;
+}): import("react").JSX.Element;
+/** The items. Give it a function of one item, and it draws the filtered list. */
+export declare function NmComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): import("react").JSX.Element;
+export declare function NmComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** What the list says when nothing matches. */
+export declare function NmComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): import("react").JSX.Element;
+export declare function NmComboboxGroup(props: ComboboxPrimitive.Group.Props): import("react").JSX.Element;
+export declare function NmComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): import("react").JSX.Element;
+export declare function NmComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): import("react").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+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;
+export declare function NmCommandDialog({ title, description, children, ...props }: Omit<ComponentProps<typeof NmDialog>, 'children'> & {
+    title?: string;
+    description?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The search row: an icon, the field and a clear button once there is text. */
+export declare function NmCommandInput({ className, value, defaultValue, onValueChange, clearLabel, ...props }: ComponentProps<typeof CommandPrimitive.Input> & {
+    clearLabel?: string;
+    defaultValue?: string;
+}): import("react").JSX.Element;
+/** Chips that narrow the list to one kind of result. */
+export declare function NmCommandFilters({ items, value, onValueChange, label, }: {
+    items: readonly {
+        id: string;
+        label: string;
+    }[];
+    value: string;
+    onValueChange: (id: string) => void;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function NmCommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react").JSX.Element;
+export declare function NmCommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react").JSX.Element;
+export declare function NmCommandLoading({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.Loading>): import("react").JSX.Element;
+export declare function NmCommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react").JSX.Element;
+export declare function NmCommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react").JSX.Element;
+export declare function NmCommandItem({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react").JSX.Element;
+/** 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;

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

@@ -8,6 +8,8 @@ export type NmComposerProps = {
     busy?: boolean;
     onStop?: () => void;
     placeholder?: string;
+    /** A card shown above the box, such as a usage warning. It stacks directly over the frame. */
+    notice?: ReactNode;
     /** Messages waiting for the agent to finish. They stack above the text, oldest first. */
     queue?: readonly NmComposerQueued[];
     onEditQueued?: (id: string) => void;
@@ -21,6 +23,8 @@ export type NmComposerProps = {
     micActive?: boolean;
     /** Voice mode. It shows while the box is empty. Typing swaps it for Send. */
     onVoice?: () => 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;

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

@@ -0,0 +1,9 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+/**
+ * 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).
+ */
+export declare function NmContextMenu(props: ContextMenuPrimitive.Root.Props): import("react").JSX.Element;
+/** The area that answers a right click. */
+export declare function NmContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props): import("react").JSX.Element;
+export declare function NmContextMenuContent({ className, ...props }: ContextMenuPrimitive.Popup.Props): import("react").JSX.Element;

package/dist/ui/components/nm-date-picker/nm-date-picker.d.ts

@@ -0,0 +1,35 @@
+import type { DateRange } from 'react-day-picker';
+type Common = {
+    placeholder?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+};
+/** A date field. The calendar opens in a popover, so it follows the theme as everything else does. */
+export declare function NmDatePicker({ value, onValueChange, placeholder, ...rest }: Common & {
+    value?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+}): import("react").JSX.Element;
+export declare function NmDateRangePicker({ value, onValueChange, placeholder, ...rest }: Common & {
+    value?: DateRange;
+    onValueChange?: (range: DateRange | undefined) => void;
+}): import("react").JSX.Element;
+/** A month field. Value is `YYYY-MM`. */
+export declare function NmMonthPicker({ value, onValueChange, placeholder, ...rest }: Common & {
+    value?: string;
+    onValueChange?: (month: string) => void;
+}): import("react").JSX.Element;
+/** A time field in 24 hours. Value is `HH:mm`. */
+export declare function NmTimePicker({ value, onValueChange, placeholder, minuteStep, ...rest }: Common & {
+    value?: string;
+    onValueChange?: (time: string) => void;
+    minuteStep?: number;
+}): import("react").JSX.Element;
+/** A date and a time in one field. */
+export declare function NmDateTimePicker({ value, onValueChange, placeholder, minuteStep, ...rest }: Common & {
+    value?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    minuteStep?: number;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+/** 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;
+export declare function NmDialogClose(props: DialogPrimitive.Close.Props): import("react").JSX.Element;
+/** `size="full"` fills the screen, for a whole view. */
+export declare function NmDialogContent({ className, children, size, ...props }: DialogPrimitive.Popup.Props & {
+    size?: 'default' | 'full';
+}): import("react").JSX.Element;
+export declare function NmDialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmDialogTitle({ className, ...props }: DialogPrimitive.Title.Props): import("react").JSX.Element;
+export declare function NmDialogDescription({ className, ...props }: DialogPrimitive.Description.Props): import("react").JSX.Element;

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

@@ -23,6 +23,8 @@ export type NmFieldProps = {
     onMenuSelect?: (id: string) => void;
     options?: readonly NmFieldOption[];
     searchPlaceholder?: string;
+    /** What a searchable select says when nothing matches. */
+    emptyLabel?: string;
     searchValue?: string;
     onSearchChange?: (value: string) => void;
     onAdd?: () => void;

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

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react';
+/** The shadcn Field family. NmField is the older all-in-one field. These parts compose any control into a form. */
+export declare function NmFieldSet({ className, ...props }: ComponentProps<'fieldset'>): import("react").JSX.Element;
+export declare function NmFieldLegend({ className, variant, ...props }: ComponentProps<'legend'> & {
+    variant?: 'legend' | 'label';
+}): import("react").JSX.Element;
+export declare function NmFieldGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmFormField({ className, orientation, invalid, disabled, ...props }: ComponentProps<'div'> & {
+    orientation?: 'vertical' | 'horizontal';
+    invalid?: boolean;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare function NmFieldContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmFieldLabel({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;
+export declare function NmFieldTitle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmFieldDescription({ className, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
+export declare function NmFieldError({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element | null;
+export declare function NmFieldSeparator({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+import type { ComponentProps, ReactNode } from 'react';
+/** Images, or any media, in a grid. Each item is a button, so choosing one opens it, for example in the side panel. */
+export declare function NmGallery({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;
+export declare function NmGalleryItem({ className, label, selected, children, ...props }: Omit<ComponentProps<'button'>, 'children'> & {
+    label: string;
+    selected?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { Input as InputPrimitive } from '@base-ui/react/input';
+/** Base UI Input, in the shadcn composition. Text, email, password, number, search, tel, url, date, time and more. */
+export declare function NmInput({ className, type, ...props }: InputPrimitive.Props & {
+    type?: string;
+}): import("react").JSX.Element;

package/dist/ui/components/nm-input-group/nm-input-group.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+import { Input as InputPrimitive } from '@base-ui/react/input';
+/** An input with something attached: an icon, a unit, a button. The group draws the frame. */
+export declare function NmInputGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmInputGroupAddon({ className, align, ...props }: ComponentProps<'div'> & {
+    align?: 'inline-start' | 'inline-end';
+}): import("react").JSX.Element;
+export declare function NmInputGroupText({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export declare function NmInputGroupInput({ className, ...props }: InputPrimitive.Props): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+import type { ComponentProps } from 'react';
+export declare function NmLabel({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+/**
+ * Base UI Menubar, in the shadcn composition. A row of menus that open on click and then on hover.
+ * Each menu is an NmDropdownMenu, so its content and items are the dropdown parts.
+ */
+export declare function NmMenubar({ className, ...props }: MenubarPrimitive.Props): import("react").JSX.Element;
+export declare function NmMenubarMenu(props: MenuPrimitive.Root.Props): import("react").JSX.Element;
+export declare function NmMenubarTrigger({ className, ...props }: MenuPrimitive.Trigger.Props): import("react").JSX.Element;

package/dist/ui/components/nm-native-select/nm-native-select.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react';
+/** The browser's own select, styled by NIF. Use it where the platform picker is the right control, such as on a phone. */
+export declare function NmNativeSelect({ className, children, ...props }: ComponentProps<'select'>): import("react").JSX.Element;
+export declare function NmNativeSelectOption(props: ComponentProps<'option'>): import("react").JSX.Element;
+export declare function NmNativeSelectOptGroup(props: ComponentProps<'optgroup'>): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import type { ComponentProps } from 'react';
+export declare const NM_PANEL_VARIANTS: readonly ['default', 'inset', 'plain'];
+export type NmPanelVariant = (typeof NM_PANEL_VARIANTS)[number];
+/** A region of the app, such as an inspector or a side panel: a header, content that scrolls, and a footer. */
+export declare function NmPanel({ className, variant, ...props }: ComponentProps<'section'> & {
+    variant?: NmPanelVariant;
+}): import("react").JSX.Element;
+export declare function NmPanelHeader({ className, ...props }: ComponentProps<'header'>): import("react").JSX.Element;
+export declare function NmPanelTitle({ className, ...props }: ComponentProps<'h2'>): import("react").JSX.Element;
+export declare function NmPanelDescription({ className, ...props }: ComponentProps<'p'>): import("react").JSX.Element;
+/** Buttons at the end of the header. */
+export declare function NmPanelActions({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmPanelContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmPanelFooter({ className, ...props }: ComponentProps<'footer'>): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react';
+/**
+ * Rendered text: markdown, docs and long answers. Headings, paragraphs, lists, quotes, code, rules, links and
+ * tables take their type, space and colour from NIF tokens, so the plain elements inside it need no classes.
+ */
+export declare function NmProse({ className, ...props }: ComponentProps<'article'>): import("react").JSX.Element;

package/dist/ui/components/nm-resize-handle/nm-resize-handle.d.ts

@@ -0,0 +1,18 @@
+import { type RefObject } from 'react';
+/**
+ * The handle that resizes a panel. Every NIF panel that sits beside other content has one. It follows the pointer,
+ * the arrow keys, Home and End, and Enter or a double click restores the default width.
+ * The limits are the target's own `min-width` and `max-width`, so tokens in CSS decide how far it goes.
+ */
+export declare function NmResizeHandle({ target, edge, label, onSize, placement, className, }: {
+    /** The panel to resize. */
+    target: RefObject<HTMLElement | null>;
+    /** Which edge of the panel the handle is on. A panel on the right has its handle on the start edge. */
+    edge: 'start' | 'end';
+    label: string;
+    /** The new width in pixels, or null to restore the default. */
+    onSize: (px: number | null) => void;
+    /** `inside` pins the handle to the edge of its parent. `free` leaves placement to the layout. */
+    placement?: 'inside' | 'free';
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+/**
+ * Base UI Select, in the shadcn composition, styled by NIF tokens. The choice of one value from a list that
+ * opens under the field. The list is the same surface as the dropdown menu.
+ */
+export declare function NmSelect<Value = string>(props: SelectPrimitive.Root.Props<Value>): import("react").JSX.Element;
+/** `bare` drops its own box, for a trigger that sits inside a field. */
+export declare function NmSelectTrigger({ className, children, bare, ...props }: SelectPrimitive.Trigger.Props & {
+    bare?: boolean;
+}): import("react").JSX.Element;
+export declare function NmSelectValue(props: SelectPrimitive.Value.Props): import("react").JSX.Element;
+/** `anchor` is the element the list lines up with. It defaults to the trigger. */
+export declare function NmSelectContent({ className, children, anchor, ...props }: SelectPrimitive.Popup.Props & {
+    anchor?: HTMLElement | null;
+}): import("react").JSX.Element;
+export declare function NmSelectItem({ className, children, ...props }: SelectPrimitive.Item.Props & {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function NmSelectGroup(props: SelectPrimitive.Group.Props): import("react").JSX.Element;
+export declare function NmSelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): import("react").JSX.Element;
+export declare function NmSelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): import("react").JSX.Element;

package/dist/ui/components/nm-side-panel/nm-side-panel.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentProps } from 'react';
+import { type NmSidePanelKind, type NmSidePanelSize } from '../../config/nm-side-panel.ts';
+/**
+ * A view that holds a main area and a side panel next to it, such as a chat with an artifact beside it.
+ * It is the organ the side panel opens in.
+ */
+export declare function NmWorkspace({ className, height, ...props }: ComponentProps<'div'> & {
+    height?: 'fill' | 'sm' | 'lg';
+}): import("react").JSX.Element;
+/** The main area. It takes the room the side panel leaves. */
+export declare function NmWorkspaceMain({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** The content under a bar in the main area. It fills the height and scrolls. */
+export declare function NmWorkspaceBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** A row under the body, such as the composer. */
+export declare function NmWorkspaceFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/**
+ * The panel that opens beside the main area, for an app, code, an artifact, media, docs or markdown.
+ * `open` shows it. `size` sets how much of the view it takes, and the handle on its edge resizes it. Fill it with a toolbar and a body.
+ */
+export declare function NmSidePanel({ className, open, size, label, resizable, style, children, ...props }: Omit<ComponentProps<'aside'>, 'aria-label'> & {
+    open?: boolean;
+    size?: NmSidePanelSize;
+    label: string;
+    resizable?: boolean;
+}): import("react").JSX.Element;
+/** The content under the toolbar. It fills the height and scrolls. */
+export declare function NmSidePanelBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** One button per kind of content. Pressing one opens the panel on that kind. */
+export declare function NmSidePanelKinds({ kinds, active, onSelect, }: {
+    kinds?: readonly NmSidePanelKind[];
+    active?: NmSidePanelKind | null;
+    onSelect: (kind: NmSidePanelKind) => void;
+}): import("react").JSX.Element;

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

@@ -1,2 +1,6 @@
 import { Slider as SliderPrimitive } from '@base-ui/react/slider';
-export declare function NmSlider({ className, defaultValue, value, min, max, ...props }: SliderPrimitive.Root.Props): import("react").JSX.Element;
+/** `label` and `output` add a caption above the track, set like the caption of a Field. */
+export declare function NmSlider({ className, defaultValue, value, min, max, label, output, ...props }: SliderPrimitive.Root.Props & {
+    label?: string;
+    output?: string;
+}): import("react").JSX.Element;

package/dist/ui/components/nm-status-bar/nm-status-bar.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentProps } from 'react';
+/** A thin bar at the bottom of a window for state: branch, errors, cursor position, connection. */
+export declare function NmStatusBar({ className, ...props }: ComponentProps<'footer'>): import("react").JSX.Element;
+/** One item. Give it `onClick` and it becomes a button. */
+export declare function NmStatusBarItem({ className, onClick, children, ...props }: Omit<ComponentProps<'span'>, 'onClick'> & {
+    onClick?: () => void;
+}): import("react").JSX.Element;
+export declare function NmStatusBarSpacer({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;