@nordmanai/nif 0.0.0-stage → 0.1.0

package/dist/tokens.css

@@ -0,0 +1,69 @@
+/* Nordman design tokens: the one source for every colour on every Nordman page.
+   The website sets the theme with data-theme, the apps with html.light and html.dark.
+   --nm-* are the app names for the same values. Apps set them inline for custom appearance. */
+:root{
+  --bg:#ffffff; --bg-2:#fafafa; --bg-3:#f2f2f2;
+  --fg:#171717; --fg-2:#666666; --fg-3:#8f8f8f;
+  --line:#ebebeb; --line-2:#e0e0e0;
+  --btn:#171717; --btn-fg:#ffffff; --btn-2:#ffffff;
+  --glow:0,0,0; --glow-a:.16;
+  --ok:#16a34a; --focus:#0070f3;
+  --header:rgba(255,255,255,.85);
+  --nm-stroke:var(--fg-2);
+  --nm-canvas-rgb:255 255 255; --nm-fg-rgb:23 23 23;
+  --nm-fg-muted-rgb:102 102 102; --nm-fg-subtle-rgb:102 102 102; --nm-stroke-rgb:102 102 102;
+  --nm-line-rgb:235 235 235; --nm-panel-rgb:242 242 242; --nm-raised-rgb:250 250 250; --nm-inset-rgb:242 242 242;
+  color-scheme:light;
+  --nm-canvas:var(--bg); --nm-fg:var(--fg);
+  --nm-fg-muted:var(--fg-2); --nm-fg-subtle:var(--fg-2);
+  --nm-line:var(--line); --nm-line-strong:var(--line-2);
+  --nm-panel:var(--bg-3); --nm-raised:var(--bg-2); --nm-inset:var(--bg-3);
+
+  /* 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;
+  --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;
+  --badge-h:20px; --badge-px:calc(8px * var(--nm-space-scale, 1)); --badge-fs:11px; --badge-r:999px;
+  --table-fs:15px; --table-head-fs:13px; --table-head-py:calc(12px * var(--nm-space-scale, 1)); --table-cell-py:calc(16px * var(--nm-space-scale, 1)); --table-gap:calc(16px * var(--nm-space-scale, 1));
+}
+@media (prefers-color-scheme:dark){
+  :root:not([data-theme="light"]):not(.light){
+    --bg:#000000; --bg-2:#0a0a0a; --bg-3:#1a1a1a;
+    --fg:#ededed; --fg-2:#a1a1a1; --fg-3:#707070;
+    --line:#1f1f1f; --line-2:#2e2e2e;
+    --btn:#ededed; --btn-fg:#0a0a0a; --btn-2:#0a0a0a;
+    --glow:255,255,255; --glow-a:.5;
+    --ok:#3fcf75; --focus:#52a8ff;
+    --header:rgba(0,0,0,.8);
+    --nm-stroke:var(--fg-3);
+    --nm-canvas-rgb:0 0 0; --nm-fg-rgb:237 237 237;
+    --nm-fg-muted-rgb:161 161 161; --nm-fg-subtle-rgb:161 161 161; --nm-stroke-rgb:112 112 112;
+    --nm-line-rgb:31 31 31; --nm-panel-rgb:26 26 26; --nm-raised-rgb:10 10 10; --nm-inset-rgb:26 26 26;
+    color-scheme:dark;
+  }
+}
+:root[data-theme="dark"],:root.dark:not([data-theme="light"]){
+  --bg:#000000; --bg-2:#0a0a0a; --bg-3:#1a1a1a;
+  --fg:#ededed; --fg-2:#a1a1a1; --fg-3:#707070;
+  --line:#1f1f1f; --line-2:#2e2e2e;
+  --btn:#ededed; --btn-fg:#0a0a0a; --btn-2:#0a0a0a;
+  --glow:255,255,255; --glow-a:.5;
+  --ok:#3fcf75; --focus:#52a8ff;
+  --header:rgba(0,0,0,.8);
+  --nm-stroke:var(--fg-3);
+  --nm-canvas-rgb:0 0 0; --nm-fg-rgb:237 237 237;
+  --nm-fg-muted-rgb:161 161 161; --nm-fg-subtle-rgb:161 161 161; --nm-stroke-rgb:112 112 112;
+  --nm-line-rgb:31 31 31; --nm-panel-rgb:26 26 26; --nm-raised-rgb:10 10 10; --nm-inset-rgb:26 26 26;
+  color-scheme:dark;
+}
+
+/* Typeface. The one family every Nordman component and page sets its text in.
+   Poppins and Geist Mono are loaded by the app, or by @nordmanai/nif. Nothing may name another family. */
+:root{
+  --nm-font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
+  --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;
+}

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

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+/** Base UI Accordion, in the shadcn composition, styled by NIF tokens. */
+export declare function NmAccordion({ className, ...props }: AccordionPrimitive.Root.Props): import("react").JSX.Element;
+export declare function NmAccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react").JSX.Element;
+export declare function NmAccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props): import("react").JSX.Element;
+export declare function NmAccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props): import("react").JSX.Element;

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

