@nordmanai/nif 0.2.2 → 0.2.4

package/registry/ui/components/nm-icon/nm-lucide.tsx

@@ -1,4 +1,16 @@
 import {
+  Archive,
+  Camera,
+  CloudUpload,
+  Download,
+  Lock,
+  LogOut,
+  Minimize,
+  Pencil,
+  Pin,
+  Share,
+  Trash2,
+  Volume2,
   AppWindowMac,
   ArrowLeft,
   ArrowRight,
@@ -72,15 +84,29 @@ import {
   X,
   type LucideIcon,
 } from 'lucide-react';
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode, SVGAttributes } from 'react';
+import { NM_ANIMATED_ICONS } from './animated/index.ts';
+import { NM_LUCIDE_EXTENDED } from './nm-lucide-extended.tsx';
 import type { NmIconId } from '../../config/nm-icons.ts';
 
 export const NM_LUCIDE_FILLED_IDS = new Set<string>(['stop']);
 
-const LUCIDE: Partial<
+const LUCIDE_CORE: Partial<
   Record<NmIconId | 'square-dashed-bottom-code' | 'layout-grid' | 'stop' | 'scan' | 'pause', LucideIcon>
 > = {
   plus: Plus,
+  volume: Volume2,
+  camera: Camera,
+  minimize: Minimize,
+  download: Download,
+  publish: CloudUpload,
+  share: Share,
+  pen: Pencil,
+  pin: Pin,
+  archive: Archive,
+  trash: Trash2,
+  logout: LogOut,
+  lock: Lock,
   expand: Maximize2,
   scan: Scan,
   reload: RotateCcw,
@@ -156,25 +182,49 @@ const LUCIDE: Partial<
   rows: Rows2,
 };
 
+const LUCIDE: Partial<Record<string, LucideIcon>> = { ...NM_LUCIDE_EXTENDED, ...LUCIDE_CORE };
+
+/** True when the icon plays an animation on hover: a lucide icon Animate UI has an animation for. */
+export function isNmIconAnimated(id: string): boolean {
+  const Icon = LUCIDE[id];
+  return Icon != null && !NM_LUCIDE_FILLED_IDS.has(id) && (Icon as { displayName?: string }).displayName! in NM_ANIMATED_ICONS;
+}
+
 export function hasNmLucide(id: string): boolean {
   return id in LUCIDE;
 }
 
