@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/lib/appearance/readLayoutMetrics.ts

@@ -0,0 +1,28 @@
+/** Read a px or rem custom property from a computed style (appearance tokens use px). */
+export function readCssLengthPx(
+  element: HTMLElement,
+  property: string,
+  fallbackPx: number,
+): number {
+  const raw = getComputedStyle(element).getPropertyValue(property).trim();
+  if (!raw) {
+    return fallbackPx;
+  }
+  if (raw.endsWith('px')) {
+    const px = Number.parseFloat(raw);
+    return Number.isFinite(px) ? px : fallbackPx;
+  }
+  if (raw.endsWith('rem')) {
+    const rootPx = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const rem = Number.parseFloat(raw);
+    return Number.isFinite(rem) ? rem * rootPx : fallbackPx;
+  }
+  return fallbackPx;
+}
+
+/** Virtualized convo row stride: rail row min-height + list gap. */
+export function readNmRailRowStridePx(root: HTMLElement = document.documentElement): number {
+  const control = readCssLengthPx(root, '--nm-icon-control', 34);
+  const gap = readCssLengthPx(root, '--nm-space-2', 2);
+  return control + gap;
+}

package/registry/ui/lib/bar-overflow.ts

@@ -0,0 +1,41 @@
+export const BAR_OVERFLOW_MODES = {
+  inline: 'inline',
+  menu: 'menu',
+} as const;
+
+export type BarOverflowMode = (typeof BAR_OVERFLOW_MODES)[keyof typeof BAR_OVERFLOW_MODES];
+
+/** Subpixel layout can report a 1px overflow while the row still fits. */
+export const BAR_OVERFLOW_SLACK_PX = 1;
+
+export type BarOverflowFit = {
+  availableWidth: number;
+  neededWidth: number;
+};
+
+export function resolveBarOverflow(fit: BarOverflowFit): BarOverflowMode {
+  if (!Number.isFinite(fit.availableWidth) || !Number.isFinite(fit.neededWidth)) {
+    return BAR_OVERFLOW_MODES.inline;
+  }
+  if (fit.availableWidth <= 0 || fit.neededWidth <= 0) {
+    return BAR_OVERFLOW_MODES.inline;
+  }
+  if (fit.neededWidth > fit.availableWidth + BAR_OVERFLOW_SLACK_PX) {
+    return BAR_OVERFLOW_MODES.menu;
+  }
+  return BAR_OVERFLOW_MODES.inline;
+}
+
+export function eventTargetInBar(
+  root: HTMLElement | null,
+  target: EventTarget | null,
+  layerSelector: string,
+): boolean {
+  if (root == null || !(target instanceof Node)) {
+    return false;
+  }
+  if (root.contains(target)) {
+    return true;
+  }
+  return target instanceof Element && target.closest(layerSelector) != null;
+}

package/registry/ui/lib/logger.ts

@@ -0,0 +1,53 @@
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+export type LogContext = Record<string, unknown>;
+
+function isDebugEnabled(): boolean {
+  return import.meta.env.VITE_DEBUG === 'true';
+}
+
+function write(
+  level: LogLevel,
+  moduleName: string,
+  operation: string,
+  message: string,
+  context?: LogContext,
+): void {
+  try {
+    if (level === 'debug' && !isDebugEnabled()) {
+      return;
+    }
+    const line = `[${level}] [${moduleName}:${operation}] ${message}`;
+    const sinks = {
+      debug: console.debug,
+      info: console.info,
+      warn: console.warn,
+      error: console.error,
+    } as const;
+    const sink = sinks[level];
+    if (context) {
+      sink(line, context);
+      return;
+    }
+    sink(line);
+  } catch {
+    /* logging must never throw */
+  }
+}
+
+export function createLogger(moduleName: string) {
+  return {
+    debug(operation: string, message: string, context?: LogContext) {
+      write('debug', moduleName, operation, message, context);
+    },
+    info(operation: string, message: string, context?: LogContext) {
+      write('info', moduleName, operation, message, context);
+    },
+    warn(operation: string, message: string, context?: LogContext) {
+      write('warn', moduleName, operation, message, context);
+    },
+    error(operation: string, message: string, context?: LogContext) {
+      write('error', moduleName, operation, message, context);
+    },
+  };
+}

