@nordmanai/nif 0.1.0 → 0.2.0

package/registry/ui/components/nm-app-panel/nm-app-panel.css

@@ -0,0 +1,169 @@
+  .nm-app-panel,
+  .nm-logs-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--nm-canvas);
+  }
+
+  .nm-app-panel__body,
+  .nm-logs-panel__body {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    background: var(--nm-canvas);
+  }
+
+  .nm-app-panel__canvas {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(--nm-canvas);
+  }
+
+  .nm-app-panel__loader {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    pointer-events: none;
+  }
+
+  .nm-app-panel__loader .nm-mark-morph,
+  .nm-app-panel__loader .nm-mark-morph__svg,
+  .nm-app-panel__publish .nm-mark-morph,
+  .nm-app-panel__publish .nm-mark-morph__svg {
+    width: calc(var(--nm-space-40) * 2);
+    height: calc(var(--nm-space-40) * 2);
+  }
+
+  .nm-app-panel__publish {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--nm-space-16);
+    background: color-mix(in srgb, var(--nm-canvas) 78%, transparent);
+  }
+
+  .nm-app-panel__publish-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-body);
+    line-height: normal;
+    white-space: nowrap;
+  }
+
+  .nm-app-panel__publish-status .nm-mark-morph,
+  .nm-app-panel__publish-status .nm-mark-morph__svg {
+    width: var(--nm-space-16);
+    height: var(--nm-space-16);
+  }
+
+  .nm-app-panel__publish-label {
+    margin: 0;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-regular);
+    line-height: normal;
+  }
+
+  .nm-app-panel__progress-wrap {
+    position: absolute;
+    left: 50%;
+    bottom: var(--nm-space-24);
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--nm-space-8);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .nm-app-panel__progress-label {
+    margin: 0;
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-caption);
+    font-weight: var(--nm-weight-regular);
+    line-height: var(--nm-leading-snug);
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .nm-app-panel__progress {
+    width: calc(var(--nm-space-40) * 5);
+    height: var(--nm-space-8);
+    overflow: hidden;
+    border-radius: var(--nm-radius-md);
+    background: var(--nm-line);
+    pointer-events: none;
+  }
+
+  .nm-app-panel__progress-fill {
+    height: 100%;
+    background: var(--nm-stroke);
+    border-radius: var(--nm-radius-md) 0 0 var(--nm-radius-md);
+    transition: width 240ms var(--ease);
+  }
+
+  .nm-app-panel__progress-fill[data-stage='waiting'] {
+    width: 8%;
+  }
+
+  .nm-app-panel__progress-fill[data-stage='mounting'] {
+    width: 20%;
+  }
+
+  .nm-app-panel__progress-fill[data-stage='booting'] {
+    width: 36%;
+  }
+
+  .nm-app-panel__progress-fill[data-stage='installing'] {
+    width: 55%;
+  }
+
+  .nm-app-panel__progress-fill[data-stage='starting'] {
+    width: 80%;
+  }
+
+  .nm-app-panel__progress-fill[data-stage='ready'] {
+    width: 100%;
+  }
+
+  .nm-app-panel__blocked {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-24);
+    background: var(--nm-canvas);
+  }
+
+  .nm-app-panel__blocked-title,
+  .nm-app-panel__blocked-body {
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-regular);
+    line-height: normal;
+    color: var(--nm-fg);
+  }
+
+  .nm-app-panel__blocked-body {
+    color: var(--nm-stroke);
+    word-break: break-word;
+  }
+

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

