@nordmanai/nif 0.1.0 → 0.2.0

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

@@ -0,0 +1,686 @@
+  .nm-message {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .nm-message--user {
+    justify-content: flex-end;
+  }
+
+  .nm-message--assistant {
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .nm-message__stack {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--nm-space-12);
+  }
+
+  .nm-message__stack--user {
+    width: auto;
+    max-width: 100%;
+    align-items: flex-end;
+  }
+
+  .nm-message__bubble,
+  .nm-message__body,
+  .nm-message__think,
+  .nm-message-meta__label {
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-regular);
+  }
+
+  .nm-message__bubble {
+    display: flex;
+    width: fit-content;
+    max-width: 100%;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: var(--nm-space-10) var(--nm-space-16);
+    border-radius: var(--nm-row-radius);
+    background: var(--nm-raised);
+    color: var(--nm-fg);
+    line-height: var(--nm-leading-normal);
+    text-align: start;
+    overflow-wrap: anywhere;
+  }
+
+  .nm-message__bubble .markdown,
+  .nm-message__body .markdown,
+  .nm-message__body .text-message {
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-regular);
+    color: var(--nm-fg);
+  }
+
+  .nm-message__body {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    color: var(--nm-fg);
+    line-height: var(--nm-leading-relaxed);
+    overflow-wrap: anywhere;
+  }
+
+  .nm-message__body :where(a, button),
+  .nm-message__bubble :where(a, button),
+  .nm-message__body [data-sd-animate],
+  .nm-message__bubble [data-sd-animate],
+  .nm-message__body :not(pre) > code,
+  .nm-message__bubble :not(pre) > code {
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .nm-message__body pre,
+  .nm-message__bubble pre {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+
+  .nm-message__flow {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--nm-space-16);
+  }
+
+  .nm-message__body .markdown.prose,
+  .nm-message__bubble .markdown.prose {
+    max-width: none;
+    color: var(--nm-fg);
+    font-size: var(--nm-type-body);
+    line-height: var(--nm-leading-relaxed);
+    --tw-prose-body: var(--nm-fg);
+    --tw-prose-headings: var(--nm-fg);
+    --tw-prose-bold: var(--nm-fg);
+    --tw-prose-quotes: var(--nm-fg-subtle);
+    --tw-prose-quote-borders: var(--nm-line);
+    --tw-prose-links: var(--nm-fg-subtle);
+  }
+
+  .nm-message__body .markdown.prose > :first-child,
+  .nm-message__bubble .markdown.prose > :first-child {
+    margin-top: 0;
+  }
+
+  .nm-message__body .markdown.prose > :last-child,
+  .nm-message__bubble .markdown.prose > :last-child {
+    margin-bottom: 0;
+  }
+
+  .nm-message__body .markdown.prose :where(p),
+  .nm-message__bubble .markdown.prose :where(p) {
+    margin-top: 0;
+    margin-bottom: 0.75em;
+  }
+
+  .nm-message__body .markdown.prose :where(h1),
+  .nm-message__bubble .markdown.prose :where(h1) {
+    font-size: 1.25rem;
+    font-weight: var(--nm-weight-semibold);
+    line-height: var(--nm-leading-snug);
+    margin: 1em 0 0.4em;
+  }
+
+  .nm-message__body .markdown.prose :where(h2),
+  .nm-message__bubble .markdown.prose :where(h2) {
+    font-size: 1.125rem;
+    font-weight: var(--nm-weight-semibold);
+    line-height: var(--nm-leading-snug);
+    margin: 0.9em 0 0.35em;
+  }
+
+  .nm-message__body .markdown.prose :where(h3),
+  .nm-message__body .markdown.prose :where(h4),
+  .nm-message__bubble .markdown.prose :where(h3),
+  .nm-message__bubble .markdown.prose :where(h4) {
+    font-size: 1rem;
+    font-weight: var(--nm-weight-semibold);
+    line-height: var(--nm-leading-snug);
+    margin: 0.85em 0 0.3em;
+  }
+
+  .nm-message__body .markdown.prose :where(ul, ol),
+  .nm-message__bubble .markdown.prose :where(ul, ol) {
+    margin-top: 0.35em;
+    margin-bottom: 0.75em;
+    padding-inline-start: 1.25em;
+  }
+
+  .nm-message__body .markdown.prose :where(li),
+  .nm-message__bubble .markdown.prose :where(li) {
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
+  }
+
+  .nm-message__body .markdown.prose :where(blockquote),
+  .nm-message__bubble .markdown.prose :where(blockquote) {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+    color: var(--nm-fg-subtle);
+    border-left-color: var(--nm-line);
+    font-weight: var(--nm-weight-regular);
+  }
+
+  .nm-message__body .markdown.prose :where(blockquote p:first-of-type)::before,
+  .nm-message__body .markdown.prose :where(blockquote p:last-of-type)::after,
+  .nm-message__bubble .markdown.prose :where(blockquote p:first-of-type)::before,
+  .nm-message__bubble .markdown.prose :where(blockquote p:last-of-type)::after {
+    content: none;
+  }
+
+  .nm-message__status {
+    margin: 0;
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-body);
+    line-height: var(--nm-leading-normal);
+  }
+
+  .nm-message__tools {
+    width: 100%;
+    min-width: 0;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-message__tools button,
+  .nm-message__tool-line {
+    display: flex;
+    width: 100%;
+    align-items: flex-start;
+    gap: var(--nm-space-8);
+    margin: 0;
+    padding: var(--nm-icon-pad);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: var(--nm-type-spec);
+    line-height: var(--nm-leading-snug);
+    text-align: start;
+  }
+
+  .nm-message__tools button {
+    cursor: pointer;
+  }
+
+  .nm-message__tools button:hover {
+    color: var(--nm-fg);
+  }
+
+  .nm-message__tools button:focus-visible,
+  button.nm-message-meta:focus-visible {
+    outline: none;
+  }
+
+  .nm-message__tools button > span:not([class^='nm-trace']),
+  .nm-message__tool-line > span:not([class^='nm-trace']),
+  .nm-message__tools li > span:not([class^='nm-trace']) {
+    min-width: 0;
+    flex: 1;
+    overflow-wrap: anywhere;
+  }
+
+  .nm-message__tools svg {
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    flex: none;
+  }
+
+  .nm-message__tools button img,
+  .nm-message-meta__chevron {
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    flex: none;
+    transition: transform 160ms ease;
+  }
+
+  .nm-trace__icon img {
+    width: 0.875rem;
+    height: 0.875rem;
+    flex: none;
+    border-radius: 9999px;
+  }
+
+  .nm-message__tools button[aria-expanded='true'] img,
+  .nm-message-meta__chevron[data-open='true'] {
+    transform: rotate(90deg);
+  }
+
+  .nm-message__tools ul,
+  .nm-message__tools-body,
+  .nm-trace__content {
+    margin: 0;
+    padding: 0 0 var(--nm-space-4) var(--nm-space-24);
+    list-style: none;
+  }
+
+  .nm-message__tools ul:not([hidden]),
+  .nm-message__tools-body:not([hidden]),
+  .nm-trace__content:not([hidden]) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--nm-space-2);
+  }
+
+  .nm-message__tools li {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nm-space-8);
+    padding: var(--nm-space-2) 0;
+    font-size: var(--nm-type-spec);
+    line-height: var(--nm-leading-snug);
+  }
+
+  .nm-trace {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--nm-space-2);
+  }
+
+  .nm-trace__collapsible {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .nm-trace__header {
+    display: flex;
+    width: fit-content;
+    max-width: 100%;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-trace__header > .nm-trace__trigger {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+
+  .nm-trace__action {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+  }
+
+  .nm-trace__trigger > .nm-trace__line {
+    padding: 0;
+    width: auto;
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+
+  .nm-message__tools button.nm-trace__trigger {
+    display: flex;
+    width: fit-content;
+    max-width: 100%;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-message__tools li.nm-trace__line,
+  .nm-message__tools .nm-trace__line,
+  .nm-trace__line {
+    display: flex;
+    width: fit-content;
+    max-width: 100%;
+    min-width: 0;
+    align-items: center;
+    gap: var(--nm-space-8);
+  }
+
+  .nm-trace__line[data-status='running'] {
+    color: var(--nm-fg);
+  }
+
+  .nm-trace__line[data-status='pending'] {
+    color: var(--nm-stroke);
+  }
+
+  .nm-trace__line[data-status='error'] {
+    color: var(--nm-destructive);
+  }
+
+  .nm-message__tools .nm-trace__icon,
+  .nm-trace__icon {
+    display: inline-flex;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    flex: 0 0 var(--nm-icon-button);
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* A glyph drawn inside the icon box fills it, so the box is never taller than its icon. */
+  .nm-trace__icon > .nm-trace__icon {
+    display: block;
+    width: 100%;
+    height: 100%;
+    flex: none;
+  }
+
+  .nm-trace__icon--spin {
+    animation: nm-trace-spin 1s linear infinite;
+  }
+
+  @keyframes nm-trace-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .nm-message__tools .nm-trace__title,
+  .nm-trace__title {
+    min-width: 0;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nm-message__tools .nm-trace__description,
+  .nm-trace__description {
+    flex: 0 0 auto;
+    color: var(--nm-stroke);
+    font-size: var(--nm-type-ui-sm);
+    line-height: var(--nm-leading-snug);
+    white-space: nowrap;
+  }
+
+  .nm-message__tools .nm-trace__badges,
+  .nm-trace__badges {
+    display: inline-flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nm-space-4);
+  }
+
+  .nm-message__tools .nm-trace__badge,
+  .nm-trace__badge {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--nm-space-4);
+    height: var(--badge-h);
+    padding: 0 var(--badge-px);
+    border: 0;
+    border-radius: var(--badge-r);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--badge-fs);
+    font-weight: var(--control-fw);
+    line-height: var(--nm-leading-none);
+    white-space: nowrap;
+  }
+
+  .nm-trace__badge img {
+    width: 0.75rem;
+    height: 0.75rem;
+    flex: 0 0 0.75rem;
+    border-radius: 9999px;
+  }
+
+  .nm-trace__link {
+    display: flex;
+    width: fit-content;
+    max-width: 100%;
+    min-width: 0;
+    padding: var(--nm-space-2) 0;
+    color: var(--nm-fg-subtle);
+    text-decoration: none;
+    font-size: var(--nm-type-spec);
+    line-height: var(--nm-leading-snug);
+  }
+
+  .nm-trace__link:hover,
+  .nm-trace__link:focus-visible {
+    color: var(--nm-fg);
+    outline: none;
+  }
+
+  .nm-trace__content[hidden] {
+    display: none;
+  }
+
+  .nm-message__think {
+    width: 100%;
+    max-height: 16rem;
+    overflow: auto;
+    color: var(--nm-fg-subtle);
+    font-size: var(--nm-type-spec);
+    line-height: var(--nm-leading-normal);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .nm-message__think:has(.nm-reasoning-markdown) {
+    white-space: normal;
+  }
+
+  .nm-message__work {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--nm-space-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .nm-message__work-item,
+  .nm-message__work-error {
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-regular);
+    line-height: normal;
+    word-break: break-word;
+  }
+
+  .nm-message__work-item {
+    color: var(--nm-stroke);
+  }
+
+  .nm-message__work-error {
+    color: var(--nm-fg);
+  }
+
+  .nm-message-meta {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nm-space-2);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+  }
+
+  button.nm-message-meta {
+    cursor: pointer;
+  }
+
+  button.nm-message-meta:hover .nm-message-meta__label {
+    color: var(--nm-fg);
+  }
+
+  .nm-message-meta__label {
+    margin: 0;
+    color: var(--nm-fg-subtle);
+    line-height: var(--nm-leading-snug);
+  }
+
+  .nm-text-shimmer {
+    display: inline-block;
+    color: transparent;
+    background-image:
+      linear-gradient(
+        90deg,
+        transparent calc(50% - var(--nm-shimmer-spread)),
+        var(--nm-fg) 50%,
+        transparent calc(50% + var(--nm-shimmer-spread))
+      ),
+      linear-gradient(var(--nm-stroke), var(--nm-stroke));
+    background-size: var(--nm-shimmer-travel) 100%, auto;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+    animation: nm-text-shimmer var(--nm-shimmer-duration) linear infinite;
+  }
+
+  @keyframes nm-text-shimmer {
+    from {
+      background-position: 100% center, 0 0;
+    }
+
+    to {
+      background-position: 0% center, 0 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-text-shimmer {
+      color: var(--nm-fg-subtle);
+      background: none;
+      animation: none;
+    }
+
+    .nm-trace__icon--spin {
+      animation: none;
+    }
+
+    .nm-message__tools button img,
+    .nm-message-meta__chevron {
+      transition: none;
+    }
+  }
+
+  .nm-message-actions {
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+
+  @media (hover: hover) {
+    .message-render .nm-message-actions--reveal {
+      opacity: 0;
+      transition:
+        opacity var(--reveal) ease-out,
+        color var(--reveal) ease-out,
+        background-color var(--reveal) ease-out;
+    }
+
+    .message-render:hover .nm-message-actions--reveal,
+    .message-render:focus-visible .nm-message-actions--reveal,
+    .message-render:has(:focus-visible:not(:is(input, textarea, [contenteditable])))
+      .nm-message-actions--reveal {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .message-render .nm-message-actions--reveal {
+      transition: none;
+    }
+  }
+
+  .nm-approval {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--nm-space-10);
+  }
+
+  .nm-preview-card {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--nm-radius-lg);
+    background: var(--nm-raised);
+  }
+
+  .nm-preview-card--building {
+    animation: nm-preview-pulse var(--nm-knot-pulse) var(--ease) infinite;
+  }
+
+  .nm-preview-card--building .nm-preview-card__stage::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: var(--nm-raised);
+    animation: nm-preview-pulse var(--nm-knot-pulse) var(--ease) infinite;
+  }
+
+  .nm-preview-card__bar {
+    display: flex;
+    align-items: center;
+    padding: var(--nm-space-12) var(--nm-space-16);
+    background: transparent;
+  }
+
+  .nm-preview-card__title {
+    margin: 0;
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-body);
+    font-weight: var(--nm-weight-medium);
+    line-height: normal;
+    color: var(--nm-fg);
+  }
+
+  .nm-preview-card__stage {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    background: var(--nm-canvas);
+  }
+
+  .nm-preview-card__frame {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    pointer-events: none;
+    background: var(--nm-canvas);
+  }
+
+  @keyframes nm-preview-pulse {
+    0%,
+    100% {
+      background-color: var(--nm-raised);
+    }
+
+    50% {
+      background-color: var(--nm-panel);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nm-preview-card--building,
+    .nm-preview-card--building .nm-preview-card__stage::after {
+      animation: none;
+    }
+  }
+

package/registry/ui/components/nm-message/nm-text-shimmer.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import { NM_MESSAGE_CLASSES } from '../../config/nm-message.ts';
+
+export function NmTextShimmer(props: { children: string }): ReactNode {
+  return <span className={NM_MESSAGE_CLASSES.shimmer}>{props.children}</span>;
+}