package/registry/ui/lib/menu-motion.ts

@@ -0,0 +1,187 @@
+import { useReducedMotion } from 'framer-motion';
+
+/** Dropdown motion. Duration, ease, and shift are the `--reveal`, `--ease`, and `--nm-space-8` tokens. */
+
+export const MENU_MOTION_EASE_FALLBACK = [0.22, 1, 0.36, 1] as const;
+export const MENU_MOTION_DURATION_FALLBACK_S = 0.25;
+export const MENU_MOTION_SHIFT_FALLBACK_PX = 8;
+export const MENU_MOTION_SCALE_FALLBACK = 0.98;
+
+const ROOT_FONT_FALLBACK_PX = 16;
+
+export type MenuEase = readonly [number, number, number, number];
+
+export type MenuMotionFrame = {
+  duration: number;
+  ease: MenuEase;
+  shift: number;
+  scale: number;
+};
+
+export function parseCubicBezier(raw: string): MenuEase | null {
+  const match = raw.match(
+    /cubic-bezier\(\s*(-?\d*\.?\d+)\s*,\s*(-?\d*\.?\d+)\s*,\s*(-?\d*\.?\d+)\s*,\s*(-?\d*\.?\d+)\s*\)/,
+  );
+  if (match == null) {
+    return null;
+  }
+  return [Number(match[1]), Number(match[2]), Number(match[3]), Number(match[4])];
+}
+
+export function parseDurationSeconds(raw: string): number | null {
+  const value = raw.trim();
+  if (value.endsWith('ms')) {
+    const ms = Number.parseFloat(value);
+    return Number.isFinite(ms) ? ms / 1000 : null;
+  }
+  if (value.endsWith('s')) {
+    const seconds = Number.parseFloat(value);
+    return Number.isFinite(seconds) ? seconds : null;
+  }
+  return null;
+}
+
+export function parseLengthPx(raw: string, rootFontPx: number): number | null {
+  const value = raw.trim();
+  if (value.endsWith('rem')) {
+    const rem = Number.parseFloat(value);
+    return Number.isFinite(rem) ? rem * rootFontPx : null;
+  }
+  if (value.endsWith('px')) {
+    const px = Number.parseFloat(value);
+    return Number.isFinite(px) ? px : null;
+  }
+  return null;
+}
+
+export function parseUnitScale(raw: string): number | null {
+  const scale = Number.parseFloat(raw.trim());
+  if (!Number.isFinite(scale) || scale <= 0 || scale >= 1) {
+    return null;
+  }
+  return scale;
+}
+
+export function readMenuMotionFrame(): MenuMotionFrame {
+  if (typeof document === 'undefined') {
+    return {
+      duration: MENU_MOTION_DURATION_FALLBACK_S,
+      ease: MENU_MOTION_EASE_FALLBACK,
+      shift: MENU_MOTION_SHIFT_FALLBACK_PX,
+      scale: MENU_MOTION_SCALE_FALLBACK,
+    };
+  }
+  const style = getComputedStyle(document.documentElement);
+  const rootFont = Number.parseFloat(style.fontSize);
+  const fontPx = Number.isFinite(rootFont) ? rootFont : ROOT_FONT_FALLBACK_PX;
+  return {
+    duration:
+      parseDurationSeconds(style.getPropertyValue('--reveal')) ?? MENU_MOTION_DURATION_FALLBACK_S,
+    ease: parseCubicBezier(style.getPropertyValue('--ease')) ?? MENU_MOTION_EASE_FALLBACK,
+    shift:
+      parseLengthPx(style.getPropertyValue('--nm-space-8'), fontPx) ??
+      MENU_MOTION_SHIFT_FALLBACK_PX,
+    scale: parseUnitScale(style.getPropertyValue('--nm-menu-scale')) ?? MENU_MOTION_SCALE_FALLBACK,
+  };
+}
+
+export function menuMotionOrigin(placement: string | null | undefined): {
+  originX: number;
+  originY: number;
+} {
+  const [side = 'bottom', align] = (placement ?? 'bottom').split('-');
+  let originY = 0.5;
+  if (side === 'top') {
+    originY = 1;
+  } else if (side === 'bottom') {
+    originY = 0;
+  }
+  let originX = 0.5;
+  if (side === 'left') {
+    originX = 1;
+  } else if (side === 'right') {
+    originX = 0;
+  } else if (align === 'start') {
+    originX = 0;
+  } else if (align === 'end') {
+    originX = 1;
+  }
+  return { originX, originY };
+}
+
+/** Offset toward the trigger so the panel eases out of its anchor. */
+export function menuMotionOffset(
+  placement: string | null | undefined,
+  shift: number,
+): { x: number; y: number } {
+  const side = (placement ?? 'bottom').split('-')[0];
+  if (side === 'top') {
+    return { x: 0, y: shift };
+  }
+  if (side === 'left') {
+    return { x: shift, y: 0 };
+  }
+  if (side === 'right') {
+    return { x: -shift, y: 0 };
+  }
+  return { x: 0, y: -shift };
+}
+
+export function menuMotionVariants(
+  input: MenuMotionFrame & {
+    reduceMotion: boolean;
+    placement?: string | null;
+  },
+): {
+  closed: { opacity: number; x: number; y: number; scale: number };
+  open: { opacity: number; x: number; y: number; scale: number };
+  transition: { duration: number; ease: MenuEase };
+} {
+  const offset = input.reduceMotion
+    ? { x: 0, y: 0 }
+    : menuMotionOffset(input.placement, input.shift);
+  const transition = { duration: input.duration, ease: input.ease };
+  return {
+    closed: {
+      opacity: 0,
+      x: offset.x,
+      y: offset.y,
+      scale: input.reduceMotion ? 1 : input.scale,
+    },
+    open: { opacity: 1, x: 0, y: 0, scale: 1 },
+    transition,
+  };
+}
+
+type MenuMotionState = {
+  opacity: number;
+  x: number;
+  y: number;
+  scale: number;
+  transition: { duration: number; ease: MenuEase };
+};
+
+type MenuMotionBinding = {
+  initial: 'closed';
+  animate: 'open';
+  exit: 'closed';
+  variants: { closed: MenuMotionState; open: MenuMotionState };
+  style: { originX: number; originY: number };
+};
+
+export function useMenuMotion(placement?: string | null): MenuMotionBinding {
+  const reduceMotion = useReducedMotion() === true;
+  const frame = readMenuMotionFrame();
+  const motionFrame = menuMotionVariants({ ...frame, reduceMotion, placement });
+  const { transition } = motionFrame;
+  return {
+    initial: 'closed',
+    animate: 'open',
+    exit: 'closed',
+    variants: {
+      closed: { ...motionFrame.closed, transition },
+      open: { ...motionFrame.open, transition },
+    },
+    style: menuMotionOrigin(placement),
+  };
+}