@@ -0,0 +1,277 @@
+  /* Same surface as the connect card: raised, borderless, part of the chat. */
+  .nm-ask {
+    --nm-ask-radius: var(--nm-radius-lg);
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    min-height: 0;
+    box-sizing: border-box;
+    padding: var(--nm-space-16);
+    border: 0;
+    border-radius: var(--nm-ask-radius);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    overflow: hidden;
+  }
+
+  .nm-ask__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-12);
+    min-height: 0;
+  }
+
+  .nm-ask__bar,
+  .nm-ask__footer {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-ask__footer[data-end='true'] {
+    justify-content: flex-end;
+  }
+
+  .nm-ask__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-ask__title {
+    margin: 0;
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-ask__body {
+    min-height: 0;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .nm-ask__step {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: none;
+  }
+
+  .nm-ask__step[data-stepped='true'] {
+    min-height: 10rem;
+  }
+
+  .nm-ask__legend,
+  .nm-ask__hint {
+    padding: 0;
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-ask__legend {
+    margin-bottom: var(--nm-space-4);
+  }
+
+  .nm-ask__question,
+  .nm-ask__description {
+    margin: 0;
+    font-size: var(--nm-type-ui);
+    overflow-wrap: anywhere;
+  }
+
+  .nm-ask__question {
+    font-weight: var(--nm-weight-medium);
+  }
+
+  .nm-ask__description {
+    margin-top: var(--nm-space-4);
+    color: var(--nm-fg-muted);
+  }
+
+  .nm-ask__choices {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nm-space-8);
+    margin-top: var(--nm-space-8);
+  }
+
+  .nm-ask__choice,
+  .nm-ask__option {
+    box-sizing: border-box;
+    border: 0;
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background 0.15s,
+      opacity 0.15s;
+  }
+
+  .nm-ask__choice {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-6);
+    max-width: 100%;
+    min-height: var(--control-h-sm);
+    padding: var(--nm-space-6) var(--nm-space-10);
+    border-radius: var(--nm-control-r);
+    overflow-wrap: anywhere;
+  }
+
+  .nm-ask__option {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-10);
+    width: 100%;
+    padding: var(--nm-space-8) var(--nm-space-10);
+    background: transparent;
+    border-radius: var(--nm-radius-md);
+    overflow-wrap: anywhere;
+  }
+
+  .nm-ask__choice:hover:not(:disabled) {
+    opacity: var(--btn-hover);
+  }
+
+  .nm-ask__option:hover:not(:disabled),
+  .nm-ask__option[data-active='true'] {
+    background: var(--nm-panel);
+  }
+
+  .nm-ask__choice[aria-checked='true'],
+  .nm-ask__choice[aria-pressed='true'] {
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+  }
+
+  .nm-ask__badge {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--nm-space-24);
+    height: var(--nm-space-24);
+    border-radius: var(--nm-radius-sm);
+    background: var(--nm-panel);
+    color: var(--nm-fg-muted);
+    font-size: var(--nm-type-ui-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nm-ask__option[aria-checked='true'] .nm-ask__badge {
+    background: var(--nm-fg);
+    color: var(--nm-canvas);
+  }
+
+  .nm-ask__input {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin-top: var(--nm-space-8);
+    padding: var(--nm-space-8) var(--nm-space-10);
+    border: 0;
+    border-radius: var(--nm-radius-md);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    resize: none;
+  }
+
+  /* The caret is the focus indicator, as in the chatbox. */
+  .nm-ask__input:is(:focus, :focus-visible),
+  html[data-input-modality='keyboard'] .nm-ask__input:is(:focus, :focus-visible) {
+    outline: none !important;
+    outline-offset: 0 !important;
+    box-shadow: none !important;
+  }
+
+  .nm-ask__input::placeholder {
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-ask__error {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-6);
+    color: rgb(var(--nm-destructive-rgb));
+    font-size: var(--nm-type-ui-sm);
+  }
+
+  .nm-ask__hint {
+    border: 0;
+    background: transparent;
+    font-family: var(--nm-font);
+    cursor: text;
+  }
+
+  .nm-ask__hint:hover {
+    color: var(--nm-fg);
+  }
+
+  .nm-ask__remaining {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .nm-ask__dots {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .nm-ask__dot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--nm-space-24);
+    padding: 0 var(--nm-space-4);
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .nm-ask__dot::after {
+    content: '';
+    width: var(--nm-space-8);
+    height: var(--nm-space-8);
+    border-radius: var(--nm-radius-sm);
+    background: var(--nm-line-strong);
+  }
+
+  .nm-ask__dot[data-answered='true']::after {
+    background: var(--nm-fg);
+  }
+
+  .nm-ask__dot[aria-current='step']::after {
+    width: var(--nm-space-16);
+  }
+
+  .nm-ask__choice:focus-visible,
+  .nm-ask__option:focus-visible,
+  .nm-ask__dot:focus-visible,
+  .nm-ask__hint:focus-visible,
+  .nm-ask__remaining:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+  }
+
+  .nm-ask__choice:disabled,
+  .nm-ask__option:disabled {
+    opacity: var(--nm-soon-opacity);
+    cursor: default;
+  }

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

@@ -0,0 +1,85 @@
+  .nm-avatar {
+    --nm-avatar-size: var(--nm-icon-control);
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--nm-avatar-size);
+    height: var(--nm-avatar-size);
+    border-radius: 50%;
+    background: var(--nm-panel);
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-medium);
+    user-select: none;
+  }
+
+  .nm-avatar[data-size='sm'] {
+    --nm-avatar-size: var(--control-h-sm);
+  }
+
+  .nm-avatar[data-size='lg'] {
+    --nm-avatar-size: var(--control-h-lg);
+  }
+
+  .nm-avatar__image {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: cover;
+  }
+
+  .nm-avatar__fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .nm-avatar__badge {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: var(--nm-space-8);
+    height: var(--nm-space-8);
+    border: var(--nm-space-2) solid var(--nm-canvas);
+    border-radius: 50%;
+    background: var(--ok);
+  }
+
+  .nm-avatar-group {
+    --nm-avatar-size: var(--nm-icon-control);
+    display: flex;
+    align-items: center;
+  }
+
+  .nm-avatar-group > .nm-avatar,
+  .nm-avatar-group > .nm-avatar-group__count {
+    box-shadow: 0 0 0 var(--nm-space-2) var(--nm-canvas);
+  }
+
+  .nm-avatar-group > :not(:first-child) {
+    margin-left: calc(var(--nm-space-8) * -1);
+  }
+
+  /* The count is an avatar with a number in it. */
+  .nm-avatar-group__count {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--nm-avatar-size);
+    height: var(--nm-avatar-size);
+    border-radius: 50%;
+    background: var(--nm-panel);
+    color: var(--nm-fg-muted);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui-sm);
+    font-weight: var(--nm-weight-medium);
+  }

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

