@nordmanai/nif 0.2.5 → 0.2.8

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+/**
+ * Base UI Alert Dialog, in the shadcn composition, styled by NIF tokens.
+ * A dialog that asks before something that cannot be undone. It does not close on a click outside, only from its actions or Escape.
+ */
+export declare function NmAlertDialog(props: AlertDialogPrimitive.Root.Props): import("react").JSX.Element;
+export declare function NmAlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props): import("react").JSX.Element;
+export declare function NmAlertDialogContent({ className, children, ...props }: AlertDialogPrimitive.Popup.Props): import("react").JSX.Element;
+export declare function NmAlertDialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmAlertDialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmAlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props): import("react").JSX.Element;
+export declare function NmAlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props): import("react").JSX.Element;
+/** The action that confirms. Give it a NIF Button with `render`; `tone="danger"` when it destroys. */
+export declare function NmAlertDialogAction(props: AlertDialogPrimitive.Close.Props): import("react").JSX.Element;
+/** The action that cancels. Give it a NIF Button with `render`. */
+export declare function NmAlertDialogCancel(props: AlertDialogPrimitive.Close.Props): import("react").JSX.Element;

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

@@ -9,5 +9,9 @@ export declare function NmDialogContent({ className, children, size, ...props }:
     size?: 'default' | 'full';
 }): import("react").JSX.Element;
 export declare function NmDialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** The content between the header and the footer. It scrolls when the dialog is full. */