package/registry/ui/lib/nm-class.ts

@@ -0,0 +1,4 @@
+/** Joins class names and drops the empty ones. The one helper every Base UI wrapper uses. */
+export function nmClass(...names: (string | false | null | undefined)[]): string {
+  return names.filter(Boolean).join(' ');
+}

package/registry/ui/lib/nordman-ui-locale.ts

@@ -0,0 +1,43 @@
+import { useSyncExternalStore } from 'react';
+
+/** Active Nordman UI locale for static copy proxies (interface shell, settings modal). */
+let activeUiLocale = 'sv-SE';
+
+const listeners = new Set<() => void>();
+
+export function setNordmanUiLocale(
+  locale: string | null | undefined,
+  options?: { notify?: boolean },
+): void {
+  const next = locale ?? 'sv-SE';
+  if (next === activeUiLocale) {
+    return;
+  }
+  activeUiLocale = next;
+  if (options?.notify === false) {
+    return;
+  }
+  listeners.forEach((listener) => listener());
+}
+
+export function getNordmanUiLocale(): string {
+  return activeUiLocale;
+}
+
+export function subscribeNordmanUiLocale(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/** Re-renders this component when the Nordman UI language changes, without remounting the app. */
+export function useNordmanUiLocale(): string {
+  return useSyncExternalStore(subscribeNordmanUiLocale, getNordmanUiLocale, getNordmanUiLocale);
+}
+
+/** English copy for English locales; every other locale reads Swedish. */
+export function isEnglishNordmanLocale(locale: string): boolean {
+  const resolved = locale === 'auto' && typeof navigator !== 'undefined' ? navigator.language : locale;
+  return /^en\b/i.test(resolved);
+}

package/registry/ui/styles/interface-theme.css

@@ -0,0 +1,196 @@
+html[data-interface='nordman'] {
+  --radius: var(--nm-radius-md);
+  --presentation: var(--nm-canvas-rgb);
+  --text-primary: var(--nm-fg-rgb);
+  --text-secondary: var(--nm-fg-subtle-rgb);
+  --text-secondary-alt: var(--nm-fg-subtle-rgb);
+  --text-tertiary: var(--nm-stroke-rgb);
+  --text-destructive: var(--nm-destructive-rgb);
+  --header-primary: var(--nm-canvas-rgb);
+  --surface-primary: var(--nm-canvas-rgb);
+  --surface-primary-alt: var(--nm-raised-rgb);
+  --surface-secondary: var(--nm-panel-rgb);
+  --surface-secondary-alt: var(--nm-line-rgb);
+  --surface-tertiary: var(--nm-raised-rgb);
+  --surface-dialog: var(--nm-panel-rgb);
+  --surface-chat: var(--nm-canvas-rgb);
+  --surface-active: var(--nm-line-rgb);
+  --surface-active-alt: var(--nm-panel-rgb);
+  --surface-hover: var(--nm-panel-rgb);
+  --border-light: var(--nm-line-rgb);
+  --border-medium: var(--nm-stroke-rgb);
+  --link: var(--nm-accent-rgb);
+  --link-hover: var(--nm-accent-rgb);
+  --link-visited: var(--nm-accent-rgb);
+  --accent-primary: var(--nm-accent-rgb);
+  --ring-primary: var(--nm-accent-rgb);
+  --brand-purple: var(--nm-accent-rgb);
+  --font-sans: var(--nm-font);
+  background: var(--nm-canvas);
+  color: var(--nm-fg);
+  font-family: var(--nm-font);
+}
+
+html[data-interface='nordman'] body {
+  background: var(--nm-canvas);
+  color: var(--nm-fg);
+  font-family: var(--nm-font);
+  font-weight: var(--nm-weight-regular);
+}
+
+/* Every text follows the Font weight setting. Defaults of the browser never win: headings and strong text sit
+   one step above regular, and form controls take the weight of the text around them. */
+:where(html[data-interface='nordman']) :where(h1, h2, h3, h4, h5, h6, th, strong, b) {
+  font-weight: var(--nm-weight-semibold);
+}
+
+:where(html[data-interface='nordman']) :where(button, input, select, textarea, optgroup, legend, caption) {
+  font-weight: inherit;
+}
+
+html[data-interface='nordman'] .popover-ui {
+  border: 0;
+  border-radius: var(--nm-menu-radius);
+  background: var(--nm-raised);
+  box-shadow: none;
+  padding: var(--nm-space-12);
+  max-height: var(--nm-dropdown-max);
+  font-family: var(--nm-font);
+  font-size: var(--nm-type-ui);
+}
+
+html[data-interface='nordman'] .popover-ui .select-item {
+  font-size: inherit;
+  line-height: var(--nm-leading-tight);
+}
+
+html[data-interface='nordman'] .popover-ui input {
+  font-size: inherit;
+}
+
+html[data-interface='nordman'] .popover-ui .h-4.w-4 {
+  width: var(--nm-icon-sm);
+  height: var(--nm-icon-sm);
+}
+
+html[data-interface='nordman'] button[role='combobox'] {
+  font-family: var(--nm-font);
+  font-size: var(--nm-type-ui);
+}
+
+html[data-interface='nordman'] .nm-dropdown__trigger,
+html[data-interface='nordman'] .nm-dropdown__item,
+html[data-interface='nordman'] .nm-dropdown__detail {
+  font-size: var(--nm-type-ui);
+}
+
+html[data-interface='nordman'] .nm-dropdown__label {
+  font-size: inherit;
+}
+
+html[data-interface='nordman'] .nm-rail-nav {
+  font-family: var(--nm-font);
+  font-size: var(--nm-type-ui);
+  color: var(--nm-fg);
+}
+
+html[data-interface='nordman'] .nm-rail__label,
+html[data-interface='nordman'] .nm-rail__row,
+html[data-interface='nordman'] .nm-rail__title,
+html[data-interface='nordman'] .nm-rail__title-text {
+  font-size: var(--nm-type-ui);
+}
+
+html[data-interface='nordman'] .icon-sm {
+  width: var(--nm-icon-sm);
+  height: var(--nm-icon-sm);
+}
+
+html[data-interface='nordman'] .icon-md,
+html[data-interface='nordman'] .icon-md-heavy {
+  width: var(--nm-icon-button);
+  height: var(--nm-icon-button);
+}
+
+html[data-interface='nordman'] .icon-lg {
+  width: calc(var(--nm-icon-button) * 4 / 3);
+  height: calc(var(--nm-icon-button) * 4 / 3);
+}
+
+html[data-interface='nordman'] .icon-xl {
+  width: calc(var(--nm-icon-button) * 7 / 6);
+  height: calc(var(--nm-icon-button) * 7 / 6);
+}
+
+html[data-interface='nordman'] svg.nm-icon,
+html[data-interface='nordman'] .nm-icon {
+  width: var(--nm-icon-button);
+  height: var(--nm-icon-button);
+}
+
+html[data-interface='nordman'] .tooltip {
+  background-color: var(--nm-raised);
+  box-shadow: none;
+}
+
+html[data-interface='nordman'] .nm-hide-scrollbar,
+html[data-interface='nordman'] .nm-rail-nav,
+html[data-interface='nordman'] .nm-rail,
+html[data-interface='nordman'] .nm-rail__body,
+html[data-interface='nordman'] .nm-rail .ReactVirtualized__Grid,
+html[data-interface='nordman'] .nm-rail .ReactVirtualized__List,
+html[data-interface='nordman'] .nm-rail-nav .overflow-auto,
+html[data-interface='nordman'] .nm-rail-nav .overflow-y-auto,
+html[data-interface='nordman'] .nm-rail-nav .overflow-y-scroll,
+html[data-interface='nordman'] .nm-rail-nav .scrollbar-gutter-stable,
+html[data-interface='nordman'] aside .overflow-auto,
+html[data-interface='nordman'] aside .overflow-y-auto,
+html[data-interface='nordman'] aside .overflow-y-scroll,
+html[data-interface='nordman'] aside .scrollbar-gutter-stable,
+html[data-interface='nordman'] #chat-history-nav,
+html[data-interface='nordman'] #chat-history-nav .overflow-auto,
+html[data-interface='nordman'] #chat-history-nav .overflow-y-auto {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  scrollbar-gutter: auto;
+}
+
+html[data-interface='nordman'] .nm-hide-scrollbar::-webkit-scrollbar,
+html[data-interface='nordman'] .nm-rail-nav::-webkit-scrollbar,
+html[data-interface='nordman'] .nm-rail::-webkit-scrollbar,
+html[data-interface='nordman'] .nm-rail__body::-webkit-scrollbar,
+html[data-interface='nordman'] .nm-rail .ReactVirtualized__Grid::-webkit-scrollbar,
+html[data-interface='nordman'] .nm-rail .ReactVirtualized__List::-webkit-scrollbar,
+html[data-interface='nordman'] .nm-rail-nav .overflow-auto::-webkit-scrollbar,
+html[data-interface='nordman'] .nm-rail-nav .overflow-y-auto::-webkit-scrollbar,
+html[data-interface='nordman'] .nm-rail-nav .overflow-y-scroll::-webkit-scrollbar,
+html[data-interface='nordman'] .nm-rail-nav .scrollbar-gutter-stable::-webkit-scrollbar,
+html[data-interface='nordman'] aside .overflow-auto::-webkit-scrollbar,
+html[data-interface='nordman'] aside .overflow-y-auto::-webkit-scrollbar,
+html[data-interface='nordman'] aside .overflow-y-scroll::-webkit-scrollbar,
+html[data-interface='nordman'] aside .scrollbar-gutter-stable::-webkit-scrollbar,
+html[data-interface='nordman'] #chat-history-nav::-webkit-scrollbar,
+html[data-interface='nordman'] #chat-history-nav .overflow-auto::-webkit-scrollbar,
+html[data-interface='nordman'] #chat-history-nav .overflow-y-auto::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* The thread keeps its gutter so the composer stays aligned, but the thumb
+   stays invisible until the column is actually scrolling. */
+html[data-interface='nordman'] .nm-message-scroll {
+  scrollbar-color: transparent transparent;
+}
+
+html[data-interface='nordman'] .nm-message-scroll::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+
+html[data-interface='nordman'] .nm-message-scroll[data-scrolling='true'] {
+  scrollbar-color: var(--nm-stroke) transparent;
+}
+
+html[data-interface='nordman'] .nm-message-scroll[data-scrolling='true']::-webkit-scrollbar-thumb {
+  background-color: var(--nm-stroke);
+}