@@ -0,0 +1,222 @@
+import { type ReactNode } from 'react';
+import { type NmAiBadgeTone, type NmAiStatus, type NmToolState } from '../../config/nm-ai.ts';
+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;
+}): ReactNode;
+export declare function NmItem(props: {
+    media?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}): ReactNode;
+export declare function NmSheet(props: {
+    title: string;
+    description?: string;
+    onClose: () => void;
+    children: ReactNode;
+}): ReactNode;
+export type NmAiMessageAction = {
+    id: string;
+    label: string;
+    icon: 'copy' | 'reload' | 'pen' | 'check' | 'volume' | 'fork';
+};
+export declare function NmMessage(props: {
+    role: 'user' | 'assistant';
+    children: ReactNode;
+    actions?: readonly NmAiMessageAction[];
+    onAction?: (id: string) => void;
+    footer?: ReactNode;
+}): ReactNode;
+export declare function NmReasoning(props: {
+    text: string;
+    streaming?: boolean;
+    seconds?: number;
+    defaultOpen?: boolean;
+}): ReactNode;
+export type NmChainStep = {
+    id: string;
+    title: string;
+    status: NmAiStatus;
+    detail?: string;
+    results?: readonly string[];
+};
+export declare function NmChainOfThought(props: {
+    summary: string;
+    steps: readonly NmChainStep[];
+    defaultOpen?: boolean;
+}): ReactNode;
+export declare function NmCheckpoint(props: {
+    label: string;
+    restoreLabel?: string;
+    onRestore?: () => void;
+}): ReactNode;
+export type NmConfirmationState = 'requested' | 'approved' | 'denied';
+export declare function NmConfirmation(props: {
+    title: string;
+    description?: string;
+    state: NmConfirmationState;
+    onApprove?: () => void;
+    onDeny?: () => void;
+}): ReactNode;
+export declare function NmContext(props: {
+    used: number;
+    max: number;
+    breakdown?: readonly {
+        label: string;
+        value: number;
+    }[];
+}): ReactNode;
+export type NmFileNode = {
+    name: string;
+    children?: readonly NmFileNode[];
+};
+export declare function NmFileTree(props: {
+    nodes: readonly NmFileNode[];
+    defaultOpen?: boolean;
+}): ReactNode;
+export declare function NmInlineCitation(props: {
+    label: string;
+    title: string;
+    url: string;
+    excerpt?: string;
+}): ReactNode;
+export declare function NmModelSelector(props: {
+    models: readonly {
+        id: string;
+        label: string;
+    }[];
+    model: string;
+    onModel: (id: string) => void;
+    efforts: readonly {
+        id: string;
+        label: string;
+    }[];
+    effort: string;
+    onEffort: (id: string) => void;
+}): ReactNode;
+export type NmPlanStep = {
+    id: string;
+    title: string;
+    status: NmAiStatus;
+    detail?: string;
+};
+export declare function NmPlan(props: {
+    title: string;
+    steps: readonly NmPlanStep[];
+    defaultOpen?: boolean;
+}): ReactNode;
+export type NmQueueItem = {
+    id: string;
+    title: string;
+    description?: string;
+};
+export declare function NmQueue(props: {
+    remaining: readonly NmQueueItem[];
+    completed: readonly NmQueueItem[];
+    defaultOpen?: boolean;
+}): ReactNode;
+export type NmTaskStep = {
+    id: string;
+    title: string;
+    status: NmAiStatus;
+    icon?: 'search' | 'file';
+};
+export declare function NmTask(props: {
+    title: string;
+    steps: readonly NmTaskStep[];
+}): ReactNode;
+export declare function NmSources(props: {
+    sources: readonly {
+        title: string;
+        url: string;
+    }[];
+    defaultOpen?: boolean;
+}): ReactNode;
+export declare function NmTerminal(props: {
+    command: string;
+    output?: string;
+    exitCode?: number;
+    running?: boolean;
+    defaultOpen?: boolean;
+}): ReactNode;
+export type NmStackFrame = {
+    fn: string;
+    file: string;
+    line: number;
+    internal?: boolean;
+};
+export declare function NmStackTrace(props: {
+    error: string;
+    frames: readonly NmStackFrame[];
+    defaultOpen?: boolean;
+}): ReactNode;
+export type NmTestStatus = 'passed' | 'failed' | 'skipped';
+export type NmTestSuite = {
+    name: string;
+    tests: readonly {
+        name: string;
+        status: NmTestStatus;
+        error?: string;
+    }[];
+};
+export declare function NmTestResults(props: {
+    suites: readonly NmTestSuite[];
+    defaultOpen?: boolean;
+}): ReactNode;
+export declare function NmTool(props: {
+    name: string;
+    state: NmToolState;
+    input?: string;
+    output?: string;
+    error?: string;
+    onApprove?: () => void;
+    onDeny?: () => void;
+    defaultOpen?: boolean;
+}): ReactNode;
+export declare function NmSubagent(props: {
+    name: string;
+    task: string;
+    status: NmAiStatus;
+    tools?: readonly {
+        id: string;
+        title: string;
+        status: NmAiStatus;
+    }[];
+    result?: string;
+    defaultOpen?: boolean;
+}): ReactNode;
+export declare function NmSuggestions(props: {
+    items: readonly string[];
+    onPick: (text: string) => void;
+    disabled?: boolean;
+}): ReactNode;
+export type NmChatTurn = {
+    id: string;
+    role: 'user' | 'assistant';
+    text: string;
+    reasoning?: string;
+    tool?: {
+        name: string;
+        state: NmToolState;
+        output?: string;
+    };
+};
+export declare function NmChat(props: {
+    turns: readonly NmChatTurn[];
+    empty?: {
+        title: string;
+        description: string;
+    };
+    streaming?: boolean;
+}): ReactNode;

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

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+export declare const NM_AVATAR_SIZES: readonly ['sm', 'default', 'lg'];
+export type NmAvatarSize = (typeof NM_AVATAR_SIZES)[number];
+export declare function NmAvatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
+    size?: NmAvatarSize;
+}): import("react").JSX.Element;
+export declare function NmAvatarImage({ className, ...props }: AvatarPrimitive.Image.Props): import("react").JSX.Element;
+export declare function NmAvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): import("react").JSX.Element;
+export declare function NmAvatarBadge({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export declare function NmAvatarGroup({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmAvatarGroupCount({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { NmDropdownItem } from '../nm-dropdown/nm-dropdown-item';
+import type { NmIconId } from '../../config/nm-icons.ts';
+export type NmBarOverflowProps = {
+    menuLabel: string;
+    items: readonly NmDropdownItem[];
+    onSelect: (id: string) => void;
+    testId?: string;
+    className?: string;
+    hiddenOnNarrow?: boolean;
+    menuIcon?: NmIconId;
+    trailing?: ReactNode;
+    children: ReactNode;
+};
+export declare function NmBarOverflow(props: NmBarOverflowProps): ReactNode;

package/dist/ui/components/nm-bar-overflow/use-bar-overflow.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+import { type BarOverflowMode } from '../../lib/bar-overflow.ts';
+export declare function useBarOverflow(rootRef: RefObject<HTMLElement | null>, rowRef: RefObject<HTMLElement | null>): {
+    mode: BarOverflowMode;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};

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

@@ -0,0 +1,17 @@
+import 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;
+    tone: NmButtonTone;
+    size?: NmButtonSize;
+    block?: boolean;
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    pressed?: boolean;
+    icon?: NmIconId;
+    testId?: string;
+    onClick?: () => void;
+};
+export declare function NmButton(props: NmButtonProps): ReactNode;
+export { NM_BUTTON_SIZES, NM_BUTTON_TONES };

package/dist/ui/components/nm-chatbox/nm-chatbox-icon.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import { type NmChatboxIconId } from '../../config/nm-chatbox-icons.ts';
+export declare const NM_CHATBOX_LUCIDE_MAP: Record<NmChatboxIconId, string>;
+export declare function NmChatboxIcon({ id, className, }: {
+    id: NmChatboxIconId;
+    className?: string;
+}): ReactNode;

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export type NmChatboxProps = {
+    placeholder: string;
+    placeholderEmphasis?: string;
+    value: string;
+    sendLabel: string;
+    attachLabel: string;
+    micLabel: string;
+    fieldId?: string;
+    micPressed?: boolean;
+    disabled?: boolean;
+    testId?: string;
+    tools?: ReactNode;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    onAttach?: () => void;
+    onMic?: () => void;
+};
+export declare function NmChatbox(props: NmChatboxProps): ReactNode;

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

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

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import { type NmCollectionView } from '../../config/nm-collection.ts';
+export type NmCollectionBarProps = {
+    title: string;
+    titleSrc: string;
+    titleIcon?: NmIconId;
+    filterIcon?: NmIconId;
+    view: NmCollectionView;
+    gridLabel: string;
+    tableLabel: string;
+    switchLabel: string;
+    showSwitch?: boolean;
+    onView: (view: NmCollectionView) => void;
+};
+export declare function NmCollectionBar(props: NmCollectionBarProps): ReactNode;

package/dist/ui/components/nm-collection/nm-collection-grid.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import { type NmCollectionItem, type NmCollectionItemActions } from '../../config/nm-collection.ts';
+export type NmCollectionGridProps = {
+    items: readonly NmCollectionItem[];
+    label: string;
+    actions?: NmCollectionItemActions;
+    onSelect: (id: string) => void;
+};
+export declare function NmCollectionGrid(props: NmCollectionGridProps): ReactNode;

package/dist/ui/components/nm-collection/nm-collection-query.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export type NmCollectionQueryProps = {
+    imageLabel: string;
+    videoLabel: string;
+    audioLabel: string;
+    searchLabel: string;
+    imageOn: boolean;
+    videoOn: boolean;
+    audioOn: boolean;
+    query: string;
+    onImage: (on: boolean) => void;
+    onVideo: (on: boolean) => void;
+    onAudio: (on: boolean) => void;
+    onQuery: (query: string) => void;
+    filters?: boolean;
+    search?: boolean;
+};
+export declare function NmCollectionQuery(props: NmCollectionQueryProps): ReactNode;

package/dist/ui/components/nm-collection/nm-collection-row-menu.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import { type NmCollectionItemActions } from '../../config/nm-collection.ts';
+export declare function NmCollectionRowMenu(props: {
+    itemId: string;
+    title: string;
+    actions: NmCollectionItemActions;
+}): ReactNode;

package/dist/ui/components/nm-collection/nm-collection-table.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import { type NmCollectionColumn, type NmCollectionItem, type NmCollectionItemActions } from '../../config/nm-collection.ts';
+export type NmCollectionTableProps = {
+    items: readonly NmCollectionItem[];
+    label: string;
+    nameLabel?: string;
+    columns?: readonly NmCollectionColumn[];
+    headerIcon?: NmIconId;
+    actions?: NmCollectionItemActions;
+    onSelect: (id: string) => void;
+};
+export declare function NmCollectionTable(props: NmCollectionTableProps): ReactNode;

package/dist/ui/components/nm-collection/nm-collection-tile-actions.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import { type NmCollectionItemActions } from '../../config/nm-collection.ts';
+export declare function NmCollectionTileActions(props: {
+    itemId: string;
+    title: string;
+    actions: NmCollectionItemActions;
+}): ReactNode;

package/dist/ui/components/nm-collection/nm-collection-title.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+export type NmCollectionTitleProps = {
+    /** Accessible name (icon-only; not shown as visible text). */
+    title: string;
+    titleSrc: string;
+    titleIcon?: NmIconId;
+};
+/** Collection header identity chip — icon only, raised background on hover. */
+export declare function NmCollectionTitle(props: NmCollectionTitleProps): ReactNode;

package/dist/ui/components/nm-collection/use-collection-scroll-reveal.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+/** Shows the collection scroll thumb only while the region is moving. */
+export default function useCollectionScrollReveal(scrollableRef: RefObject<HTMLElement | null>): void;

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

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type NmComposerAttachment, type NmComposerQueued } from '../../config/nm-composer.ts';
+export type NmComposerProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    /** While the agent answers, the send button becomes Stop. */
+    busy?: boolean;
+    onStop?: () => void;
+    placeholder?: string;
+    /** Messages waiting for the agent to finish. They stack above the text, oldest first. */
+    queue?: readonly NmComposerQueued[];
+    onEditQueued?: (id: string) => void;
+    onRemoveQueued?: (id: string) => void;
+    attachments?: readonly NmComposerAttachment[];
+    onRemoveAttachment?: (id: string) => void;
+    /** The add button on the left. Omit it to hide the button. */
+    onAdd?: () => void;
+    /** Dictation. Pressed while it listens. */
+    onMic?: () => void;
+    micActive?: boolean;
+    /** Voice mode. It shows while the box is empty. Typing swaps it for Send. */
+    onVoice?: () => void;
+    /** Controls beside the add button, such as the model selector. */
+    start?: ReactNode;
+    disabled?: boolean;
+    testId?: string;
+};
+export declare function NmComposer(props: NmComposerProps): ReactNode;

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+export type NmDropdownItem = {
+    id: string;
+    label?: string;
+    detail?: string;
+    /** Keyboard hint, such as ⌘K. Display only; the binding lives with the command. */
+    shortcut?: string;
+    icon?: NmIconId;
+    imageSrc?: string;
+    leading?: ReactNode;
+    separator?: boolean;
+    danger?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    /** Publish row state. The row stays inactive while busy or live. */
+    mark?: 'idle' | 'busy' | 'live';
+    children?: readonly NmDropdownItem[];
+};
+export declare function isNmDropdownSeparator(item: NmDropdownItem): boolean;
+export declare function nmDropdownSeparator(id: string): NmDropdownItem;
+export declare function dropdownBranchPath(items: readonly NmDropdownItem[], id: string, trail?: readonly string[]): string[] | null;
+/** Hover and click open this branch. They do not close it again. */
+export declare function openDropdownBranch(items: readonly NmDropdownItem[], id: string): string[];
+/** Opening a branch keeps only that branch and its parents. Closing it keeps the parents. */
+export declare function nextExpandedBranches(items: readonly NmDropdownItem[], expanded: readonly string[], id: string): string[];

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

@@ -0,0 +1,12 @@
+import { type NmDropdownItem } from './nm-dropdown-item';
+export declare function findDropdownItem(items: readonly NmDropdownItem[], selected?: string | null): NmDropdownItem | undefined;
+export declare function NmDropdownOptions({ items, selected, focusedOptionId, expandedIds, selectionMark, onSelect, onOpenBranch, onCloseBranches, }: {
+    items: readonly NmDropdownItem[];
+    selected?: string | null;
+    focusedOptionId?: string | null;
+    expandedIds?: readonly string[];
+    selectionMark?: 'check' | 'none';
+    onSelect: (id: string) => void;
+    onOpenBranch: (id: string) => void;
+    onCloseBranches: () => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { type ReactNode, type Ref, type RefObject } from 'react';
+export declare function NmDropdownPanel({ open, placement, className, id, label, panelRef, children, }: {
+    open: boolean;
+    placement: string;
+    className: string;
+    id: string;
+    label: string;
+    panelRef: Ref<HTMLUListElement>;
+    children: ReactNode;
+}): ReactNode;
+export declare function NmDropdownBranch({ open, label, anchorRef, children, }: {
+    open: boolean;
+    label?: string;
+    anchorRef: RefObject<HTMLElement | null>;
+    children: ReactNode;
+}): ReactNode;

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

@@ -0,0 +1,55 @@
+import { NM_DROPDOWN_ALIGN } from '../../config/nm-dropdown.ts';
+export type NmDropdownBox = {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export type NmDropdownViewport = {
+    width: number;
+    height: number;
+};
+export type NmDropdownPlacement = {
+    top: number;
+    left: number;
+    maxHeight?: number;
+};
+/** Scroll cap for a panel anchored at `panelTop`; only needed when content exceeds this. */
+export declare function nmDropdownViewportMaxHeight(input: {
+    trigger: Pick<NmDropdownBox, 'top' | 'bottom'>;
+    viewport: NmDropdownViewport;
+    panelTop: number;
+    gap?: number;
+    edgePadding?: number;
+}): number;
+export declare function placeNmDropdownPanel({ trigger, panel, viewport, align, gap, }: {
+    trigger: NmDropdownBox;
+    panel: Pick<NmDropdownBox, 'width' | 'height'>;
+    viewport: NmDropdownViewport;
+    align: (typeof NM_DROPDOWN_ALIGN)[keyof typeof NM_DROPDOWN_ALIGN];
+    gap?: number;
+}): NmDropdownPlacement;
+/** Opens below (or above) a history row; panel width matches the row pill. */
+export declare function placeNmDropdownRowPanel({ row, panel, viewport, gap, }: {
+    row: NmDropdownBox;
+    panel: Pick<NmDropdownBox, 'height'>;
+    viewport: NmDropdownViewport;
+    gap?: number;
+}): NmDropdownPlacement & {
+    width: number;
+};
+/** Places a submenu beside its parent menu, with the same gap as the trigger. */
+export declare function placeNmDropdownSubpanel({ rowTop, rowBottom, panelLeft, panelRight, submenuWidth, submenuHeight, viewportWidth, viewportHeight, gap, }: {
+    rowTop: number;
+    rowBottom: number;
+    panelLeft: number;
+    panelRight: number;
+    submenuWidth: number;
+    submenuHeight: number;
+    viewportWidth: number;
+    viewportHeight: number;
+    gap?: number;
+}): NmDropdownPlacement;
+export declare function dropdownPortalHost(explicit: HTMLElement | null | undefined, trigger: HTMLElement | null): HTMLElement;

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

@@ -0,0 +1,31 @@
+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';
+export type { NmDropdownItem };
+export type NmDropdownProps = {
+    label: string;
+    items?: readonly NmDropdownItem[];
+    selected?: string | null;
+    testId?: string;
+    trigger?: (typeof NM_DROPDOWN_TRIGGER)[keyof typeof NM_DROPDOWN_TRIGGER];
+    tone?: (typeof NM_DROPDOWN_TONE)[keyof typeof NM_DROPDOWN_TONE];
+    align?: (typeof NM_DROPDOWN_ALIGN)[keyof typeof NM_DROPDOWN_ALIGN];
+    icon?: NmIconId;
+    imageSrc?: string;
+    displayLabel?: string;
+    /** Chip/text triggers show only the lead icon; `label` stays for accessibility. */
+    iconOnly?: boolean;
+    portal?: boolean;
+    portalRoot?: HTMLElement | null;
+    disabled?: boolean;
+    /** `hover` hides the trigger until the host with `data-nm-menu` is hovered or focused. */
+    reveal?: (typeof NM_DROPDOWN_REVEAL)[keyof typeof NM_DROPDOWN_REVEAL];
+    open?: boolean;
+    triggerClassName?: string;
+    triggerRef?: Ref<HTMLButtonElement>;
+    onOpenChange?: (open: boolean) => void;
+    onSelect?: (id: string) => void;
+    onBranchExpand?: (id: string) => void;
+};
+export declare function NmDropdown(props: NmDropdownProps): ReactNode;