+export declare function NmDialogBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** The actions at the end, right-aligned. */
+export declare function NmDialogFooter({ 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-drawer/nm-drawer.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react';
+import { Dialog as DialogPrimitive } from '../../lib/nm-motion.ts';
+import type { NmDrawerSide } from '../../config/nm-drawer.ts';
+/**
+ * A panel that slides in from an edge, over the page, with a scrim behind it. The shadcn Sheet, on the Base UI
+ * Dialog, styled by NIF tokens. For navigation on a phone, filters, or a form that should not leave the page.
+ */
+export declare function NmDrawer(props: DialogPrimitive.Root.Props): import("react").JSX.Element;
+export declare function NmDrawerTrigger(props: DialogPrimitive.Trigger.Props): import("react").JSX.Element;
+export declare function NmDrawerClose(props: DialogPrimitive.Close.Props): import("react").JSX.Element;
+/** The panel. `side` is the edge it comes from. Its width is the --nm-width-drawer token. */
+export declare function NmDrawerContent({ className, children, side, ...props }: DialogPrimitive.Popup.Props & {
+    side?: NmDrawerSide;
+}): import("react").JSX.Element;
+export declare function NmDrawerHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmDrawerFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function NmDrawerTitle({ className, ...props }: DialogPrimitive.Title.Props): import("react").JSX.Element;
+export declare function NmDrawerDescription({ className, ...props }: DialogPrimitive.Description.Props): import("react").JSX.Element;

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

@@ -0,0 +1,134 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { type NmSidebarButtonSize, type NmSidebarButtonVariant, type NmSidebarCollapsible, type NmSidebarSide, type NmSidebarState, type NmSidebarVariant } from '../../config/nm-sidebar.ts';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import { NmChip } from '../nm-chip/nm-chip.tsx';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+import { NmInput } from '../nm-input/nm-input.tsx';
+import { NmSeparator } from '../nm-separator/nm-separator.tsx';
+import { NmSmallIconButton } from '../nm-small-icon-button/nm-small-icon-button.tsx';
+import { NmTooltipContent } from '../nm-tooltip/nm-tooltip.tsx';
+/** Replace the element a part renders, as Base UI does: give it an `<a>` and the part is a link. */
+type RenderProp = ReactElement | undefined;
+type SidebarContextValue = {
+    state: NmSidebarState;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+    /** The collapsed sidebar shown in full over the page while the pointer is on it or on the toggle. */
+    peek: boolean;
+    /** Starts a peek. Nothing happens when the sidebar is open, on a phone, or when peeking is off. */
+    peekIn: (event?: {
+        clientX: number;
+        clientY: number;
+    }) => void;
+    /** Ends a peek after a short grace, so the pointer can travel from the toggle into the sidebar. */
+    peekOut: () => void;
+    collapsible: NmSidebarCollapsible;
+    setCollapsible: (mode: NmSidebarCollapsible) => void;
+};
+/** The sidebar's state: expanded or collapsed, peeking, on a desktop or a phone, and the function that toggles it. */
+export declare function useSidebar(): SidebarContextValue;
+export type NmSidebarProviderProps = ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** ⌘B / Ctrl+B toggles the sidebar. Off when several sidebars share a page. */
+    shortcut?: boolean;
+    /** On by default: resting the pointer on the toggle or on the collapsed sidebar shows it in full, over the page, until the pointer leaves. */
+    peek?: boolean;
+    /** `fill` takes the room it is given. `sm` and `lg` are fixed heights, for a sidebar shown inside a page. */
+    height?: 'fill' | 'sm' | 'lg';
+};
+/**
+ * Holds the open state and hands it to every part inside. Wrap the sidebar and the main area in it.
+ * The shadcn Sidebar composition, built from NIF primitives and styled by NIF tokens.
+ */
+export declare function NmSidebarProvider({ defaultOpen, open: openProp, onOpenChange, shortcut, peek: peekEnabled, height, className, style, children, ...props }: NmSidebarProviderProps): ReactNode;
+export type NmSidebarProps = ComponentProps<'div'> & {
+    side?: NmSidebarSide;
+    variant?: NmSidebarVariant;
+    collapsible?: NmSidebarCollapsible;
+    /** The accessible name of the sidebar on a phone, where it opens over the page. */
+    label?: string;
+};
+/**
+ * The sidebar itself. Beside the main area on a desktop, where it slides out of view, collapses to a column
+ * of icons, or collapses to its toggle alone. Over the page on a phone, in a drawer.
+ */
+export declare function NmSidebar({ side, variant, collapsible, label, className, children, ...props }: NmSidebarProps): ReactNode;
+export type NmSidebarTriggerProps = Omit<ComponentProps<'button'>, 'aria-label'> & {
+    /** The accessible name. The tooltip says Open or Close by state. */
+    label?: string;
+    icon?: NmIconId;
+    /** On by default: a tooltip with the name and the ⌘B shortcut. */
+    tooltip?: boolean;
+};
+/** The button that opens and closes the sidebar. In the main area's bar, or in the sidebar's own header. Resting on it peeks the sidebar. */
+export declare function NmSidebarTrigger({ className, label, icon, tooltip, onClick, onPointerEnter, onPointerLeave, ...props }: NmSidebarTriggerProps): ReactNode;
+/** A thin strip on the sidebar's edge. Clicking it toggles the sidebar. */
+export declare function NmSidebarRail({ className, label, ...props }: ComponentProps<'button'> & {
+    label?: string;
+}): ReactNode;
+/** The main area beside the sidebar. With the inset variant it is the raised card. */
+export declare function NmSidebarInset({ className, ...props }: ComponentProps<'main'>): ReactNode;
+/** A search field in the sidebar. The NIF Input. */
+export declare function NmSidebarInput({ className, ...props }: ComponentProps<typeof NmInput>): ReactNode;
+/** Sticky at the top: a brand, a title or a workspace switcher, and the toggle when the sidebar collapses to it. */
+export declare function NmSidebarHeader({ className, ...props }: ComponentProps<'div'>): ReactNode;
+/** Sticky at the bottom: the person, settings or actions. */
+export declare function NmSidebarFooter({ className, ...props }: ComponentProps<'div'>): ReactNode;
+/** The NIF Separator, fitted to the sidebar's padding. */
+export declare function NmSidebarSeparator({ className, ...props }: ComponentProps<typeof NmSeparator>): ReactNode;
+/** The region between the header and the footer. It scrolls. */
+export declare function NmSidebarContent({ className, ...props }: ComponentProps<'div'>): ReactNode;
+/** Related navigation, with a label, an action and content. */
+export declare function NmSidebarGroup({ className, ...props }: ComponentProps<'div'>): ReactNode;
+export declare function NmSidebarGroupLabel({ className, render, ref, ...props }: ComponentProps<'div'> & {
+    render?: RenderProp;
+}): ReactNode;
+/** An icon button at the end of a group label, such as add. The NIF small icon button, quiet. */
+export declare function NmSidebarGroupAction({ className, ...props }: ComponentProps<typeof NmSmallIconButton>): ReactNode;
+export declare function NmSidebarGroupContent({ className, ...props }: ComponentProps<'div'>): ReactNode;
+export declare function NmSidebarMenu({ className, ...props }: ComponentProps<'ul'>): ReactNode;
+export declare function NmSidebarMenuItem({ className, ...props }: ComponentProps<'li'>): ReactNode;
+export type NmSidebarMenuButtonProps = ComponentProps<'button'> & {
+    render?: RenderProp;
+    isActive?: boolean;
+    variant?: NmSidebarButtonVariant;
+    size?: NmSidebarButtonSize;
+    /** Shown beside the icon when the sidebar is collapsed to icons. A string, or the props of the tooltip content. */
+    tooltip?: string | ComponentProps<typeof NmTooltipContent>;
+};
+/** A row in the menu: an icon and a label, as a button or a link. Active, disabled, three sizes and two variants. */
+export declare function NmSidebarMenuButton({ render, isActive, variant, size, tooltip, className, ref, ...props }: NmSidebarMenuButtonProps): ReactNode;
+/** An icon button at the end of a row, such as more. The NIF small icon button, quiet. `showOnHover` keeps it hidden until the row is hovered or focused. */
+export declare function NmSidebarMenuAction({ className, showOnHover, ...props }: ComponentProps<typeof NmSmallIconButton> & {
+    showOnHover?: boolean;
+}): ReactNode;
+/** A count or a short word at the end of a row. The NIF Chip, small. */
+export declare function NmSidebarMenuBadge({ className, ...props }: ComponentProps<typeof NmChip>): ReactNode;
+/** Two lines in a row, such as a name and a plan in the footer. For a large menu button. */
+export declare function NmSidebarMenuText({ title, description, className, ...props }: ComponentProps<'span'> & {
+    title: string;
+    description?: string;
+}): ReactNode;
+/** A row's shape while its content loads. The icon and the text are random widths, so a list of them reads as a list. */
+export declare function NmSidebarMenuSkeleton({ className, showIcon, ...props }: ComponentProps<'div'> & {
+    showIcon?: boolean;
+}): ReactNode;
+/** Rows under a row, indented by a line. */
+export declare function NmSidebarMenuSub({ className, ...props }: ComponentProps<'ul'>): ReactNode;
+export declare function NmSidebarMenuSubItem({ className, ...props }: ComponentProps<'li'>): ReactNode;
+export declare function NmSidebarMenuSubButton({ render, size, isActive, className, ref, ...props }: ComponentProps<'a'> & {
+    render?: RenderProp;
+    size?: Exclude<NmSidebarButtonSize, 'lg'>;
+    isActive?: boolean;
+}): ReactNode;
+/** A chevron at the end of a row. In a collapsible row it points right and turns down when the row is open. With `menu` it points down, for a row that opens a menu. */
+export declare function NmSidebarChevron({ className, menu, ...props }: Omit<ComponentProps<typeof NmIcon>, 'id'> & {
+    menu?: boolean;
+}): ReactNode;
+export {};

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

@@ -0,0 +1,3 @@
+/** The edge a drawer slides in from. */
+export declare const NM_DRAWER_SIDES: readonly ['left', 'right'];
+export type NmDrawerSide = (typeof NM_DRAWER_SIDES)[number];

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

@@ -0,0 +1,29 @@
+/** Which edge of the view the sidebar sits on. */
+export declare const NM_SIDEBAR_SIDES: readonly ['left', 'right'];
+export type NmSidebarSide = (typeof NM_SIDEBAR_SIDES)[number];
+/** `sidebar` is flush with the edge. `floating` is a raised card inside a margin. `inset` sits in a margin and the main area is the raised card. */
+export declare const NM_SIDEBAR_VARIANTS: readonly ['sidebar', 'floating', 'inset'];
+export type NmSidebarVariant = (typeof NM_SIDEBAR_VARIANTS)[number];
+/**
+ * How the sidebar collapses.
+ * `offcanvas` slides out of view; the trigger lives in the main area.
+ * `icon` keeps a column of icons, one per row.
+ * `toggle` keeps only the toggle button, in the sidebar's own header.
+ * `none` never collapses.
+ */
+export declare const NM_SIDEBAR_COLLAPSIBLE: readonly ['offcanvas', 'icon', 'toggle', 'none'];
+export type NmSidebarCollapsible = (typeof NM_SIDEBAR_COLLAPSIBLE)[number];
+export declare const NM_SIDEBAR_STATES: readonly ['expanded', 'collapsed'];
+export type NmSidebarState = (typeof NM_SIDEBAR_STATES)[number];
+/** Row heights of a menu button: the small, default and large control heights. */
+export declare const NM_SIDEBAR_BUTTON_SIZES: readonly ['sm', 'default', 'lg'];
+export type NmSidebarButtonSize = (typeof NM_SIDEBAR_BUTTON_SIZES)[number];
+/** `default` is a quiet row that fills on hover. `outline` draws the row's line and raises it. */
+export declare const NM_SIDEBAR_BUTTON_VARIANTS: readonly ['default', 'outline'];
+export type NmSidebarButtonVariant = (typeof NM_SIDEBAR_BUTTON_VARIANTS)[number];
+/** The key that toggles the sidebar with the platform modifier: ⌘B on Mac, Ctrl+B elsewhere. */
+export declare const NM_SIDEBAR_SHORTCUT = "b";
+/** How long the pointer may be between the toggle and the peeked sidebar before the peek closes, in ms. */
+export declare const NM_SIDEBAR_PEEK_LEAVE_MS = 200;
+/** Below this width the sidebar opens over the page instead of beside it. The same breakpoint as the tokens' phone step. */
+export declare const NM_SIDEBAR_MOBILE_QUERY = "(max-width: 48rem)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordmanai/nif",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "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": [

package/registry/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.5",
+  "version": "0.2.8",
   "versions": {
     "@animate-ui/react": "^2.4.2",
     "@base-ui/react": "^1.9.0",
@@ -76,6 +76,7 @@
     "input-group",
     "form-field",
     "dialog",
+    "alert-dialog",
     "command",
     "calendar",
     "date-picker",
@@ -91,6 +92,8 @@
     "breadcrumb",
     "status-bar",
     "side-panel",
+    "sidebar",
+    "drawer",
     "prose",
     "gallery",
     "resize-handle",
@@ -302,6 +305,18 @@
       "libs": [],
       "uses": []
     },
+    "alert-dialog": {
+      "dir": "nm-alert-dialog",
+      "files": [
+        "components/nm-alert-dialog/nm-alert-dialog.css",
+        "components/nm-alert-dialog/nm-alert-dialog.tsx",
+        "lib/nm-class.ts"
+      ],
+      "libs": [
+        "@base-ui/react"
+      ],
+      "uses": []
+    },
     "app-panel": {
       "dir": "nm-app-panel",
       "files": [
@@ -2502,6 +2517,21 @@
       ],
       "uses": []
     },
+    "drawer": {
+      "dir": "nm-drawer",
+      "files": [
+        "components/nm-drawer/nm-drawer.css",
+        "components/nm-drawer/nm-drawer.tsx",
+        "config/nm-drawer.ts",
+        "lib/nm-class.ts",
+        "lib/nm-motion.ts"
+      ],
+      "libs": [
+        "@animate-ui/react",
+        "@base-ui/react"
+      ],
+      "uses": []
+    },
     "dropdown": {
       "dir": "nm-dropdown",
       "files": [
@@ -4960,6 +4990,187 @@
         "toolbar"
       ]
     },
+    "sidebar": {
+      "dir": "nm-sidebar",
+      "files": [
+        "components/nm-chip/nm-chip.css",
+        "components/nm-chip/nm-chip.tsx",
+        "components/nm-drawer/nm-drawer.css",
+        "components/nm-drawer/nm-drawer.tsx",
+        "components/nm-icon/animated/activity.tsx",
+        "components/nm-icon/animated/archive.tsx",
+        "components/nm-icon/animated/arrow-down.tsx",
+        "components/nm-icon/animated/arrow-left.tsx",
+        "components/nm-icon/animated/arrow-right.tsx",
+        "components/nm-icon/animated/arrow-up-down.tsx",
+        "components/nm-icon/animated/arrow-up.tsx",
+        "components/nm-icon/animated/audio-lines.tsx",
+        "components/nm-icon/animated/bookmark-plus.tsx",
+        "components/nm-icon/animated/bookmark.tsx",
+        "components/nm-icon/animated/bot.tsx",
+        "components/nm-icon/animated/calendar-days.tsx",
+        "components/nm-icon/animated/calendar.tsx",
+        "components/nm-icon/animated/camera.tsx",
+        "components/nm-icon/animated/chart-column-increasing.tsx",
+        "components/nm-icon/animated/chart-column.tsx",
+        "components/nm-icon/animated/chart-line.tsx",
+        "components/nm-icon/animated/check-check.tsx",
+        "components/nm-icon/animated/check.tsx",
+        "components/nm-icon/animated/chevron-down.tsx",
+        "components/nm-icon/animated/chevron-left.tsx",
+        "components/nm-icon/animated/chevron-right.tsx",
+        "components/nm-icon/animated/chevron-up.tsx",
+        "components/nm-icon/animated/circle-alert.tsx",
+        "components/nm-icon/animated/circle-check-big.tsx",
+        "components/nm-icon/animated/circle-check.tsx",
+        "components/nm-icon/animated/circle-plus.tsx",
+        "components/nm-icon/animated/circle-question-mark.tsx",
+        "components/nm-icon/animated/circle-x.tsx",
+        "components/nm-icon/animated/clock-3.tsx",
+        "components/nm-icon/animated/clock-4.tsx",
+        "components/nm-icon/animated/clock.tsx",
+        "components/nm-icon/animated/cloud-sun.tsx",
+        "components/nm-icon/animated/cloud-upload.tsx",
+        "components/nm-icon/animated/copy.tsx",
+        "components/nm-icon/animated/download.tsx",
+        "components/nm-icon/animated/ellipsis.tsx",
+        "components/nm-icon/animated/external-link.tsx",
+        "components/nm-icon/animated/eye-off.tsx",
+        "components/nm-icon/animated/eye.tsx",
+        "components/nm-icon/animated/fast-forward.tsx",
+        "components/nm-icon/animated/file-clock.tsx",
+        "components/nm-icon/animated/file-text.tsx",
+        "components/nm-icon/animated/file.tsx",
+        "components/nm-icon/animated/folder.tsx",
+        "components/nm-icon/animated/gauge.tsx",
+        "components/nm-icon/animated/globe.tsx",
+        "components/nm-icon/animated/graduation-cap.tsx",
+        "components/nm-icon/animated/headphones.tsx",
+        "components/nm-icon/animated/image.tsx",
+        "components/nm-icon/animated/index.ts",
+        "components/nm-icon/animated/info.tsx",
+        "components/nm-icon/animated/key-round.tsx",
+        "components/nm-icon/animated/layers.tsx",
+        "components/nm-icon/animated/layout-dashboard.tsx",
+        "components/nm-icon/animated/library-big.tsx",
+        "components/nm-icon/animated/lightbulb.tsx",
+        "components/nm-icon/animated/link.tsx",
+        "components/nm-icon/animated/list-filter.tsx",
+        "components/nm-icon/animated/list.tsx",
+        "components/nm-icon/animated/loader-circle.tsx",
+        "components/nm-icon/animated/lock.tsx",
+        "components/nm-icon/animated/log-out.tsx",
+        "components/nm-icon/animated/mail.tsx",
+        "components/nm-icon/animated/map-pin.tsx",
+        "components/nm-icon/animated/menu.tsx",
+        "components/nm-icon/animated/message-circle-dashed.tsx",
+        "components/nm-icon/animated/message-circle.tsx",
+        "components/nm-icon/animated/message-square-plus.tsx",
+        "components/nm-icon/animated/message-square-text.tsx",
+        "components/nm-icon/animated/message-square.tsx",
+        "components/nm-icon/animated/mic-off.tsx",
+        "components/nm-icon/animated/mic.tsx",
+        "components/nm-icon/animated/minimize.tsx",
+        "components/nm-icon/animated/minus.tsx",
+        "components/nm-icon/animated/moon.tsx",
+        "components/nm-icon/animated/music.tsx",
+        "components/nm-icon/animated/notebook-pen.tsx",
+        "components/nm-icon/animated/panel-left.tsx",
+        "components/nm-icon/animated/panel-right.tsx",
+        "components/nm-icon/animated/paperclip.tsx",
+        "components/nm-icon/animated/pause.tsx",
+        "components/nm-icon/animated/pencil.tsx",
+        "components/nm-icon/animated/pin-off.tsx",
+        "components/nm-icon/animated/pin.tsx",
+        "components/nm-icon/animated/plane-takeoff.tsx",
+        "components/nm-icon/animated/play.tsx",
+        "components/nm-icon/animated/plug-zap.tsx",
+        "components/nm-icon/animated/plus.tsx",
+        "components/nm-icon/animated/radio.tsx",
+        "components/nm-icon/animated/refresh-cw.tsx",
+        "components/nm-icon/animated/rocket.tsx",
+        "components/nm-icon/animated/rotate-ccw.tsx",
+        "components/nm-icon/animated/rotate-cw.tsx",
+        "components/nm-icon/animated/save.tsx",
+        "components/nm-icon/animated/search.tsx",
+        "components/nm-icon/animated/send.tsx",
+        "components/nm-icon/animated/settings.tsx",
+        "components/nm-icon/animated/share-2.tsx",
+        "components/nm-icon/animated/share.tsx",
+        "components/nm-icon/animated/shield-check.tsx",
+        "components/nm-icon/animated/shopping-bag.tsx",
+        "components/nm-icon/animated/sliders-horizontal.tsx",
+        "components/nm-icon/animated/sparkles.tsx",
+        "components/nm-icon/animated/star.tsx",
+        "components/nm-icon/animated/sun.tsx",
+        "components/nm-icon/animated/terminal.tsx",
+        "components/nm-icon/animated/trash-2.tsx",
+        "components/nm-icon/animated/trash.tsx",
+        "components/nm-icon/animated/trending-up.tsx",
+        "components/nm-icon/animated/triangle-alert.tsx",
+        "components/nm-icon/animated/trophy.tsx",
+        "components/nm-icon/animated/type.tsx",
+        "components/nm-icon/animated/upload.tsx",
+        "components/nm-icon/animated/user-round.tsx",
+        "components/nm-icon/animated/user.tsx",
+        "components/nm-icon/animated/users-round.tsx",
+        "components/nm-icon/animated/users.tsx",
+        "components/nm-icon/animated/volume-2.tsx",
+        "components/nm-icon/animated/wand-sparkles.tsx",
+        "components/nm-icon/animated/x.tsx",
+        "components/nm-icon/animated/zap.tsx",
+        "components/nm-icon/animated/zoom-in.tsx",
+        "components/nm-icon/animated/zoom-out.tsx",
+        "components/nm-icon/nm-icon.css",
+        "components/nm-icon/nm-icon.tsx",
+        "components/nm-icon/nm-lucide-extended.tsx",
+        "components/nm-icon/nm-lucide.tsx",
+        "components/nm-input/nm-input.css",
+        "components/nm-input/nm-input.tsx",
+        "components/nm-kbd/nm-kbd.css",
+        "components/nm-kbd/nm-kbd.tsx",
+        "components/nm-separator/nm-separator.css",
+        "components/nm-separator/nm-separator.tsx",
+        "components/nm-sidebar/nm-sidebar.css",
+        "components/nm-sidebar/nm-sidebar.tsx",
+        "components/nm-skeleton/nm-skeleton.css",
+        "components/nm-skeleton/nm-skeleton.tsx",
+        "components/nm-small-icon-button/nm-small-icon-button.tsx",
+        "components/nm-tooltip/nm-tooltip.css",
+        "components/nm-tooltip/nm-tooltip.tsx",
+        "components/nordman-icon-button/nordman-icon-button.css",
+        "components/nordman-icon-button/nordman-icon-button.tsx",
+        "config/nm-drawer.ts",
+        "config/nm-icon-button.ts",
+        "config/nm-icons-extended.ts",
+        "config/nm-icons.ts",
+        "config/nm-sidebar.ts",
+        "config/nm-small-icon-button.ts",
+        "config/nordman-chrome.ts",
+        "kit-logger.ts",
+        "lib/logger.ts",
+        "lib/nm-class.ts",
+        "lib/nm-motion.ts"
+      ],
+      "libs": [
+        "@animate-ui/react",
+        "@base-ui/react",
+        "lucide-react",
+        "motion"
+      ],
+      "uses": [
+        "chip",
+        "drawer",
+        "icon",
+        "input",
+        "kbd",
+        "separator",
+        "skeleton",
+        "small-icon-button",
+        "tooltip",
+        "nordman-icon-button"
+      ]
+    },
     "skeleton": {
       "dir": "nm-skeleton",
       "files": [

package/registry/ui/components/nm-alert-dialog/nm-alert-dialog.css

@@ -0,0 +1,4 @@
+  /* The alert dialog shares the dialog's surface. It is narrower: a question and two actions. */
+  .nm-alert-dialog {
+    width: min(var(--nm-width-alert-dialog), calc(100% - var(--nm-space-24) * 2));
+  }

package/registry/ui/components/nm-alert-dialog/nm-alert-dialog.tsx

@@ -0,0 +1,43 @@
+import type { ComponentProps } from 'react';
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { nmClass } from '../../lib/nm-class.ts';
+/**
+ * Base UI Alert Dialog, in the shadcn composition, styled by NIF tokens.
+ * A dialog that asks before something that cannot be undone. It does not close on a click outside, only from its actions or Escape.
+ */
+export function NmAlertDialog(props: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+export function NmAlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+export function NmAlertDialogContent({ className, children, ...props }: AlertDialogPrimitive.Popup.Props) {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Backdrop data-slot="alert-dialog-overlay" className="nm-dialog__backdrop" />
+      <AlertDialogPrimitive.Popup data-slot="alert-dialog-content" className={nmClass('nm-dialog nm-alert-dialog', className as string)} {...props}>
+        {children}
+      </AlertDialogPrimitive.Popup>
+    </AlertDialogPrimitive.Portal>
+  );
+}
+export function NmAlertDialogHeader({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="alert-dialog-header" className={nmClass('nm-dialog__header', className)} {...props} />;
+}
+export function NmAlertDialogFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="alert-dialog-footer" className={nmClass('nm-dialog__footer', className)} {...props} />;
+}
+export function NmAlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {
+  return <AlertDialogPrimitive.Title data-slot="alert-dialog-title" className={nmClass('nm-dialog__title', className as string)} {...props} />;
+}
+export function NmAlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {
+  return <AlertDialogPrimitive.Description data-slot="alert-dialog-description" className={nmClass('nm-dialog__description', className as string)} {...props} />;
+}
+/** The action that confirms. Give it a NIF Button with `render`; `tone="danger"` when it destroys. */
+export function NmAlertDialogAction(props: AlertDialogPrimitive.Close.Props) {
+  return <AlertDialogPrimitive.Close data-slot="alert-dialog-action" {...props} />;
+}
+/** The action that cancels. Give it a NIF Button with `render`. */
+export function NmAlertDialogCancel(props: AlertDialogPrimitive.Close.Props) {
+  return <AlertDialogPrimitive.Close data-slot="alert-dialog-cancel" {...props} />;
+}

package/registry/ui/components/nm-dialog/nm-dialog.css

@@ -56,6 +56,21 @@
     color: var(--nm-fg-muted);
     font-size: var(--nm-type-ui-sm);
   }
+  .nm-dialog__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    min-height: 0;
+    padding: var(--nm-space-16) var(--nm-space-24) 0;
+    overflow: auto;
+  }
+  .nm-dialog__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nm-space-8);
+    justify-content: flex-end;
+    padding: var(--nm-space-24);
+  }
 
   .nm-dialog[data-size='full'] {
     inset: 0;

package/registry/ui/components/nm-dialog/nm-dialog.tsx

@@ -31,6 +31,14 @@ export function NmDialogHeader({ className, ...props }: ComponentProps<'div'>) {
   return <div data-slot="dialog-header" className={nmClass('nm-dialog__header', className)} {...props} />;
 }
 
+/** The content between the header and the footer. It scrolls when the dialog is full. */
+export function NmDialogBody({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="dialog-body" className={nmClass('nm-dialog__body', className)} {...props} />;
+}
+/** The actions at the end, right-aligned. */
+export function NmDialogFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="dialog-footer" className={nmClass('nm-dialog__footer', className)} {...props} />;
+}
 export function NmDialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return <DialogPrimitive.Title data-slot="dialog-title" className={nmClass('nm-dialog__title', className as string)} {...props} />;
 }

