@flamingo-stack/openframe-frontend-core 0.0.360 → 0.0.361-snapshot.20260702223540

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

@@ -0,0 +1,155 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { Tag } from '../ui/tag'
+import { EntityIcon, type EntityIconValue } from '../icon-display'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/** Accent tint for quick-action chip icons: a named brand token
+ *  (`'pink'`/`'cyan'`) or ANY CSS color value coming from admin config
+ *  (agent/persona `icon_props.color`). */
+export type QuickActionAccent = 'pink' | 'cyan' | (string & {})
+
+/**
+ * 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 —
+ * the quick action's `iconProps.color`, or the agent/persona identity
+ * `icon_props.color` — always wins over this map; callers must resolve the
+ * configured value first and only fall back here. Never re-inline the slug
+ * comparison elsewhere.
+ */
+export function getAgentAccent(slug: string | null | undefined): QuickActionAccent | undefined {
+  if (slug === 'fae') return 'pink'
+  if (slug === 'mingo') return 'cyan'
+  return undefined
+}
+
+/** Admin-configured identity color (`icon_props.color` on the agent/persona
+ *  row) → chip accent. Undefined when the identity doesn't set one. */
+export function accentFromIdentityIcon(
+  icon: { props?: Record<string, unknown> | null } | null | undefined,
+): QuickActionAccent | undefined {
+  const color = icon?.props?.color
+  return typeof color === 'string' && color.length > 0 ? color : undefined
+}
+
+/**
+ * Declarative icon for a quick-action chip, resolved 100% by `<EntityIcon>`
+ * (url → fae/mingo `AgentMark` → icons-v2 glyph → file fallback):
+ * - "agent format" — `{ name: 'fae' }` / `{ name: 'mingo' }` renders the
+ *   packaged agent mark (fills the chip's icon box; `accent` is ignored — the
+ *   marks carry their own colors).
+ * - "config format" — `{ name, url, props, accent }` renders the
+ *   admin-configured icon; `accent` tints registry glyphs via a
+ *   `text-ods-flamingo-*` class on `currentColor`.
+ *
+ * If `props.color` is set it wins over `accent` — the accent is a class tint
+ * on `currentColor`, the prop is an explicit fill (EntityIcon spreads `props`
+ * onto the glyph last).
+ */
+export interface QuickActionIconSpec extends EntityIconValue {
+  accent?: QuickActionAccent
+  /** Glyph size in px. Defaults to 16 (the chip design's config-icon size);
+   *  agent marks size via the icon box instead. */
+  size?: number
+}
+
+const ACCENT_CLASS: Record<string, string> = {
+  pink: 'text-ods-flamingo-pink',
+  cyan: 'text-ods-flamingo-cyan',
+}
+
+/** 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)) {
+    return icon
+  }
+  const spec = icon as QuickActionIconSpec
+  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
+  // DEFAULT `color` prop — an explicit per-action `props.color` (spread after)
+  // still wins.
+  const accentClass = spec.accent ? ACCENT_CLASS[spec.accent] : undefined
+  const props =
+    spec.accent && !accentClass ? { color: spec.accent, ...(spec.props ?? {}) } : spec.props
+  return (
+    <EntityIcon
+      icon={{ name: spec.name, url: spec.url, props }}
+      size={spec.size ?? 16}
+      className={accentClass}
+    />
+  )
+}
+
+export interface QuickActionChipButtonProps {
+  label: React.ReactNode
+  /** Icon: a declarative {@link QuickActionIconSpec} (preferred — unified
+   *  EntityIcon resolution) or a pre-rendered ReactNode. */
+  icon?: React.ReactNode | QuickActionIconSpec
+  /** `'primary'` = accent (yellow) chip, `'outline'` = bordered chip (default). */
+  variant?: 'primary' | 'outline'
+  onSelect?: () => void
+  /** Pointer/keyboard focus enters the chip — e.g. preview the full prompt. */
+  onHoverStart?: () => void
+  /** Pointer/keyboard focus leaves the chip — e.g. restore the composer. */
+  onHoverEnd?: () => void
+  /** `false` renders a plain non-focusable `<Tag>` (decorative use: marquee
+   *  strips, table cells). Default `true`. */
+  interactive?: boolean
+  className?: string
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * The unified quick-action chip — Figma chip anatomy (card bg, border, mono
+ * uppercase label) via the `Tag` outline/primary variants, with icon
+ * resolution owned by `<EntityIcon>` in two formats (config icon w/ agent
+ * accent, or fae/mingo agent mark). Used by every chat empty state
+ * (guide / mingo / ai-agent), the marketing marquee strips, and the ROI
+ * table task cells.
+ */
+export function QuickActionChipButton({
+  label,
+  icon,
+  variant = 'outline',
+  onSelect,
+  onHoverStart,
+  onHoverEnd,
+  interactive = true,
+  className,
+}: QuickActionChipButtonProps) {
+  const resolvedIcon = renderQuickActionIcon(icon)
+  if (!interactive) {
+    return <Tag variant={variant} icon={resolvedIcon} label={label} className={className} />
+  }
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      onMouseEnter={onHoverStart}
+      onMouseLeave={onHoverEnd}
+      onFocus={onHoverStart}
+      onBlur={onHoverEnd}
+      className={cn(
+        'shrink-0 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
+        className,
+      )}
+    >
+      <Tag variant={variant} icon={resolvedIcon} label={label} />
+    </button>
+  )
+}

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

