@flamingo-stack/openframe-frontend-core 0.0.449 → 0.0.450

package/src/components/chat/quick-action-chip.tsx

@@ -14,6 +14,10 @@ import { EntityIcon, type EntityIconValue } from '../icon-display'
  *  (agent/persona `icon_props.color`). */
 export type QuickActionAccent = 'pink' | 'cyan' | (string & {})
 
+/** THE agent→accent pairs (one spelling — {@link getAgentAccent} and
+ *  {@link QUICK_ACTION_THEMES} both derive from it). */
+const AGENT_ACCENTS = { fae: 'pink', mingo: 'cyan' } as const
+
 /**
  * FALLBACK-ONLY agent→accent mapping (fae→pink, mingo→cyan) for the built-in
  * agents when nothing is configured. A color configured on the entity itself —
@@ -23,9 +27,7 @@ export type QuickActionAccent = 'pink' | 'cyan' | (string & {})
  * comparison elsewhere.
  */
 export function getAgentAccent(slug: string | null | undefined): QuickActionAccent | undefined {
-  if (slug === 'fae') return 'pink'
-  if (slug === 'mingo') return 'cyan'
-  return undefined
+  return slug === 'fae' || slug === 'mingo' ? AGENT_ACCENTS[slug] : undefined
 }
 
 /** Admin-configured identity color (`icon_props.color` on the agent/persona
@@ -63,18 +65,24 @@ const ACCENT_CLASS: Record<string, string> = {
   cyan: 'text-ods-flamingo-cyan',
 }
 
+/** A spec is a plain data object, never a React element — so any non-element,
+ *  non-array object is a spec; strings, elements, fragments, and ReactNode
+ *  ARRAYS stay ReactNode. */
+export function isQuickActionIconSpec(
+  icon: React.ReactNode | QuickActionIconSpec | undefined,
+): icon is QuickActionIconSpec {
+  return typeof icon === 'object' && icon !== null && !Array.isArray(icon) && !React.isValidElement(icon)
+}
+
 /** Resolve a chip `icon` prop to a renderable node. Specs go through
  *  `<EntityIcon>`; ReactNodes pass through untouched. */
 export function renderQuickActionIcon(
   icon: React.ReactNode | QuickActionIconSpec | undefined,
 ): React.ReactNode {
-  // A spec is a plain data object, never a React element — so any non-element,
-  // non-array object is a spec; strings, elements, fragments, and ReactNode
-  // ARRAYS stay ReactNode.
-  if (typeof icon !== 'object' || icon === null || Array.isArray(icon) || React.isValidElement(icon)) {
+  if (!isQuickActionIconSpec(icon)) {
     return icon
   }
-  const spec = icon as QuickActionIconSpec
+  const spec = icon
   if (!spec.name && !spec.url) return undefined
   // Named brand tokens tint via a text class on `currentColor`; any other
   // accent value is an admin-configured CSS color, delivered as the glyph's
@@ -104,6 +112,48 @@ export interface QuickActionChipLozenge {
   className?: string
 }
 
+// =============================================================================
+// Themes
+// =============================================================================
+
+/**
+ * THE quick-action wall/chip theme set — one spelling of "who does this work"
+ * across every surface (homepage hero tabs, marketing marquees, company-hub
+ * deck panels, chat empty states):
+ * - `fae` / `mingo` — the agent identities (pink / cyan), same values
+ *   {@link getAgentAccent} resolves for the built-in agents.
+ * - `it` / `sec` — work-category themes on the ODS attention pair
+ *   (IT = yellow routine work, security = red defense), deliberately NOT the
+ *   agent identities so a category never reads as agent attribution. These two
+ *   carry the classification lozenge (leading-edge affix) as part of the theme.
+ */
+export type QuickActionTheme = 'fae' | 'mingo' | 'it' | 'sec'
+
+export interface QuickActionThemeSpec {
+  /** Chip icon tint ({@link QuickActionAccent}: brand token or CSS color). */
+  accent: QuickActionAccent
+  /** Classification affix rendered inside the chip (category themes only). */
+  lozenge?: QuickActionChipLozenge
+}
+
+/** Caller-injected per-theme accent overrides — how SERVER-CONFIGURED agent
+ *  colors reach the chips. Consumers resolve the configured value (e.g.
+ *  {@link accentFromIdentityIcon} on the agent row's `icon_props.color`) and
+ *  inject it here; {@link QUICK_ACTION_THEMES} below is fallback-only. */
+export type QuickActionThemeAccents = Partial<Record<QuickActionTheme, QuickActionAccent>>
+
+/** FALLBACK-ONLY theme specs (same contract as {@link getAgentAccent}): the
+ *  built-in accents apply when the caller injects nothing. The fae/mingo
+ *  accents in particular are server-configured per agent — walls/chips accept
+ *  a {@link QuickActionThemeAccents} override (`themeAccents`/`themeAccent`)
+ *  that always wins over this map. */
+export const QUICK_ACTION_THEMES: Record<QuickActionTheme, QuickActionThemeSpec> = {
+  fae: { accent: AGENT_ACCENTS.fae },
+  mingo: { accent: AGENT_ACCENTS.mingo },
+  it: { accent: 'var(--color-warning)', lozenge: { label: 'IT', className: 'text-ods-warning' } },
+  sec: { accent: 'var(--color-error)', lozenge: { label: 'SEC', className: 'text-ods-error' } },
+}
+
 /** Resolve a chip label + optional lozenge to the Tag label node. */
 function composeChipLabel(
   label: React.ReactNode,
@@ -136,9 +186,17 @@ export interface QuickActionChipButtonProps {
   /** Icon: a declarative {@link QuickActionIconSpec} (preferred — unified
    *  EntityIcon resolution) or a pre-rendered ReactNode. */
   icon?: React.ReactNode | QuickActionIconSpec
-  /** Optional {@link QuickActionChipLozenge} at the label's leading edge
-   *  (e.g. an IT/SEC classification affix). */
-  lozenge?: QuickActionChipLozenge
+  /** Chip theme ({@link QuickActionTheme}): supplies the icon accent when the
+   *  icon spec doesn't carry its own, and the lozenge when `lozenge` is
+   *  `true`. Explicit values always win over the theme. */
+  theme?: QuickActionTheme
+  /** Caller-injected accent for `theme` — the server-configured agent color
+   *  (resolve via {@link accentFromIdentityIcon}). Overrides the theme's
+   *  built-in fallback accent; the icon spec's own `accent` still wins. */
+  themeAccent?: QuickActionAccent
+  /** {@link QuickActionChipLozenge} at the label's leading edge (e.g. an
+   *  IT/SEC classification affix). `true` renders the `theme`'s lozenge. */
+  lozenge?: QuickActionChipLozenge | boolean
   /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default). */
   variant?: 'primary' | 'outline'
   /** Active single-select state (Figma "Feature Item" active): renders the
@@ -227,6 +285,8 @@ export function QuickActionChipSkeleton({ labelCh = 16, icon = true, lozenge = f
 export function QuickActionChipButton({
   label,
   icon,
+  theme,
+  themeAccent,
   lozenge,
   variant = 'outline',
   selected = false,
@@ -238,8 +298,16 @@ export function QuickActionChipButton({
   interactive = true,
   className,
 }: QuickActionChipButtonProps) {
-  const resolvedIcon = renderQuickActionIcon(icon)
-  const resolvedLabel = composeChipLabel(label, lozenge)
+  const themeSpec = theme ? QUICK_ACTION_THEMES[theme] : undefined
+  // Accent precedence: the icon spec's own accent (admin-configured color,
+  // agent identity) → caller-injected `themeAccent` (server-configured agent
+  // color) → the theme's built-in fallback.
+  const accent = themeAccent ?? themeSpec?.accent
+  const themedIcon =
+    accent && isQuickActionIconSpec(icon) && !icon.accent ? { ...icon, accent } : icon
+  const resolvedLozenge = lozenge === true ? themeSpec?.lozenge : lozenge === false ? undefined : lozenge
+  const resolvedIcon = renderQuickActionIcon(themedIcon)
+  const resolvedLabel = composeChipLabel(label, resolvedLozenge)
   const tagVariant = selected ? (selectedAccent === 'cyan' ? 'selectedCyan' : 'selected') : variant
   if (!interactive) {
     return <Tag variant={tagVariant} size={size} icon={resolvedIcon} label={resolvedLabel} className={className} />

package/src/components/chat/quick-action-marquee.tsx

@@ -1,8 +1,10 @@
 'use client'
 
 import * as React from 'react'
-import { cn } from '../../utils/cn'
-import { QuickActionChipButton, type QuickActionIconSpec } from './quick-action-chip'
+import type { MarqueeSyncController } from '../ui/marquee-wall'
+import type { QuickActionIconSpec } from './quick-action-chip'
+import type { QuickActionChip } from './chat-quick-action-row'
+import { QuickActionWall } from './quick-action-wall'
 
 // =============================================================================
 // Types
@@ -17,76 +19,81 @@ export interface QuickActionMarqueeItem {
 
 export interface QuickActionMarqueeProps {
   items: ReadonlyArray<QuickActionMarqueeItem>
-  /** Scroll direction. `'right'` reverses the animation. Default `'left'`. */
+  /** `'animated'` (default): endless scroll. `'plain'`: a static chip row —
+   *  the consumer's opt-out of the marquee (no motion, no track padding
+   *  effects beyond the plain layout). */
+  mode?: 'animated' | 'plain'
+  /** Scroll direction. `'right'` reverses the travel. Default `'left'`. */
   direction?: 'left' | 'right'
-  /** Seconds per full loop. Default 40. */
-  duration?: number
+  /** Scroll speed in px/s — the shared marquee unit (CardsStrip cruises at
+   *  60). Default 40: on-screen speed stays constant no matter how many quick
+   *  actions an agent has (the engine is position-based, not loop-based). */
+  speed?: number
   /** Pause the scroll while hovered. Default true. */
   pauseOnHover?: boolean
   /** When provided chips are interactive buttons; omitted → decorative tags. */
   onSelect?: (item: QuickActionMarqueeItem) => void
+  /** Repeat-pad the track to at least this many chips so one copy overflows
+   *  the widest container this strip can get (the loop only engages on
+   *  overflow). Default 12 ≈ 2600px+, enough for a full-bleed max-w-[1920px]
+   *  section. */
+  minChips?: number
+  /** Pair with a sibling marquee under ONE position driver (the resolve
+   *  strips' pending/resolved copies stay pixel-locked). */
+  sync?: MarqueeSyncController
   className?: string
 }
 
-// Heuristic: ~6 chips ≈ one 1280px viewport width, so the halved track always
-// fills the screen; bump if chips shrink.
-const MIN_TRACK_ITEMS = 6
-
 // =============================================================================
 // Component
 // =============================================================================
 
 /**
  * Endless horizontally-scrolling strip of quick-action chips (Figma fae/mingo
- * marquee rows). The item list is padded to at least {@link MIN_TRACK_ITEMS}
- * and rendered twice so the `qa-marquee` keyframe's `translateX(-50%)` loops
- * seamlessly; the second half is `aria-hidden`. Pauses on hover (optional)
- * and always under `prefers-reduced-motion`.
+ * marquee rows) — the single-row preset of {@link QuickActionWall} (same
+ * chips, same engine, `flex-nowrap` layout). Clone-copy chips stay
+ * interactive when `onSelect` is set (clone wrapper a11y applies). Pauses on
+ * hover (optional) and always under `prefers-reduced-motion`.
  */
 export function QuickActionMarquee({
   items,
+  mode = 'animated',
   direction = 'left',
-  duration = 40,
+  speed = 40,
   pauseOnHover = true,
   onSelect,
+  minChips = 12,
+  sync,
   className,
 }: QuickActionMarqueeProps) {
-  const { track, half } = React.useMemo(() => {
-    const repeats = Math.max(1, Math.ceil(MIN_TRACK_ITEMS / Math.max(1, items.length)))
-    const padded = Array.from({ length: repeats }, () => items).flat()
-    return { track: [...padded, ...padded], half: padded.length }
-  }, [items])
+  const chips = React.useMemo<QuickActionChip[]>(
+    () =>
+      items.map(item => ({
+        id: item.id,
+        label: item.label,
+        icon: item.icon,
+        onSelect: onSelect ? () => onSelect(item) : undefined,
+      })),
+    [items, onSelect],
+  )
 
   if (items.length === 0) return null
 
   return (
-    <div className={cn('group overflow-hidden', className)}>
-      <div
-        className={cn(
-          'flex w-max items-center gap-2 animate-qa-marquee motion-reduce:[animation-play-state:paused]',
-          direction === 'right' && '[animation-direction:reverse]',
-          pauseOnHover && 'group-hover:[animation-play-state:paused]',
-        )}
-        style={{ '--qa-marquee-duration': `${duration}s` } as React.CSSProperties}
-      >
-        {track.map((item, index) => {
-          const isHiddenCopy = index >= half
-          return (
-            <span key={`${item.id}__${index}`} aria-hidden={isHiddenCopy || undefined}>
-              {/* The aria-hidden loop copy must contain NO focusable elements
-                  (WCAG: no focusable descendants under aria-hidden) — its
-                  chips render as plain tags even when the strip is
-                  interactive. */}
-              <QuickActionChipButton
-                label={item.label}
-                icon={item.icon}
-                interactive={!!onSelect && !isHiddenCopy}
-                onSelect={onSelect && !isHiddenCopy ? () => onSelect(item) : undefined}
-              />
-            </span>
-          )
-        })}
-      </div>
-    </div>
+    <QuickActionWall
+      chips={chips}
+      mode={mode}
+      axis="x"
+      reverse={direction === 'right'}
+      speed={speed}
+      pauseOnHover={pauseOnHover}
+      // Plain mode shows the items once, untruncated; padding only serves
+      // the endless loop.
+      minChips={mode === 'plain' ? undefined : minChips}
+      copyGap="var(--spacing-system-xsf)"
+      className={className}
+      contentClassName="flex-nowrap items-center"
+      sync={sync}
+    />
   )
 }

package/src/components/chat/quick-action-wall.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import {
+  MarqueeWall,
+  MarqueeWallFades,
+  type MarqueeSyncController,
+  type MarqueeWallFadeEdge,
+  type MarqueeWallProps,
+} from '../ui/marquee-wall'
+import { QuickActionChipSkeleton } from './quick-action-chip'
+import type { QuickActionTheme, QuickActionThemeAccents } from './quick-action-chip'
+import { QuickActionChipFromData } from './chat-quick-action-row'
+import type { QuickActionChip } from './chat-quick-action-row'
+
+// =============================================================================
+// Shared wall constants
+// =============================================================================
+
+/** Skeleton label widths (ch) — realistic spread, cycled. THE wall-skeleton
+ *  spread, shared with the company-hub deck's ChipWall: sized so a 24-item
+ *  wall overflows typical caps at any viewport width (same fill + fade as
+ *  the loaded state — zero height jump when data lands). */
+export const WALL_SKELETON_LABEL_CH = [17, 24, 14, 20, 15, 25, 12, 21, 16, 19, 13, 23]
+
+/** Deterministic index-alternating merge — the mixed "one stream" pile
+ *  (deck slide 3's IT+SEC blend and its Storybook mirror). Input order
+ *  stable → the blend never reshuffles across renders or consumers. */
+export function interleave<T>(a: ReadonlyArray<T>, b: ReadonlyArray<T>): T[] {
+  const out: T[] = []
+  for (let i = 0; i < Math.max(a.length, b.length); i++) {
+    if (a[i] !== undefined) out.push(a[i])
+    if (b[i] !== undefined) out.push(b[i])
+  }
+  return out
+}
+
+// Brick-mode padding default: ~14 columns of chips per row (~3200px) — one
+// row copy overflows any sensible container, so the loop always engages.
+const DEFAULT_MIN_CHIPS_PER_ROW = 14
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface QuickActionWallProps {
+  /** The wall's chips — the shared {@link QuickActionChip} shape (same as the
+   *  chat rows), including per-chip `theme`/`lozenge` for mixed IT/SEC
+   *  streams. Chips with `onSelect` render as buttons; without, as tags. */
+  chips: ReadonlyArray<QuickActionChip>
+  /** Wall-default theme (fae/mingo/it/sec) for chips without their own. */
+  theme?: QuickActionTheme
+  /** Server-configured per-theme accent overrides
+   *  ({@link QuickActionThemeAccents}) — inject the agents' configured colors
+   *  (resolve via `accentFromIdentityIcon`); the built-in theme accents are
+   *  fallback-only. Per-chip `themeAccent` still wins. */
+  themeAccents?: QuickActionThemeAccents
+  /** `'animated'` (default): marquee + overflow fades. `'plain'`: no motion,
+   *  no blur — the consumer's per-surface opt-out (forwarded to
+   *  {@link MarqueeWall}; in brick mode the rows render static and the
+   *  stack-level fades are skipped). */
+  mode?: 'animated' | 'plain'
+  /** Render every chip's theme lozenge (classification walls). Per-chip
+   *  `lozenge` values still win. */
+  lozenges?: boolean
+  /** Marquee axis — defaults to where `fade` sits (see {@link MarqueeWall}). */
+  axis?: MarqueeWallProps['axis']
+  reverse?: boolean
+  /** px/s. Default 40 (MarqueeWall default). */
+  speed?: number
+  /** Marquee on/off (auto-off when content fits / reduced motion / loading). */
+  animate?: boolean
+  pauseOnHover?: boolean
+  fade?: MarqueeWallFadeEdge | ReadonlyArray<MarqueeWallFadeEdge>
+  /** Color behind the wall — the fades blend into it. */
+  fadeColor?: string
+  fadeSize?: MarqueeWallProps['fadeSize']
+  /** THE wall pitch — one value drives the chip gap, the clone-seam gap, and
+   *  (in brick mode) the row-stack gap, so the courses read as a uniform wall
+   *  and the seam is invisible by construction. Default
+   *  `var(--spacing-system-xsf)`. */
+  copyGap?: number | string
+  /** Pad the track by REPEATING the chips up to this count (suffixed keys) so
+   *  one copy always overflows the container and the loop engages — without
+   *  it a wall whose content roughly fits its box goes static (the marquee
+   *  only loops what overflows). Defaults to `rows × 14` in brick mode;
+   *  unset otherwise (capped walls that always overflow, and FLIP-tracked
+   *  walls where repeats would duplicate flip ids, need no padding). */
+  minChips?: number
+  /**
+   * BRICK-WALL mode: render this many stacked independent single-row
+   * marquees (chips distributed round-robin) instead of one track. Rows pack
+   * their chips edge-to-edge like bricks — a grid would column-align chips
+   * of different widths and leave holes — and each row loops on its own
+   * wrap, so the courses stagger organically. Horizontal only; the fades
+   * draw ONCE over the whole stack.
+   */
+  rows?: number
+  /** Draw skeleton chips instead of `chips` (the shared
+   *  {@link QuickActionChipSkeleton} — 1:1 geometry with loaded chips).
+   *  Callers own the policy (`loading` flag vs skeleton-when-empty). */
+  loading?: boolean
+  skeletonCount?: number
+  /** Outer container (sizing: height cap for vertical walls). */
+  className?: string
+  /** Per-copy layout — default a wrapping chip wall. Override for single-row
+   *  marquee strips (`flex-nowrap`). */
+  contentClassName?: string
+  /** Pair with sibling walls under one position driver (resolve strips). */
+  sync?: MarqueeSyncController
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * <QuickActionWall> — THE quick-action chip wall: a themed pile of the shared
+ * chip on the shared {@link MarqueeWall} engine. One component for every
+ * surface that shows "the work the agents do" — homepage hero tabs, deck
+ * panels, marketing strips — whether static-with-fade or endlessly scrolling
+ * (axis follows the fade), interactive or decorative.
+ *
+ * Clone-copy chips stay INTERACTIVE (pointer cursor + working click) — the
+ * loop paints clones inside the viewport (reverse walls even START on the
+ * clone copy), and a visible chip that ignores clicks reads as broken. A11y
+ * holds via the clone wrapper: aria-hidden + focus suppression (the standard
+ * Swiper/Splide loop-clone treatment, same as CardsStrip). `pauseOnHover`
+ * (default on) freezes the track under a pointing cursor so chips never
+ * dodge a click.
+ */
+export function QuickActionWall({
+  chips,
+  theme,
+  themeAccents,
+  mode = 'animated',
+  lozenges = false,
+  axis,
+  reverse,
+  speed,
+  animate = true,
+  pauseOnHover,
+  fade,
+  fadeColor,
+  fadeSize,
+  copyGap,
+  minChips,
+  rows,
+  loading = false,
+  skeletonCount = 24,
+  className,
+  contentClassName,
+  sync,
+}: QuickActionWallProps) {
+  // Repeat-pad the track (stable suffixed keys; repeats keep the full chip —
+  // identical selected/interactive state, so every visible instance behaves
+  // the same and the clone copy stays geometry-identical by construction).
+  const padTarget = minChips ?? (rows ? rows * DEFAULT_MIN_CHIPS_PER_ROW : undefined)
+  const track = React.useMemo(() => {
+    if (!padTarget || chips.length === 0 || chips.length >= padTarget) return chips
+    const repeats = Math.ceil(padTarget / chips.length)
+    return Array.from({ length: repeats }, (_, r) =>
+      r === 0 ? chips : chips.map(chip => ({ ...chip, id: `${chip.id}__r${r}` })),
+    ).flat()
+  }, [chips, padTarget])
+
+  const renderSkeletons = (count: number, offset = 0) =>
+    Array.from({ length: count }, (_, i) => (
+      <QuickActionChipSkeleton
+        key={i}
+        lozenge={lozenges}
+        labelCh={WALL_SKELETON_LABEL_CH[(offset + i) % WALL_SKELETON_LABEL_CH.length]}
+      />
+    ))
+
+  const renderChipNodes = (list: ReadonlyArray<QuickActionChip>) =>
+    list.map(chip => (
+      <QuickActionChipFromData
+        key={chip.id}
+        chip={chip}
+        defaultTheme={theme}
+        themeAccents={themeAccents}
+        defaultLozenge={lozenges}
+        interactive={!!chip.onSelect}
+        className="max-w-full"
+      />
+    ))
+
+  const renderChips = () => (loading ? renderSkeletons(skeletonCount) : renderChipNodes(track))
+
+  // ONE pitch for chips, clone seams, and (brick mode) the row stack — a
+  // custom `copyGap` moves all three together, so no seam can ever disagree
+  // with the chip gap.
+  const gap = copyGap ?? 'var(--spacing-system-xsf)'
+
+  // ---- BRICK-WALL mode: stacked independent row marquees ---------------------
+  if (rows && rows > 0) {
+    const rowLists = Array.from({ length: rows }, (_, r) => track.filter((_, i) => i % rows === r))
+    const skelPerRow = Math.ceil(skeletonCount / rows)
+    return (
+      <div className={cn('relative flex flex-col overflow-hidden', className)} style={{ gap }}>
+        {rowLists.map((list, r) => (
+          <MarqueeWall
+            key={r}
+            mode={mode}
+            axis="x"
+            reverse={reverse}
+            speed={speed}
+            animate={animate && !loading}
+            pauseOnHover={pauseOnHover}
+            copyGap={gap}
+            contentClassName={cn('flex items-center', contentClassName)}
+            contentStyle={{ gap }}
+          >
+            {loading ? renderSkeletons(skelPerRow, r * 3) : renderChipNodes(list)}
+          </MarqueeWall>
+        ))}
+        {mode === 'animated' && (
+          <MarqueeWallFades fade={fade} fadeColor={fadeColor} fadeSize={fadeSize} />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <MarqueeWall
+      mode={mode}
+      axis={axis}
+      reverse={reverse}
+      speed={speed}
+      // Skeleton walls stay put — the marquee starts when real chips land.
+      animate={animate && !loading}
+      pauseOnHover={pauseOnHover}
+      fade={fade}
+      fadeColor={fadeColor}
+      fadeSize={fadeSize}
+      copyGap={gap}
+      className={className}
+      contentClassName={cn('flex flex-wrap content-start items-start', contentClassName)}
+      contentStyle={{ gap }}
+      sync={sync}
+    >
+      {renderChips()}
+    </MarqueeWall>
+  )
+}