@semiont/react-ui 0.5.26 → 0.5.28

package/src/components/resource/annotate-renderers.tsx

@@ -51,7 +51,7 @@ export interface AnnotateMediaRendererProps {
   // Text-path extras. Optional on the shared interface: a custom image or PDF
   // renderer simply ignores them, the same way `MediaRendererProps.session` is
   // documented to be ignorable.
-  newAnnotationIds?: Set<string>;
+  sparkleAnnotationIds?: Set<string>;
   scrollToAnnotationId?: string | null;
   showLineNumbers?: boolean;
   enableWidgets?: boolean;
@@ -66,7 +66,7 @@ export function TextAnnotateRenderer({
   content,
   annotations,
   session,
-  newAnnotationIds,
+  sparkleAnnotationIds,
   hoveredAnnotationId,
   scrollToAnnotationId,
   showLineNumbers = false,
@@ -84,7 +84,7 @@ export function TextAnnotateRenderer({
       content={content}
       segments={segments}
       editable={false}
-      newAnnotationIds={newAnnotationIds}
+      sparkleAnnotationIds={sparkleAnnotationIds}
       {...(hoveredAnnotationId !== undefined && { hoveredAnnotationId })}
       {...(scrollToAnnotationId !== undefined && { scrollToAnnotationId })}
       sourceView={true}

package/src/components/resource/event-formatting.ts

@@ -81,7 +81,6 @@ export function formatEventType(type: PersistedEventType, t: TranslateFn, payloa
 
     case 'job:completed':
     case 'job:started':
-    case 'job:progress':
     case 'job:failed':
       return t('jobEvent');
 
@@ -128,7 +127,6 @@ export function getEventEmoji(type: PersistedEventType, payload?: any): string {
     case 'job:completed':
       return '🔗';  // Link emoji for linked document creation
     case 'job:started':
-    case 'job:progress':
       return '⚙️';  // Gear for job processing
     case 'job:failed':
       return '❌';  // X mark for failed jobs
@@ -276,7 +274,6 @@ export function getEventDisplayContent(
     }
 
     case 'job:started':
-    case 'job:progress':
     case 'job:failed':
     case 'yield:representation-added':
     case 'yield:representation-removed':

package/src/components/resource/panels/AssessmentEntry.tsx

@@ -88,7 +88,7 @@ export function AssessmentEntry({
       data-type="assessment"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        session?.client.browse.click(assessment.id, assessment.motivation);
+        session?.client.browse.click(assessment.id);
       }}
       {...hoverProps}
     >

package/src/components/resource/panels/AssessmentPanel.css

@@ -30,10 +30,6 @@
   letter-spacing: 0.05em;
 }
 
-[data-theme="dark"] .semiont-assessment-panel__label {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-assessment-panel__rating {
   display: flex;
   gap: var(--semiont-panel-padding-xs);
@@ -46,8 +42,11 @@
   transition: color 0.2s ease;
 }
 
+/* An UNRATED star must recede. gray-300 is near-white: on a dark panel the
+   empty stars outshone the filled ones, inverting the reading. Dark takes a
+   dim grey; the filled star keeps the warning hue. */
 [data-theme="dark"] .semiont-assessment-panel__star {
-  color: var(--semiont-color-gray-300);
+  color: var(--semiont-color-gray-600);
 }
 
 .semiont-assessment-panel__star:hover {
@@ -59,7 +58,7 @@
 }
 
 [data-theme="dark"] .semiont-assessment-panel__star--filled {
-  color: var(--semiont-color-warning);
+  color: var(--semiont-color-warning-light);
 }
 
 .semiont-assessment-panel__textarea {

package/src/components/resource/panels/AssistSection.css

@@ -126,267 +126,119 @@
    Detection Log (Completed Results)
    ============================================ */
 
-
 /* ============================================
    Detection Progress Display
    ============================================ */
 
-.semiont-annotation-progress {
-  background-color: var(--semiont-bg-primary);
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  padding: 1rem;
-  border: 2px solid var(--semiont-color-blue-500);
-}
-
-[data-theme="dark"] .semiont-annotation-progress {
-  background-color: var(--semiont-color-gray-800);
-  border-color: var(--semiont-color-blue-600);
-}
-
-/* Header section */
-.semiont-annotation-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 0.75rem;
-}
-
-.semiont-annotation-title {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--semiont-color-gray-900);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-}
-
-[data-theme="dark"] .semiont-annotation-title {
-  color: var(--semiont-color-gray-100);
-}
-
-.semiont-annotation-sparkle {
-  font-size: 1.125rem;
-  animation: semiont-sparkle-infinite 1.5s ease-in-out infinite;
-}
-
-@keyframes semiont-sparkle-infinite {
-  0%, 100% {
-    opacity: 0.5;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}
-
-.semiont-annotation-cancel {
-  color: var(--semiont-color-gray-600);
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.semiont-annotation-cancel:hover {
-  color: var(--semiont-color-gray-900);
-}
-
-[data-theme="dark"] .semiont-annotation-cancel {
-  color: var(--semiont-color-gray-400);
-}
-
-[data-theme="dark"] .semiont-annotation-cancel:hover {
-  color: var(--semiont-color-gray-300);
-}
-
-/* Completed entity types log */
-.semiont-annotation-log {
-  margin-bottom: 0.75rem;
+/* ── Assist progress: TWO containers, not five ──────────────────────────────
+   The widget was `.semiont-assist-widget` > `.semiont-annotation-progress` >
+   `__params` > `__message`, each with its own border, padding and tint — four
+   nested boxes around one sentence of status. The outer `.semiont-assist-widget`
+   (above) already provides the card; this provides the status region inside it.
+   ASSIST-PROGRESS-CONSOLIDATION P3. */
+.semiont-assist-progress {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.375rem;
+  position: relative;
 }
 
-.semiont-annotation-log-item {
-  font-size: 0.75rem;
-  color: var(--semiont-color-gray-600);
+.semiont-assist-progress__status {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 0.5rem;
+  padding-right: 1.5rem; /* room for the single control */
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-annotation-log-item {
-  color: var(--semiont-color-gray-400);
-}
-
-.semiont-annotation-check {
-  color: var(--semiont-color-green-600);
-}
-
-[data-theme="dark"] .semiont-annotation-check {
-  color: var(--semiont-color-green-400);
+.semiont-assist-progress__icon {
+  flex: none;
 }
 
-.semiont-annotation-entity-type {
-  font-weight: 500;
+/* The subject and the parameters are context for the status, not peers of it. */
+.semiont-assist-progress__subject,
+.semiont-assist-progress__params {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-secondary);
 }
 
-.semiont-annotation-progress__params {
-  margin-bottom: 0.75rem;
-  padding: 0.5rem;
-  background-color: rgba(59, 130, 246, 0.05);
-  border-radius: 0.375rem;
-  border: 1px solid rgba(59, 130, 246, 0.2);
+[data-theme="dark"] .semiont-assist-progress__subject,
+[data-theme="dark"] .semiont-assist-progress__params {
+  color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-annotation-progress__params {
-  background-color: rgba(59, 130, 246, 0.1);
-  border-color: rgba(59, 130, 246, 0.3);
+.semiont-assist-progress__subject {
+  font-variant-numeric: tabular-nums;
 }
 
-.semiont-annotation-progress__params-title {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--semiont-color-blue-700);
-  margin-bottom: 0.25rem;
-}
-
-[data-theme="dark"] .semiont-annotation-progress__params-title {
-  color: var(--semiont-color-blue-300);
+/* D8: the finished run's artifact, offered as a link. */
+/* The finished run's artifact — the ended frame's primary affordance
+   (GENERATION-ARRIVAL P1, D3's fallback): a button-shaped invitation to open
+   what was made, not an underlined footnote beside the bar. */
+.semiont-assist-progress__outcome {
+  align-self: stretch;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--semiont-color-primary-300);
+  border-radius: 0.5rem;
+  background: var(--semiont-color-primary-50);
+  cursor: pointer;
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-color-primary-700);
+  text-align: left;
 }
 
-.semiont-annotation-progress__param {
-  font-size: 0.75rem;
-  color: var(--semiont-color-gray-700);
+.semiont-assist-progress__outcome:hover {
+  border-color: var(--semiont-color-primary-400);
+  background: var(--semiont-color-primary-100);
+  color: var(--semiont-color-primary-800);
 }
 
-[data-theme="dark"] .semiont-annotation-progress__param {
-  color: var(--semiont-color-gray-300);
+[data-theme="dark"] .semiont-assist-progress__outcome {
+  border-color: var(--semiont-color-primary-700);
+  background: var(--semiont-color-primary-900);
+  color: var(--semiont-color-primary-300);
 }
 
-.semiont-annotation-progress__param-label {
-  font-weight: 500;
+[data-theme="dark"] .semiont-assist-progress__outcome:hover {
+  border-color: var(--semiont-color-primary-600);
+  background: var(--semiont-color-primary-800);
+  color: var(--semiont-color-primary-200);
 }
 
-.semiont-annotation-progress__status {
+.semiont-assist-progress__params {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   gap: 0.5rem;
-  position: relative;
 }
 
-.semiont-annotation-progress__message {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--semiont-color-gray-900);
-  font-weight: 500;
-  padding: 0.75rem 2.5rem 0.75rem 1rem; /* Extra right padding for close button */
-  border-radius: 0.5rem;
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
-  border: 2px solid rgba(59, 130, 246, 0.3);
-  animation: semiont-detection-pulse 2s ease-in-out infinite;
+.semiont-assist-progress__param-label {
+  font-weight: var(--semiont-font-medium);
 }
 
-.semiont-annotation-progress__close {
+/* One control, top-right, quiet until hovered. */
+.semiont-assist-progress__control {
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  border: none;
-  background-color: rgba(0, 0, 0, 0.1);
-  color: var(--semiont-color-gray-700);
-  font-size: 1.25rem;
+  top: 0;
+  right: 0;
+  padding: 0.125rem 0.25rem;
   line-height: 1;
-  border-radius: 0.25rem;
+  background: none;
+  border: none;
   cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
+  color: var(--semiont-text-secondary);
 }
 
-.semiont-annotation-progress__close:hover {
-  background-color: rgba(0, 0, 0, 0.2);
-  color: var(--semiont-color-gray-900);
+.semiont-assist-progress__control:hover {
+  color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-annotation-progress__close {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: var(--semiont-color-gray-300);
-}
-
-[data-theme="dark"] .semiont-annotation-progress__close:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: var(--semiont-color-gray-100);
-}
-
-[data-theme="dark"] .semiont-annotation-progress__message {
-  color: var(--semiont-color-gray-100);
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25));
-  border-color: rgba(59, 130, 246, 0.5);
-}
-
-@keyframes semiont-detection-pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.85;
-    transform: scale(1.02);
-  }
-}
-
-.semiont-annotation-progress__icon {
-  font-size: 1.125rem;
-  animation: semiont-sparkle-rotate 2s linear infinite;
-}
-
-@keyframes semiont-sparkle-rotate {
-  0% {
-    transform: rotate(0deg) scale(1);
-    filter: brightness(1);
-  }
-  25% {
-    transform: rotate(90deg) scale(1.2);
-    filter: brightness(1.3);
-  }
-  50% {
-    transform: rotate(180deg) scale(1);
-    filter: brightness(1);
-  }
-  75% {
-    transform: rotate(270deg) scale(1.2);
-    filter: brightness(1.3);
-  }
-  100% {
-    transform: rotate(360deg) scale(1);
-    filter: brightness(1);
-  }
-}
-
-.semiont-annotation-progress__details {
-  font-size: 0.75rem;
-  color: var(--semiont-color-gray-500);
-}
-
-[data-theme="dark"] .semiont-annotation-progress__details {
-  color: var(--semiont-color-gray-400);
+[data-theme="dark"] .semiont-assist-progress__control {
+  color: var(--semiont-text-secondary);
 }
 
-/* ============================================
-   Motivation-Specific Theming via data-type
-   ============================================ */
-
-/* Highlight */
 .semiont-assist-widget[data-type="highlight"] {
   border-color: var(--semiont-color-yellow-300);
 }
@@ -436,56 +288,36 @@
    ============================================ */
 
 /* Highlight - Yellow */
-.semiont-annotation-progress[data-type="highlight"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(234, 179, 8, 0.15));
-  border-color: rgba(250, 204, 21, 0.3);
-}
 
-[data-theme="dark"] .semiont-annotation-progress[data-type="highlight"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(250, 204, 21, 0.25), rgba(234, 179, 8, 0.25));
-  border-color: rgba(250, 204, 21, 0.5);
-}
-
-/* Comment - Gray */
-.semiont-annotation-progress[data-type="comment"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(75, 85, 99, 0.15));
-  border-color: rgba(107, 114, 128, 0.3);
-}
-
-[data-theme="dark"] .semiont-annotation-progress[data-type="comment"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(107, 114, 128, 0.25), rgba(75, 85, 99, 0.25));
-  border-color: rgba(107, 114, 128, 0.5);
-}
-
-/* Assessment - Purple */
-.semiont-annotation-progress[data-type="assessment"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(147, 51, 234, 0.15));
-  border-color: rgba(168, 85, 247, 0.3);
-}
-
-[data-theme="dark"] .semiont-annotation-progress[data-type="assessment"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(147, 51, 234, 0.25));
-  border-color: rgba(168, 85, 247, 0.5);
-}
-
-/* Tag - Orange */
-.semiont-annotation-progress[data-type="tag"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(249, 115, 22, 0.15));
-  border-color: rgba(251, 146, 60, 0.3);
+/*
+ * The progress bar. `AssistProgress` is its only consumer in the whole
+ * package, so it lives here rather than in `styles/core/` — it was defined in
+ * three files while nothing else rendered it (CLEAN-PROGRESS D4). If a second
+ * consumer ever appears, promoting these rules to core is a move, not a copy.
+ *
+ * The track is NOT `--semiont-bg-secondary`: that is exactly
+ * `.semiont-assist-widget`'s own background, so the track went invisible inside
+ * the card and the fill floated with nothing to measure it against (spotted in
+ * live testing, 2026-08-12).
+ */
+.semiont-progress-bar {
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: var(--semiont-radius-full);
+  background-color: var(--semiont-color-gray-200);
 }
 
-[data-theme="dark"] .semiont-annotation-progress[data-type="tag"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(251, 146, 60, 0.25), rgba(249, 115, 22, 0.25));
-  border-color: rgba(251, 146, 60, 0.5);
+[data-theme="dark"] .semiont-progress-bar {
+  background-color: var(--semiont-color-gray-700);
 }
 
-/* Reference - Blue */
-.semiont-annotation-progress[data-type="reference"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
-  border-color: rgba(59, 130, 246, 0.3);
+.semiont-progress-bar__fill {
+  height: 100%;
+  background-color: var(--semiont-color-primary-500);
+  transition: width 0.3s ease;
 }
 
-[data-theme="dark"] .semiont-annotation-progress[data-type="reference"] .semiont-annotation-progress__message {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25));
-  border-color: rgba(59, 130, 246, 0.5);
+[data-theme="dark"] .semiont-progress-bar__fill {
+  background-color: var(--semiont-color-primary-400);
 }

package/src/components/resource/panels/AssistSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback } from 'react';
+import { assistProgressCopy, assistSubjectCopy, assistParamLabel } from '../../../lib/assist-progress-copy';
 import { useTranslations } from '../../../contexts/TranslationContext';
 import type { SemiontSession } from '@semiont/sdk';
 import type { Motivation, components } from '@semiont/core';
@@ -93,11 +94,10 @@ export function AssistSection({
         translations: {
           cancel: t('cancel'),
           inProgress: t('annotating'),
-          complete: t('complete'),
-          failed: t('failed'),
-          paramsTitle: ta('paramsTitle'),
-          processing: (label) => ta('processing', { label }),
           close: ta('close'),
+          message: assistProgressCopy(ta),
+          subject: assistSubjectCopy(ta),
+          paramLabel: assistParamLabel(ta),
         },
       }}
       form={

package/src/components/resource/panels/AssistShell.tsx

@@ -2,13 +2,13 @@
 
 import { useState, useEffect, type ReactNode } from 'react';
 import type { components } from '@semiont/core';
-import { AssistProgress, type AssistProgressProps } from '../../AssistProgress';
+import { AssistProgress, type AssistProgressProps, type AssistDataType } from '../../AssistProgress';
 
 type JobProgress = components['schemas']['JobProgress'];
 
 export interface AssistShellProps {
-  /** localStorage persist-key suffix and CSS `data-type` ('highlight' | 'comment' | 'assessment' | 'reference' | 'tag'). */
-  assistType: string;
+  /** localStorage persist-key suffix and CSS `data-type`. */
+  assistType: AssistDataType;
   /** Collapsible section title (already translated). */
   title: string;
   isAssisting: boolean;
@@ -24,7 +24,7 @@ export interface AssistShellProps {
    * itself, so a caller that omitted this would render untranslated chrome —
    * the failure Lane A exists to make impossible.
    */
-  progressProps: Omit<AssistProgressProps, 'progress' | 'dataType'>;
+  progressProps: Omit<AssistProgressProps, 'progress' | 'dataType' | 'ended'>;
 }
 
 /**
@@ -70,6 +70,14 @@ export function AssistShell({ assistType, title, isAssisting, progress, form, pr
             <AssistProgress
               progress={progress}
               dataType={assistType}
+              // `ended` is deliberately NOT in `progressProps` (it is Omit'd):
+              // the shell watches the job lifecycle, so a panel cannot get this
+              // wrong or forget it.
+              // D7: terminality is the OWNER's fact. `isAssisting` follows the
+              // job lifecycle (job:complete / job:fail); the widget must never
+              // infer "done" from a progress payload, which cannot tell it
+              // about a cancel or a crash after the last tick.
+              ended={!isAssisting}
               {...progressProps}
               {...(isAssisting ? { onDismiss: undefined } : {})}
             />

package/src/components/resource/panels/CollaborationPanel.css

@@ -19,10 +19,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 /* Sections */
 .semiont-collaboration-panel__section {
   display: flex;
@@ -93,10 +89,6 @@
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__status-text {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-collaboration-panel__status-text[data-connected="true"] {
   color: var(--semiont-color-success-dark);
 }
@@ -110,10 +102,6 @@
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__event-count {
-  color: var(--semiont-text-tertiary);
-}
-
 /* Details */
 .semiont-collaboration-panel__details {
   display: flex;
@@ -133,10 +121,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__label {
-  color: var(--semiont-text-primary);
-}
-
 /* Description */
 .semiont-collaboration-panel__description {
   margin: 0;
@@ -208,15 +192,56 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__username {
+.semiont-collaboration-panel__user-status {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-tertiary);
+}
+
+/* Collaborators roster — one row per software agent (INFERENCE-LIMITS-EXPOSURE P3a) */
+.semiont-collaboration-panel__collaborator {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.375rem 0;
+  font-size: var(--semiont-text-sm);
+  line-height: 1.4;
+}
+
+.semiont-collaboration-panel__collaborator + .semiont-collaboration-panel__collaborator {
+  border-top: 1px solid var(--semiont-border-secondary);
+}
+
+[data-theme="dark"] .semiont-collaboration-panel__collaborator + .semiont-collaboration-panel__collaborator {
+  border-top-color: var(--semiont-color-gray-700);
+}
+
+.semiont-collaboration-panel__collaborator-id {
+  display: flex;
+  gap: 0.375rem;
+  align-items: baseline;
   color: var(--semiont-text-primary);
 }
 
-.semiont-collaboration-panel__user-status {
+/* The provider is context for the model, not a peer of it. */
+.semiont-collaboration-panel__collaborator-provider {
   font-size: var(--semiont-text-xs);
-  color: var(--semiont-text-tertiary);
+  color: var(--semiont-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
-[data-theme="dark"] .semiont-collaboration-panel__user-status {
-  color: var(--semiont-text-tertiary);
-}
+.semiont-collaboration-panel__collaborator-model {
+  font-weight: var(--semiont-font-medium);
+  word-break: break-all;
+}
+
+.semiont-collaboration-panel__collaborator-jobs,
+.semiont-collaboration-panel__collaborator-limits {
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-secondary);
+}
+
+/* Ceilings are figures — align them with the numeral treatment used elsewhere. */
+.semiont-collaboration-panel__collaborator-limits {
+  font-variant-numeric: tabular-nums;
+}