@@ -0,0 +1,92 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { QuickActionChipButton, type QuickActionIconSpec } from './quick-action-chip'
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface QuickActionMarqueeItem {
+  /** Stable key (suffixed per track copy internally). */
+  id: string
+  label: string
+  icon?: React.ReactNode | QuickActionIconSpec
+}
+
+export interface QuickActionMarqueeProps {
+  items: ReadonlyArray<QuickActionMarqueeItem>
+  /** Scroll direction. `'right'` reverses the animation. Default `'left'`. */
+  direction?: 'left' | 'right'
+  /** Seconds per full loop. Default 40. */
+  duration?: number
+  /** Pause the scroll while hovered. Default true. */
+  pauseOnHover?: boolean
+  /** When provided chips are interactive buttons; omitted → decorative tags. */
+  onSelect?: (item: QuickActionMarqueeItem) => void
+  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`.
+ */
+export function QuickActionMarquee({
+  items,
+  direction = 'left',
+  duration = 40,
+  pauseOnHover = true,
+  onSelect,
+  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])
+
+  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>
+  )
+}

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

@@ -116,6 +116,7 @@ export function TabNavigation({
 
   const scrollRef = useRef<HTMLDivElement>(null)
   const activeTabRef = useRef<HTMLButtonElement>(null)
+  const isFirstActiveScrollRef = useRef(true)
   const [canScrollLeft, setCanScrollLeft] = useState(false)
   const [canScrollRight, setCanScrollRight] = useState(false)
 
@@ -174,12 +175,17 @@ export function TabNavigation({
     const el = scrollRef.current
     const active = activeTabRef.current
     if (!el || !active) return
+    // On mount (e.g. a deep link landing on an off-screen tab, such as
+    // `?tab=software` as the last of many), snap instantly instead of visibly
+    // sliding right after first paint — smooth is reserved for later tab changes.
+    const behavior = isFirstActiveScrollRef.current ? 'auto' : 'smooth'
+    isFirstActiveScrollRef.current = false
     const elRect = el.getBoundingClientRect()
     const aRect = active.getBoundingClientRect()
     if (aRect.left < elRect.left) {
-      el.scrollBy({ left: aRect.left - elRect.left, behavior: 'smooth' })
+      el.scrollBy({ left: aRect.left - elRect.left, behavior })
     } else if (aRect.right > elRect.right) {
-      el.scrollBy({ left: aRect.right - elRect.right, behavior: 'smooth' })
+      el.scrollBy({ left: aRect.right - elRect.right, behavior })
     }
   }, [activeTab])
 

package/src/stories/EmbeddableChat.stories.tsx

@@ -28,6 +28,29 @@ import {
 
 const COMMANDS_URL = '/__story__/commands'
 
+// Agent-config endpoint. EmbeddableChat's `DEFAULT_AI_AGENT_CONFIG_URL` resolves
+// `activeAgentSlug` → `/api/ai-agents/<slug>`; the fetch shim below answers any
+// href containing this prefix with a mocked `EmptyStateConfig` so agent-mode
+// quick-action chips render from the fetch (not the host prop).
+const AI_AGENT_CONFIG_PREFIX = '/api/ai-agents/'
+
+// Mocked `/api/ai-agents/fae` response — the `EmptyStateConfig` shape
+// (see use-empty-state-config.ts). `icon: { name: 'fae' }` is the agent
+// identity mark; the chip `iconName`s resolve via the icon library and get the
+// fae→pink accent auto-derived from the slug (no `iconProps.color` set).
+const FAE_AGENT_CONFIG = {
+  name: 'Fae',
+  icon: { name: 'fae' },
+  greeting: "Hi, I'm Fae — ask me about incidents, scripts, or device health.",
+  quickActions: [
+    { id: 'fae-triage', label: 'Triage an alert', prompt: 'Help me triage the latest critical alert.', iconName: 'search' },
+    { id: 'fae-script', label: 'Write a script', prompt: 'Write a PowerShell script to audit local admins.', iconName: 'bracket-curly' },
+    { id: 'fae-health', label: 'Device health', prompt: 'Which devices are unhealthy right now?', iconName: 'rocket' },
+    { id: 'fae-logs', label: 'Summarize logs', prompt: 'Summarize the last 24h of error logs.', iconName: 'newspaper' },
+  ],
+  suggestedQueries: [],
+}
+
 // =============================================================================
 // Shared mocks
 // =============================================================================
@@ -417,6 +440,14 @@ if (
         }),
       )
     }
+    if (href.includes(AI_AGENT_CONFIG_PREFIX)) {
+      return Promise.resolve(
+        new Response(JSON.stringify(FAE_AGENT_CONFIG), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      )
+    }
     return originalFetch(input as RequestInfo, init)
   }) as typeof window.fetch
 }
@@ -700,3 +731,47 @@ export const ArchiveEmpty: Story = {
     await userEvent.click(archiveButton)
   },
 }
+
+// =============================================================================
+// 9. Agent-mode quick actions (fetched chips — PR #1342)
+// =============================================================================
+
+/**
+ * Agent-mode empty state. `activeAgentSlug="fae"` makes EmbeddableChat resolve
+ * `/api/ai-agents/fae` and fetch that agent's `EmptyStateConfig` (mocked by the
+ * fetch shim → `FAE_AGENT_CONFIG`). The Guide-mode chip row renders the agent's
+ * fetched `quickActions` — pink-tinted because the fae→pink accent is
+ * auto-derived from the slug — with Fae's identity (name + mark) on the
+ * greeting. No host `guideWelcome.quickActions` here, so the fetched chips are
+ * the only source.
+ */
+export const AgentModeQuickActions: Story = {
+  args: {
+    defaultOpen: true,
+    showInternalTrigger: false,
+    activeAgentSlug: 'fae',
+  },
+}
+
+/**
+ * The PR #1342 precedence fix. BOTH sources are configured: the host passes its
+ * own `guideWelcome.quickActions` (platform defaults) AND an agent is active
+ * with fetched chips. The agent's chips WIN — previously the host array always
+ * won, so agent chips never rendered. You should see Fae's "Triage an alert /
+ * Write a script / Device health / Summarize logs" chips, NOT the host's
+ * "Host default …" chips.
+ */
+export const AgentChipsWinOverHost: Story = {
+  args: {
+    defaultOpen: true,
+    showInternalTrigger: false,
+    activeAgentSlug: 'fae',
+    guideWelcome: {
+      quickActions: [
+        { id: 'host-a', label: 'Host default A', prompt: 'host prompt A' },
+        { id: 'host-b', label: 'Host default B', prompt: 'host prompt B' },
+        { id: 'host-c', label: 'Host default C', prompt: 'host prompt C' },
+      ],
+    },
+  },
+}

package/src/stories/QuickActionChip.stories.tsx

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import {
+  QuickActionChipButton,
+  type QuickActionIconSpec,
+} from '../components/chat/quick-action-chip'
+
+const meta: Meta<typeof QuickActionChipButton> = {
+  title: 'Chat/QuickActionChip',
+  component: QuickActionChipButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The unified quick-action chip (`QuickActionChipButton`) used by every chat empty state (guide / mingo / ai-agent), the marketing marquee strips, and the ROI table task cells. Icon resolution is owned entirely by `<EntityIcon>` in two `QuickActionIconSpec` formats: the **agent format** (`{ name: \'fae\' | \'mingo\' }`) renders the packaged agent mark, and the **config format** (`{ name, url, props, accent }`) renders an admin-configured glyph tinted via `accent` (`pink` → flamingo-pink, `cyan` → flamingo-cyan, or any CSS color). An explicit `props.color` wins over `accent`.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text' },
+    variant: { control: 'inline-radio', options: ['outline', 'primary'] },
+    interactive: { control: 'boolean' },
+    icon: { control: false },
+    onSelect: { control: false },
+    onHoverStart: { control: false },
+    onHoverEnd: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center bg-ods-bg p-8">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof QuickActionChipButton>
+
+// Config-format icon specs — resolved by <EntityIcon> against the icons-v2
+// library, tinted by `accent`.
+const SEARCH_ICON: QuickActionIconSpec = { name: 'search', accent: 'pink' }
+const BUG_ICON: QuickActionIconSpec = { name: 'bug', accent: 'cyan' }
+
+/** Default bordered (`outline`) chip with a config glyph tinted flamingo-pink. */
+export const Default: Story = {
+  args: {
+    label: 'How to start',
+    icon: SEARCH_ICON,
+    variant: 'outline',
+    onSelect: () => console.log('select'),
+  },
+}
+
+/** Accent (`primary`, yellow) chip variant. */
+export const Primary: Story = {
+  args: {
+    label: 'Run scripts',
+    icon: { name: 'rocket' },
+    variant: 'primary',
+    onSelect: () => console.log('select'),
+  },
+}
+
+/** Config glyphs tinted via `accent` — `pink` and `cyan` brand tokens. */
+export const AccentTints: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <QuickActionChipButton label="Search docs" icon={SEARCH_ICON} onSelect={() => {}} />
+      <QuickActionChipButton label="Report a bug" icon={BUG_ICON} onSelect={() => {}} />
+      <QuickActionChipButton
+        label="Custom color"
+        icon={{ name: 'compass', accent: '#8b5cf6' }}
+        onSelect={() => {}}
+      />
+    </div>
+  ),
+}
+
+/**
+ * Agent-format icons — `{ name: 'fae' }` / `{ name: 'mingo' }` render the
+ * packaged agent marks (they carry their own colors; `accent` is ignored).
+ */
+export const AgentMarks: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <QuickActionChipButton label="Ask fae" icon={{ name: 'fae' }} onSelect={() => {}} />
+      <QuickActionChipButton label="Ask mingo" icon={{ name: 'mingo' }} onSelect={() => {}} />
+    </div>
+  ),
+}
+
+/** No icon — label only. */
+export const NoIcon: Story = {
+  args: {
+    label: 'Find device',
+    onSelect: () => console.log('select'),
+  },
+}
+
+/**
+ * `interactive={false}` renders a plain, non-focusable `<Tag>` (decorative use:
+ * marquee strips, ROI table cells) — no button, no hover callbacks.
+ */
+export const NonInteractive: Story = {
+  args: {
+    label: 'Decorative',
+    icon: SEARCH_ICON,
+    interactive: false,
+  },
+}
+
+/**
+ * `onHoverStart` / `onHoverEnd` fire on pointer AND keyboard focus — used to
+ * preview the full prompt in the composer, then restore it. Hover or tab the
+ * chip and watch the Actions/console panel.
+ */
+export const HoverCallbacks: Story = {
+  args: {
+    label: 'Preview prompt',
+    icon: { name: 'fae' },
+    onSelect: () => console.log('select'),
+    onHoverStart: () => console.log('hover start → preview prompt'),
+    onHoverEnd: () => console.log('hover end → restore composer'),
+  },
+}
+
+/** All variants side by side. */
+export const Gallery: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center gap-2">
+        <QuickActionChipButton label="Outline" icon={SEARCH_ICON} onSelect={() => {}} />
+        <QuickActionChipButton
+          label="Primary"
+          icon={{ name: 'rocket' }}
+          variant="primary"
+          onSelect={() => {}}
+        />
+        <QuickActionChipButton label="No icon" onSelect={() => {}} />
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <QuickActionChipButton label="fae" icon={{ name: 'fae' }} onSelect={() => {}} />
+        <QuickActionChipButton label="mingo" icon={{ name: 'mingo' }} onSelect={() => {}} />
+        <QuickActionChipButton label="Decorative" icon={BUG_ICON} interactive={false} />
+      </div>
+    </div>
+  ),
+}

