@flamingo-stack/openframe-frontend-core 0.0.715 → 0.0.717

package/src/components/features/approval-level.tsx

@@ -30,8 +30,8 @@ export interface ApprovalLevelMeta {
 
 /**
  * THE look and wording of an approval level: its name, its one-line meaning,
- * its icon and its colour. The guardrails panel's dropdown, the icon control
- * below and any read-only mark read it, so a level is the same everywhere.
+ * its icon and its colour. The guardrails panel's dropdown and `ApprovalLevelView`
+ * below read it, so a level is the same everywhere.
  */
 export const APPROVAL_LEVEL_META: Record<ApprovalLevel, ApprovalLevelMeta> = {
   ALLOW: {
@@ -57,61 +57,79 @@ export const APPROVAL_LEVEL_META: Record<ApprovalLevel, ApprovalLevelMeta> = {
 
 const ICON_PX = 16;
 
-export interface ApprovalLevelMarkProps {
-  level: ApprovalLevel;
-  /** Icon only: the name is the mark's accessible name and its tooltip. Default false (icon and name). */
-  iconOnly?: boolean;
-  className?: string;
-}
-
-/** One level, read-only: its icon in its colour, with its name beside it or as its tooltip. */
-export function ApprovalLevelMark({ level, iconOnly = false, className }: ApprovalLevelMarkProps) {
-  const { label, hint, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
-  const mark = (
-    <span className={cn('inline-flex items-center gap-[var(--spacing-system-xxs)] text-h6', toneClassName, className)}>
-      <Icon size={ICON_PX} className="shrink-0" aria-hidden />
-      {iconOnly ? <span className="sr-only">{label}</span> : label}
-    </span>
-  );
-  return iconOnly ? (
-    <TouchFriendlyTooltip content={`${label}: ${hint}`} side="top">
-      {mark}
-    </TouchFriendlyTooltip>
-  ) : (
-    mark
-  );
-}
-
-export interface ApprovalLevelControlProps {
+export interface ApprovalLevelViewProps {
+  /** The level in force. */
   value: ApprovalLevel;
-  onChange: (level: ApprovalLevel) => void;
-  /** The id of the element that names what is being decided (the rule's label). */
-  'aria-labelledby'?: string;
-  /** The level in force, written beside the icons. Default true: a row reads without hovering, and on touch. */
-  showLabel?: boolean;
+  /**
+   * Whether the level can be changed here. `false`: the level's own icon.
+   * `true`: four icons, one per level, in a single-choice group. Default: true
+   * when `onChange` is given.
+   */
+  editable?: boolean;
+  /** Editable: the level picked. */
+  onChange?: (level: ApprovalLevel) => void;
+  /** Editable: the group is shown and cannot be changed (a locked rule). */
   disabled?: boolean;
+  /**
+   * The level's name, written before the icons. Default true: a row reads
+   * without hovering, and on touch. False keeps the name as the accessible
+   * name (and, read-only, as the icon's tooltip).
+   */
+  showLabel?: boolean;
+  /** Editable: the id of the element that names what is being decided (the rule's label). */
+  'aria-labelledby'?: string;
   className?: string;
 }
 
 /**
- * A choice of approval level as four icons, one per level, in a single-choice
- * group (arrow keys move, like every toggle group). Each icon has the level's
- * name as its accessible name and a tooltip with what the level means (hover
- * or keyboard focus; a tap selects). The level in force wears its colour, and its name
- * is written beside the group, so the choice never depends on a tooltip.
+ * THE way a level is shown, read-only or editable, by one prop: the level's
+ * name in its colour, then its icon (read-only) or the four levels' icons as a
+ * single-choice group (editable; arrow keys move, like every toggle group).
+ * Name, icon, colour and tooltip are `APPROVAL_LEVEL_META`'s in both, so a
+ * rule reads the same on a page that shows it and on one that lets it change.
+ *
+ * Editable, each icon has its level's name as its accessible name and a
+ * tooltip with what the level means (hover or keyboard focus; a tap selects).
  */
-export function ApprovalLevelControl({
+export function ApprovalLevelView({
   value,
+  editable,
   onChange,
-  'aria-labelledby': labelledBy,
-  showLabel = true,
   disabled = false,
+  showLabel = true,
+  'aria-labelledby': labelledBy,
   className,
-}: ApprovalLevelControlProps) {
+}: ApprovalLevelViewProps) {
   const current = APPROVAL_LEVEL_META[value];
+  const canEdit = editable ?? onChange !== undefined;
+  const name = showLabel ? (
+    <span className={cn('whitespace-nowrap text-h6', current.toneClassName)}>{current.label}</span>
+  ) : null;
+
+  if (!canEdit) {
+    const icon = (
+      <span className={cn('inline-flex shrink-0', current.toneClassName)}>
+        <current.Icon size={ICON_PX} aria-hidden />
+        {!showLabel && <span className="sr-only">{current.label}</span>}
+      </span>
+    );
+    return (
+      <span className={cn('inline-flex shrink-0 items-center gap-[var(--spacing-system-xxs)]', className)}>
+        {name}
+        {showLabel ? (
+          icon
+        ) : (
+          <TouchFriendlyTooltip content={`${current.label}: ${current.hint}`} side="top">
+            {icon}
+          </TouchFriendlyTooltip>
+        )}
+      </span>
+    );
+  }
+
   return (
     <div className={cn('flex shrink-0 items-center gap-[var(--spacing-system-sf)]', className)}>
-      {showLabel && <span className={cn('whitespace-nowrap text-h6', current.toneClassName)}>{current.label}</span>}
+      {name}
       <TooltipProvider delayDuration={150}>
         <ToggleGroup
           type="single"
@@ -121,7 +139,7 @@ export function ApprovalLevelControl({
           disabled={disabled}
           // Clicking the level in force reports '' (deselect): a rule always has a level.
           onValueChange={(next: string) => {
-            if (next && next !== value) onChange(next as ApprovalLevel);
+            if (next && next !== value) onChange?.(next as ApprovalLevel);
           }}
           aria-labelledby={labelledBy}
         >

package/src/components/ui/analyzing-state.tsx

@@ -0,0 +1,57 @@
+import { cn } from '../../utils/cn';
+import { ChatTypingIndicator } from '../chat/chat-typing-indicator';
+import { Skeleton } from './skeleton';
+
+export interface AnalyzingStateProps {
+  /** What is being worked on, as a sentence with no closing mark ("Mingo is analyzing your logs"). */
+  label: string;
+  className?: string;
+}
+
+/** How far each row being read has faded: the list trails off instead of ending. */
+const ROW_OPACITY = ['opacity-100', 'opacity-60', 'opacity-30'] as const;
+/** Each row pulses a beat after the one above it, so the eye reads them as a scan. */
+const ROW_STAGGER_MS = 200;
+
+/**
+ * THE "it is working, nothing to show yet" state of a feed or a window: three
+ * rows still being read, pulsing one after another, over the caller's words
+ * and the chat's own typing dots. It says an agent is at work, where a bare
+ * sentence in an empty box reads as idle.
+ *
+ * Built from the shared pieces only: `Skeleton` for the rows and
+ * `ChatTypingIndicator` for the dots. Still under reduced motion. It is
+ * announced as a status; the rows and dots are decoration.
+ */
+export function AnalyzingState({ label, className }: AnalyzingStateProps) {
+  return (
+    <div role="status" className={cn('flex w-full max-w-sm flex-col items-center gap-4', className)}>
+      <div aria-hidden className="grid w-full grid-cols-1 gap-2">
+        {ROW_OPACITY.map((opacity, row) => {
+          const delay = { animationDelay: `${row * ROW_STAGGER_MS}ms` };
+          return (
+            <div
+              key={opacity}
+              className={cn(
+                'flex items-center gap-3 rounded-md border border-ods-border bg-ods-bg px-3.5 py-3',
+                opacity,
+              )}
+            >
+              <Skeleton
+                className="h-2 w-2 shrink-0 rounded-full bg-ods-flamingo-cyan motion-reduce:animate-none"
+                style={delay}
+              />
+              <Skeleton className="h-2.5 min-w-0 flex-1 motion-reduce:animate-none" style={delay} />
+              <Skeleton className="h-2.5 w-12 shrink-0 motion-reduce:animate-none" style={delay} />
+            </div>
+          );
+        })}
+      </div>
+      {/* A div, not a paragraph: the typing dots are block elements. */}
+      <div className="flex items-center gap-1.5 text-center text-ods-text-secondary text-h4">
+        {label}
+        <ChatTypingIndicator aria-hidden size="sm" dotClassName="bg-ods-text-secondary motion-reduce:animate-none" />
+      </div>
+    </div>
+  );
+}

package/src/components/ui/feature-list.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type React from 'react';
+import { Button } from './button';
 
 export interface FeatureListItemData {
   /** Shown in the boxed slot. Not used by the `numbered` variant. */
@@ -15,13 +16,13 @@ export interface FeatureListProps {
   iconBoxSize?: number;
   /**
    * `boxed` (default): one bordered card, a boxed icon per row.
-   * `numbered`: an ordered list of open rows separated by hairlines, each led
-   * by its two-digit number (process steps).
+   * `numbered`: an ordered list of open rows, each led by its number in a
+   * round marker (process steps).
    */
   variant?: 'boxed' | 'numbered';
   /**
-   * `numbered` only. The step being shown now: it stays at full strength and
-   * the others step back, so the list reads as "you are here" beside a timed
+   * `numbered` only. The step being shown now: it stays at full strength with
+   * its marker lit and the others step back, so the list reads as "you are here" beside a timed
    * demo. Omit for a plain list where every step is equal.
    */
   activeIndex?: number;
@@ -43,38 +44,47 @@ export function FeatureList({
   if (variant === 'numbered') {
     const dims = typeof activeIndex === 'number';
     return (
-      <ol className={`flex flex-col ${className}`}>
+      <ol className={`flex flex-col gap-[var(--spacing-system-lf)] ${className}`}>
         {items.map((item, index) => {
           const current = dims && index === activeIndex;
           const row = (
             <>
-              <span className={`text-h5 ${current ? 'text-ods-flamingo-pink' : 'text-ods-text-secondary'}`}>
-                {String(index + 1).padStart(2, '0')}
+              <span
+                className={`grid h-7 w-7 shrink-0 place-items-center rounded-full border transition-colors duration-200 text-h5 motion-reduce:transition-none ${
+                  current
+                    ? 'border-ods-flamingo-pink bg-ods-flamingo-pink-secondary text-ods-text-primary'
+                    : 'border-ods-border text-ods-text-secondary'
+                }`}
+              >
+                {index + 1}
               </span>
               <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-                <h3 className="text-ods-text-primary text-h3">{item.title}</h3>
-                <p className="text-ods-text-secondary text-h4">{item.description}</p>
+                <h3 className="text-ods-text-primary text-h4">{item.title}</h3>
+                <p className="text-ods-text-secondary text-h6">{item.description}</p>
               </div>
             </>
           );
-          const layout =
-            'grid grid-cols-[48px_minmax(0,1fr)] gap-[var(--spacing-system-m)] py-[var(--spacing-system-l)]';
+          const layout = 'flex items-start gap-[var(--spacing-system-sf)]';
           return (
             <li
               key={index}
               aria-current={current ? 'step' : undefined}
-              className={`border-t border-ods-border transition-opacity duration-200 last:border-b motion-reduce:transition-none ${
+              className={`transition-opacity duration-200 motion-reduce:transition-none ${
                 dims && !current ? 'opacity-55 focus-within:opacity-100 hover:opacity-100' : ''
               }`}
             >
               {onSelect ? (
-                <button
-                  type="button"
+                // The unified Button with no box of its own (`wrap`): it brings the
+                // target, the focus ring and the keyboard semantics; the row is the look.
+                <Button
+                  variant="transparent"
+                  size="wrap"
+                  fullWidth
                   onClick={() => onSelect(index)}
-                  className={`${layout} w-full cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus`}
+                  className={`${layout} justify-start whitespace-normal text-left hover:bg-transparent active:bg-transparent`}
                 >
                   {row}
-                </button>
+                </Button>
               ) : (
                 <div className={layout}>{row}</div>
               )}

package/src/components/ui/incident-feed.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { AnalyzingState } from './analyzing-state';
 import { StatusLine, type StatusLineTone } from './status-line';
 
 /** Where one incident stands. `waiting` is the only state that needs a person. */
@@ -46,7 +47,10 @@ export interface IncidentFeedProps {
   /** Oldest first. The newest is open; earlier ones collapse to a row. */
   items: readonly IncidentFeedItem[];
   statusLabels: Record<IncidentStatus, string>;
-  /** Shown while there is nothing in the feed. */
+  /**
+   * Shown while there is nothing in the feed, under rows that are still being
+   * read: the agent is at work, it has just not found anything yet.
+   */
   emptyLabel?: string;
   /**
    * `top`: the list grows downward (a wide window). `bottom`: the newest item
@@ -91,7 +95,7 @@ export function IncidentFeed({ items, statusLabels, emptyLabel, anchor = 'top',
         className,
       )}
     >
-      {items.length === 0 && emptyLabel && <p className="m-auto text-ods-text-secondary text-h4">{emptyLabel}</p>}
+      {items.length === 0 && emptyLabel && <AnalyzingState label={emptyLabel} className="m-auto" />}
       {items.map((item, index) => {
         const open = index === lastIndex || item.status === 'waiting';
         if (!open) {

package/src/components/ui/index.ts

@@ -236,6 +236,7 @@ export { LazyMount, type LazyMountProps } from './lazy-mount';
 export * from './app-window-frame';
 export * from './product-screen-frame';
 export * from './phone-frame';
+export * from './analyzing-state';
 export * from './incident-feed';
 export * from './status-line';
 export * from './snap-carousel';

package/src/components/ui/playback-toggle.tsx

@@ -17,10 +17,16 @@ export interface PlaybackToggleProps {
 
 /**
  * THE stop/start control of anything that moves on its own (WCAG 2.2.2): one
- * small, quiet round icon button. A looping demo and an auto-advancing
- * carousel show the same one, wired to `useAutoplay`'s `paused` / `setPaused`.
- * Quiet on purpose: it takes the accent only on hover, so it never competes
- * with what it controls.
+ * small icon button beside what it controls. A looping demo and an
+ * auto-advancing carousel show the same one, wired to `useAutoplay`'s
+ * `paused` / `setPaused`.
+ *
+ * It has to be there and easy to reach (a 32px target, a name, a focus ring),
+ * never the thing the eye lands on: no border and no surface, only a small
+ * grey glyph that takes the accent on hover and focus. The grey is the muted
+ * text token, the quietest one that still clears the 3:1 a control's glyph
+ * needs against the page (WCAG 1.4.11); the next grey down does not. The
+ * target stays 32px; it is the glyph that is small.
  */
 export function PlaybackToggle({
   paused,
@@ -34,14 +40,14 @@ export function PlaybackToggle({
       variant="transparent"
       size="icon-sm"
       className={cn(
-        'shrink-0 rounded-full border border-ods-border text-ods-text-secondary hover:border-ods-accent hover:text-ods-accent',
+        'shrink-0 rounded-full border-0 text-ods-text-muted hover:text-ods-accent focus-visible:text-ods-accent [&_svg]:h-3 [&_svg]:w-3',
         className,
       )}
       aria-label={paused ? playLabel : pauseLabel}
       aria-pressed={paused}
       onClick={() => onChange(!paused)}
     >
-      {paused ? <PlayIcon size={16} /> : <PauseIcon size={16} />}
+      {paused ? <PlayIcon size={12} /> : <PauseIcon size={12} />}
     </Button>
   );
 }

package/src/components/ui/tab-navigation.tsx

@@ -84,6 +84,12 @@ interface TabNavigationProps {
   /** Tabs grow to share the bar's full width equally (Figma segmented-underline
    *  look, e.g. the 480px homepage strip switcher). Default: natural width. */
   stretchTabs?: boolean;
+  /**
+   * Where a tab's content sits inside the tab. `center` (default) suits tabs of
+   * natural width; `start` reads better when `stretchTabs` makes each tab wide
+   * (a timed demo's tabs: avatar, name and caption from the left edge).
+   */
+  tabAlign?: 'center' | 'start';
   /** How long the underline takes to reach a new `TabItem.progress` value. Default 200. */
   progressTransitionMs?: number;
 
@@ -130,6 +136,7 @@ interface TabBarProps {
   showLeftGradient: boolean;
   showRightGradient: boolean;
   stretchTabs: boolean;
+  tabAlign: 'center' | 'start';
   progressTransitionMs: number;
 }
 
@@ -154,6 +161,7 @@ const TabBar = memo(function TabBarImpl({
   showLeftGradient,
   showRightGradient,
   stretchTabs,
+  tabAlign,
   progressTransitionMs,
 }: TabBarProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -367,7 +375,8 @@ const TabBar = memo(function TabBarImpl({
               onClick={() => onTabChange(tab.id)}
               aria-label={tab.badge ? `${tab.label} (${tab.badge})` : undefined}
               className={cn(
-                'relative flex shrink-0 cursor-pointer items-center justify-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]',
+                'relative flex shrink-0 cursor-pointer items-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]',
+                tabAlign === 'start' ? 'justify-start text-left' : 'justify-center',
                 // Named rather than `transition-all`: the only thing that moves
                 // here is colour. `all` also made the browser re-check every
                 // property each frame, including the background GRADIENT — which
@@ -503,6 +512,7 @@ export function TabNavigation({
   showRightGradient = false,
   showLeftGradient = false,
   stretchTabs = false,
+  tabAlign = 'center',
   progressTransitionMs = 200,
   urlSync = false,
   defaultTab,
@@ -677,6 +687,7 @@ export function TabNavigation({
         showLeftGradient={showLeftGradient}
         showRightGradient={showRightGradient}
         stretchTabs={stretchTabs}
+        tabAlign={tabAlign}
         progressTransitionMs={progressTransitionMs}
       />