@nordmanai/nif 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,353 @@
+  .nm-collection {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: 100%;
+    background: var(--nm-canvas);
+  }
+
+  .nm-collection__cluster {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-collection__title,
+  .nm-collection__filter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--nm-icon-pad);
+    border: 0;
+    border-radius: var(--nm-control-radius);
+    background: transparent;
+    color: var(--nm-fg);
+  }
+
+  .nm-collection__title:hover {
+    background: var(--nm-raised);
+  }
+
+  .nm-collection__filter {
+    cursor: pointer;
+  }
+
+  .nm-collection__filter[data-active='true'] {
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+  }
+
+  .nm-collection__title img,
+  .nm-collection__title .nm-icon,
+  .nm-collection__filter img {
+    display: block;
+    flex-shrink: 0;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-collection__search {
+    width: var(--nm-collection-search);
+  }
+
+  .nm-dropdown__trigger--icon.nm-collection__kind-filter {
+    border-radius: var(--nm-control-radius);
+    color: var(--nm-fg);
+  }
+
+  .nm-dropdown__trigger--icon.nm-collection__kind-filter .nm-icon {
+    color: var(--nm-fg);
+  }
+
+  .nm-collection__body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding-inline: var(--nm-space-24);
+    padding-bottom: var(--nm-space-24);
+  }
+
+  .nm-collection__table {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nm-collection__row,
+  .nm-collection__tile {
+    display: flex;
+    width: 100%;
+    padding: var(--nm-space-8);
+    border: 0;
+    border-radius: var(--nm-radius-sm);
+    background: transparent;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .nm-collection__row {
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-8);
+    padding: var(--table-cell-py) var(--table-gap);
+    border-bottom: var(--nm-rule) solid var(--nm-line);
+    border-radius: 0;
+    color: var(--nm-fg-subtle);
+    font-size: var(--table-fs);
+  }
+
+  .nm-collection__row:hover,
+  .nm-collection__row:focus-within {
+    background: var(--nm-raised);
+  }
+
+  .nm-collection__head,
+  .nm-collection__head:hover,
+  .nm-collection__head:focus-within {
+    padding-block: var(--table-head-py);
+    border-bottom-color: var(--nm-line-strong);
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    font-size: var(--table-head-fs);
+    cursor: default;
+  }
+
+  .nm-collection__row[data-columns='true'] {
+    color: var(--nm-fg);
+  }
+
+  .nm-collection__facts {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--nm-space-40);
+  }
+
+  .nm-collection__cell {
+    width: 6.25rem;
+    overflow: hidden;
+    font-size: inherit;
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-leading-snug);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nm-collection__head .nm-collection__name,
+  .nm-collection__row[data-columns='true'] .nm-collection__name {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-type-ui);
+  }
+
+  .nm-collection__row[data-columns='true'] .nm-collection__row-hit {
+    align-items: center;
+    padding: 0;
+  }
+
+  .nm-collection__row[data-columns='true']:not(.nm-collection__head) .nm-collection__menu {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .nm-collection__row[data-columns='true']:hover .nm-collection__menu,
+  .nm-collection__row[data-columns='true']:focus-within .nm-collection__menu {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .nm-collection__row[data-columns='true']:hover .nm-icon-button--quiet,
+  .nm-collection__row[data-columns='true']:focus-within .nm-icon-button--quiet {
+    background: transparent;
+    color: var(--nm-fg);
+  }
+
+  .nm-collection__row-hit,
+  .nm-collection__hit {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .nm-collection__row-hit {
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--nm-space-16);
+    padding: var(--nm-space-8);
+  }
+
+  .nm-collection__hit {
+    height: 100%;
+    padding: 0;
+  }
+
+  .nm-collection__menu {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding-inline-end: var(--nm-space-8);
+  }
+
+  .nm-collection__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--nm-collection-tile), 1fr));
+    gap: var(--nm-space-12);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nm-collection__tile {
+    position: relative;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    aspect-ratio: 1;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-raised);
+  }
+
+  .nm-collection__actions {
+    position: absolute;
+    top: var(--nm-space-8);
+    inset-inline-end: var(--nm-space-8);
+    z-index: 1;
+    display: flex;
+    gap: var(--nm-space-4);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .nm-collection__tile:hover .nm-collection__actions,
+  .nm-collection__tile:focus-within .nm-collection__actions {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .nm-collection__tile[data-media] {
+    padding: 0;
+  }
+
+  .nm-collection__tile[data-media='audio'] {
+    padding: var(--nm-space-8);
+  }
+
+  .nm-collection__media {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .nm-collection__stage {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--nm-canvas);
+  }
+
+  .nm-collection__stage-bar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-12);
+    border-bottom: var(--nm-rule) solid var(--nm-panel);
+    border-left: var(--nm-rule) solid var(--nm-panel);
+    background: var(--nm-canvas);
+  }
+
+  .nm-collection__preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    width: 100%;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--nm-canvas);
+  }
+
+  .nm-collection__preview .nm-collection__media {
+    object-fit: contain;
+  }
+
+  .nm-collection__preview:has(.nm-collection__document) {
+    align-items: stretch;
+    justify-content: flex-start;
+    overflow: auto;
+  }
+
+  .nm-collection__document {
+    margin: 0;
+    padding: var(--nm-space-24);
+    white-space: pre-wrap;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    line-height: var(--nm-leading-normal);
+  }
+
+  .nm-collection__audio {
+    width: 100%;
+  }
+
+  .nm-collection__name {
+    overflow: hidden;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-semibold);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nm-collection__meta {
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-collection__body,
+  .nm-collection__preview {
+    scrollbar-width: none;
+  }
+
+  .nm-collection__body[data-scrolling='true'],
+  .nm-collection__preview[data-scrolling='true'] {
+    scrollbar-width: thin;
+    scrollbar-color: var(--nm-stroke) transparent;
+  }
+
+  .nm-collection__body::-webkit-scrollbar,
+  .nm-collection__preview::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .nm-collection__body[data-scrolling='true']::-webkit-scrollbar,
+  .nm-collection__preview[data-scrolling='true']::-webkit-scrollbar {
+    width: var(--nm-rail-scrollbar);
+    height: var(--nm-rail-scrollbar);
+  }
+
+  .nm-collection__body[data-scrolling='true']::-webkit-scrollbar-thumb,
+  .nm-collection__preview[data-scrolling='true']::-webkit-scrollbar-thumb {
+    background: var(--nm-stroke);
+    border-radius: var(--nm-radius-sm);
+  }
+

package/registry/ui/components/nm-collection/use-collection-scroll-reveal.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import type { RefObject } from 'react';
+import { NM_COLLECTION_SCROLL_IDLE_MS } from '../../config/nm-collection.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-collection-scroll');
+
+/** Shows the collection scroll thumb only while the region is moving. */
+export default function useCollectionScrollReveal(
+  scrollableRef: RefObject<HTMLElement | null>,
+): void {
+  useEffect(() => {
+    const node = scrollableRef.current;
+    if (node == null) {
+      return;
+    }
+
+    let idle = 0;
+    const onScroll = () => {
+      if (node.dataset.scrolling !== 'true') {
+        logger.debug('scroll', 'start', {});
+      }
+      node.dataset.scrolling = 'true';
+      window.clearTimeout(idle);
+      idle = window.setTimeout(() => {
+        delete node.dataset.scrolling;
+        logger.debug('scroll', 'idle', {});
+      }, NM_COLLECTION_SCROLL_IDLE_MS);
+    };
+
+    node.addEventListener('scroll', onScroll);
+    return () => {
+      node.removeEventListener('scroll', onScroll);
+      window.clearTimeout(idle);
+      delete node.dataset.scrolling;
+    };
+  }, [scrollableRef]);
+}

