@nordmanai/nif 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,48 @@
+  .nm-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    width: fit-content;
+  }
+
+  .nm-radio {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    padding: 0;
+    border: var(--nm-rule) solid var(--nm-stroke);
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+    transition: border-color 0.15s;
+  }
+
+  .nm-radio:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-radio[data-checked] {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-radio[data-invalid] {
+    border-color: var(--nm-destructive);
+  }
+
+  .nm-radio[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .nm-radio__indicator {
+    width: 50%;
+    height: 50%;
+    border-radius: 50%;
+    background: var(--nm-fg);
+  }

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

@@ -0,0 +1,15 @@
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export function NmRadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return <RadioGroupPrimitive data-slot="radio-group" className={nmClass('nm-radio-group', className as string)} {...props} />;
+}
+
+export function NmRadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root data-slot="radio-group-item" className={nmClass('nm-radio', className as string)} {...props}>
+      <RadioPrimitive.Indicator data-slot="radio-group-indicator" className="nm-radio__indicator" />
+    </RadioPrimitive.Root>
+  );
+}

package/registry/ui/components/nm-rail-icon/nm-rail-icon.css

@@ -0,0 +1,6 @@
+  .nm-rail-icon {
+    display: block;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { NmRailIconId } from '../../config/nm-rail-icons.ts';
+import { NmLucide } from '../nm-icon/nm-lucide.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-rail-icon');
+
+const RAIL_LUCIDE: Record<NmRailIconId, string> = {
+  plus: 'plus',
+  plusSm: 'plus',
+  folder: 'folder',
+  chats: 'chat',
+  bot: 'bot',
+  app: 'app',
+  spreadsheet: 'monitor',
+  library: 'library',
+  settings: 'settings',
+  search: 'search',
+};
+
+export type NmRailIconProps = {
+  id: NmRailIconId;
+};
+
+export function NmRailIcon(props: NmRailIconProps): ReactNode {
+  logger.debug('render', props.id);
+  return <NmLucide id={RAIL_LUCIDE[props.id]} className="nm-rail-icon" />;
+}

package/registry/ui/components/nm-resize-handle/nm-resize-handle.css

@@ -0,0 +1,45 @@
+  .nm-resize {
+    box-sizing: border-box;
+    width: var(--nm-space-6);
+    cursor: col-resize;
+    outline: none;
+    touch-action: none;
+  }
+
+  .nm-resize[data-placement='inside'] {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    bottom: 0;
+  }
+
+  .nm-resize[data-placement='inside'][data-edge='start'] {
+    inset-inline-start: calc(var(--nm-space-6) / -2);
+  }
+
+  .nm-resize[data-placement='inside'][data-edge='end'] {
+    inset-inline-end: calc(var(--nm-space-6) / -2);
+  }
+
+  /* The line is invisible until the Contrast setting raises it, and shows whenever the handle is in use. */
+  .nm-resize::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: var(--nm-space-2);
+    transform: translateX(-50%);
+    background: var(--nm-divider);
+    transition: background 0.12s;
+  }
+
+  .nm-resize:hover::after,
+  .nm-resize:focus-visible::after,
+  .nm-resize[data-dragging]::after {
+    background: var(--nm-stroke);
+  }
+
+  .nm-resize[data-dragging] {
+    user-select: none;
+  }