package/registry/ui/styles/light-appearance.css

@@ -0,0 +1,72 @@
+html.light .nm-panel-bar {
+  border-bottom-color: var(--nm-line);
+}
+
+html.light .nm-collection__stage-bar {
+  border-bottom-color: var(--nm-line);
+  border-left-color: var(--nm-line);
+}
+
+html.light .nm-list-item:not(.nm-list-item--face) {
+  color: var(--nm-fg);
+}
+
+html.light .nm-list-item__detail,
+html.light .nm-list-item > span > .nm-icon {
+  color: var(--nm-fg-subtle);
+}
+
+html.light .kompis-face,
+html.light .nm-icon-rail__face {
+  filter: var(--nm-kompis-filter);
+}
+
+html.light .nm-icon-rail .nm-dropdown__trigger:hover,
+html.light .nm-icon-rail .nm-dropdown__trigger:focus-visible,
+html.light .nm-icon-rail .nm-dropdown__trigger[aria-expanded='true'] {
+  background: var(--nm-menu-highlight);
+  color: var(--nm-fg-subtle);
+}
+
+html.light .nm-modal__item[data-active='true'],
+html.light .nm-modal__item[data-state='active'],
+html.light .nm-modal__item:hover,
+html.light .nm-modal__item:focus-visible {
+  background: var(--nm-menu-highlight);
+}
+
+html.light .nm-dropdown__panel,
+html.light .nm-dropdown__subpanel,
+html.light .command-central__panel,
+html.light .command-central__search-row {
+  background: var(--nm-menu-surface);
+}
+
+html.light .nm-dropdown__item:hover,
+html.light .nm-dropdown__item:focus-visible,
+html.light .nm-dropdown__item[aria-selected='true'] {
+  background: var(--nm-menu-option);
+}
+
+html.light[data-interface='nordman'] .popover-ui {
+  background: var(--nm-menu-surface);
+  border: 0;
+  box-shadow: none;
+}
+
+html.light[data-interface='nordman'] .select-item[data-active-item],
+html.light[data-interface='nordman'] .select-item:hover {
+  background-color: rgb(var(--nm-menu-option-rgb));
+  color: rgb(var(--nm-fg-rgb));
+}
+
+html.light .nm-segmented--line .nm-segmented__item[data-active='true'] {
+  background: var(--nm-menu-option);
+  color: var(--nm-fg);
+}
+
+html.light .nm-segmented:not(.nm-segmented--pills):not(.nm-segmented--fill) .nm-segmented__item:hover,
+html.light .nm-segmented:not(.nm-segmented--pills):not(.nm-segmented--fill) .nm-segmented__item:focus-visible {
+  background: var(--nm-menu-option);
+  color: var(--nm-fg);
+}