@nordmanai/nif 0.1.0 → 0.2.1

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

@@ -0,0 +1,86 @@
+import { useRef, useState, type ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NM_SIDE_PANEL_KINDS, type NmSidePanelKind, type NmSidePanelSize } from '../../config/nm-side-panel.ts';
+import { NmResizeHandle } from '../nm-resize-handle/nm-resize-handle.tsx';
+import { NmToolbarButton } from '../nm-toolbar/nm-toolbar.tsx';
+
+/**
+ * A view that holds a main area and a side panel next to it, such as a chat with an artifact beside it.
+ * It is the organ the side panel opens in.
+ */
+export function NmWorkspace({ className, height = 'fill', ...props }: ComponentProps<'div'> & { height?: 'fill' | 'sm' | 'lg' }) {
+  return <div data-slot="workspace" data-height={height} className={nmClass('nm-workspace', className)} {...props} />;
+}
+
+/** The main area. It takes the room the side panel leaves. */
+export function NmWorkspaceMain({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="workspace-main" className={nmClass('nm-workspace__main', className)} {...props} />;
+}
+
+/** The content under a bar in the main area. It fills the height and scrolls. */
+export function NmWorkspaceBody({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="workspace-body" className={nmClass('nm-workspace__body', className)} {...props} />;
+}
+
+/** A row under the body, such as the composer. */
+export function NmWorkspaceFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="workspace-footer" className={nmClass('nm-workspace__footer', className)} {...props} />;
+}
+
+/**
+ * The panel that opens beside the main area, for an app, code, an artifact, media, docs or markdown.
+ * `open` shows it. `size` sets how much of the view it takes, and the handle on its edge resizes it. Fill it with a toolbar and a body.
+ */
+export function NmSidePanel({
+  className,
+  open = true,
+  size = 'default',
+  label,
+  resizable = true,
+  style,
+  children,
+  ...props
+}: Omit<ComponentProps<'aside'>, 'aria-label'> & { open?: boolean; size?: NmSidePanelSize; label: string; resizable?: boolean }) {
+  const ref = useRef<HTMLElement>(null);
+  const [width, setWidth] = useState<number | null>(null);
+  return (
+    <aside
+      ref={ref}
+      data-slot="side-panel"
+      data-open={open ? '' : undefined}
+      data-size={size}
+      aria-label={label}
+      hidden={!open}
+      className={nmClass('nm-side-panel', className)}
+      style={width == null ? style : { ...style, ['--nm-side-panel-basis' as string]: `${width}px` }}
+      {...props}
+    >
+      {resizable ? <NmResizeHandle target={ref} edge="start" placement="inside" label={`Resize ${label}`} onSize={setWidth} /> : null}
+      {children}
+    </aside>
+  );
+}
+
+/** The content under the toolbar. It fills the height and scrolls. */
+export function NmSidePanelBody({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="side-panel-body" className={nmClass('nm-side-panel__body', className)} {...props} />;
+}
+
+/** One button per kind of content. Pressing one opens the panel on that kind. */
+export function NmSidePanelKinds({
+  kinds = NM_SIDE_PANEL_KINDS.map((k) => k.id),
+  active,
+  onSelect,
+}: {
+  kinds?: readonly NmSidePanelKind[];
+  active?: NmSidePanelKind | null;
+  onSelect: (kind: NmSidePanelKind) => void;
+}) {
+  return (
+    <>
+      {NM_SIDE_PANEL_KINDS.filter((k) => kinds.includes(k.id)).map((k) => (
+        <NmToolbarButton key={k.id} icon={k.icon} label={k.label} pressed={active === k.id} tone={active === k.id ? 'panel' : 'quiet'} onClick={() => onSelect(k.id)} />
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,53 @@
+  .nm-slider {
+    width: 100%;
+  }
+
+  .nm-slider__control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: var(--nm-icon-button);
+    touch-action: none;
+    user-select: none;
+  }
+
+  .nm-slider__track {
+    position: relative;
+    flex-grow: 1;
+    height: var(--nm-space-4);
+    overflow: hidden;
+    border-radius: var(--toggle-r);
+    background: var(--nm-panel);
+  }
+
+  .nm-slider__range {
+    height: 100%;
+    background: var(--nm-fg);
+  }
+
+  .nm-slider__thumb {
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    box-sizing: border-box;
+    border: var(--nm-rule) solid var(--nm-fg);
+    border-radius: 50%;
+    background: var(--nm-canvas);
+    user-select: none;
+  }
+
+  .nm-slider__thumb:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-slider[data-disabled] {
+    opacity: 0.5;
+  }
+
+  .nm-slider__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--nm-space-8);
+  }

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

@@ -0,0 +1,40 @@
+import { Slider as SliderPrimitive } from '@base-ui/react/slider';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** `label` and `output` add a caption above the track, set like the caption of a Field. */
+export function NmSlider({ className, defaultValue, value, min = 0, max = 100, label, output, ...props }: SliderPrimitive.Root.Props & { label?: string; output?: string }) {
+  const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
+  const slider = (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      className={nmClass('nm-slider', className as string)}
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      aria-label={label}
+      {...props}
+    >
+      <SliderPrimitive.Control className="nm-slider__control">
+        <SliderPrimitive.Track data-slot="slider-track" className="nm-slider__track">
+          <SliderPrimitive.Indicator data-slot="slider-range" className="nm-slider__range" />
+        </SliderPrimitive.Track>
+        {Array.from({ length: values.length }, (_, index) => (
+          <SliderPrimitive.Thumb key={index} data-slot="slider-thumb" className="nm-slider__thumb" />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+  return label ? (
+    <div className="nm-field nm-field--stack">
+      <div className="nm-slider__head">
+        <span className="nm-field__caption">{label}</span>
+        {output != null ? <output className="nm-field__caption">{output}</output> : null}
+      </div>
+      {slider}
+    </div>
+  ) : (
+    slider
+  );
+}

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

@@ -0,0 +1,66 @@
+import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_SMALL_ICON_BUTTON_TONES,
+  type NmSmallIconButtonTone,
+} from '../../config/nm-small-icon-button.ts';
+import { NM_ICON_BUTTON_TONES, type NmIconButtonTone } from '../../config/nm-icon-button.ts';
+import { NordmanIconButton } from '../nordman-icon-button/nordman-icon-button.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-small-icon-button');
+
+const SMALL_ICON_BUTTON_TONE: Record<NmSmallIconButtonTone, NmIconButtonTone> = {
+  [NM_SMALL_ICON_BUTTON_TONES.solid]: NM_ICON_BUTTON_TONES.solid,
+  [NM_SMALL_ICON_BUTTON_TONES.quiet]: NM_ICON_BUTTON_TONES.quiet,
+};
+
+export type NmSmallIconButtonProps = {
+  label: string;
+  icon: NmIconId;
+  tone?: NmSmallIconButtonTone;
+  active?: boolean;
+  iconContent?: ReactNode;
+  testId?: string;
+  onClick?: () => void;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-label' | 'children'>;
+
+export const NmSmallIconButton = forwardRef<HTMLButtonElement, NmSmallIconButtonProps>(
+  function NmSmallIconButton(props, ref): ReactNode {
+    const {
+      label,
+      icon,
+      tone = NM_SMALL_ICON_BUTTON_TONES.solid,
+      active = false,
+      iconContent,
+      testId,
+      onClick,
+      className,
+      disabled,
+      ...rest
+    } = props;
+    logger.debug('render', label, { icon, tone, disabled: disabled === true, active });
+    return (
+      <NordmanIconButton
+        {...rest}
+        ref={ref}
+        glyph={icon}
+        label={label}
+        tone={SMALL_ICON_BUTTON_TONE[tone]}
+        active={active}
+        disabled={disabled}
+        testId={testId}
+        className={className}
+        onClick={(event) => {
+          event.stopPropagation();
+          if (disabled === true) {
+            return;
+          }
+          onClick?.();
+        }}
+      >
+        {iconContent}
+      </NordmanIconButton>
+    );
+  },
+);

package/registry/ui/components/nm-status-bar/nm-status-bar.css

@@ -0,0 +1,50 @@
+  .nm-status-bar {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-4);
+    width: 100%;
+    min-width: 0;
+    height: var(--control-h-sm);
+    padding: 0 var(--nm-space-8);
+    background: var(--nm-panel);
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-status-bar__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-6);
+    height: 100%;
+    padding: 0 var(--nm-space-8);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    white-space: nowrap;
+  }
+
+  button.nm-status-bar__item {
+    cursor: pointer;
+  }
+
+  button.nm-status-bar__item:hover {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+
+  button.nm-status-bar__item:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: calc(var(--nm-space-2) * -1);
+  }
+
+  .nm-status-bar__item .nm-icon {
+    width: var(--nm-icon-sm);
+    height: var(--nm-icon-sm);
+  }
+
+  .nm-status-bar__spacer {
+    flex: 1;
+  }

package/registry/ui/components/nm-status-bar/nm-status-bar.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+
+/** A thin bar at the bottom of a window for state: branch, errors, cursor position, connection. */
+export function NmStatusBar({ className, ...props }: ComponentProps<'footer'>) {
+  return <footer data-slot="status-bar" className={nmClass('nm-status-bar', className)} {...props} />;
+}
+
+/** One item. Give it `onClick` and it becomes a button. */
+export function NmStatusBarItem({ className, onClick, children, ...props }: Omit<ComponentProps<'span'>, 'onClick'> & { onClick?: () => void }) {
+  const classes = nmClass('nm-status-bar__item', className);
+  if (onClick) {
+    return (
+      <button type="button" data-slot="status-bar-item" className={classes} onClick={onClick}>
+        {children}
+      </button>
+    );
+  }
+  return (
+    <span data-slot="status-bar-item" className={classes} {...props}>
+      {children}
+    </span>
+  );
+}
+
+export function NmStatusBarSpacer({ className, ...props }: ComponentProps<'span'>) {
+  return <span aria-hidden="true" data-slot="status-bar-spacer" className={nmClass('nm-status-bar__spacer', className)} {...props} />;
+}

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

@@ -0,0 +1,45 @@
+  .nm-switch {
+    --nm-switch-thumb: var(--nm-icon-button);
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    box-sizing: content-box;
+    width: calc(var(--nm-switch-thumb) * 2);
+    height: var(--nm-switch-thumb);
+    padding: var(--nm-space-2);
+    border: 0;
+    border-radius: var(--toggle-r);
+    background: var(--nm-panel);
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .nm-switch:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-switch[data-checked] {
+    background: var(--nm-fg);
+  }
+
+  .nm-switch[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .nm-switch__thumb {
+    display: block;
+    width: var(--nm-switch-thumb);
+    height: var(--nm-switch-thumb);
+    border-radius: 50%;
+    background: var(--nm-fg);
+    transition:
+      transform 0.15s,
+      background 0.15s;
+  }
+
+  .nm-switch[data-checked] .nm-switch__thumb {
+    transform: translateX(var(--nm-switch-thumb));
+    background: var(--nm-canvas);
+  }

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

@@ -0,0 +1,10 @@
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export function NmSwitch({ className, ...props }: SwitchPrimitive.Root.Props) {
+  return (
+    <SwitchPrimitive.Root data-slot="switch" className={nmClass('nm-switch', className as string)} {...props}>
+      <SwitchPrimitive.Thumb data-slot="switch-thumb" className="nm-switch__thumb" />
+    </SwitchPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,155 @@
+  .nm-table__container {
+    position: relative;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  .nm-table__container[data-sticky] {
+    overflow-y: auto;
+  }
+
+  .nm-table {
+    --nm-table-pad-y: var(--nm-space-12);
+    --nm-table-pad-x: var(--nm-space-12);
+    width: 100%;
+    border-collapse: collapse;
+    caption-side: bottom;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    line-height: var(--nm-leading-snug);
+  }
+
+  .nm-table[data-size='sm'] {
+    --nm-table-pad-y: var(--nm-space-6);
+    --nm-table-pad-x: var(--nm-space-8);
+  }
+
+  .nm-table__header,
+  .nm-table__body {
+    font: inherit;
+  }
+
+  .nm-table__head {
+    padding: var(--nm-table-pad-y) var(--nm-table-pad-x);
+    border-bottom: var(--nm-rule) solid var(--nm-line-strong);
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-medium);
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  .nm-table__container[data-sticky] .nm-table__head {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--nm-canvas);
+  }
+
+  .nm-table__cell {
+    padding: var(--nm-table-pad-y) var(--nm-table-pad-x);
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  .nm-table__cell[data-wrap] {
+    vertical-align: top;
+    white-space: normal;
+  }
+
+  .nm-table__head[data-align='center'],
+  .nm-table__cell[data-align='center'] {
+    text-align: center;
+  }
+
+  .nm-table__head[data-align='end'],
+  .nm-table__cell[data-align='end'] {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nm-table__row {
+    transition: background 0.12s;
+  }
+
+  .nm-table[data-variant='default'] .nm-table__body .nm-table__row:not(:last-child),
+  .nm-table[data-variant='striped'] .nm-table__body .nm-table__row:not(:last-child) {
+    border-bottom: var(--nm-rule) solid var(--nm-line);
+  }
+
+  .nm-table[data-variant='striped'] .nm-table__body .nm-table__row:nth-child(even) {
+    background: var(--nm-raised);
+  }
+
+  .nm-table[data-variant='lined'] .nm-table__head,
+  .nm-table[data-variant='lined'] .nm-table__cell {
+    border: var(--nm-rule) solid var(--nm-line);
+  }
+
+  .nm-table[data-variant='plain'] .nm-table__head {
+    border-bottom-color: transparent;
+  }
+
+  .nm-table__row:hover:not([data-disabled]) {
+    background: var(--nm-inset);
+  }
+
+  .nm-table__row[data-interactive]:not([data-disabled]) {
+    cursor: pointer;
+  }
+
+  .nm-table__row[data-selected] {
+    background: var(--nm-panel);
+  }
+
+  .nm-table__row[data-disabled] {
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-table__row[data-disabled] .nm-table__cell {
+    opacity: 0.6;
+  }
+
+  .nm-table__footer {
+    border-top: var(--nm-rule) solid var(--nm-line-strong);
+    background: var(--nm-raised);
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-table__caption {
+    margin-top: var(--nm-space-12);
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-table__sort {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-4);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .nm-table__sort:hover,
+  .nm-table__sort:focus-visible {
+    color: var(--nm-fg);
+    outline: none;
+  }
+
+  /* The chevron points down. Ascending turns it up. An unsorted column shows it faint. */
+  .nm-table__sort-icon[data-sort='none'] {
+    opacity: 0.4;
+  }
+
+  .nm-table__sort-icon[data-sort='asc'] {
+    transform: rotate(180deg);
+  }
+
+  .nm-table__sort-icon[data-sort='desc'] {
+    transform: none;
+  }

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

@@ -0,0 +1,95 @@
+import type { ComponentProps } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+export const NM_TABLE_VARIANTS = ['default', 'striped', 'lined', 'plain'] as const;
+export const NM_TABLE_SIZES = ['default', 'sm'] as const;
+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 function NmTable({ className, variant = 'default', size = 'default', stickyHeader, maxHeight, ...props }: ComponentProps<'table'> & TableOptions) {
+  return (
+    <div
+      data-slot="table-container"
+      data-sticky={stickyHeader ? '' : undefined}
+      className="nm-table__container"
+      style={maxHeight ? { maxHeight } : undefined}
+    >
+      <table data-slot="table" data-variant={variant} data-size={size} className={nmClass('nm-table', className)} {...props} />
+    </div>
+  );
+}
+
+export function NmTableHeader({ className, ...props }: ComponentProps<'thead'>) {
+  return <thead data-slot="table-header" className={nmClass('nm-table__header', className)} {...props} />;
+}
+
+export function NmTableBody({ className, ...props }: ComponentProps<'tbody'>) {
+  return <tbody data-slot="table-body" className={nmClass('nm-table__body', className)} {...props} />;
+}
+
+export function NmTableFooter({ className, ...props }: ComponentProps<'tfoot'>) {
+  return <tfoot data-slot="table-footer" className={nmClass('nm-table__footer', className)} {...props} />;
+}
+
+/** A row. `selected` marks it chosen. `disabled` dims it and stops its hover. Give it `onClick` to make the whole row a target. */
+export function NmTableRow({ className, selected, disabled, ...props }: ComponentProps<'tr'> & { selected?: boolean; disabled?: boolean }) {
+  return (
+    <tr
+      data-slot="table-row"
+      data-selected={selected ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
+      data-interactive={props.onClick != null ? '' : undefined}
+      aria-selected={selected ? true : undefined}
+      aria-disabled={disabled ? true : undefined}
+      className={nmClass('nm-table__row', className)}
+      {...props}
+    />
+  );
+}
+
+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 function NmTableHead({
+  className,
+  textAlign = 'start',
+  sort,
+  onSort,
+  children,
+  ...props
+}: Omit<ComponentProps<'th'>, 'align'> & { textAlign?: 'start' | 'center' | 'end'; sort?: NmSortDirection; onSort?: () => void }) {
+  const ariaSort = sort === 'asc' ? 'ascending' : sort === 'desc' ? 'descending' : sort === 'none' ? 'none' : undefined;
+  return (
+    <th data-slot="table-head" data-align={textAlign} aria-sort={ariaSort} className={nmClass('nm-table__head', className)} scope="col" {...props}>
+      {onSort ? (
+        <button type="button" className="nm-table__sort" onClick={onSort}>
+          {children}
+          <NmIcon id="chevron" className="nm-table__sort-icon" data-sort={sort ?? 'none'} />
+        </button>
+      ) : (
+        children
+      )}
+    </th>
+  );
+}
+
+/** Cells stay on one line. Give `wrap` to a cell that holds a sentence, and it wraps and aligns to the top. */
+export function NmTableCell({ className, textAlign = 'start', wrap, ...props }: Omit<ComponentProps<'td'>, 'align'> & { textAlign?: 'start' | 'center' | 'end'; wrap?: boolean }) {
+  return <td data-slot="table-cell" data-align={textAlign} data-wrap={wrap ? '' : undefined} className={nmClass('nm-table__cell', className)} {...props} />;
+}
+
+export function NmTableCaption({ className, ...props }: ComponentProps<'caption'>) {
+  return <caption data-slot="table-caption" className={nmClass('nm-table__caption', className)} {...props} />;
+}

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

@@ -0,0 +1,28 @@
+.nm-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--nm-space-4);
+  border-bottom: var(--nm-rule) solid var(--nm-line);
+}
+
+.nm-tabs__item {
+  margin-bottom: calc(var(--nm-rule) * -1);
+  padding: var(--tab-py) var(--tab-px);
+  border: 0;
+  border-bottom: var(--tab-rule) solid transparent;
+  background: transparent;
+  color: var(--nm-fg-subtle);
+  font-family: var(--nm-font);
+  font-size: var(--control-fs);
+  font-weight: var(--nm-weight-regular);
+  cursor: pointer;
+}
+
+.nm-tabs__item:hover {
+  color: var(--nm-fg);
+}
+
+.nm-tabs__item[aria-selected='true'] {
+  border-bottom-color: var(--nm-fg);
+  color: var(--nm-fg);
+}