package/registry/ui/components/nm-resize-handle/nm-resize-handle.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState, type KeyboardEvent, type PointerEvent, type RefObject } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+const STEP = 16;
+
+/** A length from the computed style of the target. A percentage is a share of its parent. */
+function lengthOf(value: string, parentWidth: number, fallback: number): number {
+  if (value.endsWith('%')) {
+    return (parseFloat(value) / 100) * parentWidth;
+  }
+  const px = parseFloat(value);
+  return Number.isFinite(px) ? px : fallback;
+}
+
+/**
+ * The handle that resizes a panel. Every NIF panel that sits beside other content has one. It follows the pointer,
+ * the arrow keys, Home and End, and Enter or a double click restores the default width.
+ * The limits are the target's own `min-width` and `max-width`, so tokens in CSS decide how far it goes.
+ */
+export function NmResizeHandle({
+  target,
+  edge,
+  label,
+  onSize,
+  placement = 'free',
+  className,
+}: {
+  /** The panel to resize. */
+  target: RefObject<HTMLElement | null>;
+  /** Which edge of the panel the handle is on. A panel on the right has its handle on the start edge. */
+  edge: 'start' | 'end';
+  label: string;
+  /** The new width in pixels, or null to restore the default. */
+  onSize: (px: number | null) => void;
+  /** `inside` pins the handle to the edge of its parent. `free` leaves placement to the layout. */
+  placement?: 'inside' | 'free';
+  className?: string;
+}) {
+  const [dragging, setDragging] = useState(false);
+  const limits = () => {
+    const el = target.current;
+    if (!el) {
+      return { min: 0, max: 0, now: 0 };
+    }
+    const style = getComputedStyle(el);
+    const parent = el.parentElement?.getBoundingClientRect().width ?? 0;
+    return { min: lengthOf(style.minWidth, parent, 0), max: lengthOf(style.maxWidth, parent, parent), now: el.getBoundingClientRect().width };
+  };
+  const [shown, setShown] = useState(limits);
+  const refresh = () => setShown(limits());
+  useEffect(refresh, []);
+  const clamp = (px: number) => {
+    const { min, max } = limits();
+    return Math.min(max, Math.max(min, Math.round(px)));
+  };
+  const set = (px: number | null) => {
+    onSize(px);
+    requestAnimationFrame(refresh);
+  };
+  // The sign that grows the panel: dragging away from the panel, in reading direction.
+  const grows = edge === 'end' ? 1 : -1;
+  const onKeyDown = (event: KeyboardEvent) => {
+    const { min, max, now } = limits();
+    if (event.key === 'ArrowRight') set(clamp(now + grows * STEP));
+    else if (event.key === 'ArrowLeft') set(clamp(now - grows * STEP));
+    else if (event.key === 'Home') set(min);
+    else if (event.key === 'End') set(max);
+    else if (event.key === 'Enter') set(null);
+    else return;
+    event.preventDefault();
+  };
+  return (
+    <div
+      className={nmClass('nm-resize', className)}
+      data-slot="resize-handle"
+      data-edge={edge}
+      data-placement={placement}
+      data-dragging={dragging || undefined}
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={label}
+      aria-valuemin={Math.round(shown.min)}
+      aria-valuemax={Math.round(shown.max)}
+      aria-valuenow={Math.round(shown.now)}
+      tabIndex={0}
+      onKeyDown={onKeyDown}
+      onDoubleClick={() => set(null)}
+      onPointerDown={(event: PointerEvent<HTMLDivElement>) => {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        setDragging(true);
+      }}
+      onPointerMove={(event: PointerEvent<HTMLDivElement>) => {
+        const rect = target.current?.getBoundingClientRect();
+        if (dragging && rect) {
+          set(clamp(edge === 'end' ? event.clientX - rect.left : rect.right - event.clientX));
+        }
+      }}
+      onPointerUp={() => setDragging(false)}
+      onPointerCancel={() => setDragging(false)}
+    />
+  );
+}

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