package/registry/ui/components/nm-color-picker/nm-color-picker.css

@@ -0,0 +1,67 @@
+  .nm-color {
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    width: var(--nm-width-popup-sm);
+  }
+
+  .nm-color__swatch {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-radius-sm);
+    background: var(--nm-swatch);
+  }
+
+  .nm-color__swatch[data-shape='round'] {
+    border-radius: 50%;
+  }
+
+  .nm-color__swatches {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-color__swatch--button {
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .nm-color__swatch--button[aria-pressed='true'] {
+    border-color: var(--nm-fg);
+  }
+
+  .nm-color__swatch--button:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  /* react-colorful draws the area and the sliders. NIF sets their size, radius and pointer. */
+  .nm-color .react-colorful {
+    gap: var(--nm-space-12);
+    width: 100%;
+    height: auto;
+  }
+
+  .nm-color .react-colorful__saturation {
+    height: var(--nm-height-color);
+    border-radius: var(--nm-control-r);
+    border-bottom: 0;
+  }
+
+  .nm-color .react-colorful__hue {
+    height: var(--nm-space-12);
+    border-radius: var(--toggle-r);
+  }
+
+  .nm-color .react-colorful__interactive:focus .react-colorful__pointer {
+    border-color: var(--focus);
+  }
+
+  .nm-color .react-colorful__pointer {
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    border: var(--nm-space-2) solid var(--nm-fg);
+  }

package/registry/ui/components/nm-color-picker/nm-color-picker.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useId, useState, type CSSProperties } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { NmInput } from '../nm-input/nm-input.tsx';
+import { NmPopover, NmPopoverContent, NmPopoverTrigger } from '../nm-popover/nm-popover.tsx';
+
+/** One colour as a swatch. The colour picker and the theme list both draw it. */
+export function NmColorSwatch({ color, shape = 'square' }: { color: string; shape?: 'square' | 'round' }) {
+  return <span className="nm-color__swatch" data-shape={shape} style={{ '--nm-swatch': color } as CSSProperties} />;
+}
+
+const HEX = /^#[0-9a-fA-F]{6}$/;
+
+/** A colour field. The picker opens in a popover, drawn by NIF tokens around react-colorful. */
+export function NmColorPicker({
+  value,
+  onValueChange,
+  swatches,
+  label = 'Colour',
+  caption,
+  disabled,
+}: {
+  value: string;
+  onValueChange: (hex: string) => void;
+  swatches?: readonly string[];
+  label?: string;
+  /** A caption above the field, set like the caption of a Field. */
+  caption?: string;
+  disabled?: boolean;
+}) {
+  const [text, setText] = useState(value);
+  useEffect(() => setText(value), [value]);
+  const id = useId();
+  const field = (
+    <NmPopover>
+      <NmPopoverTrigger id={id} className="nm-picker__trigger" disabled={disabled} aria-label={label}>
+        <NmColorSwatch color={value} />
+        <span>{value.toUpperCase()}</span>
+      </NmPopoverTrigger>
+      <NmPopoverContent className="nm-picker__popup nm-color" align="start">
+        <HexColorPicker color={value} onChange={onValueChange} />
+        <NmInput
+          aria-label={`${label} hex`}
+          value={text}
+          onChange={(event) => {
+            const next = event.target.value;
+            setText(next);
+            if (HEX.test(next)) {
+              onValueChange(next);
+            }
+          }}
+          aria-invalid={HEX.test(text) ? undefined : true}
+        />
+        {swatches ? (
+          <div className="nm-color__swatches">
+            {swatches.map((hex) => (
+              <button
+                key={hex}
+                type="button"
+                className="nm-color__swatch nm-color__swatch--button"
+                style={{ '--nm-swatch': hex } as CSSProperties}
+                aria-label={hex}
+                aria-pressed={hex.toLowerCase() === value.toLowerCase()}
+                onClick={() => onValueChange(hex)}
+              />
+            ))}
+          </div>
+        ) : null}
+      </NmPopoverContent>
+    </NmPopover>
+  );
+  return caption ? (
+    <div className="nm-field nm-field--stack">
+      <label className="nm-field__caption" htmlFor={id}>{caption}</label>
+      {field}
+    </div>
+  ) : (
+    field
+  );
+}

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

@@ -0,0 +1,72 @@
+  .nm-combobox__group {
+    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-family: var(--nm-font);
+    font-size: var(--control-fs);
+  }
+
+  .nm-combobox__group[data-bare] {
+    height: auto;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .nm-combobox__group:not([data-bare]):focus-within {
+    border-color: var(--nm-stroke);
+  }
+
+  .nm-combobox__input {
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+
+  .nm-combobox__input::placeholder {
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-combobox__button {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    cursor: pointer;
+  }
+
+  .nm-combobox__button:hover {
+    color: var(--nm-fg);
+  }
+
+  .nm-combobox__button:focus-visible {
+    outline: var(--nm-rule) solid var(--focus);
+    outline-offset: var(--nm-space-2);
+  }
+
+  .nm-combobox__empty {
+    padding: var(--nm-space-8) var(--nm-icon-pad);
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-combobox__empty:empty {
+    display: none;
+  }

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

@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+/**
+ * Base UI Combobox, in the shadcn composition, styled by NIF tokens. A select you can search: type to filter the
+ * list, then choose. The list is the same surface as the Dropdown Menu and the Select.
+ */
+export function NmCombobox<Value = string>(props: ComboboxPrimitive.Root.Props<Value>) {
+  return <ComboboxPrimitive.Root data-slot="combobox" {...props} />;
+}
+
+/** The field you type in, with the button that opens the list. `bare` drops its own box, for use inside a Field. */
+export function NmComboboxInput({
+  className,
+  bare,
+  showClear,
+  ...props
+}: ComboboxPrimitive.Input.Props & { bare?: boolean; showClear?: boolean }) {
+  return (
+    <ComboboxPrimitive.InputGroup data-slot="combobox-input-group" data-bare={bare ? '' : undefined} className="nm-combobox__group">
+      <ComboboxPrimitive.Input data-slot="combobox-input" className={nmClass('nm-combobox__input', className as string)} {...props} />
+      {showClear ? (
+        <ComboboxPrimitive.Clear data-slot="combobox-clear" className="nm-combobox__button" aria-label="Clear">
+          <NmIcon id="x" />
+        </ComboboxPrimitive.Clear>
+      ) : null}
+      <ComboboxPrimitive.Trigger data-slot="combobox-trigger" className="nm-combobox__button" aria-label="Open the list">
+        <NmIcon id="chevron" />
+      </ComboboxPrimitive.Trigger>
+    </ComboboxPrimitive.InputGroup>
+  );
+}
+
+/** `anchor` is the element the list lines up with. It defaults to the input. */
+export function NmComboboxContent({ className, children, anchor, ...props }: ComboboxPrimitive.Popup.Props & { anchor?: HTMLElement | null }) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner className="nm-menu__positioner" sideOffset={4} anchor={anchor ?? undefined}>
+        <ComboboxPrimitive.Popup data-slot="combobox-content" className={nmClass('nm-menu nm-select__popup', className as string)} {...props}>
+          {children}
+        </ComboboxPrimitive.Popup>
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+/** The items. Give it a function of one item, and it draws the filtered list. */
+export function NmComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return <ComboboxPrimitive.List data-slot="combobox-list" className={nmClass('nm-select__list', className as string)} {...props} />;
+}
+
+export function NmComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props & { children: ReactNode }) {
+  return (
+    <ComboboxPrimitive.Item data-slot="combobox-item" className={nmClass('nm-menu__item nm-select__item', className as string)} {...props}>
+      <span className="nm-select__text">{children}</span>
+      <ComboboxPrimitive.ItemIndicator className="nm-select__check">
+        <NmIcon id="check" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+/** What the list says when nothing matches. */
+export function NmComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return <ComboboxPrimitive.Empty data-slot="combobox-empty" className={nmClass('nm-combobox__empty', className as string)} {...props} />;
+}
+
+export function NmComboboxGroup(props: ComboboxPrimitive.Group.Props) {
+  return <ComboboxPrimitive.Group data-slot="combobox-group" {...props} />;
+}
+
+export function NmComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
+  return <ComboboxPrimitive.GroupLabel data-slot="combobox-label" className={nmClass('nm-menu__label', className as string)} {...props} />;
+}
+
+export function NmComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {
+  return <ComboboxPrimitive.Separator data-slot="combobox-separator" className={nmClass('nm-menu__separator', className as string)} {...props} />;
+}