@nordmanai/nif 0.1.0 → 0.2.1

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

@@ -0,0 +1,38 @@
+import type { ComponentProps } from 'react';
+export declare const NM_TABLE_VARIANTS: readonly ['default', 'striped', 'lined', 'plain'];
+export declare const NM_TABLE_SIZES: readonly ['default', 'sm'];
+export type NmTableVariant = (typeof NM_TABLE_VARIANTS)[number];
+export type NmTableSize = (typeof NM_TABLE_SIZES)[number];
+type TableOptions = {
+    /** default has a line between rows. striped alternates the row fill. lined draws every cell. plain has no lines. */
+    variant?: NmTableVariant;
+    size?: NmTableSize;
+    /** Keeps the header in view while the body scrolls. Give the container a height with `maxHeight`. */
+    stickyHeader?: boolean;
+    /** The container's maximum height. The body scrolls past it. */
+    maxHeight?: string;
+};
+/** The shadcn Table composition, styled by NIF tokens. The container scrolls sideways when the table is wider than its space. */
+export declare function NmTable({ className, variant, size, stickyHeader, maxHeight, ...props }: ComponentProps<'table'> & TableOptions): import("react").JSX.Element;
+export declare function NmTableHeader({ className, ...props }: ComponentProps<'thead'>): import("react").JSX.Element;
+export declare function NmTableBody({ className, ...props }: ComponentProps<'tbody'>): import("react").JSX.Element;
+export declare function NmTableFooter({ className, ...props }: ComponentProps<'tfoot'>): import("react").JSX.Element;
+/** A row. `selected` marks it chosen. `disabled` dims it and stops its hover. Give it `onClick` to make the whole row a target. */
+export declare function NmTableRow({ className, selected, disabled, ...props }: ComponentProps<'tr'> & {
+    selected?: boolean;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export type NmSortDirection = 'asc' | 'desc' | 'none';
+/** A column heading. Give it `sort` and `onSort` and it becomes a sort button. `textAlign="end"` is for numbers. */
+export declare function NmTableHead({ className, textAlign, sort, onSort, children, ...props }: Omit<ComponentProps<'th'>, 'align'> & {
+    textAlign?: 'start' | 'center' | 'end';
+    sort?: NmSortDirection;
+    onSort?: () => void;
+}): import("react").JSX.Element;
+/** Cells stay on one line. Give `wrap` to a cell that holds a sentence, and it wraps and aligns to the top. */
+export declare function NmTableCell({ className, textAlign, wrap, ...props }: Omit<ComponentProps<'td'>, 'align'> & {
+    textAlign?: 'start' | 'center' | 'end';
+    wrap?: boolean;
+}): import("react").JSX.Element;
+export declare function NmTableCaption({ className, ...props }: ComponentProps<'caption'>): import("react").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,21 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import { type NmIconButtonTone } from '../../config/nm-icon-button.ts';
+/** Base UI Toolbar, in the shadcn composition, styled by NIF tokens. One tab stop, arrow keys move between controls. */
+export declare function NmToolbar({ className, ...props }: ToolbarPrimitive.Root.Props): import("react").JSX.Element;
+export declare function NmToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props): import("react").JSX.Element;
+/** A vertical line between groups, such as between two panes. It follows the Contrast setting. */
+export declare function NmToolbarSeparator({ className, ...props }: ToolbarPrimitive.Separator.Props): import("react").JSX.Element;
+/** Takes the free space, pushing what follows to the end. */
+export declare function NmToolbarSpacer({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+/** An icon button, or a button with text. `label` is its accessible name. */
+export declare function NmToolbarButton({ icon, label, tone, pressed, className, children, ...props }: Omit<ToolbarPrimitive.Button.Props, 'children'> & {
+    icon?: NmIconId;
+    label: string;
+    tone?: NmIconButtonTone;
+    pressed?: boolean;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** A field in the bar that takes the free width, such as an address. */
+export declare function NmToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props): import("react").JSX.Element;

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

@@ -15,9 +15,6 @@ export declare const NM_AI_CLASSES: {
     readonly turnUser: 'nm-ai-turn--user';
     readonly turnBody: 'nm-ai-turn__body';
     readonly turnFooter: 'nm-ai-turn__footer';
-    readonly code: 'nm-ai-code';
-    readonly codeLabel: 'nm-ai-code__label';
-    readonly badge: 'nm-ai-badge';
     readonly item: 'nm-ai-item';
     readonly itemMedia: 'nm-ai-item__media';
     readonly itemBody: 'nm-ai-item__body';

package/dist/ui/config/nm-appearance.d.ts

@@ -9,6 +9,40 @@ export declare const NM_UI_FONT_SIZE_PX: {
     readonly max: 16;
     readonly default: 14;
 };
+/** Poppins ships nine weights. The setting is the Regular weight. Medium, semibold and bold step up from it. */
+export declare const NM_FONT_WEIGHTS: readonly [{
+    readonly id: '100';
+    readonly label: 'Thin';
+}, {
+    readonly id: '200';
+    readonly label: 'ExtraLight';
+}, {
+    readonly id: '300';
+    readonly label: 'Light';
+}, {
+    readonly id: '400';
+    readonly label: 'Regular';
+}, {
+    readonly id: '500';
+    readonly label: 'Medium';
+}, {
+    readonly id: '600';
+    readonly label: 'SemiBold';
+}, {
+    readonly id: '700';
+    readonly label: 'Bold';
+}, {
+    readonly id: '800';
+    readonly label: 'ExtraBold';
+}, {
+    readonly id: '900';
+    readonly label: 'Black';
+}];
+export declare const NM_UI_FONT_WEIGHT: {
+    readonly min: 100;
+    readonly max: 900;
+    readonly default: 400;
+};
 export declare const NM_UI_ICON_SIZE_PX: {
     readonly min: 14;
     readonly max: 24;
@@ -55,11 +89,12 @@ export declare const NM_APPEARANCE_DEFAULTS: {
     readonly backgroundHex: "#000000";
     readonly foregroundHex: "#ededed";
     readonly uiFontSizePx: 14;
+    readonly uiFontWeight: number;
     readonly uiIconSizePx: 18;
     readonly uiRadiusPercent: 100;
     readonly uiSpacePercent: 100;
     readonly contrast: 0;
 };
-export declare const NM_APPEARANCE_CSS_VARS: readonly ['--nm-canvas', '--nm-fg', '--nm-fg-muted', '--nm-fg-subtle', '--nm-stroke', '--nm-line', '--nm-line-strong', '--control-fs', '--nm-panel', '--nm-raised', '--nm-inset', '--nm-mark-primary', '--nm-mark-secondary', '--nm-mark-tertiary', '--nm-mark-surface', '--nm-canvas-rgb', '--nm-fg-rgb', '--nm-fg-muted-rgb', '--nm-fg-subtle-rgb', '--nm-stroke-rgb', '--nm-line-rgb', '--nm-panel-rgb', '--nm-raised-rgb', '--nm-inset-rgb', '--sand', '--nm-accent', '--nm-accent-rgb', '--orb-ui-cloud-appearance-deepColor', '--orb-ui-cloud-appearance-upperColor', '--orb-ui-cloud-appearance-lowerColor', '--orb-ui-cloud-appearance-highlightColor', '--orb-ui-cloud-appearance-launchColor', '--orb-ui-cloud-appearance-spinnerColor', '--nm-type-body', '--nm-type-ui', '--nm-type-ui-sm', '--nm-type-lede', '--nm-type-section', '--nm-type-card', '--nm-type-caption', '--markdown-font-size', '--font-size-base', '--font-size-sm', '--nm-icon-button', '--nm-icon-sm', '--nm-rail-icon', '--nm-ui-chip-min-height', '--nm-radius-scale', '--nm-space-scale', '--text-primary', '--text-secondary', '--text-tertiary', '--text-muted', '--presentation', '--surface-primary', '--surface-chat', '--surface-secondary', '--surface-secondary-alt', '--surface-tertiary', '--surface-primary-alt', '--surface-dialog', '--surface-hover', '--surface-active', '--border-light', '--border-medium', '--link', '--link-hover', '--link-visited', '--accent-primary', '--ring-primary', '--brand-purple', '--nordman-accent'];
+export declare const NM_APPEARANCE_CSS_VARS: readonly ['--nm-canvas', '--nm-fg', '--nm-fg-muted', '--nm-fg-subtle', '--nm-stroke', '--nm-line', '--nm-line-strong', '--nm-divider', '--control-fs', '--nm-panel', '--nm-raised', '--nm-inset', '--nm-mark-primary', '--nm-mark-secondary', '--nm-mark-tertiary', '--nm-mark-surface', '--nm-canvas-rgb', '--nm-fg-rgb', '--nm-fg-muted-rgb', '--nm-fg-subtle-rgb', '--nm-stroke-rgb', '--nm-line-rgb', '--nm-panel-rgb', '--nm-raised-rgb', '--nm-inset-rgb', '--sand', '--nm-accent', '--nm-accent-rgb', '--orb-ui-cloud-appearance-deepColor', '--orb-ui-cloud-appearance-upperColor', '--orb-ui-cloud-appearance-lowerColor', '--orb-ui-cloud-appearance-highlightColor', '--orb-ui-cloud-appearance-launchColor', '--orb-ui-cloud-appearance-spinnerColor', '--nm-weight-light', '--nm-weight-regular', '--nm-weight-medium', '--nm-weight-semibold', '--nm-weight-bold', '--nm-type-body', '--nm-type-ui', '--nm-type-ui-sm', '--nm-type-lede', '--nm-type-section', '--nm-type-card', '--nm-type-caption', '--markdown-font-size', '--font-size-base', '--font-size-sm', '--nm-icon-button', '--nm-icon-sm', '--nm-rail-icon', '--nm-ui-chip-min-height', '--nm-radius-scale', '--nm-space-scale', '--text-primary', '--text-secondary', '--text-tertiary', '--text-muted', '--presentation', '--surface-primary', '--surface-chat', '--surface-secondary', '--surface-secondary-alt', '--surface-tertiary', '--surface-primary-alt', '--surface-dialog', '--surface-hover', '--surface-active', '--border-light', '--border-medium', '--link', '--link-hover', '--link-visited', '--accent-primary', '--ring-primary', '--brand-purple', '--nordman-accent'];
 export declare function findThemePreset(id: string): NmThemePresetDefinition | undefined;
 export declare function defaultThemePresetId(): string;

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

@@ -25,6 +25,7 @@ export declare const NM_BUTTON_CLASSES: {
     readonly chip: 'nm-button--chip';
     readonly large: 'nm-button--large';
     readonly block: 'nm-button--block';
+    readonly icon: 'nm-button--icon';
 };
 /** The button's class names, for triggers that must stay a Base UI part, such as a menu or popover trigger. */
-export declare function nmButtonClassName(tone: NmButtonTone, size?: NmButtonSize): string;
+export declare function nmButtonClassName(tone: NmButtonTone, size?: NmButtonSize, iconOnly?: boolean): string;

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

@@ -16,14 +16,13 @@ export declare const NM_COMPOSER_COPY: {
 };
 export declare const NM_COMPOSER_CLASSES: {
     readonly root: 'nm-composer';
+    readonly stack: 'nm-composer-stack';
     readonly main: 'nm-composer__main';
     readonly queue: 'nm-composer__queue';
     readonly queued: 'nm-composer__queued';
     readonly queuedText: 'nm-composer__queued-text';
     readonly queuedActions: 'nm-composer__queued-actions';
     readonly attachments: 'nm-composer__attachments';
-    readonly attachment: 'nm-composer__attachment';
-    readonly remove: 'nm-composer__remove';
     readonly field: 'nm-composer__field';
     readonly bar: 'nm-composer__bar';
     readonly start: 'nm-composer__start';

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

@@ -15,6 +15,8 @@ export type NmFieldLayout = (typeof NM_FIELD_LAYOUT)[keyof typeof NM_FIELD_LAYOU
 export type NmFieldOption = {
     id: string;
     label: string;
+    /** Colours shown after the label, such as a theme's background, foreground and accent. */
+    swatches?: readonly string[];
 };
 export declare const NM_FIELD_CLASSES: {
     readonly root: 'nm-field';

package/dist/ui/config/nm-icons.d.ts

@@ -1,4 +1,4 @@
-export declare const NM_ICON_IDS: readonly ['plus', 'user', 'paperclip', 'settings', 'globe', 'spreadsheet', 'pointer', 'mouse-pointer', 'mic', 'mic-off', 'audio-lines', 'send', 'chevron', 'check', 'circle-check', 'code', 'file-code', 'console', 'copy', 'volume', 'fork', 'chat', 'chat-dashed', 'folder', 'bot', 'app', 'layers', 'users', 'library', 'panel', 'ellipsis', 'camera', 'reload', 'expand', 'arrow-up-right', 'minimize', 'download', 'publish', 'share', 'pen', 'pin', 'archive', 'trash', 'folder-in', 'folder-out', 'duplicate', 'logout', 'table-properties', 'cable', 'menu', 'loader', 'monitor', 'server', 'filter', 'sliders', 'upload', 'image', 'image-plus', 'music', 'headphones', 'video', 'search', 'presentation', 'terminal', 'square-terminal', 'x', 'save', 'lock', 'mail', 'calendar', 'play', 'workflow', 'hard-drive', 'slack', 'github', 'building', 'file-text', 'wrench', 'file', 'brain', 'sun', 'moon', 'google'];
+export declare const NM_ICON_IDS: readonly ['plus', 'user', 'paperclip', 'settings', 'globe', 'spreadsheet', 'pointer', 'mouse-pointer', 'mic', 'mic-off', 'audio-lines', 'send', 'chevron', 'check', 'circle-check', 'code', 'file-code', 'console', 'copy', 'volume', 'fork', 'chat', 'chat-dashed', 'folder', 'bot', 'app', 'layers', 'users', 'library', 'panel', 'ellipsis', 'camera', 'reload', 'expand', 'arrow-up-right', 'minimize', 'download', 'publish', 'share', 'pen', 'pin', 'archive', 'trash', 'folder-in', 'folder-out', 'duplicate', 'logout', 'table-properties', 'cable', 'menu', 'loader', 'monitor', 'server', 'filter', 'sliders', 'upload', 'image', 'image-plus', 'music', 'headphones', 'video', 'search', 'presentation', 'terminal', 'square-terminal', 'x', 'save', 'lock', 'mail', 'calendar', 'clock', 'gauge', 'minus', 'play', 'workflow', 'hard-drive', 'slack', 'github', 'building', 'file-text', 'wrench', 'file', 'brain', 'sun', 'moon', 'google', 'arrow-left', 'arrow-right', 'panel-left', 'rows'];
 export type NmIconId = (typeof NM_ICON_IDS)[number];
 export type NmIconSpec = {
     viewBox: string;
@@ -312,6 +312,18 @@ export declare const NM_ICONS: {
         readonly viewBox: '0 0 24 24';
         readonly path: 'M5 5h14v16H5zM5 10h14M8 3v4M16 3v4';
     };
+    readonly minus: {
+        readonly viewBox: '0 0 24 24';
+        readonly path: 'M5 12h14';
+    };
+    readonly gauge: {
+        readonly viewBox: '0 0 24 24';
+        readonly path: readonly ["M12 14l4-4", "M3.34 19a10 10 0 1 1 17.32 0"];
+    };
+    readonly clock: {
+        readonly viewBox: '0 0 24 24';
+        readonly path: readonly ["M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z", "M12 7v5l3 2"];
+    };
     readonly play: {
         readonly viewBox: '0 0 24 24';
         readonly path: 'M6 4l14 8-14 8z';

package/dist/ui/config/nm-radius.d.ts

@@ -25,10 +25,10 @@ export declare const NM_RADIUS_CSS_VARS: {
 /** Must match `tokens.css` — validated by `nm-radius.test.ts`. */
 export declare const NM_RADIUS_FORMULAS: {
     readonly control: 'calc(var(--nm-icon-control) / 2 * var(--nm-radius-scale))';
-    readonly composer: 'calc((var(--nm-icon-control) / 2 + var(--nm-space-24)) * var(--nm-radius-scale))';
-    readonly field: 'calc((var(--nm-icon-control) / 2 + var(--nm-space-12)) * var(--nm-radius-scale))';
-    readonly menu: 'calc((var(--nm-icon-control) / 2 + var(--nm-space-8)) * var(--nm-radius-scale))';
-    readonly row: 'calc((var(--nm-icon-control) / 2 + var(--nm-space-4)) * var(--nm-radius-scale))';
+    readonly composer: 'var(--nm-radius-lg)';
+    readonly field: 'var(--nm-control-r)';
+    readonly menu: 'var(--nm-radius-lg)';
+    readonly row: 'var(--nm-control-r)';
 };
 export declare const NM_RADIUS_PRIMITIVE_FORMULAS: {
     readonly sm: 'calc(4px * var(--nm-radius-scale))';

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

@@ -0,0 +1,33 @@
+/** What the side panel can show. Each kind has an icon, so a toolbar can open it. */
+export declare const NM_SIDE_PANEL_KINDS: readonly [{
+    readonly id: 'app';
+    readonly label: 'App';
+    readonly icon: 'app';
+}, {
+    readonly id: 'code';
+    readonly label: 'Code';
+    readonly icon: 'code';
+}, {
+    readonly id: 'files';
+    readonly label: 'Files';
+    readonly icon: 'folder';
+}, {
+    readonly id: 'artifact';
+    readonly label: 'Artifact';
+    readonly icon: 'layers';
+}, {
+    readonly id: 'media';
+    readonly label: 'Media';
+    readonly icon: 'image';
+}, {
+    readonly id: 'docs';
+    readonly label: 'Docs';
+    readonly icon: 'file-text';
+}, {
+    readonly id: 'markdown';
+    readonly label: 'Markdown';
+    readonly icon: 'file-code';
+}];
+export type NmSidePanelKind = (typeof NM_SIDE_PANEL_KINDS)[number]['id'];
+export declare const NM_SIDE_PANEL_SIZES: readonly ['narrow', 'default', 'wide'];
+export type NmSidePanelSize = (typeof NM_SIDE_PANEL_SIZES)[number];

package/dist/ui/lib/appearance/appearanceState.d.ts

@@ -7,6 +7,7 @@ export type NmAppearanceState = {
     backgroundHex: string;
     foregroundHex: string;
     uiFontSizePx: number;
+    uiFontWeight: number;
     uiIconSizePx: number;
     uiRadiusPercent: number;
     uiSpacePercent: number;

package/dist/ui/lib/appearance/deriveTokens.d.ts

@@ -1,4 +1,6 @@
 import type { NmAppearanceState } from './appearanceState.ts';
 export type NmDerivedAppearanceTokens = Record<string, string>;
+/** The accent colour that is in effect for these settings. */
+export declare function resolveAccentHex(state: NmAppearanceState): string;
 export declare function deriveAppearanceTokens(state: NmAppearanceState, scheme: 'light' | 'dark'): NmDerivedAppearanceTokens;
 export declare function themeModeFromAppearance(mode: NmAppearanceState['mode']): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Nordman Interface Framework: the one UI and UX system for every Nordman product. Base UI, in the shadcn composition, styled by NIF tokens.",
   "type": "module",
   "sideEffects": [
@@ -22,18 +22,20 @@
   "files": [
     "dist",
     "interface",
+    "registry",
+    "bin",
     "README.md"
   ],
   "scripts": {
     "sync": "npm run ui:sync --prefix ..",
     "build": "node build.mjs",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run build && npm run test:layout --prefix ../design",
     "prebuild": "node ../scripts/nif-check.mjs"
   },
   "peerDependencies": {
     "@base-ui/react": "^1.9.0",
     "framer-motion": ">=12.0.0",
-    "lucide-react": ">=0.525.0",
+    "lucide-react": ">=0.525.0 <1",
     "orb-ui": "^0.10.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
@@ -68,6 +70,12 @@
   },
   "dependencies": {
     "@fontsource/geist-mono": "^5.2.0",
-    "@fontsource/poppins": "^5.2.0"
+    "@fontsource/poppins": "^5.2.0",
+    "cmdk": "^1.1.1",
+    "react-colorful": "^5.8.1",
+    "react-day-picker": "^10.0.2"
+  },
+  "bin": {
+    "nif": "./bin/nif.mjs"
   }
 }