@discourser/design-system 0.15.0 → 0.15.1

package/src/components/ScenarioQueue/ScenarioQueue.test.tsx

@@ -0,0 +1,398 @@
+/* global describe, it, expect, vi, beforeEach */
+import React from 'react'
+import { render, screen, act } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ScenarioQueue } from './ScenarioQueue'
+import type { Scenario } from './types'
+
+// ── dnd-kit mock ──────────────────────────────────────────────────────────────
+// @dnd-kit/react's onDragEnd event uses source.initialIndex / source.index,
+// not source.id vs target.id. We capture the callback here so tests can
+// call it directly with the correct event shape.
+
+let capturedDragEnd: ((event: {
+  canceled: boolean
+  operation: { source: { id: unknown; index: number; initialIndex: number } | null }
+}) => void) | undefined
+
+vi.mock('@dnd-kit/react', () => ({
+  DragDropProvider: ({
+    children,
+    onDragEnd,
+  }: {
+    children: React.ReactNode
+    onDragEnd: typeof capturedDragEnd
+  }) => {
+    capturedDragEnd = onDragEnd
+    return React.createElement(React.Fragment, null, children)
+  },
+}))
+
+vi.mock('@dnd-kit/react/sortable', () => ({
+  useSortable: () => ({
+    ref: () => undefined,
+    handleRef: () => undefined,
+    isDragging: false,
+  }),
+}))
+
+// ── Fixtures ──────────────────────────────────────────────────────────────────
+// Mirrors the mock data in ScenarioQueue.stories.tsx
+
+const MOCK_QUEUE: Scenario[] = [
+  {
+    id: 'ux-research',
+    title: 'UX Research & Design Interview',
+    category: 'Design',
+    difficulty: 'beginner',
+    duration: '10-15 min',
+    status: 'queued',
+  },
+  {
+    id: 'biz-analysis',
+    title: 'Business Analysis ROI Design Presentation',
+    category: 'Business',
+    difficulty: 'intermediate',
+    duration: '15-25 min',
+    status: 'queued',
+  },
+  {
+    id: 'product-redesign',
+    title: 'Product Redesign Challenge',
+    category: 'Product',
+    difficulty: 'advanced',
+    duration: '25-35 min',
+    status: 'queued',
+  },
+]
+
+const MOCK_COMPLETED: Scenario[] = [
+  {
+    id: 'stakeholder-mgmt',
+    title: 'Stakeholder Management Scenario',
+    category: 'Leadership',
+    difficulty: 'intermediate',
+    duration: '20-30 min',
+    status: 'completed',
+  },
+  {
+    id: 'agile-sprint',
+    title: 'Agile Sprint Planning Session',
+    category: 'Process',
+    difficulty: 'beginner',
+    duration: '10-15 min',
+    status: 'completed',
+  },
+]
+
+const ALL_SCENARIOS = [...MOCK_QUEUE, ...MOCK_COMPLETED]
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function simulateDrag(initialIndex: number, newIndex: number) {
+  act(() => {
+    capturedDragEnd?.({
+      canceled: false,
+      operation: {
+        source: { id: MOCK_QUEUE[initialIndex]?.id ?? 'item', initialIndex, index: newIndex },
+      },
+    })
+  })
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('ScenarioQueue', () => {
+  beforeEach(() => {
+    capturedDragEnd = undefined
+  })
+
+  // ── Rendering ───────────────────────────────────────────────────────────────
+
+  describe('Rendering', () => {
+    it('queue tab is the default active tab', () => {
+      render(<ScenarioQueue scenarios={ALL_SCENARIOS} />)
+
+      const queueTab = screen.getByRole('tab', { name: 'In Queue' })
+      expect(queueTab).toHaveAttribute('aria-selected', 'true')
+    })
+
+    it('queue tab renders 3 scenario cards by default', () => {
+      render(<ScenarioQueue scenarios={ALL_SCENARIOS} />)
+
+      expect(screen.getByText('UX Research & Design Interview')).toBeInTheDocument()
+      expect(
+        screen.getByText('Business Analysis ROI Design Presentation'),
+      ).toBeInTheDocument()
+      expect(screen.getByText('Product Redesign Challenge')).toBeInTheDocument()
+    })
+
+    it('switching to Completed tab makes 2 completed cards visible', async () => {
+      const user = userEvent.setup()
+      render(<ScenarioQueue scenarios={ALL_SCENARIOS} />)
+
+      await user.click(screen.getByRole('tab', { name: 'Completed' }))
+
+      expect(screen.getByText('Stakeholder Management Scenario')).toBeVisible()
+      expect(screen.getByText('Agile Sprint Planning Session')).toBeVisible()
+    })
+
+    it('header count reflects total number of scenarios', () => {
+      render(<ScenarioQueue scenarios={ALL_SCENARIOS} />)
+      expect(screen.getByText('5 scenarios')).toBeInTheDocument()
+    })
+
+    it('queue tab cards show drag handle, position badge, title, difficulty, duration', () => {
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      // Drag handles — one per queued card
+      expect(screen.getAllByLabelText('Drag to reorder')).toHaveLength(3)
+
+      // Position badges
+      expect(screen.getByLabelText('Position 1')).toBeInTheDocument()
+      expect(screen.getByLabelText('Position 2')).toBeInTheDocument()
+      expect(screen.getByLabelText('Position 3')).toBeInTheDocument()
+
+      // Titles, difficulty labels, durations
+      expect(screen.getByText('UX Research & Design Interview')).toBeInTheDocument()
+      expect(screen.getByText('Beginner')).toBeInTheDocument()
+      expect(screen.getByText('10-15 min')).toBeInTheDocument()
+    })
+
+    it('completed tab cards show title, difficulty, duration and re-queue toggle — no drag handle, no position badge', async () => {
+      const user = userEvent.setup()
+      // Render only completed — ensures zero drag handles exist anywhere in DOM
+      render(<ScenarioQueue scenarios={MOCK_COMPLETED} />)
+
+      await user.click(screen.getByRole('tab', { name: 'Completed' }))
+
+      // Cards are present
+      expect(screen.getByText('Stakeholder Management Scenario')).toBeInTheDocument()
+      expect(screen.getByText('Agile Sprint Planning Session')).toBeInTheDocument()
+
+      // Re-queue toggles present
+      expect(
+        screen.getByLabelText('Re-queue Stakeholder Management Scenario'),
+      ).toBeInTheDocument()
+      expect(
+        screen.getByLabelText('Re-queue Agile Sprint Planning Session'),
+      ).toBeInTheDocument()
+
+      // No drag handles or position badges anywhere
+      expect(screen.queryByLabelText('Drag to reorder')).not.toBeInTheDocument()
+      expect(screen.queryByLabelText(/^Position \d/)).not.toBeInTheDocument()
+    })
+
+    it('empty queue tab shows empty state message', () => {
+      render(<ScenarioQueue scenarios={MOCK_COMPLETED} />)
+      expect(screen.getByText('No scenarios in queue')).toBeInTheDocument()
+    })
+
+    it('empty completed tab shows empty state message', async () => {
+      const user = userEvent.setup()
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      await user.click(screen.getByRole('tab', { name: 'Completed' }))
+
+      expect(screen.getByText('No completed scenarios')).toBeInTheDocument()
+    })
+  })
+
+  // ── Position Numbering & Active Card Styling ────────────────────────────────
+
+  describe('Position Numbering', () => {
+    it('shows sequential position numbers 1, 2, 3 matching array order', () => {
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      expect(screen.getByLabelText('Position 1')).toHaveTextContent('1')
+      expect(screen.getByLabelText('Position 2')).toHaveTextContent('2')
+      expect(screen.getByLabelText('Position 3')).toHaveTextContent('3')
+    })
+
+    it('position badges are in the correct DOM order (1 before 2 before 3)', () => {
+      const { container } = render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      const badges = container.querySelectorAll('[aria-label^="Position"]')
+      expect(badges[0]).toHaveAccessibleName('Position 1')
+      expect(badges[1]).toHaveAccessibleName('Position 2')
+      expect(badges[2]).toHaveAccessibleName('Position 3')
+    })
+  })
+
+  // ── Difficulty Badge Attributes ─────────────────────────────────────────────
+
+  describe('Difficulty Badge Attributes', () => {
+    it('beginner card renders data-difficulty="beginner" on its badge', () => {
+      const { container } = render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      // At least one element (difficultyBadge) must carry data-difficulty="beginner"
+      expect(
+        container.querySelector('[data-difficulty="beginner"]'),
+      ).toBeInTheDocument()
+    })
+
+    it('intermediate card renders data-difficulty="intermediate" on its badge', () => {
+      const { container } = render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      expect(
+        container.querySelector('[data-difficulty="intermediate"]'),
+      ).toBeInTheDocument()
+    })
+
+    it('advanced card renders data-difficulty="advanced" on its badge', () => {
+      const { container } = render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      expect(
+        container.querySelector('[data-difficulty="advanced"]'),
+      ).toBeInTheDocument()
+    })
+
+    it('difficulty label text matches the difficulty value', () => {
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      expect(screen.getByText('Beginner')).toBeInTheDocument()
+      expect(screen.getByText('Intermediate')).toBeInTheDocument()
+      expect(screen.getByText('Advanced')).toBeInTheDocument()
+    })
+  })
+
+  // ── Re-queue Flow ───────────────────────────────────────────────────────────
+
+  describe('Re-queue Flow', () => {
+    it('toggling the re-queue switch calls onRequeue with the scenario ID', async () => {
+      const user = userEvent.setup()
+      const onRequeue = vi.fn()
+      render(<ScenarioQueue scenarios={ALL_SCENARIOS} onRequeue={onRequeue} />)
+
+      await user.click(screen.getByRole('tab', { name: 'Completed' }))
+
+      // Switch starts checked (defaultChecked). Click to uncheck → triggers re-queue.
+      const switchEl = screen.getByLabelText('Re-queue Stakeholder Management Scenario')
+      await user.click(switchEl)
+
+      expect(onRequeue).toHaveBeenCalledWith('stakeholder-mgmt')
+      expect(onRequeue).toHaveBeenCalledTimes(1)
+    })
+
+    it('re-queued card with wasRequeued=true shows Repeat badge in queue tab', () => {
+      const requeued: Scenario = {
+        ...MOCK_COMPLETED[0],
+        status: 'queued',
+        wasRequeued: true,
+      }
+      render(<ScenarioQueue scenarios={[...MOCK_QUEUE, requeued]} />)
+
+      expect(screen.getByText('Repeat')).toBeInTheDocument()
+    })
+
+    it('re-queued card appears as position 4 at end of queue', () => {
+      const requeued: Scenario = {
+        ...MOCK_COMPLETED[0],
+        status: 'queued',
+        wasRequeued: true,
+      }
+      render(<ScenarioQueue scenarios={[...MOCK_QUEUE, requeued]} />)
+
+      expect(screen.getByLabelText('Position 4')).toHaveTextContent('4')
+    })
+
+    it('cards without wasRequeued flag do not show Repeat badge', () => {
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+      expect(screen.queryByText('Repeat')).not.toBeInTheDocument()
+    })
+
+    it('only the re-queued card shows the Repeat badge, not other queue cards', () => {
+      const requeued: Scenario = {
+        ...MOCK_COMPLETED[0],
+        status: 'queued',
+        wasRequeued: true,
+      }
+      render(<ScenarioQueue scenarios={[...MOCK_QUEUE, requeued]} />)
+
+      // Exactly one Repeat badge
+      expect(screen.getAllByText('Repeat')).toHaveLength(1)
+    })
+  })
+
+  // ── Drag-Drop Reorder ───────────────────────────────────────────────────────
+
+  describe('Drag-Drop Reorder', () => {
+    it('simulated reorder calls onReorder with new ID order', () => {
+      const onReorder = vi.fn()
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} onReorder={onReorder} />)
+
+      // Move card at index 0 (ux-research) to index 1
+      simulateDrag(0, 1)
+
+      expect(onReorder).toHaveBeenCalledWith([
+        'biz-analysis',
+        'ux-research',
+        'product-redesign',
+      ])
+    })
+
+    it('position badge numbers update to reflect new array order after reorder', () => {
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      // Move card 0 (ux-research) to index 2 (last position)
+      simulateDrag(0, 2)
+
+      // The 3 positions should still exist (numbers 1, 2, 3)
+      expect(screen.getByLabelText('Position 1')).toHaveTextContent('1')
+      expect(screen.getByLabelText('Position 2')).toHaveTextContent('2')
+      expect(screen.getByLabelText('Position 3')).toHaveTextContent('3')
+    })
+
+    it('after reorder, position badges are in the correct DOM order', () => {
+      const { container } = render(<ScenarioQueue scenarios={MOCK_QUEUE} />)
+
+      simulateDrag(0, 2)
+
+      // The DOM order of position badges should be 1 → 2 → 3 top to bottom
+      const badges = container.querySelectorAll('[aria-label^="Position"]')
+      expect(badges[0]).toHaveAccessibleName('Position 1')
+      expect(badges[1]).toHaveAccessibleName('Position 2')
+      expect(badges[2]).toHaveAccessibleName('Position 3')
+    })
+
+    it('canceled drag does not update positions or call onReorder', () => {
+      const onReorder = vi.fn()
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} onReorder={onReorder} />)
+
+      act(() => {
+        capturedDragEnd?.({
+          canceled: true,
+          operation: {
+            source: { id: 'ux-research', initialIndex: 0, index: 1 },
+          },
+        })
+      })
+
+      expect(onReorder).not.toHaveBeenCalled()
+      // Positions unchanged
+      expect(screen.getByLabelText('Position 1')).toHaveTextContent('1')
+    })
+
+    it('drag to same index does not update positions or call onReorder', () => {
+      const onReorder = vi.fn()
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} onReorder={onReorder} />)
+
+      simulateDrag(1, 1) // same index — no-op
+
+      expect(onReorder).not.toHaveBeenCalled()
+    })
+
+    it('drag with null source does not throw or call onReorder', () => {
+      const onReorder = vi.fn()
+      render(<ScenarioQueue scenarios={MOCK_QUEUE} onReorder={onReorder} />)
+
+      expect(() => {
+        act(() => {
+          capturedDragEnd?.({ canceled: false, operation: { source: null } })
+        })
+      }).not.toThrow()
+
+      expect(onReorder).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/components/ScenarioQueue/ScenarioQueue.tsx

@@ -0,0 +1,162 @@
+'use client'
+import { DragDropProvider } from '@dnd-kit/react'
+import { useState, useEffect, type ComponentProps } from 'react'
+import { css } from 'styled-system/css'
+import { Box, Center } from 'styled-system/jsx'
+import { scenarioQueue } from 'styled-system/recipes'
+import { Button } from '../Button'
+import * as Tabs from '../Tabs'
+import { AddScenarioDialog } from './AddScenarioDialog'
+import { ScenarioCard } from './ScenarioCard'
+import { ScenarioCardDraggable } from './ScenarioCardDraggable'
+import type { ScenarioQueueProps, Scenario } from './types'
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function arrayMove<T>(array: T[], from: number, to: number): T[] {
+  const next = [...array]
+  const [item] = next.splice(from, 1)
+  next.splice(to, 0, item)
+  return next
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function ScenarioQueue({
+  scenarios,
+  onReorder,
+  onRequeue,
+  onRemove: _onRemove,
+  renderAddScenarioContent,
+  onBrowseMore,
+  onBuildCustom,
+}: ScenarioQueueProps) {
+  const queuedRaw = scenarios.filter((s) => s.status === 'queued')
+  const completed = scenarios.filter((s) => s.status === 'completed')
+
+  // Local ordering state — mirrors queuedRaw but supports optimistic drag reorder
+  const [localQueue, setLocalQueue] = useState<Scenario[]>(queuedRaw)
+
+  // Sync when the canonical scenarios list changes externally
+  useEffect(() => {
+    setLocalQueue(queuedRaw)
+  }, [scenarios])
+
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const totalCount = localQueue.length + completed.length
+
+  // useSortable adds index + initialIndex to the draggable at runtime; cast here
+  // since @dnd-kit/react's static Draggable<Data> type doesn't declare them.
+  type SortableSource = { index: number; initialIndex: number } & Record<string, unknown>
+
+  const handleDragEnd: NonNullable<ComponentProps<typeof DragDropProvider>['onDragEnd']> = (event) => {
+    if (event.canceled) return
+    const source = event.operation?.source as SortableSource | null
+    if (!source) return
+
+    const oldIndex = source.initialIndex
+    const newIndex = source.index
+
+    if (oldIndex === newIndex) return
+
+    const next = arrayMove(localQueue, oldIndex, newIndex)
+    setLocalQueue(next)
+    onReorder?.(next.map((s) => s.id))
+  }
+
+  const styles = scenarioQueue()
+
+  return (
+    <Box className={styles.root}>
+      {/* Header */}
+      <Box className={styles.header}>
+        <Box className={styles.title}>Scenario Queue</Box>
+        <Box className={styles.count}>
+          {totalCount} scenario{totalCount !== 1 ? 's' : ''}
+        </Box>
+      </Box>
+
+      {/* Tabs.Root gets tabsInner directly — no wrapper div needed.
+          flex:1 + minHeight:0 allows content panels to scroll independently
+          without the panel expanding indefinitely. */}
+      <Tabs.Root
+        defaultValue="queue"
+        variant="line"
+        size="md"
+        colorPalette="primary"
+        className={styles.tabsInner}
+      >
+        <Box className={styles.tabList}>
+          <Tabs.List className={css({ borderBottomWidth: '0' })}>
+            <Tabs.Trigger value="queue">In Queue</Tabs.Trigger>
+            <Tabs.Trigger value="completed">Completed</Tabs.Trigger>
+            <Tabs.Indicator />
+          </Tabs.List>
+        </Box>
+
+        {/* In Queue tab */}
+        <Tabs.Content value="queue" className={styles.tabsContent}>
+          {localQueue.length === 0 ? (
+            <Center className={styles.emptyState}>No scenarios in queue</Center>
+          ) : (
+            <DragDropProvider onDragEnd={handleDragEnd}>
+              <Box className={styles.scrollArea}>
+                {localQueue.map((scenario, index) => (
+                  <ScenarioCardDraggable
+                    key={scenario.id}
+                    scenario={scenario}
+                    index={index}
+                    position={index + 1}
+                    isActive={index === 0}
+                    isRepeat={scenario.wasRequeued ?? false}
+                  />
+                ))}
+              </Box>
+            </DragDropProvider>
+          )}
+        </Tabs.Content>
+
+        {/* Completed tab */}
+        <Tabs.Content value="completed" className={styles.tabsContent}>
+          {completed.length === 0 ? (
+            <Center className={styles.emptyState}>No completed scenarios</Center>
+          ) : (
+            <Box className={styles.scrollArea}>
+              {completed.map((scenario, index) => (
+                <ScenarioCard
+                  key={scenario.id}
+                  scenario={scenario}
+                  position={index + 1}
+                  isActive={false}
+                  showRequeueSwitch
+                  onRequeue={onRequeue}
+                />
+              ))}
+            </Box>
+          )}
+        </Tabs.Content>
+      </Tabs.Root>
+
+      {/* Pinned "Add Scenario" button — always visible, never scrolls */}
+      <Box className={styles.addButtonArea}>
+        <Button
+          variant="outline"
+          colorPalette="primary"
+          size="md"
+          className={styles.addButton}
+          onClick={() => setDialogOpen(true)}
+        >
+          + Add Scenario
+        </Button>
+      </Box>
+
+      <AddScenarioDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        renderContent={renderAddScenarioContent}
+        onBrowseMore={onBrowseMore}
+        onBuildCustom={onBuildCustom}
+      />
+    </Box>
+  )
+}

package/src/components/ScenarioQueue/index.ts

@@ -0,0 +1,11 @@
+export { ScenarioQueue } from './ScenarioQueue'
+export { ScenarioCard } from './ScenarioCard'
+export { AddScenarioDialog } from './AddScenarioDialog'
+export type {
+  ScenarioQueueProps,
+  ScenarioCardProps,
+  Scenario,
+  Difficulty,
+  ScenarioStatus,
+} from './types'
+export { difficultyColorMap, difficultyLabel } from './types'

package/src/components/ScenarioQueue/types.ts

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+
+// ──────────────────────────────────────────────
+// Data Types
+// ──────────────────────────────────────────────
+
+export type Difficulty = 'beginner' | 'intermediate' | 'advanced'
+
+export type ScenarioStatus = 'queued' | 'completed'
+
+export interface Scenario {
+  id: string
+  title: string
+  category: string
+  difficulty: Difficulty
+  /** Display string, e.g. "10-15 min" */
+  duration: string
+  status: ScenarioStatus
+  /** True when this card was previously completed and re-queued by the user */
+  wasRequeued?: boolean
+}
+
+// ──────────────────────────────────────────────
+// Difficulty → Badge colorPalette mapping
+// ──────────────────────────────────────────────
+
+export const difficultyColorMap: Record<Difficulty, 'primary' | 'secondary' | 'tertiary'> = {
+  beginner: 'primary',
+  intermediate: 'secondary',
+  advanced: 'tertiary',
+}
+
+export const difficultyLabel: Record<Difficulty, string> = {
+  beginner: 'Beginner',
+  intermediate: 'Intermediate',
+  advanced: 'Advanced',
+}
+
+// ──────────────────────────────────────────────
+// Component Props
+// ──────────────────────────────────────────────
+
+export interface ScenarioQueueProps {
+  /** All scenarios — the component splits them by status internally */
+  scenarios: Scenario[]
+
+  /** Called when user reorders cards in the "In Queue" tab */
+  onReorder?: (reorderedIds: string[]) => void
+
+  /** Called when user toggles a completed scenario back to the queue */
+  onRequeue?: (scenarioId: string) => void
+
+  /** Called when user removes a scenario from the queue */
+  onRemove?: (scenarioId: string) => void
+
+  /**
+   * Render prop / slot for the Add Scenario modal body.
+   * The design system provides the Dialog shell; the consumer (discourser.ai)
+   * provides the collection content.
+   *
+   * Receives `onClose` to allow the consumer to close the modal after selection.
+   */
+  renderAddScenarioContent?: (props: { onClose: () => void }) => ReactNode
+
+  /** Called when user clicks "Browse More Scenarios" link inside the modal */
+  onBrowseMore?: () => void
+
+  /** Called when user clicks "Build Custom Scenario" link inside the modal */
+  onBuildCustom?: () => void
+}
+
+export interface ScenarioCardProps {
+  scenario: Scenario
+  /** 1-based position number shown in the circle badge */
+  position: number
+  /** Whether this card is the active (first) scenario */
+  isActive: boolean
+  /** Show the re-queue switch (used in Completed tab) */
+  showRequeueSwitch?: boolean
+  /** Called when re-queue switch is toggled */
+  onRequeue?: (scenarioId: string) => void
+  /** Whether this is a repeat scenario */
+  isRepeat?: boolean
+  /** Visual state while the card is being dragged (applies opacity) */
+  isDragging?: boolean
+}

package/src/components/index.ts

@@ -44,8 +44,27 @@ export * as Tooltip from './Tooltip';
 // Utility Components (namespace pattern - may have multiple exports)
 export * as CloseButton from './CloseButton';
 export * as Icon from './Icon';
+
+// Icons (individual icon components)
+export { GripDotsVerticalIcon, type GripDotsVerticalIconProps } from './Icons/GripDotsVerticalIcon';
+export { ClockIcon, type ClockIconProps } from './Icons/ClockIcon';
 export * as AbsoluteCenter from './AbsoluteCenter';
 export * as Group from './Group';
 
 // Navigation & Progress Components
+export * as Breadcrumb from './Breadcrumb';
 export { Stepper, type StepperRootProps, type StepItem } from './Stepper';
+
+// Composite / Feature Components
+export {
+  ScenarioQueue,
+  ScenarioCard,
+  AddScenarioDialog,
+  difficultyColorMap,
+  difficultyLabel,
+  type ScenarioQueueProps,
+  type ScenarioCardProps,
+  type Scenario,
+  type Difficulty,
+  type ScenarioStatus,
+} from './ScenarioQueue';