@nordmanai/nif 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,101 @@
+import type { FormEvent, ReactNode } from 'react';
+import { NM_ICON_BUTTON_CLASSES, NM_ICON_BUTTON_TONES } from '../../config/nm-icon-button.ts';
+import { NM_CHATBOX_CLASSES } from '../../config/nm-chatbox.ts';
+import { NmChatboxIcon } from './nm-chatbox-icon.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-chatbox');
+
+export type NmChatboxProps = {
+  placeholder: string;
+  placeholderEmphasis?: string;
+  value: string;
+  sendLabel: string;
+  attachLabel: string;
+  micLabel: string;
+  fieldId?: string;
+  micPressed?: boolean;
+  disabled?: boolean;
+  testId?: string;
+  tools?: ReactNode;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  onAttach?: () => void;
+  onMic?: () => void;
+};
+
+export function NmChatbox(props: NmChatboxProps): ReactNode {
+  logger.debug('render', 'composer', { length: props.value.length });
+
+  function onSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    if (props.disabled || props.value.trim() === '') {
+      return;
+    }
+    props.onSend();
+  }
+
+  return (
+    <form className={NM_CHATBOX_CLASSES.root} data-testid={props.testId} onSubmit={onSubmit}>
+      <div className={NM_CHATBOX_CLASSES.prompt}>
+        <div
+          className={NM_CHATBOX_CLASSES.placeholder}
+          data-hidden={props.value.trim() === '' ? 'false' : 'true'}
+        >
+          {props.placeholder}
+          {props.placeholderEmphasis ? (
+            <>
+              {' '}
+              <span className="nm-chatbox__placeholder-emphasis">{props.placeholderEmphasis}</span>
+            </>
+          ) : null}
+        </div>
+        <textarea
+          className={NM_CHATBOX_CLASSES.field}
+          id={props.fieldId}
+          value={props.value}
+          placeholder={props.placeholder}
+          rows={1}
+          disabled={props.disabled}
+          onChange={(event) => props.onChange(event.target.value)}
+        />
+      </div>
+      <div className={NM_CHATBOX_CLASSES.row}>
+        <div className={NM_CHATBOX_CLASSES.tools}>
+          {props.onAttach ? (
+            <button
+              className={`${NM_ICON_BUTTON_CLASSES.root} nm-chatbox__tool`}
+              type="button"
+              aria-label={props.attachLabel}
+              onClick={props.onAttach}
+            >
+              <NmChatboxIcon id="paperclip" />
+            </button>
+          ) : null}
+          {props.tools}
+        </div>
+        <div className={NM_CHATBOX_CLASSES.actions}>
+          {props.onMic ? (
+            <button
+              className={`${NM_ICON_BUTTON_CLASSES.root} nm-chatbox__tool`}
+              type="button"
+              aria-label={props.micLabel}
+              aria-pressed={props.micPressed}
+              onClick={props.onMic}
+            >
+              <NmChatboxIcon id="mic" />
+            </button>
+          ) : null}
+          <button
+            className={`${NM_ICON_BUTTON_CLASSES.root} ${NM_ICON_BUTTON_CLASSES[NM_ICON_BUTTON_TONES.invert]} nm-chatbox__send`}
+            type="submit"
+            aria-label={props.sendLabel}
+            disabled={props.disabled || props.value.trim() === ''}
+          >
+            <NmChatboxIcon id="send" />
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,61 @@
+  .nm-checkbox {
+    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: var(--nm-radius-sm);
+    background: transparent;
+    color: var(--nm-canvas);
+    cursor: pointer;
+    transition:
+      background 0.15s,
+      border-color 0.15s;
+  }
+
+  .nm-checkbox:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-checkbox[data-checked],
+  .nm-checkbox[data-indeterminate] {
+    border-color: var(--nm-fg);
+    background: var(--nm-fg);
+  }
+
+  .nm-checkbox[data-invalid] {
+    border-color: var(--nm-destructive);
+  }
+
+  .nm-checkbox[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .nm-checkbox__indicator {
+    display: grid;
+    place-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .nm-checkbox__indicator .nm-icon {
+    width: 80%;
+    height: 80%;
+  }
+
+  /* One mark at a time: a tick when checked, a dash when only some are. */
+  .nm-checkbox__minus,
+  .nm-checkbox[data-indeterminate] .nm-checkbox__check {
+    display: none;
+  }
+
+  .nm-checkbox[data-indeterminate] .nm-checkbox__minus {
+    display: block;
+  }

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

@@ -0,0 +1,14 @@
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+export function NmCheckbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root data-slot="checkbox" className={nmClass('nm-checkbox', className as string)} {...props}>
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="nm-checkbox__indicator">
+        <NmIcon id="check" className="nm-checkbox__check" />
+        <NmIcon id="minus" className="nm-checkbox__minus" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,112 @@
+  .nm-chip {
+    --nm-chip-h: var(--control-h-sm);
+    --nm-chip-fs: var(--nm-type-ui-sm);
+    box-sizing: border-box;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-4);
+    height: var(--nm-chip-h);
+    padding: 0 var(--nm-space-8);
+    border: var(--nm-rule) solid transparent;
+    border-radius: var(--badge-r);
+    background: var(--nm-panel);
+    color: var(--nm-fg-muted);
+    font: inherit;
+    font-size: var(--nm-chip-fs);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-leading-none);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .nm-chip[data-size='sm'] {
+    --nm-chip-h: var(--badge-h);
+    --nm-chip-fs: var(--badge-fs);
+    padding: 0 var(--badge-px);
+  }
+
+  /* Icons read these two tokens, so the chip scales them to its own type. */
+  .nm-chip {
+    --nm-icon: var(--nm-chip-fs);
+    --nm-icon-button: var(--nm-chip-fs);
+  }
+
+  .nm-chip svg {
+    flex-shrink: 0;
+  }
+
+  .nm-chip[data-tone='outline'] {
+    border-color: var(--nm-line-strong);
+    background: transparent;
+    color: var(--nm-fg);
+  }
+
+  .nm-chip[data-tone='filled'] {
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+  }
+
+  .nm-chip[data-tone='ok'] {
+    color: var(--ok);
+  }
+
+  .nm-chip[data-tone='warn'] {
+    color: var(--nm-fg);
+  }
+
+  .nm-chip[data-tone='error'] {
+    color: var(--nm-destructive);
+  }
+
+  button.nm-chip,
+  a.nm-chip {
+    cursor: pointer;
+  }
+
+  button.nm-chip:hover:not(:disabled),
+  a.nm-chip:hover:not([aria-disabled]) {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+
+  .nm-chip[data-tone='filled']:is(button, a):hover:not(:disabled):not([aria-disabled]) {
+    background: var(--nm-fg-muted);
+    color: var(--nm-canvas);
+  }
+
+  .nm-chip[data-selected] {
+    border-color: var(--nm-fg);
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+
+  .nm-chip:is(button, a):focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-chip[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .nm-chip__remove {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--badge-r);
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    cursor: pointer;
+  }
+
+  .nm-chip__remove:hover:not(:disabled) {
+    color: var(--nm-fg);
+  }
+
+  .nm-chip__remove:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+  }

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

@@ -0,0 +1,86 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+export const NM_CHIP_TONES = ['neutral', 'outline', 'filled', 'ok', 'warn', 'error'] as const;
+export const NM_CHIP_SIZES = ['default', 'sm'] as const;
+export type NmChipTone = (typeof NM_CHIP_TONES)[number];
+export type NmChipSize = (typeof NM_CHIP_SIZES)[number];
+
+type NmChipBase = {
+  tone?: NmChipTone;
+  size?: NmChipSize;
+  icon?: NmIconId;
+  /** A chip that stands for a chosen filter or option. */
+  selected?: boolean;
+  disabled?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+export type NmChipProps = NmChipBase &
+  (
+    | { onClick?: undefined; href?: undefined; onRemove?: () => void; removeLabel?: string }
+    | { onClick: () => void; href?: undefined; onRemove?: undefined; removeLabel?: undefined }
+    | { href: string; onClick?: undefined; onRemove?: undefined; removeLabel?: undefined }
+  ) &
+  Omit<ComponentProps<'span'>, 'children' | 'className' | 'onClick'>;
+
+/**
+ * A small label for a status, a filter, an attachment or a tag. Static by default. Give it `onClick` and it
+ * becomes a button, `href` and it becomes a link, `onRemove` and it gains a remove button.
+ */
+export function NmChip({
+  tone = 'neutral',
+  size = 'default',
+  icon,
+  selected,
+  disabled,
+  children,
+  className,
+  onClick,
+  href,
+  onRemove,
+  removeLabel = 'Remove',
+  ...rest
+}: NmChipProps) {
+  const classes = nmClass('nm-chip', className);
+  const state = {
+    'data-slot': 'chip',
+    'data-tone': tone,
+    'data-size': size,
+    'data-selected': selected ? '' : undefined,
+    'data-disabled': disabled ? '' : undefined,
+  } as const;
+  const body = (
+    <>
+      {icon ? <NmIcon id={icon} /> : null}
+      {children}
+    </>
+  );
+  if (href != null) {
+    return (
+      <a className={classes} {...(rest as ComponentProps<'a'>)} {...state} href={disabled ? undefined : href} aria-disabled={disabled || undefined}>
+        {body}
+      </a>
+    );
+  }
+  if (onClick) {
+    return (
+      <button className={classes} {...(rest as ComponentProps<'button'>)} {...state} type="button" disabled={disabled} aria-pressed={rest.role ? undefined : (selected ?? undefined)} onClick={onClick}>
+        {body}
+      </button>
+    );
+  }
+  return (
+    <span {...rest} {...state} className={classes}>
+      {body}
+      {onRemove ? (
+        <button type="button" className="nm-chip__remove" aria-label={removeLabel} disabled={disabled} onClick={onRemove}>
+          <NmIcon id="x" />
+        </button>
+      ) : null}
+    </span>
+  );
+}

package/registry/ui/components/nm-code-block/nm-code-block.css

@@ -0,0 +1,240 @@
+  .nm-code-block {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-inset);
+    color: var(--nm-fg);
+    font-size: var(--nm-type-ui);
+    /* shiki's css-variables theme reads these. They come from the NIF syntax tokens. */
+    --shiki-foreground: var(--nm-fg);
+    --shiki-background: transparent;
+    --shiki-token-keyword: var(--nm-syntax-keyword);
+    --shiki-token-string: var(--nm-syntax-string);
+    --shiki-token-string-expression: var(--nm-syntax-string);
+    --shiki-token-function: var(--nm-syntax-function);
+    --shiki-token-constant: var(--nm-syntax-constant);
+    --shiki-token-comment: var(--nm-syntax-comment);
+    --shiki-token-parameter: var(--nm-fg);
+    --shiki-token-punctuation: var(--nm-fg);
+    --shiki-token-link: var(--nm-syntax-string);
+  }
+
+  .nm-code-block[data-size='sm'] {
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-code-block[data-variant='destructive'] {
+    border-color: var(--nm-destructive);
+    color: var(--nm-destructive);
+  }
+
+  .nm-code-block:has(.nm-code-block__content:focus-visible) {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-code-block__header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-8);
+    min-width: 0;
+    padding: var(--nm-space-12) var(--nm-space-16) 0;
+    color: var(--nm-fg-muted);
+  }
+
+  .nm-code-block__title {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nm-code-block__actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-4);
+    margin-left: auto;
+  }
+
+  /* Placed straight in the block, the actions float over the top right corner. */
+  .nm-code-block > .nm-code-block__actions {
+    position: absolute;
+    z-index: 1;
+    top: var(--nm-space-8);
+    right: var(--nm-space-8);
+    margin: 0;
+  }
+
+  .nm-code-block[data-collapsed] > .nm-code-block__actions {
+    display: none;
+  }
+
+  .nm-code-block__content {
+    min-width: 0;
+    min-height: 0;
+    margin: 0;
+    padding: var(--nm-space-16);
+    overflow: auto;
+    font-family: var(--nm-font-mono);
+    line-height: var(--nm-leading-relaxed);
+    text-align: start;
+    outline: none;
+    scrollbar-width: thin;
+  }
+
+  .nm-code-block[data-size='sm'] .nm-code-block__content {
+    padding: var(--nm-space-12);
+  }
+
+  /* Leave room on the right so a line never runs under the floating actions. */
+  .nm-code-block > .nm-code-block__actions ~ .nm-code-block__content,
+  .nm-code-block > .nm-code-block__content:has(~ .nm-code-block__actions) {
+    padding-right: calc(var(--nm-icon-control) + var(--nm-space-16));
+  }
+
+  .nm-code-block__content[data-wrap] {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .nm-code-block__content[data-collapsed] {
+    max-height: calc(var(--nm-code-collapsed) * 1lh + var(--nm-space-16) * 2);
+    overflow: hidden;
+    opacity: 0.45;
+    -webkit-mask-image: linear-gradient(to bottom, var(--nm-fg) 55%, transparent);
+    mask-image: linear-gradient(to bottom, var(--nm-fg) 55%, transparent);
+  }
+
+  .nm-code-block__code {
+    display: grid;
+    min-width: max-content;
+    min-height: 1lh;
+    align-content: start;
+  }
+
+  .nm-code-block__content[data-wrap] .nm-code-block__code {
+    min-width: 0;
+  }
+
+  .nm-code-block__line {
+    position: relative;
+    display: block;
+    min-height: 1lh;
+    margin: 0 calc(var(--nm-space-16) * -1);
+    padding: 0 var(--nm-space-16);
+  }
+
+  .nm-code-block__content[data-numbered] .nm-code-block__line {
+    counter-increment: line;
+  }
+
+  .nm-code-block__content[data-numbered] .nm-code-block__line::before {
+    content: counter(line);
+    display: inline-block;
+    width: var(--nm-code-gutter);
+    margin-right: var(--nm-space-16);
+    color: var(--nm-fg-subtle);
+    text-align: end;
+    user-select: none;
+  }
+
+  .nm-code-block__line[data-variant='highlighted'],
+  .nm-code-block__line[data-variant='added'] {
+    background: var(--nm-panel);
+  }
+
+  .nm-code-block__line[data-variant='removed'] {
+    background: rgb(var(--nm-destructive-rgb) / 0.12);
+    color: var(--nm-destructive);
+  }
+
+  .nm-code-block__line[data-variant='added']::after,
+  .nm-code-block__line[data-variant='removed']::after {
+    position: absolute;
+    top: 0;
+    left: var(--nm-space-4);
+    color: var(--nm-fg-subtle);
+    user-select: none;
+  }
+
+  .nm-code-block__line[data-variant='added']::after {
+    content: '+';
+  }
+
+  .nm-code-block__line[data-variant='removed']::after {
+    content: '−';
+    color: var(--nm-destructive);
+  }
+
+  .nm-code-block__toggle {
+    position: absolute;
+    bottom: var(--nm-space-16);
+    left: 50%;
+    z-index: 1;
+    transform: translateX(-50%);
+  }
+
+  /* Once open, the button sits below the code. */
+  .nm-code-block:not([data-collapsed]) > .nm-code-block__toggle {
+    position: static;
+    display: flex;
+    justify-content: center;
+    padding: 0 0 var(--nm-space-16);
+    transform: none;
+  }
+
+  .nm-code-block__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-8) var(--nm-space-16) var(--nm-space-12);
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-code-block__token[data-token='keyword'] {
+    color: var(--nm-syntax-keyword);
+  }
+
+  .nm-code-block__token[data-token='string'] {
+    color: var(--nm-syntax-string);
+  }
+
+  .nm-code-block__token[data-token='function'] {
+    color: var(--nm-syntax-function);
+  }
+
+  .nm-code-block__token[data-token='constant'] {
+    color: var(--nm-syntax-constant);
+  }
+
+  .nm-code-block__token[data-token='comment'] {
+    color: var(--nm-syntax-comment);
+  }
+
+  /* The toggle shows when the block is hovered or the button has focus. Touch screens always show it. */
+  .nm-code-block__toggle {
+    opacity: 0;
+    transition: opacity var(--nm-motion-fast, 0.12s);
+  }
+
+  .nm-code-block:hover .nm-code-block__toggle,
+  .nm-code-block__toggle:focus-within {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .nm-code-block__toggle {
+      opacity: 1;
+    }
+  }