@nordmanai/nif 0.0.0-stage → 0.2.0

package/dist/tokens.css

@@ -0,0 +1,72 @@
+/* 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: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;
+  --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;
+}
+
+/* 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

@@ -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 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[];
+};
+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;
+} & TreeSelection): 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;
+export {};

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-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

@@ -0,0 +1,19 @@
+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;
+    /** Shows the icon alone, in a square. The label is still its accessible name. */
+    iconOnly?: boolean;
+    testId?: string;
+    onClick?: () => void;
+};
+export declare function NmButton(props: NmButtonProps): ReactNode;
+export { NM_BUTTON_SIZES, NM_BUTTON_TONES };

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-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-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-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;