@nordmanai/nif 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,196 @@
+import { createContext, useContext, useEffect, useState, type ComponentProps, type ReactNode } from 'react';
+import { nmClass } from '../../lib/nm-class.ts';
+import { NmButton } from '../nm-button/nm-button.tsx';
+import { NordmanIconButton } from '../nordman-icon-button/nordman-icon-button.tsx';
+
+export const NM_CODE_BLOCK_VARIANTS = ['default', 'destructive'] as const;
+export const NM_CODE_BLOCK_SIZES = ['default', 'sm'] as const;
+export type NmCodeBlockVariant = (typeof NM_CODE_BLOCK_VARIANTS)[number];
+export type NmCodeBlockSize = (typeof NM_CODE_BLOCK_SIZES)[number];
+
+const CollapseContext = createContext<(collapsed: boolean) => void>(() => {});
+
+/**
+ * Displays code, terminal output and diffs with an optional header, line numbers and a copy button.
+ * The shadcn Code Block composition, styled by NIF tokens. Colours for syntax come from the --nm-syntax tokens.
+ */
+export function NmCodeBlock({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: ComponentProps<'div'> & { variant?: NmCodeBlockVariant; size?: NmCodeBlockSize }) {
+  const [collapsed, setCollapsed] = useState(false);
+  return (
+    <CollapseContext.Provider value={setCollapsed}>
+      <div
+        data-slot="code-block"
+        data-variant={variant}
+        data-size={size}
+        data-collapsed={collapsed ? '' : undefined}
+        className={nmClass('nm-code-block', className)}
+        {...props}
+      />
+    </CollapseContext.Provider>
+  );
+}
+
+export function NmCodeBlockHeader({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="code-block-header" className={nmClass('nm-code-block__header', className)} {...props} />;
+}
+
+export function NmCodeBlockTitle({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="code-block-title" className={nmClass('nm-code-block__title', className)} {...props} />;
+}
+
+/** Buttons for the header. Placed straight in the block, they float over its top right corner. */
+export function NmCodeBlockActions({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="code-block-actions" className={nmClass('nm-code-block__actions', className)} {...props} />;
+}
+
+/** An icon button that copies `value`. It shows a tick for a moment afterwards. */
+export function NmCodeBlockCopyButton({ value, label = 'Copy code', copiedLabel = 'Copied' }: { value: string; label?: string; copiedLabel?: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <NordmanIconButton
+      label={copied ? copiedLabel : label}
+      glyph={copied ? 'check' : 'copy'}
+      tone="quiet"
+      onClick={() => {
+        void navigator.clipboard?.writeText(value);
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1500);
+      }}
+    />
+  );
+}
+
+/** One line. `variant` marks it as highlighted, added or removed. */
+export function NmCodeBlockLine({
+  className,
+  variant = 'default',
+  children,
+  html,
+  language,
+  ...props
+}: Omit<ComponentProps<'span'>, 'children'> & { variant?: 'default' | 'highlighted' | 'added' | 'removed'; children?: ReactNode; html?: string; language?: NmCodeLanguage }) {
+  const classes = nmClass('nm-code-block__line', className);
+  if (html != null) {
+    return <span data-slot="code-block-line" data-variant={variant} className={classes} dangerouslySetInnerHTML={{ __html: html === '' ? ' ' : html }} {...props} />;
+  }
+  return (
+    <span data-slot="code-block-line" data-variant={variant} className={classes} {...props}>
+      {children === '' || children == null ? ' ' : typeof children === 'string' && language ? tokenize(children, language) : children}
+    </span>
+  );
+}
+
+/** Splits highlighted markup from shiki into one string per line. */
+export function nmHighlightedLines(html: string): string[] {
+  const inner = html.match(/<code[^>]*>([\s\S]*)<\/code>/)?.[1] ?? html;
+  return inner.split('\n').map((line) => line.replace(/^<span class="line">([\s\S]*)<\/span>$/, '$1'));
+}
+
+export const NM_CODE_LANGUAGES = ['tsx', 'ts', 'js', 'json', 'css', 'bash'] as const;
+export type NmCodeLanguage = (typeof NM_CODE_LANGUAGES)[number];
+
+const KEYWORDS = /^(?:import|export|from|default|const|let|var|function|return|if|else|for|while|new|await|async|type|interface|extends|as|of|in|class|true|false|null|undefined|typeof|void|throw|try|catch|npm|npx|install|run|cd)$/;
+
+/** Small tokenizer for the languages the kit shows. Per line, so it never needs a parser. */
+function tokenize(line: string, language: NmCodeLanguage): ReactNode[] {
+  const comment = language === 'bash' ? /#.*$/ : language === 'css' ? /\/\*.*?(?:\*\/|$)/ : /\/\/.*$|\/\*.*?(?:\*\/|$)/;
+  const re = new RegExp(
+    `(${comment.source})|('(?:[^'\\\\]|\\\\.)*'?|"(?:[^"\\\\]|\\\\.)*"?|\`(?:[^\`\\\\]|\\\\.)*\`?)|(</?[A-Za-z][\\w.]*)|(\\b\\d[\\d._]*\\b)|([A-Za-z_$][\\w$-]*)(?=\\()|([A-Za-z_$][\\w$-]*)`,
+    'g',
+  );
+  const out: ReactNode[] = [];
+  let last = 0;
+  let key = 0;
+  const push = (text: string, token?: string) =>
+    out.push(token ? <span key={key++} className="nm-code-block__token" data-token={token}>{text}</span> : text);
+  for (const m of line.matchAll(re)) {
+    if (m.index > last) push(line.slice(last, m.index));
+    const [text, cmt, str, tag, num, fn, word] = m;
+    if (cmt) push(text, 'comment');
+    else if (str) push(text, 'string');
+    else if (tag) {
+      push(tag.startsWith('</') ? '</' : '<');
+      push(tag.replace(/^<\/?/, ''), /^[A-Z]/.test(tag.replace(/^<\/?/, '')) ? 'constant' : 'keyword');
+    } else if (num) push(text, 'constant');
+    else if (fn) push(text, 'function');
+    else if (word && KEYWORDS.test(word)) push(text, 'keyword');
+    else push(text);
+    last = m.index + text.length;
+  }
+  if (last < line.length) push(line.slice(last));
+  return out;
+}
+
+export type NmCodeBlockContentProps = Omit<ComponentProps<'pre'>, 'children'> & {
+  /** A string, or a list of NmCodeBlockLine. */
+  children?: ReactNode;
+  /** Code already highlighted, as shiki writes it. Used in place of children. */
+  html?: string;
+  /** Colour the code in this language. Use `html` instead for a highlighter of your own. */
+  language?: NmCodeLanguage;
+  wrap?: boolean;
+  lineNumbers?: boolean;
+  startLine?: number;
+  /** Show only this many lines, dimmed, with a button to show the rest. */
+  collapsedLines?: number;
+  labels?: { show: string; hide: string };
+};
+
+/** The pre that scrolls or wraps. */
+export function NmCodeBlockContent({
+  className,
+  children,
+  html,
+  language,
+  wrap = false,
+  lineNumbers = false,
+  startLine = 1,
+  collapsedLines,
+  labels = { show: 'View code', hide: 'Hide code' },
+  style,
+  ...props
+}: NmCodeBlockContentProps) {
+  const setCollapsed = useContext(CollapseContext);
+  const [open, setOpen] = useState(false);
+  const lines: ReactNode[] =
+    html != null
+      ? nmHighlightedLines(html).map((line, i) => <NmCodeBlockLine key={i} html={line} />)
+      : typeof children === 'string'
+        ? children.replace(/\n$/, '').split('\n').map((line, i) => <NmCodeBlockLine key={i}>{language ? tokenize(line, language) : line}</NmCodeBlockLine>)
+        : [children];
+  const collapsible = collapsedLines != null && lines.length > collapsedLines;
+  const collapsed = collapsible && !open;
+  useEffect(() => setCollapsed(collapsed), [collapsed, setCollapsed]);
+  return (
+    <>
+      <pre
+        data-slot="code-block-content"
+        data-wrap={wrap || undefined}
+        data-numbered={lineNumbers || undefined}
+        data-collapsed={collapsed || undefined}
+        dir="ltr"
+        tabIndex={0}
+        style={{ counterReset: `line ${startLine - 1}`, ...(collapsedLines != null ? { ['--nm-code-collapsed' as string]: collapsedLines } : null), ...style }}
+        className={nmClass('nm-code-block__content', className)}
+        {...props}
+      >
+        <code data-slot="code-block-code" className="nm-code-block__code">{lines}</code>
+      </pre>
+      {collapsible ? (
+        <span className="nm-code-block__toggle">
+          <NmButton label={open ? labels.hide : labels.show} tone="panel" size="compact" onClick={() => setOpen(!open)} />
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+/** A row under the code, for a note or a button. */
+export function NmCodeBlockFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="code-block-footer" className={nmClass('nm-code-block__footer', className)} {...props} />;
+}

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

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_COLLECTION_CLASSES,
+  NM_COLLECTION_ICON_SRC,
+  NM_COLLECTION_VIEWS,
+  type NmCollectionView,
+} from '../../config/nm-collection.ts';
+import { NmIconBorder } from '../nm-icon-border/nm-icon-border.tsx';
+import { NmCollectionTitle } from './nm-collection-title.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-collection-bar');
+
+export type NmCollectionBarProps = {
+  title: string;
+  titleSrc: string;
+  titleIcon?: NmIconId;
+  filterIcon?: NmIconId;
+  view: NmCollectionView;
+  gridLabel: string;
+  tableLabel: string;
+  switchLabel: string;
+  showSwitch?: boolean;
+  onView: (view: NmCollectionView) => void;
+};
+
+function nextCollectionView(view: NmCollectionView): NmCollectionView {
+  return view === NM_COLLECTION_VIEWS.grid ? NM_COLLECTION_VIEWS.table : NM_COLLECTION_VIEWS.grid;
+}
+
+export function NmCollectionBar(props: NmCollectionBarProps): ReactNode {
+  const gridOn = props.view === NM_COLLECTION_VIEWS.grid;
+  const switchLabel = gridOn ? props.gridLabel : props.tableLabel;
+  const showSwitch = props.showSwitch !== false;
+  logger.debug('render', props.view, { title: props.title });
+  return (
+    <div
+      className={NM_COLLECTION_CLASSES.cluster}
+      role={showSwitch ? 'group' : undefined}
+      aria-label={showSwitch ? switchLabel : undefined}
+      data-testid="collection-bar"
+    >
+      <NmCollectionTitle
+        title={props.title}
+        titleSrc={props.titleSrc}
+        titleIcon={props.titleIcon}
+      />
+      {showSwitch ? (
+        <NmIconBorder
+          label={switchLabel}
+          icon={props.filterIcon ?? (gridOn ? undefined : 'table-properties')}
+          imageSrc={props.filterIcon || !gridOn ? undefined : NM_COLLECTION_ICON_SRC.grid}
+          pressed={gridOn}
+          testId="collection-view-switch"
+          onClick={() => {
+            const next = nextCollectionView(props.view);
+            logger.debug('toggle', next);
+            props.onView(next);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}

package/registry/ui/components/nm-collection/nm-collection-grid.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import {
+  NM_COLLECTION_CLASSES,
+  NM_COLLECTION_MEDIA_KINDS,
+  type NmCollectionItem,
+  type NmCollectionItemActions,
+} from '../../config/nm-collection.ts';
+import { NmCollectionTileActions } from './nm-collection-tile-actions.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-collection-grid');
+
+export type NmCollectionGridProps = {
+  items: readonly NmCollectionItem[];
+  label: string;
+  actions?: NmCollectionItemActions;
+  onSelect: (id: string) => void;
+};
+
+function CollectionTileMedia(item: NmCollectionItem): ReactNode {
+  if (item.media?.kind === NM_COLLECTION_MEDIA_KINDS.image) {
+    return <img className={NM_COLLECTION_CLASSES.media} src={item.media.src} alt="" />;
+  }
+  if (item.media?.kind === NM_COLLECTION_MEDIA_KINDS.video) {
+    return (
+      <video
+        className={NM_COLLECTION_CLASSES.media}
+        src={item.media.src}
+        muted
+        playsInline
+        preload="metadata"
+      />
+    );
+  }
+  return <span className={NM_COLLECTION_CLASSES.name}>{item.title}</span>;
+}
+
+export function NmCollectionGrid(props: NmCollectionGridProps): ReactNode {
+  logger.debug('render', 'grid', { count: props.items.length });
+  if (props.items.length === 0) {
+    return null;
+  }
+  return (
+    <ul
+      className={NM_COLLECTION_CLASSES.grid}
+      aria-label={props.label}
+      data-testid="collection-grid"
+    >
+      {props.items.map((item) => (
+        <li key={item.id} className={NM_COLLECTION_CLASSES.tile} data-media={item.media?.kind}>
+          <button
+            className={NM_COLLECTION_CLASSES.hit}
+            type="button"
+            aria-label={item.title}
+            onClick={() => {
+              logger.debug('select', item.id);
+              props.onSelect(item.id);
+            }}
+          >
+            {CollectionTileMedia(item)}
+          </button>
+          {props.actions ? (
+            <NmCollectionTileActions itemId={item.id} title={item.title} actions={props.actions} />
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/registry/ui/components/nm-collection/nm-collection-query.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react';
+import { NM_COLLECTION_CLASSES, NM_COLLECTION_ICON_SRC } from '../../config/nm-collection.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmField } from '../nm-field/nm-field.tsx';
+
+const logger = createLogger('interface-nm-collection-query');
+
+export type NmCollectionQueryProps = {
+  imageLabel: string;
+  videoLabel: string;
+  audioLabel: string;
+  searchLabel: string;
+  imageOn: boolean;
+  videoOn: boolean;
+  audioOn: boolean;
+  query: string;
+  onImage: (on: boolean) => void;
+  onVideo: (on: boolean) => void;
+  onAudio: (on: boolean) => void;
+  onQuery: (query: string) => void;
+  filters?: boolean;
+  search?: boolean;
+};
+
+export function NmCollectionQuery(props: NmCollectionQueryProps): ReactNode {
+  logger.debug('render', 'query', {
+    image: props.imageOn,
+    video: props.videoOn,
+    audio: props.audioOn,
+    query: props.query.length,
+  });
+  return (
+    <>
+      {props.filters === false ? null : (
+        <>
+          <CollectionFilter
+            label={props.imageLabel}
+            icon={NM_COLLECTION_ICON_SRC.image}
+            on={props.imageOn}
+            testId="collection-filter-image"
+            onToggle={props.onImage}
+          />
+          <CollectionFilter
+            label={props.videoLabel}
+            icon={NM_COLLECTION_ICON_SRC.video}
+            on={props.videoOn}
+            testId="collection-filter-video"
+            onToggle={props.onVideo}
+          />
+          <CollectionFilter
+            label={props.audioLabel}
+            icon={NM_COLLECTION_ICON_SRC.audio}
+            on={props.audioOn}
+            testId="collection-filter-audio"
+            onToggle={props.onAudio}
+          />
+        </>
+      )}
+      {props.search === false ? null : (
+        <NmField
+          kind="search"
+          icon="search"
+          className={NM_COLLECTION_CLASSES.search}
+          value={props.query}
+          placeholder={props.searchLabel}
+          label={props.searchLabel}
+          testId="collection-search"
+          onChange={props.onQuery}
+        />
+      )}
+    </>
+  );
+}
+
+function CollectionFilter(props: {
+  label: string;
+  icon: string;
+  on: boolean;
+  testId: string;
+  onToggle: (on: boolean) => void;
+}): ReactNode {
+  return (
+    <button
+      className={NM_COLLECTION_CLASSES.filter}
+      type="button"
+      aria-pressed={props.on}
+      data-active={props.on ? 'true' : 'false'}
+      data-testid={props.testId}
+      onClick={() => {
+        const next = !props.on;
+        logger.debug('filter', props.testId, { on: next });
+        props.onToggle(next);
+      }}
+    >
+      <img src={props.icon} alt="" />
+      {props.label}
+    </button>
+  );
+}

package/registry/ui/components/nm-collection/nm-collection-row-menu.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import {
+  NM_COLLECTION_ACTIONS,
+  NM_COLLECTION_CLASSES,
+  type NmCollectionItemActions,
+} from '../../config/nm-collection.ts';
+import {
+  NM_SMALL_ICON_BUTTON_CLASSES,
+  NM_SMALL_ICON_BUTTON_TONES,
+} from '../../config/nm-small-icon-button.ts';
+import { NM_DROPDOWN_ALIGN, NM_DROPDOWN_TRIGGER } from '../../config/nm-dropdown.ts';
+import { NmDropdown } from '../nm-dropdown/nm-dropdown.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-collection-row-menu');
+
+export function NmCollectionRowMenu(props: {
+  itemId: string;
+  title: string;
+  actions: NmCollectionItemActions;
+}): ReactNode {
+  logger.debug('render', props.itemId);
+  return (
+    <div className={NM_COLLECTION_CLASSES.menu}>
+      <NmDropdown
+        label={`${props.actions.menuLabel} ${props.title}`}
+        trigger={NM_DROPDOWN_TRIGGER.icon}
+        align={NM_DROPDOWN_ALIGN.end}
+        icon="ellipsis"
+        triggerClassName={`${NM_SMALL_ICON_BUTTON_CLASSES.root} ${NM_SMALL_ICON_BUTTON_CLASSES[NM_SMALL_ICON_BUTTON_TONES.quiet]}`}
+        items={[
+          {
+            id: NM_COLLECTION_ACTIONS.open,
+            label: props.actions.openLabel,
+            icon: 'arrow-up-right',
+          },
+          {
+            id: NM_COLLECTION_ACTIONS.delete,
+            label: props.actions.deleteLabel,
+            icon: 'trash',
+          },
+        ]}
+        onSelect={(id) => {
+          logger.debug(id, props.itemId);
+          if (id === NM_COLLECTION_ACTIONS.open) {
+            props.actions.onOpen(props.itemId);
+          }
+          if (id === NM_COLLECTION_ACTIONS.delete) {
+            props.actions.onDelete(props.itemId);
+          }
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_COLLECTION_CLASSES,
+  type NmCollectionColumn,
+  type NmCollectionItem,
+  type NmCollectionItemActions,
+} from '../../config/nm-collection.ts';
+import { NM_SMALL_ICON_BUTTON_CLASSES } from '../../config/nm-small-icon-button.ts';
+import { NmCollectionRowMenu } from './nm-collection-row-menu.tsx';
+import { createLogger } from '../../kit-logger.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+const logger = createLogger('interface-nm-collection-table');
+
+export type NmCollectionTableProps = {
+  items: readonly NmCollectionItem[];
+  label: string;
+  nameLabel?: string;
+  columns?: readonly NmCollectionColumn[];
+  headerIcon?: NmIconId;
+  actions?: NmCollectionItemActions;
+  onSelect: (id: string) => void;
+};
+
+export function NmCollectionTable(props: NmCollectionTableProps): ReactNode {
+  logger.debug('render', 'table', { count: props.items.length });
+  if (props.items.length === 0) {
+    return null;
+  }
+  const columns = props.columns ?? [];
+  const columnar = columns.length > 0;
+  return (
+    <div
+      className={NM_COLLECTION_CLASSES.table}
+      role={columnar ? 'table' : 'list'}
+      aria-label={props.label}
+      data-testid="collection-table"
+    >
+      {columnar ? (
+        <div className={`${NM_COLLECTION_CLASSES.row} ${NM_COLLECTION_CLASSES.head}`} role="row">
+          <span className={NM_COLLECTION_CLASSES.name} role="columnheader">
+            {props.nameLabel}
+          </span>
+          <span className={NM_COLLECTION_CLASSES.facts}>
+            {columns.map((column) => (
+              <span key={column.id} className={NM_COLLECTION_CLASSES.cell} role="columnheader">
+                {column.label}
+              </span>
+            ))}
+          </span>
+          {props.headerIcon ? (
+            <span className={NM_COLLECTION_CLASSES.menu} aria-hidden="true">
+              <span className={NM_SMALL_ICON_BUTTON_CLASSES.root}>
+                <NmIcon id={props.headerIcon} />
+              </span>
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+      {props.items.map((item) => (
+        <div
+          key={item.id}
+          className={NM_COLLECTION_CLASSES.row}
+          role={columnar ? 'row' : 'listitem'}
+          data-columns={columnar ? 'true' : undefined}
+        >
+          <button
+            className={NM_COLLECTION_CLASSES.rowHit}
+            type="button"
+            onClick={() => {
+              logger.debug('select', item.id);
+              props.onSelect(item.id);
+            }}
+          >
+            <span className={NM_COLLECTION_CLASSES.name} role={columnar ? 'cell' : undefined}>
+              {item.title}
+            </span>
+            {columnar ? (
+              <span className={NM_COLLECTION_CLASSES.facts}>
+                {columns.map((column) => (
+                  <span key={column.id} className={NM_COLLECTION_CLASSES.cell} role="cell">
+                    {item.cells?.[column.id] ?? ''}
+                  </span>
+                ))}
+              </span>
+            ) : null}
+            {!columnar && item.meta ? (
+              <span className={NM_COLLECTION_CLASSES.meta}>{item.meta}</span>
+            ) : null}
+          </button>
+          {props.actions ? (
+            <NmCollectionRowMenu itemId={item.id} title={item.title} actions={props.actions} />
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}

package/registry/ui/components/nm-collection/nm-collection-tile-actions.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_COLLECTION_ACTIONS,
+  NM_COLLECTION_CLASSES,
+  type NmCollectionItemActions,
+} from '../../config/nm-collection.ts';
+import { NmSmallIconButton } from '../nm-small-icon-button/nm-small-icon-button.tsx';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-collection-tile-actions');
+
+const TILE_ACTIONS = [
+  { id: NM_COLLECTION_ACTIONS.open, icon: 'arrow-up-right', label: 'openLabel', run: 'onOpen' },
+  {
+    id: NM_COLLECTION_ACTIONS.download,
+    icon: 'download',
+    label: 'downloadLabel',
+    run: 'onDownload',
+  },
+  { id: NM_COLLECTION_ACTIONS.delete, icon: 'trash', label: 'deleteLabel', run: 'onDelete' },
+] as const satisfies readonly {
+  id: string;
+  icon: NmIconId;
+  label: 'openLabel' | 'downloadLabel' | 'deleteLabel';
+  run: 'onOpen' | 'onDownload' | 'onDelete';
+}[];
+
+export function NmCollectionTileActions(props: {
+  itemId: string;
+  title: string;
+  actions: NmCollectionItemActions;
+}): ReactNode {
+  logger.debug('render', props.itemId);
+  return (
+    <div className={NM_COLLECTION_CLASSES.actions}>
+      {TILE_ACTIONS.map((action) => (
+        <NmSmallIconButton
+          key={action.id}
+          label={`${props.actions[action.label]} ${props.title}`}
+          icon={action.icon}
+          onClick={() => {
+            logger.debug(action.id, props.itemId);
+            props.actions[action.run](props.itemId);
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/registry/ui/components/nm-collection/nm-collection-title.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import { NM_COLLECTION_CLASSES } from '../../config/nm-collection.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+export type NmCollectionTitleProps = {
+  /** Accessible name (icon-only; not shown as visible text). */
+  title: string;
+  titleSrc: string;
+  titleIcon?: NmIconId;
+};
+
+/** Collection header identity chip — icon only, raised background on hover. */
+export function NmCollectionTitle(props: NmCollectionTitleProps): ReactNode {
+  return (
+    <div
+      className={NM_COLLECTION_CLASSES.title}
+      role="img"
+      aria-label={props.title}
+      data-testid="collection-title"
+    >
+      {props.titleIcon ? <NmIcon id={props.titleIcon} /> : <img src={props.titleSrc} alt="" />}
+    </div>
+  );
+}