package/src/stories/QuickActionMarquee.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import {
+  QuickActionMarquee,
+  type QuickActionMarqueeItem,
+} from '../components/chat/quick-action-marquee'
+
+// fae-row items (config glyphs tinted pink) and mingo-row items (tinted cyan) —
+// mirrors the Figma fae/mingo marquee rows.
+const FAE_ITEMS: ReadonlyArray<QuickActionMarqueeItem> = [
+  { id: 'how-to-start', label: 'How to start', icon: { name: 'fae' } },
+  { id: 'connect-device', label: 'Connect device', icon: { name: 'search', accent: 'pink' } },
+  { id: 'find-device', label: 'Find device', icon: { name: 'compass', accent: 'pink' } },
+  { id: 'remote-connection', label: 'Remote connection', icon: { name: 'rocket', accent: 'pink' } },
+  { id: 'run-scripts', label: 'Run scripts', icon: { name: 'bracket-curly', accent: 'pink' } },
+  { id: 'device-software', label: 'Device software', icon: { name: 'package', accent: 'pink' } },
+]
+
+const MINGO_ITEMS: ReadonlyArray<QuickActionMarqueeItem> = [
+  { id: 'roi', label: 'Calculate ROI', icon: { name: 'mingo' } },
+  { id: 'ticket', label: 'Open ticket', icon: { name: 'ticket', accent: 'cyan' } },
+  { id: 'report-bug', label: 'Report a bug', icon: { name: 'bug', accent: 'cyan' } },
+  { id: 'docs', label: 'Read docs', icon: { name: 'book', accent: 'cyan' } },
+  { id: 'chat', label: 'Start a chat', icon: { name: 'chats', accent: 'cyan' } },
+  { id: 'news', label: "What's new", icon: { name: 'newspaper', accent: 'cyan' } },
+]
+
+const meta: Meta<typeof QuickActionMarquee> = {
+  title: 'Chat/QuickActionMarquee',
+  component: QuickActionMarquee,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Endless horizontally-scrolling strip of quick-action chips (Figma fae/mingo marquee rows). The item list is padded to ≥6 chips and rendered twice so the `qa-marquee` keyframe’s `translateX(-50%)` loops seamlessly; the duplicate half is `aria-hidden` and never focusable. Pauses on hover (`pauseOnHover`, default on) and always under `prefers-reduced-motion`. Pass `onSelect` to make chips interactive buttons; omit it for a purely decorative strip.',
+      },
+    },
+  },
+  argTypes: {
+    items: { control: false },
+    direction: { control: 'inline-radio', options: ['left', 'right'] },
+    duration: { control: { type: 'number', min: 5, max: 120, step: 5 } },
+    pauseOnHover: { control: 'boolean' },
+    onSelect: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <div className="bg-ods-bg py-8">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof QuickActionMarquee>
+
+/** Single fae row scrolling left, interactive chips. */
+export const Default: Story = {
+  args: {
+    items: FAE_ITEMS,
+    onSelect: (item) => console.log('select', item.id),
+  },
+}
+
+/** The two Figma rows: fae (left) over mingo (right, reversed). */
+export const TwoRows: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <QuickActionMarquee items={FAE_ITEMS} direction="left" onSelect={(i) => console.log(i.id)} />
+      <QuickActionMarquee items={MINGO_ITEMS} direction="right" onSelect={(i) => console.log(i.id)} />
+    </div>
+  ),
+}
+
+/** Reversed scroll direction. */
+export const ScrollRight: Story = {
+  args: {
+    items: MINGO_ITEMS,
+    direction: 'right',
+    onSelect: (item) => console.log('select', item.id),
+  },
+}
+
+/**
+ * No `onSelect` → chips render as plain, non-focusable tags (decorative
+ * marketing strip). Nothing is clickable or tabbable.
+ */
+export const Decorative: Story = {
+  args: {
+    items: FAE_ITEMS,
+  },
+}
+
+/**
+ * Fewer than 6 items — the track is auto-repeated up to the `MIN_TRACK_ITEMS`
+ * heuristic so the halved loop still fills the viewport with no visible gap.
+ */
+export const FewItems: Story = {
+  args: {
+    items: FAE_ITEMS.slice(0, 2),
+    onSelect: (item) => console.log('select', item.id),
+  },
+}
+
+/** Faster loop (`duration={15}`) and hover-pause disabled. */
+export const FastNoPause: Story = {
+  args: {
+    items: FAE_ITEMS,
+    duration: 15,
+    pauseOnHover: false,
+    onSelect: (item) => console.log('select', item.id),
+  },
+}

package/tailwind.config.ts

@@ -302,11 +302,18 @@ const config: Config = {
           from: { opacity: "0" },
           to: { opacity: "1" },
         },
+        // Endless chip strip (QuickActionMarquee): the track renders its items
+        // twice, so -50% lands exactly one copy over for a seamless loop.
+        "qa-marquee": {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-50%)" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "fade-in": "fade-in 0.3s ease-out",
+        "qa-marquee": "qa-marquee var(--qa-marquee-duration,40s) linear infinite",
       },
     },
   },