@@ -0,0 +1,30 @@
+import type { ComponentProps } from 'react';
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import { nmClass } from '../../lib/nm-class.ts';
+
+export const NM_AVATAR_SIZES = ['sm', 'default', 'lg'] as const;
+export type NmAvatarSize = (typeof NM_AVATAR_SIZES)[number];
+
+export function NmAvatar({ className, size = 'default', ...props }: AvatarPrimitive.Root.Props & { size?: NmAvatarSize }) {
+  return <AvatarPrimitive.Root data-slot="avatar" data-size={size} className={nmClass('nm-avatar', className as string)} {...props} />;
+}
+
+export function NmAvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return <AvatarPrimitive.Image data-slot="avatar-image" className={nmClass('nm-avatar__image', className as string)} {...props} />;
+}
+
+export function NmAvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
+  return <AvatarPrimitive.Fallback data-slot="avatar-fallback" className={nmClass('nm-avatar__fallback', className as string)} {...props} />;
+}
+
+export function NmAvatarBadge({ className, ...props }: ComponentProps<'span'>) {
+  return <span data-slot="avatar-badge" className={nmClass('nm-avatar__badge', className)} {...props} />;
+}
+
+export function NmAvatarGroup({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="avatar-group" className={nmClass('nm-avatar-group', className)} {...props} />;
+}
+
+export function NmAvatarGroupCount({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-slot="avatar-group-count" className={nmClass('nm-avatar-group__count', className)} {...props} />;
+}

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

@@ -0,0 +1,43 @@
+.nm-bar-overflow {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--nm-space-8);
+  overflow: visible;
+}
+
+.nm-bar-overflow[data-mode='menu'] {
+  overflow: hidden;
+}
+
+.nm-bar-overflow__row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: max-content;
+}
+
+.nm-bar-overflow__start {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--nm-space-8);
+  min-width: max-content;
+}
+
+.nm-bar-overflow[data-mode='menu'] .nm-bar-overflow__row {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  width: max-content;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+@media (max-width: 48rem) {
+  .nm-bar-overflow[data-hidden-narrow='true'] {
+    display: none;
+  }
+}

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

@@ -0,0 +1,61 @@
+import { useRef, type ReactNode } from 'react';
+import type { NmDropdownItem } from '../nm-dropdown/nm-dropdown-item';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import { NM_BAR_OVERFLOW_CLASSES, NM_BAR_OVERFLOW_TEST_IDS } from '../../config/nm-bar-overflow.ts';
+import { NM_DROPDOWN_TRIGGER } from '../../config/nm-dropdown.ts';
+import { BAR_OVERFLOW_MODES } from '../../lib/bar-overflow.ts';
+import { NmDropdown } from '../nm-dropdown/nm-dropdown.tsx';
+import { useBarOverflow } from './use-bar-overflow.ts';
+
+export type NmBarOverflowProps = {
+  menuLabel: string;
+  items: readonly NmDropdownItem[];
+  onSelect: (id: string) => void;
+  testId?: string;
+  className?: string;
+  hiddenOnNarrow?: boolean;
+  menuIcon?: NmIconId;
+  trailing?: ReactNode;
+  children: ReactNode;
+};
+
+function rootClassName(className: string | undefined): string {
+  return [NM_BAR_OVERFLOW_CLASSES.root, className]
+    .filter((value) => value != null && value !== '')
+    .join(' ');
+}
+
+export function NmBarOverflow(props: NmBarOverflowProps): ReactNode {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const rowRef = useRef<HTMLDivElement>(null);
+  const { mode } = useBarOverflow(rootRef, rowRef);
+  const menu = mode === BAR_OVERFLOW_MODES.menu;
+  const testId = props.testId ?? NM_BAR_OVERFLOW_TEST_IDS.root;
+
+  return (
+    <div
+      ref={rootRef}
+      className={rootClassName(props.className)}
+      data-mode={mode}
+      data-hidden-narrow={props.hiddenOnNarrow ? 'true' : 'false'}
+      data-testid={testId}
+    >
+      {menu ? (
+        <NmDropdown
+          label={props.menuLabel}
+          items={props.items}
+          icon={props.menuIcon ?? 'ellipsis'}
+          trigger={NM_DROPDOWN_TRIGGER.icon}
+          portal
+          testId={`${testId}-menu`}
+          onSelect={props.onSelect}
+        />
+      ) : null}
+      {menu ? props.trailing : null}
+      {/* Stays mounted while collapsed so the natural row width can be measured. */}
+      <div ref={rowRef} className={NM_BAR_OVERFLOW_CLASSES.row} aria-hidden={menu}>
+        <div className={NM_BAR_OVERFLOW_CLASSES.start}>{props.children}</div>
+      </div>
+    </div>
+  );
+}