-export function NmLucide({ id, className }: { id: string; className?: string }): ReactNode {
-  const Icon = LUCIDE[id as NmIconId | 'square-dashed-bottom-code' | 'layout-grid' | 'stop'];
+function sized(size: number | string | undefined, style: CSSProperties | undefined): CSSProperties | undefined {
+  if (size == null) {
+    return style;
+  }
+  const length = typeof size === 'number' ? `${size}px` : size;
+  return { width: length, height: length, ...style };
+}
+
+export function NmLucide({ id, className, size, style, ...rest }: { id: string; className?: string; size?: number | string; style?: CSSProperties } & Omit<SVGAttributes<SVGElement>, 'id' | 'className' | 'style'>): ReactNode {
+  const Icon = LUCIDE[id];
   if (Icon == null) {
     return null;
   }
   const filled = NM_LUCIDE_FILLED_IDS.has(id);
   const baseClass = filled ? 'nm-icon nm-icon--filled' : 'nm-icon';
   const iconClass = className == null ? baseClass : `${baseClass} ${className}`;
+  // An icon Animate UI has an animation for plays it when the control around it is hovered. The rest stay lucide.
+  const Animated = filled ? undefined : NM_ANIMATED_ICONS[(Icon as { displayName?: string }).displayName ?? ''];
+  if (Animated) {
+    return <Animated className={iconClass} data-icon={id} aria-hidden={rest['aria-label'] == null} focusable="false" size={typeof size === 'number' ? size : undefined} {...rest} style={sized(size, style)} />;
+  }
   return (
     <Icon
       className={iconClass}
       data-icon={id}
       strokeWidth={filled ? undefined : 2}
-      aria-hidden
+      aria-hidden={rest['aria-label'] == null}
       focusable="false"
+      size={typeof size === 'number' ? size : undefined}
+      {...(rest as object)}
+      style={sized(size, style)}
     />
   );
 }

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

@@ -1,3 +1,4 @@
+
   .nm-input {
     box-sizing: border-box;
     width: 100%;

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

@@ -1,5 +1,5 @@
-import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
-import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { Menubar as MenubarPrimitive } from '../../lib/nm-motion.ts';
+import { Menu as MenuPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 /**

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

@@ -21,6 +21,13 @@
     background: var(--nm-canvas);
   }
 
+  .nm-panel-region[data-measure='column'] {
+    width: var(--nm-width-column);
+    min-width: min(100%, var(--nm-width-column-min));
+    max-width: var(--nm-width-column-max);
+    margin-inline: auto;
+  }
+
   .nm-panel-region__header {
     display: flex;
     flex-shrink: 0;

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

@@ -4,9 +4,26 @@ import { nmClass } from '../../lib/nm-class.ts';
 export const NM_PANEL_VARIANTS = ['default', 'inset', 'plain'] as const;
 export type NmPanelVariant = (typeof NM_PANEL_VARIANTS)[number];
 
+/** `full` fills the room it is given. `column` is a centred share of it, held between a minimum and a maximum width. */
+export const NM_PANEL_MEASURES = ['full', 'column'] as const;
+export type NmPanelMeasure = (typeof NM_PANEL_MEASURES)[number];
+
 /** A region of the app, such as an inspector or a side panel: a header, content that scrolls, and a footer. */
-export function NmPanel({ className, variant = 'default', ...props }: ComponentProps<'section'> & { variant?: NmPanelVariant }) {
-  return <section data-slot="panel" data-variant={variant} className={nmClass('nm-panel-region', className)} {...props} />;
+export function NmPanel({
+  className,
+  variant = 'default',
+  measure = 'full',
+  ...props
+}: ComponentProps<'section'> & { variant?: NmPanelVariant; measure?: NmPanelMeasure }) {
+  return (
+    <section
+      data-slot="panel"
+      data-variant={variant}
+      data-measure={measure}
+      className={nmClass('nm-panel-region', className)}
+      {...props}
+    />
+  );
 }
 
 export function NmPanelHeader({ className, ...props }: ComponentProps<'header'>) {

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

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
-import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { Popover as PopoverPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 export function NmPopover(props: PopoverPrimitive.Root.Props) {
@@ -16,11 +16,12 @@ export function NmPopoverContent({
   alignOffset = 0,
   side = 'bottom',
   sideOffset = 8,
+  anchor,
   ...props
-}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+}: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'anchor'>) {
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Positioner align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className="nm-popover__positioner">
+      <PopoverPrimitive.Positioner anchor={anchor} align={align} alignOffset={alignOffset} side={side} sideOffset={sideOffset} className="nm-popover__positioner">
         <PopoverPrimitive.Popup data-slot="popover-content" className={nmClass('nm-popover', className as string)} {...props} />
       </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>

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

@@ -1,4 +1,4 @@
-import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { Progress as ProgressPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 /** Base UI Progress, in the shadcn composition, styled by NIF tokens. */

package/registry/ui/components/nm-radio-group/nm-radio-group.tsx

@@ -1,5 +1,5 @@
-import { Radio as RadioPrimitive } from '@base-ui/react/radio';
-import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { Radio as RadioPrimitive } from '../../lib/nm-motion.ts';
+import { RadioGroup as RadioGroupPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 export function NmRadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { Select as SelectPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 import { NmIcon } from '../nm-icon/nm-icon.tsx';
 

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

@@ -0,0 +1,17 @@
+  .nm-skeleton {
+    border-radius: var(--nm-radius-md);
+    background: var(--nm-panel);
+    animation: nm-skeleton-pulse 1.6s ease-in-out infinite;
+  }
+
+  @keyframes nm-skeleton-pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-skeleton {
+      animation: none;
+    }
+  }

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

@@ -0,0 +1,7 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** A pulsing placeholder in the shape of the content that is loading. Size it with a class. */
+export function NmSkeleton({ className, ...props }: ComponentProps<'div'>): ReactNode {
+  return <div data-slot="skeleton" className={nmClass('nm-skeleton', className)} {...props} />;
+}

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

@@ -1,4 +1,4 @@
-import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import { Slider as SliderPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 /** `label` and `output` add a caption above the track, set like the caption of a Field. */

package/registry/ui/components/nm-small-icon-button/nm-small-icon-button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import { forwardRef, type ButtonHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 import type { NmIconId } from '../../config/nm-icons.ts';
 import {
   NM_SMALL_ICON_BUTTON_TONES,
@@ -22,7 +22,7 @@ export type NmSmallIconButtonProps = {
   active?: boolean;
   iconContent?: ReactNode;
   testId?: string;
-  onClick?: () => void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-label' | 'children'>;
 
 export const NmSmallIconButton = forwardRef<HTMLButtonElement, NmSmallIconButtonProps>(
@@ -56,7 +56,7 @@ export const NmSmallIconButton = forwardRef<HTMLButtonElement, NmSmallIconButton
           if (disabled === true) {
             return;
           }
-          onClick?.();
+          onClick?.(event);
         }}
       >
         {iconContent}

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

@@ -0,0 +1,22 @@
+  .nm-spinner {
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--nm-icon);
+    height: var(--nm-icon);
+    border: 2px solid var(--nm-line-strong);
+    border-top-color: var(--nm-fg);
+    border-radius: 50%;
+    animation: nm-spinner-turn 0.8s linear infinite;
+  }
+
+  @keyframes nm-spinner-turn {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-spinner {
+      animation-duration: 2.4s;
+    }
+  }

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

@@ -0,0 +1,7 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** A ring that turns while something loads. It is the themed icon size; a class or style sets another. */
+export function NmSpinner({ className, ...props }: ComponentProps<'span'>): ReactNode {
+  return <span role="status" aria-live="polite" data-slot="spinner" className={nmClass('nm-spinner', className)} {...props} />;
+}

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

@@ -7,11 +7,16 @@
     width: calc(var(--nm-switch-thumb) * 2);
     height: var(--nm-switch-thumb);
     padding: var(--nm-space-2);
-    border: 0;
+    border: var(--nm-rule) solid var(--nm-line-strong);
     border-radius: var(--toggle-r);
     background: var(--nm-panel);
     cursor: pointer;
-    transition: background 0.15s;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: none;
+    transition:
+      background 0.15s,
+      border-color 0.15s;
   }
 
   .nm-switch:focus-visible {
@@ -20,6 +25,7 @@
   }
 
   .nm-switch[data-checked] {
+    border-color: var(--nm-fg);
     background: var(--nm-fg);
   }
 
@@ -30,12 +36,16 @@
 
   .nm-switch__thumb {
     display: block;
+    flex-shrink: 0;
+    pointer-events: none;
     width: var(--nm-switch-thumb);
     height: var(--nm-switch-thumb);
     border-radius: 50%;
     background: var(--nm-fg);
+    transform: translateX(0);
+    will-change: transform;
     transition:
-      transform 0.15s,
+      transform 0.15s var(--ease, ease),
       background 0.15s;
   }
 
@@ -43,3 +53,10 @@
     transform: translateX(var(--nm-switch-thumb));
     background: var(--nm-canvas);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-switch,
+    .nm-switch__thumb {
+      transition: none;
+    }
+  }

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

@@ -1,4 +1,4 @@
-import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { Switch as SwitchPrimitive } from '../../lib/nm-motion.ts';
 import { nmClass } from '../../lib/nm-class.ts';
 
 export function NmSwitch({ className, ...props }: SwitchPrimitive.Root.Props) {

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

@@ -26,3 +26,7 @@
   border-bottom-color: var(--nm-fg);
   color: var(--nm-fg);
 }
+
+.nm-tabs__panel {
+  outline: none;
+}

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

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react';
+import { Tabs as TabsPrimitive } from '../../lib/nm-motion.ts';
+import { nmClass } from '../../lib/nm-class.ts';
 import { NM_TABS_CLASSES, type NmTabItem } from '../../config/nm-tabs.ts';
 import { createLogger } from '../../kit-logger.ts';
 
@@ -30,3 +32,20 @@ export function NmTabs(props: NmTabsProps): ReactNode {
     </div>
   );
 }
+
+/** The parts of a tab set, for a view that lays out its own list and panels. */
+export function NmTabsRoot(props: TabsPrimitive.Root.Props): ReactNode {
+  return <TabsPrimitive.Root data-slot="tabs" {...props} />;
+}
+
+export function NmTabsList({ className, ...props }: TabsPrimitive.List.Props): ReactNode {
+  return <TabsPrimitive.List data-slot="tabs-list" className={nmClass(NM_TABS_CLASSES.root, className as string)} {...props} />;
+}
+
+export function NmTabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props): ReactNode {
+  return <TabsPrimitive.Tab data-slot="tabs-trigger" className={nmClass(NM_TABS_CLASSES.item, className as string)} {...props} />;
+}
+
+export function NmTabsContent({ className, ...props }: TabsPrimitive.Panel.Props): ReactNode {
+  return <TabsPrimitive.Panel data-slot="tabs-content" className={nmClass('nm-tabs__panel', className as string)} {...props} />;
+}

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

@@ -39,3 +39,203 @@
   .nm-textarea[aria-invalid='true'] {
     border-color: var(--nm-destructive);
   }
+
+  .nm-textarea-wrap {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+
+  .nm-textarea-wrap .nm-textarea {
+    padding-bottom: calc(var(--control-h) + var(--nm-space-4));
+  }
+
+  .nm-textarea__panel-trigger {
+    position: absolute;
+    right: var(--nm-space-8);
+    bottom: var(--nm-space-8);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--control-h);
+    height: var(--control-h);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg-muted);
+    cursor: pointer;
+    transition: color 0.15s, background-color 0.15s;
+  }
+
+  .nm-textarea__panel-trigger:hover {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-textarea__panel-trigger:focus-visible {
+    outline: var(--nm-rule) solid var(--nm-fg);
+    outline-offset: var(--nm-rule);
+    color: var(--nm-fg);
+  }
+
+  .nm-textarea__panel-trigger .nm-icon {
+    width: var(--nm-space-16);
+    height: var(--nm-space-16);
+  }
+
+  .nm-textarea-panel__backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--nm-menu-z);
+    background: rgb(var(--nm-canvas-rgb) / 0.6);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+  }
+
+  .nm-textarea-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: calc(var(--nm-menu-z) + 1);
+    display: flex;
+    flex-direction: column;
+    width: min(var(--nm-width-dialog), 100%);
+    border-left: var(--nm-rule) solid var(--nm-line-strong);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-textarea-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--nm-space-12) var(--nm-space-16);
+    border-bottom: var(--nm-rule) solid var(--nm-line-strong);
+    gap: var(--nm-space-12);
+  }
+
+  .nm-textarea-panel__title-group {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-12);
+    min-width: 0;
+  }
+
+  .nm-textarea-panel__title {
+    margin: 0;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-semibold);
+    color: var(--nm-fg);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nm-textarea-panel__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-4);
+  }
+
+  .nm-textarea-panel__action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--control-h);
+    height: var(--control-h);
+    padding: 0;
+    border: 0;
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg-muted);
+    cursor: pointer;
+    transition: color 0.15s, background-color 0.15s;
+  }
+
+  .nm-textarea-panel__action-btn:hover {
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+  }
+
+  .nm-textarea-panel__action-btn:focus-visible {
+    outline: var(--nm-rule) solid var(--nm-fg);
+    outline-offset: var(--nm-rule);
+    color: var(--nm-fg);
+  }
+
+  .nm-textarea-panel__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    min-height: 0;
+    background: var(--nm-canvas);
+  }
+
+  .nm-textarea-panel__editor {
+    box-sizing: border-box;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    padding: var(--nm-space-16);
+    border: 0;
+    outline: none;
+    resize: none;
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font-mono);
+    font-size: var(--control-fs);
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-leading-relaxed);
+  }
+
+  .nm-textarea-panel__preview {
+    box-sizing: border-box;
+    flex: 1;
+    padding: var(--nm-space-16);
+    overflow-y: auto;
+    background: var(--nm-canvas);
+  }
+
+  .nm-textarea-panel__empty {
+    margin: 0;
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+    font-style: italic;
+  }
+
+  .nm-textarea-panel__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--nm-space-8) var(--nm-space-16);
+    border-top: var(--nm-rule) solid var(--nm-line-strong);
+    background: var(--nm-panel);
+    font-size: var(--nm-type-ui-sm);
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-textarea-panel__done {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--control-h);
+    padding: 0 var(--control-px);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-control-r);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-medium);
+    cursor: pointer;
+    transition: background-color 0.15s, border-color 0.15s;
+  }
+
+  .nm-textarea-panel__done:hover {
+    background: var(--nm-panel);
+    border-color: var(--nm-stroke);
+  }