package/registry/ui/components/nm-drawer/nm-drawer.css

@@ -0,0 +1,70 @@
+  .nm-drawer__backdrop {
+    position: fixed;
+    z-index: var(--nm-menu-z);
+    inset: 0;
+    background: rgb(var(--nm-canvas-rgb) / 0.7);
+    transition: opacity var(--reveal) var(--ease);
+  }
+  .nm-drawer__backdrop[data-starting-style],
+  .nm-drawer__backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  /* The panel sits on an edge and takes the whole height. It slides in from its own edge. */
+  .nm-drawer {
+    position: fixed;
+    z-index: var(--nm-menu-z);
+    inset-block: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: var(--nm-width-drawer);
+    max-width: 100%;
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    outline: none;
+    /* The motion popup owns transform: it slides the panel in from its side. */
+    transition: opacity var(--reveal) var(--ease);
+  }
+  .nm-drawer[data-side='left'] {
+    inset-inline-start: 0;
+    border-inline-end: var(--nm-rule) solid var(--nm-line-strong);
+  }
+  .nm-drawer[data-side='right'] {
+    inset-inline-end: 0;
+    border-inline-start: var(--nm-rule) solid var(--nm-line-strong);
+  }
+  .nm-drawer[data-starting-style],
+  .nm-drawer[data-ending-style] {
+    opacity: 0;
+  }
+  .nm-drawer__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    padding: var(--nm-space-16);
+  }
+  .nm-drawer__footer {
+    display: flex;
+    gap: var(--nm-space-8);
+    justify-content: flex-end;
+    margin-top: auto;
+    padding: var(--nm-space-16);
+  }
+  .nm-drawer__title {
+    margin: 0;
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-medium);
+  }
+  .nm-drawer__description {
+    margin: 0;
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nm-drawer,
+    .nm-drawer__backdrop {
+      transition: none;
+    }
+  }