@@ -0,0 +1,104 @@
+  .nm-segmented {
+    display: inline-flex;
+    align-items: stretch;
+    gap: var(--nm-space-2);
+    padding: var(--toggle-pad);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--toggle-r);
+    background: transparent;
+  }
+
+  .nm-segmented__item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    font-family: var(--nm-font);
+    font-size: var(--control-fs);
+    font-weight: var(--nm-weight-regular);
+    cursor: pointer;
+  }
+
+  .nm-segmented__item:not(.nm-icon-button) {
+    gap: var(--nm-space-4);
+    box-sizing: border-box;
+    height: var(--toggle-h);
+    padding: 0 var(--toggle-px);
+    border-radius: var(--toggle-r);
+    background: transparent;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-segmented__item:has(.nm-segmented__icon):not(.nm-icon-button) {
+    width: var(--toggle-h);
+    padding: 0;
+  }
+
+  .nm-segmented__item:not(.nm-icon-button):hover,
+  .nm-segmented__item:not(.nm-icon-button):focus-visible {
+    color: var(--nm-fg);
+  }
+
+  .nm-segmented--line .nm-segmented__item:not(.nm-icon-button)[data-active='true'] {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-segmented--fill .nm-segmented__item:not(.nm-icon-button)[data-active='true'] {
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+  }
+
+  .nm-segmented__icon {
+    display: block;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    flex-shrink: 0;
+  }
+
+  .nm-segmented--pills {
+    gap: var(--nm-space-8);
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .nm-segmented--pills .nm-segmented__item:not(.nm-icon-button),
+  .nm-segmented--pills .nm-segmented__item:has(.nm-segmented__icon):not(.nm-icon-button) {
+    width: auto;
+    height: var(--control-h);
+    gap: var(--control-gap);
+    padding: 0 var(--control-px);
+    border-radius: var(--nm-control-r);
+    background: transparent;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-segmented--pills .nm-segmented__item:not(.nm-icon-button)[data-active='true'] {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-segmented--pills .nm-segmented__item:not(.nm-icon-button):hover,
+  .nm-segmented--pills .nm-segmented__item:not(.nm-icon-button):focus-visible {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-segmented--track {
+    display: flex;
+    width: 100%;
+  }
+
+  .nm-segmented--track .nm-segmented__item {
+    flex: 1 1 0;
+    background: transparent;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-segmented--track .nm-segmented__item[data-active='true'] {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+

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

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_SEGMENTED_CLASSES,
+  NM_SEGMENTED_TONES,
+  type NmSegmentedTone,
+} from '../../config/nm-segmented.ts';
+import { NM_ICON_BUTTON_CLASSES, NM_ICON_BUTTON_TONES } from '../../config/nm-icon-button.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+const logger = createLogger('interface-nm-segmented');
+
+function segmentIcon(item: NmSegmentedItem): ReactNode {
+  if (item.imageSrc) {
+    return <img className={NM_SEGMENTED_CLASSES.icon} src={item.imageSrc} alt="" />;
+  }
+  if (item.icon) {
+    return <NmIcon id={item.icon} className={NM_SEGMENTED_CLASSES.icon} />;
+  }
+  return null;
+}
+
+export type NmSegmentedItem = {
+  id: string;
+  label: string;
+  icon?: NmIconId;
+  imageSrc?: string;
+  iconOnly?: boolean;
+};
+
+export type NmSegmentedProps = {
+  items: readonly NmSegmentedItem[];
+  active: string;
+  tone?: NmSegmentedTone;
+  label: string;
+  testId?: string;
+  onSelect: (id: string) => void;
+};
+
+export function NmSegmented(props: NmSegmentedProps): ReactNode {
+  const tone = props.tone ?? NM_SEGMENTED_TONES.line;
+  logger.debug('render', props.active, { tone, items: props.items.length });
+  return (
+    <div
+      className={`${NM_SEGMENTED_CLASSES.root} ${NM_SEGMENTED_CLASSES[tone]}`}
+      role="radiogroup"
+      aria-label={props.label}
+      data-testid={props.testId}
+    >
+      {props.items.map((item) => {
+        const selected = item.id === props.active;
+        const iconOnly = item.iconOnly === true;
+        const className = iconOnly
+          ? `${NM_SEGMENTED_CLASSES.item} ${NM_SEGMENTED_CLASSES.itemIcon} ${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES[NM_ICON_BUTTON_TONES.subtle]}`
+          : NM_SEGMENTED_CLASSES.item;
+        return (
+          <button
+            key={item.id}
+            className={className}
+            type="button"
+            role="radio"
+            aria-label={iconOnly ? item.label : undefined}
+            aria-checked={selected}
+            data-active={selected ? 'true' : 'false'}
+            onClick={() => props.onSelect(item.id)}
+          >
+            {segmentIcon(item)}
+            {iconOnly ? null : item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export { NM_SEGMENTED_TONES };

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

@@ -0,0 +1,78 @@
+  .nm-select__trigger {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    width: 100%;
+    min-width: 0;
+    height: var(--nm-field-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: inherit;
+    font-size: var(--control-fs);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .nm-select__trigger[data-bare] {
+    height: auto;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .nm-select__trigger:hover,
+  .nm-select__trigger[data-popup-open],
+  .nm-select__trigger:focus-visible {
+    border-color: var(--nm-stroke);
+    outline: none;
+  }
+
+  .nm-select__trigger[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .nm-select__trigger > :first-child {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nm-select__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-select__popup {
+    min-width: var(--anchor-width);
+  }
+
+  .nm-select__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-2);
+  }
+
+  .nm-select__item {
+    justify-content: space-between;
+  }
+
+  .nm-select__text {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--nm-space-12);
+    min-width: 0;
+  }
+
+  .nm-select__check {
+    display: inline-flex;
+    flex-shrink: 0;
+  }

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

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+/**
+ * Base UI Select, in the shadcn composition, styled by NIF tokens. The choice of one value from a list that
+ * opens under the field. The list is the same surface as the dropdown menu.
+ */
+export function NmSelect<Value = string>(props: SelectPrimitive.Root.Props<Value>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+/** `bare` drops its own box, for a trigger that sits inside a field. */
+export function NmSelectTrigger({ className, children, bare, ...props }: SelectPrimitive.Trigger.Props & { bare?: boolean }) {
+  return (
+    <SelectPrimitive.Trigger data-slot="select-trigger" data-bare={bare ? '' : undefined} className={nmClass('nm-select__trigger', className as string)} {...props}>
+      {children}
+      <SelectPrimitive.Icon className="nm-select__icon">
+        <NmIcon id="chevron" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+export function NmSelectValue(props: SelectPrimitive.Value.Props) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+/** `anchor` is the element the list lines up with. It defaults to the trigger. */
+export function NmSelectContent({ className, children, anchor, ...props }: SelectPrimitive.Popup.Props & { anchor?: HTMLElement | null }) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner className="nm-menu__positioner" alignItemWithTrigger={false} sideOffset={4} anchor={anchor ?? undefined}>
+        <SelectPrimitive.Popup data-slot="select-content" className={nmClass('nm-menu nm-select__popup', className as string)} {...props}>
+          <SelectPrimitive.List className="nm-select__list">{children}</SelectPrimitive.List>
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  );
+}
+
+export function NmSelectItem({ className, children, ...props }: SelectPrimitive.Item.Props & { children: ReactNode }) {
+  return (
+    <SelectPrimitive.Item data-slot="select-item" className={nmClass('nm-menu__item nm-select__item', className as string)} {...props}>
+      <SelectPrimitive.ItemText className="nm-select__text">{children}</SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator className="nm-select__check">
+        <NmIcon id="check" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+}
+
+export function NmSelectGroup(props: SelectPrimitive.Group.Props) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+export function NmSelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
+  return <SelectPrimitive.GroupLabel data-slot="select-label" className={nmClass('nm-menu__label', className as string)} {...props} />;
+}
+
+export function NmSelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
+  return <SelectPrimitive.Separator data-slot="select-separator" className={nmClass('nm-menu__separator', className as string)} {...props} />;
+}

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

@@ -0,0 +1,14 @@
+  .nm-separator {
+    flex-shrink: 0;
+    background: var(--nm-line);
+  }
+
+  .nm-separator[data-orientation='horizontal'] {
+    width: 100%;
+    height: var(--nm-rule);
+  }
+
+  .nm-separator[data-orientation='vertical'] {
+    align-self: stretch;
+    width: var(--nm-rule);
+  }

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

@@ -0,0 +1,6 @@
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export function NmSeparator({ className, orientation = 'horizontal', ...props }: SeparatorPrimitive.Props) {
+  return <SeparatorPrimitive data-slot="separator" orientation={orientation} className={nmClass('nm-separator', className as string)} {...props} />;
+}

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

@@ -0,0 +1,93 @@
+  .nm-workspace {
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    height: var(--nm-workspace-h, 100%);
+    min-height: 0;
+    overflow: hidden;
+    background: var(--nm-canvas);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+  }
+
+  .nm-workspace__main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .nm-workspace__body {
+    flex: 1;
+    min-height: 0;
+    padding: 0 var(--nm-space-12) var(--nm-space-12);
+    overflow: auto;
+  }
+
+  .nm-workspace__footer {
+    flex-shrink: 0;
+    padding: var(--nm-space-12);
+  }
+
+  .nm-side-panel {
+    --nm-side-panel-basis: 50%;
+    position: relative;
+    min-width: var(--nm-width-panel-min);
+    max-width: var(--nm-width-panel-max);
+    box-sizing: border-box;
+    display: flex;
+    flex: 0 0 var(--nm-side-panel-basis);
+    flex-direction: column;
+    min-height: 0;
+    border-inline-start: var(--nm-rule) solid var(--nm-divider);
+    background: var(--nm-canvas);
+  }
+
+  .nm-side-panel[hidden] {
+    display: none;
+  }
+
+  .nm-side-panel[data-size='narrow'] {
+    --nm-side-panel-basis: 33%;
+  }
+
+  .nm-side-panel[data-size='wide'] {
+    --nm-side-panel-basis: 75%;
+  }
+
+  .nm-workspace__main > .nm-toolbar,
+  .nm-side-panel > .nm-toolbar {
+    flex-shrink: 0;
+  }
+
+  .nm-workspace[data-height='sm'] {
+    --nm-workspace-h: var(--nm-height-workspace-sm);
+  }
+
+  .nm-workspace[data-height='lg'] {
+    --nm-workspace-h: var(--nm-height-workspace-lg);
+  }
+
+  /* A panel or a table that is all of a body fills it. */
+  .nm-side-panel__body > img {
+    display: block;
+    width: 100%;
+  }
+
+  .nm-side-panel__body > .nm-panel-region {
+    height: 100%;
+  }
+
+  .nm-side-panel__body {
+    flex: 1;
+    min-height: 0;
+    padding: 0 var(--nm-space-12) var(--nm-space-12);
+    overflow: auto;
+  }
+
+  @media (max-width: 48rem) {
+    .nm-side-panel {
+      --nm-side-panel-basis: 100%;
+    }
+  }